2a:null 2b:["$","title",null,{"children":"Reflection via Environment Mapping | VIDI Intro Graphics | Observable"}] 30:T64b,## Advanced Topic # Reflection via Environment Mapping Sometimes, you want reflections on a surface to look realistic but there's nothing for them to reflect. Then you think about modeling every single thing in a scene for reflection: every blade of grass, every pebble, every dangling leaf. Your poor computer would probably file a resignation letter. To solve this, people came up with a technique called **environment mapping**, which fakes the world around your object without actually modeling all of it. The idea is simple: wrap your scene in a precomputed 360 degree texture and reflect it on your surfaces. Once you have a reflection vector at a point on an object, you map that 3D direction onto the environment texture, producing reflections that make the object feel like it's actually somewhere. The result? Realistic-looking reflections without forcing your computer to sweat over millions of individual details. Although sharp reflections look great on mirrors, rough surfaces need a little extra handling. Several faking techniques exist like blurring, blending colors, or using more advanced methods such as prefiltered mipmaps to make rough surfaces behave more accurately. **Limitation**? Environment mapping is basically a clever illusion. Your shiny teapot might happily reflect the skybox around it, but don't expect the teapot's body to reflect its own spout and handle. Each fragment only knows about the environment map, not its neighbors. To capture those kinds of true reflections, where objects reflect themselves and each other, you'll need heavier concepts like **ray tracing**.31:T44d,viewof geometrySelectParams = { const form = html``; const inputs = form.querySelectorAll('input[type="radio"]'); function updateValue() { form.value = form.querySelector('input[name="geom"]:checked').value; form.dispatchEvent(new CustomEvent("input")); } inputs.forEach(input => {input.addEventListener("change", updateValue);}); updateValue(); return form; } 32:T7d7,viewof frag_glsl = mdGLSL_toggle_dark(`#define MAX_LIGHTS 8 precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct Material { vec3 baseColor; float metalness; float roughness; }; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform Material u_material; uniform sampler2D u_envMap; uniform float u_blurLevel; in vec3 v_worldPos; in vec3 v_worldNormal; in vec3 v_viewPos; in vec3 v_viewNormal; vec3 getViewDir(vec3 pos_view) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-pos_view); } vec3 getViewDirInWorld(vec3 pos_world) { return normalize(cameraPosition - pos_world); } 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 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; } vec3 calcEnvMapColor(vec3 R, float blurLevel) { float phi = atan(R.z, R.x); float theta = asin(R.y); vec2 uv = vec2((phi + 3.14159265) / (2.0 * 3.14159265), (theta + 1.57079633) / 3.14159265); return textureLod(u_envMap, uv, blurLevel).rgb; } void main() { vec3 viewPos = v_viewPos; vec3 viewNormal = v_viewNormal; vec3 worldPos = v_worldPos; vec3 worldNormal = v_worldNormal; vec3 baseColor = u_material.baseColor; float metalness = u_material.metalness; vec3 kA = baseColor; vec3 kS = mix(vec3(0.04), baseColor, metalness); vec3 color = vec3(0.0); color += shadeAmbient(kA); color += shadeFresnel(kS, viewNormal, viewPos); vec3 I = getViewDirInWorld(worldPos); vec3 R = reflect(-I, worldNormal); color += calcEnvMapColor(R, u_blurLevel); gl_FragColor = vec4(color, 1.0); } `, "Fragment shader")33:[{"id":"80f4f2b40c3a401aa27288662c0b2d1b96b714a36c29b2b5c819cad29acb6d21be62e2dc8b5f1bcbf5d6620da4ef92f2daa56356bf446fb4ab64eeb99acad99f","href":"https://static.observableusercontent.com/files/80f4f2b40c3a401aa27288662c0b2d1b96b714a36c29b2b5c819cad29acb6d21be62e2dc8b5f1bcbf5d6620da4ef92f2daa56356bf446fb4ab64eeb99acad99f","name":"field_sunrise.png","type":"image/webp","lastModified":1758081799249.98,"size":323522},{"id":"3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","href":"https://static.observableusercontent.com/files/3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","name":"stanford-bunny.obj","type":"model/obj","lastModified":1758091588851.629,"size":4661961},{"id":"0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","href":"https://static.observableusercontent.com/files/0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","name":"lucy.obj","type":"model/obj","lastModified":1758091589429.177,"size":7006032}] 2e:{"id":"1d9367dab59a9a57","slug":"reflection-via-environment-mapping","title":"Reflection via Environment Mapping","thumbnail":"992d6d0c4400af6023981ae4dac7e376ea4feb7d929b26a3296f55610e3c548c","access_level":"public","create_time":"$D2025-09-17T02:51:13.762Z","update_time":"$D2026-02-11T01:36:39.870Z","view_time":null,"first_public_time":"$D2025-09-17T06:01:28.372Z","fork":false,"stars":3,"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":374,"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":"Reflection via Environment Mapping","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":79,"value":"$31","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":298,"value":"*We can sample lower mipmap levels of the environment map to fake the surface roughness. It's not physically accurate, but it's a common trick that trades a bit of accuracy for speed and simplicity.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":261,"value":"viewof blurParams = {\n const div = html`

