2a:null 2b:["$","title",null,{"children":"Ray Tracing | VIDI Intro Graphics | Observable"}] 30:T7ec,## Advanced Topic # Ray Tracing Ever wondered how animations or CGIs make glass sparkle or mirrors reflect perfectly? That's **ray tracing** at work. Unlike rasterization, which approximates visibility by projecting geometry onto the screen, ray tracing technique follows rays of light as they bounce around the scene, naturally capturing reflections, refractions, and shadows according to real-world physics. In this example, the following techniques have been utilized to enhance and balance between realism and performance trade-offs: - **Bounding Volume Hierarchy** (BVH) is used to accelerate ray-scene intersections, making it possible to render complex geometry efficiently. By organizing geometry hierarchically, BVHs drastically reduce the average intersection test from **O(n)** (linear search) to roughly **O(logn)** where **n** is the number of triangles in the scene. This optimization is what allows modern ray tracers to handle highly detailed scenes in practical time. Three rendering modes are available: - **Basic** - simple direct lighting without secondary ray bounces. - **Whitted-Style Ray Tracing** - deterministic ray reflections where each bounce follows a single predictable direction, allowing recursive light transport while remaining stable and noise-free. - **Path Tracing** - Monte Carlo sampling approximates how light is transported in a scene by sampling many possible light paths using randomness. This allows the renderer to approximate global illumination, including indirect lighting and diffuse light bouncing between surfaces. While this notebook goes far beyond the scope of what is typically covered in this class, it demonstrates how foundational concepts you learn here can be scaled into production-style renderers. You can adjust the sliders to explore how ray bounce and sample count affect the image, or dive into the JavaScript and GLSL code to explore BVH construction and traversal. *Don’t worry if it feels complex. This is here to spark curiosity, not overwhelm you.*31:T482,viewof renderParams = { const div = html`

Sample Count per Pixel:0 Ray Bounce:0

FOV:0

`; const inputs = div.querySelectorAll("input"); const spans = div.querySelectorAll("span"); function updatePointCoord() { spans.forEach((span, i) => { span.textContent = inputs[i].value; }); div.value = { sampleCount: +inputs[0].value, maxBounce: +inputs[1].value, FOV: +inputs[2].value }; div.dispatchEvent(new CustomEvent("input")); } inputs.forEach(input => { input.addEventListener("input", updatePointCoord); }); updatePointCoord(); return div; }32:T71f,viewof dofParams = { const div = html`

Depth of Field Effect

Focus Distance: Strength:

