30:T5a1,md`# Raytracing Studies ___ [What is the difference between raytracing and raymarching?](https://www.quora.com/What-is-the-difference-between-raytracing-and-raymarching) > The core component for a rendering algorithm is to evaluate how much light is coming from a specific direction at a specific point. > > Ray casting assumes that light only interacts at surfaces of objects. For most scenes, this is a perfectly reasonable assumption. To determine the light coming from a certain directions, we'll simply cast a ray to find the first intersection and compute the luminance at the intersected surface. > > Ray marching handles the other cases, where light interacts with objects *not* only at the surface of the object. This includes all materials where light goes through the object. Examples would include smoke, marble and skin. When light hits one of these surfaces, a fraction of the light is reflected (ray casting only deals with this case) and a fraction is scattered into the object. Ray marching is a technique to compute the scattered light. > > Instead of casting the ray until you hit a surface, with ray marching, you can only advance the ray some distance (typically you'd vary this with some stochastic sampling algorithm) and do some shading before continuing the ray. > > The main idea is that ray marching stops the ray periodically and does shading at each stop, instead of only when the ray hits an object. `31:T6bc,rendering = { const ctx = canvas.getContext('2d') const data = ctx.getImageData(0, 0, w, h) const { camera, objects, lights } = scene const eyeVector = Vector.unitVector(Vector.subtract(camera.vector, camera.point)), vpRight = Vector.unitVector(Vector.crossProduct(eyeVector, Vector.UP)), vpUp = Vector.unitVector(Vector.crossProduct(vpRight, eyeVector)), fovRadians = Math.PI * (camera.fieldOfView / 2) / 180, heightWidthRatio = h / w, halfWidth = Math.tan(fovRadians), halfHeight = heightWidthRatio * halfWidth, camerawidth = halfWidth * 2, cameraheight = halfHeight * 2, pixelWidth = camerawidth / (w - 1), pixelHeight = cameraheight / (h - 1) const ray = { point: camera.point } let planet1 = 0, planet2 = 0 while(isPlaying) { planet1 += 0.02 planet2 += 0.05 objects[1].point.x = Math.sin(planet1) * 4.5 objects[1].point.z = -3 + (Math.cos(planet1) * 4.5) objects[2].point.x = Math.sin(planet2) * 5 objects[2].point.z = -3 + (Math.cos(planet2) * 5) let index, color for (let x = 0; x < w; x++) { for (let y = 0; y < h; y++) { const xcomp = Vector.scale(vpRight, (x * pixelWidth) - halfWidth), ycomp = Vector.scale(vpUp, (y * pixelHeight) - halfHeight) ray.vector = Vector.unitVector(Vector.add3(eyeVector, xcomp, ycomp)) color = computeColor(ray, scene, 0) index = (x * 4) + (y * w * 4) data.data[index + 0] = color.x data.data[index + 1] = color.y data.data[index + 2] = color.z data.data[index + 3] = 255 } } ctx.putImageData(data, 0, 0) yield isPlaying } }32:Ta68,computeColor = (ray, scene, depth) => { function trace(ray, scene, depth) { if (depth > 3) { return; } const distObject = intersectScene(ray, scene) if (distObject[0] === Infinity) { return Vector.ZERO } const dist = distObject[0], object = distObject[1] const pointAtTime = Vector.add(ray.point, Vector.scale(ray.vector, dist)) return surface(ray, scene, object, pointAtTime, sphereNormal(object, pointAtTime), depth) } function intersectScene(ray, scene) { let closest = [Infinity, null] for (let i = 0; i < scene.objects.length; i++) { const object = scene.objects[i], dist = sphereIntersection(object, ray) if (dist !== undefined && dist < closest[0]) { closest = [dist, object] } } return closest } function sphereIntersection (sphere, ray) { const eye_to_center = Vector.subtract(sphere.point, ray.point), v = Vector.dotProduct(eye_to_center, ray.vector), eoDot = Vector.dotProduct(eye_to_center, eye_to_center), discriminant = (sphere.radius * sphere.radius) - eoDot + (v * v) if (discriminant < 0) { return; } else return v - Math.sqrt(discriminant) } const sphereNormal = (sphere, pos) => Vector.unitVector(Vector.subtract(pos, sphere.point)) function isLightVisible(pt, scene, light) { const distObject = intersectScene({ point: pt, vector: Vector.unitVector(Vector.subtract(pt, light)) }, scene); return distObject[0] > -0.005; } function surface(ray, scene, object, pointAtTime, normal, depth) { let b = object.color, c = Vector.ZERO, lambertAmount = 0 if (object.lambert) { for (let i = 0; i < scene.lights.length; i++) { const lightPoint = scene.lights[i] if (!isLightVisible(pointAtTime, scene, lightPoint)) { continue; } const contribution = Vector.dotProduct(Vector.unitVector(Vector.subtract(lightPoint, pointAtTime)), normal) if (contribution > 0) { lambertAmount += contribution; } } } if (object.specular) { const reflectedRay = { point: pointAtTime, vector: Vector.reflectThrough(ray.vector, normal) } const reflectedColor = trace(reflectedRay, scene, ++depth) if (reflectedColor) { c = Vector.add(c, Vector.scale(reflectedColor, object.specular)) } } return Vector.add3(c, Vector.scale(b, lambertAmount * object.lambert), Vector.scale(b, object.ambient)) } return trace(ray, scene, depth) }33:T441,Vector = { const Vector = {} Vector.UP = { x: 0, y: 1, z: 0 } Vector.ZERO = { x: 0, y: 0, z: 0 } Vector.WHITE = { x: 255, y: 255, z: 255 } Vector.ZEROcp = () => ({ x: 0, y: 0, z: 0 }) Vector.dotProduct = (a, b) => (a.x * b.x) + (a.y * b.y) + (a.z * b.z) Vector.crossProduct = (a, b) => ({ x: (a.y * b.z) - (a.z * b.y), y: (a.z * b.x) - (a.x * b.z), z: (a.x * b.y) - (a.y * b.x) }) Vector.scale = (a, t) => ({ x: a.x * t, y: a.y * t, z: a.z * t }) Vector.unitVector = a => Vector.scale(a, 1 / Vector.length(a)) Vector.add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y, z: a.z + b.z }) Vector.add3 = (a, b, c) => ({ x: a.x + b.x + c.x, y: a.y + b.y + c.y, z: a.z + b.z + c.z }) Vector.subtract = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z }) Vector.length = a => Math.sqrt(Vector.dotProduct(a, a)) Vector.reflectThrough = (a, normal) => { const d = Vector.scale(normal, Vector.dotProduct(a, normal)) return Vector.subtract(Vector.scale(d, 2), a) } return Vector }34:T58e,fragment(` precision mediump float; uniform vec2 u_resolution; uniform float u_time; #define PI 3.1415926 //structs ${Ray()} ${Sphere()} // globals vec3 light = vec3(-30., 15., 20.); Sphere spheres[3]; ${initSpheres()} ${copySphere()} ${sphereNormal()} ${sphereIntersection()} ${sceneIntersection()} ${isLightVisible()} ${trace()} void main() { initSpheres(); // camera const vec3 cameraPoint = vec3(0., 1.8, 10.); const float cameraFieldOfView = 45.; const vec3 cameraVector = vec3(0., 3., 0.); vec3 eyeVector = normalize(cameraVector - cameraPoint); vec3 vpRight = normalize(cross(eyeVector, vec3(0.,1.,0.))); vec3 vpUp = normalize(cross(vpRight, eyeVector)); float fovRadians = PI * (cameraFieldOfView / 2.) / 180.; float width = u_resolution.x; float height = u_resolution.y; float heightWidthRatio = height / width; float halfWidth = tan(fovRadians); float halfHeight = heightWidthRatio * halfWidth; float camerawidth = halfWidth * 2.; float cameraheight = halfHeight * 2.; float pixelWidth = camerawidth / (width - 1.); float pixelHeight = cameraheight / (height - 1.); Ray ray; ray.point = cameraPoint; vec3 xcomp = vpRight * ((gl_FragCoord.x * pixelWidth) - halfWidth); vec3 ycomp = vpUp * ((gl_FragCoord.y * pixelHeight) - halfHeight); ray.vector = normalize(eyeVector + xcomp + ycomp); vec3 color = trace(ray); gl_FragColor = vec4(color, 1.0); } `)35:[] 2e:{"title":"Raytracing Studies","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`#### Resources:\n- [Literate Raytracer](https://tmcw.github.io/literate-raytracer/index.html)\n- [Introduction to Ray Tracing: a Simple Method for Creating 3D Images](https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/how-does-it-work)\n- [Ray Tracing: Graphics for the Masses](http://www.cs.unc.edu/~rademach/xroads-RT/RTarticle.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`___\n## Literate Raytracer\nFrom [Literate Raytracer](https://tmcw.github.io/literate-raytracer/index.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"canvas = {\n const c = DOM.canvas(w, h)\n c.style.width = `${w * 2}px`\n c.style.height = `${h * 2}px`\n c.style.backgroundColor = 'black'\n c.addEventListener('click', e => {\n mutable isPlaying = !isPlaying\n })\n return c\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`click the canvas to play/stop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"mutable isPlaying = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"w = width * 0.5 | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"h = 400 * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"scene = ({ \n camera: {\n point: {\n x: 0,\n y: 1.8,\n z: 10\n },\n fieldOfView: 45,\n vector: {\n x: 0,\n y: 3,\n z: 0\n }\n },\n\n lights: [{\n x: -30,\n y: -10,\n z: 20\n }],\n\n objects: [\n {\n type: 'sphere',\n point: {\n x: 0,\n y: 3.5,\n z: -3\n },\n color: {\n x: 155,\n y: 200,\n z: 155\n },\n specular: 0.2,\n lambert: 0.7,\n ambient: 0.1,\n radius: 3\n },\n {\n type: 'sphere',\n point: {\n x: -8,\n y: 1,\n z: -5\n },\n color: {\n x: 255,\n y: 100,\n z: 80\n },\n specular: 0.1,\n lambert: 0.9,\n ambient: 0.0,\n radius: 1.2\n },\n {\n type: 'sphere',\n point: {\n x: -4,\n y: 4.5,\n z: -1\n },\n color: {\n x: 155,\n y: 100,\n z: 255\n },\n specular: 0.2,\n lambert: 0.7,\n ambient: 0.1,\n radius: 0.8\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`___\n### GLSL Port`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"import { fragment } from '@makio135/hello-fragment'","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"Ray = () => `\nstruct Ray {\n vec3 point;\n vec3 vector;\n};`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"Sphere = () => `\nstruct Sphere {\n vec3 point;\n vec3 color;\n float specular;\n float lambert;\n float ambient;\n float radius;\n float dist;\n};`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"initSpheres = () => `\nvoid initSpheres() {\n spheres[0].point = vec3(0., 3.5, -3.);\n spheres[0].color = vec3(155., 200., 155.) / 255.;\n spheres[0].specular = 0.3;\n spheres[0].lambert = 0.7;\n spheres[0].ambient = 0.1;\n spheres[0].radius = 3.2;\n\n spheres[1].point = vec3(sin(u_time / 2.) * 5., 5.1, -3. + cos(u_time / 2.) * 5.);\n spheres[1].color = vec3(255., 100., 80.) / 255.;\n spheres[1].specular = 0.1;\n spheres[1].lambert = 0.9;\n spheres[1].ambient = 0.0;\n spheres[1].radius = 1.2;\n\n spheres[2].point = vec3(sin(u_time / 3.) * 4., 1.3, -3. + cos(u_time / 3.) * 4.);\n spheres[2].color = vec3(155., 100., 255.) / 255.;\n spheres[2].specular = 0.2;\n spheres[2].lambert = 0.7;\n spheres[2].ambient = 0.1;\n spheres[2].radius = 0.8;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"copySphere = () => `\nSphere copySphere(Sphere s) {\n Sphere t;\n t.point = s.point;\n t.color = s.color;\n t.specular = s.specular;\n t.lambert = s.lambert;\n t.ambient = s.ambient;\n t.radius = s.radius;\n t.dist = s.dist;\n return t;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"sphereNormal = () => `\nvec3 sphereNormal(Sphere s, vec3 pos){\n return normalize(pos - s.point);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`![](https://tmcw.github.io/literate-raytracer/graphics/sphereintersection.png)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"sphereIntersection = () => `\nfloat sphereIntersection(Sphere s, Ray ray) {\n vec3 eye_to_center = s.point - ray.point;\n float v = dot(eye_to_center, ray.vector);\n float eoDot = dot(eye_to_center, eye_to_center);\n float discriminant = (s.radius * s.radius) - eoDot + (v * v);\n\n return discriminant < 0. ? -1000. : v - sqrt(discriminant);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"sceneIntersection = () => `\nSphere sceneIntersection(Ray ray) {\n Sphere s;\n s.dist = 10000.;\n s.color = vec3(0.);\n for(int i = 0; i < 3; i ++) {\n float d = sphereIntersection(spheres[i], ray);\n if(d > -1000. && d < s.dist) {\n s = copySphere(spheres[i]);\n s.dist = d;\n }\n }\n return s;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"isLightVisible = () => `\nbool isLightVisible(vec3 pt) {\n Ray r;\n r.point = pt;\n r.vector = normalize(pt - light);\n Sphere s = sceneIntersection(r);\n return s.dist > -0.005 && s.dist < 10000.;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"md`![](http://farm3.staticflickr.com/2851/10524788334_f2e3903b36_b.jpg)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"trace = () => `\nvec3 trace(Ray ray) {\n Sphere s = sceneIntersection(ray);\n \n if(s.dist >= 1000.) return vec3(0.);\n\n vec3 pointAtTime = ray.point + ray.vector * s.dist;\n vec3 normal = normalize(light - pointAtTime);\n\n vec3 b = s.color;\n vec3 c = vec3(0.);\n\n float lambertAmount = 0.;\n if(s.lambert > 0. && isLightVisible(pointAtTime)) {\n float contrib = dot(normal, sphereNormal(s, pointAtTime));\n if(contrib > 0.) lambertAmount += contrib;\n }\n lambertAmount = min(1., lambertAmount);\n\n /*if (s.specular > 0.) {\n Ray reflectedRay;\n reflectedRay.point = pointAtTime;\n reflectedRay.vector = normal * dot(ray.vector, normal) * 2. - ray.vector;\n \n Sphere rs = sceneIntersection(reflectedRay);\n if(rs.dist > -0.005) c += rs.color * s.specular;\n }*/\n\n return c + b * lambertAmount * s.lambert + b * s.ambient;\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`___\n## Introduction to Ray Tracing\nFrom [Introduction to Ray Tracing: a Simple Method for Creating 3D Images](https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/how-does-it-work)\n![](https://www.scratchapixel.com/images/upload/introduction-to-ray-tracing/vantagepoint.png)\n\n**Only 2 types of materials**: metals which are called *conductors* vs *dielectrics*\n\n**Forward Tracing** (tracing rays from the light source) vs **Backward Tracing** (tracing from the eye)\n\n![](https://www.scratchapixel.com/images/upload/introduction-to-ray-tracing/reflectionrefraction.gif)`\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}