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