Prev: W7, Next: W9
Links: Zoom, TopHat (993679, or Form), 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 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: W7, Next: W9





Last Updated: November 03, 2025 at 1:03 PM