2e:null 2f:["$","title",null,{"children":"tjp349 Assignment 1: WebGPU Tracer Setup | Introduction to Computer Graphics MSState | Observable"}] 34:T4a6,## Instructions In this quick assignment, you will test your setup for our WebGPU ray tracing shader. This notebook creates a graphics context and has a single shader that sets the color of each pixel (currently white). For the assignment, you must do the following in the shader: - You are provided (and can edit) the viewport its width and height, and a camera 10 units from the origin along ${tex`\color{${z_color}}\hat{z}`} (at [0,0,10]), generate a ray that goes through the eye to a given pixel's center. You must handle updating the relevant variables when these variables are updated. - Use the generated ray's offset vector (normalized) to set the color of that pixel ignoring the largest component. I.e., if the offset is v=[0.5,0.5,−10] then the color should be [0.5,0.5,0] after normalization (note we make sure all values are positive). Details on what to do are in the **Code to Modify** section below. **Remember to fork this assignment!**35:Tae2,### Finish Camera & Viewport Generation The default values for the viewport and the camera are: - The **camera position** ${tex`\mathrm{fp}`} (the focal point; `camera.origin : vec3f` in the shader) is at ${tex`[0, 0, 10]`}. - The** camera's vertical orientation **direction ${tex`\mathbf{up}`} (`camera.up : vec3f` in the shader) is along ${tex`\textcolor{${y_color}}{+\hat{y}}=[0, 1, 0]`}. - The **camera's gaze** ${tex`\mathbf{{g}}`} (the direction the ${spancolor(camera_color,"camera")} is facing; `camera.gaze :vec3f` in the shader) is toward ${tex`[0, 0, -1]`} or ${tex`\color{${z_color}}-\hat{z}`}. - The **focal length** ${tex`f`} (the distance of the viewport's center from the camera along the gaze direction; `camera.f : f32` in the shader) is 10. - The **viewport width & height** ${tex`v_w, v_h`} (`viewport.width : f32` and `viewport.height : f32` in the shader respectively) are both 2. These values, along with the resolution of the ${spancolor(image_color,"image")} (its width and height; `image.width : u32` and `image.height : u32` in the shader), are updated by the notebook before rendering. You will use these to calculate the following values in the shader: - `camera.basis`` : Basis`: The **camera's frame**—The three orthogonal vectors describing the camera's 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 `)}`: f32`: The width of an individual ${spancolor(image_color,"pixel")}. - ${spancolor(image_color,`image.pixel_height`)}` : f32`: The height of an individual ${spancolor(image_color,"pixel")}. These calculated values will be used to generate ${spancolor(ray_color,"rays")}.36:[] 32:{"id":"a31e74d3bf4be52e","slug":"tjp349-assignment-1-web-gpu-tracer-setup","title":"tjp349 Assignment 1: WebGPU Tracer Setup","thumbnail":"eb225eeb5eaf9345217231d9b825dcf22ca9fcd14430cef6b2e6ee53249d3efa","access_level":"public","create_time":"$D2026-09-01T18:44:45.360Z","update_time":"$D2026-09-11T18:34:17.889Z","view_time":null,"first_public_time":"$D2026-09-03T15:55:11.896Z","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":489,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1766ecec4d5f418c","login":"timothypepper","name":"Timothy","avatar_url":"https://avatars-next.observableusercontent.com/a20eb8aa22107c2b7a80a99eba8140dfaea1c240d214e27fee92e9280fa8550e","tier":null}],"members":[{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"9764bbca81add4da","login":"smink-karl","name":"Smink, Karl","avatar_url":"https://avatars-next.observableusercontent.com/0f1bce0b0fdc3f0e7e857b13a3ed72d7a7aeb5cf144c7b7e0bd2f2fbff65932c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"tjp349 Assignment 1: WebGPU Tracer Setup","cells":[{"id":0,"value":"# tjp349 Assignment 1: WebGPU Tracer Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"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":"$34","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":302,"value":"render_status","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"error_log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"#### Viewport & Camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"viewof viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"viewof camera_origin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"viewof focal_length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"viewof up","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof gaze","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":116,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"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\n camera.basis.zhat = normalize(camera.gaze);\n camera.basis.yhat = normalize(camera.up);\n camera.basis.xhat = cross(camera.basis.zhat, camera.basis.yhat);\n\n // - viewport.origin (vec3f): The viewport's origin\n\n viewport.origin = camera.origin - ((viewport.width) / 2) * camera.basis.xhat - ((viewport.height) / 2) * camera.basis.yhat + camera.f * camera.basis.zhat;\n\n // - image.pixel_width (f32): The width of an individual pixel\n\n image.pixel_width = viewport.width / f32(image.width);\n\n // - image.pixel_height (f32): The height of an individual pixel\n\n image.pixel_height = viewport.height / f32(image.height);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"### Generate Rays\n\nThe various viewport and camera values you just calculated will be used to generate the starting point of our ${spancolor(ray_color,\"ray\")}—the position ${tex`[\\textcolor{${x_color}}{x},\\textcolor{${y_color}}{y},\\textcolor{${z_color}}{z}]`} on the ${spancolor(viewport_color,\"viewport\")} that corresponds to the ${spancolor(image_color,\"pixel\")} ${tex`[\\textcolor{${u_color}}{i}, \\textcolor{${v_color}}{j}]`}— and the ${spancolor(ray_color,\"ray direction\")} in the `generate_ray` function below.","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 // TODO: Calculate and set the ray.origin and ray.direction\n\n ray.origin = camera.origin;\n\n var pcenter = viewport.origin + ((f32(i) + 0.5) * image.pixel_width * camera.basis.xhat) + ((f32(j) + 0.5) * image.pixel_height * camera.basis.yhat);\n\n ray.direction = normalize(pcenter) - ray.origin;\n\n // The default (which you will replace) is a ray from the origin with no\n // orientation\n\n return ray;\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\")}. It should be the absolute value of the normalized ${spancolor(ray_color,\"ray\")} direction after removing the largest (in absolute) value. The ${spancolor(ray_color,\"ray\")} you calculated in `generate_ray()` above is stored in the variable `ray : ray_struct`.","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 variable ray holds the current\n // ray's data.\n // The default color (which you will replace) is white\n color = vec3f(1,1,1);\n\n var dir = abs(normalize(ray.direction));\n\n if ( dir.x >= dir.y && dir.x >= dir.z) {\n dir.x = 0.0;\n } else if (dir.y >= dir.x && dir.y >= dir.z) {\n dir.y = 0.0;\n } else {\n dir.z = 0.0;\n }\n\n color = normalize(dir);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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 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 ${spancolor(image_color,`image.width : u32`)} and ${spancolor(image_color,`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. 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","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":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":392,"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":394,"value":"import {\n viewof gpu,\n render_status,\n viewof scene,\n render,\n error_log,\n viewof viewport,\n viewof camera_origin,\n viewof focal_length,\n viewof up,\n viewof gaze\n} with {\n ewidth as ewidth,\n height as height,\n adapter as adapter,\n cam_view_update_src as cam_view_update_src,\n generate_ray_src as generate_ray_src,\n set_color_src as set_color_src\n} from \"@cse4413msstate/webgpu-assignment-renderer-chassis\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"### Add Dummy Scene\n\nPipelines requires a scene, so we create one here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"{ \n viewof scene.value = \"dummy\";\n viewof scene.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"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":376,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"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":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"