Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
163 lines (137 sloc) 7.08 KB

WebGL PathTracer


Bo Zhang , Ying Li


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.

####Features implemented:

  • Basic path tracer
  • Diffuse surfaces
  • Diffuse reflection
  • Fresnel Based Reflection & Refraction
  • Camera interactivity
  • Subsurface scattering (Fake)
  • Super-Sample Anti alias
  • Realtime Add new primitives


Website: WebGL PathTracer
Video: <br/ > Alt text<br/ > Slide: Screenshots

Final Result(5000 iterations):

Alt text

Debug views:

  • Initray Direction Test
    Alt text

  • Intersection Normal Test
    Alt text

  • Intersection Position Test
    Alt text

  • Intersection Geometry Color Test
    Alt text

  • Intersection Geometry Emittance Test
    Alt text

Implementation Details:

####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.)

    Store Pattern:

Pixel Object's Parameter
0 Color
1 Objtype,Texturetype
2 Refelective,Refractive
3 IOR,Subsurface Scattering,Emittance
4 Translation
5 Rotation
6 Scale

###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)
    Alt text

  • 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)
    Alt text

  • Utility functions
    We also write some mat4 utility functions in the shader, including mat translate,rotate,scale,inverse and transpose.

###3. UI

  • 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.

Performance Evaluation

###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.

  • Final result on cuda (800X800):
    Alt text
  • Final result on WebGL (800X800):
    Alt text

    FPS Comparison:
Version Average FPS
CUDA 6.47
WebGL 12

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 | 7 |Initialize Shader | 45 |Load Scene | 42 |Draw Scene (Avg.) | 42
###3. Number of objects
Scene size: 800 X 800

Number of Objects Average FPS
Default(14) 12
20 9
Max(30) 6

Thrid Party Code

Install and Build Instructions

Run well on Windows Chrome and Firefox browser.

Future Work

  • Phyisically based Subsurface Scattering
  • Texturemap, bumpmap
  • Make the project more robustic