2a:null 2b:["$","title",null,{"children":"Texture Mapping | VIDI Intro Graphics | Observable"}] 30:T702,## Surface Detail # Texture Mapping Textures give flat geometry the illusion of richness. A cube painted with a single color looks artificial, but cover it with a brick wall pattern and suddenly it feels solid, believable, and part of a world. This idea of using 2D images to drive surface appearance is known as **texture mapping**. Textures are not limited to color alone. **Normal mapping**, for instance, perturbs the surface normals to fake small-scale bumps and grooves, without adding extra triangles, which would impact the performance. This surface normal perturbation lets flat surfaces catch light as if they had fine detail, enhancing realism without extra geometry. When applying textures on flat geometry, due to the nature of fragments, the resolution of the texture will almost always not align perfectly with the render screen's resolution. This creates visual artifacts which appear blocky or missing details. **Texture filtering** helps fix this by specifying how texels are sampled based on their coordinates. In this notebook, you can explore four common filtering options: - **Nearest**: Chooses the closest texel; can look blocky when zoomed in (magnification) or out (minification). - **Linear**: Linearly interpolates between neighboring texels; smoother than Nearest. - **LinearMipMapNearest**: Uses the nearest mipmap level, then linearly interpolates within that level. - **LinearMipMapLinear**: Interpolates both between texels and between mipmap levels; smoothest overall. You can also explore: - **Texture Mapping Types**: Apply image textures to fragments to change their color, surface detail (normals), and more. - **Texture Filtering**: Experiment with filtering options that affect how textures look when scaled down (minification) or up (magnification).31:T509,viewof textureFilteringParams = { const form = html``; form.querySelector('select[name="minFilter"]').value = "LinearMipmapNearest"; form.querySelector('select[name="magFilter"]').value = "Linear"; function updateValue() { form.value = { minFilter: form.querySelector('select[name="minFilter"]').value, magFilter: form.querySelector('select[name="magFilter"]').value }; form.dispatchEvent(new CustomEvent("input")); } form.querySelectorAll("select").forEach(sel => sel.addEventListener("change", updateValue) ); updateValue(); return form; }32:T9d9,textureUniforms = { const presets = { Earth: { baseColor: FileAttachment("earth_color_4k.png"), normal: FileAttachment("earth_normal_4k_R.png"), roughness: FileAttachment("earth_roughness_scaled_4k.png"), metalness: FileAttachment("earth_roughness_scaled_4k.png") }, MetalR: { baseColor: FileAttachment("Metal062C_1K-PNG_Color.png"), normal: FileAttachment("Metal062C_1K-PNG_NormalGL.png"), roughness: FileAttachment("Metal062C_1K-PNG_Roughness.png"), metalness: FileAttachment("Metal062C_1K-PNG_Metalness.png") }, MetalP: { baseColor: FileAttachment("PaintedMetal003_1K-PNG_Color.png"), normal: FileAttachment("PaintedMetal003_1K-PNG_NormalGL.png"), roughness: FileAttachment("PaintedMetal003_1K-PNG_Roughness.png"), metalness: FileAttachment("PaintedMetal003_1K-PNG_Metalness.png") }, Brick: { baseColor: FileAttachment("Bricks056_1K-PNG_Color.png"), normal: FileAttachment("Bricks056_1K-PNG_NormalGL.png"), roughness: FileAttachment("Bricks056_1K-PNG_Roughness.png"), metalness: FileAttachment("Bricks056_1K-PNG_Roughness.png") }, Tiles: { baseColor: FileAttachment("Tiles135C_1K-PNG_Color.png"), normal: FileAttachment("Tiles135C_1K-PNG_NormalGL.png"), roughness: FileAttachment("Tiles135C_1K-PNG_Roughness.png"), metalness: FileAttachment("Tiles135C_1K-PNG_Roughness.png") }, Plate: { baseColor: FileAttachment("DiamondPlate006C_1K-PNG_Color.png"), normal: FileAttachment("DiamondPlate006C_1K-PNG_NormalGL.png"), roughness: FileAttachment("DiamondPlate006C_1K-PNG_Roughness.png"), metalness: FileAttachment("DiamondPlate006C_1K-PNG_Metalness.png") }, Chip: { baseColor: FileAttachment("Chip001_1K-PNG_Color.png"), normal: FileAttachment("Chip001_1K-PNG_NormalGL.png"), roughness: FileAttachment("Chip001_1K-PNG_Roughness.png"), metalness: FileAttachment("Chip001_1K-PNG_Metalness.png") } }; // Earth takes priority for texture override const key = geometrySelectParams === "Earth" ? "Earth" : textureSelectParams; const p = presets[key]; if (!p) return null; const load = async fa => getTexture(await fa.url()); return { preset: p, baseColorTexture: await load(p.baseColor), normalTexture: await load(p.normal), roughnessTexture: await load(p.roughness), metalnessTexture: await load(p.metalness) }; }33:T120c,viewof frag_glsl = mdGLSL_toggle(`precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; }; struct PointLight { vec3 position; vec3 color; float intensity; }; struct Material { vec3 baseColor; float metalness; float roughness; }; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; uniform bool u_enableColorMapping; uniform bool u_enableNormalMapping; uniform bool u_enableRoughnessMapping; uniform sampler2D u_baseColorTexture; uniform sampler2D u_normalTexture; uniform sampler2D u_roughnessTexture; uniform sampler2D u_metalnessTexture; in vec3 v_viewPos; in mat3 v_TBN; in vec2 v_uv; vec3 getViewDir(vec3 pos_view) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-pos_view); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuseLambertian(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional light for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * NdotL; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * NdotL / distanceSQ; } return result; } vec3 shadeSpecular(vec3 kS, float shininess, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 V = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 V = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), V), 0.0), 2.0); return kS * fresnel * 0.4; } void main() { vec3 viewPos = v_viewPos; vec3 baseColor = u_material.baseColor; if (u_enableColorMapping) { baseColor = texture(u_baseColorTexture, v_uv).rgb; } vec3 mappedNormal = v_TBN[2]; // 0=T, 1=B, 2=N if (u_enableNormalMapping) { vec3 normalMap = texture(u_normalTexture, v_uv).xyz * 2.0 - 1.0; // [0,1] -> [-1,1] mappedNormal = normalize(v_TBN * normalMap); } float metalness = u_material.metalness; float roughness = u_material.roughness; if (u_enableRoughnessMapping) { roughness = texture(u_roughnessTexture, v_uv).r; metalness = texture(u_metalnessTexture, v_uv).r; } vec3 kA = baseColor * 0.1; vec3 kD = (1.0 - 0.65 * metalness) * baseColor; vec3 kS = mix(vec3(0.04), baseColor, metalness); float shininess = exp2((1.0 - roughness) * 9.0); vec3 color = vec3(0.0); color += shadeAmbient(kA); color += shadeDiffuseLambertian(kD, mappedNormal, viewPos); color += shadeSpecular(kS, shininess, mappedNormal, viewPos); color += shadeFresnel(kS, mappedNormal, viewPos); gl_FragColor = vec4(color, 1.0); } `, "Fragment shader")34:T41a,loadAndNormalizeOBJ = async (filename) => { let objText; switch (filename) { case "stanford-bunny.obj": objText = await FileAttachment("stanford-bunny.obj").text(); break; case "lucy.obj": objText = await FileAttachment("lucy.obj").text(); break; default: throw new Error("Unknown model name"); } const objLoader = new THREE.OBJLoader; const object = objLoader.parse(objText); let geo = null; object.traverse((child) => { if (child.isMesh && child.geometry) { geo = child.geometry; } }); geo.computeBoundingBox(); const box = geo.boundingBox; const center = new THREE.Vector3(); box.getCenter(center); geo.translate(-center.x, -center.y, -center.z); const size = new THREE.Vector3(); box.getSize(size); const maxDimension = Math.max(size.x, size.y, size.z); const scaleFactor = 2.0 / maxDimension; geo.scale(scaleFactor, scaleFactor, scaleFactor); geo = THREE.BufferGeometryUtils.mergeVertices(geo, 0.015); geo.computeVertexNormals(); return geo; }35:[{"id":"4bebc1592825488f55066e9044196d055bf03de62d77b5d7d8eae54b2700f82069d6ff3470673f3e9928fb117a205dfdb9a991894ed4b9717d3b91c93aac91ed","href":"https://static.observableusercontent.com/files/4bebc1592825488f55066e9044196d055bf03de62d77b5d7d8eae54b2700f82069d6ff3470673f3e9928fb117a205dfdb9a991894ed4b9717d3b91c93aac91ed","name":"Metal062C_1K-PNG_Metalness.png","type":"image/png","lastModified":1755773954545.215,"size":547931},{"id":"5c7bc844658d8ca5880f7f70c23bd2c02eacc702ab349059a9ac54754896fb375ee252b1ec840505755213a00b2f78766ec7cf4fd29c4d6acbb53be5ed3c91a9","href":"https://static.observableusercontent.com/files/5c7bc844658d8ca5880f7f70c23bd2c02eacc702ab349059a9ac54754896fb375ee252b1ec840505755213a00b2f78766ec7cf4fd29c4d6acbb53be5ed3c91a9","name":"Metal062C_1K-PNG_Roughness.png","type":"image/png","lastModified":1755773948494.916,"size":679430},{"id":"64b81e3a6f9bc3c7b2e1e02e7401d8d823fa7f2262370b92996729ea0259b480d3a40674a7b592255cfd59d9dccae3c7a1082e434e6aff411d50e6f475538b14","href":"https://static.observableusercontent.com/files/64b81e3a6f9bc3c7b2e1e02e7401d8d823fa7f2262370b92996729ea0259b480d3a40674a7b592255cfd59d9dccae3c7a1082e434e6aff411d50e6f475538b14","name":"Metal062C_1K-PNG_NormalGL.png","type":"image/png","lastModified":1755773963268.275,"size":4485131},{"id":"5306497965d23ed3be70ffae79c40fabbcaefbe6e7ba415e71ad5f6650306b72519db4e05eea856b56adcfd45bbfb52f083c66697bf5a1c25fa484c8b577f757","href":"https://static.observableusercontent.com/files/5306497965d23ed3be70ffae79c40fabbcaefbe6e7ba415e71ad5f6650306b72519db4e05eea856b56adcfd45bbfb52f083c66697bf5a1c25fa484c8b577f757","name":"Metal062C_1K-PNG_Color.png","type":"image/png","lastModified":1755773941771.591,"size":1665686},{"id":"b9a7bdd6239d61dfa21676c20eb71b9de57308289eb8607443be1aa193bcb602428610c4766080c9c9b1d40183cb6ad7c66f764780058d82e9e660af8b6025bc","href":"https://static.observableusercontent.com/files/b9a7bdd6239d61dfa21676c20eb71b9de57308289eb8607443be1aa193bcb602428610c4766080c9c9b1d40183cb6ad7c66f764780058d82e9e660af8b6025bc","name":"DiamondPlate006C_1K-PNG_Metalness.png","type":"image/png","lastModified":1755821453498.286,"size":473957},{"id":"40eff75e9ed37ff481a748e747fae609abfbb0d955e7157ad1443cbb7c5dde529d8620387a7bd06cc80afd035cdd13a91f89c7886dc62197f1238f03ea4ed318","href":"https://static.observableusercontent.com/files/40eff75e9ed37ff481a748e747fae609abfbb0d955e7157ad1443cbb7c5dde529d8620387a7bd06cc80afd035cdd13a91f89c7886dc62197f1238f03ea4ed318","name":"DiamondPlate006C_1K-PNG_Roughness.png","type":"image/png","lastModified":1755821453515.063,"size":563037},{"id":"8e7e74e885055b282566e6e74d0a2d681c11a25b8e253090568ba956081b21de5b6195b6d490c224fdf02dd145fb3ce305e69a08705cea32ec1558e6135a9a2d","href":"https://static.observableusercontent.com/files/8e7e74e885055b282566e6e74d0a2d681c11a25b8e253090568ba956081b21de5b6195b6d490c224fdf02dd145fb3ce305e69a08705cea32ec1558e6135a9a2d","name":"DiamondPlate006C_1K-PNG_Color.png","type":"image/png","lastModified":1755821453616.299,"size":1463218},{"id":"1e3001473aeeaa8faf18079770edc6c14e0c15043b61a0abe82cc0d093ddda74b02f4bf6c830d97bcc7fc286026eeca41c0354a25495a0e4ccfa15837aa7682e","href":"https://static.observableusercontent.com/files/1e3001473aeeaa8faf18079770edc6c14e0c15043b61a0abe82cc0d093ddda74b02f4bf6c830d97bcc7fc286026eeca41c0354a25495a0e4ccfa15837aa7682e","name":"DiamondPlate006C_1K-PNG_NormalGL.png","type":"image/png","lastModified":1755821455331.508,"size":5186571},{"id":"f8ed3f40c7a926726bd7241a436f1643990ac6cbe15c5c43407e854a6c213dd9a2442bef1feb90f0a81b77575628dda1b7546480fd17ad52c83564bbe2d05ed3","href":"https://static.observableusercontent.com/files/f8ed3f40c7a926726bd7241a436f1643990ac6cbe15c5c43407e854a6c213dd9a2442bef1feb90f0a81b77575628dda1b7546480fd17ad52c83564bbe2d05ed3","name":"earth_roughness_scaled_4k.png","type":"image/png","lastModified":1755901499140.822,"size":5284506},{"id":"87fa96954456d413b0b74e9545ab2ed87b7fc7831896aa2530562d213b716901f9b6b0945ee1ab08bc4cbb54971726e09f654946e9c952b5efeb6c30adb0ed40","href":"https://static.observableusercontent.com/files/87fa96954456d413b0b74e9545ab2ed87b7fc7831896aa2530562d213b716901f9b6b0945ee1ab08bc4cbb54971726e09f654946e9c952b5efeb6c30adb0ed40","name":"earth_color_4k.png","type":"image/jpeg","lastModified":1755901527398.577,"size":11783876},{"id":"02c38609de7aa3b26c8c511ae70f64e4ce007dac001a5158cf6192b332ef75df8de246d344e8ae5fe84270644e732d999fa35fcc7e263ed8585d8e9e729279f3","href":"https://static.observableusercontent.com/files/02c38609de7aa3b26c8c511ae70f64e4ce007dac001a5158cf6192b332ef75df8de246d344e8ae5fe84270644e732d999fa35fcc7e263ed8585d8e9e729279f3","name":"earth_normal_4k_R.png","type":"image/png","lastModified":1755908459170.158,"size":13934459},{"id":"2e24bdd5d5656845a4e166fd59b037f8a329316528d948312da8b6f472a3bf9060105d688c174340aff079983a9748c719a89228f5c02e09555150240650729c","href":"https://static.observableusercontent.com/files/2e24bdd5d5656845a4e166fd59b037f8a329316528d948312da8b6f472a3bf9060105d688c174340aff079983a9748c719a89228f5c02e09555150240650729c","name":"Tiles135C_1K-PNG_Color.png","type":"image/png","lastModified":1756006715874.018,"size":1159838},{"id":"5fe9c582281ee8953e3b02118a6c6535d8f525a6b34a8d70bfe0628518c9bca5cdf7ed6b4d6906243accef4c216340490cf402065b61cbcc3383c8fb1cb276d6","href":"https://static.observableusercontent.com/files/5fe9c582281ee8953e3b02118a6c6535d8f525a6b34a8d70bfe0628518c9bca5cdf7ed6b4d6906243accef4c216340490cf402065b61cbcc3383c8fb1cb276d6","name":"Tiles135C_1K-PNG_Roughness.png","type":"image/png","lastModified":1756006732053.514,"size":753778},{"id":"44683d3a9986368bab455003b6c7343b416f0402f4ed1218624a1c71cc598dd1d56e286b9072d474a7dc590fc96b37d5999008aabc8ec443a20f840127e8ab2a","href":"https://static.observableusercontent.com/files/44683d3a9986368bab455003b6c7343b416f0402f4ed1218624a1c71cc598dd1d56e286b9072d474a7dc590fc96b37d5999008aabc8ec443a20f840127e8ab2a","name":"Tiles135C_1K-PNG_NormalGL.png","type":"image/png","lastModified":1756006757360.935,"size":4221717},{"id":"cc16e69b53c9e9a9e95decdaf50757c61585195072ca2b20f3bef96126666ad0aae9337a66b7fe14fdd3fa708f26b4deb3861f542ee2c2700e767742cee1d8f6","href":"https://static.observableusercontent.com/files/cc16e69b53c9e9a9e95decdaf50757c61585195072ca2b20f3bef96126666ad0aae9337a66b7fe14fdd3fa708f26b4deb3861f542ee2c2700e767742cee1d8f6","name":"Bricks056_1K-PNG_Color.png","type":"image/png","lastModified":1756034503874.141,"size":1798577},{"id":"f279d14d2446d3fb66ef819951fbcbd2022243efd7e59ee486dd6ee87a76477cc88b8304c974a96cbfe1cf165fba91502940e4968adff45ffaecfb36338a146f","href":"https://static.observableusercontent.com/files/f279d14d2446d3fb66ef819951fbcbd2022243efd7e59ee486dd6ee87a76477cc88b8304c974a96cbfe1cf165fba91502940e4968adff45ffaecfb36338a146f","name":"Bricks056_1K-PNG_NormalGL.png","type":"image/png","lastModified":1756034511576.516,"size":5482710},{"id":"b74ad6c43340dd5a16be205d92746ac92831d12d8be2a9439726289624ed2a01d45c781f06b7766c99840b6c1e4859972d161abe8ef15b7d3c504ca3815f6509","href":"https://static.observableusercontent.com/files/b74ad6c43340dd5a16be205d92746ac92831d12d8be2a9439726289624ed2a01d45c781f06b7766c99840b6c1e4859972d161abe8ef15b7d3c504ca3815f6509","name":"Bricks056_1K-PNG_Roughness.png","type":"image/png","lastModified":1756034544253.624,"size":584080},{"id":"56ea6cd33b37372d1f4a83b666279e97fc8c72040bb5b9df9e9f26f52e140ffa2da967ac6894ae3e366bc01bb3af90b248b1ace47c54333290be12bc490a4b8d","href":"https://static.observableusercontent.com/files/56ea6cd33b37372d1f4a83b666279e97fc8c72040bb5b9df9e9f26f52e140ffa2da967ac6894ae3e366bc01bb3af90b248b1ace47c54333290be12bc490a4b8d","name":"PaintedMetal003_1K-PNG_Color.png","type":"image/png","lastModified":1756035604287.016,"size":1926823},{"id":"ec7bfe573a64c7948288c693a8fb1887327c814394d10171ba81f04735f4bc17a3769e155405cc11dcb987119c796d2bfa684d03c5cf3fbddcc898d648d0298b","href":"https://static.observableusercontent.com/files/ec7bfe573a64c7948288c693a8fb1887327c814394d10171ba81f04735f4bc17a3769e155405cc11dcb987119c796d2bfa684d03c5cf3fbddcc898d648d0298b","name":"PaintedMetal003_1K-PNG_Metalness.png","type":"image/png","lastModified":1756035614874.344,"size":479576},{"id":"efe6b65f87c062b35d990a24fad86f0d603a2d08a6f8c24809a84f68e0a4d1c3fa05fb33a88c48c31bc8508a04fe1b25219fdf29322e9ff03fa572955cdd5f45","href":"https://static.observableusercontent.com/files/efe6b65f87c062b35d990a24fad86f0d603a2d08a6f8c24809a84f68e0a4d1c3fa05fb33a88c48c31bc8508a04fe1b25219fdf29322e9ff03fa572955cdd5f45","name":"PaintedMetal003_1K-PNG_Roughness.png","type":"image/png","lastModified":1756035628458.632,"size":566471},{"id":"02fa632e659ff2541b21a50c633e4ec2f1e0264d1a6fa2875cbbca1d1750633912552ea53e4be73b68e67bc57ef9cf9bc26a0367a3b7dc34e46b5881c120e60e","href":"https://static.observableusercontent.com/files/02fa632e659ff2541b21a50c633e4ec2f1e0264d1a6fa2875cbbca1d1750633912552ea53e4be73b68e67bc57ef9cf9bc26a0367a3b7dc34e46b5881c120e60e","name":"PaintedMetal003_1K-PNG_NormalGL.png","type":"image/png","lastModified":1756035648206.062,"size":5076150},{"id":"7555196cfc1918289710c76c1dd9fa32264b663b8fbd223a062900dbd0c8e0a51b8afdcf6964ead64a2680724a93a27607f119a7db053bfcdb1ad67b8597215a","href":"https://static.observableusercontent.com/files/7555196cfc1918289710c76c1dd9fa32264b663b8fbd223a062900dbd0c8e0a51b8afdcf6964ead64a2680724a93a27607f119a7db053bfcdb1ad67b8597215a","name":"Chip001_1K-PNG_Metalness.png","type":"image/png","lastModified":1756036247631.788,"size":86281},{"id":"e4dbe59a8c96f5cb7b8a36b6b615258f920e95c403c946a3366e322dff4e474f1e68aa2cc635803cd82b44e58a63561cbe049f9cd3c202776ed13de4efb10d99","href":"https://static.observableusercontent.com/files/e4dbe59a8c96f5cb7b8a36b6b615258f920e95c403c946a3366e322dff4e474f1e68aa2cc635803cd82b44e58a63561cbe049f9cd3c202776ed13de4efb10d99","name":"Chip001_1K-PNG_Color.png","type":"image/png","lastModified":1756036247961.315,"size":1220318},{"id":"687daa10882519510cd9220dfd4f14d0f7f8cf4e9b0b4ba36feb420475d0e7abb6db34f4d124e7ad3c97ccc4c9c5432b5b0dbaa33b95d7267ea516b66112dfda","href":"https://static.observableusercontent.com/files/687daa10882519510cd9220dfd4f14d0f7f8cf4e9b0b4ba36feb420475d0e7abb6db34f4d124e7ad3c97ccc4c9c5432b5b0dbaa33b95d7267ea516b66112dfda","name":"Chip001_1K-PNG_Roughness.png","type":"image/png","lastModified":1756036247783.662,"size":539858},{"id":"3e5053c40bcecf375647787a8d0d16fee5087ea0142a752e8b393aaa95ecb6ed792af01de488da49f9223a0b448ff57f448aac8f31da23476944b75fa6772137","href":"https://static.observableusercontent.com/files/3e5053c40bcecf375647787a8d0d16fee5087ea0142a752e8b393aaa95ecb6ed792af01de488da49f9223a0b448ff57f448aac8f31da23476944b75fa6772137","name":"Chip001_1K-PNG_NormalGL.png","type":"image/png","lastModified":1756036249655.938,"size":2233580}] 2e:{"id":"bf6304c781367ba3","slug":"texture-mapping","title":"Texture Mapping","thumbnail":"ec1b6eb8760bdf034fe455a5cb20992631ac84afe2bba241e3bdde92aecab4f7","access_level":"public","create_time":"$D2025-08-21T01:49:33.867Z","update_time":"$D2026-02-24T08:02:37.466Z","view_time":null,"first_public_time":"$D2025-08-21T12:19:34.468Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":839,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"9e180f6758d4b892","slug":"core-concepts-in-computer-graphics","title":"Core Concepts in Computer Graphics","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"Texture Mapping","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":371,"value":"___\n## Quick Manual\n\n- Use the toggles for *Color*, *Normal*, and *Roughness Mapping* to apply each texture separately.\n- Choose filters under **Minification Filter** and **Magnification Filter** sections to see how texture quality changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":533,"value":"\n⚠ The Earth (Texture assigned) model may take a while to load as it uses extremely high-resolution images (up to 10800 × 5400). Changing filtering modes can also introduce additional delays. This model is included as an optional demonstration of real-world-style texture usage.\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":399,"value":"viewof geometrySelectParams = {\n const form = html``;\n\n form.geom.value = \"Sphere\";\n form.value = form.geom.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.geom.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"viewof textureSelectParams = {\n const form = html``;\n\n form.type.value = \"MetalR\";\n form.value = form.type.value;\n\n function updateDisabled() {\n form.type.disabled = geometrySelectParams === \"Earth\";\n }\n\n form.addEventListener(\"change\", () => {\n form.value = form.type.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n viewof geometrySelectParams.addEventListener(\"input\", updateDisabled);\n updateDisabled();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"viewof toggleParams = {\n const form = html``;\n\n const inputs = form.querySelectorAll('input[type=\"checkbox\"]');\n\n function updateValue() {\n const result = {};\n inputs.forEach(input => {\n result[input.value] = input.checked;\n });\n form.value = result;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"change\", updateValue);\n });\n updateValue();\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":777,"value":"html`

