📗 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.
📗 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.
📗 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, ...).
📗 RGB values represent XYZ values of the normal vector.
📗 A normal map is difficult to draw by hand accurately, but the normal vectors can be computed and converted to RBG values set as the pixel values of an image.
📗 Normal and bump maps change the normal of a surface.
➩ They do not change the side view.
➩ They do not change the shape (geometry) or the triangles.
➩ They do not cause occlusions or shadows.
📗 There is also a displacement map that changes the positions of the vertices. CORRECTION: it does not alter the geometry, it just renders it differently with a different vertext shader.
📗 In THREE.js, THREE.MeshStandardMaterial.displacementMap can be set to a texture to displace the vertices.
📗 UV coordinates are used to look up the color of a point on a triangle.
➩ Every point on the triangle can be represented by its Barycentric coordinate (similar to the u position on a curve, but with two parameters): \(p = \alpha p_{1} + \beta p_{2} + \gamma p_{3}\) where \(p_{1}, p_{2}, p_{3}\) are vertices of the triangle.
➩ The corresponding point on the texture image can be found as: \(\begin{bmatrix} u \\ v \end{bmatrix} = \alpha \begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} + \beta \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} + \gamma \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) where \(\begin{bmatrix} u_{1} \\ v_{1} \end{bmatrix} , \begin{bmatrix} u_{2} \\ v_{2} \end{bmatrix} , \begin{bmatrix} u_{3} \\ v_{3} \end{bmatrix}\) are the UV values associated with \(p_{1}, p_{2}, p_{3}\) respectively.
📗 Built-in buffer geometries in THREE.js have preset UV values, so mapping texture onto the surfaces of cubes, spheres, etc, are simple.
📗 A pixel on screen may cover an area in the texture image.
📗 In this case, MIP map (also called image pyramid: a set of the same image with different sizes) can be pre-computed and store, and smaller versions of the texture image can be used to look up the color: Wikipedia.
📗 Either the nearest MIP map can be used or linear interpolation between two MIP maps can be used, and within a MIP map, either the nearest pixel or bi-linear interpolation can be used.
📗 Having both linear interpolation between two MIP maps and bi-linear interpolation between pixels is also called tri-linear interpolation.
📗 THREE.js can specify THREE.Texture.minFilter as THREE.NearestMipmapNearestFilter, THREE.NearestMipmapLinearFilter, or THREE.LinearMipmapNearestFilter, THREE.LinearMipmapLinearFilter: Link.
📗 A single triangle can have more than one material property.
➩ For THREE.MeshStandardMaterial, there are metalnessMap, roughnessMap.
➩ For THREE.MeshPhongMaterial or THREE.MeshLambertMaterial, there is specularMap.
➩ For both, there are alphaMap (transparency), aoMap (ambient occlusion, or pre-computed self-shadow), emissiveMap (glow), lightMap (pre-computed light).
📗 They take in an image as the texture and use the RGB values of the pixels to change the material property based on the UV values.
📗 Since the sky box is fixed, its reflection on the objects are fixed too.
📗 For scenes with multiple objects or moving objects, the reflection can change:
➩ Draw the scene without reflection.
➩ Use a camera (cube camera) to take a picture at the position of the object.
➩ Use this picture as the texture (environment map) of the object.
➩ Repeat this multiple times.
📗 In THREE.js:
➩ Create a let camera = new THREE.CubeCamera(near, far, new THREE.WebGLCubeRenderTarget(size));: Doc.
➩ Change the position of the cube camera and take a picture using camera.update(renderer, scene);. It might be useful to make obj.visible = false; before taking the picture and obj.visible = true; after taking the picture.
➩ This can only be done once in THREE.js (cannot have reflections in reflections using just environment maps): Doc.
📗 Textures are used to fake normal, material property, environment reflection and shadow because they can be implemented efficiently in the graphics hardware.
📗 More on the graphics pipeline and interaction with the graphics hardware in the last third of the semester.