2b:null 2c:["$","title",null,{"children":"Assignment 3: Transforms | Introduction to Computer Graphics MSState | Observable"}] 31:T4f2,viewof plane = Inputs.form({x: Inputs.number([-Infinity, Infinity], { label: html`Plane point ${tex`x`}`, value: 0}), y: Inputs.number([-Infinity, Infinity], { label: html`Plane point ${tex`y`}`, value: -1}), z: Inputs.number([-Infinity, Infinity], { label: html`Plane point ${tex`z`}`, value: 0}), nx: Inputs.number([-Infinity, Infinity], { label: html`Plane normal ${tex`x`}`, value: 0}), ny: Inputs.number([-Infinity, Infinity], { label: html`Plane normal ${tex`y`}`, value: 1}), nz: Inputs.number([-Infinity, Infinity], { label: html`Plane normal ${tex`z`}`, value: 0}), }, {template:(inputs) => html`

Insert Plane

${Object.values(inputs)}

`})32:T50a,viewof box = Inputs.form({x: Inputs.number([-Infinity, Infinity], { label: html`Box origin ${tex`x`}`, value: -0.5}), y: Inputs.number([-Infinity, Infinity], { label: html`Box origin ${tex`y`}`, value: -0.5}), z: Inputs.number([-Infinity, Infinity], { label: html`Box origin ${tex`z`}`, value: -0.5}), w: Inputs.number([-Infinity, Infinity], { label: html`Box width ${tex`\Delta x`}`, value: 1}), h: Inputs.number([-Infinity, Infinity], { label: html`Box height ${tex`\Delta y`}`, value: 1}), d: Inputs.number([-Infinity, Infinity], { label: html`Box depth ${tex`\Delta z`}`, value: 1}), }, {template:(inputs) => html`

Insert Axis-aligned Box

${Object.values(inputs)}

`})33:T73b,viewof tri = Inputs.form({x0: Inputs.number([-Infinity, Infinity], { label: html`First point ${tex`x`}`, value: -0.866}), y0: Inputs.number([-Infinity, Infinity], { label: html`First point ${tex`y`}`, value: -0.75}), z0: Inputs.number([-Infinity, Infinity], { label: html`First point ${tex`z`}`, value: 0}), x1: Inputs.number([-Infinity, Infinity], { label: html`Second point ${tex`x`}`, value: 0.866}), y1: Inputs.number([-Infinity, Infinity], { label: html`Second point ${tex`y`}`, value: -0.75}), z1: Inputs.number([-Infinity, Infinity], { label: html`Second point ${tex`z`}`, value: 0}), x2: Inputs.number([-Infinity, Infinity], { label: html`Third point ${tex`x`}`, value: 0}), y2: Inputs.number([-Infinity, Infinity], { label: html`Third point ${tex`y`}`, value: 0.75}), z2: Inputs.number([-Infinity, Infinity], { label: html`Third point ${tex`z`}`, value: 0}), }, {template:(inputs) => html`

Insert Triangle

${Object.values(inputs)}

`})34:T631,#### Transforms Transforms are listed one line per object. Each transform is a **parent to local** transform; to transform from a point in the local coordinate system to its parents coordinate system, you must use the inverse transform. Each transform entry has a *object index*, a *parent index* and a *transform sequence*. The object this transform corresponds to and the parent transform to use are referred to by **0-based index** (e.g. if the parent of a transform is the second object in the scene, use index 1); objects whose parent is the global coordinate system use -1 as their parent. The transform sequence is a series of codes that specify the model transform; the transform is built **left-to-right**. The syntax for each entry in the sequence is: - `I`: The identity transform. - `R axis_x axis_y axis_z angle`: Rotation about axis `axis` through `angle` radians. - `T x y z`: Translate by the given vector. - `S scale`: Scale by the given factor uniformly. - An `*` can be added to the start of a sequence if the transform is animated over time. For example, the entry ~~~ 1 0 T 0 -1 0 R 1 0 0 3.14159 ~~~ indicates that this is a transform for the *second object* whose *parent transform* is that belonging to the first object. A point in the parent's coordinate system is rotated about the parent's ${tex`\textcolor{${x_color}}{\hat{\mathbf{x}}}`} axis by ${tex`180\degree`} and then translated by ${tex`[0, -1, 0]`} to be transformed into local coordinates. The final transform would then be ${tex`\mathrm{M_1 = TR_{\textcolor{${x_color}}{\hat{\mathbf{x}}}}}`}35:T4cd, add_transform = Inputs.button([["Add Transform", () => { updateTransform(xform_sequence.origin + " " + xform_sequence.parent + " " + (xform_sequence.animated ? "* " : "") + xform_sequence.sequence); return null; }], ["Reset Transform", () => { viewof xform_sequence.children[1].value = undefined; viewof xform_sequence.children[2].value = -1; viewof xform_sequence.children[3].value = "I"; viewof xform_sequence.children[4].value = false; viewof xform_sequence.dispatchEvent(new Event("input", {bubbles: true})); return null; }]])36:T439,### Create Camera & Viewport Reuse your code from Assignment 2 to initialize these values: - `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. - `viewport.origin`` : vec3f`: The origin of the viewport. - ${spancolor(image_color, "image.pixel_width")}: The width of an individual pixel. - ${spancolor(image_color, "image.pixelheight")}: The height of an individual pixel. Ideally, you did not use hard-coded values in Assignment 1; you cannot use hard-coded ones here, you will have to use those in the shader variables. These calculated values will be used to generate rays.37:T4f7,cam_view_update_src = ` // Updated to translate the coordinate space to the space of the camera let gaze_vec = normalize(vec3f(${gaze.x}, ${gaze.y}, ${gaze.z})); let up_vec = normalize(vec3f(${up.x}, ${up.y}, ${up.z})); camera.basis.zhat = -gaze_vec; camera.basis.xhat = normalize(cross(up_vec, camera.basis.zhat)); camera.basis.yhat = cross(camera.basis.zhat, camera.basis.xhat); image.pixel_width = viewport.width / f32(image.width); image.pixel_height = viewport.height / f32(image.height); let camera_pos = vec3f(${camera_origin.x}, ${camera_origin.y}, ${camera_origin.z}); let cam_to_world = mat4x4f( vec4f(camera.basis.xhat, 0.0), vec4f(camera.basis.yhat, 0.0), vec4f(camera.basis.zhat, 0.0), vec4f(camera_pos, 1.0) ); let half_w = 0.5 * viewport.width; let half_h = 0.5 * viewport.height; let viewport_to_camera = mat4x4f( vec4f(image.pixel_width, 0.0, 0.0, 0.0), vec4f(0.0, image.pixel_height, 0.0, 0.0), vec4f(0.0, 0.0, 1.0, 0.0), vec4f(-half_w * image.pixel_width, -half_h * image.pixel_height, -${focal_length}, 1.0) ); let origin_viewport = vec4f(0.0, 0.0, 0.0, 1.0); let world_origin = cam_to_world * (viewport_to_camera * origin_viewport); viewport.origin = world_origin.xyz; `38:Ta03,generate_ray_src = ` // function to provide animation transform fn animation_transform(tick: u32, delta_t: u32) -> mat4x4f { let time = f32(tick) * f32(delta_t) * 0.001; let angle = 0.5 * time; let c = cos(angle); let s = sin(angle); // Rotation around Y axis return mat4x4f( vec4f( c, 0.0, s, 0.0), vec4f(0.0, 1.0, 0.0, 0.0), vec4f(-s, 0.0, c, 0.0), vec4f(0.0, 0.0, 0.0, 1.0) ); } // functions to perform transforms fn identity_matrix() -> mat4x4f { return mat4x4f( vec4f(1.0, 0.0, 0.0, 0.0), vec4f(0.0, 1.0, 0.0, 0.0), vec4f(0.0, 0.0, 1.0, 0.0), vec4f(0.0, 0.0, 0.0, 1.0) ); } fn inverse_affine(m: mat4x4f) -> mat4x4f { let r0 = m[0].xyz; let r1 = m[1].xyz; let r2 = m[2].xyz; let c0 = cross(r1, r2); let c1 = cross(r2, r0); let c2 = cross(r0, r1); let det = dot(r0, c0); let inv_det = 1.0 / det; let inv_r0 = c0 * inv_det; let inv_r1 = c1 * inv_det; let inv_r2 = c2 * inv_det; let t = vec3f(m[3].x, m[3].y, m[3].z); let inv_t = vec3f( -dot(inv_r0, t), -dot(inv_r1, t), -dot(inv_r2, t) ); return mat4x4f( vec4f(inv_r0, 0.0), vec4f(inv_r1, 0.0), vec4f(inv_r2, 0.0), vec4f(inv_t, 1.0) ); } fn ray_to_local_recursive(ray: ray_struct, obj_index: u32) -> ray_struct { var m = identity_matrix(); var current = i32(obj_index); while (current != -1) { let entry = xform_array[current]; var local_transform = entry.transform; if (entry.animated > 0) { let anim = animation_transform(tick, delta_t); local_transform = anim * local_transform; } m = local_transform * m; current = entry.parent; } let world_to_local = inverse_affine(m); let local_origin = (world_to_local * vec4f(ray.origin, 1.0)).xyz; let local_dir = normalize((world_to_local * vec4f(ray.direction, 0.0)).xyz); return ray_struct(local_origin, local_dir); } fn generate_ray(i : u32, j : u32) -> ray_struct { var ray : ray_struct; // 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 pixel_center = viewport.origin + ( (f32(i) + 0.5) * image.pixel_width ) * camera.basis.xhat + ( (f32(j) + 0.5) * image.pixel_height ) * camera.basis.yhat; ray.origin = pixel_center; ray.direction = normalize(pixel_center - camera.origin); return ray; } `39:T880,### Intersect Objects The generated ${spancolor(ray_color, "ray")} will be tested against each object in the scene via calls to `trace`. `trace` will call the appropriate `intersect_x` function, a subset of which you will implement. The intersection functions return a `hit_info : hit_info_struct`, which provides the information about the intersection: - `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. Essentially, the `intersect_x` functions populate the values of the `hit_info` struct appropriately. **Note**, the ${spancolor(ray_color, "ray")} is specified in *global coordinates* but intersections are done in the object's *local coordinate* system, so you have to apply the appropriate transform(s), possibly including parent transforms. Transforms are stored in the `xform_array : array` buffer, each being an `xform_entry`: - `xform_entry.object : i32` : The index of the object for whose transform we are using. - `xform_entry.parent : i32`: The index of the parent for this object. Used to find the parent transform. If set to -1, then the parent is the global coordinate system and no parent transform is needed. - `xform_entry.animated: u32`: Is the transform animated? If so, use the `tick` variable to determine how many milliseconds has passed since the last frame and update the transform somehow. - `xform_entry.transform : mat4x4f` : The parent-to-local transform for this object. **Also note**, if doing the option to use transforms to place your sphere/box/etc. instead of using the previous intersection methods, you create that final parent-to-local transform in the intersection function. Be sure to use the right transform (e.g., if your sphere has a radius of 2 in *parent* coordinates, then we scale by 0.5 when going parent to child and test against a sphere of radius 1; correct the other parameters similarly).3a:T537,ellipse_src = ` fn intersect_ellipse(ray : ray_struct, ellipse : ellipse_struct) -> hit_info_struct { var hit_info = populate_hit(ellipse.object_id); hit_info.valid = false; hit_info.object_id = ellipse.object_id; let center = ellipse.center; let radii = ellipse.radii; let translated_origin = ray.origin - center; let scaled_origin = translated_origin / radii; let scaled_dir = normalize(ray.direction / radii); var sphere_ray : ray_struct; sphere_ray.origin = scaled_origin; sphere_ray.direction = scaled_dir; var unit_sphere : sphere_struct; unit_sphere.center = vec3f(0.0, 0.0, 0.0); unit_sphere.radius = 1.0; unit_sphere.object_id = ellipse.object_id; let sphere_hit = intersect_sphere(sphere_ray, unit_sphere); if (sphere_hit.valid) { hit_info.valid = true; hit_info.distance = sphere_hit.distance; hit_info.object_id = ellipse.object_id; // Transform hit position from sphere space back to world space let local_hit = sphere_ray.origin + sphere_hit.distance * sphere_ray.direction; let world_hit = center + local_hit * radii; // Compute world-space normal using inverse transpose of scale let local_normal = normalize(local_hit); let world_normal = normalize(local_normal / radii); hit_info.normal = world_normal; } return hit_info; } `3b:T605,box_src = ` fn intersect_box(global_ray : ray_struct, box : box_struct) -> hit_info_struct { let ray = ray_to_local_recursive(global_ray, box.object_id); var hit_info = populate_hit(box.object_id); let box_min = box.origin; let box_max = box.origin + box.dimensions; var tmin = -1e10; var tmax = 1e10; for (var i = 0; i < 3; i = i + 1) { let origin_component = ray.origin[i]; let direction_component = ray.direction[i]; let min_component = box_min[i]; let max_component = box_max[i]; if (abs(direction_component) < 1e-6) { if (origin_component < min_component || origin_component > max_component) { return hit_info; } } else { let inv_d = 1.0 / direction_component; var t0 = (min_component - origin_component) * inv_d; var t1 = (max_component - origin_component) * inv_d; if (t0 > t1) { let temp = t0; t0 = t1; t1 = temp; } tmin = max(tmin, t0); tmax = min(tmax, t1); if (tmax < tmin) { return hit_info; } } } if (tmin < 0.0) { return hit_info; } hit_info.valid = true; hit_info.distance = tmin; let hit_point = ray.origin + tmin * ray.direction; var normal = vec3f(0.0, 0.0, 0.0); let epsilon = 1e-3; for (var i = 0; i < 3; i = i + 1) { if (abs(hit_point[i] - box_min[i]) < epsilon) { normal[i] = -1.0; } else if (abs(hit_point[i] - box_max[i]) < epsilon) { normal[i] = 1.0; } } hit_info.normal = normal; return hit_info; } `3c:T500,{ // Add xform bulder events viewof add_rot.addEventListener("submit", (event) => { viewof xform_sequence.children[3].value = viewof xform_sequence.children[3].value.trim().concat(" R " + viewof add_rot.value); viewof xform_sequence.dispatchEvent(new Event("input", {bubbles: true})); viewof add_rot.value = ""; viewof add_rot.dispatchEvent(new Event("input", {bubbles: true})); }); viewof add_translation.addEventListener("submit", (event) => { viewof xform_sequence.children[3].value = viewof xform_sequence.children[3].value.trim().concat(" T " + viewof add_translation.value); viewof xform_sequence.dispatchEvent(new Event("input", {bubbles: true})); viewof add_translation.value = ""; viewof add_translation.dispatchEvent(new Event("input", {bubbles: true})); }); viewof add_scale.addEventListener("submit", (event) => { viewof xform_sequence.children[3].value = viewof xform_sequence.children[3].value.trim().concat(" S " + viewof add_scale.value); viewof xform_sequence.dispatchEvent(new Event("input", {bubbles: true})); viewof add_scale.value = ""; viewof add_scale.dispatchEvent(new Event("input", {bubbles: true})); }); return html`Added transform builder events.` }3d:[] 2f:{"id":"efaedfb286359573","slug":null,"title":"Assignment 3: Transforms","thumbnail":"0b98f589f14068a70eb110e5dbf5e41b9d254f7cb1d08b8cf9dc7ba1d7fe3c31","access_level":"public","create_time":"$D2025-11-01T20:17:18.790Z","update_time":"$D2025-11-03T23:07:38.321Z","view_time":null,"first_public_time":"$D2025-11-03T23:14:20.962Z","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":935,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456442ccbbc5348","login":"chase-ueltschey","name":"Chase Ueltschey","avatar_url":"https://avatars-next.observableusercontent.com/90b73e3d72625a10a45a70e8329028b0130e966f862ed65eb98c1478ad4ea7c6","tier":null}],"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":"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":0,"collection":null,"type":"notebook","body":{"title":"Assignment 3: Transforms","cells":[{"id":0,"value":"# Assignment 3: Transforms","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 build the scene via **transforms**. 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":"render_status","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":375,"value":"#### Viewport & Camera\n\nWe use the same variables as Assignment 1, but this time the camera/viewport parameters are set by the user.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"These values will automatically be uploaded to the shader, but you will have to calculate the rest of the information. See **Code to Modify**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":754,"value":"viewof viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"viewof camera_origin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof focal_length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"viewof up","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"viewof gaze","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"#### Scene\n\nThe scene is described by a text input that specifies the type of shape and information about each. You can edit it directly or use the controls below.\n\nIf your program does not support a specific shape, you can ignore it in your renderer (not test it for intersections).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"viewof scene","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof reset_scene = Inputs.button(\"Reset Scene\", {\n value: null, \n reduce: () => {viewof scene.value = \"\";\n viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof sphere = Inputs.form({x: Inputs.number([-Infinity, Infinity], {\n label: html`Center ${tex`x`}`,\n value: 0}),\n y: Inputs.number([-Infinity, Infinity], {\n label: html`Center ${tex`y`}`,\n value: 0}),\n z: Inputs.number([-Infinity, Infinity], {\n label: html`Center ${tex`z`}`,\n value: 0}),\n r: Inputs.number([0, Infinity], {\n label: html`Radius`,\n value: 1}),\n },\n {template:(inputs) => html`

