3c:null 3d:["$","title",null,{"children":"Great Bully Render-off cmu32 | Introduction to Computer Graphics MSState | Observable"}] 43:T519,cam_view_update_src = ` let gaze_vec = normalize(vec3f(${gaze.x}, ${gaze.y}, ${gaze.z})); let up_vec = normalize(vec3f(${up.x}, ${up.y}, ${up.z})); camera.basis.zhat = -gaze_vec; camera.basis.xhat = normalize(cross(up_vec, camera.basis.zhat)); camera.basis.yhat = cross(camera.basis.zhat, camera.basis.xhat); image.pixel_width = viewport.width / f32(image.width); image.pixel_height = viewport.height / f32(image.height); let camera_pos = vec3f(${camera_origin.x}, ${camera_origin.y}, ${camera_origin.z}) - 0.5 * camera.basis.xhat // left - 0.5 * camera.basis.yhat + 0.0 * camera.basis.zhat; let cam_to_world = mat4x4f( vec4f(camera.basis.xhat, 0.0), vec4f(camera.basis.yhat, 0.0), vec4f(camera.basis.zhat, 0.0), vec4f(camera_pos, 1.0) ); let half_w = 0.5 * viewport.width; let half_h = 0.5 * viewport.height; let viewport_to_camera = mat4x4f( vec4f(image.pixel_width, 0.0, 0.0, 0.0), vec4f(0.0, image.pixel_height, 0.0, 0.0), vec4f(0.0, 0.0, 1.0, 0.0), vec4f(-half_w * image.pixel_width, -half_h * image.pixel_height, -${focal_length}, 1.0) ); let origin_viewport = vec4f(0.0, 0.0, 0.0, 1.0); let world_origin = cam_to_world * (viewport_to_camera * origin_viewport); viewport.origin = world_origin.xyz; `44:T6fe,generate_ray_src = ` fn inverse_affine(m: mat4x4f) -> mat4x4f { let r0 = m[0].xyz; let r1 = m[1].xyz; let r2 = m[2].xyz; let c0 = cross(r1, r2); let c1 = cross(r2, r0); let c2 = cross(r0, r1); let det = dot(r0, c0); let inv_det = 1.0 / det; let inv_r0 = c0 * inv_det; let inv_r1 = c1 * inv_det; let inv_r2 = c2 * inv_det; let t = vec3f(m[3].x, m[3].y, m[3].z); let inv_t = vec3f( -dot(inv_r0, t), -dot(inv_r1, t), -dot(inv_r2, t) ); return mat4x4f( vec4f(inv_r0, 0.0), vec4f(inv_r1, 0.0), vec4f(inv_r2, 0.0), vec4f(inv_t, 1.0) ); } fn identity_matrix() -> mat4x4f { return mat4x4f( vec4f(1.0, 0.0, 0.0, 0.0), vec4f(0.0, 1.0, 0.0, 0.0), vec4f(0.0, 0.0, 1.0, 0.0), vec4f(0.0, 0.0, 0.0, 1.0) ); } fn ray_to_local_recursive(ray: ray_struct, obj_index: u32) -> ray_struct { var m = identity_matrix(); var current = i32(obj_index); while (current != -1) { let entry = xform_array[current]; var local_transform = entry.transform; m = local_transform * m; current = entry.parent; } let world_to_local = inverse_affine(m); let local_origin = (world_to_local * vec4f(ray.origin, 1.0)).xyz; let local_dir = normalize((world_to_local * vec4f(ray.direction, 0.0)).xyz); return ray_struct(local_origin, local_dir); } fn generate_ray(i : u32, j : u32) -> ray_struct { var ray : ray_struct; let pixel_center = viewport.origin + ( (f32(i) + 0.5) * image.pixel_width ) * camera.basis.xhat + ( (f32(j) + 0.5) * image.pixel_height ) * camera.basis.yhat; ray.origin = pixel_center; ray.direction = normalize(pixel_center - camera.origin); return ray; } `45:T605,box_src = ` fn intersect_box(global_ray : ray_struct, box : box_struct) -> hit_info_struct { let ray = ray_to_local_recursive(global_ray, box.object_id); var hit_info = populate_hit(box.object_id); let box_min = box.origin; let box_max = box.origin + box.dimensions; var tmin = -1e10; var tmax = 1e10; for (var i = 0; i < 3; i = i + 1) { let origin_component = ray.origin[i]; let direction_component = ray.direction[i]; let min_component = box_min[i]; let max_component = box_max[i]; if (abs(direction_component) < 1e-6) { if (origin_component < min_component || origin_component > max_component) { return hit_info; } } else { let inv_d = 1.0 / direction_component; var t0 = (min_component - origin_component) * inv_d; var t1 = (max_component - origin_component) * inv_d; if (t0 > t1) { let temp = t0; t0 = t1; t1 = temp; } tmin = max(tmin, t0); tmax = min(tmax, t1); if (tmax < tmin) { return hit_info; } } } if (tmin < 0.0) { return hit_info; } hit_info.valid = true; hit_info.distance = tmin; let hit_point = ray.origin + tmin * ray.direction; var normal = vec3f(0.0, 0.0, 0.0); let epsilon = 1e-3; for (var i = 0; i < 3; i = i + 1) { if (abs(hit_point[i] - box_min[i]) < epsilon) { normal[i] = -1.0; } else if (abs(hit_point[i] - box_max[i]) < epsilon) { normal[i] = 1.0; } } hit_info.normal = normal; return hit_info; } `46:Te92,### Set Color **How we set the color changes massively for Assignment 4.** In our shader, `trace` returns the first object hit by a ${spancolor(ray_color, "ray")}; initially, this is a ray from the ${spancolor(camera_color, "camera ")}. Now, when we hit an object, we will color it based upon the object's **materials** and the **lighting model** we are implementing. The variable `hit_info` stores the information about the object that was hit via `trace`. It has all the members from the previous Assignments and a few more which are needed for lighting: - `hit_info.valid (bool)`: Does this represent a valid hit? If `false`, no object was hit an the other members of this structure are to be ignored. - `hit_info.distance (f32)`: If `valid`, then this stores the distance from the `ray.origin` to the hit object. - `hit_info.object_id (u32)`: If `valid`, this is the index/id of the hit object. - **`hit_info.normal (vec3f)`** (New): The normal to the surface at the intersection point. In local coordinates. - **`hit_info.mat (material)`** (New): The object's material. A struct that has + `material.albedo : vec3f`: The object's reflectance/color. If the object is `metallic`, then this is F0 (Fresnel reflectance at normal incidence) + `material.roughness : f32`: The roughness of the object (0 is smooth, 1 is rough). + `material.metallic: f32`: Is the object a metallic (a conductor) if `true` or diffuse/dielectric otherwise? Determines the BRDF. We store as a float because it can be used that way for PBR to weight the two metallic/non-metallic BRDFs. + `material.ior : f32`: The index of refraction if the object is dielectric (glass). Less than `1` if not dielectric or greater than `1` otherwise. + `material.emissive: bool`: Is the object itself a light? All of these except `hit_info.normal` are all set automatically during `trace` and when you intersect them in your `intersect_x` functions. For this Assignment, you will use the materials of the object to illuminate the object; depending on your choices, you may process direct light (radiance from lights without additional bounces), indirect light (radiance from lights with intermediate bounce(s)), or some combination of the two. This may require *calculating a light's incoming radiance* per light and *shooting more reflected/transmitted rays* which may have to be in a *randomly generated direction*. All this information will be used with the lighting model to color the pixel. To determine the amount of radiance from a light to an point on an object, you can call `light_radiance(...) -> vec3f` with the following arguments: - `light_id : u32`: The id of the light being tested. - `query_pt : vec3f`: The surface point to check the illumination at. Remember to offset from surface. - `normal : vec3f`: The surface normal at the query point. `light_radiance` returns the light's incoming RGB radiance (black if in shadow). The `num_lights : u32` variable stores the number of lights you must test against. To actually calculate the lighting, you will need to implement the `apply_x_light` functions below. To trace additional rays, you'll call `trace(...) -> hit_info` again with the appropriate `ray` arguments: - `ray.origin : vec3f`: The new ray's origin. Remember to offset from surface. - `ray.direction : vec3f`: The new ray's reflected/transmitted direction (normalized). `trace` returns a `hit_info` struct with the info needed to determine if a hit occurred and the properties of the surface hit. Sometimes, the reflected/transmitted ray may need to be randomized towards a certain direction. To generate this direction, call the appropriate `random_x_dir` function based upon the type of bounce being used.47:Te15,set_color_src = ` if (hit_info.valid) { // --- BASE AMBIENT (slightly stylized warm tint) --- let warm_ambient = vec3(1.05, 1.0, 0.65); color = 0.12 * hit_info.material.albedo * warm_ambient; var ray_pos : vec3 = get_point_from_t(ray, hit_info.distance); let N : vec3 = hit_info.normal; ray_pos = ray_pos + N * 1e-3; let V : vec3 = normalize(camera.origin - ray_pos); // Artist knobs let toon_steps : f32 = 1.0; // fewer steps → more stylized let rim_intensity : f32 = 0.02; let rim_sharpness : f32 = 4.0; let cool_tone : vec3 = vec3(0.0, 0.0, 1.1); let warm_tone : vec3 = vec3(1.1, 1.0, 0.0); // ----------------------------- LIGHTING ----------------------------- for (var i: u32 = 0; i < num_lights; i += 1) { let L : vec3 = get_light_dir(i, ray_pos); let Li : vec3 = get_light_rad(i, ray_pos, N); if (length(Li) != 0.0) { var specular = vec3(0.0); var diffuse = vec3(0.0); let H = normalize(V + L); // --------------------- SPECULAR (painterly) --------------------- if (approx_equal(hit_info.material.metallic, 0.0)) { // Base (Blinn–Phong or your BRDF) let F0 = vec3(0.04); let raw_spec = blinn_phong_brdf(F0, N, H, hit_info.material.roughness); // Add “glint” shaping (soft highlight bloom) let glint = pow(max(dot(N, H), 0.0), 16.0); let glint_color = vec3(1.2, 1.15, 1.1) * glint * 0.25; specular = raw_spec + glint_color; } // ---------------------- DIFFUSE (toon ramp) ---------------------- if (approx_equal(hit_info.material.metallic, 0.0)) { let ndotl = max(dot(N, L), 0.0); // Toon ramp: discretize shading bands let toon = floor(ndotl * toon_steps) / toon_steps; // Warm–cool lighting model let warmcool = mix(cool_tone, warm_tone, ndotl); diffuse = diffuse_brdf(hit_info.material.albedo) * toon * warmcool; } let shade = max(dot(N, L), 0.0); color += (diffuse + specular) * Li * shade; } } let rim = pow(1.0 - max(dot(N, V), 0.0), rim_sharpness) * rim_intensity; // subtle cool/blue-leaning rim so it doesn’t appear grey let rim_color = vec3(0.85, 0.9, 1.15); //color += rim * rim_color; if (hit_info.material.metallic == 0.0 && false) { let bounce_ray = ray_struct(ray_pos, normalize(random_diffuse_dir(N))); let bounce_hit = trace(bounce_ray); if (bounce_hit.valid) { var bounce_color = vec3(0.0); var p_b : vec3 = get_point_from_t(bounce_ray, bounce_hit.distance); let n_b : vec3 = bounce_hit.normal; p_b = p_b + n_b * 1e-3; for (var i : u32 = 0; i < num_lights; i += 1) { let Lb = get_light_dir(i, p_b); let Lib = get_light_rad(i, p_b, n_b); if (length(Lib) != 0.0) { bounce_color += bounce_hit.material.albedo * Lib * max(dot(n_b, Lb), 0.0) / PI; } } color += hit_info.material.albedo * bounce_color; } else { color += hit_info.material.albedo * vec3(1.0); } } } `48:T905,global_src = ` fn get_point_from_t(ray: ray_struct, t: f32) -> vec3 { return ray.origin + t * ray.direction; } fn distribution_ggx(n: vec3f, h: vec3f, roughness: f32) -> f32 { let a = roughness * roughness; let a2 = a * a; let NdotH = max(dot(n, h), 0.0); let NdotH2 = NdotH * NdotH; let denom = (NdotH2 * (a2 - 1.0) + 1.0); return a2 / (PI * denom * denom + 1e-7); } fn geometry_schlick_ggx(n_dot_x: f32, roughness: f32) -> f32 { let r = roughness + 1.0; let k = (r * r) / 8.0; return n_dot_x / (n_dot_x * (1.0 - k) + k + 1e-7); } fn geometry_smith(n: vec3f, v: vec3f, l: vec3f, roughness: f32) -> f32 { let NdotV = max(dot(n, v), 0.0); let NdotL = max(dot(n, l), 0.0); let ggx1 = geometry_schlick_ggx(NdotV, roughness); let ggx2 = geometry_schlick_ggx(NdotL, roughness); return ggx1 * ggx2; } fn fresnel_schlick(cos_theta: f32, F0: vec3f) -> vec3f { return F0 + (vec3f(1.0) - F0) * pow(1.0 - cos_theta, 5.0); } fn get_light_rad(light_index: u32, hit_point: vec3, normal: vec3) -> vec3 { let light = light_buffer[light_index]; // Direction to light (not normalized yet) let position = vec3(light.vec0_x, light.vec0_y, light.vec0_z); let intensity = vec3(light.vec1_x, light.vec1_y, light.vec1_z); let L = position - hit_point; let dist_to_light = length(L); if (dist_to_light <= 0.0) { return vec3(0.0); } let wi = normalize(L); // If the light is behind the surface, no radiance if (dot(normal, wi) <= 0.0) { return vec3(0.0); } // ------------------------------------------------------------------- // LIGHT CONTRIBUTION: RETURN Li // ------------------------------------------------------------------- // Point light model: inverse square falloff let attenuation = 1.0 / max(dist_to_light * dist_to_light, 1e-6); // light.intensity is a vec3f (radiance / power) let Li = intensity * attenuation; return Li; } fn blinn_phong_brdf(F0: vec3, n: vec3, wh: vec3, roughness: f32) -> vec3 { return F0 * pow(max(dot(n, wh), 0.0), mix(150, 160, roughness)); } fn diffuse_brdf(albedo: vec3) -> vec3 { return (albedo / PI); } `49:T815,scene_status = { // TODO: Update scenes, camera switch(scene_select) { default: case "Simple": resetScene(); updateScene("sphere -0.5 0 0 0.20"); updateScene("sphere 0 0 0 0.20"); updateScene("sphere 0.5 0 0 0.20"); updateScene("plane 0 -0.2 0 0 1 0"); updateCamera({width:1.5,height:1.5}, {x:0,y:-0.15,z:10}, 9.75, {x:0,y:1,z:0}, {x:0,y:0,z:-1}); break; case "Cornell Box": resetScene(); updateScene("plane 0 0 0 1 0 0"); updateScene("plane 0 0 0 0 1 0"); updateScene("plane 0 555 0 0 -1 0"); updateScene("plane 555 0 0 -1 0 0"); updateScene("plane 0 0 555 0 0 -1"); updateScene("box 265 0 295 165 330 165"); updateScene("sphere 212.5 82.5 147.5 82.5"); updateScene("mesh 0 2"); updateCamera({width:0.025,height:0.025}, {x:278.0125,y:272.9875,z:-799.965}, 0.035, {x:0,y:1,z:0}, {x:0,y:0,z:1}); break; case "MINI": // Render the whole thing; add a bottom plane resetScene(); for(const part in austin_mini_geometry.indices) { let [start, end] = austin_mini_geometry.indices[part]; updateScene("mesh " + start/3 + " " + end/3); } updateScene("plane 0 -1.055 0 0 1 0"); updateCamera({width:0.8284271247461901,height:0.8284271247461901}, {x:0,y:0,z:-6.5}, 1, {x:0,y:1,z:0}, {x:0,y:0,z:1}); updateTransform(`0 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`1 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`2 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`3 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`4 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`5 -1 R 0 1 0 ${3.14158 / 180 * 45}`); updateTransform(`6 -1 R 0 1 0 ${3.14158 / 180 * 45}`); break; } return "loaded"; }4a:T1314,material_buffer = { if(!device) return undefined; // Switch on scene_select // Albedo, roughness, metallicness, index of refraction, and emissiveness // First 6 values are floats, last is int let materialdata = new ArrayBuffer(4 * 7); // Dummy buffer let materialdata_floats = undefined; let materialdata_uints = undefined; switch(scene_select) { default: case "Simple": materialdata = new ArrayBuffer(4 * 7 * 4); // 4 entries materialdata_floats = new Float32Array(materialdata); materialdata_uints = new Uint32Array(materialdata); // L sphere: Diffuse materialdata_floats.set([0.51,0.51,0.51], 7 * 0 + 0); materialdata_floats[7*0 + 3] = 0.90; materialdata_floats[7*0 + 4] = 0; materialdata_floats[7*0 + 5] = 1; materialdata_uints[ 7*0 + 6] = 0; // M sphere: Mirror materialdata_floats.set([1,1,1], 7*1 + 0); materialdata_floats[7*1 + 3] = 0.001; materialdata_floats[7*1 + 4] = 1; materialdata_floats[7*1 + 5] = 1; materialdata_uints[ 7*1 + 6] = 0; // R sphere: Rough materialdata_floats.set([1,1,1], 7*2 + 0); materialdata_floats[7*2 + 3] = 0.99; materialdata_floats[7*2 + 4] = 1; materialdata_floats[7*2 + 5] = 1; materialdata_uints[ 7*2 + 6] = 0; // plane materialdata_floats.set([0.85,0.85,0.85], 7 * 3 + 0); materialdata_floats[7*3 + 3] = 0.90; materialdata_floats[7*3 + 4] = 0; materialdata_floats[7*3 + 5] = 1; materialdata_uints[ 7*3 + 6] = 0; break; case "Cornell Box": materialdata = new ArrayBuffer(4 * 7 * 8); // 8 entries materialdata_floats = new Float32Array(materialdata); materialdata_uints = new Uint32Array(materialdata); // L wall materialdata_floats.set([1,0,0], 7 * 0 + 0); materialdata_floats[7*0 + 3] = 0.90; materialdata_floats[7*0 + 4] = 0; materialdata_floats[7*0 + 5] = 1; materialdata_uints[ 7*0 + 6] = 0; // Floor materialdata_floats.set([1,1,1], 7*1 + 0); materialdata_floats[7*1 + 3] = 0.90; materialdata_floats[7*1 + 4] = 0; materialdata_floats[7*1 + 5] = 1; materialdata_uints[ 7*1 + 6] = 0; // Ceiling materialdata_floats.set([1,1,1], 7*2 + 0); materialdata_floats[7*2 + 3] = 0.99; materialdata_floats[7*2 + 4] = 0; materialdata_floats[7*2 + 5] = 1; materialdata_uints[ 7*2 + 6] = 0; // R wall materialdata_floats.set([0,1,0], 7 * 3 + 0); materialdata_floats[7*3 + 3] = 0.90; materialdata_floats[7*3 + 4] = 0; materialdata_floats[7*3 + 5] = 1; materialdata_uints[ 7*3 + 6] = 0; // Back materialdata_floats.set([1,1,1], 7 * 4 + 0); materialdata_floats[7*4 + 3] = 0.90; materialdata_floats[7*4 + 4] = 0; materialdata_floats[7*4 + 5] = 1; materialdata_uints[ 7*4 + 6] = 0; // Box materialdata_floats.set([0.5,0.5,0.5], 7 * 5 + 0); materialdata_floats[7*5 + 3] = 0.90; materialdata_floats[7*5 + 4] = 0; materialdata_floats[7*5 + 5] = 1; materialdata_uints[ 7*5 + 6] = 0; // Sphere materialdata_floats.set([0.85,0.85,0.85], 7 * 6 + 0); materialdata_floats[7*6 + 3] = 0.001; materialdata_floats[7*6 + 4] = 0; materialdata_floats[7*6 + 5] = 1; materialdata_uints[ 7*6 + 6] = 0; // Light materialdata_floats.set([1,1,1], 7 * 7 + 0); materialdata_floats[7*7 + 3] = 0.001; materialdata_floats[7*7 + 4] = 1; materialdata_floats[7*7 + 5] = 1; materialdata_uints[ 7*7 + 6] = 0; break; case "MINI": materialdata = new ArrayBuffer(4 * 7 * 8); // 8 entries materialdata_floats = new Float32Array(materialdata); materialdata_uints = new Uint32Array(materialdata); var idx = 0; for(const part in austin_mini_geometry.materials) { materialdata_floats.set(austin_mini_geometry.materials[part].albedo, 7 * idx + 0); materialdata_floats[7*idx + 3] = austin_mini_geometry.materials[part].roughness; materialdata_floats[7*idx + 4] = austin_mini_geometry.materials[part].metallic; materialdata_floats[7*idx + 5] = part == "Windows" ? 1.5 : 1; materialdata_uints[ 7*idx + 6] = 0; idx += 1; } // Plane material materialdata_floats.set([0.5,0.5,0.5], 7 * idx + 0); materialdata_floats[7*idx + 3] = 0.01; materialdata_floats[7*idx + 4] = 1.; materialdata_floats[7*idx + 5] = 1; materialdata_uints[ 7*idx + 6] = 0; break; } // Populate GPU buffers const material_buffer = device.createBuffer({ size: materialdata.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(material_buffer, 0, materialdata); return material_buffer; }4b:T4d0,light_buffer = { if(!device) return undefined; // Switch on scene_select let lightdata = new ArrayBuffer(4 * 24); // Dummy buffer let lightdata_floats = new Float32Array(lightdata); let lightdata_uints = new Uint32Array(lightdata); switch(scene_select) { default: case "Simple": // One point light from above lightdata_uints[0] = 0; lightdata_floats.set([0, 1, 0, 10, 10, 10],1); break; case "Cornell Box": // One area light from above lightdata_uints[0] = 2; lightdata_floats.set([343.0, 548.8, 227.0, 343.0, 548.8, 332.0, 213.0, 548.8, 332.0, 213.0, 548.8, 227.0, 10, 10, 10],1); console.log(lightdata_floats); break; case "MINI": // One directional light from 1,1,1 lightdata_uints[0] = 1; lightdata_floats.set([-1, 1, -1, 10, 10, 10],1); break; } // Populate GPU buffers const light_buffer = device.createBuffer({ size: lightdata.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(light_buffer, 0, lightdata); return light_buffer; }4c:[] 41:{"id":"9d5f9b4439869b4c","slug":null,"title":"Great Bully Render-off cmu32","thumbnail":"da97d03ac6af881c4b6b0a214303704190542e8c872a2d5ef0d90573d96f57de","access_level":"public","create_time":"$D2025-12-05T20:09:29.210Z","update_time":"$D2025-12-07T22:38:35.774Z","view_time":null,"first_public_time":"$D2025-12-07T22:41:42.753Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"education_2026","bio":"Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar."},"version":1607,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456442ccbbc5348","login":"chase-ueltschey","name":"Chase Ueltschey","avatar_url":"https://avatars-next.observableusercontent.com/90b73e3d72625a10a45a70e8329028b0130e966f862ed65eb98c1478ad4ea7c6","tier":null,"bio":""}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Great Bully Render-off cmu32","cells":[{"id":0,"value":"# Great Bully Render-off cmu32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"toc({\n headers: \"h2,h3\",\n title: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Instructions\n\nIn this assignment, you will build upon our previous ray tracer to allow us to apply **lighting** a model. You may copy the relevant sections from your previous implementation to this notebook as needed. Details on what to do are in the **Code to Modify** section below.\n\n**Remember to fork this assignment!**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof gpu","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"render_button = Inputs.button(\"Render\", {\n value: null, \n width: ewidth + \"px\",\n reduce: () => {render();\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"{ \n let scene = \"\";\n switch(scene_select)\n {\n default:\n case \"Simple\":\n scene = \"Test Scene\";\n break;\n case \"Cornell Box\":\n scene = \"Cornell Box\";\n break;\n case \"MINI\":\n scene = \"MINI Cooper\";\n break;\n case \"Dummy\":\n scene = \"Dummy\";\n viewof scene.value = \"dummy\";\n viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n }\n\n return md`**Scene:** ${scene}`;\n //viewof scene.value = \"dummy\";\n //viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"error_log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"#### Scene\n\nUnlike the previous assignments, we are using a fixed set of scenes to choose from. The scenes include the **objects**, the scene graph **transforms**, and the **materials** for each object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":926,"value":"viewof scene_select = Inputs.radio([\"Simple\", \"Cornell Box\", \"MINI\"], {label: \"Scene to Render\", value: \"MINI\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"## Code to Modify\n\nBelow are the WGSL segments you must modify as specified in the assignment. Refer to the Canvas for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"### Create Camera & Viewport\n\nReuse your code from Assignment 2 or 3 to initialize these values:\n- `camera.basis`` : Basis`: The **camera's frame**—The three vectors describing its right, up, and forward directions (`camera.basis.xhat`, `camera.basis.yhat`, `camera.basis.zhat : vec3f` respectively). You need to set all three.\n- `viewport.origin`` : vec3f`: The origin of the viewport.\n- ${spancolor(image_color, \"image.pixel_width\")}: The width of an individual pixel.\n- ${spancolor(image_color, \"image.pixelheight\")}: The height of an individual pixel.\n\nThese calculated values will be used to generate rays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"### Generate Rays\n\nReuse your code from Assignment 2/3 (using non-hard coded values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"### Intersect Objects\n\nReuse your code from Assignment 3 here but also calculate the normal at the intersection to be stored in `hit.normal`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"#### Sphere Intersection\n\nIntersect the given ${spancolor(ray_color, \"ray\")} with a `sphere` (described by `sphere.center : vec3f` and `sphere.radius (f32)`). \n\n**Note:** In this assignment, you also have to calculate the normal and store it in `hit.normal`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"sphere_src = `\nfn intersect_sphere(ray_global : ray_struct, sphere : sphere_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, sphere.object_id);\n var hit_info = populate_hit(sphere.object_id);\n\n let oc = ray.origin - sphere.center;\n let a = 1.0; // ray.direction is normalized\n let b = 2.0 * dot(oc, ray.direction);\n let c = dot(oc, oc) - sphere.radius * sphere.radius;\n\n let discriminant = b * b - 4.0 * a * c;\n\n if (discriminant < 0.0) {\n return hit_info;\n }\n\n let sqrt_disc = sqrt(discriminant);\n let t1 = (-b - sqrt_disc) / (2.0 * a);\n let t2 = (-b + sqrt_disc) / (2.0 * a);\n\n // Find the closest valid t\n var t = t1;\n if (t < 0.0) {\n t = t2;\n if (t < 0.0) {\n return hit_info;\n }\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize((ray.origin + t * ray.direction) - sphere.center);\n\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"#### Plane Intersection\n\nIntersect the given ${spancolor(ray_color, \"ray\")} with a `plane` (described by `plane.point : vec3f` and `plane.normal (vec3f))`. \n\n**Note:** In this assignment, you also have to calculate the normal and store it in `hit.normal`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"plane_src = `\nfn intersect_plane(ray_global : ray_struct, plane : plane_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, plane.object_id);\n var hit_info = populate_hit(plane.object_id);\n\n let denom = dot(ray.direction, plane.normal);\n\n if (abs(denom) < 1e-6) {\n return hit_info;\n }\n\n let t = dot(plane.point - ray.origin, plane.normal) / denom;\n\n if (t < 0.0) {\n return hit_info;\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize(plane.normal);\n\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"#### Box Intersection\n\nIntersect the given ${spancolor(ray_color, \"ray\")} with an axis-aligned `box` (described by `box.origin : vec3f` and `box.dimensions (vec3f)`). \n\n**Note:** In this assignment, you also have to calculate the normal and store it in `hit.normal`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"#### Triangle Intersection\n\nIntersect the given ${spancolor(ray_color, \"ray\")} with a `triangle` (described by `triangle.p0 : vec3f`, `triangle.p1 (vec3f)`, and `triangle.p2 (vec3f)`). \n\n**Note:** In this assignment, you also have to calculate the normal and store it in `hit.normal`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"triangle_src = `\nfn intersect_triangle(ray_global : ray_struct, triangle : triangle_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, triangle.object_id);\n var hit_info = populate_hit(triangle.object_id);\n\n let epsilon = 1e-6;\n\n let p0 = triangle.p0;\n let p1 = triangle.p1;\n let p2 = triangle.p2;\n\n let edge1 = p1 - p0;\n let edge2 = p2 - p0;\n\n let h = cross(ray.direction, edge2);\n let a = dot(edge1, h);\n\n if (abs(a) < epsilon) {\n return hit_info;\n }\n\n let f = 1.0 / a;\n let s = ray.origin - p0;\n let u = f * dot(s, h);\n\n if (u < 0.0 || u > 1.0) {\n return hit_info;\n }\n\n let q = cross(s, edge1);\n let v = f * dot(ray.direction, q);\n\n if (v < 0.0 || u + v > 1.0) {\n return hit_info;\n }\n\n let t = f * dot(edge2, q);\n\n if (t < epsilon) {\n return hit_info;\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize(cross(edge1, edge2));\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"### Additional Globals\n\nIf you need other global functions (e.g., to calculate the diffuse component of a lighting model), you can put them here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1314,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"### Apply Point Light\n\nApply a point light to the given point. Parameters are the point in question and a `light : point_light`:\n\n- `light.origin : vec3f` The position of the light in global coordinates.\n- `light.color : vec3f`: The RGB exitant radiance of the light.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1007,"value":"pt_light_src = `\nfn apply_point_light(point : vec3f, light : point_light) -> vec3f\n{\n var out_color = vec3f(0,0,0);\n\n var to_light = light.origin - point;\n var dist2 = dot(to_light, to_light);\n var dist = sqrt(dist2);\n if(dist <= 1e-6) {\n return out_color;\n }\n var L = normalize(to_light);\n\n // shadow check\n var shadow_ray : ray_struct;\n shadow_ray.origin = point + L * 1e-4;\n shadow_ray.direction = L;\n var sh = trace(shadow_ray);\n if(sh.valid && sh.distance < dist - 1e-4) {\n return out_color;\n }\n\n // Add light's color\n out_color = light.color;\n\n return vec3f(0,0,0); //out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"### Apply Directional Light\n\nApply a directional light to the given point. Parameters are point in question and a `light : directional_light`:\n\n- `light.direction : vec3f`: The outgoing direction of the light in global coordinates.\n- `light.color : vec3f`: The RGB exitant radiance of the light.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1011,"value":"dir_light_src = `\nfn apply_directional_light(point : vec3f, light : directional_light) -> vec3f\n{\n var out_color = vec3f(0,0,0);\n\n // incoming direction\n var L = normalize(-light.direction);\n\n // shadow check\n var shadow_ray : ray_struct;\n shadow_ray.origin = point + L * 1e-4;\n shadow_ray.direction = L;\n var sh = trace(shadow_ray);\n if(sh.valid) {\n return out_color;\n }\n\n out_color = light.color;\n\n return out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"### Apply Area Light\n\nApply an area light (a quad) to the given point. Parameters are the point in question and a `light : area_light`:\n\n- `light.p0 : vec3f`: The lower, left point of the light facing it (the light normal is in the other direction).\n- `light.p1 : vec3f`: The lower, right point of the light facing it.\n- `light.p2 : vec3f`: The upper, right point of the light facing it.\n- `light.p3 : vec3f`: The upper, left point of the light facing it.\n- `light.color : vec3f`: The RGB exitant radiance of the light.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1015,"value":"area_light_src = `\nfn apply_area_light(point : vec3f, light : area_light) -> vec3f\n{\n var out_color = vec3f(0,0,0);\n\n // centroid approximation\n var centroid = (light.p0 + light.p1 + light.p2 + light.p3) * 0.25;\n var to_light = centroid - point;\n var dist2 = dot(to_light, to_light);\n var dist = sqrt(dist2);\n if(dist <= 1e-6) {\n return out_color;\n }\n var L = normalize(to_light);\n\n // shadow check toward centroid\n var shadow_ray : ray_struct;\n shadow_ray.origin = point + L * 1e-4;\n shadow_ray.direction = L;\n var sh = trace(shadow_ray);\n if(sh.valid && sh.distance < dist - 1e-4) {\n return out_color;\n }\n\n // Add light's color\n out_color = light.color;\n\n return out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"## Helper Functions\n\nThese shader functions are helper functions; you do not need to change them but might use them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"### Boolean Testing\n\n[Comparing floating point numbers is hard](https://randomascii.wordpress.com/2012/02/25/comparing-floating-point-numbers-2012-edition/) due to many factors; direct comparison of two floats is not recommended. Thus, we have an \"approximately\" equal, not equal, and other functions here. So, instead of:\n\n~~~wgsl\nvar a : f32, b : f32, c : f32;\n// ... set a,b,c somewhere...\n\n// Now test badly!\nif(a == b && a < c) \n{\n // Do a thing\n}\n~~~\nWe approximate via `approx_*` functions:\n~~~wgsl\nvar a : f32, b : f32;\n// ... set a,b,c somewhere...\n\n// More accurate\nif(approx_equal(a,b) && approx_less(a, c)) \n{\n // Do a thing\n}\n~~~\nThis approach does not actually properly [propagate errors](https://www.pbr-book.org/3ed-2018/Shapes/Managing_Rounding_Error \"Handling Rounding Error\"); but to do so would require significantly more work. The functions provided are:\n- `approx_equal`\n- `approx_not_equal`\n- `approx_less_than`\n- `approx_greater_than`\n- `approx_less_equal`\n- `approx_greater_equal`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":972,"value":"### Schlick Approximation\n\nIf you wish to use the Schlick Approximation for Fresnel reflectance, here it is.\n- `fn schlick(f0 : vec3f, n_dot_v : f32) -> vec3f`: Given the Fresnel reflectance at normal incidence ${tex`\\mathrm{F}_0`} and the dot product of the normal ${tex`\\mathbf{n}`} and the direction the ray came from (the *view* ${tex`\\mathbf{v}`}), return the approximate reflectance of the object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":981,"value":"### Randomization\n\nSome lighting models use randomization. Which function depends on what type of bounce you are doing:\n- `random_diffuse_dir(normal : vec3f) -> vec3f`: Given the normal of the surface ${tex`\\mathbf{n}`} on the side of the random ray, generate a random cosine weighted vector in the hemisphere over the surface.\n- `random_glossy_dir(normal : vec3f, shininess : f32) -> vec3f`: Given the normal of the surface ${tex`\\mathbf{n}`} on the side of the random ray and the Blinn-Phong shininess of the material, generate an appropriate glossy specular vector in the hemisphere over the surface.\n- `random_rough_dir(normal : vec3f, roughness : f32) -> vec3f`: Given the normal of the surface ${tex`\\mathbf{n}`} on the side of the random ray and roughness of the material, generate an appropriate rough specular vector in the hemisphere over the surface.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### Image Size\n\nThe ${spancolor(image_color, \"image size\")} is initially determined by the web page; the ${spancolor(image_color, \"effective canvas width\")} is initialized with the width or 600px (whichever is smaller) and the ${spancolor(image_color, \"initial canvas height\")} is set to the same value. If you wish to change these, you may do so here. These values are stored as ${spancolor(image_color, html`