`; const checkbox = div.querySelector('input[type=checkbox][value="DOF"]'); const sliders = div.querySelectorAll('input[type=range]'); const spans = div.querySelectorAll('span'); function linearToLog(value) { return 1 + 47 * Math.pow(value, 2.5); // your existing mapping for focus distance } function update() { const distance = linearToLog(+sliders[0].value); const strength = checkbox.checked ? +sliders[1].value : 0; div.value = { distance: distance, strength: strength }; spans[0].textContent = distance.toFixed(4); spans[1].textContent = strength.toFixed(3); sliders.forEach(s => s.disabled = !checkbox.checked); div.dispatchEvent(new CustomEvent("input")); } checkbox.addEventListener("change", update); sliders.forEach(s => s.addEventListener("input", update)); update(); function updateEnabled() { const shouldEnableCheckbox = ["PathTraced"].includes(viewof renderMode.value); checkbox.disabled = !shouldEnableCheckbox; sliders.forEach(s => s.disabled = !checkbox.checked || checkbox.disabled); } viewof renderMode.addEventListener("input", updateEnabled); updateEnabled(); return div; }33:T5ff,___ ## BVH Node Structure Each BVH node stores bounding box and traversal data in two `vec4`s. This compact layout allows loading all traversal info with just two memory fetches, key for GPU ray tracing performance. ${mdPlain(`2x vec4 -> 8x float -> 32 Bytes / 256 bits per BVH node `)} **Internal BVH Node**: Internal nodes store *combined* bounds of two child nodes in the top `vec3` of each `vec4`. The 4th 32-bit slots (31-bit slot in first `vec4`) hold the indices of left and right child nodes in BVH node array. The 97th bit (first bit of the low 32 bits) is the ***Leaf Flag***, set to 0. ${mdPlain(` 32bit | 32bit | 32bit | 1bit | ----------- 31bit ----------- vec4 [ float x | float y | float z | 0 | index of left child BVH node ] min bounds vec4 [ float x | float y | float z | index of right child BVH node ] max bounds `)} **Leaf BVH Node**: Leaf nodes store *combined* bounds of all contained primitives in the top `vec3` of each `vec4`. The low 31 bits of the first `vec4` store the primitive count, and the low 32 bits of the second `vec4` store the starting index of the first primitive in the primitive array. The 97th bit (first bit of low 32 bits) is the ***Leaf Flag***, set to 1. ${mdPlain(` 32bit | 32bit | 32bit | 1bit | ---------------- 31bit --------------- vec4 [ float x | float y | float z | 1 | Primitive Count ] min bounds vec4 [ float x | float y | float z | offset of 1st vert of 1st triangle in prim array ] max bounds `)}34:T1411,primitivesMetaData = { /* ===== ===== functions ===== ===== */ function add(a,b) { return [ a[0]+b[0], a[1]+b[1], a[2]+b[2] ] } function mulScalar(a,s) { return [ a[0]*s, a[1]*s, a[2]*s ] } // returns [x,y,z] of v'th vertex of triIdx'th triange in pos array function triVertex (posArray, triIdx, v) { // triIdx: 0 ... N-1, v: 0/1/2 const base = triIdx * 9 + v * 3; return [ posArray[base], posArray[base+1], posArray[base+2] ]; } // return min max bounding boxes, centroids and three vertices of triIdx'th triangle in pos array function computeTriBoundsAndCentroid(posArray, triIdx) { const v0 = triVertex(posArray, triIdx, 0); const v1 = triVertex(posArray, triIdx, 1); const v2 = triVertex(posArray, triIdx, 2); const min = [ Math.min(v0[0], v1[0], v2[0]), Math.min(v0[1], v1[1], v2[1]), Math.min(v0[2], v1[2], v2[2]) ]; const max = [ Math.max(v0[0], v1[0], v2[0]), Math.max(v0[1], v1[1], v2[1]), Math.max(v0[2], v1[2], v2[2]) ]; const centroid = mulScalar(add(add(v0, v1), v2), 1/3); return {min, max, centroid, v0, v1, v2}; } // extend the bounds of bMin and bMax by extendMin and extendMax function extendBounds(bMin, bMax, extendMin, extendMax) { bMin[0] = Math.min(bMin[0], extendMin[0]); bMin[1] = Math.min(bMin[1], extendMin[1]); bMin[2] = Math.min(bMin[2], extendMin[2]); bMax[0] = Math.max(bMax[0], extendMax[0]); bMax[1] = Math.max(bMax[1], extendMax[1]); bMax[2] = Math.max(bMax[2], extendMax[2]); } /* ===== ===== functions ===== ===== */ const t0 = performance.now(); const triCount = Math.floor(positionArray.length / 9); // 3 verts * 3 coords const prims = new Array(triCount); for (let i = 0; i < triCount; i++) { const p = computeTriBoundsAndCentroid(positionArray, i); // get material id from the first vertex of the triangle // (no material interpolation on a single triangle) const matId = materialIndexArray[i*3] ?? -1; // fallback prims[i] = { triIndex: i, min: p.min, max: p.max, centroid: p.centroid, v0: p.v0, v1: p.v1, v2: p.v2, matId: matId, }; } // primOrder will be permuted during build; initially [0,...,N-1] const primOrder = Uint32Array.from({ length: triCount }, (_, i) => i); // number of packed primitives in triangle buffer let packedPrimCount = 0; // Node layout in JS (matches 2xvec4): // { min:[x,y,z], left:uint, max:[x,y,z], right:uint } const BVHnodes = []; // ---------- BVH builder (median split by centroid) ---------- function buildNode(start, end) { // start inclusive, end exclusive; operates on primOrder in-place const count = end - start; // compute bounding box for this set let nodeMin = [ Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY ]; let nodeMax = [ Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY ]; for (let i = start; i < end; i++) { const p = prims[ primOrder[i] ]; extendBounds(nodeMin, nodeMax, p.min, p.max); } const nodeIndex = BVHnodes.length; BVHnodes.push(null); // reserve spot // construct leaf BVH node if (count <= LEAF_THRESHOLD) { const leftField = 0x80000000 | (count & 0x7FFFFFFF); // leaf_flag and primitive count in left const rightField = packedPrimCount; // primitive offset (index) in right packedPrimCount += (end - start); BVHnodes[nodeIndex] = { min: nodeMin, left: leftField, max: nodeMax, right: rightField, }; return nodeIndex; } // construct internal BVH node // compute bound of centroids to pick axis let cMin = [ Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY ]; let cMax = [ Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY ]; for (let i = start; i < end; i++) { const c = prims[ primOrder[i] ].centroid; extendBounds(cMin, cMax, c, c); } // choose split axis const dx = cMax[0] - cMin[0]; const dy = cMax[1] - cMin[1]; const dz = cMax[2] - cMin[2]; let axis = dx > dy ? 0 : 1; if ((axis === 0 ? dx : dy) < dz) axis = 2; // median partition by centroid along chosen axis const mid = start + Math.floor(count / 2); // partially sort in-place; based on chosen axis of centroids primOrder.subarray(start, end).sort((aIdx, bIdx) => prims[aIdx].centroid[axis] - prims[bIdx].centroid[axis] ); // recursive build const leftChildIdx = buildNode(start, mid); const rightChildIdx = buildNode(mid, end); BVHnodes[nodeIndex] = { min: nodeMin, left: leftChildIdx, max: nodeMax, right: rightChildIdx, }; return nodeIndex; } // buildNode // start build buildNode(0, triCount); const t1 = performance.now(); // end timing const buildTimeMs = t1 - t0; return { primData: prims, primIndices: primOrder, BVHnodes: BVHnodes, buildTimeMs: buildTimeMs, }; }35:T749,flattenedData = { // reinterpret Uint32 as Float32 const _u32 = new Uint32Array(1); const _f32 = new Float32Array(_u32.buffer); function uint32ToFloat32(u) { _u32[0] = u; return _f32[0]; } const primData = primitivesMetaData.primData; const nodes = primitivesMetaData.BVHnodes; const primIndices = primitivesMetaData.primIndices; // ---------- Pack nodes into Float32Array ---------- // check BVH node structure above for data layout const nodeCount = nodes.length; const BVHnodeF32 = new Float32Array(nodeCount * 8); // 8x f32 per node for (let i = 0, j = 0; i < nodeCount; i++, j += 8) { const n = nodes[i]; BVHnodeF32[j + 0] = n.min[0]; BVHnodeF32[j + 1] = n.min[1]; BVHnodeF32[j + 2] = n.min[2]; BVHnodeF32[j + 3] = uint32ToFloat32(n.left); BVHnodeF32[j + 4] = n.max[0]; BVHnodeF32[j + 5] = n.max[1]; BVHnodeF32[j + 6] = n.max[2]; BVHnodeF32[j + 7] = uint32ToFloat32(n.right); } // ---------- Pack triangle/primitives into Float32Array ---------- // check triangle primitive structure above for data layout const primCount = primIndices.length; const primBufferF32 = new Float32Array(primCount * 12); // 12x f32 per node for (let i = 0, j = 0; i < primCount; i++, j += 12) { const triIdx = primIndices[i]; const p = primData[triIdx]; primBufferF32[j + 0] = p.v0[0]; primBufferF32[j + 1] = p.v0[1]; primBufferF32[j + 2] = p.v0[2]; primBufferF32[j + 3] = uint32ToFloat32(p.matId); primBufferF32[j + 4] = p.v1[0]; primBufferF32[j + 5] = p.v1[1]; primBufferF32[j + 6] = p.v1[2]; primBufferF32[j + 8] = p.v2[0]; primBufferF32[j + 9] = p.v2[1]; primBufferF32[j +10] = p.v2[2]; } return { BVHnodeF32, BVHnodeF32Size: BVHnodeF32.length * 4, primBufferF32, primBufferF32Size: primBufferF32.length * 4, }; }36:T2ec7,viewof RT_frag_glsl = mdGLSL_toggle_dark(`#define PI 3.1415926f #define EPSILON 1e-8f precision mediump float; struct Material { vec3 ka; vec3 kd; vec3 ks; float ns; int illum; }; struct Ray { vec3 origin; vec3 direction; }; in vec3 worldPos; uniform sampler2D u_Positions; uniform sampler2D u_BVHNodes; uniform uint u_TexWidth; uniform sampler2D u_envMap; uniform Material u_materials[MAX_MATERIALS]; uniform uint u_numMaterials; uniform uint u_renderMode; uniform bool u_enableGrayScale; uniform uint u_ResolutionX; uniform uint u_ResolutionY; uniform uint u_sampleCount; uniform uint u_maxBounce; uniform float u_focalDist; uniform float u_DOFStrength; uniform float u_envMapRotate; uniform uint u_time; /* ===== RANDOM GENERATOR ===== */ /* * A number of functions to generate LCG random sequences * Reference: * https://www.reedbeta.com/blog/hash-functions-for-gpu-rendering/ * https://github.com/ospray/ospray/blob/66fa8108485a8a92ff31ad2e06081bbaf391bc26/modules/cpu/math/random.ih */ uint murmurhash3_mix(uint hash, uint k) { const uint c1 = 0xcc9e2d51u; const uint r1 = 15u; const uint c2 = 0x1b873593u; const uint r2 = 13u; const uint m = 5u; const uint n = 0xe6546b64u; k *= c1; k = (k << r1) | (k >> (32u - r1)); k *= c2; hash ^= k; hash = ((hash << r2) | (hash >> (32u - r2))) * m + n; return hash; } uint murmurhash3_finalize(uint hash) { hash ^= hash >> 16; hash *= 0x85ebca6bu; hash ^= hash >> 13; hash *= 0xc2b2ae35u; hash ^= hash >> 16; return hash; } struct RNG { uint state; }; RNG make_random(uint pixel_id, uint frame_no) { RNG rng; rng.state = murmurhash3_mix(0u, pixel_id); rng.state = murmurhash3_mix(rng.state, frame_no); rng.state = murmurhash3_finalize(rng.state); return rng; } uint next_random(inout RNG rng) { rng.state = 1664525u * rng.state + 1013904223u; return rng.state; } float next_randomf(inout RNG rng) { uint r = next_random(rng); return uintBitsToFloat((r & 0x007FFFFFu) | 0x3F800000u) - 1.0; } vec3 next_random3f(inout RNG rng) { return vec3(next_randomf(rng), next_randomf(rng), next_randomf(rng)); } vec2 get2dOffset(inout RNG rng) { // Generate random offset in [-1,1] range vec2 offset = vec2(next_randomf(rng), next_randomf(rng)) * 2.0 - 1.0; return offset; } vec2 get2dOffsetInCircle(inout RNG rng) { float theta = next_randomf(rng) * 2.0 * PI; float r = max(next_randomf(rng), next_randomf(rng)); return vec2(r * cos(theta), r * sin(theta)); } /* ===== RANDOM GENERATOR ===== */ /* ===== Texture Fetch ===== */ // Fetch BVH node data at nodeIdx void fetchNode(uint nodeIdx, out vec3 minB, out vec3 maxB, out uint left, out uint right) { uint base = nodeIdx * 2u; // 2 texels per BVH node uint x0 = base % u_TexWidth; uint y0 = base / u_TexWidth; uint x1 = (base + 1u) % u_TexWidth; uint y1 = (base + 1u) / u_TexWidth; vec4 t0 = texelFetch(u_BVHNodes, ivec2(int(x0), int(y0)), 0); vec4 t1 = texelFetch(u_BVHNodes, ivec2(int(x1), int(y1)), 0); minB = t0.xyz; left = floatBitsToUint(t0.w); maxB = t1.xyz; right = floatBitsToUint(t1.w); } // Fetch vertex data of n-th vertex at triIndex vec4 fetchTriangleVertex(uint triIndex, uint n) { uint base = triIndex * 3u + n; // 3 texels per triangle uint x = base % u_TexWidth; uint y = base / u_TexWidth; return texelFetch(u_Positions, ivec2(int(x), int(y)), 0); } /* ===== Texture Fetch ===== */ /* ===== Intersection Tests ===== */ bool intersectAABB(Ray ray, vec3 minB, vec3 maxB, out float tmin, out float tmax) { vec3 invD = 1.0 / ray.direction; vec3 t0s = (minB - ray.origin) * invD; vec3 t1s = (maxB - ray.origin) * invD; vec3 tsmaller = min(t0s, t1s); vec3 tbigger = max(t0s, t1s); tmin = max(max(tsmaller.x, tsmaller.y), tsmaller.z); tmax = min(min(tbigger.x, tbigger.y), tbigger.z); return tmax >= max(tmin, 0.0); } bool intersectTriangle(Ray ray, vec3 v0, vec3 v1, vec3 v2, out float t, out vec3 normal) { vec3 edge1 = v1 - v0; vec3 edge2 = v2 - v0; vec3 h = cross(ray.direction, edge2); float a = dot(edge1, h); if (abs(a) < EPSILON) return false; // Ray parallel to triangle float f = 1.0 / a; vec3 s = ray.origin - v0; float u = f * dot(s, h); if (u < 0.0 || u > 1.0) return false; vec3 q = cross(s, edge1); float v = f * dot(ray.direction, q); if (v < 0.0 || u + v > 1.0) return false; float tempT = f * dot(edge2, q); if (tempT > EPSILON) { t = tempT; normal = cross(edge1, edge2); return true; } return false; } bool traverseBVH(Ray ray, out float tClosest, out uint MaterialID, out vec3 normal) { tClosest = 1e30; bool hitSomething = false; uint stack[64]; int stackPtr = 0; stack[stackPtr++] = 0u; // root uint triCount; uint triStart; while (stackPtr > 0) { uint nodeIdx = stack[--stackPtr]; vec3 minB; vec3 maxB; uint left; uint right; fetchNode(nodeIdx, minB, maxB, left, right); float tmin; float tmax; if (!intersectAABB(ray, minB, maxB, tmin, tmax)) continue; if (tClosest < tmin) continue; bool isLeaf = (left & 0x80000000u) != 0u; if (isLeaf) { triCount = left & 0x7FFFFFFFu; triStart = right; for (uint i = 0u; i < triCount; i++) { vec4 v0 = fetchTriangleVertex(triStart + i, 0u); vec4 v1 = fetchTriangleVertex(triStart + i, 1u); vec4 v2 = fetchTriangleVertex(triStart + i, 2u); float tempT; vec3 tempNormal; if (intersectTriangle(ray, v0.xyz, v1.xyz, v2.xyz, tempT, tempNormal)) { if (tempT > 0.001 && tempT < tClosest) { tClosest = tempT; hitSomething = true; normal = normalize(tempNormal); MaterialID = floatBitsToUint(v0.w); } } } continue; } stack[stackPtr++] = left & 0x7FFFFFFFu; stack[stackPtr++] = right; } return hitSomething; } /* ===== Intersection Tests ===== */ Ray createRay(vec3 origin, vec3 direction) { return Ray(origin, normalize(direction)); } vec3 rayAt(Ray ray, float t) { return ray.origin + t * ray.direction; } vec3 anyVectorOrthogonalTo(vec3 n) { vec3 tangent = abs(n.x) > 0.1 ? vec3(0, 1, 0) : vec3(1, 0, 0); return normalize(cross(n, tangent)); } vec3 samplePhongLobe(inout RNG rng, vec3 reflectDir, float ns) { float cosTheta = pow(next_randomf(rng), 1.0 / (ns + 1.0)); float sinTheta = sqrt(1.0 - cosTheta * cosTheta); float phi = 2.0 * PI * next_randomf(rng); vec3 tangent = anyVectorOrthogonalTo(reflectDir); vec3 bitangent = normalize(cross(reflectDir, tangent)); vec3 localDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta); return normalize(tangent * localDir.x + bitangent * localDir.y + reflectDir * localDir.z); } vec3 nextRayDir(Ray ray, vec3 normal, uint materialID, inout RNG rng) { vec3 reflectDir = reflect(ray.direction, normal); if(u_renderMode == 2u) { // path tracing return samplePhongLobe(rng, reflectDir, u_materials[materialID].ns); } // deterministic Whitted-style reflection return reflectDir; } vec3 missRay(vec3 rayDirection) { // vec3 L1C = vec3(0.8, 0.8, 0.8); vec3 D1 = normalize(vec3(0.5, 1.0, 0.1)); // float L1D = min(max(dot(rayDirection, D1) + 0.2, 0.0), 1.0); // vec3 L2C = vec3(0.8, 0.8, 0.8); vec3 D2 = normalize(vec3(-0.5, 1.0, -0.1)); // float L2D = min(max(dot(rayDirection, D2) + 0.2, 0.0), 1.0); // vec3 L3C = vec3(0.6, 0.1, 0.2); vec3 D3 = normalize(vec3(0.0, -0.5, 1.0)); // float L3D = max(dot(rayDirection, D3), 0.0); // vec3 L4C = vec3(0.1, 0.2, 0.6); vec3 D4 = normalize(vec3(0.0, -0.5, -1.0)); // float L4D = max(dot(rayDirection, D4), 0.0); // vec3 L5C = vec3(0.4, 0.4, 0.4); vec3 D5 = normalize(vec3(0.0, -1.0, 0.0)); // float L5D = max(dot(rayDirection, D5), 0.0); // return L1C * L1D + L2C * L2D + L3C * L3D + L4C * L4D + L5C * L5D; float phi = atan(rayDirection.z, rayDirection.x) + u_envMapRotate; float theta = asin(rayDirection.y); vec2 uv = vec2(fract((phi + PI) / (2.0 * PI)), (theta + 0.5 * PI) / PI); return texture2D(u_envMap, uv).rgb * 1.4; } bool russianRouletteKill(inout vec3 colorContribution, inout RNG rng) { float p = max(max(colorContribution.r, colorContribution.g), colorContribution.b); if(p < 0.1) { float rr = next_randomf(rng) / 4.0; if(rr > p) return true; } return false; } vec3 calcRayColor(Ray ray, uint maxBounce, inout RNG rng) { vec3 colorContribution = vec3(1.0); for (uint i = 0u; i <= maxBounce; i++) { float t; uint materialID; vec3 normal; // first hit gets missRay regardless of rendering mode if (!traverseBVH(ray, t, materialID, normal)) { return missRay(ray.direction) * colorContribution; } if (dot(ray.direction, normal) > 0.0) normal = -normal; vec3 hitPoint = rayAt(ray, t); vec3 kd = u_materials[materialID].kd; // ===== NON RT MODE ===== if (u_renderMode == 0u) { mat3 invViewRot = inverse(mat3(viewMatrix)); vec3 lightDirView = normalize(vec3(1.0, 1.0, 3.0)); vec3 lightDir = normalize(invViewRot * lightDirView); float NdotL = max(dot(normal, lightDir), 0.0); return kd * NdotL; } // ===== RT MODE ===== colorContribution *= kd; if(russianRouletteKill(colorContribution, rng)) break; vec3 newDir = nextRayDir(ray, normal, materialID, rng); if (dot(normal, newDir) < 0.0) newDir -= 2.0 * dot(normal, newDir) * normal; ray = createRay(hitPoint + normal * 1e-6, newDir); } return vec3(0.0); } // noise for AA (very small) vec3 computeAAOffset(inout RNG rng) { return (u_renderMode == 2u) ? vec3(get2dOffset(rng) / vec2(u_ResolutionX, u_ResolutionY) * 0.5, 0.0) : vec3(0.0); } // noise for DOF (fat) vec3 computeDOFOffset(inout RNG rng) { return (u_renderMode == 2u) ? vec3(get2dOffsetInCircle(rng) * u_DOFStrength, 0.0) : vec3(0.0); } Ray generatePrimaryRay(vec3 worldPos, vec3 invViewCamPos, mat4 invViewMat, mat3 invViewRot, inout RNG rng) { vec3 offset0_V = computeAAOffset(rng); vec3 offset1_V = computeDOFOffset(rng); vec3 jitteredCamPos_V = offset1_V; // camera at 0,0,0 in view space vec3 jitteredCamPos = (invViewMat * vec4(jitteredCamPos_V, 1.0)).xyz; vec3 screenCoord_V = normalize((viewMatrix * vec4(worldPos, 1.0)).xyz); vec3 rayDir_V = normalize(screenCoord_V * u_focalDist - jitteredCamPos_V); vec3 jitteredRayDir_V = normalize(rayDir_V + offset0_V); vec3 jitteredRayDir = invViewRot * jitteredRayDir_V; return createRay(jitteredCamPos, jitteredRayDir); } vec3 calcPixelColor(vec3 worldPos, inout RNG rng) { vec3 colorPayload = vec3(0.0); mat4 invViewMat = inverse(viewMatrix); mat3 invViewRot = mat3(invViewMat); for (uint i = 0u; i < u_sampleCount; i++) { Ray ray = generatePrimaryRay(worldPos, vec3(0.0), invViewMat, invViewRot, rng); colorPayload += calcRayColor(ray, u_maxBounce, rng); } return colorPayload / float(u_sampleCount); } void main() { uint pixelID = uint(gl_FragCoord.x) + uint(gl_FragCoord.y) * u_ResolutionX; RNG rng = make_random(pixelID, u_time); vec3 finalColor = vec3(0.0); finalColor = calcPixelColor(worldPos, rng); // Perceptual / Rec. 709 (HD video standard) if (u_enableGrayScale) { finalColor = vec3(dot(finalColor, vec3(0.2126, 0.7152, 0.0722))); } gl_FragColor = vec4(finalColor, 1.0); } `, "Ray Tracer - Fragment shader")37:T674,___ ### Notes from the Trenches ## Why you *could* try this If you want to truly understand how ray tracing works under the hood (data structures, traversal logic, math, and GPU quirks), then implementing it in GLSL *the hard way* is a fantastic odyssey: endless staring at your code, punctuated by moments of celebration when it finally behaves. - You will learn how to adapt algorithms to fit hardware and GLSL-specific limitations. - You will get hands-on experience with encoding complex data (like BVHs) into formats shaders can read. - You will come away with a deeper respect for modern graphics APIs that give you these features *for free*. It is not the easiest path, but it will make you a better graphics programmer. ## Why you *probably* shouldn't GLSL was never meant for full ray tracing pipelines. - No recursion. Ray tracing's heavy recursive nature in everything requires awkward iterative stacks or similar loop mechanisms. - No native acceleration structures. You have to serialize BVHs into textures or buffers manually. - Debugging is *ultra* painful compared to CPU implementations. - Performance tuning is trickier because you're fighting the GPU. GPUs want everyone in sync, so BVH's "every ray for itself" attitude isn't a great match, especially with GLSL's limitations. If your goal is to just get a ray tracer running, there are way friendlier options like OptiX, Vulkan RTX, DXR, or even a CPU-based C++ project. Even if you stick with GLSL, using scenes made up of only spheres can make things much simpler. *It works, but if you go for it, bring patience, snacks, a sense of humor and maybe a bit of stubbornness.*38:[{"id":"8af789b6788dbef2bfd71c17d499bc3a672e7961fb787275bcc49cf1c7764b18b3bc751c5571beb7e9d578a90bae2e0c8b6a3e622fa8302a9a4bef9a0706a0fc","href":"https://static.observableusercontent.com/files/8af789b6788dbef2bfd71c17d499bc3a672e7961fb787275bcc49cf1c7764b18b3bc751c5571beb7e9d578a90bae2e0c8b6a3e622fa8302a9a4bef9a0706a0fc","name":"syferfontein_0d_clear.jpg","type":"image/jpeg","lastModified":1758085976251.874,"size":5306992},{"id":"f16c546fd697838c6ae9bdf86e08fc8b9cef8c50136431972857e040c5f0b48dee0300c7cf97439c1eeab8a5f1647f99e0df2a3e4333e01fcbc77a39635e5cfa","href":"https://static.observableusercontent.com/files/f16c546fd697838c6ae9bdf86e08fc8b9cef8c50136431972857e040c5f0b48dee0300c7cf97439c1eeab8a5f1647f99e0df2a3e4333e01fcbc77a39635e5cfa","name":"toriiPoly@3.mtl","type":"model/mtl","lastModified":1758086085273.848,"size":785},{"id":"0a78c7cc94d1dde0addc4af83bddb289bb72b413865f79560a3aa1b5dbdf5482bc7fee8370b14e51a8001cd059ec8b3eafb939e4757a068ccd2423749adc0b29","href":"https://static.observableusercontent.com/files/0a78c7cc94d1dde0addc4af83bddb289bb72b413865f79560a3aa1b5dbdf5482bc7fee8370b14e51a8001cd059ec8b3eafb939e4757a068ccd2423749adc0b29","name":"dikhololo_night.jpg","type":"image/jpeg","lastModified":1758268655374.348,"size":9443888},{"id":"5d9078693b891e2720089f2a2d0bdec9fc5fbd16623b5c845abcc9344c3807bbcd9dc11b84379096c7aaaf430b955fc5534145ad9f315094661e677d4445b0ec","href":"https://static.observableusercontent.com/files/5d9078693b891e2720089f2a2d0bdec9fc5fbd16623b5c845abcc9344c3807bbcd9dc11b84379096c7aaaf430b955fc5534145ad9f315094661e677d4445b0ec","name":"toriiPoly@2.obj","type":"model/obj","lastModified":1754992144097.543,"size":976125},{"id":"c07a740631304afe43e5be038b1c289e3c167efec2760d492efcfb17b7320dc7fcfc80adeb156fdae103d3c3b9827c604d58bbda451e53a43a9e71a351b5ddfd","href":"https://static.observableusercontent.com/files/c07a740631304afe43e5be038b1c289e3c167efec2760d492efcfb17b7320dc7fcfc80adeb156fdae103d3c3b9827c604d58bbda451e53a43a9e71a351b5ddfd","name":"hansaplatz.jpg","type":"image/jpeg","lastModified":1758270844801.469,"size":5901947},{"id":"295a81169a7acbad6f7bdca23289a7fa5b9f5e3147523b35fee414cd6a6aaa68fc7dcc821825ee195980874f66001aad363e93ddacc4936c47d84a5f479d11e5","href":"https://static.observableusercontent.com/files/295a81169a7acbad6f7bdca23289a7fa5b9f5e3147523b35fee414cd6a6aaa68fc7dcc821825ee195980874f66001aad363e93ddacc4936c47d84a5f479d11e5","name":"SimpleSceneRT@3.obj","type":"model/obj","lastModified":1771365546474.341,"size":171127},{"id":"6cbfe25c169148f50e5a1c88826e059344070c16bc960209b48b89c391d5f8c75a94894a650e6cced870013109d0c53b0391c2822255a59c3d2ff5bba8578ef3","href":"https://static.observableusercontent.com/files/6cbfe25c169148f50e5a1c88826e059344070c16bc960209b48b89c391d5f8c75a94894a650e6cced870013109d0c53b0391c2822255a59c3d2ff5bba8578ef3","name":"SimpleSceneRT@5.mtl","type":"model/mtl","lastModified":1771365535980.127,"size":1156}] 2e:{"id":"7f603d91d86517e7","slug":"ray-tracing","title":"Ray Tracing","thumbnail":"3d0735a6b0432c378da78a33aca59aa5268367707f0fb514657adfd66e96c619","access_level":"public","create_time":"$D2025-08-10T05:51:24.552Z","update_time":"$D2026-02-23T08:31:08.853Z","view_time":null,"first_public_time":"$D2025-08-11T10:16:44.044Z","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":2331,"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":1,"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":"Ray Tracing","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":993,"value":"\n⚠ Increasing sample count or ray bounces greatly increases render time and can freeze your browser or crash the tab.\n\n

