2c:null 2d:["$","title",null,{"children":"Basic Ray Marching | T.J. Jankun-Kelly | Observable"}] 32:T15fd,{ 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`

Drag point and ray to see ray march progression.

` 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) { step += distance; } else { step += offset_len; } } else { step = 0; loc = origin; } d3.active(this, "march") .attr("r", distance+60) .attr("stroke", d3.interpolatePurples(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.interpolatePurples(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()); d3.select(fig).selectAll(".draggable").call(d3.drag() .on("start", start).on("drag", dragged).on("end", update)); function start() { d3.select(fig).selectAll(".anim") .attr("visibility", "hidden"); } function dragged() { if(d3.event.x < 0 || d3.event.x >= ewidth || d3.event.y < 0 || d3.event.y >= 256) return; let ele = d3.select(this); if(ele.classed("origin")) { // Dragging origin target = add(target, sub([d3.event.x, d3.event.y], origin)); origin = [d3.event.x, d3.event.y]; } else { // Dragging line target = [d3.event.x, d3.event.y]; } if(len(sub(origin, target)) < 0.001) return; // Too close target = offset(target); let far = offset(target,ewidth); d3.select(fig).selectAll("line.ray") .attr('x1', origin[0]).attr('y1', origin[1]) .attr('x2', target[0]).attr('y2', target[1]); d3.select(fig).selectAll("line.projection") .attr('x1', target[0]).attr('y1', target[1]) .attr('x2', far[0]).attr('y2', far[1]); d3.select(fig).selectAll(".origin") .attr('cx', origin[0]).attr('cy', origin[1]); } function update() { const distance = sphere_signed_distance(origin, [0.5*ewidth,128], 60); d3.select(fig).selectAll("#dist") .attr("r", distance+60) .attr("stroke", d3.interpolatePurples(1-distance/(0.5*ewidth-60))) .attr("visibility", "visible"); d3.select(fig).selectAll("#pos") .attr("cx", origin[0]).attr("cy", origin[1]) .attr("fill", d3.interpolatePurples(1-distance/(0.5*ewidth-60))) .attr("visibility", "visible"); step = 0; } return fig; }33:T604,md`## 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\` (becaused 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 perfom this look 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. `34:[] 30:{"id":"b6702c422c2dd980","slug":"basic-ray-marching","title":"Basic Ray Marching","thumbnail":"67254390a38b43e1effe26c89160a4bcfff982ab58484d8eb868f55b4000d3e9","access_level":"public","create_time":"$D2020-08-28T20:59:13.882Z","update_time":"$D2025-09-11T15:17:17.486Z","view_time":null,"first_public_time":"$D2020-09-01T02:29:57.804Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":"starter_2024"},"version":172,"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}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"47062c7e11777d35","slug":"advanced-graphics","title":"Advanced Graphics","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"titling":"auto","title":"Basic Ray Marching","cells":[{"id":0,"value":"md`# Basic Ray Marching\n\nRay casting is an explicit approach to solving the ray/object interesection problem; ray marching is an implicit and non-exact approach. While the set-up for ray marching is similar to ray casting, the core intersection loop is different.\n\n## View Construction\n\nThe view is constructed exactly as it is in ray casting—the camera's location and orientation is established and samples points along the viewing plane at some resolution. Depending on the configuration, the rays can be parallel to each other or converge for perspective.\n\n## Scene Construction & Marching\n\nScene construction is the first part where ray marching varies from ray casting. In 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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`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. For example, the equation of a sphere we used for ray intersection\n\n${tex.block`\\left\\|\\color{${d3.schemeCategory10[4]}}\\bullet\\mathrm{q}\\color{black}-\\color{${d3.schemeCategory10[2]}}\\bullet\\mathrm{c}\\color{black}\\right\\|=r`}\n\neasily transforms into a signed distance by making it an implicit equation in terms of the sample point ${tex`\\color{${d3.schemeCategory10[4]}}\\mathrm{q}`}\n\n${tex.block`\\operatorname{sdf}\\left(\\color{${d3.schemeCategory10[4]}}\\bullet\\mathrm{q}\\color{black}\\right)=\\left\\|\\color{${d3.schemeCategory10[4]}}\\bullet\\mathrm{q}\\color{black}-\\color{${d3.schemeCategory10[2]}}\\bullet\\mathrm{c}\\color{black}\\right\\|-r`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function sphere_signed_distance(origin, center, radius)\n{\n return len(sub(origin, center)) - radius;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`Thus, to define a scene in 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 interchangably.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"viewof adapt = checkbox({\n options: [{ value: \"adapt\", label: \"Use adapative marching\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"ewidth=Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {add, sub, dot, len, norm} from \"@infowantstobeseen/basic-ray-casting\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3-selection@1.4\", \"d3-drag@1.2\", \"d3-ease\", \"d3-interpolate\", \"d3-scale-chromatic\",\"d3-array\", \"d3-transition@1.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"