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: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).38:Tb18,sphere_src = ` fn intersect_sphere(ray : ray_struct, sphere : sphere_struct) -> hit_info_struct { var hit_info = populate_hit(sphere.object_id); hit_info.valid = false; hit_info.distance = 1e9; // === 1) Compose parent→local transform === var M = xform_array[sphere.object_id].transform; var parent = xform_array[sphere.object_id].parent; loop { if (parent == -1) { break; } let px = xform_array[parent]; M = px.transform * M; parent = px.parent; } // === 2) Apply animation if enabled === if (xform_array[sphere.object_id].animated == 1u) { let time = f32(tick) * f32(delta_t) * 0.001; // Example animation: orbit or oscillation let anim_angle = 0.5 * time; let anim_R = mat4x4( vec4(cos(anim_angle), 0.0, -sin(anim_angle), 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(sin(anim_angle), 0.0, cos(anim_angle), 0.0), vec4(0.0, 0.0, 0.0, 1.0) ); // Optional: add a bobbing motion on Y let anim_T = mat4x4( vec4(1.0, 0.0, 0.0, 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), vec4(0.0, 0.2 * sin(time), 0.0, 1.0) ); // Combine animation with existing transform M = M * anim_R * anim_T; } // === 3) Compute inverse of M === let r0 = M[0]; let r1 = M[1]; let r2 = M[2]; let r3 = M[3]; let R = mat3x3( vec3(r0.x, r0.y, r0.z), vec3(r1.x, r1.y, r1.z), vec3(r2.x, r2.y, r2.z) ); let Rinv = transpose(R); let t = vec3(r3.x, r3.y, r3.z); let tinv = -(Rinv * t); let Minv = mat4x4( vec4(Rinv[0], 0.0), vec4(Rinv[1], 0.0), vec4(Rinv[2], 0.0), vec4(tinv, 1.0) ); // === 4) Transform ray into local space === let local_origin = (Minv * vec4(ray.origin, 1.0)).xyz; let local_dir = normalize((Minv * vec4(ray.direction, 0.0)).xyz); // === 5) Sphere intersection (unit sphere at origin) === let a = dot(local_dir, local_dir); let b = 2.0 * dot(local_origin, local_dir); let c = dot(local_origin, local_origin) - sphere.radius * sphere.radius; let disc = b * b - 4.0 * a * c; if (disc < 0.0) { return hit_info; } let sqrt_d = sqrt(disc); let t0 = (-b - sqrt_d) / (2.0 * a); let t1 = (-b + sqrt_d) / (2.0 * a); var t_hit = t0; if (t_hit < 0.0) { t_hit = t1; } if (t_hit < 0.0) { return hit_info; } // === 6) Compute hit data === hit_info.valid = true; hit_info.distance = t_hit; let hit_local = local_origin + t_hit * local_dir; let n_local = normalize(hit_local - vec3(0.0)); // center at origin let n_world = normalize(R * n_local); hit_info.normal = n_world; return hit_info; } `39:T9e5,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.distance = 1e9; // === 1) Get the base model transform === var model = xform_array[ellipse.object_id].transform; // === 2) Apply animation if flagged === if (xform_array[ellipse.object_id].animated == 1u) { let time = f32(tick) * f32(delta_t) * 0.001; // adjust speed as needed let angle = time; // Rotate around Y-axis let cosA = cos(angle); let sinA = sin(angle); let rotY = mat4x4f( vec4(cosA, 0.0, -sinA, 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(sinA, 0.0, cosA, 0.0), vec4(0.0, 0.0, 0.0, 1.0) ); // Apply rotation to model transform model = model * rotY; } // === 3) Build inverse model matrix (world → local) === let r0 = model[0]; let r1 = model[1]; let r2 = model[2]; let r3 = model[3]; let R = mat3x3( vec3(r0.x, r0.y, r0.z), vec3(r1.x, r1.y, r1.z), vec3(r2.x, r2.y, r2.z) ); let Rinv = transpose(R); let t = vec3(r3.x, r3.y, r3.z); let tinv = -(Rinv * t); let Minv = mat4x4f( vec4(Rinv[0], 0.0), vec4(Rinv[1], 0.0), vec4(Rinv[2], 0.0), vec4(tinv, 1.0) ); // === 4) Transform ray into local space === let local_origin = (Minv * vec4(ray.origin, 1.0)).xyz; let local_dir = (Minv * vec4(ray.direction, 0.0)).xyz; // === 5) Ellipse as scaled sphere (use radii as scale) === let inv_scale = 1.0 / ellipse.radii; let scaled_origin = (local_origin - ellipse.center) * inv_scale; let scaled_dir = normalize(local_dir * inv_scale); // === 6) Sphere intersection === let a = dot(scaled_dir, scaled_dir); let b = 2.0 * dot(scaled_origin, scaled_dir); let c = dot(scaled_origin, scaled_origin) - 1.0; let disc = b*b - 4.0*a*c; if (disc < 0.0) { return hit_info; } let sqrt_disc = sqrt(disc); let t0 = (-b - sqrt_disc) / (2.0 * a); let t1 = (-b + sqrt_disc) / (2.0 * a); var t_local = t0; if (t_local < 0.0) { t_local = t1; } if (t_local < 0.0) { return hit_info; } // === 7) Store hit info === hit_info.valid = true; hit_info.distance = t_local; let hit_local = scaled_origin + t_local * scaled_dir; hit_info.normal = normalize(hit_local * inv_scale); return hit_info; } `3a:T8c9,plane_src = ` fn intersect_plane(ray : ray_struct, plane : plane_struct) -> hit_info_struct { var hit_info = populate_hit(plane.object_id); hit_info.valid = false; hit_info.distance = 1e9; // === 1) Compose parent→local matrix === var M = xform_array[plane.object_id].transform; var parent = xform_array[plane.object_id].parent; loop { if (parent == -1) { break; } let px = xform_array[parent]; M = px.transform * M; parent = px.parent; } // === 2) Apply animation if enabled === if (xform_array[plane.object_id].animated == 1u) { let time = f32(tick) * f32(delta_t) * 0.001; // Example animation: gentle rotation around Y axis let anim_angle = 0.5 * time; let anim_R = mat4x4( vec4(cos(anim_angle), 0.0, -sin(anim_angle), 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(sin(anim_angle), 0.0, cos(anim_angle), 0.0), vec4(0.0, 0.0, 0.0, 1.0) ); M = M * anim_R; } // === 3) Compute approximate inverse (local←world) let r0 = M[0]; let r1 = M[1]; let r2 = M[2]; let r3 = M[3]; let R = mat3x3( vec3(r0.x, r0.y, r0.z), vec3(r1.x, r1.y, r1.z), vec3(r2.x, r2.y, r2.z) ); let Rinv = transpose(R); let t = vec3(r3.x, r3.y, r3.z); let tinv = -(Rinv * t); let Minv = mat4x4( vec4(Rinv[0], 0.0), vec4(Rinv[1], 0.0), vec4(Rinv[2], 0.0), vec4(tinv, 1.0) ); // === 4) Transform ray to local space === let local_origin = (Minv * vec4(ray.origin, 1.0)).xyz; let local_dir = (Minv * vec4(ray.direction, 0.0)).xyz; // === 5) Local plane definition let n_local = normalize(plane.normal); let d = -dot(n_local, plane.point); let denom = dot(n_local, local_dir); if (abs(denom) < 1e-6) { return hit_info; } let t_hit = -(dot(n_local, local_origin) + d) / denom; if (t_hit < 0.0) { return hit_info; } // === 6) Compute hit info === let hit_local = local_origin + t_hit * local_dir; let n_world = normalize(R * n_local); hit_info.valid = true; hit_info.distance = t_hit; hit_info.normal = n_world; return hit_info; } `3b:Td89,box_src = ` fn intersect_box(ray : ray_struct, box : box_struct) -> hit_info_struct { var hit_info = populate_hit(box.object_id); hit_info.valid = false; hit_info.distance = 1e9; // === 1) Compose parent→local matrix === var M = xform_array[box.object_id].transform; var parent = xform_array[box.object_id].parent; loop { if (parent == -1) { break; } let px = xform_array[parent]; M = px.transform * M; parent = px.parent; } // === 2) Compute approximate inverse (local←world) let r0 = M[0]; let r1 = M[1]; let r2 = M[2]; let r3 = M[3]; let R = mat3x3( vec3(r0.x, r0.y, r0.z), vec3(r1.x, r1.y, r1.z), vec3(r2.x, r2.y, r2.z) ); let Rinv = transpose(R); let t = -vec3(r3.x, r3.y, r3.z); let tinv = -(Rinv * t); let Minv = mat4x4( vec4(Rinv[0], 0.0), vec4(Rinv[1], 0.0), vec4(Rinv[2], 0.0), vec4(tinv, 1.0) ); // === 3) Transform ray to local space === let local_origin = (Minv * vec4(ray.origin, 1.0)).xyz; let local_dir = (Minv * vec4(ray.direction, 0.0)).xyz * vec3(-1.0, 1.0, 1.0); // === 4) Extract local scale from M === // Each column’s length corresponds to scale along that local axis let scale_vec = vec3( length(vec3(M[0].x, M[1].x, M[2].x)), length(vec3(M[0].y, M[1].y, M[2].y)), length(vec3(M[0].z, M[1].z, M[2].z)) ); // === 5) Compute box bounds in object-local space === // origin from menu + scaled dimensions let half_dim = 0.5 * box.dimensions * scale_vec; let min_corner = box.origin - half_dim; let max_corner = box.origin + half_dim; // === 6) Slab test === var tmin = -1e9; var tmax = 1e9; for (var i = 0u; i < 3u; i = i + 1u) { let o = local_origin[i]; let d = local_dir[i]; let mn = min_corner[i]; let mx = max_corner[i]; if (abs(d) < 1e-6) { if (o < mn || o > mx) { return hit_info; } } else { let t1 = (mn - o) / d; let t2 = (mx - o) / d; let t_near = min(t1, t2); let t_far = max(t1, t2); tmin = max(tmin, t_near); tmax = min(tmax, t_far); if (tmin > tmax) { return hit_info; } } } if (tmax < 0.0) { return hit_info; } var t_hit = tmin; if (t_hit < 0.0) { t_hit = tmax; if (t_hit < 0.0) { return hit_info; } } hit_info.valid = true; hit_info.distance = t_hit; // === 7) Compute hit point and normal === let hit_local = local_origin + t_hit * local_dir; var n_local = vec3(0.0); let eps = 1e-3; if (abs(hit_local.x - min_corner.x) < eps) { n_local = vec3(-1,0,0); } else if (abs(hit_local.x - max_corner.x) < eps) { n_local = vec3(1,0,0); } else if (abs(hit_local.y - min_corner.y) < eps) { n_local = vec3(0,-1,0); } else if (abs(hit_local.y - max_corner.y) < eps) { n_local = vec3(0,1,0); } else if (abs(hit_local.z - min_corner.z) < eps) { n_local = vec3(0,0,-1); } else if (abs(hit_local.z - max_corner.z) < eps) { n_local = vec3(0,0,1); } // Transform normal back to world space (no translation) let n_world = normalize(R * n_local); hit_info.normal = n_world; 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":"250dadb5487cbe0e","slug":null,"title":"Assignment 3: Transforms","thumbnail":"0b98f589f14068a70eb110e5dbf5e41b9d254f7cb1d08b8cf9dc7ba1d7fe3c31","access_level":"public","create_time":"$D2025-11-07T00:17:30.195Z","update_time":"$D2025-12-08T12:45:50.456Z","view_time":null,"first_public_time":"$D2025-12-04T22:20:09.837Z","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":1015,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e34e9e2dc9adc86e","login":"wyatt-fisher","name":"Wyatt Fisher","avatar_url":"https://avatars-next.observableusercontent.com/0c73314ad4a2be7d0f2e620d3517845b38e9464beebba9431b798f1ab2edf904","tier":null}],"members":[{"type":"individual","id":"9764bbca81add4da","login":"smink-karl","name":"Smink, Karl","avatar_url":"https://avatars-next.observableusercontent.com/0f1bce0b0fdc3f0e7e857b13a3ed72d7a7aeb5cf144c7b7e0bd2f2fbff65932c","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":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":"cam_view_update_src = `\n // TODO: Update the following values using image, camera, and viewport:\n // - camera.basis (Basis): The three basis vectors for the camera and viewport space\n // - viewport.origin (vec3f): The viewport's origin\n // - image.pixel_width (f32): The width of an individual pixel\n // - image.pixel_height (f32): The height of an individual pixel\n\nlet zhat = normalize(camera.gaze);\nlet xhat = normalize(cross(camera.up, zhat)); // swapped order\nlet yhat = cross(zhat, xhat); // recompute yhat\ncamera.basis.xhat = xhat;\ncamera.basis.yhat = yhat;\ncamera.basis.zhat = zhat;\nlet viewport_center = camera.origin + zhat * camera.f;\nviewport.origin = viewport_center\n - 0.5 * viewport.width * xhat\n - 0.5 * viewport.height * yhat;\nimage.pixel_width = viewport.width / f32(image.width);\nimage.pixel_height = viewport.height / f32(image.height);\n\n\n`","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":"generate_ray_src = `\n// TODO: If you want to calculate any constants to use elsewhere, do so here.\n\n// The function to generate the rays. Returns both the ray origin on the viewport\n// and the ray direction.\n//\n// ray has two elements:\n// - ray.origin (vec3f): The ray's origin on the viewport (at the pixel center)\n// - ray.direction (vec3f): The ray's direction. Should be normalized.\nfn generate_ray(i : u32, j : u32) -> ray_struct\n{\n var ray : ray_struct;\n\n let u = (f32(i) + 0.5) * image.pixel_width;\n let v = (f32(j) + 0.5) * image.pixel_height;\n\n let pixel_pos = viewport.origin + camera.basis.xhat * u + camera.basis.yhat * v;\n\n ray.origin = camera.origin;\n ray.direction = normalize(pixel_pos - camera.origin);\n\n return ray;\n}\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$37","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":"$38","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":"$39","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":"$3a","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 : ray_struct, triangle : triangle_struct) -> hit_info_struct\n{\n var hit_info = populate_hit(triangle.object_id);\n\n let e1 = triangle.p1 - triangle.p0;\n let e2 = triangle.p2 - triangle.p0;\n let pvec = cross(ray.direction, e2);\n let det = dot(e1, pvec);\n\n if (abs(det) < 1e-6) {\n return hit_info;\n }\n\n let inv_det = 1.0 / det;\n let tvec = ray.origin - triangle.p0;\n let u = dot(tvec, pvec) * inv_det;\n if (u < 0.0 || u > 1.0) {\n return hit_info;\n }\n\n let qvec = cross(tvec, e1);\n let v = dot(ray.direction, qvec) * inv_det;\n if (v < 0.0 || u + v > 1.0) {\n return hit_info;\n }\n\n let t = dot(e2, qvec) * inv_det;\n if (t < 0.0) {\n return hit_info;\n }\n\n hit_info.valid = true;\n hit_info.distance = t;\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 // TODO: Set the color (a vec3f). The shader variables ray & hit_info holds the current\n // ray's data.\n // The default color (which you will replace if an object was hit) is white\n if (hit_info.valid) {\n switch (hit_info.object_id) {\n case 0u: {\n color = vec3f(1.0, 0.0, 0.0); // red\n}\n case 1u: {\n color = vec3f(0.0, 1.0, 0.0); // green\n}\n case 2u: {\n color = vec3f(0.0, 0.0, 1.0); // blue\n}\n case 3u: {\n color = vec3f(1.0, 1.0, 0.0); // yellow\n}\n case 4u: {\n color = vec3f(1.0, 0.0, 1.0); // magenta\n}\n default: {\n color = vec3f(\n fract(f32(hit_info.object_id) * 0.37),\n fract(f32(hit_info.object_id) * 0.73),\n fract(f32(hit_info.object_id) * 0.53)\n );\n }\n }\n } else {\n color = vec3f(1.0, 1.0, 1.0);\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"