Insert Sphere

${Object.values(inputs)}

`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":" add_sphere = Inputs.button(\"Add Sphere\", {\n value: null, \n reduce: () => {updateScene(\"sphere \" + sphere.x \n + \" \" + sphere.y \n + \" \" + sphere.z \n + \" \" + sphere.r);\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":" add_plane = Inputs.button(\"Add Plane\", {\n value: null, \n reduce: () => {updateScene(\"plane \" + plane.x \n + \" \" + plane.y \n + \" \" + plane.z \n + \" \" + plane.nx\n + \" \" + plane.ny\n + \" \" + plane.nz);\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":" add_box = Inputs.button(\"Add Box\", {\n value: null, \n reduce: () => {updateScene(\"box \" + box.x \n + \" \" + box.y \n + \" \" + box.z \n + \" \" + box.w\n + \" \" + box.h\n + \" \" + box.d);\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":" add_tri = Inputs.button(\"Add Triangle\", {\n value: null, \n reduce: () => {updateScene(\"tri \" + tri.x0 \n + \" \" + tri.y0 \n + \" \" + tri.z0 \n + \" \" + tri.x1\n + \" \" + tri.y1\n + \" \" + tri.z1\n + \" \" + tri.x2\n + \" \" + tri.y2\n + \" \" + tri.z2);\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"To indicate visually the structure of the scene, its *scene graph* is depicted below and automatically generated when the transform list is updated. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"sg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"viewof xforms","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof reset_xforms = Inputs.button(\"Reset Transforms\", {\n value: null, \n reduce: () => {viewof xforms.value = \"\";\n viewof xforms.dispatchEvent(new Event(\"input\", {bubbles: true}));\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"viewof xform_sequence = Inputs.form({origin: Inputs.number([-1, Infinity], {\n label: html`Scene Object index`,\n placeholder: \"scene_index\"}),\n parent: Inputs.number([-1, Infinity], {\n label: html`Parent index`,\n value: -1}),\n sequence: Inputs.text({value: \"I\",\n placeholder: \"Add transforms\",\n label: \"Sequence\"}),\n animated: Inputs.toggle({label: \"Animated\"}),\n },\n {template:(inputs) => html`

