2c:null 2d:["$","title",null,{"children":"Basic Ray Casting | T.J. Jankun-Kelly | Observable"}] 32:T460,line = { 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{${d3.schemeCategory10[0]}}\mathrm{p}`} along vector ${tex`\mathbf{\textcolor{${d3.schemeCategory10[0]}}{n}}`}.

` }33:T1db3,{ const id = DOM.uid("arrowhead"); const id2 = DOM.uid("arrowhead_blue"); const w = Math.max(0.5* ewidth - 5, 300); const res = 10; const corners = {lb: [0.625*ewidth, 210], rb: [0.375*ewidth, 280], lt: [0.625*ewidth, 90], rt: [0.375*ewidth, 20]}; let ex = 0.25 * ewidth; const ex0 = ex; // Xform for the image plane const transform = ([i,j]) => [(0.625-0.250*i/res)*ewidth, 70*i/res+210+j/res*(-120-140*i/res)]; const invert = ([x,y]) => { const i = (0.625-x/ewidth)*res/0.250; const j = (y-210-70*i/res)*res/(-120-140*i/res); return [i,j]; }; let ij = [4.5, 5.5]; let grid = ''; for(let i = 1; i < res; ++i) { grid += ` −v up e ${grid} ij

The view. Drag ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{e}`} to modify the camera point's distance; click on the image plane to select a new pixel ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{ij}`}