\n \n Blur Level:\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function update() {\n spans[0].textContent = (+inputs[0].value).toFixed(2);\n\n div.value = {\n blurLevel: +inputs[0].value,\n };\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", update);\n });\n\n update();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"___\n## Environment Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"getTexture = (url) => {\n \n const tex = new THREE.TextureLoader().load(url);\n tex.minFilter = THREE.LinearMipmapLinearFilter;\n tex.magFilter = THREE.LinearFilter;\n tex.mapping = THREE.EquirectangularReflectionMapping;\n \n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"envUniform = {\n let texture;\n texture = {\n envMap: await getTexture(await FileAttachment(\"field_sunrise.png\").url()),\n };\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"___\n## Uniform Object and Shader Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"materialUniform = {\n return {\n baseColor: new THREE.Color(0.8, 0.8, 0.8),\n metalness: 0.1,\n roughness: 0.5,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"uniformsObj = {\n return {\n u_lights_ambient: {value: uniformLightData.ambient},\n\n u_material: {\n value: {\n baseColor: materialUniform.baseColor,\n metalness: materialUniform.metalness,\n roughness: materialUniform.roughness,\n }\n },\n\n u_envMap: { value: envUniform.envMap },\n u_blurLevel: { value: blurParams.blurLevel },\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"makeShaderMaterial = (vertS, fragS) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniformsObj,\n side: THREE.DoubleSide,\n defines: { USE_TANGENT: '' }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"phongMaterial = makeShaderMaterial(vert_glsl, frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"bgMaterial = makeShaderMaterial(vert_glsl, bg_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":113,"value":"viewof vert_glsl = mdGLSL_toggle_dark(`out vec3 v_worldPos;\nout vec3 v_worldNormal;\nout vec3 v_viewPos;\nout vec3 v_viewNormal;\n\nvoid main() {\n v_worldPos = (modelMatrix * vec4(position, 1.0)).xyz;\n v_worldNormal = normalize(mat3(modelMatrix) * normal);\n\n v_viewPos = (modelViewMatrix * vec4(position, 1.0)).xyz;\n v_viewNormal = normalize(normalMatrix * normal);\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":116,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"viewof bg_frag_glsl = mdGLSL_toggle_dark(`precision mediump float;\n\nuniform sampler2D u_envMap;\n\nin vec3 v_worldPos;\n\nvec3 getViewDirInWorld(vec3 pos_world) {\n return normalize(cameraPosition - pos_world);\n}\n\nvec3 calcEnvMapColor(vec3 dir) {\n float phi = atan(dir.z, dir.x);\n float theta = asin(dir.y);\n vec2 uv = vec2((phi + 3.14159265) / (2.0 * 3.14159265),\n (theta + 1.57079633) / 3.14159265);\n\n return textureLod(u_envMap, uv, 0.0).rgb;\n}\n\nvoid main() {\n // Direction from fragment (on the \"skybox\") to camera\n vec3 I = getViewDirInWorld(v_worldPos);\n vec3 color = calcEnvMapColor(-I);\n gl_FragColor = vec4(color, 1.0);\n}\n`, \"Fragment shader (environment background)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"// match this with GLSL shaders\nMAX_LIGHTS = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"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":108,"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 return { ambient: paddedAmbient };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"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 const gp = new THREE.Group();\n\n gp.add(obj);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"bgObj = {\n const geometry = new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 );\n const obj = new THREE.Mesh(geometry, bgMaterial);\n\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(bgObj);\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":40,"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":34,"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":30,"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":28,"value":"controls = {\n const controls = new THREE.OrbitControls(mainCamera, renderer.domElement);\n \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":25,"value":"mainRender = () => {\n renderer.render(scene, mainCamera);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"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":10,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"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":52,"value":"loadAndNormalizeOBJ = async (objText) => {\n const objLoader = new THREE.OBJLoader;\n const object = objLoader.parse(objText);\n\n let geo = null;\n object.traverse((child) => {\n if (child.isMesh && child.geometry) {\n geo = child.geometry;\n }\n });\n\n geo.computeBoundingBox();\n const box = geo.boundingBox;\n\n const center = new THREE.Vector3();\n box.getCenter(center);\n geo.translate(-center.x, -center.y, -center.z);\n\n const size = new THREE.Vector3();\n box.getSize(size);\n const maxDimension = Math.max(size.x, size.y, size.z);\n const scaleFactor = 2.0 / maxDimension;\n geo.scale(scaleFactor, scaleFactor, scaleFactor);\n\n geo = THREE.BufferGeometryUtils.mergeVertices(geo, 0.015);\n geo.computeVertexNormals();\n\n return geo;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"async function createGeometry(geometryType) {\n switch (geometryType) {\n case \"Teapot\":\n return await teapotGeometry;\n case \"Cube\":\n return await cubeGeometry;\n case \"TorusKnot\":\n return await torusKnotGeometry;\n case \"Sphere\":\n return await sphereGeometry;\n case \"Bunny\":\n return await stanfordBunnyGeometry;\n case \"Lucy\":\n return await lucyGeometry;\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":58,"value":"teapotGeometry = new THREE.TeapotGeometry( 0.5, 18 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"cubeGeometry = new THREE.BoxGeometry( 1.2, 1.2, 1.2, 8, 8, 8 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"sphereGeometry = new THREE.IcosahedronGeometry( 1, 10 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"torusKnotGeometry = new THREE.TorusKnotGeometry(0.6, 0.2, 280, 26, 2, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"stanfordBunnyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"stanford-bunny.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"lucyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"lucy.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"import { mdGLSL_toggle_dark, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"EnvMaps taken from: [Poly Haven](https://polyhaven.com/hdris)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"