\nTip: Start small. Samples 1-2, bounces 2-6. Increase slowly and watch your GPU load.
\nOr try lowering the render resolution of the canvas.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"viewof renderMode = {\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\"));\n });\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1881,"value":"viewof grayscaleMode = {\n const form = html``;\n\n form.value = form.mode.value == \"ON\";\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value == \"ON\";\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1099,"value":"viewof resolutionParams = {\n const div = html`

\n \n Render Resolution:0\n \n

`;\n\n const slider = div.querySelector(\"input\");\n const sizeSpan = div.querySelector(\"span\");\n\n function updateValues() {\n const a = +slider.value;\n const width = aspectRatio.width * 5 * a;\n const height = aspectRatio.height * 5 * a;\n\n sizeSpan.textContent = `${width} x ${height}`;\n\n div.value = { width, height };\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n slider.addEventListener(\"input\", updateValues);\n updateValues();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1530,"value":"### Renderer Settings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":840,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1670,"value":"viewof frameAccumParams = {\n const div = html`

\n Frame Accumulation\n

`;\n\n const checkbox = div.querySelector('input[type=checkbox][value=\"DOF\"]');\n const spans = div.querySelectorAll('span');\n\n function update() {\n div.value = {\n enabled: checkbox.checked,\n };\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n checkbox.addEventListener(\"change\", update);\n update();\n\n function updateEnabled() {\n const shouldEnable = [\"PathTraced\"].includes(viewof renderMode.value);\n checkbox.disabled = !shouldEnable;\n }\n viewof renderMode.addEventListener(\"input\", updateEnabled);\n updateEnabled();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1491,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"### Environment Map Settings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"viewof envMapRotateAngleParam = {\n const form = html``;\n\n const slider = form.querySelector('input[type=\"range\"]');\n const span = slider.nextElementSibling;\n\n function updateValue() {\n form.value = {\n angle: +slider.value\n };\n span.textContent = slider.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n slider.addEventListener(\"input\", updateValue);\n\n updateValue();\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1565,"value":"viewof envMapParams = {\n const form = html``;\n\n form.type.value = \"00\";\n form.value = form.type.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.type.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1527,"value":"### BVH Settings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"viewof primitiveCountInLeaf = {\n const div = html`

\n \n Primitive Count in Leaf BVH Node:0\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function updatePointCoord() {\n spans.forEach((span, i) => {\n span.textContent = inputs[i].value;\n });\n\n div.value = +inputs[0].value;\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", updatePointCoord);\n });\n\n updatePointCoord();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Meta Data	Array Size	Size
BVH Node Array	${primitivesMetaData.BVHnodes.length.toLocaleString()}	${flattenedData.BVHnodeF32Size.toLocaleString()} bytes
Triangle Array	${primitivesMetaData.primIndices.length.toLocaleString()}	${flattenedData.primBufferF32Size.toLocaleString()} bytes
Ray Samples per frame	${(resolutionParams.width * resolutionParams.height * renderParams.sampleCount).toLocaleString()}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1306,"value":"\n⚠ Poly Torii Gate is a heavy scene (14,000+ triangles). It may cause significant slowdowns, freeze your browser, or crash the tab.\n\n

\nLower your Sample Count and Ray Bounce before switching scenes to avoid freezes or crashes.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"viewof geometryType = {\n const form = html``;\n\n form.mode.value = \"basic\";\n form.value = form.mode.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":255,"value":"___\n## Triangle Primitive Structure\nEach triangle primitive consists of three vertices, requiring 9 floats total. These are stored as three `vec4`s for alignment and efficient GPU access.\n${mdPlain(`3x vec4 -> 12x float -> 48 Bytes / 384 bits per triangle primitive\n`)}\n${mdPlain(` 32bit | 32bit | 32bit | 32bit\nvec4 [ float x | float y | float z | uint matId ] vertex 0\nvec4 [ float x | float y | float z | 0 ] vertex 1\nvec4 [ float x | float y | float z | 0 ] vertex 2\n`)}\n\nThe `matId` stored in the 4th component of `vertex 0` identifies the material for the entire triangle. This design simplifies material lookup during shading.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":156,"value":"___\n## BVH Construction\n\nThis example uses GPU textures as large data arrays to store BVH nodes and triangle geometry. Textures aren't just for images, they can hold arbitrary numeric data, letting us bypass memory limits of uniform arrays and keep memory access GPU-friendly. By packing information into `vec4` \"texels,\" we can store huge amounts of structured data and read it efficiently in shaders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":199,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"dataTextures = {\n // ---------- Create THREE.DataTextures ----------\n function makeDataTextureFromFloatArray(F32Arr, texWidth = TEX_WIDTH) {\n const totalFloats = F32Arr.length;\n const pixels = Math.ceil(totalFloats / 4); // RGBA: each texel holds 4 floats\n const height = Math.ceil(pixels / texWidth);\n const texSize = texWidth * height * 4;\n const texData = new Float32Array(texSize);\n texData.set(F32Arr); // pads zeros automatically\n\n const tex = new THREE.DataTexture(texData, texWidth, height, THREE.RGBAFormat, THREE.FloatType);\n tex.needsUpdate = false;\n return { texture: tex, width: texWidth, height };\n }\n\n const bvhTex = makeDataTextureFromFloatArray(flattenedData.BVHnodeF32, TEX_WIDTH);\n const primTex = makeDataTextureFromFloatArray(flattenedData.primBufferF32, TEX_WIDTH);\n return {\n BVHTexture: bvhTex,\n PrimTexture: primTex,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"// maximum amount of triangles each leaf can hold\nLEAF_THRESHOLD = primitiveCountInLeaf;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"TEX_WIDTH = 512;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"___\n## Ray Tracer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"viewof RT_vert_glsl = mdGLSL_toggle_dark(`// this is the x,y,z of a point on \"quad\" screen in world space \nout vec3 worldPos;\n\nvoid main() {\n vec4 clip = vec4(position.xy, 1.0, 1.0);\n vec4 view = inverse(projectionMatrix) * clip;\n view /= view.w;\n worldPos = (inverse(viewMatrix) * view).xyz;\n\n gl_Position = vec4(position.xy, 0.0, 1.0);\n}\n`, \"Ray Tracer - Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"materialUniforms = {\n // match this with GLSL shaders\n const MAX_MATERIALS = 16;\n\n const mats = Object.values(materialList);\n\n const paddedMatList = [];\n for (let i = 0; i < mats.length && i < MAX_MATERIALS; i++) {\n const m = mats[i];\n paddedMatList.push({\n ka: new THREE.Vector3(...m.ka),\n kd: new THREE.Vector3(...m.kd),\n ks: new THREE.Vector3(...m.ks),\n ns: m.ns, // scaled shininess-ish\n illum: m.illum, // illumination model\n });\n }\n\n while (paddedMatList.length < MAX_MATERIALS) {\n paddedMatList.push({\n ka: new THREE.Vector3(0.0),\n kd: new THREE.Vector3(0.0),\n ks: new THREE.Vector3(0.0),\n ns: 0.0,\n illum: 0,\n });\n }\n\n return {\n paddedMatList,\n MAX_MATERIALS: MAX_MATERIALS\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"RTUniformsObj = {\n return {\n u_ResolutionX: { value: resolutionParams.width },\n u_ResolutionY: { value: resolutionParams.height },\n\n u_Positions: { value: dataTextures.PrimTexture.texture },\n u_BVHNodes: { value: dataTextures.BVHTexture.texture },\n u_TexWidth: { value: TEX_WIDTH },\n\n u_envMap: { value: envUniform.envMap },\n\n u_materials: { value: materialUniforms.paddedMatList },\n u_numMaterials: { value: materialUniforms.paddedMatList.length },\n\n u_renderMode: { value: renderMode === \"PathTraced\" ? 2 : (renderMode === \"RayTraced\" ? 1 : 0) },\n u_enableGrayScale: { value: grayscaleMode },\n \n u_sampleCount: { value: renderParams.sampleCount },\n u_maxBounce: { value: renderParams.maxBounce },\n u_focalDist: { value: dofParams.distance },\n u_DOFStrength: { value: dofParams.strength },\n u_envMapRotate: { value: envMapRotateAngleParam.angle * Math.PI / 180 },\n u_time: { value: 0 },\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"RTMaterial = makeShaderMaterial(\n RT_vert_glsl,\n RT_frag_glsl,\n RTUniformsObj,\n {\n MAX_MATERIALS: materialUniforms.MAX_MATERIALS\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"RTScene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), RTMaterial);\n scene.add( quad );\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"RTCamera = {\n\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(5, 2, 5);\n const oldTarget = target;\n\n const fov = renderParams.FOV;\n const aspect = resolutionParams.width / resolutionParams.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":1633,"value":"___\n## Frame Accumulator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1630,"value":"viewof accumulator_vert_glsl = mdGLSL_toggle_dark(`out vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position.xy, 0.0, 1.0);\n}\n`, \"Frame Accumulator - Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1629,"value":"viewof accumulator_frag_glsl = mdGLSL_toggle_dark(`precision mediump float;\nuniform sampler2D tFresh;\nuniform sampler2D tAccum;\nuniform float blendFactor;\nin vec2 vUv;\n\nvoid main() {\n vec4 fresh = texture2D(tFresh, vUv);\n vec4 accum = texture2D(tAccum, vUv);\n gl_FragColor = mix(accum, fresh, blendFactor);\n}\n`, \"Frame Accumulator - Fragment shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1632,"value":"freshBuffer = new THREE.WebGLRenderTarget(resolutionParams.width, resolutionParams.height, {\n format: THREE.RGBAFormat,\n type: THREE.FloatType\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1631,"value":"accumulatorTargetBuffers = {\n return {\n src: new THREE.WebGLRenderTarget(resolutionParams.width, resolutionParams.height, {\n format: THREE.RGBAFormat,\n type: THREE.FloatType\n }),\n dst: new THREE.WebGLRenderTarget(resolutionParams.width, resolutionParams.height, {\n format: THREE.RGBAFormat,\n type: THREE.FloatType\n })\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1628,"value":"accumulatorUniformsObj = {\n return {\n tFresh: { value: freshBuffer.texture },\n tAccum: { value: null },\n blendFactor: { value: 1.0 }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1627,"value":"accumulatorMaterial = makeShaderMaterial(accumulator_vert_glsl, accumulator_frag_glsl, accumulatorUniformsObj);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1626,"value":"accumulatorScene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), accumulatorMaterial);\n scene.add( quad );\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1625,"value":"accumulatorCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1471,"value":"___\n## Environment Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1469,"value":"getTexture = (url) => {\n \n const tex = new THREE.TextureLoader().load(url);\n // tex.minFilter = THREE.LinearFilter;\n // tex.magFilter = THREE.LinearMipmapLinearFilter;\n tex.mapping = THREE.EquirectangularReflectionMapping;\n \n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1467,"value":"envUniform = {\n if (envMapParams == \"00\") \n return {\n envMap: await getTexture(await FileAttachment(\"syferfontein_0d_clear.jpg\").url()),\n }\n if (envMapParams == \"01\")\n return {\n envMap: await getTexture(await FileAttachment(\"dikhololo_night.jpg\").url()),\n }\n if (envMapParams == \"02\")\n return {\n envMap: await getTexture(await FileAttachment(\"hansaplatz.jpg\").url()),\n }\n throw \"Unknown Environment Map\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"___\n## Loaders and Array Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":105,"value":"positionArray = {\n const posArray = [];\n const children = sceneGeometry.children;\n for (let i = 0; i < children.length; i++) {\n const child = children[i];\n const childPosArray = child.geometry.attributes.position.array;\n posArray.push(...childPosArray);\n }\n return posArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"materialIndexArray = {\n const matIdxArray = [];\n const children = sceneGeometry.children;\n for (let i = 0; i < children.length; i++) {\n const child = children[i];\n const materialName = child.material?.name;\n const matId = materialList[materialName]?.id ?? -1; // fallback\n\n const vertCount = child.geometry.attributes.position.array.length / 3; // per vertex\n for (let v = 0; v < vertCount; v++) {\n matIdxArray.push(matId);\n }\n }\n return matIdxArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"materialList = {\n const matInfo = sceneMaterial.materialsInfo;\n let nextId = 0;\n const matArray = Object.fromEntries(\n Object.entries(matInfo).map(([name, props]) => [\n name,\n {\n id: nextId++, // unique ID\n name: props.name,\n ns: parseFloat(props.ns),\n ka: props.ka.map(Number),\n kd: props.kd.map(Number),\n ks: props.ks.map(Number),\n ke: props.ke.map(Number),\n ni: parseFloat(props.ni),\n d: parseFloat(props.d),\n illum: parseInt(props.illum)\n }\n ])\n );\n return matArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"sceneGeometry = {\n if (geometryType == \"basic\") return loadOBJ(await FileAttachment(\"SimpleSceneRT@3.obj\").text());\n if (geometryType == \"torii\") return loadOBJ(await FileAttachment(\"toriiPoly@2.obj\").text());\n throw new Error(\"Unknown model name\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"sceneMaterial = {\n if (geometryType == \"basic\") return loadMTL(await FileAttachment(\"SimpleSceneRT@5.mtl\").text());\n if (geometryType == \"torii\") return loadMTL(await FileAttachment(\"toriiPoly@3.mtl\").text());\n throw new Error(\"Unknown material name\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"loadOBJ = async (objText) => {\n const objLoader = new THREE.OBJLoader;\n const object = objLoader.parse(objText);\n return object;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"loadMTL = async (mtlText) => {\n const mtlLoader = new THREE.MTLLoader();\n const materials = mtlLoader.parse(mtlText);\n materials.preload();\n return materials;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2118,"value":"___\n## Render Loop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1621,"value":"mutable frameNo = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"render = (frameNo) => {\n // render pass\n RTUniformsObj.u_time.value = frameNo;\n renderer.setRenderTarget(freshBuffer);\n renderer.render(RTScene, RTCamera);\n\n // accummulation pass\n accumulatorUniformsObj.blendFactor.value = 1.0 / frameNo;\n accumulatorUniformsObj.tAccum.value = accumulatorTargetBuffers.src.texture;\n renderer.setRenderTarget(accumulatorTargetBuffers.dst);\n renderer.render(accumulatorScene, accumulatorCamera);\n\n // display accumulated result\n renderer.setRenderTarget(null);\n renderer.render(accumulatorScene, accumulatorCamera);\n\n // Swap src/dst\n // src always holds the previous accumulated result.\n // dst always receives the new accumulation.\n // After rendering, the output becomes the new src for the next frame,\n // so the handles are swapped instead of copying textures.\n const tmp = accumulatorTargetBuffers.src;\n accumulatorTargetBuffers.src = accumulatorTargetBuffers.dst;\n accumulatorTargetBuffers.dst = tmp;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"// Continuously updates\nstartRender = function* () {\n while (true) {\n mutable frameNo++;\n if (!frameAccumParams.enabled) mutable frameNo = 1;\n\n controls.update();\n render(frameNo);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"startRender();","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":1414,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1416,"value":"mutable target = new THREE.Vector3(0, 0.5, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"renderer = {\n const canvas = document.getElementById(\"three-canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(resolutionParams.width, resolutionParams.height, false);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"controls = {\n const controls = new THREE.OrbitControls(RTCamera, renderer.domElement);\n controls.target.copy(mutable target);\n // controls.enableDamping = true;\n // controls.dampingFactor = 0.5;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n mutable target.copy(controls.target); // sync to global target\n mutable frameNo = 1;\n renderer.render(RTScene, RTCamera);\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":7,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1744,"value":"aspectRatio = {\n return {\n width: 16,\n height: 9\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"canvasWidth = aspectRatio.width * 60;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"canvasHeight = aspectRatio.height * 60;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"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/loaders/MTLLoader.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":68,"value":"makeShaderMaterial = (vertS, fragS, uniforms, defines = {}) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniforms,\n defines: defines\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"import { mdGLSL_toggle_dark, mdPlain, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1758,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1336,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2f:"$2e:body"