GPU Path Tracer (2021-2023) FITS Visualizer (2023) 3D Library (2019-2020) Conjumate (2018)
GPU Path Tracer for the Web

What?
A path tracer renders 3D models such that the global illumination is faithful to reality—that is, it produces physically-accurate renderings of them. This project is a path tracer written entirely from scratch in JavaScript and WebGL, so it can run in a browser (check it out!)

The path tracing algorithm leverages Monte Carlo integration techniques to probalistically evaluate the "light transport integral," which describes the interaction of light rays with surfaces in accordance with material properties. Because it is highly-parallelizable by nature, millions of rays are traced concurrently in a series of GLSL shaders.

In addition to the GPU-accelerated renderer, the application also features an editor for loading and exporting asset files and output images, as well as modifying pose and camera attributes before rendering.

How?
The application implements several rendering techniques & technologies:
  • Implemenation of DICE's "Frame Graph" rendering abstraction to manage GPU resources
  • glTF & GLB, HDRi loaders (models & environment maps)
  • 2-Level Bounding Volume Hierarchy (BVH), Bottom Level Acceleration Structures (BLAS), Top Level Acceleration Structue (TLAS)
  • Full glTF scene-graph, pose manipulation in editor & TLAS rebuild
  • Physically-Based BRDF (PBR), Next Event Estimation (NEE), Multiple Importance Sampling (MIS)

WebGL/OpenGL ES
GLSL
JavaScript
Path/Ray Tracing
Monte Carlo Method
HTML/CSS
High Performance Computing (HPC)
Physically-Based Rendering (PBR)
FITS Visualizer

What?
FITS is a data format used for storing atronomical data, and measurements from satellites are typically stored in this format for archival and analysis purposes.

Sometimes, these FITS archives contain "narrow-band filters", or photos taken of the same target, but isolating for different wavelengths of light. However, the raw images are typically entirely dark save a few bright spots.

Curious how those dazzlingly colorful images of nebulae are created, I wrote a "plug-in" for my path tracer (to leverage existing shader/pipeline utilties) that could composite several narrow-band filters into a single color image.

How?
Because the bright spots in the image (stars, gases, etc.) only take up a narrow range of intensity values, the plug-in performs a series of filters on the GPU to "equalize the histogram" of pixel values in each input narrow-band image, such that intensities on the histogram are better distributed.

This is achieved by adjusting the black point, white point, and gamma of each image such that the contrast is improved. A median filter helps remove noise and finally each narrow-band image is assigned to an RGB channel to produce the final color image.

WebGL
GLSL
Graphics
Image Processing
Web-based 3D Graphics Library

What?
As my first foray into 3D graphics, I implemented a small rendering library modeled off of THREE.js in JavaScript and WebGL. Some basic techniques I implemented include:
  • Forward & Deferred Rendering
  • Directional Lights, Point Lights, Spot Lights
  • glTF & OBJ loader
  • Anti-Aliasing (MSAA), Basic Shadow Mapping

WebGL
GLSL
Graphics
Real Time Rendering
Conjumate

What?
Conjumate was an app I wrote for ChromeOS in JavaScript as a way to help Spanish-learners practice their verb conjugations (I was taking Spanish at the time). At its peak it had around 60 weekly users at my high school, and in retrospect it was a good exercise in using CS to address a need my classmates and I had.

JavaScript
HTML/CSS