image.width: u32`)} and ${spancolor(image_color, html`image.height: u32`)} in the renderer shader.\n\nNote: If you change this and then do not change the ${spancolor(viewport_color, \"viewport\")} to have proportional dimensions, you will get squishing/stretching. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"ewidth = Math.min(width,600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Implementation\n\nHere are all the parts that you do not need to modify; these set up the WebGPU context, import libraries, etc. You may experiment changing these values, but things might break!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"### Update Scene\n\nSimple functions to synchronize the different description when we update them (when we change which scene is selected)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1254,"value":"resetScene = () => \n{\n  viewof scene.value = \"\";\n  viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof xforms.value = \"\";\n  viewof xforms.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"function updateScene(value) {\n  viewof scene.value = viewof scene.value + (viewof scene.value == \"\" ? \"\" : \"\\n\") + value;\n  viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"function updateTransform(value) {\n  viewof xforms.value = viewof xforms.value + (viewof xforms.value == \"\" ? \"\" : \"\\n\") + value;\n  viewof xforms.dispatchEvent(new Event(\"input\", {bubbles: true})); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"updateCamera = (vp, fp, fl, u, g) => {\n  viewof viewport.value = vp;\n  viewof camera_origin.value = fp;\n  viewof focal_length.value = fl;\n  viewof up.value = u;\n  viewof gaze.value = g;\n  \n  viewof viewport.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof camera_origin.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof focal_length.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof up.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof gaze.dispatchEvent(new Event(\"input\", {bubbles: true}));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"Now we actually do that updating","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1069,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### WebGPU Initialization & Pipeline Creation\n\nWe initialize WebGPU if supported and then create a render pipeline as needed (when pipeline constants change).\n\nWrite-to-canvas info from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture \"WebGPU Storage Textures: Canvas as a Storage Texture\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"#### Adapter\n\nCreate the WebGPU adapter if we have it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"adapter = await navigator.gpu?.requestAdapter();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"### WebGPU Shader Chassis\n\nWe use a common base for the assignments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"import {viewof gpu, device, render_status, viewof viewport, viewof camera_origin, viewof focal_length, viewof up, viewof gaze, render, viewof scene, viewof xforms, tick,error_log} with {ewidth as ewidth, height as height, adapter as adapter, cam_view_update_src as cam_view_update_src, generate_ray_src as generate_ray_src, sphere_src as sphere_src, plane_src as plane_src, box_src as box_src, triangle_src as triangle_src, set_color_src as set_color_src, pt_light_src as pt_light_src, dir_light_src as dir_light_src, area_light_src as area_light_src, vertex_buffer as vertex_buffer, index_buffer as index_buffer, material_buffer as material_buffer, light_buffer as light_buffer, global_src as global_src} from \"@cse4413msstate/webgpu-assignment-renderer-chassis\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"### Data Buffers\n\nUpdate the vertex, index, material, and light buffers when the scene changes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"vertex_buffer = {\n  if(!device) return undefined;\n\n  // Switch on scene_select (can be costly if done a lot, so don't)\n  let vertexdata = new Float32Array([0,0,0, 0,0,0, 0,0]); // Dummy buffer\n  switch(scene_select)\n  {\n    default:\n    case \"Simple\":\n      break;\n    case \"Cornell Box\":\n      // The light quad\n      vertexdata = new Float32Array([343.0, 548.8, 227.0, 0, -1, 0, 0, 0,\n                                     343.0, 548.8, 332.0, 0, -1, 0, 0, 0,\n                                     213.0, 548.8, 332.0, 0, -1, 0, 0, 0,\n                                     213.0, 548.8, 227.0, 0, -1, 0, 0, 0]);\n      break;\n    case \"MINI\":\n      vertexdata = new Float32Array(austin_mini_geometry.vertexdata);\n      break;\n  }\n\n  // Populate GPU buffers\n  const vertex_buffer = device.createBuffer({\n    size: vertexdata.byteLength,\n    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,\n  });\n  device.queue.writeBuffer(vertex_buffer, 0, vertexdata);\n  \n  return vertex_buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"index_buffer = {\n  if(!device) return undefined;\n\n  // Switch on scene_select\n  let indexdata = new Uint32Array([0, 0, 0]); // Dummy buffer\n  switch(scene_select)\n  {\n    default:\n    case \"Simple\":\n      break;\n    case \"Cornell Box\":\n      // The Light Quad\n      indexdata = new Uint32Array([0, 1, 2, 0, 2, 3]);\n      break;\n    case \"MINI\":\n      indexdata = new Uint32Array(austin_mini_geometry.indexdata);\n      break;\n  }\n  \n\n  // Populate GPU buffers\n  const index_buffer = device.createBuffer({\n    size: indexdata.byteLength,\n    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,\n  });\n  device.queue.writeBuffer(index_buffer, 0, indexdata);\n  \n  return index_buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"### The Austin Mini","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1032,"value":"import { austin_mini_geometry } from \"@infowantstobeseen/mesh-collection\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"austin_mini_geometry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"### TOC Generation  \n\nGenerates a table of contents of easy navigation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":626,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"### Color Constants\n\nWe use a lot of colors; define constants to use for them. They are imported.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"import {x_color,y_color,z_color,u_color,v_color,n_color,camera_color,viewport_color,image_color,ray_color,object_color,scene_color,spancolor} from \"@cse4413msstate/graphics-color-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}}
42:"$41:body"