`; function dragged() { if(d3.event.x < 0 || d3.event.x >= 0.374 * ewidth || d3.event.y < 0 || d3.event.y >= 300) return; let new_ex = d3.event.x; d3.select(plane).selectAll(".x1").attr("x1", new_ex); d3.select(plane).selectAll(".cx").attr("cx", new_ex); d3.select(plane).selectAll(".x2").attr("x2", new_ex); d3.select(plane).selectAll(".x2v").attr("x2", new_ex-0.05*ewidth); d3.select(plane).selectAll(".xv").attr("x", new_ex-0.09*ewidth); d3.select(plane).selectAll(".xup").attr("x", new_ex+5); d3.select(plane).selectAll(".xe").attr("x", new_ex-5); d3.select(plane).selectAll(".transhalf").attr("transform", "translate(" + sub(transform([0.5, 0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transj").attr("transform", "translate(" + sub(transform([0.5, res-0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transi").attr("transform", "translate(" + sub(transform([res-0.5, 0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transboth").attr("transform", "translate(" + sub(transform([res-0.5, res-0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transij").attr("transform", "translate(" + sub(transform(ij),[new_ex,150]).join() + ")") .attr("x2", new_ex+50*(norm(sub(transform(ij),[new_ex,150]))[0])) .attr("y2", 150+50*(norm(sub(transform(ij),[new_ex,150]))[1])); ex = new_ex; } d3.select(plane).selectAll("#eye").call(d3.drag() .on("drag", dragged)); function clicked(event) { ij = invert([d3.event.layerX, d3.event.layerY]).map(x=>Math.floor(x)+0.5); d3.select(plane).selectAll(".ij").attr("x2", transform(ij)[0]) .attr("y2", transform(ij)[1]); d3.select(plane).selectAll(".cij").attr("cx", transform(ij)[0]) .attr("cy", transform(ij)[1]); d3.select(plane).selectAll(".ijtext").attr("x", transform(ij)[0]+5) .attr("y", transform(ij)[1]+15); d3.select(plane).selectAll(".transij").attr("transform", "translate(" + sub(transform(ij),[ex,150]).join() + ")") .attr("x2", ex+50*(norm(sub(transform(ij),[ex,150]))[0])) .attr("y2", 150+50*(norm(sub(transform(ij),[ex,150]))[1])); } d3.select(plane).selectAll("#image").on("click", clicked); return plane; }34:T1495,md`The relationship between the camera and the image plane is vital as it determines the characteristics of the view. The camera point ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{e}`} (using eye as an alternative name for the camera) is the source of our initial rays; these are shot through of our viewport which defines the portion of virtual space to which the rendered image is mapped—the viewport can be defined by its width and height ${tex`\color{${d3.schemeCategory10[1]}}w, h`} and the viewport center ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{c}`}. Each ray is shot through a corresponding pixel center ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{ij}`} which determines the direction of the ray ${tex`\overrightarrow{\color{${d3.schemeCategory10[0]}}\bullet\mathrm{e}\color{${d3.schemeCategory10[1]}}\bullet\mathrm{p}_{ij}}`} into the scene. If the camera is infinitely far away, we have an orthographic projection; otherwise, it is perspective. The relationship between the camera distance to the view plane affects the field of view: closer means a wider field, farther means smaller (so long as we are under perspective). Finally, changing the orientation of the camera (its up & viewing directions) changes what we can see and how we see it. To calculate the exact location of every ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{ij}`} (assuming it is not given to you, as in a GPU fragment shader), we use the vector defining our ${tex`\color{${d3.schemeCategory10[0]}}\mathbf{up}`} orientation and the viewing vector ${tex`\color{${d3.schemeCategory10[0]}}\mathbf{v}\color{black}=\frac{\overrightarrow{\color{${d3.schemeCategory10[0]}}\bullet\mathrm{e}\color{${d3.schemeCategory10[1]}}\bullet\mathrm{p}_{c}}}{\|\overrightarrow{\color{${d3.schemeCategory10[0]}}\bullet\mathrm{e}\color{${d3.schemeCategory10[1]}}\bullet\mathrm{p}_{c}}\|}`} from the camera point ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{e}`} to the image's center ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{c}`} to specify the ${tex`\color{${d3.schemeCategory10[1]}}\mathbf{\hat{i}}`} and ${tex`\color{${d3.schemeCategory10[1]}}\mathbf{\hat{j}}`} image basis vectors for the viewport: ${tex.block`\begin{aligned} \color{${d3.schemeCategory10[1]}}\mathbf{\hat{i}}\color{black} & = \color{${d3.schemeCategory10[0]}}\mathbf{up}\color{black} \times -\color{${d3.schemeCategory10[0]}}\mathbf{v}\\ \color{${d3.schemeCategory10[1]}}\mathbf{\hat{j}}\color{black} & = \color{${d3.schemeCategory10[0]}}\mathbf{up}\color{black}\\ \end{aligned}`} If ${tex`\color{${d3.schemeCategory10[1]}}n_i, n_j`} are the horizontal and vertical image resolution, then location of the pixel center ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{ij}`} in our scene is ${tex.block`\begin{aligned} \color{${d3.schemeCategory10[1]}}\bullet \mathrm{p}_{ij}\color{black} & = \color{${d3.schemeCategory10[1]}}\bullet \mathrm{p}_{c}\color{black} - \frac{1}{2}\color{${d3.schemeCategory10[1]}}w\mathbf{\hat{i}}\color{black} - \frac{1}{2}\color{${d3.schemeCategory10[1]}}h\mathbf{\hat{j}}\color{black} + \left(\frac{\color{${d3.schemeCategory10[1]}}w\color{black}}{\color{${d3.schemeCategory10[1]}}n_i\color{black}}\color{${d3.schemeCategory10[1]}}i\color{black}+\frac{1}{2}\frac{\color{${d3.schemeCategory10[1]}}w\color{black}}{\color{${d3.schemeCategory10[1]}}n_i\color{black}}\right)\color{${d3.schemeCategory10[1]}}\mathbf{\hat{i}}\color{black} + \left(\frac{\color{${d3.schemeCategory10[1]}}h\color{black}}{\color{${d3.schemeCategory10[1]}}n_j\color{black}}\color{${d3.schemeCategory10[1]}}j\color{black}+\frac{1}{2}\frac{\color{${d3.schemeCategory10[1]}}h\color{black}}{\color{${d3.schemeCategory10[1]}}n_j\color{black}}\right)\color{${d3.schemeCategory10[1]}}\mathbf{\hat{j}}\color{black} \\ & = \color{${d3.schemeCategory10[1]}}\bullet \mathrm{p}_{o}\color{black} + \left(\color{${d3.schemeCategory10[1]}}i\color{black} +\frac{1}{2}\right)\color{${d3.schemeCategory10[1]}}w_p\mathbf{\hat{i}}\color{black} + \left(\color{${d3.schemeCategory10[1]}}j\color{black} +\frac{1}{2}\right)\color{${d3.schemeCategory10[1]}}h_p\mathbf{\hat{j}}\color{black} \end{aligned}`} where ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{p}_{o}`} is the origin of the viewport (its bottom, left-hand corner with respect to the viewing frame) and ${tex`\color{${d3.schemeCategory10[1]}}w_p, h_p`} are the width and the height of a pixel in virtual space respectively.`35:Teb7,md`A sphere in a scene is characterized by its center ${tex`\color{${d3.schemeCategory10[2]}}\mathrm{c}`} and radius ${tex`r`}; every point ${tex`\color{${d3.schemeCategory10[4]}}\mathrm{q}`} on the surface of the sphere satisfies ${tex.block`\left\|\color{${d3.schemeCategory10[4]}}\bullet\mathrm{q}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2=r^2`} Every point on our ray from ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{p}`} along ${tex`\color{${d3.schemeCategory10[0]}}\mathbf{n}`} can be expressed with a parameter ${tex`t`} ${tex.block`\bullet\mathrm{p}(t) =\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}+\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}t`} If we substitute ${tex`\mathrm{p}(t)`} for ${tex`\color{${d3.schemeCategory10[4]}}\mathrm{q}`}, then we can express the intersection in terms of ${tex`t`} ${tex.block`\begin{aligned}\left\|\bullet\mathrm{p}(t)-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2&=r^2\\ \left\|\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}+t\color{${d3.schemeCategory10[0]}}\mathbf{n}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2&=r^2\\ \left(\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right)+t\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right)\cdot\left(\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right)+t\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right)&=r^2\\ t^2\left\|\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right\|^2 + 2t\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\right) + \left\|\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black} -\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2 -r^2 &= 0 \end{aligned}`} We can then use the [quadratic formula](https://en.wikipedia.org/wiki/Quadratic_formula "Wikipedia: Quadratic Formula") to solve for ${tex`t`} ${tex.block`t=\frac{-b\pm\color{${d3.schemeCategory10[3]}}\sqrt{b^2-4ac}}{2a}`} where ${tex.block`\begin{aligned}a & = \left\|\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right\|^2\\ b &= 2\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\right)\\ c &= \left\|\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black} -\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2 -r^2 \end{aligned}`} The discriminant, the portion under the square root, determines how many intersections there are with the sphere: If negative, the are no intersections; if zero, then they ray hits the sphere at a tangent; if positive, then there are two intersections—the signs of the ${tex`t`}s then determines if the intersection is along the ray (positive) or behind the ray origin (negative). `36:Ted8,{ const id = DOM.uid("arrowhead"); const id2 = DOM.uid("spheres"); let origin = [0.25*ewidth, 128] 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.4*ewidth, 69]); const fig = html`

Drag point and ray to see possible intersections.

` d3.select(fig).selectAll(".draggable").call(d3.drag() .on("drag", dragged)); 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.draggable") .attr('x1', origin[0]).attr('y1', origin[1]) .attr('x2', target[0]).attr('y2', target[1]); d3.select(fig).selectAll("line.ray") .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]); const hits = intersect_sphere(origin, norm(sub(target, origin)), [0.5*ewidth, 128], 60); console.log(hits, d3.select(fig).select("#t0")); d3.select(fig).select("#t0").attr("visibility", hits.length > 0 ? "visible" : "hidden") .attr("cx", hits.length > 0 ? offset(target, hits[0])[0]: -1) .attr("cy", hits.length > 0 ? offset(target, hits[0])[1]: -1) d3.select(fig).select("#t1").attr("visibility", hits.length > 1 ? "visible" : "hidden") .attr("cx", hits.length > 1 ? offset(target, hits[1])[0]: -1) .attr("cy", hits.length > 1 ? offset(target, hits[1])[1]: -1) } return fig; }37:T6f3,md`The equation above can be slightly simplified by noting that we can factor out a 4 from out of the square root which cancels the factor of 2 in ${tex`b`} and the denominator: ${tex.block`t=\frac{-\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\right)\pm\color{${d3.schemeCategory10[3]}}\sqrt{\color{black}\left(\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right)\right)^2-\left\|\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right\|^2\left(\left\|\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black} - \color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2 -r^2\right)}}{\left\|\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right\|^2}`} Finally, if we make sure our ray direction is already normalized, ${tex`\left\|\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right\|=1`} and thus ${tex.block`t=-\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\right)\pm\color{${d3.schemeCategory10[3]}}\sqrt{\color{black}\left(\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right)\right)^2-\left(\left\|\color{${d3.schemeCategory10[0]}}\bullet\mathrm{p}\color{black} -\color{${d3.schemeCategory10[2]}}\bullet\mathrm{c}\color{black}\right\|^2 -r^2\right)}`} `38:T5a6,md`## 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 ray 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. `39:[] 30:{"id":"68f24a1e17b3ad98","slug":"basic-ray-casting","title":"Basic Ray Casting","thumbnail":"3a4f85a2e05fa1a1dab9c26add32b4b0936dd3911f25cfe76c60d64889c9047a","access_level":"public","create_time":"$D2020-08-23T15:11:44.577Z","update_time":"$D2024-01-23T18:46:03.299Z","view_time":null,"first_public_time":"$D2020-08-27T23:45:21.395Z","has_unpublished_edits":null,"fork":false,"stars":3,"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":1003,"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":3,"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 Casting","cells":[{"id":0,"value":"md`# Basic Ray Casting\n\nOutside of polygonal-based rendering, ray-based methods are the most common in computer graphics. The idea is that we launch a ray from a point ${tex`\\color{${d3.schemeCategory10[0]}}\\mathrm{p}`} along direction ${tex`\\mathbf{\\textcolor{${d3.schemeCategory10[0]}}{n}}`} towards the scene geometry. The key difference between ray casting and [ray marching](https://observablehq.com/@infowantstobeseen/basic-ray-marching \"Basic Ray Marching\") is how the ray loop progresses: For ray casting, we determine which object is hit first along the ray explicitly, whereas in ray marching we walk iteratively along the ray until we reach an object. Here, we will focus on the basics of ray casting.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`## View Construction\n\nTo determine what we see, we must construct the view and scene. First, we must consider where the image plane is, its resolution, and where the camera is placed and oriented—this determines our view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Scene Construction & Intersections\n\nFor ray casting, we intersect the rays analytically with elements in the scene. Thus, these scene elements must be amentable to intersection. All objects in the scene must have a closed-form solution that returns when the intersection occurs. The simplist of these are spheres.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n const id = DOM.uid(\"sphere\");\n\n return html`

