Prev: W5, Next: W7
Links: Zoom, TopHat (993679, or Form), Calculator:
Slide:

# Infer 3D from 2D Images

📗 3D cues from 2D images include:
➩ Occlusion.
➩ Perspective.
➩ Lighting.
➩ Texture.
📗 3D can be inferred (incorrectly) from 2D drawings, like 3D street art illusions: Link.

# Hello Cube in THREE.js

📗 The steps to draw a cube:
➩ Create the canvas and set up.
➩ Create the world.
➩ Create the cube and put it into the world.
➩ Give it a Material (how it should look).
➩ Make a Camera (transform 3D to 2D).
➩ Draw.
Demo hello_cube



# Scene Graph API

📗 let renderer = new THREE.WebGLRender({canvas : canvas}) creates the 3D "context" for the Canvas canvas: Doc.
📗 let scene = new THREE.Scene(); creates the root of the tree: a container for objects: Doc.
📗 let geometry = new THREE.BoxGeometry(1, 1, 1); produces a collection of triangles that form a cube or box. Every geometry is made up of triangles: Doc
📗 let material = new THREE.MeshStandardMaterial({ color: "green" }); creates the material (what the object is made out of). Materials include surface properties and how it interacts with light:  Doc.
📗 let mesh = new THREE.Mesh(geometry, materials); creates a THREE graphics object: Doc.
➩ Note: unfortunate naming, in computer graphics, a "Mesh" usually means a collection of triangles (which is "Geometry" in THREE.js).
📗 scene.add(mesh) addes the mesh into the scene.
📗 let camera = new THREE.PerspectiveCamera(); creates a camera that projects the scene onto the screen. Camera is a viewing transformation from the scene coordinates to the screen coordinates: Doc.
📗 renderer.render(scene, camera); draws everything (takes a picture of the scene using the camera). Animation loop can be used if the scene or the camera is updated every frame.



# Graphics Abstractions

📗 THREE.js is a mid-level graphics API: Doc.
📗 THREE.js takes care of interaction with the hardware.

Graphics abstractions THREE.js
Have a world Scene
Make objects from primitives Geometries, Meshes
Place objects in world Transformations, Hierarchy
Figure out what color or style Materials, Lights
Transform to screen Cameras
Figure out what is visible and color the pixels Renderer


# Lights! (Camera! Action!)

📗 If a perspective camera is used, a light needs to be added to the scene so anything can be seen. Common types of lights in THREE:
➩ Ambient: lights all objects equally: Doc.
➩ Point: emits light in all directions from a point like a light bulb: Doc.
➩ Directional: emits light in a specific direction like the sun light: Doc.
➩ Spot: emits light from a point in one direction that forms a cone: Doc.
📗 Lights are just objects in THREE. They have position and orientation like other objects.

# Light Helper [TopHat]

📗 Change the position of the light so that only one of the objects can be seen.
📗 Change the color of the light so that only one of the objects can be seen.
Demo light



# Surface Materials

📗 The object's material responds to lights.
📗 The color of a point (pixel) depends on:
➩ The surface properties (shininess, roughness, metalness).
➩ The surface orientation.
➩ The color and intensity of the light.
➩ The direction of the light.
📗 Local lighting refers light that travels directly from source to a point: no shadows, reflections, spill.

# Materials and Colors [TopHat]

📗 Change the material to highlight diffuse or specular lighting: Wikipedia and Wikipedia.
Demo material



# Camera! (Action!)

📗 Orthographic camera uses orthographic projection: Wikipedia.
📗 Orthographic camera in THREE is OrthographicCamera(left, right, top, bottom, near, far) specifies the box it sees. The objects inside the box (called camera frustum) are visible to the camera: Doc.
📗 Perspective camera uses perspective projection: Wikipedia.
📗 Perspective camera in THREE is PerspectiveCamera(fov, aspect, near, far) specifies the (vertical) field of view in degrees, the aspect ratio (should match the canvas), and the distance of the near and far planes (the volumn between the two planes is the camera frustum): Doc.
📗 Camera diagrams: Doc.
Math Notes: The camera transformation (in homogeneous coordinates) is linear with the transformation matrix, \(\begin{bmatrix} d & 0 & 0 & 0 \\ 0 & d & 0 & 0 \\ 0 & 0 & 0 & 1 \\ 0 & 0 & 1 & 0 \end{bmatrix}\), when when applied (multiplied) by a point in 3D in homogeneous coordinates \(\begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix}\), the resulting point in 2D is given by \(\begin{bmatrix} d \dfrac{x}{z} \\ d \dfrac{y}{z} \end{bmatrix}\).

# Camera Transformation

📗 Camera is an object in the scene: the same transformations applied to the objects can be applied to the camera.
📗 Camera can be specified by:
➩ position (or lookFrom): where to put the camera.
➩ lookAt: points the camera at a point.
➩ up (or vUp): extra degree of freedom to specify the direction of up by rotating the camera.
📗 Note: camera.position and camera.up are Vector3s: Doc, and camera.lookAt(...) is a function.
📗 Professor Gleicher's demo: Link.

# Camera Helper [TopHat]

📗 Change camera so that all objects are visible.
Demo camera



# Action!

📗 Animation loop is the same as in 2D with window.requestAnimationFrame(...);
📗 The drawing function should update the objects in the scene after each frame then call renderer.render(scene, camera).
📗 THREE is a scene-graph API, so objects are updated, not redrawn (re-created) after every frame like in HTML Canvas.

Easy Hard
Change a transformation Change points (vertices) in mesh
Change some material properties Change a material
Change a light property Change a light type
... ...


# Animation using State [TopHat]

📗 Animate the red object so it rotates on the ground.
📗 Animate the green object so it jumps on the ground.
📗 Animate the blue object so it shrinks and expands in size.
Demo action_state

# Animation using Transformation [TopHat]

📗 Animate the red object so it rotates on the ground.
📗 Animate the green object so it jumps on the ground.
📗 Animate the blue object so it shrinks and expands in size (cannot be done here).
Demo action_transform



# Note on THREE Transformation

📗 Animation can be done by modifying the state (property of objects) or applying transformations.

State Transformation
obj.position obj.translateX(...); obj.translateY(...); obj.translateZ(...);
- obj.translateOnAxis(u, ...); for unit vector u
obj.rotation obj.rotateX(...); obj.rotateY(...); obj.rotateZ(...);
- obj.rotateOnAxis(u, ...); for unit vector u
obj.scale no


📗 Note: rotations can also be set from axis-angle, Euler-angle, or quaternion (next lecture).

# Hierarchy [TopHat]

📗 Animate the objects so that green object rotates around the blue object and the red object looks at it.
Demo hierarchy

# Lecture Summary

📗 3D graphics abstractions.
📗 THREE.js basics.
📗 Lights and materials.
📗 Camera and projection.
📗 Object hierarchy.
📗 Animation loop.


📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can expand all the examples and demos: , or print the notes: .
📗 If there is an issue with TopHat during the lectures, please submit your answers on paper (include your Wisc ID and answers) or this Google Form at the end of the lecture.

Prev: W5, Next: W7





Last Updated: January 28, 2025 at 1:22 AM