34:["$","title",null,{"children":"CAP 4720 Class Project: Raytracer | Sumant Pattanaik | Observable"}] 3c:T496,Raytracer = ({ vert: vert, frag: frag, attributes: { position: [[-1, -1], [-1, 1], [1, 1], [1, -1]] }, elements: [[0, 1, 2], [0, 2, 3]], uniforms: { aspect: viewportWidth / viewportHeight, frameHeight: frameHeight, focalLength: focalLength, pixelSize: frameHeight / viewportHeight, world: regl.prop('world'), maxDepth: imageSettings.maxDepth, planeTexture: planeTexture, sphereTexture: planeTexture, cubeTexture: cubeTexture, sqrtPixelSamples: sqrtPixelSamples, diffuseFactor: sceneSettings.diffuseFactor, numObjects: size, objects: Spheres, texture: (textureOpt == 1) ? 1 : 0, ambient: mkcolor(sceneSettings.ambient), lightPower: sceneSettings.lightPower, lightColor: mkcolor(sceneSettings.lightColor), sphereAlbedo: sphereAlbedo, cornell: (Scenes.cornellBox == 1) ? 1 : 0, objects_color: Colors, boxMinX: Box_min[0], boxMinY: Box_min[1], boxMinZ: Box_min[2], boxMaxX: Box_max[0], boxMaxY: Box_max[1], boxMaxZ: Box_max[2], lightHori: lightAxis.lightX, lightVert: lightAxis.lightY, lightDepth: lightAxis.lightZ //seed: regl.prop(`seed`) } })3d:T166b,fragHead = ` precision mediump float; const float POSITIVE_INFINITY = 1.0 / 0.0; const float FLOAT_ZERO = 0.001; const float EPSILON = 0.0001; const int SQRT_PIXEL_SAMPLES = 8; // Square root of number of pixel samples to take. const int DEPTH = 1;//50; const int OBJECTS_IN_SCENE = 20; const int GEOMETRY_SPHERE = 0; const int GEOMETRY_PLANE = 1; const int GEOMETRY_BOX = 2; uniform float frameHeight; uniform float pixelSize; uniform float lightPower; uniform vec3 eye; uniform vec3 ambient; uniform vec3 lightColor; uniform mat4 world; uniform float sphereAlbedo; uniform int texture; uniform sampler2D planeTexture; uniform sampler2D sphereTexture; uniform samplerCube cubeTexture; uniform float diffuseFactor; uniform int maxDepth; uniform int sqrtPixelSamples; uniform int cornell; uniform int numObjects; uniform sampler2D objects; uniform sampler2D objects_color; uniform float boxMinX; uniform float boxMinY; uniform float boxMinZ; uniform float boxMaxX; uniform float boxMaxY; uniform float boxMaxZ; uniform float lightHori; uniform float lightVert; uniform float lightDepth; varying vec3 fragPosition; float sampleDelta = pixelSize / float(sqrtPixelSamples); float patternSize = 5.0; struct Ray { vec3 origin; vec3 direction; }; /* Can't use interfaces or abstract classes We could nest the structs that we had previously, but GLSL also does not allow NULL objects, so we can't just hold one type of each object We would have to generate a Sphere, Plane, and Cube to hold all of them in one object That would be a waste of memory. Instead holding general attributes for each object */ struct Hitable { // Set the type of geometry of this object // Only one should ever be set! int geometry; // Mainly used for the plane vec3 normal; // Center of the object all math will have to based on the center and the size vec3 center; /* Size of the object For Sphere: The Radius of the sphere For Planes: The size of a single edge, 0 means infinite For Boxes: Height/Depth/Length of the box's edge */ float size; // Sets boundary for Box vec3 vmin; vec3 vmax; // Color of object vec3 color; bool textured; float albedo; float shininess; float refractionCoe; bool isRefract; }; // Constant "NULL" hitable if it is ever needed Hitable EMPTY_HITABLE = Hitable(GEOMETRY_SPHERE, vec3(-1,-1,-1), vec3(-1,-1,-1), 0.0, vec3(0),vec3(0), vec3(0), false, 0.0, 0.0, 1.0, false); // Array of all objects in a scene Hitable WorldObjects[OBJECTS_IN_SCENE]; // Holds the record of a hit if it did happen struct HitRecord { float t; vec3 p; vec3 normal; bool front_face; Hitable objectHit; }; // Description of a point light source. struct Light { float power; vec3 color; vec3 position; }; // There is 1 point light source in the scene (for now). Light light = Light(lightPower, lightColor, vec3(lightHori, lightVert, lightDepth)); // This is where we have to add all of the objects that we are generating in the world void populateWorld(); // Gets the color of a ray based on what it intersects. vec3 rayGetColor(Ray r); // Gets the intersection point of a ray. vec3 rayGetIntersection(Ray r, float t); // Returns the color of a ray when it hits nothing. vec3 rayGetSky(Ray r); // Shoots an eye ray from the eye through this fragment with a given fragment position offset. Ray rayShootEye(float xOffset, float yOffset); // Shoots a diffuse ray from a point on a surface. Ray rayShootDiffuse(Ray incoming, float t, vec3 normal); // Shoots a reflect ray from a point on a surface. Ray rayShootReflect(Ray incoming, float t, vec3 normal); // Shoots a refract ray from a point through a surface. Ray rayShootRefract(Ray incoming, float t, vec3 normal, float eta, bool front_face); // Shoots a shadow ray from a point on a surface to a light source. Ray rayShootShadow(Ray incoming, float t, Light l); // Gets the color of a subpixel by tracing rays. vec3 rayTrace(float xOffset, float yOffset); // Shoots a ray from a position in the world towards a given direction. Ray rayBounceFromTowards(Ray prevRay, vec3 origin, vec3 direction); // Returns true if the ray intersects anything. bool hitAnything(Ray r, float t_min, float t_max, inout HitRecord rec); // Gets the color of a hittable object. vec3 hitableGetColor(Hitable object, vec3 intersect); // Gets the color of a sphere based a valid intersection point. vec3 sphereGetColor(Hitable sphere, vec3 intersect); // Returns true if the ray intersects the sphere. bool sphereIntersect(Ray r, Hitable s, float t_min, float t_max, inout HitRecord rec); // Gets the color of a plane based on a valid intersection point. vec3 planeGetColor(Hitable plane, vec3 intersect); // Returns true if the ray intersects the plane. bool planeIntersect(Ray r, Hitable plane, float t_min, float t_max, inout HitRecord rec); // Gets the color of a cube based on a valid intersection point. vec3 boxGetColor(Hitable cube, vec3 intersect); // Returns true if the ray intersects the box. bool boxIntersect(Ray r, Hitable box, float t_min, float t_max, inout HitRecord rec); // set the Hit record to contain if this is a outward facing face void setFaceNormal(Ray r, inout HitRecord rec, vec3 outward_normal); // Returns a random point inside the unit sphere. vec3 randInUnitSphere(Ray r); float fresnel(Ray ray, HitRecord rec); float rand(vec2 co); // Modulo 3 function. int mod3(int a); `3e:T45e5,fragBody = ` void main() { vec3 color = vec3(0, 0, 0); Ray ray; float sampleOffset = pixelSize / -2.0 + sampleDelta / 2.0; //Populate the objects in the world populateWorld(); // Shoot SQRT_PIXEL_SAMPLES ^ 2 rays for each pixel for (int i = 0; i != SQRT_PIXEL_SAMPLES; i++) { // Check if we have exceeded max samples, via uniform value if (i == sqrtPixelSamples) { break; } for (int j = 0; j != SQRT_PIXEL_SAMPLES; j++) { // Check if we have exceeded max samples, via uniform value if (j == sqrtPixelSamples) { break; } //ray = rayShootEye(sampleOffset + float(i) * sampleDelta, sampleOffset + float(j) * sampleDelta); //color += rayGetColor(ray); color += rayTrace(sampleOffset + float(i) * sampleDelta, sampleOffset + float(j) * sampleDelta); } } // Calculate final color of pixel gl_FragColor = vec4(color / float(sqrtPixelSamples * sqrtPixelSamples), 1); } void populateWorld() { // First three variables say what type of object this is (Sphere, Plane, Cube) only one should be true // Next variables are the attributes of the object, refer to the hittable struct //Loading sphere data from texture if(cornell == 0) { for(int i = 0; i < OBJECTS_IN_SCENE-1; i++) { vec2 coord = vec2(float(i)/float(numObjects), 0); vec2 color_coord = vec2(float(i)/float(numObjects), 0); vec4 spheres = texture2D(objects, coord); vec4 colors = texture2D(objects_color, color_coord); WorldObjects[i] = Hitable(GEOMETRY_SPHERE, vec3(0,1,0), spheres.xyz, spheres.w, vec3(0),vec3(0), colors.xyz/255.0, true, 1.0, 32.0, 1.0, false); } WorldObjects[OBJECTS_IN_SCENE-1] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0, vec3(boxMinX,boxMinY,boxMinZ), vec3(boxMaxX,boxMaxY,boxMaxZ) , vec3(0.75), false, 1.0, 0.0, 1.0, false ); } else if(cornell == 1) { //blue sphere WorldObjects[0] = Hitable( GEOMETRY_SPHERE, vec3(0, 1, 0), vec3(0, -1.3, 0.0), 0.75, vec3(0), vec3(0), vec3(0.1, 0.3, 0.6), true, sphereAlbedo, 32.0, 1.0, false ); //left WorldObjects[1] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0,vec3(-2.0, -2.0, -2.0),vec3(2.0, 2.0, -2.0), vec3(0.95,0.25,0.25), false, 1.0, 0.0, 1.0, false ); //right WorldObjects[2] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0,vec3(-2.0, -2.0, 2.0),vec3(2.0, 2.0, 2.0), vec3(0.25,0.65,0.25), false, 1.0, 0.0, 1.0, false ); //bottom WorldObjects[3] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0, vec3(2.0, -2.0, -2.0),vec3(-2.0, -2.0, 2.0), vec3(0.75,0.75,0.75), false, 1.0, 0.0, 1.0, false ); //top WorldObjects[4] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0,vec3(-2.0, 2, -2.0),vec3(2.0, 2.0, 2.0), vec3(0.75,0.75,0.75), false, 1.0, 0.0, 1.0, false ); //behind WorldObjects[5] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0,vec3(-2.0, -2.0, -2.0),vec3(-2.0, 2.0, 2.0), vec3(0.75,0.75,0.75), false, 1.0, 0.0, 1.0, false ); //box WorldObjects[6] = Hitable( GEOMETRY_BOX, vec3(0, 1, 0), vec3(0, 0, 0), 0.0,vec3(0.55, -2.0, -0.8),vec3(1.2, -1.0, -1.3), vec3(0.75,0.75,0.75), false, 1.0, 0.0, 1.0e6, false ); //cyan sphere WorldObjects[7] = Hitable( GEOMETRY_SPHERE, vec3(0, 1, 0), vec3(-1, -.75, -1.25), 0.65, vec3(0), vec3(0), vec3(0.4, 0.75, 0.75), true, 1.0, 32.0, 1.0, false ); //magenta sphere WorldObjects[8] = Hitable( GEOMETRY_SPHERE, vec3(0, 1, 0), vec3(1, -1.5, 1.25), 0.55, vec3(0), vec3(0), vec3(0.0), true, 1.0, 32.0, 1.33, true ); } } float rand(vec2 co) { return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453); } float texture_coordinate(float coord, float size) { return coord / size; } vec3 R(vec3 I, vec3 normal, float ior) { float cosi = clamp(-1.0, 1.0, dot(I, normal)); float etai = 1.0; float etat = ior; vec3 n = normal; if (cosi < 0.0) { cosi = -cosi; } else { etai = etat; etat= ior; n= -normal; } float eta = etai / etat; float k = 1.0 - eta * eta * (1.0 - cosi * cosi); return k < 0.0 ? vec3(0.0) : eta * I + (eta * cosi - sqrt(k)) * n; } vec3 rayTrace(float xOffset, float yOffset) { const int iterations = 13; Ray rays[iterations]; HitRecord hits[iterations]; float k[iterations]; vec3 finalColor = vec3(0); for (int ray = 0; ray < iterations; ray++) { //int parent = (ray + 2) / 3 - 1; int type = mod3(ray); //if (ray >= maxDepth) break; // Shoot the ray depending on its type. if (ray != 0) { // This is not an eye ray. Ray parentRay = rays[(ray + 2) / 3 - 1]; HitRecord parentHit = hits[(ray + 2) / 3 - 1]; //float parentK = k[(ray + 2) / 3 - 1]; if (type == 1) rays[ray] = rayShootDiffuse(parentRay, parentHit.t, parentHit.normal); else if (type == 2) rays[ray] = rayShootReflect(parentRay, parentHit.t, parentHit.normal); else if (type == 0 && parentHit.objectHit.isRefract) rays[ray] = rayShootRefract(parentRay, parentHit.t, parentHit.normal, parentHit.objectHit.refractionCoe, parentHit.front_face); } else rays[ray] = rayShootEye(xOffset, yOffset); // This is the eye ray. // Check the intersection of the ray. if (hitAnything(rays[ray], FLOAT_ZERO, POSITIVE_INFINITY, hits[ray])) { // Hit something, get color and store k of this ray. vec3 color = hitableGetColor(hits[ray].objectHit, rayGetIntersection(rays[ray], hits[ray].t)); if (ray != 0) { Ray parentRay = rays[(ray + 2) / 3 - 1]; HitRecord parentHit = hits[(ray + 2) / 3 - 1]; float parentK = k[(ray + 2) / 3 - 1]; float kthis = 0.0; // Set k for this node. if (type == 1) kthis = hits[ray].objectHit.albedo * diffuseFactor; // kd of previous material. else if (type == 2) kthis = parentHit.objectHit.isRefract ? 0.2 : 1.0 - parentHit.objectHit.albedo; // ks of previous material. else if (type == 0 && parentHit.objectHit.isRefract) { float ks = fresnel(parentRay, parentHit); Ray reflection = rayShootReflect(parentRay, parentHit.t, parentHit.normal); reflection.direction = normalize(reflection.direction); vec3 colorReflect = hitableGetColor(parentHit.objectHit, rayGetIntersection(reflection, parentHit.t)); if(ks < 1.0) { color = colorReflect * ks + color*(1.0-ks); } else { color = colorReflect*ks; } kthis = 1.0; } k[ray] = parentK * kthis; // DO NOT UNCOMMENT THIS!!! //if (k[ray] < FLOAT_ZERO) continue; // Do ambient lighting depending on kx of previous materials. finalColor += color * ambient * k[ray]; // Do basic lighting depending on kd of this material and kx of previous materials. HitRecord shadowRec; Ray shadow = rayShootShadow(rays[ray], hits[ray].t, light); shadowRec.t = POSITIVE_INFINITY; hitAnything(shadow, FLOAT_ZERO, shadowRec.t, shadowRec); float s = 0.0; if (shadowRec.t > length(light.position - shadow.origin)) s = 1.0; float align = dot(shadow.direction, hits[ray].normal); finalColor += s * color * hits[ray].objectHit.albedo * k[ray] * (align > 0.0 ? align : 0.0) * lightPower * lightColor; } else { // Set k for this node. k[ray] = 1.0; // Do ambient lighting. finalColor += color * ambient; // Do basic lighting depending on kd of this material. HitRecord shadowRec; Ray shadow = rayShootShadow(rays[ray], hits[ray].t, light); shadowRec.t = POSITIVE_INFINITY; hitAnything(shadow, FLOAT_ZERO, shadowRec.t, shadowRec); float s = 0.0; if (shadowRec.t > length(light.position - shadow.origin)) s = 1.0; float align = dot(shadow.direction, hits[ray].normal); finalColor += s * color * hits[ray].objectHit.albedo * (align > 0.0 ? align : 0.0) * lightPower * lightColor; } } else { // Hit nothing, get sky color and store 0 for this ray. // Set k for this node. k[ray] = 0.0; if (ray != 0) { // Do sky lighting depending on kx of previous materials. float parentK = k[(ray + 2) / 3 - 1]; finalColor += rayGetSky(rays[ray]) * parentK; } else finalColor += rayGetSky(rays[ray]); } } return finalColor; } vec3 rayGetIntersection(Ray r, float t) { return r.origin + r.direction * t; } vec3 rayGetSky(Ray r) { float t = 0.5 * (r.direction.y + 1.0); //return (1.0 - t) * vec3(1, 1, 1) + t * vec3(0.5, 0.7, 1.0); return vec3(0); } Ray rayShootDiffuse(Ray incoming, float t, vec3 normal) { Ray r; r.origin = rayGetIntersection(incoming, t); r.direction = normal; r.direction += randInUnitSphere(incoming); r.direction = normalize(r.direction); r.origin += EPSILON * r.direction; return r; } Ray rayShootEye(float xOffset, float yOffset) { vec4 offset; Ray r; // Get the offset vector in world coordinates. offset = vec4(xOffset, yOffset, 0, 0); offset = world * offset; r.origin = eye; r.direction = normalize((fragPosition + offset.xyz) - eye); return r; } Ray rayShootReflect(Ray incoming, float t, vec3 normal) { Ray r; r.origin = rayGetIntersection(incoming, t); r.direction = reflect(incoming.direction, normal); r.origin += EPSILON * r.direction; return r; } // Used to calcuatle Kr for color equation float fresnel(Ray ray, HitRecord rec) { float cos_i = clamp(-1.0, 1.0, dot(ray.direction, rec.normal)); float eta_i = 1.0; float eta_t = rec.objectHit.refractionCoe; if(cos_i > 0.0) { eta_i = rec.objectHit.refractionCoe; eta_t = 1.0; } float sroot = 1.0 - cos_i * cos_i; float sin_t = eta_i / eta_t * sqrt( (sroot > 0.0 ? sroot : 0.0)); if(sin_t >= 1.0 ) // Total Internal Reflection return 1.0; else { sroot = 1.0 - sin_t * sin_t; float cos_t = sqrt( (sroot > 0.0 ? sroot : 0.0)); cos_i = abs(cos_i); float Rs = ((eta_t * cos_i) - (eta_i * cos_t)) / ((eta_t * cos_i) + (eta_i * cos_t)); float Rp = ((eta_i * cos_i) - (eta_t * cos_t)) / ((eta_i * cos_i) + (eta_t * cos_t)); return (Rs * Rs + Rp * Rp) / 2.0; } } Ray rayShootRefract(Ray incoming, float t, vec3 normal, float eta, bool front_face) { Ray r; r.direction = normalize(R(incoming.direction, normal, eta)); r.origin = rayGetIntersection(incoming, t); r.origin += EPSILON * r.direction; return r; } Ray rayShootShadow(Ray incoming, float t, Light l) { Ray r; r.origin = rayGetIntersection(incoming, t); r.direction = normalize(l.position - r.origin); r.origin += EPSILON * r.direction; return r; } vec3 hitableGetColor(Hitable object, vec3 intersect) { int geometry = object.geometry; if (geometry == GEOMETRY_SPHERE) return sphereGetColor(object, intersect); else if (geometry == GEOMETRY_PLANE) return planeGetColor(object, intersect); else if (geometry == GEOMETRY_BOX) return boxGetColor(object, intersect); else return vec3(0); } vec3 randInUnitSphere(Ray r) { /* Rejection method: Calculate a "random" position in unit cube, hoping to land inside unit sphere. * Increment i to change "seed" on fail. * Upon exiting the do-while loop, we now have a point with all 3 coords inside the unit sphere. */ float randX, randY, randZ; vec3 point; const int MAX_ATTEMPTS = 10; for (int i = 0; i < MAX_ATTEMPTS; i++) { // Note: these calculations are arbitrary and are only done to get a semi-unique value for each intersection randX = rand(vec2( r.direction.yz*float(i-5) )); randY = rand(vec2( r.direction.xz*float(i-5) )); randZ = rand(vec2( r.direction.xy*float(i-5) )); point = vec3(randX, randY, randZ); // Break if inside unit sphere if (dot(point, point) > 1.0) {break;} } point.z -= 0.63; // Hacky method to fix skewed rand issue return point; } vec3 sphereGetColor(Hitable s, vec3 intersect) { vec3 color; intersect = normalize(intersect - s.center); float phi = atan(intersect.z, intersect.x); float theta = asin(intersect.y); float pi = 3.1415926; float u = 1. - (phi + pi) / (2.* pi); float v = (theta + pi / 2.) / pi; if (texture == 1 && s.textured) return texture2D(sphereTexture, vec2(u,v)).rgb; else return s.color; } bool sphereIntersect(Ray r, Hitable sphere, float t_min, float t_max, inout HitRecord rec) { vec3 displacement = r.origin - sphere.center; float a = dot(r.direction, r.direction); float b = -dot(displacement, r.direction); float c = dot(displacement, displacement) - sphere.size * sphere.size; float discriminant = b * b - a * c; // Negative discriminant will never intersect if (discriminant < FLOAT_ZERO) return false; float sqrtDiscrim = sqrt(discriminant); float root1 = b - sqrtDiscrim; float root2 = b + sqrtDiscrim; float root = root1 < t_min ? root2 : root1; if(root < t_min || root > t_max ) return false; rec.t = root; rec.p = rayGetIntersection(r, root); rec.normal = (rec.p - sphere.center) / sphere.size; return true; } vec3 planeGetColor(Hitable p, vec3 intersect) { // Assumes plane is parallel with the XZ plane. // u == x, v == z float u = texture_coordinate(intersect.x, patternSize); float v = texture_coordinate(intersect.z, patternSize); if(texture == 1 && p.textured) return texture2D(planeTexture, vec2(u, v)).rgb; else return p.color; } bool planeIntersect(Ray r, Hitable plane, float t_min, float t_max, inout HitRecord rec) { vec3 displacement = r.origin - plane.center; float t = -dot(plane.normal, displacement); float parallelity = dot(plane.normal, r.direction); if (sign(t) == sign(parallelity)) { rec.t = t / parallelity; rec.normal = plane.normal; rec.p = displacement; return true; } else { return false; } } vec3 getBoxNormal(vec3 point, Hitable box) { float EPSI = 0.00001; if(abs(point.x - box.vmin.x) < EPSI) return vec3(-1,0,0); else if(abs(point.x - box.vmax.x) < EPSI) return vec3(1,0,0); else if(abs(point.y - box.vmin.y) < EPSI) return vec3(0,-1,0); else if(abs(point.y - box.vmax.y) < EPSI) return vec3(0,1,0); else if(abs(point.z - box.vmin.z) < EPSI) return vec3(0,0,-1); else if(abs(point.z - box.vmax.z) < EPSI) return vec3(0,0,1); return vec3(0); } //AABB method bool boxIntersect(Ray r, Hitable box, float t_min, float t_max, inout HitRecord rec) { float temp; float t; float tmin = (box.vmin.x - r.origin.x)/r.direction.x; float tmax = (box.vmax.x - r.origin.x)/r.direction.x; if (tmin > tmax) { temp = tmin; tmin = tmax; tmax = temp; } float tymin = (box.vmin.y - r.origin.y)/r.direction.y; float tymax = (box.vmax.y - r.origin.y)/r.direction.y; if (tymin > tymax) { temp = tymin; tymin = tymax; tymax = temp; } if ((tmin > tymax) || (tymin > tmax)) return false; if (tymin > tmin) tmin = tymin; if (tymax < tmax) tmax = tymax; float tzmin = (box.vmin.z - r.origin.z)/r.direction.z; float tzmax = (box.vmax.z - r.origin.z)/r.direction.z; if (tzmin > tzmax) { temp = tzmin; tzmin = tzmax; tzmax = temp; } if ((tmin > tzmax) || (tzmin > tmax)) return false; if (tzmin > tmin) tmin = tzmin; if (tzmax < tmax) tmax = tzmax; t = tmin < t_min ? tmax : tmin; if(t < t_max && t > t_min) { rec.t = t; rec.p = rayGetIntersection(r, rec.t); rec.normal = getBoxNormal(rec.p, box); return true; } else return false; } vec3 boxGetColor(Hitable c, vec3 intersect) { return c.color; } void setFaceNormal(Ray r, inout HitRecord rec, vec3 outward_normal) { rec.front_face = dot(r.direction, outward_normal) < 0.0; rec.normal = rec.front_face ? outward_normal : -outward_normal; } bool hitAnything(Ray r, float t_min, float t_max, inout HitRecord rec) { HitRecord temp_rec; bool hit_anything = false; float closest_so_far = t_max; // Iterate over all of the objects in the world, finding the closest intersection to the camera for (int i = 0; i < OBJECTS_IN_SCENE; i++) { int geometry = WorldObjects[i].geometry; if (geometry == GEOMETRY_SPHERE && sphereIntersect(r, WorldObjects[i], t_min, closest_so_far, temp_rec)) { hit_anything = true; if(temp_rec.t < closest_so_far) { setFaceNormal(r, temp_rec, temp_rec.normal); temp_rec.objectHit = WorldObjects[i]; closest_so_far = temp_rec.t; // We set temp_rec, makesure that it is returned rec = temp_rec; } } else if (geometry == GEOMETRY_BOX && boxIntersect(r, WorldObjects[i], t_min, closest_so_far, temp_rec)) { hit_anything = true; if(temp_rec.t < closest_so_far) { setFaceNormal(r, temp_rec, temp_rec.normal); temp_rec.objectHit = WorldObjects[i]; closest_so_far = temp_rec.t; // We set temp_rec, makesure that it is returned rec = temp_rec; } } else if (geometry == GEOMETRY_PLANE && planeIntersect(r, WorldObjects[i], t_min, closest_so_far, temp_rec)) { hit_anything = true; if(temp_rec.t < closest_so_far) { setFaceNormal(r, temp_rec, temp_rec.normal); temp_rec.objectHit = WorldObjects[i]; closest_so_far = temp_rec.t; // We set temp_rec, makesure that it is returned rec = temp_rec; } } // TODO: Add check for cube } return hit_anything; } int mod3(int a) { int q = a / 3; if ((a + 1) / 3 == q + 1) return 2; if ((a + 2) / 3 == q + 1) return 1; if ((a + 3) / 3 == q + 1) return 0; } `3f:T6e0,svg = { // Draw canvas let svg = d3.select(DOM.svg(width, height)); svg.append('g').attr('id', 'background-container').append('rect').attr('width', width).attr('height', height).attr('fill', '#1a1a1a'); // Draw the camera eye let camera_container = svg.append('g').attr('id', 'camera_container'); create_circle(camera_container, eye.x, eye.y, 12); create_text(camera_container, eye.x, eye.y - (1/5)*eye.y, 'Camera Eye'); // Draw the image lens let lens_container = svg.append('g').attr('id', 'sample_container'); create_text(lens_container, lens_x, lens_y_min - (1/5)*lens_y_min, 'Sampled Pixels'); ray_lens_intersect.forEach((ray) => { create_circle(lens_container, ray.x, ray.y, 4); }); // Draw the sphere create_circle(svg, circleCenterX, circleCenterY, sphere_radius, box_toggles.sphere_col, ray_toggles2.mat=='glass' ? 'none' : box_toggles.sphere_col); // Draw the light source let light_container = svg.append('g').attr('id', 'light_container') // [width/2-30, height/7.] create_circle(light_container, light_coordinates[0], light_coordinates[1],20, "#FFF700","#FFF700"); create_text(camera_container, light_coordinates[0], light_coordinates[1] - 50, 'Light Source'); // Draw the walls/floor let wall_container = svg.append('g').attr('id','wall'); let floor_container = svg.append('g').attr('id','floor'); create_rect(wall_container,width-150, 0, 20, height, box_toggles.box_col); create_rect(floor_container,0, height-20, width, 20, box_toggles.box_col); // Draw the occluder if(occluder_toggles.enable_occluder == 'on') create_circle(svg, occluderCenterX, occluderCenterY, occluderRadius, occluder_toggles.occluder_col,occluder_toggles.occluder_col); return svg; }40:T5bb6,{ if (cast == 1) { d3.selectAll('#rays_container').remove(); let x_offset = width - eye.x; let rays = svg.append('g').attr('id', 'rays_container'); var ray_paths = []; let occ_min_x = 1e9; let min_x = 1e9; let max_x = -1e9; let deez = true; // do not remove // Get all paths for the rays from eye to intersection to reflection/refraction // reflection/refraction stored in index 2 & 3 respectively if intersection occurs // Additionally calculate min x value for use in animation interpolation ray_lens_intersect.forEach(ray => { let x = eye.x + x_offset; let y = eye.y + ray.slope * x_offset; var points = calculatePath(ray, x_offset, ray_toggles.refraction_index); ray_paths.push(points); occ_min_x = points[1].x < 600 && points[1].x < occ_min_x ? points[1].x : occ_min_x; min_x = points[1].x < min_x ? points[1].x : min_x; //max_x = points[1].x > max_x ? points[1].x : max_x; }); // console.log("occ_min_x: " + occ_min_x); // Create animations ray_paths.forEach(path => { // If the length of the path is 5 then intersections occured if (path.length == 5) { // Store the paths for each type of ray let intersect_path = [path[0], path[1]]; let reflect_path = [path[1], path[2]]; let refract_path = [path[1], path[3]]; let refract_path2 = [path[3], path[4]]; // Draw intersections in a janky manner that attempts to account for different intersection points let primary_path = intersect_path.slice(); //primary let t = 1 - (primary_path[1].x - min_x) / primary_path[1].x; let interpolated_point = interpolate( [primary_path[0].x, primary_path[0].y], [primary_path[1].x, primary_path[1].y], t ); // Draw from eye to interpolated point primary_path[1] = { x: interpolated_point[0], y: interpolated_point[1] }; var draw_intersects = rays .append("path") .attr("d", line(primary_path)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill", "none"); var totalLength = draw_intersects.node().getTotalLength(); draw_intersects .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(1500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", function() { // Draw rest of ray let secondary_path = [primary_path[1], intersect_path[1]]; var draw_path2 = rays .append("path") .attr("d", line(secondary_path)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill", "none"); totalLength = draw_path2.node().getTotalLength(); draw_path2 .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(70) .delay(0) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr('stroke', box_toggles.sphere_col) .duration(0) .delay(0) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(intersect_path[0]), Object.values(intersect_path[1]) ); // Draw intersection circles intersection .attr("cx", intersect_path[1].x) .attr("cy", intersect_path[1].y); // Draw specular reflection if (ray_toggles2.reflection == 'specular') { var spec = rays .append("path") .attr("d", line(reflect_path)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = spec.node().getTotalLength(); spec .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0); } // Draw diffuse reflection else if (ray_toggles2.reflection == 'diffuse') { const circleNormal = [ circleCenterX - reflect_path[0].x, circleCenterY - reflect_path[0].y ]; createDiffuse(reflect_path, rays, circleNormal); } // Draw refracted rays if (ray_toggles2.mat == 'glass') { var refractedPath = rays .append("path") .attr("d", line(refract_path)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = refractedPath.node().getTotalLength(); refractedPath .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", () => { var refractedAgainPath = rays .append("path") .attr("d", line(refract_path2)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = refractedAgainPath.node().getTotalLength(); refractedAgainPath .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(refract_path2[0]), Object.values(refract_path2[1]) ); // Draw intersection circles intersection .attr("cx", refract_path2[1].x) .attr("cy", refract_path2[1].y); }) }) } // Draw shadow rays if (ray_toggles2.shadow_select == 'on') { let shadowPoints = calculateShadowRay( [reflect_path[0].x, reflect_path[0].y], true ); if (shadowPoints[0].x != -100000) { var shadow = rays .append("path") .attr("d", line(shadowPoints)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = shadow.node().getTotalLength(); shadow .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr( 'stroke', shadowPoints[1].y < 150 ? "#FFF700" : "#474747" ) .duration(0) .delay(0) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(shadowPoints[0]), Object.values(shadowPoints[1]) ); // Draw intersection circles intersection .attr("cx", shadowPoints[1].x) .attr("cy", shadowPoints[1].y); }); } } }); }) .transition() .attr('stroke', box_toggles.sphere_col) .duration(0) .delay(80); } // handle rays that don't intersect the sphere else { min_x = min_x > 1000 ? 700 : min_x; let primary_path = path.slice(); let t = 1 - (primary_path[1].x - min_x + 42) / primary_path[1].x; let interpolated_point = interpolate( [primary_path[0].x, primary_path[0].y], [primary_path[1].x, primary_path[1].y], t ); primary_path[1] = { x: interpolated_point[0], y: interpolated_point[1] }; let draw_path = rays .append("path") .attr("d", line(primary_path)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill", "none"); var totalLength = draw_path.node().getTotalLength(); let secondary_path = [primary_path[1], path[1]]; let o = adjustedIntersection(Object.values(secondary_path[0]), Object.values(secondary_path[1]), occluderRadius, [occluderCenterX ,occluderCenterY]); //console.log(o); let floor_intersection = floorIntersection(secondary_path); let wall_intersection = wallIntersection(secondary_path); let occluder_intersection = [secondary_path[0],{x:o[0], y:o[1]}]; if (occluder_toggles.enable_occluder == 'on' && o[0] != -100000) { draw_path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(1500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", () => { let draw_path2 = rays .append("path") .attr("d",line(occluder_intersection)) //.attr("d",line(floor_intersection[1].x != -100000 ? floor_intersection : secondary_path)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill", "none") // .transition() // .delay(70) // .duration(0) // .attr("stroke",occluder_toggles.occluder_col) ; totalLength = draw_path2.node().getTotalLength(); draw_path2 .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .delay(0) //.duration(1100) .duration(600) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() //.delay(60) .duration(0) .attr("stroke",occluder_toggles.occluder_col) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(occluder_intersection[0]), Object.values(occluder_intersection[1]) ); intersection .attr("cx", occluder_intersection[1].x) .attr("cy", occluder_intersection[1].y); if (ray_toggles2.shadow_select == 'on' && o[0] != -100000) { let sphere_intersect = adjustedIntersection2_electric_boogalo(Object.values(occluder_intersection[1]), [circleCenterX, circleCenterY], sphere_radius, [circleCenterX-20, circleCenterY-20]); let sphere_path = [occluder_intersection[1], {x:sphere_intersect[0], y:sphere_intersect[1]}]; //let shadow_path = calculateShadowRay(sphere_path, false); //console.log(shadow_path); let draw_sphere_path = rays .append("path") .attr("d", line(sphere_path)) .attr("stroke", occluder_toggles.occluder_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = draw_sphere_path.node().getTotalLength(); draw_sphere_path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr('stroke', box_toggles.sphere_col) .delay(0) .duration(0).on("end", () =>{ intersection = create_ray_intersections( rays, Object.values(sphere_path[0]), Object.values(sphere_path[1]) ); intersection .attr("cx", sphere_path[1].x) .attr("cy", sphere_path[1].y); let shadow = adjustedIntersection2_electric_boogalo(Object.values(sphere_path[1]), light_coordinates, 20, light_coordinates); let draw_shadow_path = rays .append("path") .attr("d", line( [sphere_path[1],{x:shadow[0], y:shadow[1]}] )) .attr("stroke", occluder_toggles.occluder_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = draw_shadow_path.node().getTotalLength(); draw_shadow_path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(700) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr('stroke', "#FFF700") .delay(0) .duration(0).on("end", () => { intersection = create_ray_intersections( rays, Object.values(sphere_path[1]), [shadow[0], shadow[1]] ); intersection .attr("cx", shadow[0]) .attr("cy", shadow[1]); }) }) //let o = adjustedIntersection(Object.values(secondary_path[0]), Object.values(secondary_path[1]), occluderRadius, [occluderCenterX ,occluderCenterY]); } }); }).transition().delay(600).duration(0).attr("stroke",occluder_toggles.occluder_col); } else { draw_path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(1500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", () => { let draw_path2 = rays .append("path") .attr( "d", line( floor_intersection[1].x != -100000 ? floor_intersection : wall_intersection[1].x != -100000 ? wall_intersection : secondary_path ) ) //.attr("d",line(floor_intersection[1].x != -100000 ? floor_intersection : secondary_path)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill", "none"); totalLength = draw_path2.node().getTotalLength(); draw_path2 .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .delay(0) //.duration(1100) .duration( floor_intersection[1].x != -100000 ? 500 : wall_intersection[1].x != -100000 ? 700 : 1100 ) // .duration(floor_intersection[1].x != -100000 || wall_intersection[1].x != -100000 ? min_x != 600 ? 500 : 1100 : 1100) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .delay(0) .duration(0) .attr( "stroke", floor_intersection[1].x != -100000 || wall_intersection[1].x != -100000 ? box_toggles.box_col : "steelblue" ); }) .transition() .attr( "stroke", floor_intersection[1].x != -100000 || wall_intersection[1].x != -100000 ? box_toggles.box_col : "steelblue" ) .delay(floor_intersection[1].x != -100000 ? 500 : 700) .duration(0) .on("end", () => { if (floor_intersection[1].x != -100000) { let intersection = create_ray_intersections( rays, Object.values(floor_intersection[0]), Object.values(floor_intersection[1]) ); intersection .attr("cx", floor_intersection[1].x) .attr("cy", floor_intersection[1].y); let shadowPoints = calculateShadowRay( [floor_intersection[1].x, floor_intersection[1].y], false ); if ( shadowPoints[0].x != -100000 && ray_toggles2.shadow_select == 'on' ) { var shadow = rays .append("path") .attr("d", line(shadowPoints)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = shadow.node().getTotalLength(); shadow .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr( 'stroke', shadowPoints[1].y < 150 ? "#FFF700" : "#474747" ) .duration(0) .delay(0) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(shadowPoints[0]), Object.values(shadowPoints[1]) ); // Draw intersection circles intersection .attr("cx", shadowPoints[1].x) .attr("cy", shadowPoints[1].y); }); } } else if (wall_intersection[1].x != -100000) { if (deez) console.log("nutz"); let intersection = create_ray_intersections( rays, Object.values(wall_intersection[0]), Object.values(wall_intersection[1]) ); intersection .attr("cx", wall_intersection[1].x) .attr("cy", wall_intersection[1].y); let shadowPoints = calculateShadowRay( [wall_intersection[1].x, wall_intersection[1].y], false ); if ( shadowPoints[0].x != -100000 && ray_toggles2.shadow_select == 'on' ) { var shadow = rays .append("path") .attr("d", line(shadowPoints)) .attr("stroke", box_toggles.sphere_col) .attr("stroke-width", "2") .attr("fill", "none"); totalLength = shadow.node().getTotalLength(); shadow .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .transition() .attr( 'stroke', shadowPoints[1].y < 150 ? "#FFF700" : "#474747" ) .duration(0) .delay(0) .on("end", () => { let intersection = create_ray_intersections( rays, Object.values(shadowPoints[0]), Object.values(shadowPoints[1]) ); // Draw intersection circles intersection .attr("cx", shadowPoints[1].x) .attr("cy", shadowPoints[1].y); }); } } }); } } }); } else d3.selectAll('#rays_container').remove(); }41:T487,function calculateShadowRay(points, ignoreSphere) { // points is a 2d array of xy coordinates let occluder_intersect = occluderIntersection( points, [light_coordinates[0], light_coordinates[1]], occluderRadius, [occluderCenterX, occluderCenterY] ); let sphere_intersect = adjustedIntersection2_electric_boogalo( points, [light_coordinates[0], light_coordinates[1]], sphere_radius, [circleCenterX, circleCenterY] ); if (sphere_intersect[0] != -100000 && !ignoreSphere) return [ { x: points[0], y: points[1] }, { x: sphere_intersect[0], y: sphere_intersect[1] } ]; else if ( occluder_toggles.enable_occluder == 'on' && occluder_intersect[0] != -100000 ) return [ { x: points[0], y: points[1] }, { x: occluder_intersect[0], y: occluder_intersect[1] } ]; else { let light_intersect = occluderIntersection( points, [light_coordinates[0], light_coordinates[1]], 20, [light_coordinates[0], light_coordinates[1]] ); return [ { x: points[0], y: points[1] }, { x: light_intersect[0], y: light_intersect[1] } ]; } }42:T450,function createDiffuse(points, reflected_rays_container, normal){ //remember diffuse carries its color with it to its next intersection, dont know if we'll do this let theta = [-90, -105, -120, -135, -150, -165, 180, 165, 150, 135, 120, 105, 90]; //let theta = [-30, -25, -20, -15, -10, -5, 5, 10, 15, 20, 25, 30]; //let theta = [5, 10 , 15, -5, -10, -15]; points[1].x = normal[0]* 1.2; points[1].y = normal[1]* 1.2; //points[0] is intersection point, normal is vector //points[1] change to point on normals path out of circle let x = points[1].x; let y = points[1].y; let r = 0; //rotations for(let i=0;i<12;i++) { //console.log(points); r = geometric.angleToRadians(theta[i]); points[1].x = Math.cos(r)*x - Math.sin(r)*y; points[1].y = Math.sin(r)*x + Math.cos(r)*y; points[1].x = points[1].x + points[0].x;// add this back cuz rotation assumes around (0,0) points[1].y = points[1].y + points[0].y; create_line_N(reflected_rays_container, points, 'white'); //console.log(points); } }43:Tdc6,function calculatePath(ray, x_offset, index) { let x = eye.x + x_offset; let y = eye.y + (ray.slope * x_offset); let points = []; points.push({x: eye.x, y: eye.y}); // console.log(points); if (ray.x < x) points.push({x: x, y: y}); else points.push({x: ray.x, y: ray.y}); // console.log(points); const p = adjustedIntersection(Object.values(points[0]), Object.values(points[1]), sphere_radius, [circleCenterX ,circleCenterY]); // const o = adjustedIntersection(Object.values(points[0]), Object.values(points[1]), occluderRadius, [occluderCenterX ,occluderCenterY]); // console.log(p) if (p[0] != -100000 && p[1] != -100000 && points[1].x >= p[0]) points[1] = ({x:p[0], y:p[1]}); else { //console.log("here"); p[0] = p[1] = -100000; } // Check for sphere intersection if (p[0] != -100000 && p[1] != -100000) { const eps = 1e-10; // Epsilon value to be used with the calculated slope // Normal vector of the circle intersection, in relation to the eye object const circleNormal = [circleCenterX - p[0], circleCenterY - p[1]]; // console.log(circleNormal); // console.log([x - eye.x, y - eye.y]); // Calculates the vector of the reflected ray const reflectedRay = reflect([x - eye.x, y - eye.y], circleNormal); // console.log("Reflected Ray: ", reflectedRay); // Divide-by-zero sanity check const reflectedSlope = (reflectedRay[0] < eps && reflectedRay[0] > -eps) ? 0 : reflectedRay[1] / reflectedRay[0]; //console.log("Slope: ", reflectedSlope); // Draws the reflected line based if the reflection ray is +x (reflection towards the right), or -x (reflecting towards the left). (100 is hardcoded) let reflectedX = p[0] + (reflectedRay[0] > 0 ? sphere_radius : -sphere_radius); let reflectedY = p[1] + (reflectedRay[0] > 0 ? reflectedSlope * sphere_radius : -reflectedSlope * sphere_radius); console.log(reflectedY); if (Math.abs(p[1] - reflectedY) > 200) { let t = 200 / Math.abs(reflectedY - p[1]) let point = interpolate(p, [reflectedX, reflectedY], t) points.push({x:point[0], y:point[1]}); } else points.push({x: reflectedX, y: reflectedY}); let reflectedPoints = []; reflectedPoints.push({x: p[0], y: p[1]});//path[1] reflectedPoints.push({x: reflectedX, y: reflectedY});//path[2] // let reflectedLine = create_line(reflected_rays_container, reflectedPoints); //refraction start let refracted = refract([x - eye.x, y - eye.y], circleNormal, index); //change 1.5 maybe, 1.5 is refraction for glass const p2 = adjustedIntersection2_electric_boogalo(p, [p[0] + refracted[0], p[1] - refracted[1]], sphere_radius, [circleCenterX ,circleCenterY]); points.push({x: p2[0], y: p2[1]});//path[3] refracted = refract2([p[0], p[1]], circleNormal, 1/index); let m = refracted[1]/refracted[0]; let yy = ((width-150)-p2[0])*m + p2[1]; points.push({x: width-150, y: yy}); //path[4] } // else if (o[0] != -100000 && occluder_toggles.enable_occluder == 'on') // points[1] = ({x:o[0], y:o[1]}) return points; }44:T2063,md `

Report

Description

This project is meant to show off the implementation of backward ray tracing in webgl, more specifically regl. In addition, we’ve demonstrated how the algorithm works through 2D animation done using the D3 JavaScript library.

Implementation

Animation

Most of our code that was related to ray tracing was taken from the “Ray tracing in One Weekend” book. The biggest learning curve was putting everything through d3 and then animating it. We started with a camera that shot out rays at a sphere at different angles in a simple animation. Soon after, we implemented intersection points with our main sphere. While working on bugs and animation fixes, members began implementing specular, refractive, and diffuse rays. We overhauled the animation process to allow newly generated rays to move in sync with already cast rays. Added a wall and floor then started Implementing shadow rays. Added an occluder. Fixed refraction rays. Finished shadow rays and occluder implementation.

Ray Tracer

We initially used “Ray tracing in One Weekend” as our reference to design the ray tracer. Learning how to make the code work in regl took some time getting used to especially making it work with the frag shader and regl camera. Once we were able to render a sphere and improve the camera, we then added a plane and started work on adding diffuse materials. We were not concerned with the structure of the code until at a certain point in which we realized that our code can definitely benefit from using a data structure for objects that our rays can hit. The data structure from the book is used in our ray tracer for that purpose. However, the book relied on C++ features that GLSL didn’t have. This was a major reason why we’ve skipped the section of the book pertaining to this topic. However it needed to be done, especially if we were to use multiple objects and individually change their properties. Implementing the data structure required some overhauling and time, but in the meantime, other members were implementing diffuse materials. Our ray tracer previously borrowed more elements from the book, but we realized that the ray tracer design from the book did not implement features present in backwards ray tracing such as the shadow, reflective, or refractive rays. The shadows generated in the book is a result from ambient occlusion. So another overhaul in algorithmic design was needed to make use of the other rays. We used other resources such as Scratchapixel’s “Light Transport Algorithms and Ray-Tracing Whitted Ray-Tracing,” to implement these desired features. Furthermore, we followed the design for Whitted Ray Tracing from the original paper to support, with limitations, global illumination from the scene.

Team Contribution

Jason Rodriguez - Ray tracing Team Leader

Created the initial Observable page and helped implement code from the book to the page.
Added Planes.
Merged code.
Added reflection.
Implemented Axis-Aligned Bounding Boxes algorithm, was used to create the Cornell Box scene.
Implemented converting JSON data into float textures and loading scene data from them.
Worked on refraction
Managed Ray Tracing team

Zachary Mallet- Ray tracing team member

Worked on Cornell Box and Materials
Merged code
Assisted with sprint planning

AJ DeSantis- Ray tracing team member

Worked on diffuse and specular material
Worked on data structure for hittable objects

Ethan Pritchard - Ray tracing team member

Worked on the first animation iteration
Created hittable object structure
Created a collection of hittable objects structure
Created a HitRecord structure to track ray data
Worked on ray intersection methods

Brady Hill - Ray tracing + Animation

Helped optimize and clean ray tracer code
Assisted with reflection and generalizing materials (ray tracing)
Extended implementation of shadow rays (animation)

Randy Glasgow - Ray tracing + Animation

Assisted with the optimization of ray tracer code
Assisted with animation of rays
Assisted with implementation of shadow rays
Assisted with debugging various aspects of animation

Marlon Calvo - Ray tracing team member

Implemented texturing of spherical and rectangular objects
Implemented data structure and code to allow materials
Implemented whitted ray tracing to supersede RTIOW’s ray tracer

Jeff Fortune - Animation Team Member

Implemented reflection algorithm and animation
Extended implementation of refraction rays
Assisted with implementation of shadow rays
Polished refraction ray animation

Alan Perrow - Ray tracing Team Member

Helped in development of initial ray tracer
Implemented original diffuse algorithm including global illumination
Implemented uniforms as loop conditionals for convenience
Helped port old naive Monte Carlo algorithm into new whitted algorithm
Created presentation scene with cornell box
Provided high quality “renders” of scene output

Brandon Frateschi - Ray tracing Team Member

Created the base Hitable objects for the ray tracer
Helped with the first iteration of the diffuse algorithm
Assisted with random() and noise functions for diffuse lighting
Implemented the Refraction algorithm
Added Fresnel algorithm to mix Refraction and Reflection lighting

Michael Ortiz - Animation Team Member

Implemented algorithm for ray intersection with spheres, walls, and floor
Implemented shadow rays algorithm
Implemented sphere-sphere ray intersections
Designed overall animation including:

Creating the canvas and objects in the scene
Creating the “box” that the scene is contained in
Animating and synchronizing the casting, intersection, reflection, refraction, and coloration of the rays
Adding various buttons, sliders, etc that allow user to configure the animation

Merged animation notebook with ray tracer notebook

Nicolas El Tenn - Animation Member

Implementented original object translation animation
Created the light source and helped with the animation
Assisted with debugging refraction animation on the way out
Assisted with the creation of the shadow rays

Jordan Edelman - Animation Team Member

Implemented refraction algorithm and animation
Implemented diffuse algorithm and animation
Assisted with implementation of shadow rays

Jacob Thomas - Animation Team Member

Animated the camera’s rays
Assisted with the ray intersection points
Help debug with some rays not intersecting correctly

Andrew Obeso - Ray tracing Team Member

Helped implement base Whitted ray tracing algorithm
Added shadow rays
Helped implement original simple ray tracing code

References

https://raytracing.github.io/books/RayTracingInOneWeekend.html
https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/reflection-refraction-fresnel
https://www.scratchapixel.com/lessons/3d-basic-rendering/ray-tracing-overview/light-transport-ray-tracing-whitted?url=3d-basic-rendering/ray-tracing-overview/light-transport-ray-tracing-whitted
https://observablehq.com/@stwind/how-raymarching-works
https://www.cs.drexel.edu/~david/Classes/Papers/p343-whitted.pdf
https://www.scratchapixel.com/lessons/3d-basic-rendering/minimal-ray-tracer-rendering-simple-shapes/ray-box-intersection
https://www.rose-hulman.edu/class/csse/csse451/AABB/
https://www.scratchapixel.com/lessons/3d-basic-rendering/minimal-ray-tracer-rendering-simple-shapes/ray-plane-and-ray-disk-intersection

`45:[{"id":"7ac439434378091764695a8628b28b0231fbb2f8c7af9b37d710c2d2648b7e09e393efd4e02a36bea5d885e919c6cae07eadc327935bbd019e673acdf60d07a1","href":"https://static.observableusercontent.com/files/7ac439434378091764695a8628b28b0231fbb2f8c7af9b37d710c2d2648b7e09e393efd4e02a36bea5d885e919c6cae07eadc327935bbd019e673acdf60d07a1","name":"Molecule-7.json","type":"application/json","lastModified":1607625009564.979,"size":41432}] 38:{"id":"cbca1ece4a13cdc3","slug":"cap-4720-class-project-raytracer","title":"CAP 4720 Class Project: Raytracer","thumbnail":"4e452e08e69cd75fa0a2d7745aae160e45de45084d0f606e89429256f324d5b7","access_level":"public","create_time":"$D2020-12-10T18:30:09.564Z","update_time":"$D2020-12-10T18:34:36.185Z","view_time":null,"first_public_time":"$D2020-12-10T18:34:43.567Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3140,"publish_version":3140,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CAP 4720 Class Project: Raytracer","cells":[{"id":0,"value":"md`# CAP 4720 Class Project: Raytracer\nLink to the Original Authors' notebook page: https://observablehq.com/d/dec629014c9edf49`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"viewof imageSettings = columns({ \n scale: slider({\n title: 'Render Scale',\n description: 'Decrease for faster rendering',\n value: 0.1,\n step: 0.1,\n min: 0.1,\n max: 1\n }),\n maxDepth: slider({\n title: 'Max Depth',\n description: 'How many bounces a single ray can make',\n value: 1,\n step: 1,\n min: 1,\n max: 16\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"viewof sceneSettings = columns({\n diffuseFactor: slider({\n title: 'Diffuse Factor',\n description: 'How much color to reflect from diffuse rays',\n value: 0.5,\n step: 0.01,\n min: 0.01,\n max: 1\n }),\n lightPower: slider({\n title: 'Light Power',\n description: 'Power level of the light.',\n value: 1,\n step: 0.1,\n min: 0,\n max: 2\n }),\n lightColor: color({\n title: 'Light Color',\n value: '#ffffff'\n }),\n ambient: color({\n title: 'Ambient Color',\n value: '#000000'\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2737,"value":"viewof lightAxis = columns({\n lightX: slider({\n title: 'Light X',\n description: 'X Position of Light',\n value: 0,\n step: 0.01,\n min: -12,\n max: 12\n }),\n lightY: slider({\n title: 'Light Y',\n description: 'Y Position of Light',\n value: 1.70,\n step: 0.01,\n min: -12,\n max: 12\n }),\n lightZ: slider({\n title: 'Light Z',\n description: 'Z Position of Light',\n value: 0,\n step: 0.01,\n min: -12,\n max: 12\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"viewof sqrtPixelSamples = slider({\n title: 'Image Quality (Sampling Level)',\n description: 'Square root of how many samples to take per pixel',\n value: 1,\n step: 1,\n min: 1,\n max: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"viewof textureOpt = radio({\n title: \"Texture\",\n description: 'enable/disable texture',\n options: [{label:\"Disable\",value:0},{label:\"Enable\",value:1}],\n value: 0\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2543,"value":"viewof Scenes = columns({\n molSelect: radio({\n title: \"Molecules\",\n description: 'Change molecules',\n options: [{label:\"Ethanol\",value:0},{label:\"Aspirin\",value:1},{label:\"Caffeine\",value:2},{label:\"Nicotine\",value:3},{label:\"LSD\",value:4},{label:\"Cocaine\",value:5},{label:\"Cholesterol\",value:6}, {label:\"Lycopene\",value:7},{label:\"Copper\",value:8},{label:\"Fluorite\",value:9},{label:\"Glucose\",value:10},{label:\"Salt\",value:11},{label:\"YBCO superconductor\",value:12}, {label:\"Buckyball\",value:13},{label:\"Graphite\",value:14},{label:\"Aluminium oxide\",value:15},{label:\"Cubane\",value:16}],\n value: 0\n }),\n cornellBox: radio({\n title: \"Cornell Box\",\n description: 'Change scene to cornell box',\n options: [{label:\"disable\",value:0},{label:\"enable\",value:1}],\n value: 1\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2389,"value":"viewof sphereAlbedo = slider({\n title: 'Sphere Albedo',\n description: 'Albedo for the sphere',\n value: 0,\n step: 0.1,\n min: 0,\n max: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md `## Viewport Properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"viewportWidth = 960 * imageSettings.scale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"viewportHeight = 540 * imageSettings.scale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"focalLength = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"frameHeight = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3068,"value":"md`# Raytracer Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"md`## Animation Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3078,"value":"viewof box_toggles = columns({\n sphere_col: color({\n value: \"#ff0000\",\n description: \"Select sphere color\"\n }),\n box_col: color({\n value: \"#3700ff\",\n description: \"Select box color\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"viewof sphere_radius = mutableForm(slider({\n min:65, \n max:100, \n precision:0, \n step:1, \n value: 75, \n description: 'Select sphere radius'\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3084,"value":"md`## Ray Toggles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"viewof ray_toggles = columns({\n num_rays_slider: slider({\n min: 2,\n max: 24,\n precision: 0,\n step: 1,\n value: 12,\n description: \"Select number of rays\"\n }),\n refraction_index: slider({\n min: 1,\n max: 2,\n precision: 1,\n step: 0.1,\n value: 1.5,\n description: 'Select refraction index'\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3090,"value":"viewof ray_toggles2 = columns({\n mat : radio({\n description: 'Select object material',\n options: [\n { label: 'Transparent', value: 'glass' },\n { label: 'Opaque', value: 'opaque' }\n ],\n value: 'opaque'\n }),\n reflection : radio({\n description: 'Select type of reflection',\n options: [\n { label: 'Specular', value: 'specular' },\n { label: 'Diffuse', value: 'diffuse' },\n { label: 'No Reflection', value: 'none'}\n ],\n value: 'none'\n }),\n shadow_select : radio({\n description: 'Enable shadow rays',\n options: [\n {label: 'On', value: 'on'},\n {label: 'Off', value: 'off'}\n ],\n value: 'off'\n })\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3093,"value":"md`## Sphere 2 Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3096,"value":"viewof occluder_toggles = columns({\n occluder_col: color({\n value: \"#00eeff\",\n description: \"Select sphere color\"\n }),\n enable_occluder: radio({\n options: [\n { label: 'On', value: 'on' },\n { label: 'Off', value: 'off' }\n ],\n value: 'off',\n description: \"Enable sphere (will disable reflection)\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3099,"value":"viewof cast = {\n let value = 0;\n const button = html`