25:["$","title",null,{"children":"Assignment 4: Lighting | Introduction to Computer Graphics MSState | Observable"}] 49:Tadc,/* 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 // tilt the camera gaze a lil bit so we can see the roof more :P var tilt_gaze = normalize(vec3f(camera.gaze.x, camera.gaze.y - 0.3, camera.gaze.z)); camera.basis.yhat = normalize(camera.up); camera.basis.zhat = normalize(-tilt_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(tilt_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)); ` */ cam_view_update_src = ` // !!!!! Clara: threw my cam_view_update_src code into here to handle gaze tilt downwards to see roof better so it could work properly w/ the generate_ray_src bc am being lazy bc can't stand messing with variables // TODO: Update the following values using image, camera, and viewport: // - camera.basis (Basis): The three basis vectors for the camera and viewport space //normalizing gaze(v) and up var gazeNorm = normalize(camera.gaze); var upNorm = normalize(camera.up); // titling cam down a bit gazeNorm.y -= 0.3; gazeNorm = normalize(gazeNorm); //computing cross products and setting vars for camera basis var zhat = -gazeNorm; var xhat = normalize(cross(upNorm, zhat)); var yhat = normalize(cross(zhat, xhat)); // assigning camera basis camera.basis.xhat = xhat; camera.basis.yhat = yhat; camera.basis.zhat = zhat; // - viewport.origin (vec3f): The viewport's origin // computing for viewport center to use for viewport origin var viewport_center = camera.origin + camera.f * gazeNorm; // now computing for viewport origin viewport.origin = viewport_center - (0.5 * viewport.width * camera.basis.xhat) - (0.5 * viewport.height * camera.basis.yhat); // - image.pixel_width (f32): The width of an individual pixel image.pixel_width = viewport.width / f32(image.width); // - image.pixel_height (f32): The height of an individual pixel image.pixel_height = viewport.height / f32(image.height); `4a:Tfeb,/* 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 // change camera height offset a lil bit so we can continue to see roof better :O var cam_height_offset = vec3f(0.0, 2.5, 0.0); ray.origin = vec3f(new_ro.x,new_ro.y,new_ro.z) + cam_height_offset; //viewport.origin + (DistanceX * camera.basis.xhat) + (DistanceY * camera.basis.yhat); ray.direction = normalize(ray.origin - camera.origin); return ray; } ` */ generate_ray_src = ` // !!!!! Clara: threw my generate_ray_src code into here to handle camera movement upwards to see roof better // 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 { // generate/find pixel center //var pixel_center = viewport.origin + (f32(i) * image.pixel_width * camera.basis.xhat) + (f32(j) * image.pixel_height * camera.basis.yhat); var ray : ray_struct; // TODO: Calculate and set the ray.origin and ray.direction // viewport to global transform matrix var viewport_to_global = mat4x4f( // FOR i : img pixel width * camera xhat vec4f(image.pixel_width * camera.basis.xhat, 0.0), // FOR j : img pixel heigh + camera yhat vec4f(image.pixel_height * camera.basis.yhat, 0.0), // z vec4f(-camera.basis.zhat, 0.0), vec4f(viewport.origin, 1.0) ); // Viewport space ([i, j, 0, 1] in viewport coordinates) var viewport_space = vec4f(f32(i), f32(j), 0.0, 1.0); // viewport to global transform MATRIX * viewport space -> global coords for ray origin var global_coords = viewport_to_global * viewport_space; // ray origin = global_coords (in xyz) ray.origin = camera.origin + vec3f(0.0, 2.0, 0.0); // just relplacing pixel center with the glocal coords (in xyz) ray.direction = normalize(global_coords.xyz - camera.origin); return ray; } `4b: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; } `4c: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; } `4d:T172f,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; // -------- PERLIN NOISE -------- // code transfer notes: // t == t_value // set vars for p0/p1/p2 for ease // global_norm == g_normal // set local_origin & local_direction // -> xform_entry == object_value var transform = object_value.transform; // if actually has parent, apply (not equal to -1) if (object_value.parent != -1){ transform = transform * xform_array[u32(object_value.parent)].transform; } var local_origin = (transform * vec4f(ray.origin, 1.0)).xyz; var local_direction = normalize((transform * vec4f(ray.direction, 0.0)).xyz); var p0 = triangle.p0; var p1 = triangle.p1; var p2 = triangle.p2; // local hit pt on triangle var local_hit = local_origin + t_value * local_direction; // actul get height for where roof kind of is as a cutoff var roof_cutoff = (p0.y + p1.y + p2.y) / 3.0; //only do perlin when norm insicates basically horiz surface if(g_normal.y < 0.2 || roof_cutoff < 0.75){ return hit_info; } // which triNGLE is hit in index buffer var triangle_id = hit_info.object_id; // triangle 0 , 1, & 2 = verts (0, 1, 2), (0, 2, 3), (4, 5, 6) var i0 = index_buffer[triangle_id].t0; var i1 = index_buffer[triangle_id].t1; var i2 = index_buffer[triangle_id].t2; var v0 = vertex_buffer[i0]; var v1 = vertex_buffer[i1]; var v2 = vertex_buffer[i2]; // actually getting uv from u & v in vertex_data var uv0 = vec2f(v0.u, v0.v); var uv1 = vec2f(v1.u, v1.v); var uv2 = vec2f(v2.u, v2.v); var gamma = 1.0 - alpha_value - beta_value; var uv = gamma * uv0 + alpha_value * uv1 + beta_value * uv2; // checkerboard squares/tiles var tiles = 4.0; //uv x and z roof coords w/ local hit pos var uvx = i32(local_hit.x * tiles); var uvy = i32(local_hit.z * tiles); // chckerboard colors are gonna be white (even) and purple (odd) var sum = uvx + uvy; var base_color = vec3f(1.0, 1.0, 1.0); if(sum % 2 == 0){ base_color = vec3f(0.6, 0.0, 0.0); } else{ base_color = vec3f(0.3, 0.45, 0.3); } // use uvs as corrds for perlin var uv_coords = vec3f(uv.x * 5.0, uv.y * 5.0, 0.0); // get noise from -1 to 1 var n = perlin_noise(uv_coords); // move to 0 thru 1 var n_0thru1 = (n + 1.0) * 0.5; // final roof color (noise * base) hit_info.material.albedo = base_color * n_0thru1; } return hit_info; } `4e: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.4f:T1114,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) * 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.04,0.04,0.04); } 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(5); var specular_component = glossy_specular(r,l,n,shininess, F_r, view_dir); //if not metallic if(approx_less_than(obj_material.metallic,0.5)){ specular_component *= 0.3; } color += specular_component; } } let new_dir = reflect(ray.direction,n); let r_l = trace(new_ray(pt,new_dir)); if(r_l.valid){ let n_n = normalize(r_l.normal); let p = pt + new_dir * r_l.distance + (f32(0.002)*n_n); let new_material = r_l.material; if(new_material.emissive == true){ color = new_material.albedo; } else{ for(var light_index : u32 = 0; light_index < num_lights; light_index += 1){ //light let n_r = light_radiance(light_index,p,n) * 1; //light direction let n_l = get_light_dir(light_index,p); // 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_n,n_l),0); //if facing object if(approx_greater_than(normal_face, 0)){ //dialectric(close to 0) var f_r = new_material.albedo; if(approx_less_than(new_material.metallic,0.5)){ f_r = vec3f(0.04,0.04,0.04); } if(approx_less_than(new_material.metallic,0.5)){ var diffuse_2 = lambertian_diffuse(new_material.albedo,n_r,n_n,n_l); color += diffuse_2 * 0.3; } //specular var smoothness = f32(1) - new_material.roughness; var shininess = f32(5); var specular_2 = glossy_specular(n_r,n_l,n_n,shininess, f_r, view_dir); //if not metallic if(approx_less_than(new_material.metallic,0.5)){ specular_2 *= 0.3; } color += specular_2; } } } } //procedural texture mapping //if the hitobjectid is 7 then use that intersectionpoint if(hit_info.object_id == 7){ //then do procedural let plane_pt = ray.origin + ray.direction * hit_info.distance +(0.001 * hit_info.normal) ; let p = vec2f(plane_pt.x,plane_pt.z); // let pattern = (tan(plane_pt.z * 2 * f32(3.1459) * f32(scaleT)) * sin(plane_pt.x * 2 * f32(3.1459)* f32(scaleS)) + 1) * 0.5; let pattern = vec4f(color.x,color.y,color.z,1.0) * texture_overlap(p); color = vec3f(pattern.x,pattern.y,pattern.z); } } `50:T1656,global_src = ` // const k_diffuse = (material.albedo/pi) * dot(hit_info.normal, light.direction); //lambertian diffuse fn lambertian_diffuse(albedo : vec3f, light: vec3f, normal : vec3f, lightdir : vec3f) -> vec3f{ let N_Lightdir = dot(normal,lightdir); let diffuse = (albedo/f32(3.14159)) * light * N_Lightdir; return diffuse; } fn glossy_specular( light: vec3f, light_dir : vec3f, normal : vec3f, shininess : f32, f_r : vec3f, view_dir : vec3f) ->vec3f{ let w_h = normalize(light_dir + view_dir); let N_wh = max(dot(normal,w_h),0); if(approx_less_equal(N_wh,0)){ return vec3f(0,0,0); } let specular = light * (f_r * pow(N_wh,shininess)); return specular; } fn new_ray(point : vec3f, direction : vec3f) -> ray_struct{ var ray : ray_struct; ray.origin = point; ray.direction = direction; return ray; } fn checkerboard_pattern(text_coords : vec2f, scale : f32 ) -> f32{ let s = text_coords[0]; let t = text_coords[1]; let sum = abs(floor(s * scale) + floor(t * scale)); var w_b = false; var p = 0.0; if(approx_equal((sum %2),0)){ w_b = true; p = 1.0; } return p; } fn texture_overlap( text_coords : vec2f) -> vec4f{ let color_b = vec3f(1,0,0); var per = checkerboard_pattern(text_coords, 5.0); let pattern_color = vec4f(color_b * per, 1.0); return pattern_color; } // -------- Perlin noise AHHHHHH -------- (txtbk pgs 285 - 287) // before actually doing noise, make array "where G is a precomputed array of n random unit vecs" // absolutely do not feel like implementing rand num generator for nums in interval [0,1] so just BSing some rand nums to make array of size 8 instead of what perlin did (n=256) bc just nope... // DON't FORGET: need to point in all directions (pos & neg) const G : array = array( normalize(vec3f(1.0, 0.5, 0.0)), normalize(vec3f(0.3, -1.0, 0.7)), normalize(vec3f(-0.5, 0.0, 1.0)), normalize(vec3f(0.0, 0.6, 0.9)), normalize(vec3f(-1.0, 0.0, -0.4)), normalize(vec3f(0.0, 0.0, 1.0)), normalize(vec3f(-0.8, -0.3, -0.9)), normalize(vec3f(0.9, 0.7,-0.1)) ); // Eqtn: Tijk = G(Phi(i + Phi(j + Phi(k)))) == rand unit vec for lattice point gradient (x, y, z) = (i, j, k) const P : array = array(0, 1, 2, 3, 4, 5, 6, 7); // Phi(i) = P(array length n contaning permutation of ints 0 thru n-1)[i mod n] -> n = 8 fn Phi(i : i32) -> i32{ // to [0, 7] var indx = i32(i % 8); return P[u32(indx)]; } fn lattice_point_ijk(i : i32, j : i32, k : i32) -> vec3f{ // Phi(k) var phi_k = i32(Phi(k)); // Phi(j + Phi(k)) var phi_jk = i32(Phi(j + i32(phi_k))); // Phi(i + Phi(j + Phi(k))) var phi_ijk = i32(Phi(i + i32(phi_jk))); return G[u32(phi_ijk % 8)]; } // weight function (w = little omega)... w(t) = 2|t|^3 - 3|t|^2 + 1 -> if |t| < 1... otherwise -> 0 fn little_omega(t : f32) -> f32{ var abs_t = abs(t); // 2|t|^3 - 3|t|^2 + 1 -> if |t| < 1 if(abs_t < 1){ return 2.0 * (abs_t * abs_t * abs_t) - 3.0 * (abs_t * abs_t) + 1.0; } // otherwise -> 0 return 0.0; } // actual Perlin function: n(x, y, z) = the nasty giant equation thing, not even gonna try and type it out in here... we all know what eqtn I'm talking abt. // all the other eqtns above where so that it can be more easily implemented in here bc it's literally just eqtns in eqtns and a breeding ground for confusion in my head if put to closely together fn perlin_noise(p : vec3f) -> f32{ //get i, j, & k from x, y, & z coords for base lattice coords var li = i32(floor(p.x)); var lj = i32(floor(p.y)); var lk = i32(floor(p.z)); // the fractional parts for u, v, w var fx = p.x - f32(li); var fy = p.y - f32(lj); var fz = p.z - f32(lk); var sum = f32(0.0); // loop for the n = 8 for lattice pts around x, y, & z (w/ the corneres) (0, 1) for Omega(x - i, y - j, z - k) for(var xCorner = i32(0); xCorner <= 1; xCorner = xCorner + 1){ var i = li + xCorner; // u = fx - i var u = fx - f32(xCorner); // little omegs(u) var wx = little_omega(u); // for y coord for(var yCorner = i32(0); yCorner <= 1; yCorner = yCorner + 1){ var j = lj + yCorner; // v = fy - j var v = fy - f32(yCorner); // little omega(v) var wy = little_omega(v); for (var zCorner = i32(0); zCorner <= 1; zCorner = zCorner + 1){ var k = lk + zCorner; // w = fz - k var w = fz - f32(zCorner); // little omega(w) var wz = little_omega(w); //get gradient for lattice corner for i, j, & k var grad = lattice_point_ijk(i, j, k); // grad vec from corner to perlin point(pp... lol. sry im tired and find that funny and am //absolutely keeping that in. no regerts) var pp = vec3f(u, v, w); // FINALLY doing dot product of grad vec with grad pp vec // eqtn: Tijk DOT (u, v,w) (i.e. pp) var gradDOTpp = dot(grad, pp); // weight eqtn for the other part of the eqtn that the Tijk DOT pp goes with in the big eqtn //for big Omega ijk (u, v, w) = little omega(w)... w(v)w(u)w(w)(Tijk DOT pp(u, v, w)) var weight = wx * wy * wz; sum = sum + weight * gradDOTpp; } } } return sum; } `51: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"; }52: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; }53: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; }54:[] 29:{"id":"34fbdb9cf98967fc","slug":null,"title":"Assignment 4: Lighting","thumbnail":"da97d03ac6af881c4b6b0a214303704190542e8c872a2d5ef0d90573d96f57de","access_level":"public","create_time":"$D2025-12-08T19:04:24.533Z","update_time":"$D2025-12-08T19:04:24.533Z","view_time":null,"first_public_time":"$D2025-12-08T19:04:39.645Z","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.","followed_by_you":false,"follows_you":false},"version":2029,"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,"bio":"","followed_by_you":false,"follows_you":false}],"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 4: Lighting","cells":[{"id":0,"value":"# Assignment 4: Lighting ","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":"$49","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":"$4a","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":"$4b","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":"$4c","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":"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","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":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$4f","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":"$50","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 // 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","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 // 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\n // TODO: If doing shadows, check for them first\n let l = normalize(light.direction);\n let p = point + l * f32(0.002);\n let shadow_ray = trace(new_ray(p,l));\n let d_material = shadow_ray.material;\n if(shadow_ray.valid == true){\n return vec3f(0,0,0);\n }\n else{\n out_color = light.color;\n }\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 // 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 = 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":"$51","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":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"$53","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":"$W54","stdlib":"1"}}
24:null