2a:null 2b:["$","title",null,{"children":"Shadow Mapping | VIDI Intro Graphics | Observable"}] 30:T452,## Lighting Techniques # Shadow Mapping > *"The shadows are as important as the light."* - Charlotte Bronte Shadows occur when objects block light, or in other words, the absence of light. In computer graphics, making a pipeline aware of scene geometry without tracing every possible line of sight is not only challenging, but also extremely costly when done naively, especially on a rasterization-focused GLSL pipeline. One of the most common shadow calculation techniques is **shadow mapping**. The high level idea is that, the scene is first rendered from the light's point of view into a depth texture (known as the shadow map). In the main render, each fragment is transformed into light space and its depth is compared to the shadow map to decide whether it is occluded from the light source. In this notebook, you can explore: - **Light Direction Control**: Adjust azimuth and elevation angle controls for the directional light. - **Light Perspective Render**: View a side-by-side light-perspective visualization. - **Shadow-map Resolution Control**: See tradeoffs between aliasing and quality.31:T1283,viewof phong_frag_glsl = mdGLSL_toggle(`#define MAX_LIGHTS 8 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; float shininess; vec3 kA; vec3 kD; vec3 kS; }; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_light_dir; // casts shadow uniform PointLight u_lights_point[MAX_LIGHTS]; // Shadow mapping uniform sampler2D shadowMap; uniform mat4 lightMatrix; uniform Material u_material; uniform float u_shadowResolution; uniform bool u_PCF; uniform float u_shadowBias; in vec3 v_worldPos; in vec3 v_viewPos; in vec3 v_viewNormal; vec3 getViewDir(vec3 viewPos) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-viewPos); } vec3 shadeAmbient(Material material) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += material.kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuse(Material material, vec3 normal, vec3 viewPos, float shadow) { vec3 result = vec3(0.0); // Directional light vec3 L = normalize((mat3(viewMatrix) * -u_light_dir.direction)); float NdotL = max(dot(normalize(normal), L), 0.0); result += shadow * material.kD * u_light_dir.color * u_light_dir.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 lightDir = lightViewPos - viewPos; vec3 L = normalize(lightDir); float distanceSQ = max(dot(lightDir, lightDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); result += material.kD * u_lights_point[i].color * u_lights_point[i].intensity * NdotL / distanceSQ; } return result; } vec3 shadeSpecular(Material material, vec3 normal, vec3 viewPos, float shadow) { vec3 result = vec3(0.0); float shininess = material.shininess; float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 V = getViewDir(viewPos); // Directional lights vec3 L = normalize((mat3(viewMatrix) * -u_light_dir.direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += shadow * material.kS * u_light_dir.color * u_light_dir.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 lightDir = lightViewPos - viewPos; vec3 L = normalize(lightDir); float distanceSQ = max(dot(lightDir, lightDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += material.kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } float shadowTest(vec3 scaled_ndc, sampler2D shadowMap, vec2 offset, float bias) { float depth = texture(shadowMap, clamp(scaled_ndc.xy + offset, 0.0, 1.0)).r; return (scaled_ndc.z > depth + bias) ? 0.0 : 1.0; } float shadowPCF(vec3 scaled_ndc, sampler2D shadowMap) { float bias = u_shadowBias; // Non-PCF: single test if (!u_PCF) { return shadowTest(scaled_ndc, shadowMap, vec2(0.0), bias); } // PCF: average multiple tests float result = 0.0; int kernelRadius = 1; float texelSize = 1.0 / u_shadowResolution; for (int x = -kernelRadius; x <= kernelRadius; x++) { for (int y = -kernelRadius; y <= kernelRadius; y++) { vec2 offset = vec2(x, y) * texelSize; result += shadowTest(scaled_ndc, shadowMap, offset, bias); } } return result / pow(float(2 * kernelRadius + 1), 2.0); } void main() { vec3 worldPos = v_worldPos; vec3 viewPos = v_viewPos; vec3 viewNormal = v_viewNormal; vec4 lightSpacePos = lightMatrix * vec4(worldPos, 1.0); vec3 ndc = lightSpacePos.xyz / lightSpacePos.w; // perspective divide [-1,1] vec3 scaled_ndc = ndc * 0.5 + 0.5; // [0,1] float shadow = shadowPCF(scaled_ndc, shadowMap); vec3 color = vec3(0.0); color += shadeAmbient (u_material); color += shadeDiffuse (u_material, viewNormal, viewPos, shadow); color += shadeSpecular (u_material, viewNormal, viewPos, shadow); gl_FragColor = vec4(color, 1.0); } `, "Fragment shader")32:T416,uniformsObj = { return { u_lights_ambient: {value: uniformLightData.ambient}, u_light_dir: {value: uniformLightData.directional}, u_lights_point: {value: uniformLightData.point}, shadowMap: { value: shadowTarget.depthTexture }, lightMatrix: { value: lightMatrix }, u_material: { value: { baseColor: materialUniform.baseColor, metalness: materialUniform.metalness, roughness: materialUniform.roughness, shininess: 1 + Math.pow(1 - materialUniform.roughness, 3) * 1023, kA: materialUniform.baseColor.clone().multiplyScalar(1.0 - 0.8 * materialUniform.metalness), kD: materialUniform.baseColor.clone().multiplyScalar(1.0 - 0.8 * materialUniform.metalness), kS: mixColor(new THREE.Color(0.04, 0.04, 0.04), materialUniform.baseColor, 0.2 * materialUniform.metalness + 0.2), } }, u_shadowResolution: { value: shadowParams.shadowResolution }, u_PCF: { value: shadowToggleParams.PCF }, u_shadowBias: { value: shadowParams.shadowBias }, } }33:[{"id":"0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","href":"https://static.observableusercontent.com/files/0c64a67e3c5ab22c84ac4feddeafcd07ce3f44917be4f6a483530c4a2f3fc3b8f12b38ce575ff5cfa93b7767f0f6d41da55ab68b0fb8dcbeed3a8d745b0cbfad","name":"lucy.obj","type":"model/obj","lastModified":1755416853702.835,"size":7006032},{"id":"3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","href":"https://static.observableusercontent.com/files/3a27265aaaa160b74eeda32549f20e894a8ab0fca06d95a9fe88be92986840a1b835a68341056cbf64ed0f2f826f1ade8f21e9ce13872f3b91f7e3ba83f0d24f","name":"stanford-bunny.obj","type":"model/obj","lastModified":1755416853168.18,"size":4661961}] 2e:{"id":"c062d5a115e0f069","slug":"shadow-mapping","title":"Shadow Mapping","thumbnail":"a3d1284a8407c0265c2e312fb416f5b3d4dba033f241333ac02ad952a9a59287","access_level":"public","create_time":"$D2025-08-15T06:46:05.471Z","update_time":"$D2026-02-24T19:51:39.594Z","view_time":null,"first_public_time":"$D2025-08-15T06:46:05.471Z","fork":false,"stars":2,"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":762,"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":"Shadow Mapping","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":562,"value":"___\n## Quick Manual\n\n- Use the *Azimuth* and *Elevation* sliders to set the directional light's azimuth and elevation.\n- Use the *Shadow resolution* slider to change the shadow-map (depth buffer) resolution and observe how it affects aliasing and quality.\n - Lower resolutions render quickly but often produce aliasing artifacts such as blocky edges and \"shadow acne\" (a phenomenon where surfaces incorrectly self-shadow due to low shadow map resolution).\n - Higher resolutions reduce these artifacts and yield sharper shadows but require more memory and computation.\n- Use the *Comparison bias* slider to adjust the offset applied during depth comparison.\n - Low bias values produce shadow acne (surfaces wrongly shadowing themselves).\n - High bias values produce peter-panning (shadows detach from objects, making them appear to float).\n - A well-chosen bias balances between the two. In this example, a value around `0.001` works well, though the *best* setting depends on scene scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"canvas = html`

