23:null 24:["$","title",null,{"children":"Assignment 2: Modelling | Introduction to Computer Graphics MSState | Observable"}] 29: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)}

`})2a: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)}

`})2b: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)}

`})2c:[] 27:{"id":"110f6d8af5abe5eb","slug":"assignment-2-modelling/3","title":"Assignment 2: Modelling","thumbnail":"29fe6fe521123e4f5e5a34f069b7081c215f348e6bfe9926cb6122cafc76b7c1","access_level":"public","create_time":"$D2026-09-30T14:10:04.033Z","update_time":"$D2026-09-30T14:38:46.607Z","view_time":null,"first_public_time":"$D2026-10-01T15:14:38.467Z","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"},"version":773,"publish_version":773,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b455a76d0640493","login":"cannon-cutler","name":"Cannon, Cutler","avatar_url":"https://avatars-next.observableusercontent.com/3d4598abdecae7580d3d067983c6119820a4e517717f98060883296f400c1d3d","tier":null}],"members":[{"type":"individual","id":"2b455a76d0640493","login":"cannon-cutler","name":"Cannon, Cutler","avatar_url":"https://avatars-next.observableusercontent.com/3d4598abdecae7580d3d067983c6119820a4e517717f98060883296f400c1d3d","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 2: Modelling","cells":[{"id":0,"value":"# Assignment 2: Modelling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"toc({\n headers: \"h2,h3\",\n title: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Instructions\n\nIn this assignment, you will model aspects of a scene by setting up the camera and viewport and rendering different types of objects; you may copy the relevant sections from your previous implementation to this notebook as needed. Render the closest supported object hit with some random color determined by you (should be different for each object). 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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof gpu","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"render_status","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"error_log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"viewof viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"viewof camera_origin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof focal_length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof up","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"viewof gaze","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"viewof scene","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"### Create Camera & Viewport\n\nReuse your code from Assignment 1 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- `image.pixel_width : f32`: The width of an individual pixel.\n- `image.pixel_height : f32`: 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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"cam_view_update_src = `\n camera.basis.zhat = normalize(-camera.gaze);\n camera.basis.xhat = normalize(cross(camera.up, camera.basis.zhat));\n camera.basis.yhat = cross(camera.basis.zhat, camera.basis.xhat);\n\n let center = camera.origin + camera.f * camera.gaze;\n viewport.origin = center\n - (viewport.width * 0.5) * camera.basis.xhat\n + (viewport.height * 0.5) * camera.basis.yhat;\n\n image.pixel_width = viewport.width / f32(image.width);\n image.pixel_height = viewport.height / f32(image.height);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"### Generate Rays\n\nReuse your code from Assignment 1 (using non-hard coded values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"generate_ray_src = `\nfn generate_ray(i : u32, j : u32) -> ray_struct\n{\n var ray : ray_struct;\n\n let pos = viewport.origin\n + (f32(i) + 0.5) * image.pixel_width * camera.basis.xhat\n - (f32(j) + 0.5) * image.pixel_height * camera.basis.yhat;\n\n ray.origin = pos;\n ray.direction = normalize(pos - camera.origin);\n\n return ray;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"### Intersect Objects\n\nThe generated `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.\n\nThe intersection functions return a `hit_info : hit_info_struct`, which provides the information about the intersection:\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.\nEssentially, the `intersect_x` functions populate the values of the `hit_info` struct appropriately.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"#### Sphere Intersection\n\nIntersect the given `ray` with a `sphere` (described by `sphere.center : vec3f` and `sphere.radius (f32)`). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"sphere_src = `\nfn intersect_sphere(ray : ray_struct, sphere : sphere_struct) -> hit_info_struct\n{\n var hit_info = populate_hit(sphere.object_id);\n\n let oc = ray.origin - sphere.center;\n let a = dot(ray.direction, ray.direction);\n let b = 2.0 * dot(oc, ray.direction);\n let c = dot(oc, oc) - sphere.radius * sphere.radius;\n let disc = b * b - 4.0 * a * c;\n\n if (disc < 0.0) {\n return hit_info;\n }\n\n let sqrt_disc = sqrt(disc);\n var t = (-b - sqrt_disc) / (2.0 * a);\n if (t < 0.0) {\n t = (-b + sqrt_disc) / (2.0 * a);\n }\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"#### Plane Intersection\n\nIntersect the given `ray` with a `plane` (described by `plane.point : vec3f` and `plane.normal (vec3f))`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"plane_src = `\nfn intersect_plane(ray : ray_struct, plane : plane_struct) -> hit_info_struct\n{\n var hit_info = populate_hit(plane.object_id);\n\n let denom = dot(plane.normal, ray.direction);\n if (approx_equal(denom, 0.0)) {\n return hit_info;\n }\n\n let t = dot(plane.point - ray.origin, plane.normal) / denom;\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"#### Box Intersection\n\nIntersect the given `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","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 let box_min = box.origin;\n let box_max = box.origin + box.dimensions;\n\n let inv_dir = vec3f(1.0) / ray.direction;\n\n let t0s = (box_min - ray.origin) * inv_dir;\n let t1s = (box_max - ray.origin) * inv_dir;\n\n let t_smaller = min(t0s, t1s);\n let t_larger = max(t0s, t1s);\n\n let t_min = max(max(t_smaller.x, t_smaller.y), t_smaller.z);\n let t_max = min(min(t_larger.x, t_larger.y), t_larger.z);\n\n if (t_max < t_min || t_max < 0.0) {\n return hit_info;\n }\n\n var t = t_min;\n if (t < 0.0) {\n t = t_max;\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"#### Triangle Intersection\n\nIntersect the given `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","providerMetadata":"$undefined","attachments":"$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 EPSILON = 0.0000001;\n\n let edge1 = triangle.p1 - triangle.p0;\n let edge2 = triangle.p2 - triangle.p0;\n let h = cross(ray.direction, edge2);\n let a = dot(edge1, h);\n\n if (approx_equal(a, 0.0)) {\n return hit_info;\n }\n\n let f = 1.0 / a;\n let s = ray.origin - triangle.p0;\n let u = f * dot(s, h);\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 if (v < 0.0 || u + v > 1.0) {\n return hit_info;\n }\n\n let t = f * dot(edge2, q);\n if (t < EPSILON) {\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"### Set Color\n\nSet the color for the pixel. Unlike Assignment 1, we will base this upon which object we hit. In addition to the `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 2, 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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"set_color_src = `\n color = vec3f(1.0, 1.0, 1.0);\n\n if (hit_info.valid) {\n let id = f32(hit_info.object_id) + 1.0;\n color = vec3f(\n fract(sin(id * 12.9898) * 43758.5453),\n fract(sin(id * 78.2330) * 43758.5453),\n fract(sin(id * 45.1640) * 43758.5453)\n );\n }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":646,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### Image Size\n\nThe image size is initially determined by the web page; the effective width is initialized with the width or 600px (whichever is smaller) and the initial height is set to the same value. If you wish to change these, you may do so here. These values are stored as `width : u32` and `height : u32` in the renderer shader.\n\nNote: If you change this and then do not change the viewport to have proportional dimensions, you will get squishing/stretching. Not a big deal for this first Assignment, but keep this in mind for the future!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"### Update Scene\n\nA simple function to synchronize the scene description when we update it outside (like the \"Add X\" buttons)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"### WebGPU Shader Chassis\n\nWe use a common base for the assignments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"import {viewof gpu, render_status, viewof viewport, viewof camera_origin, viewof focal_length, viewof up, viewof gaze, viewof scene, render, 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} from \"@cse4413msstate/webgpu-assignment-renderer-chassis\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"### TOC Generation \n\nGenerates a table of contents of easy navigation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1"}} 28:"$27:body"