Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Ray Tracing
ID	5557868464619520
Created	10 months ago, 1709826981717
Updated	10 months ago, 1709827030598
Code	<!DOCTYPE html> <!--RAY TRACING! Use WASD to move, E to go up, Q to go down, and drag with your left mouse button to look around. (I had some basic trees that were going to be in the background, but Oh Noes didn't like it.) You can see it better by using this link: https://www.khanacademy.org/computer-programming/ray-tracing/5557868464619520?width=600&height=600 --> <html> <head> <title>Ray Tracing</title> <style> body{ border: 0; } canvas{ border: 1px solid black; width: 600px; } </style> </head> <body id = "body"> <!--This draws the canvas on the webpage --> <canvas id="mycanvas" width="600" height="600"></canvas> </body> <script src="https://cdn.jsdelivr.net/gh/Zushah/Chalkboard@1.7.0/src/Chalkboard.min.js"></script> <script id = "glsl" type = "glsl"> precision lowp float; struct Sphere{ vec3 pos; float radius; vec3 col; float roughness; bool transmission; }; struct Plane{ vec3 pos; vec3 normal; vec2 dimensions; vec3 col; float roughness; bool transmission; }; struct hitData{ vec3 pos; vec3 normal; vec3 col; float roughness; bool transmission; float dist; int objType; int objID; bool hasHit; }; struct ray{ vec3 pos; vec3 dir; }; uniform float sphereComp[sphereCompLength]; Sphere spheres[sphereLength]; uniform float planeComp[planeCompLength]; Plane planes[planeLength]; uniform vec3 triangles[trianglesLength]; uniform float BVH[BVHLength]; uniform float camera[13]; varying vec2 vPos; float rand(vec2 co){ co += camera[12]; //the last element of the camera array is a random offset value. I did this to reduce the amount of uniforms I use. return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); } vec3 randVec(vec2 co){ return vec3(rand(co), rand(co + 1.0), rand(co + 2.0)); } float epsilon = 0.00001; float sphereIntersect(Sphere s, ray r){ vec3 origin = r.pos - s.pos; float A = dot(r.dir, r.dir); float B = dot(origin, r.dir); float C = dot(origin, origin) - s.radiuss.radius; float sqrtPart = BB - AC; if(sqrtPart < epsilon) return -1.0; sqrtPart = sqrt(sqrtPart); float dist = (-B-sqrtPart)/A; if(dist < epsilon){ dist = (-B+sqrtPart)/A; if(dist < epsilon){ return -1.0; } } return dist; } float planeIntersect(Plane p, ray r){ //figure out where the intersection point is, if any float dist = dot(p.pos-r.pos, p.normal)/dot(r.dir, p.normal); if(dist < epsilon) return -1.0; //determine if the intersection point is on the plane vec3 pos = r.pos + r.dirdist; vec3 widthVec, heightVec; if(abs(dot(p.normal, vec3(0, 1, 0))) > 0.9){ widthVec = normalize(cross(p.normal, vec3(0, 0, 1))); heightVec = normalize(cross(p.normal, widthVec)); }else{ widthVec = normalize(cross(p.normal, vec3(0, 1, 0))); heightVec = normalize(cross(p.normal, widthVec)); } if(abs(dot(pos-p.pos, widthVec)) > p.dimensions.x \|\| abs(dot(pos-p.pos, heightVec)) > p.dimensions.y) return -1.0; return dist; } //decodes the triangle data vec3 toVec(float tri){ //1048576 = 10241024 float x = mod(tri, 1024.0); float z = floor(tri/1048576.0); float y = (tri - x)/1024.0 - z1024.0; return (vec3(x, y, z)/512.0 - vec3(1.0))3.0 + vec3(3, 0, 9); } bool boxIntersect(vec3 Min, vec3 Max, ray r){ vec3 rayOrigin = r.pos; vec3 dir = r.dir; //top vec3 planePos; float t = (Min.y-rayOrigin.y)/dir.y; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.x > Min.x && planePos.x < Max.x && planePos.z > Min.z && planePos.z < Max.z){ return true; } } //bottom t = (Max.y-rayOrigin.y)/dir.y; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.x > Min.x && planePos.x < Max.x && planePos.z > Min.z && planePos.z < Max.z){ return true; } } //left t = (Min.x-rayOrigin.x)/dir.x; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.y > Min.y && planePos.y < Max.x && planePos.z > Min.z && planePos.z < Max.z){ return true; } } //right t = (Max.x-rayOrigin.x)/dir.x; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.y > Min.y && planePos.y < Max.x && planePos.z > Min.z && planePos.z < Max.z){ return true; } } //front t = (Min.z-rayOrigin.z)/dir.z; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.x > Min.x && planePos.x < Max.x && planePos.y > Min.y && planePos.y < Max.x){ return true; } } //back t = (Max.z-rayOrigin.z)/dir.z; if(t > 0.0){ planePos = rayOrigin + dirt; if(planePos.x > Min.x && planePos.x < Max.x && planePos.y > Min.y && planePos.y < Max.x){ return true; } } return false; } float triangleIntersect(vec3 A, vec3 B, vec3 C, ray r){ vec3 normal = -normalize(cross(A-B, C-A)); //if(dot(dir, normal) > epsilon) return -1.0; float dist = dot(A-r.pos, normal)/dot(r.dir, normal); if(dist < epsilon) return -1.0; vec3 i = r.pos + r.dirdist; vec3 AB = B-A; vec3 BC = C-B; vec3 CA = A-C; vec3 Av = AB - BCdot(AB, BC)/dot(BC, BC); float a = 1.0 - dot(Av, i-A)/dot(Av, AB); if(a < 0.0 \|\| a > 1.0) return -1.0; vec3 Bv = BC - CAdot(BC, CA)/dot(CA, CA); float b = 1.0 - dot(Bv, i-B)/dot(Bv, BC); if(b < 0.0 \|\| b > 1.0) return -1.0; vec3 Cv = CA - ABdot(CA, AB)/dot(AB, AB); float c = 1.0 - dot(Cv, i-C)/dot(Cv, CA); if(c < 0.0 \|\| c > 1.0) return -1.0; return dist; } hitData castRay(ray r){ r.dir = normalize(r.dir); r.pos = r.pos + r.direpsilon; hitData rayHitData = hitData(vec3(0), //pos vec3(0), //normal vec3(0), 0.0, false, //material (color, roughness, and transmission) 0.0, //dist -1, -1, //object (type and ID) false //hasHit ); float objDist = -1.0; for(int i = 0; i < sphereLength; i++){ objDist = sphereIntersect(spheres[i], r); if(objDist > epsilon && (objDist < rayHitData.dist \|\| !rayHitData.hasHit)){ rayHitData.pos = r.pos + r.dirobjDist; rayHitData.normal = normalize(rayHitData.pos-spheres[i].pos); rayHitData.dist = objDist; rayHitData.col = spheres[i].col; rayHitData.roughness = spheres[i].roughness; rayHitData.transmission = spheres[i].transmission; rayHitData.objType = 0; rayHitData.objID = i; rayHitData.hasHit = true; } } for(int i = 0; i < planeLength; i++){ objDist = planeIntersect(planes[i], r); if(objDist > epsilon && (objDist < rayHitData.dist \|\| !rayHitData.hasHit)){ rayHitData.pos = r.pos + r.dirobjDist; rayHitData.normal = planes[i].normal; rayHitData.dist = objDist; rayHitData.col = planes[i].col; rayHitData.roughness = planes[i].roughness; rayHitData.transmission = false; rayHitData.objType = 1; rayHitData.objID = i; rayHitData.hasHit = true; } } if(boxIntersect(vec3(BVH[2], BVH[3], BVH[4])+vec3(3, 0, 9), vec3(BVH[5], BVH[6], BVH[7])+vec3(3, 0, 9), r)){ for(int i = 0; i < trianglesLength; i++){ vec3 A = toVec(triangles[i].x); vec3 B = toVec(triangles[i].y); vec3 C = toVec(triangles[i].z); objDist = triangleIntersect(A, B, C, r); if(objDist > epsilon && (objDist < rayHitData.dist \|\| !rayHitData.hasHit)){ rayHitData.pos = r.pos + r.dirobjDist; rayHitData.normal = -normalize(cross(A-B, C-A)); rayHitData.dist = objDist; rayHitData.col = vec3(1); rayHitData.roughness = 1.0; rayHitData.transmission = false; rayHitData.objType = 2; rayHitData.objID = 0; rayHitData.hasHit = true; } } } return rayHitData; } vec3 refractRay(ray r, hitData rayData){ float IOR = 1.45; if(dot(r.dir, rayData.normal) > 0.0){ return refract(r.dir, -1.0rayData.normal + randVec(vPos)rayData.roughness, IOR); }else{ return refract(r.dir, rayData.normal + randVec(vPos)rayData.roughness, 1.0/IOR); } } vec3 getColor(int I){ if(I == 0){ return vec3(0); } if(I == 1){ return vec3(0.5); } if(I == 2){ return vec3(1, 0, 0); } if(I == 3){ return vec3(1, 1, 0); } if(I == 4){ return vec3(0.5, 0.5, 0.6); } if(I == 5){ return vec3(0.2, 0.8, 0.2); } if(I == 6){ return vec3(0.5, 0.2, 0.0); } if(I == 7){ return vec3(0, 1, 0); } if(I == 8){ return vec3(1, 0.2, 0.2); } if(I == 9){ return vec3(1, 0.5, 0.2); } if(I == 10){ return vec3(1, 0, 1); } } void main(){ gl_FragColor = vec4(0, 0, 0, 1); for(int i = 0; i < sphereCompLength; i += 6){ spheres[i/6] = Sphere( vec3(sphereComp[i], sphereComp[i+1], sphereComp[i+2]), //position sphereComp[i+3], //radius getColor(int(sphereComp[i+4])), //color abs(sphereComp[i+5]), //roughness (sphereComp[i+5] < 0.0) //transmission ); } for(int i = 0; i < planeCompLength; i += 10){ planes[i/10] = Plane( vec3(planeComp[i], planeComp[i+1], planeComp[i+2]), //position normalize(vec3(planeComp[i+3], planeComp[i+4], planeComp[i+5])), //normal vec2(planeComp[i+6], planeComp[i+7]), //dimensions getColor(int(planeComp[i+8])), //color abs(planeComp[i+9]), //roughness (planeComp[i+9] < 0.0) //transmission ); } vec3 light = normalize(vec3(1, 1, -1)); //setup for camera vec3 forward = vec3(camera[3], camera[4], camera[5]); vec3 upward = vec3(camera[6], camera[7], camera[8]); vec3 right = vec3(camera[9], camera[10], camera[11]); ray r = ray( vec3(camera[0], camera[1], camera[2]), normalize(forward + upwardvPos.y + rightvPos.x + randVec(vPos)/600.0) ); vec3 contribution = vec3(1.0); vec3 color = vec3(0.0); hitData rayData = castRay(r); for(int i = 0; i < 3; i ++){ rayData = castRay(r); if(!rayData.hasHit){ vec3 skyCol1 = vec3(0.5, 0.5, 1); vec3 skyCol2 = vec3(0, 0.2, 1); float t = (r.dir.y+1.0)/2.0; color += (skyCol1t+skyCol2(1.0-t))contribution; break; } if(dot(rayData.normal, light) > 0.0 && dot(rayData.normal, r.dir) < epsilon){ ray shadowRay = ray(rayData.pos, light + randVec(vPos)0.05); hitData shadowData = castRay(shadowRay); if(!shadowData.hasHit){ color += rayData.coldot(rayData.normal, light)contribution; }else{ shadowRay.pos = shadowData.pos; shadowRay.dir = refractRay(shadowRay, shadowData); shadowData = castRay(shadowRay); if(shadowData.hasHit && shadowData.transmission){ color += rayData.coldot(rayData.normal, light)contributiondot(shadowData.normal, shadowRay.dir); } } } r.pos = rayData.pos; if(rand(vPos) > 0.5 \|\| !rayData.transmission){ r.dir = reflect(r.dir, rayData.normal + randVec(vPos)rayData.roughness); }else{ r.dir = refractRay(r, rayData); } contribution = rayData.col; } gl_FragColor = vec4(color, 1); } </script> <!-- blank glsl shader used for testing --> <script id = "" type = "glsl"> void main(){ gl_FragColor = vec4(1, 0, 0, 1); } </script> <script> //variables { var v = Chalkboard.vec3; var Quat = Chalkboard.quat; var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); var glCanvas = document.createElement("canvas"); glCanvas.width = canvas.width, glCanvas.height = canvas.height; var gl = glCanvas.getContext("webgl2"); var offscreen = document.createElement("canvas"); offscreen.width = canvas.width, offscreen.height = canvas.height; var oCtx = offscreen.getContext("2d"); if(!gl){ throw new Error("WebGL not supported"); } var mouseIsPressed = false; var mouseX = 0, mouseY = 0, prevMouseX = 0, prevMouseY = 0; var keys = {}; var lastFrame = 0, timeElapsed = 0; var curSample = 1; var denoisingIteration = 0; var resetSamples = function(){ curSample = 1; denoisingIteration = 0; }; var pickRandom = function(){ return arguments[Math.floor(Math.random()arguments.length)]; }; } //mesh objects { var triangle = [ v.new(0, 0, 0), v.new(1, 0, 0), v.new(0, 1, 0) ]; var icosphere = [ v.new(0.0, 0.0, -1.0), v.new(0.72, -0.53, -0.45), v.new(-0.28, -0.85, -0.45), v.new(0.72, -0.53, -0.45), v.new(0.0, 0.0, -1.0), v.new(0.72, 0.53, -0.45), v.new(0.0, 0.0, -1.0), v.new(-0.28, -0.85, -0.45), v.new(-0.89, 0.0, -0.45), v.new(0.0, 0.0, -1.0), v.new(-0.89, 0.0, -0.45), v.new(-0.28, 0.85, -0.45), v.new(0.0, 0.0, -1.0), v.new(-0.28, 0.85, -0.45), v.new(0.72, 0.53, -0.45), v.new(0.72, -0.53, -0.45), v.new(0.72, 0.53, -0.45), v.new(0.89, 0.0, 0.45), v.new(-0.28, -0.85, -0.45), v.new(0.72, -0.53, -0.45), v.new(0.28, -0.85, 0.45), v.new(-0.89, 0.0, -0.45), v.new(-0.28, -0.85, -0.45), v.new(-0.72, -0.53, 0.45), v.new(-0.28, 0.85, -0.45), v.new(-0.89, 0.0, -0.45), v.new(-0.72, 0.53, 0.45), v.new(0.72, 0.53, -0.45), v.new(-0.28, 0.85, -0.45), v.new(0.28, 0.85, 0.45), v.new(0.72, -0.53, -0.45), v.new(0.89, 0.0, 0.45), v.new(0.28, -0.85, 0.45), v.new(-0.28, -0.85, -0.45), v.new(0.28, -0.85, 0.45), v.new(-0.72, -0.53, 0.45), v.new(-0.89, 0.0, -0.45), v.new(-0.72, -0.53, 0.45), v.new(-0.72, 0.53, 0.45), v.new(-0.28, 0.85, -0.45), v.new(-0.72, 0.53, 0.45), v.new(0.28, 0.85, 0.45), v.new(0.72, 0.53, -0.45), v.new(0.28, 0.85, 0.45), v.new(0.89, 0.0, 0.45), v.new(0.28, -0.85, 0.45), v.new(0.89, 0.0, 0.45), v.new(0.0, 0.0, 1.0), v.new(-0.72, -0.53, 0.45), v.new(0.28, -0.85, 0.45), v.new(0.0, 0.0, 1.0), v.new(-0.72, 0.53, 0.45), v.new(-0.72, -0.53, 0.45), v.new(0.0, 0.0, 1.0), v.new(0.28, 0.85, 0.45), v.new(-0.72, 0.53, 0.45), v.new(0.0, 0.0, 1.0), v.new(0.89, 0.0, 0.45), v.new(0.28, 0.85, 0.45), v.new(0.0, 0.0, 1.0) ]; var suzanne = [ v.new(0.612, 0.173, -0.665), v.new(0.494, 0.215, -0.761), v.new(0.307, 0.477, -0.753), v.new(0.265, -0.352, -0.366), v.new(0.095, -0.12, -0.792), v.new(0.561, -0.028, -0.521), v.new(0.095, -0.12, -0.792), v.new(0.208, 0.152, -0.751), v.new(0.561, -0.028, -0.521), v.new(0.0, 0.391, -0.79), v.new(-0.208, 0.152, -0.751), v.new(-0.307, 0.477, -0.753), v.new(0.0, -0.882, -0.682), v.new(0.273, -0.886, -0.649), v.new(0.0, -0.947, -0.419), v.new(0.095, -0.12, -0.792), v.new(0.273, -0.886, -0.649), v.new(0.106, -0.718, -0.73), v.new(-0.13, -0.197, -0.856), v.new(0.095, -0.12, -0.792), v.new(0.13, -0.197, -0.856), v.new(0.13, -0.197, -0.856), v.new(0.0, -0.322, -0.785), v.new(-0.13, -0.197, -0.856), v.new(0.106, -0.718, -0.73), v.new(0.096, -0.755, -0.643), v.new(-0.096, -0.755, -0.643), v.new(0.561, -0.028, -0.521), v.new(0.208, 0.152, -0.751), v.new(0.612, 0.173, -0.665), v.new(0.0, 0.411, 0.71), v.new(0.834, 0.352, 0.391), v.new(0.698, 0.689, 0.342), v.new(0.561, -0.028, -0.521), v.new(0.759, 0.065, -0.118), v.new(0.54, -0.287, 0.009), v.new(0.958, -0.076, 0.31), v.new(0.54, -0.287, 0.009), v.new(0.759, 0.065, -0.118), v.new(1.225, -0.01, 0.588), v.new(0.958, -0.076, 0.31), v.new(1.363, 0.311, 0.445), v.new(0.834, 0.352, 0.391), v.new(1.225, -0.01, 0.588), v.new(1.208, 0.489, 0.401), v.new(0.0, 0.411, 0.71), v.new(-0.834, 0.352, 0.391), v.new(-0.958, -0.076, 0.31), v.new(0.273, -0.886, -0.649), v.new(0.095, -0.12, -0.792), v.new(0.265, -0.352, -0.366), v.new(0.612, 0.173, -0.665), v.new(0.702, 0.406, -0.702), v.new(0.841, 0.413, -0.571), v.new(0.702, 0.406, -0.702), v.new(0.253, 0.656, -0.851), v.new(0.254, 0.769, -0.747), v.new(0.0, 0.391, -0.79), v.new(-0.254, 0.769, -0.747), v.new(0.0, 0.47, -0.641), v.new(0.0, 0.391, -0.79), v.new(0.253, 0.656, -0.851), v.new(0.307, 0.477, -0.753), v.new(0.307, 0.477, -0.753), v.new(0.253, 0.656, -0.851), v.new(0.702, 0.406, -0.702), v.new(-0.612, 0.173, -0.665), v.new(-0.702, 0.406, -0.702), v.new(-0.307, 0.477, -0.753), v.new(0.106, -0.718, -0.73), v.new(0.273, -0.886, -0.649), v.new(0.0, -0.882, -0.682), v.new(0.095, -0.12, -0.792), v.new(0.0, -0.322, -0.785), v.new(0.13, -0.197, -0.856), v.new(0.0, -0.882, -0.682), v.new(0.096, -0.755, -0.643), v.new(0.106, -0.718, -0.73), v.new(0.0, -0.882, -0.682), v.new(-0.096, -0.755, -0.643), v.new(0.096, -0.755, -0.643), v.new(0.254, 0.769, -0.747), v.new(0.0, 0.47, -0.641), v.new(0.46, 0.527, -0.473), v.new(0.0, 0.901, -0.152), v.new(0.0, 0.47, -0.641), v.new(-0.46, 0.527, -0.473), v.new(0.0, 0.411, 0.71), v.new(0.698, 0.689, 0.342), v.new(0.0, 0.867, 0.383), v.new(0.0, 0.867, 0.383), v.new(0.698, 0.689, 0.342), v.new(0.0, 0.901, -0.152), v.new(0.834, 0.352, 0.391), v.new(0.0, 0.411, 0.71), v.new(0.958, -0.076, 0.31), v.new(-0.265, -0.352, -0.366), v.new(0.0, -0.238, 0.431), v.new(-0.54, -0.287, 0.009), v.new(-0.958, -0.076, 0.31), v.new(-0.54, -0.287, 0.009), v.new(0.0, -0.238, 0.431), v.new(0.834, 0.352, 0.391), v.new(0.958, -0.076, 0.31), v.new(1.225, -0.01, 0.588), v.new(0.208, 0.152, -0.751), v.new(0.494, 0.215, -0.761), v.new(0.612, 0.173, -0.665), v.new(-0.307, 0.477, -0.753), v.new(-0.494, 0.215, -0.761), v.new(-0.612, 0.173, -0.665), v.new(0.307, 0.477, -0.753), v.new(0.341, 0.367, -0.805), v.new(0.292, 0.205, -0.804), v.new(0.341, 0.367, -0.805), v.new(0.494, 0.215, -0.761), v.new(0.292, 0.205, -0.804), v.new(-0.265, -0.352, -0.366), v.new(-0.561, -0.028, -0.521), v.new(-0.095, -0.12, -0.792), v.new(-0.095, -0.12, -0.792), v.new(-0.561, -0.028, -0.521), v.new(-0.208, 0.152, -0.751), v.new(0.0, -0.882, -0.682), v.new(0.0, -0.947, -0.419), v.new(-0.273, -0.886, -0.649), v.new(-0.095, -0.12, -0.792), v.new(-0.106, -0.718, -0.73), v.new(-0.273, -0.886, -0.649), v.new(0.095, -0.12, -0.792), v.new(-0.13, -0.197, -0.856), v.new(-0.095, -0.12, -0.792), v.new(-0.561, -0.028, -0.521), v.new(-0.612, 0.173, -0.665), v.new(-0.208, 0.152, -0.751), v.new(0.0, 0.411, 0.71), v.new(-0.698, 0.689, 0.342), v.new(-0.834, 0.352, 0.391), v.new(0.254, 0.769, -0.747), v.new(0.253, 0.656, -0.851), v.new(0.0, 0.391, -0.79), v.new(-0.561, -0.028, -0.521), v.new(-0.54, -0.287, 0.009), v.new(-0.759, 0.065, -0.118), v.new(-0.958, -0.076, 0.31), v.new(-0.834, 0.352, 0.391), v.new(-0.759, 0.065, -0.118), v.new(-0.958, -0.076, 0.31), v.new(-1.225, -0.01, 0.588), v.new(-1.363, 0.311, 0.445), v.new(-1.225, -0.01, 0.588), v.new(-0.834, 0.352, 0.391), v.new(-1.208, 0.489, 0.401), v.new(-0.208, 0.152, -0.751), v.new(-0.292, 0.205, -0.804), v.new(-0.307, 0.477, -0.753), v.new(-0.702, 0.406, -0.702), v.new(-0.842, 0.416, -0.573), v.new(-0.254, 0.769, -0.747), v.new(0.208, 0.152, -0.751), v.new(0.0, 0.391, -0.79), v.new(0.307, 0.477, -0.753), v.new(0.106, -0.718, -0.73), v.new(-0.106, -0.718, -0.73), v.new(0.0, -0.322, -0.785), v.new(-0.106, -0.718, -0.73), v.new(0.0, -0.882, -0.682), v.new(-0.273, -0.886, -0.649), v.new(-0.095, -0.12, -0.792), v.new(-0.13, -0.197, -0.856), v.new(0.0, -0.322, -0.785), v.new(0.0, -0.882, -0.682), v.new(-0.106, -0.718, -0.73), v.new(-0.096, -0.755, -0.643), v.new(-0.106, -0.718, -0.73), v.new(0.106, -0.718, -0.73), v.new(-0.096, -0.755, -0.643), v.new(-0.46, 0.527, -0.473), v.new(-0.254, 0.769, -0.747), v.new(-0.842, 0.416, -0.573), v.new(-0.494, 0.215, -0.761), v.new(-0.341, 0.367, -0.805), v.new(-0.292, 0.205, -0.804), v.new(0.0, 0.411, 0.71), v.new(0.0, 0.867, 0.383), v.new(-0.698, 0.689, 0.342), v.new(0.0, 0.867, 0.383), v.new(0.0, 0.901, -0.152), v.new(-0.698, 0.689, 0.342), v.new(-1.363, 0.311, 0.445), v.new(-1.208, 0.489, 0.401), v.new(-0.958, -0.076, 0.31), v.new(0.561, -0.028, -0.521), v.new(0.612, 0.173, -0.665), v.new(0.841, 0.413, -0.571), v.new(0.702, 0.406, -0.702), v.new(0.254, 0.769, -0.747), v.new(0.841, 0.413, -0.571), v.new(-0.254, 0.769, -0.747), v.new(0.0, 0.391, -0.79), v.new(-0.253, 0.656, -0.851), v.new(0.106, -0.718, -0.73), v.new(0.0, -0.322, -0.785), v.new(0.095, -0.12, -0.792), v.new(-0.254, 0.769, -0.747), v.new(-0.46, 0.527, -0.473), v.new(0.0, 0.47, -0.641), v.new(0.46, 0.527, -0.473), v.new(0.841, 0.413, -0.571), v.new(0.254, 0.769, -0.747), v.new(0.0, 0.411, 0.71), v.new(-0.958, -0.076, 0.31), v.new(0.0, -0.238, 0.431), v.new(0.46, 0.527, -0.473), v.new(0.0, 0.47, -0.641), v.new(0.0, 0.901, -0.152), v.new(0.54, -0.287, 0.009), v.new(0.265, -0.352, -0.366), v.new(0.561, -0.028, -0.521), v.new(0.958, -0.076, 0.31), v.new(0.834, 0.352, 0.391), v.new(1.208, 0.489, 0.401), v.new(-0.273, -0.886, -0.649), v.new(-0.265, -0.352, -0.366), v.new(-0.095, -0.12, -0.792), v.new(-0.612, 0.173, -0.665), v.new(-0.842, 0.416, -0.573), v.new(-0.702, 0.406, -0.702), v.new(-0.702, 0.406, -0.702), v.new(-0.254, 0.769, -0.747), v.new(-0.253, 0.656, -0.851), v.new(0.0, 0.47, -0.641), v.new(0.254, 0.769, -0.747), v.new(0.0, 0.391, -0.79), v.new(0.0, 0.391, -0.79), v.new(-0.307, 0.477, -0.753), v.new(-0.253, 0.656, -0.851), v.new(-0.307, 0.477, -0.753), v.new(-0.702, 0.406, -0.702), v.new(-0.253, 0.656, -0.851), v.new(0.0, -0.322, -0.785), v.new(-0.106, -0.718, -0.73), v.new(-0.095, -0.12, -0.792), v.new(-0.612, 0.173, -0.665), v.new(-0.494, 0.215, -0.761), v.new(-0.208, 0.152, -0.751), v.new(-0.265, -0.352, -0.366), v.new(-0.54, -0.287, 0.009), v.new(-0.561, -0.028, -0.521), v.new(-0.834, 0.352, 0.391), v.new(-1.225, -0.01, 0.588), v.new(-0.958, -0.076, 0.31), v.new(0.0, -0.238, 0.431), v.new(0.54, -0.287, 0.009), v.new(0.958, -0.076, 0.31), v.new(0.958, -0.076, 0.31), v.new(0.0, 0.411, 0.71), v.new(0.0, -0.238, 0.431), v.new(0.834, 0.352, 0.391), v.new(0.958, -0.076, 0.31), v.new(0.759, 0.065, -0.118), v.new(-0.759, 0.065, -0.118), v.new(-0.54, -0.287, 0.009), v.new(-0.958, -0.076, 0.31), v.new(-0.561, -0.028, -0.521), v.new(-0.46, 0.527, -0.473), v.new(-0.842, 0.416, -0.573), v.new(0.0, 0.901, -0.152), v.new(-0.46, 0.527, -0.473), v.new(-0.698, 0.689, 0.342), v.new(0.561, -0.028, -0.521), v.new(0.841, 0.413, -0.571), v.new(0.46, 0.527, -0.473), v.new(0.759, 0.065, -0.118), v.new(0.46, 0.527, -0.473), v.new(0.698, 0.689, 0.342), v.new(-0.759, 0.065, -0.118), v.new(-0.46, 0.527, -0.473), v.new(-0.561, -0.028, -0.521), v.new(0.698, 0.689, 0.342), v.new(0.834, 0.352, 0.391), v.new(0.759, 0.065, -0.118), v.new(0.46, 0.527, -0.473), v.new(0.0, 0.901, -0.152), v.new(0.698, 0.689, 0.342), v.new(0.46, 0.527, -0.473), v.new(0.759, 0.065, -0.118), v.new(0.561, -0.028, -0.521), v.new(-0.698, 0.689, 0.342), v.new(-0.46, 0.527, -0.473), v.new(-0.759, 0.065, -0.118), v.new(1.225, -0.01, 0.588), v.new(1.363, 0.311, 0.445), v.new(1.208, 0.489, 0.401), v.new(-1.208, 0.489, 0.401), v.new(-1.363, 0.311, 0.445), v.new(-1.225, -0.01, 0.588), v.new(1.208, 0.489, 0.401), v.new(1.363, 0.311, 0.445), v.new(0.958, -0.076, 0.31), v.new(-1.208, 0.489, 0.401), v.new(-0.834, 0.352, 0.391), v.new(-0.958, -0.076, 0.31), v.new(0.307, 0.477, -0.753), v.new(0.702, 0.406, -0.702), v.new(0.612, 0.173, -0.665), v.new(-0.095, -0.12, -0.792), v.new(0.0, 0.391, -0.79), v.new(0.095, -0.12, -0.792), v.new(0.0, 0.391, -0.79), v.new(-0.095, -0.12, -0.792), v.new(-0.208, 0.152, -0.751), v.new(0.0, 0.391, -0.79), v.new(0.208, 0.152, -0.751), v.new(0.095, -0.12, -0.792), v.new(-0.494, 0.215, -0.761), v.new(-0.307, 0.477, -0.753), v.new(-0.341, 0.367, -0.805), v.new(-0.494, 0.215, -0.761), v.new(-0.292, 0.205, -0.804), v.new(-0.208, 0.152, -0.751), v.new(-0.292, 0.205, -0.804), v.new(-0.341, 0.367, -0.805), v.new(-0.307, 0.477, -0.753), v.new(0.292, 0.205, -0.804), v.new(0.208, 0.152, -0.751), v.new(0.307, 0.477, -0.753), v.new(0.494, 0.215, -0.761), v.new(0.341, 0.367, -0.805), v.new(0.307, 0.477, -0.753), v.new(0.494, 0.215, -0.761), v.new(0.208, 0.152, -0.751), v.new(0.292, 0.205, -0.804), v.new(-0.561, -0.028, -0.521), v.new(-0.842, 0.416, -0.573), v.new(-0.612, 0.173, -0.665), v.new(0.265, -0.352, -0.366), v.new(0.0, -0.947, -0.419), v.new(0.273, -0.886, -0.649), v.new(0.0, -0.947, -0.419), v.new(-0.265, -0.352, -0.366), v.new(-0.273, -0.886, -0.649), v.new(-0.265, -0.352, -0.366), v.new(0.0, -0.947, -0.419), v.new(0.265, -0.352, -0.366), v.new(0.0, -0.238, 0.431), v.new(0.265, -0.352, -0.366), v.new(0.54, -0.287, 0.009), v.new(0.265, -0.352, -0.366), v.new(0.0, -0.238, 0.431), v.new(-0.265, -0.352, -0.366), v.new(-0.834, 0.352, 0.391), v.new(-0.698, 0.689, 0.342), v.new(-0.759, 0.065, -0.118) ]; } //scene objects { var ball = [ ]; var createBall = function(objData){ ball.push(objData.x, objData.y, objData.z, //position objData.radius, //radius objData.color, //color Math.max(objData.roughness, 1E-5) * (objData.transmission ? -1: 1) //roughness and transmission ); }; var planes = []; var createPlane = function(objData){ planes.push(objData.x, objData.y, objData.z, //position objData.normalX, objData.normalY, objData.normalZ, //normal objData.width, objData.height, //dimensions objData.color, //color objData.roughness //roughness ); }; var triangles = []; var BVH = []; var loadMesh = function(tris){ //webGL is stupid, so I have to compress the x y and z coordinates into one number var compress = function(V){ V = v.scl(v.add(V, v.new(1)), 1024/2); V.x = Math.floor(V.x); V.y = Math.floor(V.y); V.z = Math.floor(V.z); return V.x + V.y * 1024 + V.z * 1024 * 1024; }; var min = v.new(Infinity, Infinity, Infinity); var max = v.new(-Infinity, -Infinity, -Infinity); BVH.push(tris.length); tris.forEach(function(t){ min.x = Math.min(t.x, min.x); min.y = Math.min(t.y, min.y); min.z = Math.min(t.z, min.z); max.x = Math.max(t.x, max.x); max.y = Math.max(t.y, max.y); max.z = Math.max(t.z, max.z); }); tris.forEach(function(t){ triangles.push(compress(v.scl(t, 1/Math.max(max.x-min.x, max.y-min.y, max.z-min.z)))); }); min = v.scl(min, Math.max(max.x-min.x, max.y-min.y, max.z-min.z)); max = v.scl(max, Math.max(max.x-min.x, max.y-min.y, max.z-min.z)); BVH.push(tris.length, min.x, min.y, min.z, max.x, max.y, max.z); }; //winston createBall({ x: 0, y: 0.5, z: 9, radius: 1.6, color: 3, roughness: 0.8, transmission: false }); createBall({ x: -0.6, y: 1.1, z: 7.8, radius: 0.3, color: 0, roughness: 0.8, transmission: false }); createBall({ x: 0.6, y: 1.1, z: 7.8, radius: 0.3, color: 0, roughness: 0.8, transmission: false }); createBall({ x: -0.2, y: 0.0, z: 7.6, radius: 0.5, color: 2, roughness: 0.8, transmission: false }); createBall({ x: -4, y: 0.5, z: 9, radius: 1.6, color: 4, roughness: 0, transmission: false }); createBall({ x: 6, y: 0.5, z: 9, radius: 1.6, color: 4, roughness: 0, transmission: true }); loadMesh(suzanne); //trees // for(var i = 0; i < 7; i++){ // var x = (Math.random()2-1)15; // var z = (Math.random()2-1)15+9; // var height = Math.random()2+4; // createPlane({ // x: x, y: height-1.5, z: z, // normalX: 1, normalY: 0, normalZ: 0, // width: 0.5, height: height, // color: 6, // roughness: 1 // }); // var treeCol = pickRandom(7, 8, 9); // var radius = Math.random()1+3; // createBall({ // x: x, y: height2, z: z, // radius: Math.random()1+3, // color: treeCol, // roughness: 0.8, // transmission: false // }); // } //grass createPlane({ x: 0, y: -1.2, z: 9, normalX: 0, normalY: 1, normalZ: 0, width: 20, height: 20, color: 5, roughness: 0.5 }); var camera = { pos: v.new(0, 0, 0), forward: v.new(0, 0, 1), upward: v.new(0, 1, 0), right: v.new(1, 0, 0), speed: 0.05 }; var positionBuff = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuff); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1, 3, -1, -1, 3 ]), gl.STATIC_DRAW); } //vertex shader { var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, "\ precision mediump float;\ \ attribute vec2 position;\ \ varying vec2 vPos;\ \ void main(){\ vPos = position;\ \ gl_Position = vec4(position, 0, 1);\ }\ "); gl.compileShader(vertexShader); } //fragment shader { var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, document.getElementById("glsl").innerText .replaceAll("sphereCompLength", ball.length).replaceAll("sphereLength", Math.ceil(ball.length/6)) .replaceAll("planeCompLength", planes.length).replaceAll("planeLength", Math.ceil(planes.length/10)) .replaceAll("trianglesLength", Math.max(triangles.length, 1)) .replaceAll("BVHLength", BVH.length)); gl.compileShader(fragmentShader); } //other stuff { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); //position var posLoc = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(posLoc); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuff); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); gl.useProgram(program); var uniforms = { ball: gl.getUniformLocation(program, "sphereComp"), planes: gl.getUniformLocation(program, "planeComp"), triangles: gl.getUniformLocation(program, "triangles"), camera: gl.getUniformLocation(program, "camera"), BVH: gl.getUniformLocation(program, "BVH") }; gl.uniform1fv(uniforms.ball, ball); gl.uniform1fv(uniforms.planes, planes); gl.uniform3fv(uniforms.triangles, triangles); gl.uniform1fv(uniforms.BVH, BVH); var updateCamera = function(){ gl.uniform1fv(uniforms.camera, [camera.pos.x, camera.pos.y, camera.pos.z, camera.forward.x, camera.forward.y, camera.forward.z, camera.upward.x, camera.upward.y, camera.upward.z, camera.right.x, camera.right.y, camera.right.z, Math.random()]); }; updateCamera(); } var draw = setInterval(function(){ if(curSample < 50){ console.time("Render"); gl.drawArrays(gl.TRIANGLES, 0, 3); oCtx.drawImage(glCanvas, 0, 0); var glData = oCtx.getImageData(0, 0, canvas.width, canvas.height) if(curSample === 1){ ctx.putImageData(glData, 0, 0); }else{ //accumulate samples var newData = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixelCount = canvas.widthcanvas.height4; var sampleInv = 1/curSample; for(var i = 0; i < pixelCount; i+= 4){ newData.data[i] = (newData.data[i](curSample-1) + glData.data[i])sampleInv; newData.data[i+1] = (newData.data[i+1](curSample-1) + glData.data[i+1])sampleInv; newData.data[i+2] = (newData.data[i+2](curSample-1) + glData.data[i+2])sampleInv; } ctx.putImageData(newData, 0, 0); } curSample ++; console.timeEnd("Render"); }else if(denoisingIteration <= 10){ // console.log("denoising iteration"); //simple denoising (it blurs similar colors) denoisingIteration ++; var tolerance = 30; var numOfPxls = 1; //however many pixels it is averaging var r, g, b; var w = canvas.width4; var reciprocals = [1, 0.5, 0.333, 0.25, 0.2, 0.167, 0.142, 0.125, 0.111]; //used to optimize division var cData = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixelCount = canvas.widthcanvas.height4; var p = cData.data; for(var i = 0; i < pixelCount; i+= 4){ //denoise on the first iteration for better results if(denoisingIteration === 0){ p[i] = (p[i] + p[i-4] + p[i+4] + p[i-w] + p[i+w] + p[i-w-4] + p[i-w+4] + p[i+w-4] + p[i+w+4])0.111; p[i+1] = (p[i+1] + p[i-3] + p[i+5] + p[i-w+1] + p[i+w+1] + p[i-w-3] + p[i-w+5] + p[i+w-3] + p[i+w+5])0.111; p[i+2] = (p[i+2] + p[i-2] + p[i+6] + p[i-w+2] + p[i+w+2] + p[i-w-2] + p[i-w+6] + p[i+w-2] + p[i+w+6])0.111; continue; } numOfPxls = 1; r = p[i]; g = p[i+1]; b = p[i+2]; { //if the left pixel is close in color if(Math.abs(p[i]-p[i-4]) < tolerance && Math.abs(p[i+1]-p[i-3]) < tolerance && Math.abs(p[i+2]-p[i-2]) < tolerance){ r += p[i-4]; g += p[i-3]; b += p[i-2]; numOfPxls ++; } //if the right pixel is close in color if(Math.abs(p[i]-p[i+4]) < tolerance && Math.abs(p[i+1]-p[i+5]) < tolerance && Math.abs(p[i+2]-p[i+6]) < tolerance){ r += p[i+4]; g += p[i+5]; b += p[i+6]; numOfPxls ++; } //if the upper pixel is close in color if(Math.abs(p[i]-p[i-w]) < tolerance && Math.abs(p[i+1]-p[i-w+1]) < tolerance && Math.abs(p[i+2]-p[i-w+2]) < tolerance){ r += p[i-w]; g += p[i-w+1]; b += p[i-w+2]; numOfPxls ++; } //if the lower pixel is close in color if(Math.abs(p[i]-p[i+w]) < tolerance && Math.abs(p[i+1]-p[i+w+1]) < tolerance && Math.abs(p[i+2]-p[i+w+2]) < tolerance){ r += p[i+w]; g += p[i+w+1]; b += p[i+w+2]; numOfPxls ++; } } //horizontal and vertical { //if the upper left pixel is close in color if(Math.abs(p[i]-p[i-w-4]) < tolerance && Math.abs(p[i+1]-p[i-w-3]) < tolerance && Math.abs(p[i+2]-p[i-w-2]) < tolerance){ r += p[i-w-4]; g += p[i-w-3]; b += p[i-w-2]; numOfPxls ++; } //if the upper right pixel is close in color if(Math.abs(p[i]-p[i-w+4]) < tolerance && Math.abs(p[i+1]-p[i-w+5]) < tolerance && Math.abs(p[i+2]-p[i-w+6]) < tolerance){ r += p[i-w+4]; g += p[i-w+5]; b += p[i-w+6]; numOfPxls ++; } //if the lower left pixel is close in color if(Math.abs(p[i]-p[i+w-4]) < tolerance && Math.abs(p[i+1]-p[i+w-3]) < tolerance && Math.abs(p[i+2]-p[i+w-2]) < tolerance){ r += p[i+w-4]; g += p[i+w-3]; b += p[i+w-2]; numOfPxls ++; } //if the lower right pixel is close in color if(Math.abs(p[i]-p[i+w+4]) < tolerance && Math.abs(p[i+1]-p[i+w+5]) < tolerance && Math.abs(p[i+2]-p[i+w+6]) < tolerance){ r += p[i+w+4]; g += p[i+w+5]; b += p[i+w+6]; numOfPxls ++; } } //diagonal //if the pixel isn't similar to any of the nearby pixels, it's likely to be a firefly if(numOfPxls === 1){ p[i] = (p[i] + p[i-4] + p[i+4] + p[i-w] + p[i+w] + p[i-w-4] + p[i-w+4] + p[i+w-4] + p[i+w+4])0.111; p[i+1] = (p[i+1] + p[i-3] + p[i+5] + p[i-w+1] + p[i+w+1] + p[i-w-3] + p[i-w+5] + p[i+w-3] + p[i+w+5])0.111; p[i+2] = (p[i+2] + p[i-2] + p[i+6] + p[i-w+2] + p[i+w+2] + p[i-w-2] + p[i-w+6] + p[i+w-2] + p[i+w+6])0.111; }else{ p[i] = rreciprocals[numOfPxls-1]; p[i+1] = greciprocals[numOfPxls-1]; p[i+2] = breciprocals[numOfPxls-1]; } } ctx.putImageData(cData, 0, 0); } //camera controls { timeElapsed = (performance.now()-lastFrame)/10; camera.speed = keys["shift"]? 0.01: 0.05; if(keys.a){ camera.pos = v.sub(camera.pos, v.scl(camera.right, camera.speedtimeElapsed)); resetSamples(); } if(keys.d){ camera.pos = v.add(camera.pos, v.scl(camera.right, camera.speedtimeElapsed)); resetSamples(); } if(keys.w){ camera.pos = v.add(camera.pos, v.scl(camera.forward, camera.speedtimeElapsed)); resetSamples(); } if(keys.s){ camera.pos = v.sub(camera.pos, v.scl(camera.forward, camera.speedtimeElapsed)); resetSamples(); } if(keys.e){ camera.pos.y += camera.speedtimeElapsed; resetSamples(); } if(keys.q){ camera.pos.y -= camera.speedtimeElapsed; resetSamples(); } if(mouseIsPressed){ if(Math.abs(mouseX-prevMouseX) > 0){ var quat = Quat.fromAxis(v.new(0, 1, 0), -(mouseX-prevMouseX)0.004); camera.forward = Quat.toRotation(quat, camera.forward); camera.upward = Quat.toRotation(quat, camera.upward); camera.right = v.cross(camera.upward, camera.forward); resetSamples(); } if(Math.abs(mouseY-prevMouseY) > 0){ var quat = Quat.fromAxis(camera.right, -(mouseY-prevMouseY)0.004); camera.forward = Quat.toRotation(quat, camera.forward); camera.upward = v.cross(camera.forward, camera.right); resetSamples(); } } } updateCamera(); prevMouseX = mouseX; prevMouseY = mouseY; lastFrame = performance.now(); }, 1); canvas.onmousedown = function(e){ mouseIsPressed = true; }; canvas.onmouseup = function(e){ mouseIsPressed = false; }; canvas.onmousemove = function(e){ mouseX = e.offsetX; mouseY = e.offsetY; }; document.getElementsByTagName("body")[0].onkeydown = function(e){ keys[e.key.toLowerCase()] = true; }; document.getElementsByTagName("body")[0].onkeyup = function(e){ keys[e.key.toLowerCase()] = false; }; </script> </html>
Folds	9,20,21,24,27,408
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKu8odvvCQw
Votes	17
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Cobra Coder
Author Name	COOLBRO43219
Author ID	kaid_148226712859579271860375
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1709913071540
Updated	10 months ago, 1709913071540
Source Deleted	unknown