2b:null 2c:["$","title",null,{"children":"Assignment 4: Lighting | Introduction to Computer Graphics MSState | Observable"}] 31:T466,cam_view_update_src = ` // TODO: Update the following values using image, camera, and viewport: // - camera.basis (Basis): The three basis vectors for the camera and viewport space // - viewport.origin (vec3f): The viewport's origin // - image.pixel_width (f32): The width of an individual pixel // - image.pixel_height (f32): The height of an individual pixel camera.basis.yhat = normalize(camera.up); camera.basis.zhat = normalize(-camera.gaze); camera.basis.xhat = normalize(cross(camera.basis.yhat, camera.basis.zhat)); image.pixel_width = viewport.width/f32(image.width); image.pixel_height = viewport.height/f32(image.height); //viewport.center = camera.origin + (camera.f * normalize(camera.gaze)); let distanceLeft = f32(image.width)/2; let distanceDown = f32(image.height)/2; let viewportCenter = camera.origin + camera.f * normalize(camera.gaze); viewport.origin = viewportCenter -(0.5 * viewport.width * camera.basis.xhat) -(0.5 * viewport.height * camera.up) + (1/2) * ((image.pixel_width * camera.basis.xhat) + (image.pixel_height * camera.basis.yhat)); `32:T89c,generate_ray_src = ` // TODO: If you want to calculate any constants to use elsewhere, do so here. // The function to generate the rays. Returns both the ray origin on the viewport // and the ray direction. // // ray has two elements: // - ray.origin (vec3f): The ray's origin on the viewport (at the pixel center) // - ray.direction (vec3f): The ray's direction. Should be normalized. fn generate_ray(i : u32, j : u32) -> ray_struct { var ray : ray_struct; // TODO: Calculate and set the ray.origin and ray.direction // The default (which you will replace) is a ray from the origin with no // orientation let DistanceX = f32(i) - 0.5 * image.pixel_width; let rightVector = cross(camera.basis.yhat, camera.basis.zhat); let DirectionX = normalize(rightVector); //which direction is up let DistanceY = f32(j) -0.5 * image.pixel_height; let DirectionY = normalize(camera.up); //matrices using camera value //translation let translation_matrix = mat4x4(vec4f(1,0,0,0),vec4f(0,1,0,0),vec4f(0,0,1,0),vec4f(viewport.origin.x,viewport.origin.y,viewport.origin.z,1)); //rotation let rotation_matrix = mat4x4(vec4f(camera.basis.xhat.x,camera.basis.xhat.y,camera.basis.xhat.z,0),vec4f(camera.basis.yhat.x,camera.basis.yhat.y,camera.basis.yhat.z,0),vec4f(camera.basis.zhat.x,camera.basis.zhat.y,camera.basis.zhat.z,0),vec4f(0,0,0,1)); //scale let scale_matrix = mat4x4(vec4f(image.pixel_width,0,0,0),vec4f(0,image.pixel_height,0,0),vec4f(0,0,1,0),vec4f(0,0,0,1)); let rotation_scale_matrix = rotation_matrix * scale_matrix;; let tr_scale_matrix = translation_matrix * rotation_scale_matrix;; //local point we are moving from let viewport_space = vec4f(f32(i),f32(j),0,1); let new_ro = tr_scale_matrix * viewport_space; // TODO: Calculate and set the ray.origin and ray.direction // The default (which you will replace) is a ray from the origin with no // orientation ray.origin = vec3f(new_ro.x,new_ro.y,new_ro.z); //viewport.origin + (DistanceX * camera.basis.xhat) + (DistanceY * camera.basis.yhat); ray.direction = normalize(ray.origin - camera.origin); return ray; } `33:Tca1,sphere_src = ` fn intersect_sphere(ray : ray_struct, sphere : sphere_struct) -> hit_info_struct { var hit_info = populate_hit(sphere.object_id); // TODO: Intersect the transformed ray with the sphere. If there is an intersection, update the // hit_info. // Note, we cannot mutate the ray variable, so we will need to create a copy for the transformed ray. //create copy of ray let z = vec4f(ray.direction.x,ray.direction.y,ray.direction.z,0); let identity_matrix = mat4x4f(vec4f(1,0,0,0),vec4f(0,1,0,0), vec4f(0,0,1,0), vec4f(0,0,0,1)); var object_value = xform_array[sphere.object_id]; var finalTransformMatrix = identity_matrix; var parent_value = xform_array[object_value.parent]; //while the object has a parent while(object_value.parent != -1){ //find parent and apply its transform parent_value = xform_array[object_value.parent]; finalTransformMatrix = finalTransformMatrix * parent_value.transform; //check if the parent has a parent object_value.parent = parent_value.parent; } //make sure we are working with child/original object //apply local object's transform finalTransformMatrix = object_value.transform * finalTransformMatrix; //actually transform ray let new_ray = normalize(finalTransformMatrix * z); let transformed_ray = vec3f(new_ray.x,new_ray.y,new_ray.z); //new transformed ray origin let ray_vector = vec4f(ray.origin.x,ray.origin.y,ray.origin.z,1); let r = finalTransformMatrix * ray_vector; let transformed_ray_origin = vec3f(r.x,r.y,r.z); let s_hit_value = 2 * pow(dot((transformed_ray_origin - sphere.center), transformed_ray),2) - 4 * pow(length(transformed_ray),2) * (pow(length(transformed_ray_origin - sphere.center),2) - pow(sphere.radius,2)); if(approx_greater_equal(s_hit_value, 0)){ hit_info.valid = true; } let t_value1 = (dot(-transformed_ray,(transformed_ray_origin - sphere.center)) - pow(s_hit_value, 1/2)) / (2 * pow(length(transformed_ray),2)); let t_value2 = (dot(-transformed_ray,(transformed_ray_origin - sphere.center)) + pow(s_hit_value, 1/2)) / (2 * pow(length(transformed_ray),2)); if(approx_greater_equal(t_value1,0)){ hit_info.distance = t_value1; } else{ if(approx_greater_than(t_value2,0)){ hit_info.distance = t_value2; } } // if(approx_greater_equal(t_value2,0) && approx_greater_equal(t_value1,0)){ // if(approx_less_than(t_value2,t_value1)){ // hit_info.distance = t_value2; // } // } // if(approx_greater_equal(t_value2,0)){ // hit_info.distance = t_value2; // } if(approx_less_than(t_value1,0) && approx_less_than(t_value2,0)){ hit_info.valid = false; return hit_info; } // TODO: Normal in local coords let p = transformed_ray_origin + hit_info.distance * transformed_ray; let l_normal = normalize(p - sphere.center); let pt_1 = vec4f(l_normal.x,l_normal.y,l_normal.z,0); let g_normal = normalize((transpose(finalTransformMatrix) * pt_1)); hit_info.normal = vec3f(g_normal.xyz); return hit_info; } `34:T998,plane_src = ` fn intersect_plane(ray : ray_struct, plane : plane_struct) -> hit_info_struct { var hit_info = populate_hit(plane.object_id); // TODO: Intersect transformed ray with the plane. If there is an intersection, update the // hit_info. // Note, we cannot mutate the ray variable, so we will need to create a copy for the transformed ray. //create copy of ray let z = vec4f(ray.direction.x,ray.direction.y,ray.direction.z,0); let identity_matrix = mat4x4f(vec4f(1,0,0,0),vec4f(0,1,0,0), vec4f(0,0,1,0), vec4f(0,0,0,1)); var object_value = xform_array[plane.object_id]; var finalTransformMatrix = identity_matrix; var parent_value = xform_array[object_value.parent]; //while the object has a parent while(object_value.parent != -1){ //find parent and apply its transform parent_value = xform_array[object_value.parent]; finalTransformMatrix = finalTransformMatrix * parent_value.transform; //check if the parent has a parent object_value.parent = parent_value.parent; } //make sure we are working with child/original object // object_value = xform_array[plane.object_id]; //apply local object's transform finalTransformMatrix = object_value.transform * finalTransformMatrix; //actually transform ray direction let new_ray = normalize(finalTransformMatrix * z); let transformed_ray = vec3f(new_ray.x,new_ray.y,new_ray.z); //new transformed ray origin let ray_vector = vec4f(ray.origin.x,ray.origin.y,ray.origin.z,1); let r = finalTransformMatrix * ray_vector; let transformed_ray_origin = vec3f(r.x,r.y,r.z); //hit_info.valid = true; let parallel_test = dot(transformed_ray, plane.normal); //let test_2 = dot((plane.point - transformed_ray_origin),plane.normal); if( parallel_test != 0){ let t_value = (dot((plane.point - transformed_ray_origin),plane.normal))/(dot(transformed_ray,plane.normal)); if(approx_greater_than(t_value,0)){ hit_info.valid = true; hit_info.distance = t_value; if(approx_greater_than(t_value,0)){ let p = transformed_ray_origin + hit_info.distance * transformed_ray; let l_normal = normalize(plane.normal); let pt_1 = vec4f(l_normal.x,l_normal.y,l_normal.z,0); let g_normal = normalize(transpose(finalTransformMatrix) * pt_1); hit_info.normal = g_normal.xyz; } } } // TODO: Normal in local coords return hit_info; } `35:Td32,triangle_src = ` fn intersect_triangle(ray : ray_struct, triangle : triangle_struct) -> hit_info_struct { var hit_info = populate_hit(triangle.object_id); // TODO: Intersect transformed ray with the triangle. If there is an intersection, update the // hit_info. // Note, we cannot mutate the ray variable, so we will need to create a copy for the transformed ray. //create copy of ray let z = vec4f(ray.direction.x,ray.direction.y,ray.direction.z,0); let identity_matrix = mat4x4f(vec4f(1,0,0,0),vec4f(0,1,0,0), vec4f(0,0,1,0), vec4f(0,0,0,1)); var finalTransformMatrix = identity_matrix; var object_value = xform_array[triangle.object_id]; var parent_value = xform_array[object_value.parent]; var t = tick; while(object_value.parent != -1){ //find parent and apply its transform parent_value = xform_array[object_value.parent]; finalTransformMatrix = finalTransformMatrix * parent_value.transform; //check if the parent has a parent object_value.parent = parent_value.parent; } //make sure we are working with child/original object object_value = xform_array[triangle.object_id]; //apply local object's transform finalTransformMatrix = object_value.transform * finalTransformMatrix; //actually transform ray direction var new_ray = normalize(finalTransformMatrix * z); //new ray vector let ray_vector = vec4f(ray.origin.x,ray.origin.y,ray.origin.z,1); //new transformed ray origin var r = finalTransformMatrix * ray_vector; if(object_value.animated != 0){ t = (tick % 5)+1; for(var i = 0u; i < t; i++){ new_ray *= finalTransformMatrix; r *= finalTransformMatrix; } } else{ new_ray = finalTransformMatrix * z; r = finalTransformMatrix * ray_vector; } //define transformed ray let transformed_ray = vec3f(new_ray.x,new_ray.y,new_ray.z); let transformed_ray_origin = vec3f(r.x,r.y,r.z); let e_ten = triangle.p1 - triangle.p0; let e_twenty = triangle.p2 - triangle.p0; let r_zero_zero = transformed_ray_origin - triangle.p0; let q_value = cross(r_zero_zero,e_ten); let z_value = cross(transformed_ray,e_twenty); let m_value = dot(e_ten,z_value); //default hit_info.valid = true; if(approx_equal(m_value,0)){ hit_info.valid = false; } let alpha_value = (dot(r_zero_zero,z_value))/(m_value); if(approx_greater_than(alpha_value,1) || approx_less_than(alpha_value,0)){ hit_info.valid = false; } let beta_value = (dot(transformed_ray,q_value))/(m_value); if(approx_greater_than(beta_value,1) || approx_less_than(beta_value,0)){ hit_info.valid = false; } let sum_value = alpha_value + beta_value; if(approx_greater_than(sum_value,1)){ hit_info.valid = false; } let t_value = (dot(e_twenty,q_value))/(m_value); if(approx_less_than(t_value,0)){ hit_info.valid = false; } let rt_value = triangle.p0 + (e_ten * alpha_value) + (e_twenty * beta_value); if(hit_info.valid == true){ hit_info.distance = t_value; } // TODO: Normal in local coords if(hit_info.valid == true){ let l = normalize(cross(e_ten,e_twenty)); let l_normal = vec4f(l.x,l.y,l.z,0); let g_normal = normalize(transpose(finalTransformMatrix) * l_normal); hit_info.normal = g_normal.xyz; } return hit_info; } `36: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.37:Tef6,set_color_src = ` // TODO: Set the color (a vec3f). The shader variables ray & hit_info holds the current // ray's data. // The default color (which you will replace if an object was hit) is white if(hit_info.valid) { color = vec3f(0); // Initially black let n = normalize(hit_info.normal); let pt = ray.origin + ray.direction * hit_info.distance + (f32(0.002)*n); var view_dir = normalize(-ray.direction); for(var light_index : u32 = 0; light_index < num_lights; light_index += 1) { // TODO: Call light_radiance w/ the light_index, the query point (you have to // generate from hit_info), and the hit normal // Remember to offset the point! //light let r = light_radiance(light_index,pt,n) * 0.3; //light direction let l = get_light_dir(light_index,pt); // TODO: Use hit_info.material & the returned radiance to calculate the lighting // We have a diffuse & specular component. The former is 0 if metallic, the latter is // tiny if not //in front or behind object let normal_face = max(dot(n,l),0); //if facing object if(approx_greater_than(normal_face, 0)){ //lambertian/diffuse lighting let obj_material = hit_info.material; //dialectric(close to 0) var F_r = obj_material.albedo; if(approx_less_than(obj_material.metallic,0.5)){ F_r = vec3f(0.05,0.05,0.05); } if(approx_less_than(obj_material.metallic,0.5)){ var diffuse_shading = lambertian_diffuse(obj_material.albedo,r,n,l); color += diffuse_shading; } //specular var smoothness = f32(1) - obj_material.roughness; var shininess = f32(2); var specular_component = glossy_specular(r,l,n,shininess, F_r, view_dir); //if not metallic if(approx_greater_than(obj_material.metallic,0.5)){ specular_component *= 0.2; } color += specular_component; } } view_dir = reflect(view_dir,n); let l = trace(new_ray(pt,view_dir)); if(l.valid){ let obj_material = hit_info.material; if(obj_material.emissive == true){ color = obj_material.albedo; } else{ for(var light_index : u32 = 0; light_index < num_lights; light_index += 1){ //light let r = light_radiance(light_index,pt,n) * 0.1; //light direction let l = get_light_dir(light_index,pt); // TODO: Use hit_info.material & the returned radiance to calculate the lighting // We have a diffuse & specular component. The former is 0 if metallic, the latter is // tiny if not //in front or behind object let normal_face = max(dot(n,l),0); //if facing object if(approx_greater_than(normal_face, 0)){ //lambertian/diffuse lighting let obj_material = hit_info.material; //dialectric(close to 0) var F_r = obj_material.albedo; if(approx_less_than(obj_material.metallic,0.5)){ F_r = vec3f(0.05,0.05,0.05); } if(approx_less_than(obj_material.metallic,0.5)){ var diffuse_shading = lambertian_diffuse(obj_material.albedo,r,n,l); color += diffuse_shading; } //specular var smoothness = f32(1) - obj_material.roughness; var shininess = f32(2); var specular_component = glossy_specular(r,l,n,shininess, F_r, view_dir); //if not metallic if(approx_greater_than(obj_material.metallic,0.5)){ specular_component *= 0.2; } color += specular_component; } } } } } `38: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"; }39: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; }3a:T4aa,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); 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; }3b:[] 2f:{"id":"816ac70dd26d467c","slug":null,"title":"Assignment 4: Lighting","thumbnail":"da97d03ac6af881c4b6b0a214303704190542e8c872a2d5ef0d90573d96f57de","access_level":"public","create_time":"$D2025-11-23T19:14:09.047Z","update_time":"$D2025-11-24T15:30:25.432Z","view_time":null,"first_public_time":"$D2025-11-24T15:43:47.348Z","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":"pro_2024"},"version":1752,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d10bdbed12331d7","login":"dlou04","name":"Dlou04","avatar_url":"https://avatars-next.observableusercontent.com/51143191e73cf52c7cffe898965446790a4c5e537a70bf63c391da2b3c02c6ec","tier":null}],"members":[{"type":"individual","id":"9764bbca81add4da","login":"smink-karl","name":"Smink, Karl","avatar_url":"https://avatars-next.observableusercontent.com/0f1bce0b0fdc3f0e7e857b13a3ed72d7a7aeb5cf144c7b7e0bd2f2fbff65932c","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":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Assignment 4: Lighting","cells":[{"id":0,"value":"# Assignment 4: Lighting ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":8,"value":"## Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof gpu","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":302,"value":"error_log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","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","output":"","database":"$undefined"},{"id":440,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":152,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":516,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":526,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":535,"value":"box_src = `\nfn intersect_box(ray : ray_struct, box : box_struct) -> hit_info_struct\n{\n var hit_info = populate_hit(box.object_id);\n\n // TODO: Intersect transformed ray with the box. If there is an intersection, update the\n // hit_info.\n // Note, we cannot mutate the ray variable, so we will need to create a copy for the transformed ray.\n // TODO: Intersect the transformed ray with the sphere. If there is an intersection, update the\n // hit_info.\n // Note, we cannot mutate the ray variable, so we will need to create a copy for the transformed ray.\n\n // TODO: Normal in local coords\n\n\n \n\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":545,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":1314,"value":"global_src = `\n\n\n// const k_diffuse = (material.albedo/pi) * dot(hit_info.normal, light.direction);\n\n//lambertian diffuse\nfn lambertian_diffuse(albedo : vec3f, light: vec3f, normal : vec3f, lightdir : vec3f) -> vec3f{\n let N_Lightdir = dot(normal,lightdir);\n let diffuse = albedo * light * N_Lightdir;\n return diffuse;\n}\n\nfn glossy_specular( light: vec3f, light_dir : vec3f, normal : vec3f, shininess : f32, f_r : vec3f, view_dir : vec3f) ->vec3f{\n\n let w_h = normalize(light_dir + view_dir); \n let N_wh = max(dot(normal,w_h),0);\n \n if(approx_less_equal(N_wh,0)){\n return vec3f(0,0,0);\n }\n //var R = 2 * (dot(normal,light)* normal) - light;\n let specular = light * f_r * pow(N_wh,shininess);\n return specular;\n}\n\nfn new_ray(point : vec3f, direction : vec3f) -> ray_struct{\n var ray : ray_struct;\n ray.origin = point;\n ray.direction = direction;\n return ray;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":1007,"value":"pt_light_src = `\nfn apply_point_light(point : vec3f, light : point_light) -> vec3f\n{\n // TODO: Given the light, apply it to the given point. Return the appropriate incoming radiance to the point.\n var out_color = vec3f(0,0,0);\n\n let r = length(light.origin - point);\n // let PI = 3.14159265358979323846264338327950288;\n // let e_light = light.color / (4 * PI);\n // let i_light = light.origin / e_light * pow(r,2);\n\n //solve for the distance between query pt and light point as r, 1/r^2 * light.color\n // point is the other point of the object to use in the distance equation\n //offset 0.001\n\n //let r = sqrt(pow(light.origin.x - point.x,2)+pow(light.origin.y - point.y,2));\n out_color = light.color/(r * r);\n\n // TODO: If doing shadows, check for them first\n \n \n\n return out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":1011,"value":"dir_light_src = `\nfn apply_directional_light(point : vec3f, light : directional_light) -> vec3f\n{\n // TODO: Given the light, apply it to the given point. Return the appropriate incoming radiance to the point.\n var out_color = vec3f(0,0,0);\n\n let k = point * light.direction;\n out_color = light.color;\n\n // TODO: If doing shadows, check for them first\n \n\n return out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":1015,"value":"area_light_src = `\nfn apply_area_light(point : vec3f, light : area_light) -> vec3f\n{\n // TODO: Given the light, apply it to the given point. Return the appropriate incoming radiance to the point.\n // Remember, intersect_triangle(ray_struct, triangle_struct) exists.\n\n var out_color = vec3f(0,0,0);\n\n // TODO: If doing shadows, check for them first\n\n\n // if(sphere.object_id){\n // let A = 4 * 3.14 * (r * r);\n // }\n out_color = vec3f(1,0,0);\n\n return out_color;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"","database":"$undefined"},{"id":38,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":48,"value":"ewidth = Math.min(width,600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":1067,"value":"Now we actually do that updating","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1069,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":22,"value":"adapter = await navigator.gpu?.requestAdapter();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":1075,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"### The Austin Mini","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1103,"value":"austin_mini_geometry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":626,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}}
30:"$2f:body"