35:null 36:["$","title",null,{"children":"Assignment 1: WebGPU Tracer Setup | Introduction to Computer Graphics MSState | Observable"}] 3c:T47a,## 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: - Assuming a square viewport with a width and height of 2 and a camera 10 units from the origin along ${tex`\hat{\mathrm{z}}`} (at ${tex`[0, 0, 10]`}), generate a ray that goes through the eye to a given pixel's center. - Use 10 times the generated ray's direction vector to set the color of that pixel, ignoring the ${tex`\textcolor{${z_color}}{z}`} component. I.e., if the normalized direction vector is ${tex`[0.05, 0.05, -0.99]`} after normalization, set the color to ${tex`[0.5, 0.5, 0]`} (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!**3d:Tae6,### Finish Camera & Viewport Generation From the assignment, we know several things about the viewport and the camera set-up: - 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 hard coded for the assignment. You will use these to calculate the following values: - `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")}.3e:[] 3a:{"id":"b21567cb5f9f1093","slug":"assignment-1-web-gpu-tracer-setup/4","title":"Assignment 1: WebGPU Tracer Setup","thumbnail":"307e46f811d8498fe6ee698f53a439f50a6fa6db8ea981aa229cca791fd57017","access_level":"public","create_time":"$D2026-09-10T14:43:57.717Z","update_time":"$D2026-09-10T14:43:57.717Z","view_time":null,"first_public_time":"$D2026-09-10T14:45:33.372Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"education_2026","bio":"Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar."},"version":451,"publish_version":451,"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,"bio":""}],"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 1: WebGPU Tracer Setup","cells":[{"id":0,"value":"# Assignment 1: WebGPU Tracer Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof gpu","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"render_button = Inputs.button(\"Render\", {\n value: null, \n width: ewidth + \"px\",\n reduce: () => {render();\n return null; }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"render_status","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"error_log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"## Code to Modify\n\nBelow are the WGSL segments you must modify as specified in the assignment. Refer to the Canvas for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"cam_view_update_src = `\ncamera.basis.zhat = normalize(-camera.gaze);\ncamera.basis.xhat = normalize(cross(camera.up, camera.basis.zhat));\ncamera.basis.yhat = cross(camera.basis.zhat, camera.basis.xhat);\n\nlet center = camera.origin + camera.f * camera.gaze;\nviewport.origin = center\n - (viewport.width * 0.5) * camera.basis.xhat\n + (viewport.height * 0.5) * camera.basis.yhat; // top-left corner\n\nimage.pixel_width = viewport.width / f32(image.width);\nimage.pixel_height = viewport.height / f32(image.height);\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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},0]`} 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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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. 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"set_color_src = `\n let d = ray.direction * 10.0;\ncolor = vec3f(abs(d.x), abs(d.y), 0.0);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### Image Size\n\nThe ${spancolor(image_color,\"image\")} size is initially determined by the web page; the 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"ewidth = Math.min(width,600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Implementation\n\nHere are all the parts that you do not need to modify; these set up the WebGPU context, import libraries, etc. You may experiment changing these values, but things might break!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### WebGPU Initialization & Pipeline Creation\n\nWe initialize WebGPU if supported and then create a render pipeline as needed (when pipeline constants change).\n\nWrite-to-canvas info from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture \"WebGPU Storage Textures: Canvas as a Storage Texture\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"#### Adapter\n\nCreate the WebGPU adapter if we have it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"adapter = await navigator.gpu?.requestAdapter();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"### WebGPU Shader Chassis\n\nWe use a common base for the assignments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"import {viewof gpu, render_status, 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, set_color_src as set_color_src} from \"@cse4413msstate/webgpu-assignment-renderer-chassis\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"### Color Constants\n\nWe use a lot of colors; define constants to use for them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3b:"$3a:body"