Udacity: Interactive 3D Rendering

Core Ideas

  1. Refresh Rate, Frames Per Second(FPS), and CPU Cycles.
  2. Human Eyes captures light, but it’s the brain’s interpretation/compensation that matters.
    • Rotates the image to “correct side up”.
    • Fill in the blind spot with surrounding environments.
    • Adjust light: Checker shadow illusion
  3. Pinhole Camera: captures image up-side-down.
  4. 3D Scene: Objects(3D Geometry & Material) + Lights + Camera

Go explore Michael Bach’s collection on optical illusions.

Computer Graphics

Too expensive to track photons directly(reflecting, etc.), computers render images by making simplied assumptions:

  1. Only photons that reach the cemera need to be considered.
  2. Reverse the process: start from the camera.

The teapot is one the most iconic models used in computer graphics.

GPU: Graphic Processing Unit -> A Jog Down the Pipeline

  1. Application sends Triangles.
  2. Camera & Model Transformation:
    • Move the object to its next location.
    • The object is within the view frastum?
    • Compute the location of the triangle on the screen.
  3. Rasterization.

What if two triangles end up on the same location on screen? Painter’s Algorithm: Paint object one by one starting from the furthest to the closest. However, Painter’s Algorithm can’t properly render the following image.

Z-Buffer: Z-Depth, the distance of the object to the camera, usually a float number from 0 to 1.

· JavaScript