3e:null 3f:["$","title",null,{"children":"Modelling: Basic Ray Tracing | Introduction to Computer Graphics MSState | Observable"}] 45:T469,ray = { const p = [ewidth*0.375, 20]; const q = [ewidth*0.625, 28]; const n = [ewidth*0.5, 24]; const id = DOM.uid("arrowhead"); return html`

Ray from point ${tex`\color{${object_color}}\mathrm{r_0}`} along vector ${tex`\mathbf{\textcolor{${object_color}}{\hat{d}}}`}.

` }46:T748,sphere_fig = { const id = DOM.uid("sphere"); const id2 = DOM.uid("arrowhead"); let origin = [0.125*ewidth, 64] let offset_len = Math.max(30,0.1*ewidth); const offset = ([x,y], d=offset_len) => add(origin, norm(sub([x,y],origin)).map(i=>i*d)) let target = offset([0.5*ewidth-42, 22]); return html`

A ray intersecting a sphere.

` }47:T5a1,### Ray Casting Rendering Loop The rendering loop for ray casting is straightforward. Using a Javascript-like notation: ~~~javascript for(const pixel of image) { const dir = norm(sub(pixel, eye)); let dist = Number.POSITIVE_INFINITY; let hit = undefined; for(const object of objects) { let dists = intersect(pixel, dir, objects); // Assume returns list of sorted distances if(dists.length > 0 && dists[0] < dist) { hit = object; dist = dists[0]; } } if(dist > 0 && dist < Number.POSITIVE_INFINITY) shade(hit, pixel, dir, dist); } ~~~ Assuming we have a list of `objects` in the scene, we intersect a `ray` from the `pixel` along `dir`; note we must offset the starting point by a small amount along the ray to avoid self-intersection with the image plane if any object is there. Once we find the closest item that is in front of us via a positive `intersection`, we can `shade` the pixel however we wish. This simple loop is hiding a lot of complexity and areas for improvement. Serial testing of intersection is not efficient, as alluded to—ideally, we want to only test a close subset of objects, not all of it. How we shade can be done in many ways, from simple local illumination to more complex, full path tracing. Shooting on one ray per pixel may not be enough to address aliasing effects. But this simple loop is enough to build from, and will be found in every ray caster.48:Te67,{ const id = DOM.uid("arrowhead"); const id2 = DOM.uid("spheres"); let origin = [0.25*ewidth, 128] let offset_len = Math.max(30,0.05*ewidth); let step = 0; let prev_step = 0; const offset = ([x,y], d=offset_len, src=origin) => add(src, norm(sub([x,y],src)).map(i=>i*d)) let target = offset([0.4*ewidth, 69]); console.log(d3.interpolatePurples(1-sphere_signed_distance(origin, [0.5*ewidth,128], 60)/(0.5*ewidth-60)), 1-sphere_signed_distance(origin, [0.5*ewidth,128], 60)/(0.5*ewidth-60)); const fig = html`

Marching along a ${spancolor(ray_color,"ray")}.

