// MIT License - Path Tracer // Just playing around with learning Javascript and seeing how fast I can get a Pathtracer // Controls: // d => Toggle Denoiser // 1 => Scene 1 // 2 => Scene 2 // 3 => Scene 3 // 4 => Scene 4 // 5 => Scene 5 // TODOs: // 1 - Vector math can be optimized further by eliminating the arrays const bounces = 5; const res = 2; const screenWidth = width / res; const screenHeight = height / res; // Const arrays to avoid GC const intersectPoint = new Float32Array(3); const ret = new Float32Array(3); const throughput = new Float32Array(3); let denoise = false; // ======================================================= // Vector Math // ======================================================= function dot(v1, v2) { return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]; } function add(v1, v2) { return [v1[0] + v2[0], v1[1] + v2[1], v1[2] + v2[2]]; } function sub(v1, v2) { return [v1[0] - v2[0], v1[1] - v2[1], v1[2] - v2[2]]; } function mul(v, scalar) { return [v[0] * scalar, v[1] * scalar, v[2] * scalar]; } function length(v) { return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); } function distance(point1, point2) { const dx = point2[0] - point1[0]; const dy = point2[1] - point1[1]; const dz = point2[2] - point1[2]; return Math.sqrt(dx * dx + dy * dy + dz * dz); } function clamp(value, min, max) { return Math.min(Math.max(value, min), max); } function pow(vec, exponent) { return vec.map(component => Math.pow(component, exponent)); } function normalize(v) { let len = length(v); return [v[0] / len, v[1] / len, v[2] / len]; } // ======================================================= // ======================================================= // Scenes // ======================================================= const SPHERE = 0; const PLANE = 1; const scene1 = [{ type: SPHERE, center: [3, 5, 5], radius: 0.5, id: [ [0.9, 0.7, 0.7], 0.0, true ] }, { type: SPHERE, center: [2, -1, 6], radius: 2, id: [ [0.7, 0.9, 0.7], 0.8, false ] }, { type: SPHERE, center: [-2, 2, 7], radius: 1.5, id: [ [0.7, 0.7, 0.9], 0.2, false ] }, { type: PLANE, point: [0, -1, 0], normal: [0, 1, 0], id: [ [0.7, 0.7, 0.7], 0.0, false ] }, { type: PLANE, point: [-4, 0, 0], normal: [1, 0, 0], id: [ [0.9, 0.1, 0.1], 1.0, false ] }, { type: PLANE, point: [4, 0, 0], normal: [-1, 0, 0], id: [ [0.1, 0.9, 0.1], 1.0, false ] }, { type: PLANE, point: [0, 0, 9], normal: [0, 0, -1], id: [ [0.1, 0.9, 0.1], 1.0, false ] }, { type: PLANE, point: [0, 6, 0], normal: [0, -1, 0], id: [ [0.7, 0.7, 0.7], 1.0, false ] }, { type: PLANE, point: [0, 0, -14], normal: [0, 0, 1], id: [ [0.7, 0.7, 0.7], 1.0, false ] }, ]; const scene2 = [{ type: SPHERE, center: [3, 4, 6], radius: 1, id: [ [0.9, 0.7, 0.7], 0.0, true ] }, { type: SPHERE, center: [2, -1, 6], radius: 2, id: [ [0.7, 0.9, 0.7], 0.8, false ] }, { type: SPHERE, center: [-2, 2, 7], radius: 1.5, id: [ [0.7, 0.7, 0.9], 0.2, false ] }, { type: PLANE, point: [0, -1, 0], normal: [0, 1, 0], id: [ [0.7, 0.7, 0.7], 1.0, false ] }, ]; const scene3 = [{ type: SPHERE, center: [0, -1, 4], radius: 1, id: [ [0.1, 0.1, 0.9], 0.0, true ] }, { type: SPHERE, center: [-1, 3, 5], radius: 1.5, id: [ [0.9, 0.1, 0.1], 0.2, false ] }, { type: SPHERE, center: [2, 1, 7], radius: 2, id: [ [0.1, 0.9, 0.1], 0.5, false ] }, { type: PLANE, point: [0, -2, 0], normal: [0, 1, 0], id: [ [0.8, 0.8, 0.8], 1.0, false ] }, { type: PLANE, point: [0, 0, 10], normal: [0, 0, -1], id: [ [0.7, 0.7, 0.9], 1.0, false ] }, ]; const scene4 = [{ type: SPHERE, center: [3, 3, 3], radius: 1, id: [ [0.9, 0.1, 0.9], 0.0, true ] }, { type: SPHERE, center: [-3, 2, 6], radius: 1.8, id: [ [0.9, 0.9, 0.1], 0.1, false ] }, { type: SPHERE, center: [1, -1, 5], radius: 1.2, id: [ [0.1, 0.9, 0.9], 0.7, false ] }, { type: PLANE, point: [0, -2, 0], normal: [0, 1, 0], id: [ [0.6, 0.6, 0.6], 0.2, false ] }, ]; const CORNELL_BOX_SIZE = 10; const HALF_SIZE = CORNELL_BOX_SIZE / 2; const scene5 = [ // Light source (small bright sphere at the top) { type: SPHERE, center: [0, HALF_SIZE, CORNELL_BOX_SIZE], radius: 0.5, id: [ [1, 1, 1], 1.0, true ] }, { type: PLANE, point: [-HALF_SIZE, 0, CORNELL_BOX_SIZE], normal: [1, 0, 0], id: [ [0.75, 0.25, 0.25], 1.0, false ] }, { type: PLANE, point: [HALF_SIZE, 0, CORNELL_BOX_SIZE], normal: [-1, 0, 0], id: [ [0.25, 0.75, 0.25], 1.0, false ] }, { type: PLANE, point: [0, 0, HALF_SIZE + CORNELL_BOX_SIZE], normal: [0, 0, -1], id: [ [0.75, 0.75, 0.75], 1.0, false ] }, { type: PLANE, point: [0, -HALF_SIZE, CORNELL_BOX_SIZE], normal: [0, 1, 0], id: [ [0.75, 0.75, 0.75], 1.0, false ] }, { type: PLANE, point: [0, HALF_SIZE, CORNELL_BOX_SIZE], normal: [0, -1, 0], id: [ [0.75, 0.75, 0.75], 1.0, false ] }, { type: SPHERE, center: [-2, -HALF_SIZE + 2, CORNELL_BOX_SIZE], radius: 2, id: [ [0.99, 0.99, 0.99], 0.2, false ] }, { type: SPHERE, center: [2, -HALF_SIZE + 1.5, 2 + CORNELL_BOX_SIZE], radius: 1.5, id: [ [0.99, 0.99, 0.99], 0.9, false ] }, ]; let currentScene = scene5; function sceneIntersect(origin, direction) { let closestIntersect = Infinity; let closestObject = null; for (let obj of currentScene) { let intersect; if (obj.type === SPHERE) { intersect = intersectSphere(origin, direction, obj.center, obj.radius); } else { intersect = intersectPlane(origin, direction, obj.point, obj.normal); } if (intersect < closestIntersect) { closestIntersect = intersect; closestObject = obj; } } if (closestObject) { const ipx = origin[0] + (direction[0] * closestIntersect); const ipy = origin[1] + (direction[1] * closestIntersect); const ipz = origin[2] + (direction[2] * closestIntersect); let normal; if (closestObject.type === SPHERE) { const x = ipx - closestObject.center[0]; const y = ipy - closestObject.center[1]; const z = ipz - closestObject.center[2]; const invLength = 1 / Math.sqrt(x * x + y * y + z * z); normal = [ x * invLength, y * invLength, z * invLength ]; } else { normal = closestObject.normal; } return { point: [ipx, ipy, ipz], normal: normal, id: closestObject.id }; } return { point: null, normal: null, id: null }; } // Avoids GC function intersectSphere(origin, direction, center, radius) { const ox = origin[0] - center[0]; const oy = origin[1] - center[1]; const oz = origin[2] - center[2]; const dx = direction[0]; const dy = direction[1]; const dz = direction[2]; const a = dx * dx + dy * dy + dz * dz; const b = 2.0 * (ox * dx + oy * dy + oz * dz); const c = (ox * ox + oy * oy + oz * oz) - radius * radius; const discriminant = b * b - 4 * a * c; if (discriminant < 0) return Infinity; const sqrtDiscriminant = Math.sqrt(discriminant); const t1 = (-b - sqrtDiscriminant) / (2.0 * a); const t2 = (-b + sqrtDiscriminant) / (2.0 * a); if (t1 > 0) return t1; else if (t2 > 0) return t2; return Infinity; } // Avoids GC function intersectPlane(origin, direction, point, normal) { const ox = origin[0], oy = origin[1], oz = origin[2]; const dx = direction[0], dy = direction[1], dz = direction[2]; const nx = normal[0], ny = normal[1], nz = normal[2]; const px = point[0], py = point[1], pz = point[2]; const denom = dx * nx + dy * ny + dz * nz; if (Math.abs(denom) > 1e-6) { const t = ((px - ox) * nx + (py - oy) * ny + (pz - oz) * nz) / denom; return t >= 0 ? t : Infinity; } return Infinity; } // ======================================================= // ======================================================= // The Core Pathtracer // ======================================================= let LIGHTCOLOR = mul([16.8, 10.7, 8.2], 1.3); function randomUnitSphere(x0, y0, z0, radius) { var u = Math.random(); var v = Math.random(); var theta = 2 * Math.PI * u; var phi = Math.acos(2 * v - 1); var x = x0 + (radius * Math.sin(phi) * Math.cos(theta)); var y = y0 + (radius * Math.sin(phi) * Math.sin(theta)); var z = z0 + (radius * Math.cos(phi)); return [x, y, z]; } function cosWeightedRandomHemisphereDirection(n) { const r1 = Math.random(); const r2 = Math.random(); const nx = n[0]; const ny = n[1]; const nz = n[2]; let ux, uy, uz; if (Math.abs(nx) < 0.9) { const invLen = 1 / Math.sqrt(ny * ny + nz * nz); ux = 0; uy = -nz * invLen; uz = ny * invLen; } else { const invLen = 1 / Math.sqrt(nx * nx + nz * nz); ux = nz * invLen; uy = 0; uz = -nx * invLen; } const vx = ny * uz - nz * uy; const vy = nz * ux - nx * uz; const vz = nx * uy - ny * ux; const ra = Math.sqrt(r2); const rx = ra * Math.cos(6.2831 * r1); const ry = ra * Math.sin(6.2831 * r1); const rz = Math.sqrt(1.0 - r2); // Compute final direction let x = rx * ux + ry * vx + rz * nx; let y = rx * uy + ry * vy + rz * ny; let z = rx * uz + ry * vz + rz * nz; // Normalize the result const invLen = 1 / Math.sqrt(x * x + y * y + z * z); x *= invLen; y *= invLen; z *= invLen; return { x: x, y: y, z: z }; } function traceScene(screenX, screenY, origin, direction, depth) { ret[0] = 0.0; ret[1] = 0.0; ret[2] = 0.0; throughput[0] = 1.0; throughput[1] = 1.0; throughput[2] = 1.0; let firstPoint = [0.0, 0.0, 0.0]; let firstNormal = [0.0, 0.0, 0.0]; let firstRoughness = 0.0; let didStore = false; let bias = 1.0; for (let x = 0; x < bounces; x++) { let result; if (x == 0) result = gBuffer[screenX][screenY]; else result = sceneIntersect(origin, direction); if (result.point === null) { // Ray miss ret[0] += 0.3 * throughput[0]; ret[1] += 0.3 * throughput[1]; ret[2] += 0.3 * throughput[2]; break; } const point = result.point; const nx = result.normal[0]; const ny = result.normal[1]; const nz = result.normal[2]; const id = result.id; if (!didStore) { // && id[1] > 0.0 && x < 2) { didStore = true; firstPoint = point; firstNormal = result.normal; firstRoughness = id[1]; } if (id[2]) { ret[0] += (LIGHTCOLOR[0] * throughput[0]) * bias; ret[1] += (LIGHTCOLOR[1] * throughput[1]) * bias; ret[2] += (LIGHTCOLOR[2] * throughput[2]) * bias; } throughput[0] *= id[0][0]; throughput[1] *= id[0][1]; throughput[2] *= id[0][2]; if (x == bounces - 1) break; // Prepare for the next bounce origin[0] = point[0] + (nx * 0.02); origin[1] = point[1] + (ny * 0.02); origin[2] = point[2] + (nz * 0.02); const dx = direction[0]; const dy = direction[1]; const dz = direction[2]; const randomDirection = cosWeightedRandomHemisphereDirection(result.normal); const t = id[1]; // Reflected Direction const rx = dx - 2 * (dx * nx + dy * ny + dz * nz) * nx; const ry = dy - 2 * (dx * nx + dy * ny + dz * nz) * ny; const rz = dz - 2 * (dx * nx + dy * ny + dz * nz) * nz; direction = [ rx * (1 - t) + randomDirection.x * t, ry * (1 - t) + randomDirection.y * t, rz * (1 - t) + randomDirection.z * t ]; // direct light sampling const lightRadius = currentScene[0].radius; const lightSamplePos = randomUnitSphere(currentScene[0].center[0], currentScene[0].center[1], currentScene[0].center[2], lightRadius); // Light Direction const ldx = lightSamplePos[0] - origin[0]; const ldy = lightSamplePos[1] - origin[1]; const ldz = lightSamplePos[2] - origin[2]; // Normalize const invLen = 1 / Math.sqrt(ldx * ldx + ldy * ldy + ldz * ldz); const nld = [ldx * invLen, ldy * invLen, ldz * invLen]; // Small offset towards light fixes some artifacts const shadow = sceneIntersect(add(origin, mul(nld, 0.0001)), nld); if (shadow.point !== null) { // the ray hit something, check to see if it was the light source const raylength = distance(origin, shadow.point); const distToLight = distance(origin, currentScene[0].center) - lightRadius - 0.001; if (raylength >= distToLight) { ret[0] += (LIGHTCOLOR[0] * throughput[0]) * (clamp(dot(nld, result.normal), 0., 1.) * 0.03) * (id[1]); ret[1] += (LIGHTCOLOR[1] * throughput[1]) * (clamp(dot(nld, result.normal), 0., 1.) * 0.03) * (id[1]); ret[2] += (LIGHTCOLOR[2] * throughput[2]) * (clamp(dot(nld, result.normal), 0., 1.) * 0.03) * (id[1]); } } // Russian Roulette const p = Math.max(throughput[0], Math.max(throughput[1], throughput[2])); if (Math.random() > p) break; const invP = 1.0 / p; throughput[0] *= invP; throughput[1] *= invP; throughput[2] *= invP; } return { color: ret, hitPoint: firstPoint, normal: firstNormal, roughness: firstRoughness, }; } // ======================================================= // ======================================================= // Main Loop, Denoise & Draw To Screen // ======================================================= let accumulationBuffer, hitPointBuffer, normalBuffer, roughnessBuffer; let gBuffer; let sampleCount = 0; let scanline = 0; function applyDenoise(x, y, screenWidth, screenHeight) { const [r, g, b] = accumulationBuffer[x][y]; const luminance = r * 0.2125 + g * 0.7154 + b * 0.0721; let sumR = r, sumG = g, sumB = b; let count = 1.0; const radius = 2; const [nx, ny, nz] = normalBuffer[x][y]; const [hx, hy, hz] = hitPointBuffer[x][y]; const roughness = roughnessBuffer[x][y]; const roughnessWeight = 0.25 + (roughness * 0.75); for (let dx = Math.max(0, x - radius); dx <= Math.min(screenWidth - 1, x + radius); dx++) { for (let dy = Math.max(0, y - radius); dy <= Math.min(screenHeight - 1, y + radius); dy++) { if (dx === x && dy === y) continue; const [nr, ng, nb] = normalBuffer[dx][dy]; const normalWeight = Math.max(0.0, nx * nr + ny * ng + nz * nb); const [hr, hg, hb] = hitPointBuffer[dx][dy]; const dx2 = hx - hr, dy2 = hy - hg, dz2 = hz - hb; const distWeight = 1.0 - Math.min(1.0, Math.sqrt(dx2 * dx2 + dy2 * dy2 + dz2 * dz2)); const [cr, cg, cb] = accumulationBuffer[dx][dy]; const neighborLuminance = cr * 0.2125 + cg * 0.7154 + cb * 0.0721; const luminanceDifference = Math.abs(luminance - neighborLuminance); const luminanceWeight = 1.0 - Math.min(1.0, luminanceDifference * 0.0015); const totalWeight = normalWeight * distWeight * luminanceWeight * roughnessWeight; sumR += cr * totalWeight; sumG += cg * totalWeight; sumB += cb * totalWeight; count += totalWeight; } } const invCount = 1 / count; return [sumR * invCount, sumG * invCount, sumB * invCount]; } function linearToSRGB(color) { return color.map(c => { if (c <= 0.0031308) { return 12.92 * c; } else { return 1.055 * Math.pow(c, 1.0 / 2.4) - 0.055; } }); } function acesTonemapper(color) { const a = 2.51; const b = 0.03; const c = 2.43; const d = 0.59; const e = 0.14; let x = color.map(channel => { return (channel * (a * channel + b)) / (channel * (c * channel + d) + e); }); // Ensure the output is in the range [0, 1] return x.map(channel => clamp(channel, 0, 1)); } function GetRayDirection(fieldOfView, size, fragCoord) { const halfWidth = size[0] * 0.5; const halfHeight = size[1] * 0.5; const aspectRatio = size[0] / size[1]; const fovRadians = fieldOfView * (Math.PI / 180); const x = (fragCoord[0] - halfWidth) * aspectRatio; const y = fragCoord[1] - halfHeight; const z = size[1] / Math.tan(fovRadians / 2.0); const length = Math.sqrt(x * x + y * y + z * z); const invLength = 1 / length; return [ x * invLength, y * invLength, z * invLength ]; } draw = function() { p5.disableFriendlyErrors = true; // disables FES, No idea if this works here if (accumulationBuffer == null) { accumulationBuffer = Array(screenWidth).fill().map(() => Array(screenHeight).fill([0, 0, 0])); hitPointBuffer = Array(screenWidth).fill().map(() => Array(screenHeight).fill(null)); normalBuffer = Array(screenWidth).fill().map(() => Array(screenHeight).fill(null)); roughnessBuffer = Array(screenWidth).fill().map(() => Array(screenHeight).fill(null)); } if (gBuffer == null) { gBuffer = Array(screenWidth).fill().map(() => Array(screenHeight).fill(null)); for (let x = 0; x < screenWidth; x++) { for (let y = 0; y < screenHeight; y++) { const rd = GetRayDirection(80, [width, height], [(x / screenWidth) * width, (y / screenHeight) * height]); gBuffer[x][y] = sceneIntersect([0, 0, -10], rd); } } } // 2 Samples per pixels, Raise this value to overcome VSync limitations for (let i = 0; i < 1; i++) { //if (sampleCount !== 0) break; // Uncomment to only see the first frame for (let x = 0; x < screenWidth; x++) { for (let y = 0; y < screenHeight; y++) { const rd = GetRayDirection(80, [width, height], [(x / screenWidth) * width, (y / screenHeight) * height]); const result = traceScene(x, y, [0, 0, -10], rd, 0); accumulationBuffer[x][y] = add(accumulationBuffer[x][y], result.color); hitPointBuffer[x][y] = result.hitPoint; normalBuffer[x][y] = result.normal; roughnessBuffer[x][y] = result.roughness; } } sampleCount++; } //console.log(frameRate()); // Due to the cost of Denoising and Rendering to screen // I've opted to only render a line to the screen at a time // Apply blur and render for (let x = 0; x < screenWidth; x++) { const scanHeight = 16 / res; for (let scan = 0; scan < scanHeight; scan++) { let y = ((scanline * scanHeight) % screenHeight) + scan if (y >= screenHeight) break; let finalColor = mul(accumulationBuffer[x][y], 1 / (sampleCount + 1)); if (denoise) { let denoisedColor = applyDenoise(x, y, screenWidth, screenHeight); finalColor = mul(denoisedColor, 1 / (sampleCount + 1)); } // Aces Tonemapping finalColor = acesTonemapper(finalColor); // Gamma Correct finalColor = pow(finalColor, 1.0 / 2.2); fill(finalColor[0] * 255, finalColor[1] * 255, finalColor[2] * 255); noStroke(); rect(x * res, height - (y * res) - res, res, res); } } scanline++; } // ======================================================= // ======================================================= // Interation // ======================================================= keyPressed = function() { if (key === 'd') { denoise = !denoise; } let reset = false; if (key === '1') { currentScene = scene1; reset = true; } if (key === '2') { currentScene = scene2; reset = true; } if (key === '3') { currentScene = scene3; reset = true; } if (key === '4') { currentScene = scene4; reset = true; } if (key === '5') { currentScene = scene5; reset = true; } if (reset) { sampleCount = 0; scanline = 0; accumulationBuffer = null; hitPointBuffer = null; normalBuffer = null; roughnessBuffer = null; gBuffer = null; } } // =======================================================

Codecasts

Made by awesome people

Recently Published