// MIT License - Simple Path Tracer // Experimented with using Luminance with a simple Denoiser to retain Specular Highlights Math.radians = function(degrees) { return degrees * Math.PI / 180; } function GetRayDirection(fieldOfView, size, fragCoord) { let xy = [fragCoord[0] - size[0] / 2.0, fragCoord[1] - size[1] / 2.0]; let z = size[1] / Math.tan(Math.radians(fieldOfView) / 2.0); let value = [xy[0], xy[1], z]; let ls = value[0] * value[0] + value[1] * value[1] + value[2] * value[2]; let length = Math.sqrt(ls); return [value[0] / length, value[1] / length, value[2] / length]; } 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 mulV(v, v2) { return [v[0] * v2[0], v[1] * v2[1], v[2] * v2[2]]; } function length(v) { return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); } function reflect(v, normal) { return sub(v, mul(normal, 2 * dot(v, normal))); } function mix(v1, v2, t) { return [ v1[0] * (1 - t) + v2[0] * t, v1[1] * (1 - t) + v2[1] * t, v1[2] * (1 - t) + v2[2] * t ]; } function clamp(value, min, max) { return Math.min(Math.max(value, min), max); } 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 pow(vec, exponent) { return vec.map(component => Math.pow(component, exponent)); } function sign(x) { if (Array.isArray(x)) { // If x is a vector, apply sign to each component return x.map(sign); } else { // For scalar values return x > 0 ? 1 : x < 0 ? -1 : 0; } } function normalize(v) { let len = length(v); return [v[0] / len, v[1] / len, v[2] / len]; } function intersectSphere(origin, direction, center, radius) { let oc = sub(origin, center); let a = dot(direction, direction); let b = 2.0 * dot(oc, direction); let c = dot(oc, oc) - radius * radius; let discriminant = b * b - 4 * a * c; if (discriminant < 0) { return Infinity; } else { let t = (-b - Math.sqrt(discriminant)) / (2.0 * a); return t > 0 ? t : Infinity; } } function intersectPlane(origin, direction, point, normal) { let denom = dot(direction, normal); if (Math.abs(denom) > 1e-6) { let t = dot(sub(point, origin), normal) / denom; return t >= 0 ? t : Infinity; } return Infinity; } function sphereNormal(point, center, radius) { return normalize(sub(point, center)); } function intersectBox(origin, direction, min, max) { let tmin = (min[0] - origin[0]) / direction[0]; let tmax = (max[0] - origin[0]) / direction[0]; if (tmin > tmax)[tmin, tmax] = [tmax, tmin]; let tymin = (min[1] - origin[1]) / direction[1]; let tymax = (max[1] - origin[1]) / direction[1]; if (tymin > tymax)[tymin, tymax] = [tymax, tymin]; if ((tmin > tymax) || (tymin > tmax)) return Infinity; if (tymin > tmin) tmin = tymin; if (tymax < tmax) tmax = tymax; let tzmin = (min[2] - origin[2]) / direction[2]; let tzmax = (max[2] - origin[2]) / direction[2]; if (tzmin > tzmax)[tzmin, tzmax] = [tzmax, tzmin]; if ((tmin > tzmax) || (tzmin > tmax)) return Infinity; if (tzmin > tmin) tmin = tzmin; if (tzmax < tmax) tmax = tzmax; return tmin > 0 ? tmin : tmax > 0 ? tmax : Infinity; } function boxNormal(point, min, max) { const epsilon = 1e-6; if (Math.abs(point[0] - min[0]) < epsilon) return [-1, 0, 0]; if (Math.abs(point[0] - max[0]) < epsilon) return [1, 0, 0]; if (Math.abs(point[1] - min[1]) < epsilon) return [0, -1, 0]; if (Math.abs(point[1] - max[1]) < epsilon) return [0, 1, 0]; if (Math.abs(point[2] - min[2]) < epsilon) return [0, 0, -1]; if (Math.abs(point[2] - max[2]) < epsilon) return [0, 0, 1]; return [0, 1, 0]; // Default normal if point is not on the surface } function sceneIntersect(origin, direction) { let scene1 = [{ intersect: intersectSphere(origin, direction, [4, 7, 5], 2), center: [4, 7, 5], radius: 2, id: [ [0.9, 0.7, 0.7], 0.0, [15, 15, 15] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [2, -1, 6], 2), center: [2, -1, 6], radius: 2, id: [ [0.7, 0.9, 0.7], 0.8, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [-2, 2, 7], 1.5), center: [-2, 2, 7], radius: 1.5, id: [ [0.7, 0.7, 0.9], 0.2, [0, 0, 0] ], type: 'sphere' }, //{ intersect: intersectSphere(origin, direction, [-3, -1, 6], 1), center: [-3, -1, 6], radius: 1, id: [[0.7, 0.9, 0.7], 0.8, [0, 0, 15]], type: 'sphere' }, { intersect: intersectPlane(origin, direction, [0, -1, 0], [0, 1, 0]), normal: [0, 1, 0], id: [ [0.7, 0.7, 0.7], 0.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [-4, 0, 0], [1, 0, 0]), normal: [1, 0, 0], id: [ [0.9, 0.1, 0.1], 1.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [4, 0, 0], [-1, 0, 0]), normal: [-1, 0, 0], id: [ [0.1, 0.9, 0.1], 1.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [0, 0, 9], [0, 0, -1]), normal: [0, 0, -1], id: [ [0.1, 0.9, 0.1], 1.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [0, 6, 0], [0, -1, 0]), normal: [0, -1, 0], id: [ [0.7, 0.7, 0.7], 1.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [0, 0, -14], [0, 0, -1]), normal: [0, 0, 1], id: [ [0.7, 0.7, 0.7], 1.0, [0, 0, 0] ], type: 'plane' }, ]; let scene2 = [{ intersect: intersectSphere(origin, direction, [3, 4, 6], 1), center: [3, 4, 6], radius: 1, id: [ [0.9, 0.7, 0.7], 0.0, [25, 25, 25] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [2, -1, 6], 2), center: [2, -1, 6], radius: 2, id: [ [0.7, 0.9, 0.7], 0.8, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [-2, 2, 7], 1.5), center: [-2, 2, 7], radius: 1.5, id: [ [0.7, 0.7, 0.9], 0.2, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectPlane(origin, direction, [0, -1, 0], [0, 1, 0]), normal: [0, 1, 0], id: [ [0.7, 0.7, 0.7], 1.0, [0, 0, 0] ], type: 'plane' }, ]; let scene3 = [{ intersect: intersectSphere(origin, direction, [-1, 3, 5], 1.5), center: [-1, 3, 5], radius: 1.5, id: [ [0.9, 0.1, 0.1], 0.2, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [2, 1, 7], 2), center: [2, 1, 7], radius: 2, id: [ [0.1, 0.9, 0.1], 0.5, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [0, -1, 4], 1), center: [0, -1, 4], radius: 1, id: [ [0.1, 0.1, 0.9], 0.0, [20, 20, 20] ], type: 'sphere' }, { intersect: intersectPlane(origin, direction, [0, -2, 0], [0, 1, 0]), normal: [0, 1, 0], id: [ [0.8, 0.8, 0.8], 1.0, [0, 0, 0] ], type: 'plane' }, { intersect: intersectPlane(origin, direction, [0, 0, 10], [0, 0, -1]), normal: [0, 0, -1], id: [ [0.7, 0.7, 0.9], 1.0, [0, 0, 0] ], type: 'plane' }, ]; let scene4 = [{ intersect: intersectSphere(origin, direction, [-3, 2, 6], 1.8), center: [-3, 2, 6], radius: 1.8, id: [ [0.9, 0.9, 0.1], 0.1, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [1, -1, 5], 1.2), center: [1, -1, 5], radius: 1.2, id: [ [0.1, 0.9, 0.9], 0.7, [0, 0, 0] ], type: 'sphere' }, { intersect: intersectSphere(origin, direction, [3, 3, 3], 1), center: [3, 3, 3], radius: 1, id: [ [0.9, 0.1, 0.9], 0.0, [30, 30, 30] ], type: 'sphere' }, { intersect: intersectPlane(origin, direction, [0, -2, 0], [0, 1, 0]), normal: [0, 1, 0], id: [ [0.6, 0.6, 0.6], 0.2, [0, 0, 0] ], type: 'plane' }, ]; let scene5 = [ // Floor { intersect: intersectBox(origin, direction, [-32, -2, -32], [32, -1.9, 32]), min: [-32, -2, -32], max: [32, -1.9, 32], id: [ [0.6, 0.6, 0.5], 0.95, [0, 0, 0] ], type: 'box' }, // Columns in a circle { intersect: intersectBox(origin, direction, [5, -2, 5], [6, 8, 6]), min: [5, -2, 5], max: [6, 8, 6], id: [ [0.75, 0.7, 0.65], 0.9, [0, 0, 0] ], type: 'box' }, { intersect: intersectBox(origin, direction, [3.5, -2, 8.5], [4.5, 8, 9.5]), min: [3.5, -2, 8.5], max: [4.5, 8, 9.5], id: [ [0.75, 0.7, 0.65], 0.9, [0, 0, 0] ], type: 'box' }, { intersect: intersectBox(origin, direction, [0, -2, 10], [1, 8, 11]), min: [0, -2, 10], max: [1, 8, 11], id: [ [0.75, 0.7, 0.65], 0.9, [0, 0, 0] ], type: 'box' }, { intersect: intersectBox(origin, direction, [-3.5, -2, 8.5], [-2.5, 8, 9.5]), min: [-3.5, -2, 8.5], max: [-2.5, 8, 9.5], id: [ [0.75, 0.7, 0.65], 0.9, [0, 0, 0] ], type: 'box' }, { intersect: intersectBox(origin, direction, [-5, -2, 5], [-4, 8, 6]), min: [-5, -2, 5], max: [-4, 8, 6], id: [ [0.75, 0.7, 0.65], 0.9, [0, 0, 0] ], type: 'box' }, // Light sources { intersect: intersectSphere(origin, direction, [0.5, 5, 10], 2), center: [0.5, 5, 10], radius: 2, id: [ [1, 1, 0.8], 0.0, [15, 15, 12] ], type: 'sphere' }, ]; let objects = scene1; let closest = objects.reduce((a, b) => a.intersect < b.intersect ? a : b); if (closest.intersect < Infinity) { let point = add(origin, mul(direction, closest.intersect)); let normal; if (closest.type === 'sphere') { normal = sphereNormal(point, closest.center, closest.radius); } else if (closest.type === 'plane') { normal = closest.normal; } else if (closest.type === 'box') { normal = boxNormal(point, closest.min, closest.max); } return { point: point, normal: normal, id: closest.id }; } return { point: null, normal: null, id: null }; } function randomSpherePoint(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 randomHemispherePoint(normal) { let v = randomSpherePoint(0, 0, 0, 1.0); return mul(v, sign(dot(v, normal))); } function traceScene(origin, direction, depth) { let ret = [0.0, 0.0, 0.0]; let throughput = [1.0, 1.0, 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; for (let x = 0; x < 6; x++) { let result = sceneIntersect(origin, direction); let point = result.point; let normal = result.normal; let id = result.id; if (point === null) { // Ray miss ret = add(ret, mulV([0.3, 0.3, 0.3], throughput)); //ret = add(ret, mulV([135 / 255, 206 / 255, 235 / 255], throughput)); break; } if (!didStore) { didStore = true; firstPoint = point; firstNormal = normal; firstRoughness = id[1]; } let color = id[0]; let roughness = id[1]; let emission = id[2]; ret = add(ret, mulV(emission, throughput)); throughput = mulV(throughput, color); // Russian Roulette let p = Math.max(throughput[0], Math.max(throughput[1], throughput[2])); if (Math.random() > p) break; throughput = mul(throughput, 1.0 / p); // Prepare for next bounce origin = add(point, mul(normal, 0.02)); direction = mix(reflect(direction, normal), randomHemispherePoint(normal), roughness); } // Return pixel color and the first hit point return { color: ret, hitPoint: firstPoint, normal: firstNormal, roughness: firstRoughness, }; } let accumulationBuffer, hitPointBuffer, normalBuffer, roughnessBuffer; let frameCount = 0; function applyDenoise(x, y, screenWidth, screenHeight) { let luminance = dot(accumulationBuffer[x][y], [0.2125, 0.7154, 0.0721]); let sumColor = [...accumulationBuffer[x][y]]; let count = 1.0; const radius = 4; for (let dx = x + -radius; dx <= x + radius; dx++) { for (let dy = y + -radius; dy <= y + radius; dy++) { if (dx === 0 && dy === 0) continue; if (dx >= 0 && dx < screenWidth && dy >= 0 && dy < screenHeight) { let normalWeight = max(0.0, dot(normalBuffer[x][y], normalBuffer[dx][dy])); let distWeight = 1.0 - min(1.0, length(sub(hitPointBuffer[dx][dy], hitPointBuffer[x][y]))); let roughnessWeight = 0.25 + (roughnessBuffer[x][y] * 0.75); let neighborLuminance = dot(accumulationBuffer[dx][dy], [0.2125, 0.7154, 0.0721]); let luminanceDifference = Math.abs(luminance - neighborLuminance); let luminanceWeight = 1.0 - Math.min(1.0, luminanceDifference * 0.0035); let totalWeight = normalWeight * distWeight * luminanceWeight; sumColor = add(sumColor, mul(accumulationBuffer[dx][dy], totalWeight)); count += totalWeight; } } } return mul(sumColor, 1 / count); } let denoise = true; keyPressed = function() { denoise = !denoise; } draw = function() { let res = 4; let screenWidth = width / res; let screenHeight = height / res; if (!accumulationBuffer) { 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)); } for (let x = 0; x < screenWidth; x++) { for (let y = 0; y < screenHeight; y++) { let rd = GetRayDirection(80, [width, height], [(x / screenWidth) * width, (y / screenHeight) * height]); let result = traceScene([0, 2, -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; } } // Apply blur and render for (let x = 0; x < screenWidth; x++) { for (let y = 0; y < screenHeight; y++) { let finalColor = mul(accumulationBuffer[x][y], 1 / (frameCount + 1)); if (denoise) { let denoisedColor = applyDenoise(x, y, screenWidth, screenHeight); finalColor = mul(denoisedColor, 1 / (frameCount + 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); } } frameCount++; }

Codecasts

Made by awesome people

Recently Published