Prev:
W7 , Next:
W9 , Quiz of the week:
Q8
Links:
Zoom ,
TopHat (223815), Calculator:
Eval
Slide:
Go All Prev Next
# 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 .
# 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 .
# Skinned Mesh Animation [TopHat]📗 Animate the other bone (more on key frame animation in a later lecture).
Demo key_frame_skin
# Morphing📗 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 .
# Morph a Sphere [TopHat]📗 Compute the morph target (only one) to morph the sphere to a flat circle.
Demo morph
# 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: Print .
📗 Anonymous feedback can be submitted to:
Form .
Prev:
W7 , Next:
W9 , Quiz of the week:
Q8
Last Updated: April 23, 2025 at 2:50 AM