📗 Some geometries can be constructed from 2D shapes or 3D curves.
➭ THREE.ShapeGeometry produces triangles representing a flat 2D shape (THREE.Shape): Doc.
➭ THREE.ExtrudeGeometry produces triangles representing extruded 2D shape (THREE.Shape): Doc.
➭ THREE.LatheGeometry produces triangles representing a surface of revolution around the Y axis (a list of points in 2D or THREE.Vector2): Doc.
➭ THREE.TubeGeometry produces triangles representing a generalized cylinder (circles moving along a path) along a curve (THREE.Curve): Doc.
📗 Create a THREE.Shape for the THREE.ShapeGeometry and the THREE.ExtrudeGeometry: Doc.
📗 The following methods are the same as the ones in 2D (THREE.Shape is a child class of THREE.Path which provides this methods):
➭ THREE.Shape.moveTo(x, y);THREE.Shape.lineTo(x, y);
➭ THREE.Shape.arc(x, y, r, a0, a1);THREE.Shape.ellipse(x, y, rx, ry, a0, a1);
➭ THREE.Shape.quadraticCurveTo(x1, y1, x2, y2);THREE.Shape.bezierCurveTo(x1, y1, x2, y2, x3, y3); Demo extrude
📗 Create a THREE.Curve for the THREE.TubeGeometry.
📗 These are curves in 3D, but similar to 2D curves just with 3 coordinates (points are THREE.Vector3:
➭ THREE.LineCurve3(v1, v2);
➭ THREE.QuadraticBezierCurve3(v1, v2, v3);
➭ THREE.CubicBezierCurve3(v1, v2, v3, v4);
➭ THREE.CatmullRomCurve3([v1, v2, ...], closed, "catmullrom", tension);, default tension is 0.5. Demo tube
📗 Similar to curve in 2D, surfaces in 3D can be represented by:
➭ Parametric: \(\left(x, y, z\right) = f\left(u, v\right)\).
➭ Implicit: \(f\left(x, y, z\right) = 0\).
➭ Procedural or subdivision.
📗 A cubic polynomial surface in parametric form is given by \(f\left(u, v\right) = a_{00} u^{0} v^{0} + a_{01} u^{1} v^{0} + a_{02} u^{2} v^{0} + ... + a_{33} u^{3} v^{3}\).
📗 Bezier surfaces, B-spline surfaces can be defined in a similar way as 2D curves (with basis function and control points).
📗 Subdivision schemes similar to 2D can be used to generate surfaces whose limit surfaces are Bezier or B-spline: Link or Wikipedia.
📗 Not in this course: Professor Sifakis sometimes offers the advanced graphics course CS839: Link.
📗 Some students interested in physical simulation might want to present their projects during the last lecture.
📗 Catmull-Clark subdivision scheme split each face into quadrilaterals (quads): Link.
➭ It splits each triangle into three quads.
➭ It splits each quad into four smaller quads
➭ The quads have the original vertices, midpoints of the original edges, and centers of the original faces.
➭ The limit surface is a \(C\left(2\right)\) B-spline surface (except at some "extraordinary vertices", it is \(C\left(1\right)\).
📗 THREE.js no longer support quads (used to be called THREE.Face4 for quads and THREE.Face3 for triangles.
📗 Loop subdivision scheme uses triangles: Link.
➭ It splits each triangle into four smaller triangles.
➭ The triangles have the original vertices, midpoints of the original edges, and centers of the original faces.
➭ The limit surface is a \(C\left(2\right)\) B-spline surface (except at some "extraordinary vertices", it is \(C\left(1\right)\).
📗 This can be done in THREE.js: Link.
📗 Transformation of a mesh apply to all vertices at the same time.
📗 There is limited animations that can be done with simple transformations.
📗 It is possible to apply multiple different transformations to different vertices of a single mesh, called skinning: Wikipedia.
➭ Pass multiple transformation matrices (matrix palette).
➭ Each vertex specifies which matrix it is part of (can be a vector of weights, which allows blending).
➭ A vertex can be in multiple transformations (multiple coordinate systems, weighted): \(p = w_{1} M_{1} p_{0} + w_{2} M_{2} p_{0} = \left(w_{1} M_{1} + w_{2} M_{2}\right) p_{0}\).
📗 Note: if \(M_{1}, M_{2}\) are rotations, \(w_{1} M_{1} + w_{2} M_{2}\) may not be a rotation, which could lead to artifacts.
📗 In THREE.js, THREE.SkinnedMesh can be used: Doc.
📗 Another alternative to blending between multiple different meshes (sets of vertices), called morphing: Wikipedia.
📗 Multiple meshes can be stored in the same geometry as morph targets.
📗 All meshes are sent to the hardware, and vertex interpolation is done between targets by changing the weights: \(p = w_{1} p_{1} + w_{2} p_{2} + w_{3} p_{3} + ...\) is the position of a vertex given the positions of the same vertex in 3 (or more) morph targets.
📗 In THREE.js, THREE.Mesh has properties THREE.Mesh.morphTargetDictionary (list of morph targets) and THREE.Mesh.morphTargetInfluences (weights on each morph target). An example: Link.
📗 A simple model of light is computing the color as the (weighted) sum of the color from four light sources:
➭ Emissive: object itself produces light.
➭ Ambient: surface color of the object.
➭ Diffuse: \(\hat{N} \cdot \hat{L}\), where \(\hat{N}\) is the surface normal, \(\hat{L}\) is the direction of the light source: Wikipedia.
➭ Specular: \(\left(\hat{E} \cdot \hat{R}\right)^{p} = \left(\hat{E} \cdot \left(2 \left(\hat{L} \cdot \hat{N}\right) \hat{N} - \hat{L}\right)\right)^{p}\), where \(\hat{E}\) is the direction of the camera (E stands for eye), \(R\) is the direction of the perfect mirror reflection of the light source, \(p\) is the Phong exponent for shininess: Wikipedia
📗 More details about this in a later lecture on Shaders.
📗 Fake cylinder demo by Professor Gleicher: Link.
📗 Fake wave demo by Professor Gleicher (old version of THREE.js): Link.
📗 Change the normals so that the surface looks curved. Demo buffer
📗 RGB values represent XYZ values of the normal vector.
📗 A normal map is difficult to draw by hand accurately, but the normal vectors can be computed and converted to RBG values set as the pixel values of an image. Demo texture_normal
📗 Draw a bump map so that the flat surface looks bumpy.
📗 The color intensities represent the depth of the bump (gray = middle, black = down, white = up). Demo texture_bump
📗 Normal and bump maps change the normal of a surface.
➭ They do not change the side view.
➭ They do not change the shape (geometry) or the triangles.
➭ They do not cause occlusions or shadows.
📗 There is also a displacement map that changes the positions of the vertices. CORRECTION: it does not alter the geometry, it just renders it differently with a different vertext shader.
📗 In THREE.js, THREE.MeshStandardMaterial.displacementMap can be set to a texture to displace the vertices.
📗 UV coordinates are used to look up the color of a point on a triangle.
➭ Every point on the triangle can be represented by its Barycentric coordinate (similar to the u position on a curve, but with two parameters): \(p = \alpha p_{1} + \beta p_{2} + \gamma p_{3}\) where \(p_{1}, p_{2}, p_{3}\) are vertices of the triangle.
➭ The corresponding point on the texture image can be found as: \(\begin{bmatrix} u \\ v \end{bmatrix} = \alpha \begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} + \beta \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} + \gamma \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) where \(\begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} , \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} , \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) are the UV values associated with \(p_{1}, p_{2}, p_{3}\) respectively.
📗 Built-in buffer geometries in THREE.js have preset UV values, so mapping texture onto the surfaces of cubes, spheres, etc, are simple.
📗 Given a point on the triangle, find its barycentric coordinates and find the corresponding points on the texture given the barycentric coordinates. Demo barycentric
📗 A pixel on screen may cover less than a pixel in the texture image.
📗 In this case, either the nearest pixel can be used or bi-linear interpolation can be used.
📗 THREE.js can specify THREE.Texture.magFilter as THREE.NearestFilter or LinearFilter: Link.
📗 A pixel on screen may cover an area in the texture image.
📗 In this case, MIP map (also called image pyramid: a set of the same image with different sizes) can be pre-computed and store, and smaller versions of the texture image can be used to look up the color: Wikipedia.
📗 Either the nearest MIP map can be used or linear interpolation between two MIP maps can be used, and within a MIP map, either the nearest pixel or bi-linear interpolation can be used.
📗 Having both linear interpolation between two MIP maps and bi-linear interpolation between pixels is also called tri-linear interpolation.
📗 THREE.js can specify THREE.Texture.minFilter as THREE.NearestMipmapNearestFilter, THREE.NearestMipmapLinearFilter, or THREE.LinearMipmapNearestFilter, THREE.LinearMipmapLinearFilter: Link.
📗 A single triangle can have more than one material property.
➭ For THREE.MeshStandardMaterial, there are metalnessMap, roughnessMap.
➭ For THREE.MeshPhongMaterial or THREE.MeshLambertMaterial, there is specularMap.
➭ For both, there are alphaMap (transparency), aoMap (ambient occlusion, or pre-computed self-shadow), emissiveMap (glow), lightMap (pre-computed light).
📗 They take in an image as the texture and use the RGB values of the pixels to change the material property based on the UV values.
📗 Professor Gleicher's example: Link.
📗 Shadow can also be mapped on objects as textures.
➭ Place a camera at the light source.
➭ Take a picture: the objects that are not visible to the light will create shadow.
➭ Use this picture as the texture (shadow map) of the object.
📗 In THREE.js:
➭ Tell the lights to cast shadow: THREE.PointLight.castShadow = true;
➭ Tell the objects to cast shadow: THREE.Mesh.castShadow = true;
➭ Tell the objects to receive shadow: THREE.Mesh.receiveShadow = true;
➭ Tell the renderer to do do this: THREE.WebGLRenderer.shadowMap.enabled = true;.
📗 A sky box can be used as the background of a scene: Wikipedia.
📗 It is a large box or sphere that always stays centered at the camera and far from the camera.
📗 A fake sky box can be built with a large box or sphere with texture on the inside.
📗 THREE.js can set a texture for the sky box by using scene.background = texture.
📗 Professor Gleicher's example of a fake sky box: Link, and real sky box: Link or Link.
📗 THREE.MeshStandardMaterial.envMap can be set as the same texture on an object to reflect the sky box.
📗 Environment maps do not use UV values.
📗 Since the sky box is fixed, its reflection on the objects are fixed too.
📗 For scenes with multiple objects or moving objects, the reflection can change:
➭ Draw the scene without reflection.
➭ Use a camera (cube camera) to take a picture at the position of the object.
➭ Use this picture as the texture (environment map) of the object.
➭ Repeat this multiple times.
📗 In THREE.js:
➭ Create a let camera = new THREE.CubeCamera(near, far, new THREE.WebGLCubeRenderTarget(size));: Doc.
➭ Change the position of the cube camera and take a picture using camera.update(renderer, scene);. It might be useful to make obj.visible = false; before taking the picture and obj.visible = true; after taking the picture.
➭ This can only be done once in THREE.js (cannot have reflections in reflections using just environment maps): Doc.
📗 This is also called multi-pass rendering.
📗 Professor Gleicher's example: Link and Link.
📗 Compare the reflection from using sky box vs cube camera.
📗 Environment map on materials with roughness = 0 and metalness = 1 looks like mirrors, and normal or bump maps also look good on these materials.
📗 The sky box texture can be found: Link. Demo texture_bump
📗 Textures are used to fake normal, material property, environment reflection and shadow because they can be implemented efficiently in the graphics hardware.
📗 More on the graphics pipeline and interaction with the graphics hardware in the last third of the semester.
📗 Surfaces and curves in 3D
📗 Polynomial surfaces
📗 Skinning and morphing
📗 Fake normals
📗 Normal vs bump vs displacement maps
📗 Environment and shadow maps
📗 Barycentric interpolation
📗 Minification and Magnification
📗 MIP maps
📗 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 print the notes: .
📗 Anonymous feedback can be submitted to: Form.