2d:null 2e:["$","title",null,{"children":"Let's Do Ray Tracing! (CPU Version) | Introduction to Computer Graphics MSState | Observable"}] 33:T5ea,{ // Create the context const context = DOM.context2d(ewidth, height); context.canvas.value = context; // Flip the context vertically context.transform(1, 0, 0, -1, 0, height); // Fill in a pattern based upon the ray's direction. Redder means more to the right, // green more to to top, blue means farther away let ray_origin = glm.vec3.scaleAndAdd( glm.vec3.create(), glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, 600), jhat, 0 ); // Where is the ray going? We use perpective, so its ray_origin - eye let ray_dir = glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), ray_origin, eye) ); for (let i = 0; i < ewidth; ++i) { for (let j = 0; j < height; ++j) { // What is the ray origin? let ray_origin = glm.vec3.scaleAndAdd( glm.vec3.create(), glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, i), jhat, j ); // Where is the ray going? We use perpective, so its ray_origin - eye let ray_dir = glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), ray_origin, eye) ); // filStyle uses CSS color names; so you need a *string* rgb function. context.fillStyle = `rgb(${Math.floor( 0.5 * (ray_dir[0] + 1) * 255 )}, ${Math.floor(0.5 * (ray_dir[1] + 1) * 255)}, ${Math.floor( 0.5 * (ray_dir[2] + 1) * 255 )})`; context.fillRect(i, j, 1, 1); } } return context.canvas; }34:Tb85,To perform a ray-sphere intersection, we have to intersect the ray with our sphere: ${tex.block`\begin{aligned}\left\|\mathrm{p}(t)-\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right\|^2&=r^2\\ \left\|\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black}+t\color{${d3.schemeCategory10[0]}}\mathbf{n}-\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right\|^2&=r^2\\ \left(\left(\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right)+t\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\right)\cdot\left(\left(\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\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]}}\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\mathrm{c}\right) + \left\|\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black} -\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right\|^2 -r^2 &= 0 \end{aligned}`} where ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{p}`} is the ray origin, ${tex`t`} is the distance along the ray we are solving for, ${tex`\color{${d3.schemeCategory10[0]}}\mathbf{n}`} is the ray direction, ${tex`\color{${d3.schemeCategory10[2]}}\mathrm{c}`} is the center of the sphere, and ${tex`r`} is the sphere's radius. Assuming the ray direction vector is normalized (as we did), then we can solve for the intersections exactly: ${tex.block`t=-\color{${d3.schemeCategory10[0]}}\mathbf{n}\color{black}\cdot\left(\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\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]}}\mathrm{p}\color{black}-\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right)\right)^2-\left(\left\|\color{${d3.schemeCategory10[0]}}\mathrm{p}\color{black} -\color{${d3.schemeCategory10[2]}}\mathrm{c}\color{black}\right\|^2 -r^2\right)}`} There can be zero, one, or two valid solutions, depending if the ray misses, grazes, or passes through the sphere respectively. The number of solutions is determined by the discriminant (the portion under the square root): If negative, the are no intersections; if zero, then the 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). Our `intersect_sphere` function needs only return the smallest positive real root, if any:35:T40a,{ // Create the context const context = DOM.context2d(ewidth, height); context.canvas.value = context; // Flip the context vertically context.transform(1, 0, 0, -1, 0, height); const origin = glm.vec3.fromValues(0, 0, 0); // Color based upon if the sphere was hit- for (let i = 0; i < ewidth; ++i) { for (let j = 0; j < height; ++j) { // What is the ray origin? let ray_origin = glm.vec3.scaleAndAdd( glm.vec3.create(), glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, i), jhat, j ); // Where is the ray going? We use perpective, so its ray_origin - eye let ray_dir = glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), ray_origin, eye) ); // Did we hit the sphere? if (intersect_sphere(ray_origin, ray_dir, s1_origin, s1_radius) > 0) context.fillStyle = "white"; else context.fillStyle = "black"; context.fillRect(i, j, 1, 1); } } return context.canvas; }36:T686,{ // Create the context const context = DOM.context2d(ewidth, height); context.canvas.value = context; // Flip the context vertically context.transform(1, 0, 0, -1, 0, height); const s1_origin = glm.vec3.fromValues(0, 0, 0); const s1_radius = 0.25 * ewidth; const s2_origin = glm.vec3.fromValues(-100, +100, 175); const s2_radius = 0.15 * ewidth; // Color based upon which is closest and if there are multiple intersections for (let i = 0; i < ewidth; ++i) { for (let j = 0; j < height; ++j) { // What is the ray origin? let ray_origin = glm.vec3.scaleAndAdd( glm.vec3.create(), glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, i), jhat, j ); // Where is the ray going? We use perpective, so its ray_origin - eye let ray_dir = glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), ray_origin, eye) ); // Did we hit the first sphere? let s1_dist = intersect_sphere(ray_origin, ray_dir, s1_origin, s1_radius); // Did we hit the second sphere? let s2_dist = intersect_sphere(ray_origin, ray_dir, s2_origin, s2_radius); // Color appropriately if (s1_dist >= 0 && s2_dist < 0) context.fillStyle = "red"; else if (s1_dist < 0 && s2_dist >= 0) context.fillStyle = "green"; else if (s1_dist > 0 && s2_dist >= 0 && s2_dist < s1_dist) context.fillStyle = "blue"; else if (s1_dist >= 0 && s2_dist >= 0 && s2_dist >= s1_dist) context.fillStyle = "yellow"; else context.fillStyle = "black"; context.fillRect(i, j, 1, 1); } } return context.canvas; }37:T809,{ // Create the context const context = DOM.context2d(ewidth, height); context.canvas.value = context; // Flip the context vertically context.transform(1, 0, 0, -1, 0, height); // Phong shade the spheres locally for (let i = 0; i < ewidth; ++i) { for (let j = 0; j < height; ++j) { // What is the ray origin? let ray_origin = glm.vec3.scaleAndAdd( glm.vec3.create(), glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, i), jhat, j ); // Where is the ray going? We use perpective, so its ray_origin - eye let ray_dir = glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), ray_origin, eye) ); // Test each object individually. Note that the intersection function // has been made part of the object for generality: You can define your // own object that has an intersect method let hit = undefined; let hit_dist = Number.POSITIVE_INFINITY; for (let i = 0; i < objects.length; ++i) { let dist = objects[i].intersect(ray_origin, ray_dir); if (dist >= 0 && (hit === undefined || dist < hit_dist)) { hit = i; hit_dist = dist; } } // Color appropriately if (hit === undefined) context.fillStyle = "black"; else { let point = glm.vec3.scaleAndAdd( glm.vec3.create(), ray_origin, ray_dir, hit_dist ); let object = objects[hit]; let color = shade_phong( glm.vec3.normalize( glm.vec3.create(), glm.vec3.subtract(glm.vec3.create(), point, object.origin) ), light_dir, glm.vec3.negate(glm.vec3.create(), view_dir), object.diffuse, object.specular, object.shininess ); context.fillStyle = `rgb(${255 * color[0]}, ${255 * color[1]}, ${ 255 * color[2] })`; } context.fillRect(i, j, 1, 1); } } return context.canvas; }38:[] 31:{"id":"ac4e17f10e772590","slug":"lets-do-ray-tracing-cpu-version","title":"Let's Do Ray Tracing! (CPU Version)","thumbnail":"7633721b8c392dbddaccca8c4f4329bd747c60d8bdd61192cf676bd1e39b2a57","access_level":"public","create_time":"$D2021-11-12T20:32:12.717Z","update_time":"$D2024-01-29T15:49:58.927Z","view_time":null,"first_public_time":"$D2021-11-13T02:48:27.921Z","has_unpublished_edits":null,"fork":true,"stars":4,"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":931,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Let's Do Ray Tracing! (CPU Version)","cells":[{"id":0,"value":"# Let's Do Ray Tracing! (CPU Version)\n\nHere, we describe a simple set-up for ray tracing on the CPU using Javascript. While your language and libraries will have different initialization, this example should be sufficient to generalize from. \n\n## Step 0: Initial Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"{\n // Create the context\n const context = DOM.context2d(ewidth, height);\n context.canvas.value = context;\n\n // Just set a color based upon our (i,j) value. Note, in Canvas space, the origin\n // is *upper left*, not *lower left*. I don't correct for this.\n // Fill in a pattern based upon pixel position in image coordinates\n for (let i = 0; i < ewidth; ++i) {\n for (let j = 0; j < height; ++j) {\n // filStyle uses CSS color names; so you need a *string* rgb function.\n context.fillStyle = `rgb(${Math.floor((i / ewidth) * 255)}, ${Math.floor(\n (j / height) * 255\n )}, 0)`;\n context.fillRect(i, j, 1, 1);\n }\n }\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"On the CPU, we have to look through each individual pixel (`ewidth` by `height` in this example) and calculate our view rays. Once we have the color, we use the Context's `fillStyle` attribute to set the color and then the `fillRect` method to paint the pixel. Be aware that the Canvas—like most image APIs—assumes the origin is in the **upper left** corner, whereas WebGL uses the **lower left** (which matches the space of our scene). We will correct this in a moment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"## Step 1: Update Coordinate System","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"{\n // Create the context\n const context = DOM.context2d(ewidth, height);\n context.canvas.value = context;\n\n // Flip the context vertically\n context.transform(1, 0, 0, -1, 0, height);\n\n // Fill in a pattern based upon pixel position. Due to the flip, image and spatial\n // coordinates align\n for (let i = 0; i < ewidth; ++i) {\n for (let j = 0; j < height; ++j) {\n // Just set a color based upon our (i,j) value. Note, in Canvas space, the origin\n // filStyle uses CSS color names; so you need a *string* rgb function.\n context.fillStyle = `rgb(${Math.floor((i / ewidth) * 255)}, ${Math.floor(\n (j / height) * 255\n )}, 0)`;\n context.fillRect(i, j, 1, 1);\n }\n }\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"We can apply transforms to the context directly, as we did in image processing. Here, we combine a vertical flip and translation to move the origin to the lower left.\n\n~~~javascript\n // Flip the context vertically\n context.transform(1, 0, 0, -1, 0, height);\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"## Step 2: Generate Rays for Each Pixel\n\nFor simplicity, our world coordinate system and image coordinate are aligned so that 1 pixel separation is 1 world coordinate unit. Thus, our viewport window is ${ewidth}px by ${height}px. For this ray tracer, we will use perspective, so we will need to establish where the eye is, where it is looking, and where the viewport window is. Before that, however, it is useful to import a vector math library; here, we'll use [glMatrix](https://glmatrix.net/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"glm = import(\"gl-matrix\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"Where is our eye? Let's put along the ${tex`z`} axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"eye = glm.vec3.fromValues(0, 0, 1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"Similarly, we will look toward the origin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"view_dir = glm.vec3.fromValues(0, 0, -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"To position the viewport, we offset it a distance away from the eye. Here, we will place it to give us a 60° vertical field-of-view.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewport_offset = (0.5 * height) / Math.tan(glm.glMatrix.toRadian(60 / 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"This means that the center of the viewing plane is at","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"viewport_center = glm.vec3.scaleAndAdd(\n glm.vec3.create(),\n eye,\n view_dir,\n viewport_offset\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"How is the plane oriented? We will start with it aligned with the ${tex`y`} axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"up = glm.vec3.fromValues(0, 1, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"Now we can determine the basis vectors ${tex`\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{i}}`} and ${tex`\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{j}}`} for the image plane which allow us to calculate the location in world coordinates:\n\n${tex.block`\\begin{aligned}\n \\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{i}}\\color{black} & =\n \\color{${d3.schemeCategory10[0]}}\\mathbf{up}\\color{black} \\times -\\color{${d3.schemeCategory10[0]}}\\mathbf{v}\\\\\n \\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{j}}\\color{black} & =\n \\color{${d3.schemeCategory10[0]}}\\mathbf{up}\\color{black}\\\\\n\\end{aligned}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"ihat = glm.vec3.cross(\n glm.vec3.create(),\n up,\n glm.vec3.negate(glm.vec3.create(), view_dir)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"jhat = up","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"The origin for the image in world coordinates is then half the image width along ${tex`-\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{i}}`} and back half the height along ${tex`-\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{j}}`} from the viewport's center, and offset half a pixel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"p_00 = glm.vec3.scaleAndAdd(\n glm.vec3.create(),\n glm.vec3.scaleAndAdd(\n glm.vec3.create(),\n viewport_center,\n ihat,\n -0.5 * ewidth + 0.5\n ),\n jhat,\n -0.5 * height + 0.5\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"Now we can determine the origin for each ray in our image. Starting from `p_00`, we offset it by ${tex`i\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{i}}`} and ${tex`j\\color{${d3.schemeCategory10[1]}}\\mathbf{\\hat{j}}`} when we are at pixel ${tex`\\left(i,j\\right)`}\n\n~~~javascript\n const ray_origin = glm.vec3.scaleAndAdd(\n glm.vec3.create(),\n glm.vec3.scaleAndAdd(glm.vec3.create(), p_00, ihat, i),\n jhat,\n j\n );\n~~~\n\nFinally, we subtract the `eye` from the ray origin to determine the direction the ray shoots into the scene (normalized as it is a direction):\n\n~~~javascript\n // Where is the ray going? We use perpective, so its ray_origin - eye\n const ray_dir = glm.vec3.normalize(\n glm.vec3.create(),\n glm.vec3.subtract(glm.vec3.create(), ray_origin, eye)\n );\n~~~\n\nThe updated code colors by this direction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"Everything is a little bluer (as things moving way along the view direction is mapped to shades of blue), but otherwise similar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"## Step 3: Intersect with Objects\n\nNow that we have our rays, we can shoot them into a scene. For this scene, we will have a single sphere, centered at the origin, with a diameter that is half the image width.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"s1_origin = glm.vec3.fromValues(0, 0, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"s1_radius = 0.25 * ewidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"function intersect_sphere(origin, dir, center, radius) {\n // Check discriminant\n const a = 1.0;\n const origin_sub_center = glm.vec3.subtract(\n glm.vec3.create(),\n origin,\n center\n );\n const b = glm.vec3.dot(dir, origin_sub_center);\n const c =\n glm.vec3.dot(origin_sub_center, origin_sub_center) - radius * radius;\n if (b * b - a * c < 0) return Number.NEGATIVE_INFINITY;\n\n // Find roots\n let t0 = (-b - Math.sqrt(b * b - a * c)) / a;\n let t1 = (-b + Math.sqrt(b * b - a * c)) / a;\n if (t0 < 0) return t1;\n else return t0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"For convenience, this version returns -∞ if a root is not found.\n\nWe can now test to see if our rays hit the sphere by coloring white if we do so.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"We can add additional objects with additional tests; non-spheres will require their own intersection functions. To make this scene interesting, we can add another sphere in front of the other offset to the left and up. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"s2_origin = glm.vec3.fromValues(-100, +100, 175)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"s2_radius = 0.15 * ewidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"When testing, we only need to keep track of the **closest** intersection and return the object hit. For testing, we will color the original sphere red, the new sphere green, and anywhere they overlap blue if the second is closer, yellow otherwise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"## Step 4: Local Illumination\n\nNow that we have hit an object, we can perform some lighting [using some lighting model](https://observablehq.com/@cse4413msstate/basic-lighting?collection=@cse4413msstate/interactive-notes). This will be a local lighting calculation (it does not involve other objects).\n\nThe easiest light to use is a directional light. The vector should point *towards* the light; here we say the light is towards the upper left corner.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"light_dir = glm.vec3.normalize(glm.vec3.create(), glm.vec3.fromValues(-1, 1, 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"Illuminating via Phong is straightforward once we know the point of intersection. We use that point to find the normal (for sphere, it is the vector from the center to the intersection point), and then do the standard Phong components. We are using a white light for this scene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"function shade_phong(\n normal,\n to_light,\n to_view,\n diffuse_color,\n specular_color,\n shininess\n) {\n // Ambient color\n const color = glm.vec3.scale(glm.vec3.create(), diffuse_color, 0.1);\n\n const ndotl = glm.vec3.dot(normal, to_light);\n if (ndotl > 0) {\n glm.vec3.scaleAndAdd(color, color, diffuse_color, ndotl);\n\n const reflect = glm.vec3.scaleAndAdd(\n glm.vec3.create(),\n glm.vec3.negate(glm.vec3.create(), light_dir),\n normal,\n 2 * ndotl\n );\n const rdotv = glm.vec3.dot(reflect, to_view);\n if (rdotv > 0)\n glm.vec3.scaleAndAdd(\n color,\n color,\n specular_color,\n Math.pow(rdotv, shininess)\n );\n }\n\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"For this scene, the first sphere will be a shiny grey, while the second will be a more matte red.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"s1_diffuse = glm.vec3.fromValues(0.5, 0.5, 0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"s1_specular = glm.vec3.fromValues(0.4, 0.4, 0.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"s1_shininess = 64","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"s2_diffuse = glm.vec3.fromValues(0.7, 0, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"s2_specular = glm.vec3.fromValues(0.2, 0.2, 0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"s2_shininess = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"Here is our list of objects. Abstracting them like this allows us to add other objects that are not sphere; polymorphism could also be used. It stores its own `intersect` method that will defer to `intersect_sphere` (whereas a plane would defer to a plane intersection function and so on).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"objects = [\n {\n origin: s1_origin,\n radius: s1_radius,\n diffuse: s1_diffuse,\n specular: s1_specular,\n shininess: s1_shininess,\n intersect: function (r, d) {\n return intersect_sphere(r, d, this.origin, this.radius);\n }\n },\n {\n origin: s2_origin,\n radius: s2_radius,\n diffuse: s2_diffuse,\n specular: s2_specular,\n shininess: s2_shininess,\n intersect: function (r, d) {\n return intersect_sphere(r, d, this.origin, this.radius);\n }\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"## Next Steps\n\nWe now have a ray tracer that can replicate a local lighting model. Still to add for a complete ray tracer are\n+ *Shadow Rays*: When doing illumination, shoot a ray from the intersection point toward the light. If the ray intersects an object before getting to the light, then do not shade—the object is in shadow.\n+ *Bounce Rays*: If the object is shiny (set by some property of the material), shot a reflect ray and gather its light color. Add this to the local light model (weighted by some factor). Continuing bouncing rays until no object is hit or the maximum number of bounces has been reached.\n+ *Optimizations*: JavaScript runs in one thread by default, so the nested pixel loop can slow the webpage's responsiveness. Each pixel ray (and their children) can be handled in parallel; farming this processing to Web Workers or using WebGL/WebGPU (when available) could improve performance.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"## Implementation\n\nDetails for the notebook implementation are here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"### Viewport \n\nThe \"effective\" width of the screen (`ewidth`, sent to a maximum of 600 pixels) and the given `height` are stored below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"ewidth = Math.min(600, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"