Young Wu's Homepage

Prev: W8, Next: W10, Quiz of the week: Q9
Links: Zoom, TopHat (223815), Calculator:
Slide:

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

📗 Fake wave demo by Professor Gleicher (old version of THREE.js): 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, ...).

# Normal Map [TopHat]

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

Demo texture_normal

# Bump Map [TopHat]

📗 Draw a bump map so that the flat surface looks bumpy.

📗 The color intensities represent the depth of the bump (gray = middle, black = down, white = up).

Demo texture_bump

# Displacement Map

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

# Barycentric Coordinates

📗 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 = α p_{1} + β p_{2} + γ 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{matrix} u \\ v \end{matrix}] = α [\begin{matrix} u_{1} \\ v_{1} \end{matrix}] + β [\begin{matrix} u_{2} \\ v_{2} \end{matrix}] + γ [\begin{matrix} u_{3} \\ v_{3} \end{matrix}]

where

[\begin{matrix} u_{1} \\ v_{1} \end{matrix}], [\begin{matrix} u_{2} \\ v_{2} \end{matrix}], [\begin{matrix} u_{3} \\ v_{3} \end{matrix}]

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.

# Texture Lookup

📗 Given a point on the triangle, find its barycentric coordinates and find the corresponding points on the texture given the barycentric coordinates.

Demo barycentric

# Texture Lookup Magnification

📗 A pixel on screen may cover less than a pixel in the texture image.

📗 In this case, either the nearest pixel can be used or bi-linear interpolation can be used.

📗 THREE.js can specify THREE.Texture.magFilter as THREE.NearestFilter or LinearFilter: Link.

# Texture Lookup Minification

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

# Material Property Maps

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

📗 Professor Gleicher's example: Link.

# Shadow Map

📗 Shadow can also be mapped on objects as textures.

➩ Place a camera at the light source.

➩ Take a picture: the objects that are not visible to the light will create shadow.

➩ Use this picture as the texture (shadow map) of the object.

📗 In THREE.js:

➩ Tell the lights to cast shadow: THREE.PointLight.castShadow = true;

➩ Tell the objects to cast shadow: THREE.Mesh.castShadow = true;

➩ Tell the objects to receive shadow: THREE.Mesh.receiveShadow = true;

➩ Tell the renderer to do do this: THREE.WebGLRenderer.shadowMap.enabled = true;.

# Environment Map

📗 A sky box can be used as the background of a scene: Wikipedia.

📗 It is a large box or sphere that always stays centered at the camera and far from the camera.

📗 A fake sky box can be built with a large box or sphere with texture on the inside.

📗 THREE.js can set a texture for the sky box by using scene.background = texture.

📗 Professor Gleicher's example of a fake sky box: Link, and real sky box: Link or Link.

📗 THREE.MeshStandardMaterial.envMap can be set as the same texture on an object to reflect the sky box.

📗 Environment maps do not use UV values.

# Dynamic Environment Map

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

📗 This is also called multi-pass rendering.

📗 Professor Gleicher's example: Link and Link.

# Reflection [TopHat]

📗 Compare the reflection from using sky box vs cube camera.

📗 Environment map on materials with roughness = 0 and metalness = 1 looks like mirrors, and normal or bump maps also look good on these materials.

📗 The sky box texture can be found: Link.

Demo texture_bump

# Why Texture Hack

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

# Lecture Summary

📗 Texture mapping

📗 Other maps

📗 Fake normals

📗 Normal vs bump vs displacement maps

📗 Environment and shadow maps

📗 Barycentric interpolation

📗 Minification and Magnification

📗 MIP 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: W8, Next: W10, Quiz of the week: Q9

Last Updated: April 09, 2025 at 11:29 PM