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.

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

# Fake Normal [TopHat]

📗 Attributes for normal can be set for each vertex.
➩ let normals = new Float32Array([x0, y0, z0, x1, y1, z1, ...]);
➩ geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
📗 See fake cylinder demo by Professor Gleicher: Link.
📗 Change the normals so that the surface looks curved.
Demo buffer

# Vertex Color [TopHat]

📗 Attributes for color can be set for each vertex (RGB values are between 0 and 1 instead of 0 and 255).
➩ let colors = new Float32Array([r0, g0, b0, r1, g1, b1, ...]);
➩ geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
📗 Change the color so that all vertices have different colors.
Demo buffer



# Face Color

📗 Color can be specified in the following ways:
➩ A color per object by setting the color of the materials.
➩ A color per triangle by setting the same color for all three vertices of the triangle.
➩ A color per vertex, the points in the middle are interpolated (called Barycentric interpolation: Wikipedia.
📗 To get more than three colors on a triangle: break one triangle into lots of smaller pieces and color each is,
➩ They are difficult to keep track of.
➩ Transforming and rendering them can be costly. 
➩ Triangles smaller than pixels have sampling issue.

# Texture Mapping

📗 Color on a triangle can also be specified as a texture:
➩ Specify three points on an image (using UV coordinate system: u from 0 to 1 representing left to right, and v from 0 to 1 representing bottom to top of the image).
➩ Map the triangle on the image to the triangle in the BufferGeometry.
📗 Technically, the above description is not correct: formally talk about UV texture mapping in the next lecture.
📗 Professor Gleicher's demo: Link.

# Texture to Square

📗 Specify the UV coordinates to map the image to the triangles.
➩ let uvs = new Float32Array([u0, v0, u1, v1, ...]);
➩ geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
Demo texture



# Other Maps

📗 Normal maps: to get more than three normals on a triangle, the normals (x, y, z values) can be specified as the RGB values of pixels on an image (called a normal map) and mapped to the triangle. Example: Link.
📗 Material property maps: to get more than one roughness or metalness on a mesh, their values can be specified as color values of pixels on an image and mapped to the triangles. Example: Link.
📗 Environment map: reflections of other objects in the scene can be represented by a texture image, in particular, a photo of the scene taken from the position of the object. Example: Link.
📗 Shadow maps: shadows of other objects in the scene can be represented by a texture image, in particular, a photo of the scene taken from the position of the light source. Example: Link.
📗 More details about these in the next lecture.

# Texture Wrapping

📗 Texture.wrapS (in the U direction) and Texture.wrapT (in the V direction) can be set the to following to handle when UV values are smaller than 0 or larger than 1. It is also useful when Texture.repeat is set (so the same texture can repeat multiple times on the same triangle).
➩ THREE.ClampToEdgeWrapping clamps the value to 0 (when less than 0) or 1 (when larger than 1).
➩ THREE.RepeatWrapping repeats the texture with the same direction (0 to 1, 0 to 1, 0 to 1, ...).
➩ THREE.MirroredRepeatWrapping repeats the texture and flips the direction on every repeat (0 to 1, 1 to 0, 0 to 1, ...).

# Lecture Summary

📗 Triangle meshes
📗 Buffer geometries
📗 Vertex positions, colors, normals
📗 Texture mapping
📗 Other 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 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: January 28, 2025 at 1:22 AM