Class 9

🛠️ 3D Graphics

The Graphics pipeline

Basic layout & 3d thinking

What tasks are handled on each?
- Shader code and pixel display operations are handled on the GPU
- Most of the code that you write is on the CPU, unless you're writing shaders or OpenGL code
  - Under the hood of p5js & Processing, there's a ton of OpenGL/WebGL code, so know how this stuff works is helpful to know what your performance bottlenecks might be
What's optimized on the GPU
- It depends on the platform and tools
  - For example, certain parts of web browser rendering happen on the GPU, but differs per browser
- Textures & texture operations
  - Loading an image file is almost always faster than drawing vector data
- Cached Geometry with p5.Geometry and buildGeometry()
cpu.land
CPU vs GPU vs TPU vs DPU vs QPU

@ Wikipedia
p5js CV examples
- https://github.com/kylemcdonald/cv-examples (need to change p5js version number)
Processing OpenCV library - older classic CV algorithms
Basic, custom CV
Interesting cameras:
- Depth (Kinect / Realsense)
- High framerate
- Thermal
- Infrared (night vision)

Read:

Watch:

Listen to an episode from either podcast:

Build something with 3D graphics or computer vision

3D Graphics ideas
- Start with WEBGL mode in p5js
  - This moves the coordinate system to the center of the screen
- Use �ox(), sphere() and other 3d primitive functions to create shapes
  - p5js has additional 3d shapes like orus()
3D Stretch goals
- Create your own 3d geometry with �eginShape(), �ertex(), and �ndShape()
- Apply a texture to your geometry
- Load a 3d model with loadModel()
- Use a shader to create a custom material for your 3d geometry
Computer Vision resources
- Video Capture example
- ml5.js image classification
  - From: Beginners Guide to Machine Learning in JavaScript
- Processing: Shiffman: Capture and Live Video
- Processing: Introduction to Webcam Effects with Processing