Add ray tracing project

Author: ekzhang

README.md

@@ -147,11 +147,18 @@ This project is a real-time ray tracer implemented as a GPU shader. Ray tracing
 
 > `pbrt` is based on the _ray-tracing_ algorithm. Ray tracing is an elegant technique that has its origins in lens making; Carl Friedrich Gauß traced rays through lenses by hand in the 19th century. Ray-tracing algorithms on computers follow the path of infinitesimal rays of light through the scene until they intersect a surface. This approach gives a simple method for finding the first visible object as seen from any particular position and direction and is the basis for many rendering algorithms.
 
+<p align="center">
+<a href="#ray-tracing">
+<img src="https://i.imgur.com/1xaJmxY.png" width="600">
+</a>
+</p>
+
 You might find this [non-technical introductory video by Disney](https://youtu.be/frLwRLS_ZR0) to provide helpful context.
 
-1. To parallelize our ray tracer and run it on a GPU shader, we will use a geometry modeling technique known as [_signed distance fields (SDFs)_](https://en.wikipedia.org/wiki/Signed_distance_function). The `map()` function returns a signed distance corresponding to the closest point on the surface of any object in the scene.
-2. **Task 1:** Fill in the code for the `march()` function, which takes a ray as input and returns the point of first intersection with any object in the scene. [Hint: You will need to call the `map()` function in a loop.]
-3. **Task 2:** Implement shadows. In the `illuminate()` function, before doing lighting calculations, add a conditional statement that first checks if the ray from the point to the light source is unobstructed.
+1. To parallelize our ray tracer and run it on a GPU shader, we revert back to running our fragment shader once for every pixel in the screen, like in the 2D graphics examples. However, this time, our shader will do some geometry calculations by shooting rays from the camera for each pixel. The `trace()` function models this behavior by returning the color corresponding to a given ray.
+2. To model geometry, the starter code has set up a simple scene involving three spheres and one circle forming the checkered floor. This geometry is located in the `intersect()` function, which computes the first intersection point (represented by a `Hit` struct) of any ray in the space. Following the pattern shown here, add a fourth sphere to the scene with a different position, color, and radius.
+3. The `calcLighting()` function uses `illuminate()`, which contains a simple implementation of a Phong shader, to compute the lighting at a given point by adding up the contributions of two point lights. Modify this code to add a third point light at a different location, with your choice of intensity. (For inspiration, see [three-point lighting](https://en.wikipedia.org/wiki/Three-point_lighting).)
+4. **Task:** Implement shadows. In the `illuminate()` function, before doing lighting calculations, add a conditional statement checks if the ray from the point to the light source is obstructed or not. If it is obstructed, then you should immediately return `vec3(0.0)` to simulate shadows. [Hint: You will need to use the `intersect()` function with a new `Ray` object that you construct, starting from the point `pos`.]
 
 If you're interested in learning more about ray tracing, check out [rpt](https://github.com/ekzhang/rpt/), which is a physically-based path tracer written in Rust with a lot more features.
 

shaders/raytracing.frag.glsl

@@ -1,14 +1,160 @@
 precision mediump float;
 
+const float epsilon = 0.001;
+const float inf = 1e9;
+
 uniform vec2 resolution;
-uniform float time;
+uniform vec3 eye;
+uniform vec3 center;
+uniform vec3 background;
+uniform bool antialias;
+
+struct Ray {
+    vec3 origin;
+    vec3 dir;
+};
+
+struct Material {
+    vec3 kd;
+    vec3 ks;
+    bool metal;
+    bool checker;
+};
+
+struct Hit {
+    float time;
+    vec3 normal;
+    Material material;
+};
+
+// Trace a ray to a sphere, using high school geometry
+void sphere(inout Hit h, Ray r, vec4 s, Material m) {
+    // Rescale to unit sphere at the origin
+    r.origin = (r.origin - s.xyz) / s.w;
+    r.dir = r.dir / s.w;
+
+    // Quadratic formula
+    float a = dot(r.dir, r.dir);
+    float b = dot(r.dir, r.origin);
+    float c = dot(r.origin, r.origin) - 1.0;
+
+    float d = b * b - a * c;
+    if (d < 0.0) {
+        return;
+    }
+
+    d = sqrt(d);
+    float t = (-b - d) / a;
+    if (t < epsilon) {
+        t = (-b + d) / a;
+    }
+
+    if (t >= epsilon && t < h.time) {
+        h.time = t;
+        h.normal = normalize(r.origin + r.dir * t);
+        h.material = m;
+    }
+}
+
+void circle(inout Hit h, Ray r, float y, float radius, Material m) {
+    float t = (y - r.origin.y) / r.dir.y;
+    if (t >= epsilon && t < h.time
+            && length(r.origin + t * r.dir) < radius) {
+        h.time = t;
+        h.normal = vec3(0.0, 1.0, 0.0);
+        h.material = m;
+    }
+}
+
+// Intersect a ray with the scene
+Hit intersect(Ray r) {
+    Hit h = Hit(inf, vec3(0.0), Material(vec3(0.0), vec3(0.0), false, false));
+    sphere(h, r, vec4(0.8, -1.0, -10.0, 1.0),
+        Material(vec3(0.4, 0.2, 0.8), vec3(0.8), false, false));
+    sphere(h, r, vec4(-2.5, -0.2, -12.0, 1.8),
+        Material(vec3(1.0, 0.4, 0.2), vec3(0.8), true, false));
+    sphere(h, r, vec4(-3.5, -1.2, -6.0, 0.8),
+        Material(vec3(0.2, 0.6, 0.3), vec3(0.8), false, false));
+    circle(h, r, -2.0, 50.0,
+        Material(vec3(0.8, 0.8, 0.8), vec3(0.0), false, true));
+    return h;
+}
+
+// Compute lighting from one light
+vec3 illuminate(vec3 lightPosition, vec3 pos, vec3 wo, Hit h) {
+    vec3 wi = lightPosition - pos;
+    vec3 kd = h.material.kd;
+    if (h.material.checker) {
+        // Checkerboard pattern for the floor
+        vec2 coords = floor(pos.xz);
+        kd = vec3(mod(coords.x + coords.y, 2.0) * 0.8 + 0.2);
+    }
+    float intensity = 1.0 / dot(wi, wi); // inverse-square law
+    vec3 diffuse = kd * max(dot(normalize(wi), h.normal), 0.0);
+
+    // Non-dielectric materials have tinted reflections
+    vec3 ks = h.material.metal ? h.material.kd : h.material.ks;
+    vec3 r = -reflect(normalize(wi), h.normal);
+    vec3 specular = ks * pow(max(dot(r, wo), 0.0), 10.0);
+
+    return intensity * (diffuse + specular);
+}
+
+// Compute total lighting at a given point
+vec3 calcLighting(vec3 pos, vec3 wo, Hit h) {
+    vec3 color = vec3(0.0);
+    color += 100.0 * illuminate(vec3(-3.0, 10.0, 0.0), pos, wo, h);
+    color += 200000.0 * illuminate(vec3(0.0, 1000.0, 0.0), pos, wo, h);
+    return color;
+}
+
+// Trace a ray, returning an RGB color based on its value
+vec3 trace(Ray r) {
+    Hit h = intersect(r);
+    if (h.time != inf) {
+        vec3 pos = r.origin + h.time * r.dir;
+        vec3 color = calcLighting(pos, -r.dir, h);
+        if (h.material.metal) {
+            vec3 dir = reflect(r.dir, h.normal);
+            Hit h2 = intersect(Ray(pos, dir));
+            if (h2.time < inf) {
+                vec3 pos2 = pos + h2.time * dir;
+                color += 0.2 * h.material.ks * calcLighting(pos2, -dir, h2);
+            } else {
+                color += 0.2 * h.material.ks * background;
+            }
+        }
+        return color;
+    }
+    return background;
+}
+
+vec3 tracePixel(vec2 coord) {
+    // Pixel coordinates, normalized so that p.y in range [-1, 1]
+    vec2 p = (2.0 * coord - resolution) / resolution.y;
+
+    // View ray from camera
+    vec3 ww = normalize(center - eye);
+    vec3 uu = normalize(cross(ww, vec3(0.0, 1.0, 0.0)));
+    vec3 vv = normalize(cross(uu, ww));
+    // (Note: cot(pi/12) = 2 + sqrt(3) = 3.73)
+    vec3 dir = normalize(p.x * uu + p.y * vv + 3.73 * ww);
+
+    return trace(Ray(eye, dir));
+}
 
 void main() {
-    vec2 coord = gl_FragCoord.xy / resolution;
+    vec3 color = vec3(0.0);
 
-    // Output RGB color in range from 0.0 to 1.0
-    vec3 color = vec3(coord.x, coord.y, 0.0);
-    color.z += abs(sin(time));
+    if (antialias) {
+        // Anti-aliasing by supersampling multiple rays
+        color += 0.25 * tracePixel(gl_FragCoord.xy + vec2(-0.25, -0.25));
+        color += 0.25 * tracePixel(gl_FragCoord.xy + vec2(-0.25, +0.25));
+        color += 0.25 * tracePixel(gl_FragCoord.xy + vec2(+0.25, -0.25));
+        color += 0.25 * tracePixel(gl_FragCoord.xy + vec2(+0.25, +0.25));
+    } else {
+        color += tracePixel(gl_FragCoord.xy);
+    }
 
     gl_FragColor = vec4(color, 1.0);
 }

src/index.js

@@ -31,6 +31,8 @@ function initPane() {
     kd: { r: 95, g: 230, b: 213 },
     ks: { r: 240, g: 240, b: 240 },
     shininess: 5.0,
+    background: { r: 120, g: 178, b: 255 },
+    antialias: true,
   };
 
   pane.addInput(params, "project", {
@@ -66,6 +68,8 @@ function initPane() {
       pane.addInput(params, "shininess", { min: 1, max: 9 }),
       ["shading", "contours"],
     ],
+    [pane.addInput(params, "background"), ["raytracing"]],
+    [pane.addInput(params, "antialias"), ["raytracing"]],
   ];
 
   pane.addMonitor(params, "fps");
@@ -105,6 +109,39 @@ async function updateMesh(path) {
   mesh = await resp.json();
 }
 
+function toColor(color) {
+  return [color.r / 255, color.g / 255, color.b / 255];
+}
+
+function compileShaders() {
+  try {
+    return {
+      quilt: regl({
+        frag: shaders.quiltFrag,
+        vert: shaders.quiltVert,
+      }),
+      landscape: regl({
+        frag: shaders.landscapeFrag,
+        vert: shaders.landscapeVert,
+      }),
+      shading: regl({
+        frag: shaders.shadingFrag,
+        vert: shaders.shadingVert,
+      }),
+      contours: regl({
+        frag: shaders.contoursFrag,
+        vert: shaders.contoursVert,
+      }),
+      raytracing: regl({
+        frag: shaders.raytracingFrag,
+        vert: shaders.raytracingVert,
+      }),
+    };
+  } catch {
+    return null;
+  }
+}
+
 const common = regl({
   attributes: {
     position: [
@@ -134,17 +171,13 @@ const common = regl({
   },
 });
 
-const draw = {
+const setup = {
   quilt: regl({
-    frag: () => shaders.quiltFrag,
-    vert: () => shaders.quiltVert,
     uniforms: {
       seed: () => params.seed,
     },
   }),
   landscape: regl({
-    frag: () => shaders.landscapeFrag,
-    vert: () => shaders.landscapeVert,
     uniforms: {
       seed: () => params.seed,
       scale: () => params.scale,
@@ -156,34 +189,34 @@ const draw = {
       normal: () => mesh.normals,
     },
     uniforms: {
-      kd: () => [params.kd.r / 255, params.kd.g / 255, params.kd.b / 255],
-      ks: () => [params.ks.r / 255, params.ks.g / 255, params.ks.b / 255],
+      kd: () => toColor(params.kd),
+      ks: () => toColor(params.ks),
       shininess: () => params.shininess,
     },
     elements: () => mesh.elements,
-    frag: () => shaders.shadingFrag,
-    vert: () => shaders.shadingVert,
   }),
   contours: regl({
     attributes: {
       position: () => mesh.vertices,
       normal: () => mesh.normals,
     },
     uniforms: {
-      kd: () => [params.kd.r / 255, params.kd.g / 255, params.kd.b / 255],
-      ks: () => [params.ks.r / 255, params.ks.g / 255, params.ks.b / 255],
+      kd: () => toColor(params.kd),
+      ks: () => toColor(params.ks),
       shininess: () => params.shininess,
     },
     elements: () => mesh.elements,
-    frag: () => shaders.contoursFrag,
-    vert: () => shaders.contoursVert,
   }),
   raytracing: regl({
-    frag: () => shaders.raytracingFrag,
-    vert: () => shaders.raytracingVert,
+    uniforms: {
+      background: () => toColor(params.background),
+      antialias: () => params.antialias,
+    },
   }),
 };
 
+let draw = compileShaders();
+
 updateMesh(params.mesh).then(() => {
   const frameTimes = [...Array(60)].fill(0);
   regl.frame(() => {
@@ -196,7 +229,9 @@ updateMesh(params.mesh).then(() => {
     common(() => {
       if (params.project === "contours") regl.clear({ color: [1, 1, 1, 1] });
       else regl.clear({ color: [0, 0, 0, 1] });
-      draw[params.project]();
+      setup[params.project](() => {
+        if (draw) draw[params.project]();
+      });
     });
   });
 });
@@ -205,5 +240,6 @@ updateMesh(params.mesh).then(() => {
 if (import.meta.hot) {
   import.meta.hot.accept("./shaders.js", (module) => {
     Object.assign(shaders, module.default);
+    draw = compileShaders();
   });
 }