Prev: W7, Next: W9, Quiz of the week: Q8
Links: Zoom, TopHat (300987), 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 [Updated]

📗 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 [Updated]

📗 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 print the notes: .
📗 Anonymous feedback can be submitted to: Form.

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





Last Updated: November 30, 2024 at 4:35 AM