The sphere

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"function intersect_sphere(origin, dir, center, radius)\n{\n const a = lensq(dir); // If dir is normalized, than we can just assume this is 1\n const b = dot(dir, sub(origin, center));\n const c = lensq(sub(origin, center)) - radius * radius;\n if(b*b - a*c < 0)\n return [];\n let t0 = (-b - Math.sqrt(b*b - a*c)) / a;\n let t1 = (-b + Math.sqrt(b*b - a*c)) / a;\n if(t1 < 0)\n return [];\n else if(t0 < 0)\n return [t1];\n else if(t1 != t0)\n return [t0, t1];\n else\n return [t0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`Equations for other objects are solved similarly. This particular version returns all intersections; it sufficent just return the closest positive if there is one.\n\nInteractions with objects occur when we shoot visiblity rays to see which object is visible and lighting/shadow rays to determine if and how an object is shaded. With many objects in the scene, these interactions can be costly. We will dicuss ways to accelerate these interactions later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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":667,"value":"mutable eye = 0.25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"sub = ([x1,y1],[x0,y0]) => [x1-x0,y1-y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"add = ([x0,y0],[x1,y1])=>[x1+x0,y1+y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"dot = ([x,y], [i,j]) => x*i + y*j","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"lensq = (vec) => dot(vec, vec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"len = (vec) => Math.sqrt(lensq(vec))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"norm = ([x,y]) => [x/len([x,y]), y/len([x,y])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3-selection@1.4\", \"d3-drag@1.2\", \"d3-scale-chromatic\",\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"