In this project, we implement a WebGL version path-tracer. Most of computation of path tracer are written in the shader and we also add UI on the webpage which enables users to make their own scene.
- Basic path tracer
- Diffuse surfaces
- Diffuse reflection
- Fresnel Based Reflection & Refraction
- Camera interactivity
- Subsurface scattering (Fake)
- Super-Sample Anti alias
- Realtime Add new primitives
Video: <br/ >
Final Result(5000 iterations):
- Initray Direction Test
- Intersection Normal Test
- Intersection Position Test
- Intersection Geometry Color Test
- Intersection Geometry Emittance Test
####1. WebGL framework
Ping-pong textures We use Ping-pong technique to mix each iteration's image with previous result. That we store the previous iteration's image in texture0 and after path tracer computation we mix texture0's color with the new computed result color and store this new iteration's image in texture1. Then we exchange texture0 and texture1 and run the next iteration, so on and so forth.
Texture parameters We store the objects' information in a texture and in the shader we read objects' parameters from this texture. More specifically, every 7 pixels of the texture image store one object's information. This enables us to pass only one uniform to pass all the objects' information, which enables users to add as many objects as they want in the scene. (We set the max number of objects as 30.)
###2. Path tracer
Fresnel Based Reflection & Refraction
We add fresnel reflection and refraction. And it enables us to add transparent objects in the scene. To do this, we just use the fresnel equations to compute the reflective and refractive coefficients whenever the ray hits a refractive object, and get the reflect ray and refract ray. Then we generate a random number to decide which ray to return, based on the reflective and refractive coefficients.
Super sample anti-alisasing
We add super sample anti-alisasing, which makes my render result smoother. To do this, just jitter the initial rays randomly in each iteration.
(Right image is with SSAA; 1500 iterations)
Subsurface scattering (Fake)
We use a fakery way to implement subsurface scattering.
We can see that light is scattered by interacting with the transparent sphere. But the result is still not very realistic.
(Right image is with subsurface scattering; 2500 iterations with SSAA)
We also write some mat4 utility functions in the shader, including mat translate,rotate,scale,inverse and transpose.
We use dat.gui.js to provide UI for the path tracer scene. Users can resize the size of rendered image, add new objects, currently including cube and sphere, to the current scene; and change the attribute of the objects. Once the configuration of the scene is changed, the image will be clear and rendered again.
We also provide mouse interaction to translate, rotate and zoom in/ out the scene. We use plane to represent the wall, so the wall will be cur off if not faced to camera.
###1. Cuda-Path tracer vs Webgl-Path tracer Both test on default scene(Same objects parameters and same trace depth) and run for 5000 iterations.
From the result we can see that the WebGl version has a better performace.
###2. Webgl (Timing of each Procedure)
|Procedure| Timing (ms)
|Initialize WebGL |
|Initialize Shader |
|Load Scene |
|Draw Scene (Avg.) |
###3. Number of objects
Scene size: 800 X 800
|Number of Objects||Average FPS|
Thrid Party Code
It's a library to visualize realize fps and timing.
Install and Build Instructions
Run well on Windows Chrome and Firefox browser.
- Phyisically based Subsurface Scattering
- Texturemap, bumpmap
- Make the project more robustic