Add Transform

${Object.values(inputs)}

`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"#### Build Sequence","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":804,"value":"viewof add_rot = Inputs.text({value: \"\",\n placeholder: \"axis_x axis_y axis_z angle\",\n label: \"Add Rotation\",\n pattern: \"(\\\\d{1,}(\\.\\\\d*)?\\\\s+){3}\\\\d{1,}(\\.\\\\d*)?\",\n submit: \"Add\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"viewof add_translation = Inputs.text({value: \"\",\n placeholder: \"x y z\",\n label: \"Add Translation\",\n pattern: \"(\\\\d{1,}(\\.\\\\d*)?\\\\s+){2}\\\\d{1,}(\\.\\\\d*)?\",\n submit: \"Add\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"viewof add_scale = Inputs.text({value: \"\",\n placeholder: \"scale\",\n pattern: \"\\\\d{1,}(\\.\\\\d*)?\",\n label: \"Add Scale\",\n submit: \"Add\"})","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":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"$37","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 (using non-hard coded values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$39","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)`). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"sphere_src = `\nfn intersect_sphere(ray_global : ray_struct, sphere : sphere_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, sphere.object_id);\n var hit_info = populate_hit(sphere.object_id);\n\n let oc = ray.origin - sphere.center;\n let a = 1.0; // ray.direction is normalized\n let b = 2.0 * dot(oc, ray.direction);\n let c = dot(oc, oc) - sphere.radius * sphere.radius;\n\n let discriminant = b * b - 4.0 * a * c;\n\n if (discriminant < 0.0) {\n return hit_info;\n }\n\n let sqrt_disc = sqrt(discriminant);\n let t1 = (-b - sqrt_disc) / (2.0 * a);\n let t2 = (-b + sqrt_disc) / (2.0 * a);\n\n // Find the closest valid t\n var t = t1;\n if (t < 0.0) {\n t = t2;\n if (t < 0.0) {\n return hit_info;\n }\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize((ray.origin + t * ray.direction) - sphere.center);\n\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"#### Ellipse Intersection\n\nIntersect the given ${spancolor(ray_color, \"ray\")} with an `ellipse` (described by `ellipse.center : vec3f` and `ellipse.radii (vec3f)`). One should use code from `intersect_sphere` after an appropriate transform has been applied (you cannot call `intersect_sphere` directly as it will overwrite the ellipse transform you create here).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":895,"value":"$3a","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))`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"plane_src = `\nfn intersect_plane(ray_global : ray_struct, plane : plane_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, plane.object_id);\n var hit_info = populate_hit(plane.object_id);\n\n let denom = dot(ray.direction, plane.normal);\n\n if (abs(denom) < 1e-6) {\n return hit_info;\n }\n\n let t = dot(plane.point - ray.origin, plane.normal) / denom;\n\n if (t < 0.0) {\n return hit_info;\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize(plane.normal);\n\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","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)`). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"$3b","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)`). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"triangle_src = `\nfn intersect_triangle(ray_global : ray_struct, triangle : triangle_struct) -> hit_info_struct\n{\n let ray = ray_to_local_recursive(ray_global, triangle.object_id);\n var hit_info = populate_hit(triangle.object_id);\n\n let epsilon = 1e-6;\n\n let p0 = triangle.p0;\n let p1 = triangle.p1;\n let p2 = triangle.p2;\n\n let edge1 = p1 - p0;\n let edge2 = p2 - p0;\n\n let h = cross(ray.direction, edge2);\n let a = dot(edge1, h);\n\n if (abs(a) < epsilon) {\n return hit_info;\n }\n\n let f = 1.0 / a;\n let s = ray.origin - p0;\n let u = f * dot(s, h);\n\n if (u < 0.0 || u > 1.0) {\n return hit_info;\n }\n\n let q = cross(s, edge1);\n let v = f * dot(ray.direction, q);\n\n if (v < 0.0 || u + v > 1.0) {\n return hit_info;\n }\n\n let t = f * dot(edge2, q);\n\n if (t < epsilon) {\n return hit_info;\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\n hit_info.normal = normalize(cross(edge1, edge2));\n return hit_info;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"### Set Color\n\nSet the color for the ${spancolor(image_color, \"pixel\")}. Unlike Assignment 1, we will base this upon which object we hit. In addition to the ${spancolor(ray_color, \"ray\")} you used in Assignment 1, you also have access to a `hit_info` variable with the following information:\n- `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.\n- `hit_info.distance (f32)`: If `valid`, then this stores the distance from the `ray.origin` to the hit object.\n- `hit_info.object_id (u32)`: If `valid`, this is the index/id of the hit object.\n\nFor Assignment 3, if there was an intersection, the color should be set to some color that is unique to each object. Otherwise, white should be returned.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"set_color_src = `\n if (hit_info.valid) {\n let id_f = f32(hit_info.object_id);\n // got these values from the internet :)\n color = vec3f(\n fract(sin(id_f * 12.9898) * 43758.5453),\n fract(sin(id_f * 78.233) * 23421.631),\n fract(sin(id_f * 37.719) * 92812.312)\n );\n }\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":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 & Transform Descriptions\n\nSimple functions to synchronize the scene/transform description when we update them (like via the \"Add X\" buttons)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":820,"value":"function updateTransform(value) {\n  viewof xforms.value = viewof xforms.value + (viewof xforms.value == \"\" ? \"\" : \"\\n\") + value;\n  viewof xform_sequence.children[1].value = undefined;  \n  viewof xform_sequence.children[2].value = -1;\n  viewof xform_sequence.children[3].value = \"I\";  \n  viewof xform_sequence.children[4].value = false;  \n  viewof xforms.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  viewof xform_sequence.dispatchEvent(new Event(\"input\", {bubbles: true}));  \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"$3c","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, render_status, viewof viewport, viewof camera_origin, viewof focal_length, viewof up, viewof gaze, viewof scene, render, sg, viewof xforms,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, ellipse_src as ellipse_src, plane_src as plane_src, box_src as box_src, triangle_src as triangle_src, set_color_src as set_color_src} from \"@cse4413msstate/webgpu-assignment-renderer-chassis\"","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":"$W3d","stdlib":"1","titling":"auto"}}
30:"$2f:body"