Prev: W7, Next: W9, Quiz of the week: Q8
Links: Zoom, TopHat (223815), Calculator:
Slide:

# Meshes

📗 A mesh (not THREE.Mesh, more like THREE.Geometry) is a collection of triangles (called faces). For example, the sphere geometry is approximated by a lot of triangles: Doc. 
➩ The triangles share vertices.
➩ The triangles reuse vertices.
➩ A mesh uses index set representation.

# Built-In Geometries

📗 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.



# Shape and Extrude Example [TopHat]

📗 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

# Lathe Example [TopHat]

📗 Create a list of THREE.Vector2 for the THREE.LatheGeometry.
Demo lathe

# Tube Example [TopHat]

📗 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



# Good Meshes

📗 Good triangles have the following property:
➩ Not too small.
➩ Not too elongated.
📗 Good meshes have the following property:
➩ Consistency of handedness.
➩ Avoid cracking (share vertices).
➩ Avoid T-junctions.

# Mesh Construction [TopHat]

📗 Write down the index set representation of a square made up of two triangles.
📗 Change the vertex list so that there is a crack.
📗 Change the vertex list so that there is a T-junction.
Demo buffer

# THREE.js Meshes

📗 Information about meshes:
➩ Transformation.
➩ Material.
📗 Information about vertices:
➩ Positions.
➩ Normals.
➩ Colors.



# Buffer Geometry

📗 In THREE.js BufferGeometry is used to store meshes made up of triangles: Doc.
➩ It has efficient representations: typed arrays.
➩ Designed for easy transmission to hardware.
📗 Buffers are blocks of memory organized for efficient transmission and use:
➩ Fixed data type (not dynamic type).
➩ Fixed layout.
📗 In THREE.js, the vertices are stored in THREE.BufferAttribute(new Float32Array([x0, y0, z0, x1, y1, z1, ...], 3), or three floats per vertex: Doc.
📗 Interleaved buffers are buffers with multiple attributes with possibly different types (for example, position, normal, color) in one single array.

# Triangle Soup

📗 Given a list of vertices [x0, y0, z0, x1, y1, z1, ...], the triangles are constructed using an index set [v0, v1, v2, v3, v4, v5, ...] where [v0, v1, v2] are the indices of the first triangle, [v3, v4, v5] are the indices of the second triangle, ...
📗 For example, to create the mesh for let geometry = new THREE.BufferGeometry();,
➩ let vertices = new Float32Array([x0, y0, z0, x1, y1, z1, ...]);
➩ geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
➩ geometry.setIndex(v0, v1, v2, v3, v4, v5, ...);
📗 Attributes for color and normal can be set in a similar way.



# Polynomial Surfaces

📗 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.

# Cubic Polynomial Surface

📗 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.

# More on Subdivision Surfaces

📗 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.



# Morphing

📗 Blending between multiple different meshes (sets of vertices) is 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.

# Morph a Sphere [TopHat]

📗 Compute the morph target (only one) to morph the sphere to a flat circle.
Demo morph

# Spot the Cow [TopHat]

📗 Spot the cow: Link.
Demo morph_cow



# Skinning

📗 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.



# THREE.js Animation System

📗 THREE.js has an animation system to do key frame animation: Link.
📗 Key frame animation set properties of the objects (position, rotation in quarternion, or color, ...) at key frames and interpolate the values for the frames in between: Wikipedia.
📗 THREE.js keeps a list of time points [t1, t2, t3, ...] and a list of values [v1, v2, v3, ...] in a KeyframeTrack.
➩ The value of the properties will be set to v1 at t1, v2 at t2, ... and interpolated in between.
➩ The value types can be BooleanKeyframeTrack, ColorKeyframeTrack, NumberKeyframeTrack, QuaternionKeyframeTrack (since axis-angle and Euler angles are difficult to interpolate), StringKeyframeTrack, VectorKeyframeTrack: .
📗 An AnimationClip can be created based on a KeyframeTrack, or from morph target sequences, or loaded from a model that include animation.

# Simple Animation [TopHat]

📗 Change the KeyframeTrack so that the object move in a square.
📗 Add a KeyframeTrack so that the object changes color while moving.
➩ Animation with SkinnedMesh: Doc, Doc.
➩ Use computer vision models to get the data: (pose) Link, (pose live demo) , (pose key points) Link; (hand) Link, (hand live demo) Link, (hand key points) Link.
Demo key_frame

# Skinned Mesh Animation [TopHat]

📗 Animate the other bone.
Demo key_frame_skin
Demo key_frame_cow

# Lecture Summary

📗 Triangle meshes
📗 Buffer geometries
📗 Vertex positions, colors, normals
📗 Surfaces and curves in 3D
📗 Polynomial surfaces
📗 Skinning and morphing


📗 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.

Prev: W7, Next: W9, Quiz of the week: Q8





Last Updated: November 21, 2025 at 11:41 PM