\n Color Texture ${toggleParams.color ? \"🍺\" : \"💤\"}\n

\n Normal Texture ${toggleParams.normal ? \"🍺\" : \"💤\"}\n

\n Roughness Texture ${toggleParams.roughness ? \"🍺\" : \"💤\"}\n

\n Metalness Texture ${toggleParams.color ? \"🍺\" : \"💤\"}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"___\n## Textures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"getTexture = (url) => {\n const filterMap = {\n Linear: THREE.LinearFilter,\n Nearest: THREE.NearestFilter,\n LinearMipmapLinear: THREE.LinearMipmapLinearFilter,\n LinearMipmapNearest: THREE.LinearMipmapNearestFilter\n };\n \n const tex = new THREE.TextureLoader().load(url);\n\n tex.minFilter = filterMap[textureFilteringParams.minFilter];\n tex.magFilter = filterMap[textureFilteringParams.magFilter];\n tex.wrapS = tex.wrapT = THREE.RepeatWrapping;\n\n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"scaleUVs = (geometry, scaleU, scaleV) => {\n const uvAttr = geometry.attributes.uv;\n for (let i = 0; i < uvAttr.count; i++) {\n uvAttr.setXY(\n i,\n uvAttr.getX(i) * scaleU,\n uvAttr.getY(i) * scaleV\n );\n }\n uvAttr.needsUpdate = false;\n return geometry;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"viewof vert_glsl = mdGLSL_toggle(`out vec3 v_viewPos;\nout mat3 v_TBN;\nout vec2 v_uv;\n\nvoid main() {\n // normal, tangent, bitangent in view space\n vec3 N = normalize(normalMatrix * normal);\n vec3 T = normalize(normalMatrix * tangent.xyz);\n T = normalize(T - dot(T, N) * N);\n // tangent.w preserves the \"handedness\" of the tangent space\n vec3 B = cross(N, T) * tangent.w;\n\n v_viewPos = (modelViewMatrix * vec4(position, 1.0)).xyz;\n v_TBN = mat3(T, B, N);\n v_uv = uv;\n\n gl_Position = projectionMatrix * vec4(v_viewPos, 1.0);\n}\n`, \"Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"___\n## Uniform Object and Shader Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"// these attributes get overwritten when textures are enabled\nmaterialUniform = {\n return {\n baseColor: new THREE.Color(0.8, 0.8, 0.8),\n metalness: 0.0,\n roughness: 0.4,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"uniformsObj = {\n return {\n u_lights_ambient: {value: uniformLightData.ambient},\n u_lights_dir: {value: uniformLightData.directional},\n u_lights_point: {value: uniformLightData.point},\n\n u_material: {\n value: {\n baseColor: materialUniform.baseColor,\n metalness: materialUniform.metalness,\n roughness: materialUniform.roughness,\n }\n },\n\n u_enableColorMapping: { value: toggleParams.color },\n u_enableNormalMapping: { value: toggleParams.normal },\n u_enableRoughnessMapping: { value: toggleParams.roughness },\n \n u_baseColorTexture: { value: textureUniforms.baseColorTexture },\n u_normalTexture: { value: textureUniforms.normalTexture },\n u_roughnessTexture: { value: textureUniforms.roughnessTexture },\n u_metalnessTexture: { value: textureUniforms.metalnessTexture },\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"makeShaderMaterial = (vertS, fragS, defines) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniformsObj,\n side: THREE.DoubleSide,\n defines: {\n USE_TANGENT: '',\n ...defines\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"phongMaterial = makeShaderMaterial(vert_glsl, frag_glsl, { MAX_LIGHTS: MAX_LIGHTS })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"// match this with GLSL shaders\nMAX_LIGHTS = 4;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"ambientLights = [\n {\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.05,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"directionalLights = [\n {\n direction: new THREE.Vector3(-1, -3, -3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 1.0,\n },\n {\n direction: new THREE.Vector3(1, -1, 3).normalize(),\n color: new THREE.Vector3(0.9, 0.8, 1.0),\n intensity: 1.0,\n },\n {\n direction: new THREE.Vector3(0, 1, 0).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.8,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"pointLights = [\n {\n position: new THREE.Vector3(-8, 0, 0),\n color: new THREE.Vector3(1.0, 0.9, 0.8),\n intensity: 40.0,\n },\n {\n position: new THREE.Vector3(8, 0, 0),\n color: new THREE.Vector3(0.8, 0.9, 1.0),\n intensity: 40.0,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"uniformLightData = {\n const paddedAmbient = ambientLights.slice(0, MAX_LIGHTS);\n while (paddedAmbient.length < MAX_LIGHTS) {\n paddedAmbient.push({\n color: new THREE.Vector3(0.0, 0.0, 0.0),\n intensity: 0.0,\n });\n }\n\n const paddedDir = directionalLights.slice(0, MAX_LIGHTS);\n while (paddedDir.length < MAX_LIGHTS) {\n paddedDir.push({\n direction: new THREE.Vector3(0, 0, -1),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n });\n }\n\n const paddedPoint = pointLights.slice(0, MAX_LIGHTS);\n while (paddedPoint.length < MAX_LIGHTS) {\n paddedPoint.push({\n position: new THREE.Vector3(0, 0, 0),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n });\n }\n\n return { ambient: paddedAmbient, directional: paddedDir, point: paddedPoint };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":107,"value":"meshObj = {\n const geometry = await createGeometry(geometrySelectParams);\n geometry.computeTangents();\n if (!geometry) return null;\n const obj = new THREE.Mesh(geometry, phongMaterial);\n\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n // scene.add(originTarget);\n // scene.add(dirLight);\n\n scene.add(meshObj);\n\n // const floorGeom = new THREE.PlaneGeometry(8, 8);\n // const floorMesh = new THREE.Mesh(floorGeom, phongMaterial);\n // floorMesh.rotation.x = - Math.PI / 2;\n // floorMesh.position.y = - 1.0;\n // scene.add(floorMesh);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"mainCamera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(0, 0, 3);\n const oldTarget = target;\n\n const fov = 50;\n const aspect = width / height;\n const near = 0.01;\n const far = 1000;\n let cam = new THREE.PerspectiveCamera(fov, aspect, near, far);\n\n cam.position.copy(oldPos);\n cam.lookAt(oldTarget);\n mutable oldCamera = cam;\n\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"renderer = {\n const canvas = document.getElementById(\"three-canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"controls = {\n const controls = new THREE.OrbitControls(mainCamera, renderer.domElement);\n controls.target.copy(mutable target);\n controls.enableDamping = true;\n controls.dampingFactor = 0.15;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n mutable target.copy(controls.target); // sync to global target\n mainRender();\n });\n invalidation.then(() => {\n controls.dispose();\n renderer.dispose();\n });\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"mainRender = () => {\n renderer.render(scene, mainCamera);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n mainRender();\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"mixColor = (a, b, t) => {\n return new THREE.Color(\n a.r * (1 - t) + b.r * t,\n a.g * (1 - t) + b.g * t,\n a.b * (1 - t) + b.b * t\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/loaders/OBJLoader.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/utils/BufferGeometryUtils.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/geometries/TeapotGeometry.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"async function createGeometry(geometryType) {\n switch (geometryType) {\n case \"Teapot\":\n return await teapotGeometry;\n case \"Cube\":\n return await cubeGeometry;\n case \"Sphere\":\n return await sphereGeometry;\n case \"Earth\":\n return await earthGeometry;\n default:\n console.warn(\"Unknown geometry type:\", geometryType);\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"teapotGeometry = scaleUVs(new THREE.TeapotGeometry( 0.5, 18 ), 1.0, 1.0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"cubeGeometry = scaleUVs(new THREE.BoxGeometry( 1.2, 1.2, 1.2, 8, 8, 8 ), 1.0, 1.0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"sphereGeometry = scaleUVs(new THREE.SphereGeometry( 1, 96, 64 ), 4.0, 2.0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"earthGeometry = scaleUVs(new THREE.SphereGeometry( 1, 96, 64 ), 1.0, 1.0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import { mdGLSL_toggle, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"Textures taken from: [AmbientCG](https://ambientcg.com/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":741,"value":"Earth Textures by: [Planet Texture Maps](https://planetpixelemporium.com/earth8081.html), [NASA Elevation Data](https://poniesandlight.co.uk/reflect/creating_normal_maps_from_nasa_depth_data/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"