Page 28: Last Page (rubric)

Here is a concise summary of the key concepts from the workbook:

1. Foundations of 3D Graphics and Perception

• Perceiving 3D: We see in 2D, but our brains interpret 3D depth using visual cues such as occlusion, perspective, relative size, and lighting.
• High-Level APIs vs. Hardware: WebGL and WebGPU are low-level, hardware-oriented APIs that require complex shader programming. The course uses three.js, a high-level API that abstracts these details into intuitive graphics concepts like scenes, cameras, and materials.
• Coordinate Systems: 3D graphics typically use a right-handed coordinate system. In three.js, the X-axis goes right, the Y-axis goes up, and the Z-axis points out of the screen toward the viewer.
• Triangles: Triangles are the fundamental primitive in computer graphics, utilizing normal vectors (facing outward) to determine how they interact with light.

2. Building the Scene

• Meshes: Visible objects in three.js are typically Mesh objects, which pair a BufferGeometry (a collection of triangles) with a Material (the “stuff” determining appearance and color).
• Loading Models: Complex shapes can be loaded asynchronously using file formats like OBJ or GLTF via callback functions or Promises.
• Materials & Lighting: The workbook focuses on local lighting models, where color depends only on the light source, material properties, and object geometry, ignoring complex global effects like shadows and reflections for now. Three.js supports ambient, point, directional, and spot lights.
• Viewing & Cameras: Converting a 3D world to a 2D screen involves a Camera transform (positioning/aiming using a “lookat” function) and a Projection transform. Projections are typically Perspective (objects get smaller as they get further away) or Orthographic (size is preserved).

3. Motion and Transformations

• Transformations: Objects are moved using translation, rotation, and scaling. In three.js, transformation order matters, but the library automatically composes them in a fixed order (translation, then rotation, then scale) when setting object states.
• Rotations: 3D rotations are mathematically complex.
  • Euler Angles apply rotations sequentially around fixed axes (e.g., X, then Y, then Z).
  • Axis-Angle rotates an object by a specific angle around an arbitrary directional vector.
  • Quaternions are 4D representations used internally by three.js to avoid Euler angle issues and allow smooth interpolation.
• Hierarchical Modeling: Objects can act as parents to other objects (creating a Scene Graph). A child object’s transformations are relative to its parent’s coordinate system, which is essential for creating articulated objects like a quadcopter or construction equipment.
• CS559 Framework: The workbook introduces a custom framework (GrWorld and GrObject) that wraps three.js to handle boilerplate code (like setting up renderers and lighting) and auto-generates UI sliders to control object parameters easily.