const w = innerWidth, h = innerHeight let ctx let PM, iPM // projection matrix + inverse let meshes = [] const maxDepth = 4 let drawingSpaceX = 1 let drawingSpaceY = 1 onload = () => { const cvs = document.querySelector('canvas') cvs.width = w cvs.height = h ctx = cvs.getContext('2d') generateProjectionMatrix() generateMeshes() animate() } let x = 0, y = 0, ray, color function animate() { for(let i = 0; i < 60; i++) { ray = Ray.toPixel(x, y) color = tracePath(ray, 0) ctx.fillStyle = 'rgb(' + 255*color[0] + ',' + 255*color[1] + ',' + 255*color[2] + ')' ctx.fillRect(x, y, w/drawingSpaceX, h/drawingSpaceY) x += w/drawingSpaceX if(x > w) { x = 0 y += h/drawingSpaceY if(y > h) { y = 0 drawingSpaceX += 4 drawingSpaceY += 4/w*h } } } requestAnimationFrame(animate) } function renderMeshes() { const size = 4 let x, y, ray, color for(y = 0; y < h; y += size) for(x = 0; x < w; x += size) { ray = Ray.toPixel(x, y) color = tracePath(ray, 0) ctx.fillStyle = 'rgb(' + 255*color[0] + ',' + 255*color[1] + ',' + 255*color[2] + ')' ctx.fillRect(x, y, size, size) } } function tracePath(ray, depth) { if(depth == maxDepth) return [0, 0, 0] const {hit, point, closest: mesh} = ray.intersection() if(!hit) return [0, 0, 0] const n = mesh.normalAt(point) const iters = 6 let result = mesh.emittance const BRDF = mesh.reflectance let rnd, dir, newRay, cosa, reflected const ref = ray.reflection(point, n).dir for(let i = 0; i < iters; i++) { rnd = Vector.randInHemisphere(n) dir = Vector.lerp(ref, rnd, 0.1) newRay = new Ray(point, dir) cosa = Vector.dot(newRay.dir, n) reflected = tracePath(newRay, depth+1) result = Vector.add(result, Vector.mult(BRDF * cosa / iters, reflected)) } return result } function generateMeshes() { meshes.push(new Sphere([ 5.1, 0, 18], 5)) meshes.push(new Sphere([-5.1, 0, 18], 5)) meshes.push(new Sphere([2, 8, 20], 4)) meshes.push(new Sphere([-6, 9, 17], 3)) meshes[0].emittance = [1, 0.2, 0.2] meshes[0].reflectance = 0.8 meshes[1].emittance = [0.2, 0.8, 0.4] meshes[1].reflectance = 0.75 meshes[2].emittance = [0.3, 0.4, 0.5] meshes[3].emittance = [1, 1, 1] } function generateProjectionMatrix() { const fov = 70 * Math.PI/180 const near = 0.01, far = 1000 const asp = h/w const tg = Math.tan(fov/2) PM = [ [asp/tg, 0, 0, 0], [0, 1/tg, 0, 0], [0, 0, -(far + near)/(far - near), 0], [0, 0, 0, -2*far*near/(far - near)] ] iPM = math.inv(PM) } function project(point) { point = point.concat([1]) let proj = [0, 0, 0, 0] PM.forEach(row => row.forEach ((x, i) => proj[i] += x*point[i])) var z = proj[2] var x = w/2 + w/2*proj[0]/z var y = h/2 - h/2*proj[1]/z return [x, y] } function unproject(point) { point = point.concat([1]) let proj = [0, 0, 0, 0] iPM.forEach(row => row.forEach ((x, i) => proj[i] += x*point[i])) return proj } class Ray { constructor(start, direction) { this.start = start this.dir = Vector.normalize(direction) } static fromPoints(p1, p2) { const dir = Vector.sub(p2, p1) return new Ray(p1, dir) } static toPixel(x, y) { const z = 100 x = (x/(w/2) - 1) * z y = (1 - y/(h/2)) * z let dir = [x, y, -z] dir = unproject(dir) return new Ray([0, 0, 0], dir) } reflection(point, n) { const dot = Vector.dot(this.dir, n) const dir = Vector.add(this.dir, Vector.mult(-2*dot, n)) return new Ray(point, dir) } intersection() { let point = this.start let distance = 0 let delta = 1, d let step = 0 const maxStep = 80 let closest = null while(delta > 1e-12 && step++ < maxStep) { delta = Infinity meshes.forEach(mesh => { if(Vector.dot(this.dir, Vector.sub(mesh.c, this.start)) < 0) return d = mesh.distance(point) if(d < delta) { delta = d closest = mesh } }) distance += delta point = Vector.add(point, Vector.mult(delta, this.dir)) } return { hit: step < maxStep || delta < 1, closest, distance, point } } } class Sphere { constructor(center, radius) { this.c = center this.r = radius this.emittance = [0.1, 0.1, 0.1] this.reflectance = 0.25 } distance(point) { const dir = Vector.sub(point, this.c) const dist = Vector.len(dir) return dist - this.r } normalAt(point) { let n = Vector.sub(point, this.c) return Vector.normalize(n) } } class Vector { static add(a, b) { return [a[0] + b[0], a[1] + b[1], a[2] + b[2]] } static sub(a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2]] } static mult(s, a) { return [s*a[0], s*a[1], s*a[2]] } static len(a) { return Math.hypot(a[0], a[1], a[2]) } static normalize(a) { const len = Math.hypot(a[0], a[1], a[2]) return [a[0]/len, a[1]/len, a[2]/len] } static dot(a, b) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2] } static randInHemisphere(n) { const angle1 = 2*Math.PI * Math.random() const angle2 = 2*Math.PI * Math.random() let x = Math.cos(angle1) * Math.cos(angle2) let y = Math.sin(angle1) * Math.cos(angle2) let z = Math.sin(angle2) const dot = x*n[0] + y*n[1] + z*n[2] if(dot < 0.8) return Vector.randInHemisphere(n) if(dot < 0) { x -= 2 * dot * n[0] y -= 2 * dot * n[1] z -= 2 * dot * n[2] } return [x, y, z] } static lerp(a, b, v) { return [ (1 - v) * a[0] + v * b[0], (1 - v) * a[1] + v * b[1], (1 - v) * a[2] + v * b[2]] } }

Path tracing algorithm