\n\n

Main Camera

Light Depth Render

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"viewof angleParams = {\n const div = html`

\n \n Azimuth:°\n \n \n Elevation:°\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function updateEulerAngles() {\n spans[0].textContent = inputs[0].value;\n spans[1].textContent = inputs[1].value;\n\n div.value = {\n azimuthAngle: +inputs[0].value,\n elevationAngle: +inputs[1].value,\n };\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", updateEulerAngles);\n });\n\n updateEulerAngles();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"### Shadow Control Parameters:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":483,"value":"viewof shadowParams = {\n const div = html`

\n \n Shadow resolution:\n \n \n \n Comparison bias:\n \n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function update() {\n const size = Math.pow(2, +inputs[0].value);\n const bias = +inputs[1].value / 1e5;\n \n spans[0].textContent = `${size} x ${size}`;\n spans[1].textContent = bias.toFixed(5);\n\n div.value = {\n shadowResolution: size,\n shadowBias: bias,\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":623,"value":"viewof shadowToggleParams = {\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":515,"value":"### Geometry:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":462,"value":"viewof geometryType = {\n const form = html``;\n\n form.value = form.mode.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value;\n form.dispatchEvent(new CustomEvent(\"input\")); // notify value change\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"___\n## All Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":155,"value":"// match this with GLSL shaders\nMAX_LIGHTS = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"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":125,"value":"directionalLight = {\n return {\n direction: new THREE.Vector3().subVectors(lightData.lookAt, lightData.position).normalize(),\n color: new THREE.Color(lightData.color),\n intensity: lightData.intensity,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"pointLights = [\n {\n position: new THREE.Vector3(-8, 0, 0),\n color: new THREE.Vector3(1.0, 0.6, 0.4),\n intensity: 10.0,\n },\n {\n position: new THREE.Vector3(8, 0, 0),\n color: new THREE.Vector3(0.4, 0.6, 1.0),\n intensity: 10.0,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"___\n## Shadow Casting Light Source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"lightData = {\n const r = 5;\n const cosPhi = Math.cos(elevationAngle);\n const x = r * cosPhi * Math.sin(azimuthAngle);\n const y = r * Math.sin(elevationAngle)\n const z = r * cosPhi * Math.cos(azimuthAngle);\n \n return {\n position: new THREE.Vector3(x, y, z),\n lookAt: new THREE.Vector3(0, 0, 0),\n color: 0xffffff,\n intensity: 1.0,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"lightCamera = {\n const edgeLength = 6;\n const left = -edgeLength; const right = edgeLength;\n const top = edgeLength; const bottom = -edgeLength;\n const near = 0.01; const far = 12;\n const cam = new THREE.OrthographicCamera(left, right, top, bottom, near, far);\n cam.position.copy(lightData.position);\n cam.lookAt(lightData.lookAt);\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"shadowTarget = {\n const size = shadowParams.shadowResolution;\n const rt = new THREE.WebGLRenderTarget(size, size);\n rt.depthTexture = new THREE.DepthTexture();\n rt.depthTexture.format = THREE.DepthFormat;\n rt.depthTexture.type = THREE.UnsignedShortType;\n return rt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"depthMaterial = {\n return new THREE.MeshDepthMaterial({ side: THREE.DoubleSide });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"lightMatrix = {\n lightCamera.updateMatrixWorld();\n lightCamera.updateProjectionMatrix();\n\n const mat4 = new THREE.Matrix4();\n return mat4.multiplyMatrices(\n lightCamera.projectionMatrix,\n lightCamera.matrixWorldInverse\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"viewof phong_vert_glsl = mdGLSL_toggle(`out vec3 v_worldPos;\nout vec3 v_viewPos;\nout vec3 v_viewNormal;\n\nvoid main() {\n v_worldPos = (modelMatrix * vec4(position, 1.0)).xyz;\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":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"___\n## Uniform Object and Shader Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":164,"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 = directionalLight;\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}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"materialUniform = {\n return {\n baseColor: new THREE.Color(1.0, 1.0, 1.0),\n metalness: 0.2,\n roughness: 0.4,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"makeShaderMaterial = (vertS, fragS) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniformsObj,\n side: THREE.DoubleSide,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"phongMaterial = makeShaderMaterial(phong_vert_glsl, phong_frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":465,"value":"meshObj = {\n const geometry = await createGeometry(geometryType);\n if (!geometry) return null;\n const obj = new THREE.Mesh(geometry, phongMaterial);\n\n const gp = new THREE.Group();\n\nswitch (geometryType) {\n case \"Teapot\":\n gp.scale.setScalar(0.6); gp.position.y = -0.4; break;\n case \"Bunny\":\n gp.scale.setScalar(1.2); gp.position.y = 0.2; break;\n case \"Lucy\":\n gp.scale.setScalar(1.6); gp.position.y = 0.6; break;\n}\n\n gp.add(obj);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"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":673,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"mainCamera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(3.2, 2, 2.6);\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":12,"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, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"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":16,"value":"mainRender = () => {\n // Set depth materials\n const savedMats = [];\n scene.traverse(obj => {\n if (obj.isMesh) {\n savedMats.push([obj, obj.material]);\n obj.material = depthMaterial;\n }\n });\n \n // --- shadow pass ---\n renderer.setRenderTarget(shadowTarget);\n renderer.render(scene, lightCamera);\n renderer.setRenderTarget(null);\n \n renderer.setScissorTest(true);\n \n // --- light depth ---\n renderer.setViewport(width + 1, 0, height, height);\n renderer.setScissor(width + 1, 0, height, height);\n renderer.render(scene, lightCamera);\n \n // Restore original materials\n savedMats.forEach(([mesh, mat]) => mesh.material = mat);\n \n // --- main ---\n renderer.setViewport(0, 0, width - 1, height);\n renderer.setScissor(0, 0, width - 1, height);\n renderer.render(scene, mainCamera);\n \n renderer.setScissorTest(false);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"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":498,"value":"elevationAngleInDeg = angleParams.elevationAngle;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"elevationAngle = elevationAngleInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"azimuthAngleInDeg = angleParams.azimuthAngle;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"azimuthAngle = azimuthAngleInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"width = 550;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"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":26,"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":452,"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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"async function createGeometry(geometryType) {\n switch (geometryType) {\n case \"Teapot\":\n return await teapotGeometry;\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":455,"value":"stanfordBunnyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"stanford-bunny.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"lucyGeometry = loadAndNormalizeOBJ(await FileAttachment(\"lucy.obj\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"teapotGeometry = new THREE.TeapotGeometry( 1.0, 18 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"import { mdGLSL_toggle, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":736,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"