` d3.select(fig).select("#dist") .interrupt("march") .transition("march") .ease(d3.easeCubic) .on("start", function march(){ let loc = offset(target,step); if(loc[0] < 0 || loc[0] >= ewidth || loc[1] < 0 || loc[1] >= 256) { step = 0; loc = origin; } const distance = sphere_signed_distance(loc, [0.5*ewidth,128], 60); prev_step = step; if(distance > 1) { if(adapt[0]) { step += distance; } else { step += offset_len; } } else { step = 0; loc = origin; } d3.active(this, "march") .attr("r", distance+60) .attr("stroke", d3.interpolateGreys(1-distance/(0.5*ewidth-60))) .transition("march") .delay(1000) .on("start", march); }); d3.select(fig).select("#pos") .transition("march") .ease(d3.easeLinear) .on("start", function march(){ let loc = offset(target,prev_step); d3.active(this, "march") .attr("cx", loc[0]).attr("cy", loc[1]) .attr("fill", d3.interpolateGreys(1-sphere_signed_distance(loc, [0.5*ewidth,128], 60)/(0.5*ewidth-60))) .transition("march") .delay(1000) .on("start", march); }); invalidation.then(() => d3.select(fig).selectAll("*").transition("march").interrupt()); return fig; }49:T5eb,### Rendering Loop The rendering loop for ray marching is a bit more involved that for ray casting, but works similarly ~~~python for pixel in image: dir = normalize(pixel - eye) traveled_distance, iteration = 0, 0 while traveled_distance < max_distance and iteration < max_iterations: dist, hit = signed_distance(pixel, objects[0]), objects[0] for object in objects[1:]: t = signed_distance(pixel, object) if t < dist: dist, hit = t, object if dist < delta: shade(object, pixel + traveled_distance * dir, -dir) break traveled_distance += dist iteration += 1 ~~~ Given a list of `objects` in the scene, we determine the `signed_distance` of the `pixel`. If we are not in the tested `object` (because the returned value is greater than some `delta`), then we move that distance along our ray and repeat until we are inside an object, exceed some `max_distance` or number of `max_iterations`. If at any point we determine we are in a surface, we `shade` similarly to ray casting. Like ray casting, we perform this looo whenever we need a ray tested: We start at a location, walk the largest distance we can (the closest object distance we found), and repeat until we are inside an object or outside everything. While arguments can be made that the results returned may not be as accurate with respect to ray casting intersections, the cost of calculation is usually cheaper and there will be other benefits as well. We will discuss these in future notes. 4a:[] 43:{"id":"66495924bd51719d","slug":"modelling-basic-ray-tracing","title":"Modelling: Basic Ray Tracing","thumbnail":"d72808fa50919d0d221b2ad0e9ac32f0cf6e8ca7e9b4dbeab3c23460d805f380","access_level":"public","create_time":"$D2025-09-11T13:51:29.944Z","update_time":"$D2025-09-11T15:17:34.796Z","view_time":null,"first_public_time":"$D2025-09-11T14:54:47.828Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"bio":"Scientist, Designer, and Teacher. Assoc Prof of CompSci in visualization at Mississippi State University. Believes information wants to be seen. Loves Python. @dr_tj"}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"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":[{"id":"725ea306122045aa","reply_to_id":null,"content":"Small typo: \"adapative\"","create_time":"$D2025-09-20T11:35:09.301Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Modelling: Basic Ray Tracing","cells":[{"id":0,"value":"# Modelling: Basic Ray Tracing\n\nOutside of polygonal-based rendering, ${spancolor(ray_color,\"ray-based\")} methods are the most common in computer graphics. The idea is that we launch a ${spancolor(ray_color,\"ray\")} from a point ${tex`\\textcolor{${object_color}}{\\mathrm{r_0}}`} along direction ${tex`\\mathbf{\\textcolor{${object_color}}{\\hat{d}}}`} towards the scene geometry. In ray tracing, we do not need to tesselate objects in order to render; instead, we can intersect *analytically* or *implicitly* and get a the interaction directly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$${spancolor(ray_color,\"Ray\")} interactions with ${spancolor(object_color,\"objects\")} occur when we shoot visibility ${spancolor(ray_color,\"rays\")} to see which ${spancolor(object_color,\"object\")} is visible from the ${spancolor(viewport_color,\"viewport\")} or other ${spancolor(object_color,\"object\")} and lighting/shadow ${spancolor(ray_color,\"rays\")} to determine if and how an ${spancolor(object_color,\"object\")} is shaded. With many ${spancolor(object_color,\"objects\")} in the scene, finding these interactions can be costly. We will discuss ways to accelerate these interactions later.\n\nThere are two approaches to solving ray intersections: ray casting and ray marching.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Ray Casting: Analytical\n\nIn ray casting, we solve for the intersection directly via the ray equation and the closed form expression for the shape. For rays, the equation is\n\n${tex.block`\\textcolor{${ray_color}}{\\bullet \\mathrm{r}}\\left(t\\right) = \\textcolor{${ray_color}}{\\bullet \\mathrm{r}_0} + \\textcolor{${ray_color}}{\\hat{\\mathbf{d}}}t`} \n\nThis is a parametric equation where the parameter ${tex`t`} is the signed distance (relative to ${tex`\\|\\textcolor{${ray_color}}{\\hat{\\mathbf{d}}}\\|`}) of the ${spancolor(ray_color,\"ray origin\")} from ${spancolor(object_color,\"the object\")}; positive values mean the object is in front of the ray, negative behind. Here, we demonstrate for a sphere:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"As an example, we can find the intersection between a ${spancolor(object_color,\"sphere\")} and ${spancolor(ray_color,\"ray\")} analytically via \n\n${tex.block`t=-\\color{${ray_color}}\\mathbf{\\hat{d}}\\color{black}\\cdot\\left(\\color{${ray_color}}\\bullet\\mathrm{r_0}\\color{black}-\\color{${object_color}}\\bullet\\mathrm{c}\\right)\\pm\\color{${d3.schemeCategory10[3]}}\\sqrt{\\color{black}\\left(\\color{${ray_color}}\\mathbf{n}\\color{black}\\cdot\\left(\\color{${ray_color}}\\bullet\\mathrm{p}\\color{black}-\\color{${object_color}}\\bullet\\mathrm{c}\\color{black}\\right)\\right)^2-\\left(\\left\\|\\color{${ray_color}}\\bullet\\mathrm{p}\\color{black} - \\color{${object_color}}\\bullet\\mathrm{c}\\color{black}\\right\\|^2 -\\textcolor{${object_color}}{r}^2\\right)}`}\n\nWe then report the smallest, positive ${tex`t`} as the intersection distance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"## Ray Marching: Implicit\n\nIn ray casting, we use closed-form intersection equations to determine if and where an object is hit. In contrast, for ray marching we step along the projection ray, repeatedly determining the distances to all objects, stopping if we hit any.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"To determine the distance, we use a signed distance function that returns how far we are from the surface of the object; it is a *signed* distance as it is positive outside of the surface and negative inside of it. This function for a sphere is\n\n${tex.block`\\operatorname{sdf}\\left(\\bullet\\mathrm{p}\\color{black}\\right)=\\left\\|\\bullet\\mathrm{p} -\\color{${object_color}}\\bullet\\mathrm{c}\\color{black}\\right\\|-\\textcolor{${object_color}}{r}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"To define a scene for ray marching, we need only a set of signed distance functions for each object.\n\n### Adaptive Marching\n\nAs described above, our sampling loop makes a fixed step every iteration and calculates a new distance. For volumetric rendering, where objects are not solid but diffuse, this is required. However, for solid objects, we waste significant time in empty space. We can, however, adapt our step size: if we walk the minimum distance we found at each iteration, we will never miss a surface—the distance is, by definition, the maximum we can travel without potentially hitting something. This adpative stepping is called distance-aided marching or sphere tracing interchangeably.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"viewof adapt = Inputs.checkbox([\"Use adapative marching\"], {value: undefined})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sub = ([x1,y1],[x0,y0]) => [x1-x0,y1-y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"add = ([x0,y0],[x1,y1])=>[x1+x0,y1+y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"dot = ([x,y], [i,j]) => x*i + y*j","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"lensq = (vec) => dot(vec, vec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"len = (vec) => Math.sqrt(lensq(vec))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"norm = ([x,y]) => [x/len([x,y]), y/len([x,y])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function sphere_signed_distance(origin, center, radius)\n{\n return len(sub(origin, center)) - radius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"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,texcolor} 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":"$W4a","stdlib":"1"}} 44:"$43:body"