WebGL PathTracer

Members

Bo Zhang , Ying Li

Introduction

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

Demo

Website: WebGL PathTracer
Video:

Slide: https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Final%20Presentation.pdf

Screenshots

Final Result(5000 iterations):

Debug views:

• Initray Direction Test
  
  
  
• Intersection Normal Test
  
  
  
• Intersection Position Test
  
  
  
• Intersection Geometry Color Test
  
  
  
• Intersection Geometry Emittance Test
  
  
  

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
  Reference: http://en.wikipedia.org/wiki/Fresnel_equations
  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
  Reference: http://en.wikipedia.org/wiki/Supersampling
  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)
  Reference: https://machinesdontcare.wordpress.com/tag/subsurface/
  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)
  
  
  

• Utility functions
  Reference: https://github.com/toji/gl-matrix
  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):
  
• Final result on WebGL (800X800):
  
  
  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

• stas.js:
  It's a library to visualize realize fps and timing.
  https://github.com/mrdoob/stats.js/
• dat.gui.js:
  A lightweight graphical user interface for changing variables in JavaScript.
  https://code.google.com/p/dat-gui/
• gl-matrix.js:
  Javascript Matrix and Vector library for High Performance WebGL apps.
  https://github.com/toji/gl-matrix
  
  

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