WebGL_PathTracer

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #go #rust #linux #docker #macos #java #nodejs #windows #awesome

WebGL_PathTracer

(★ 36)

No description available.

WebGL_PathTracer Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

WebGL PathTracer
================

Members
-------------------
[Bo Zhang](https://www.linkedin.com/pub/bo-zhang/7b/767/815) , [Ying Li](https://www.linkedin.com/in/liying3)

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](http://wulinjiansheng.github.io/WebGL_PathTracer/) 
Video: \
[![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/cover.jpg)](http://youtu.be/Hm6VyPIbKP0)
\
Slide: https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Final%20Presentation.pdf

Screenshots
-------------------
#### Final Result(5000 iterations):
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/FinalResultFromWebGL.bmp)
 
#### Debug views:
- Initray Direction Test 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/DebugRayDir.bmp)
 
- Intersection Normal Test 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/DebugIntersectNormal.bmp)
 
- Intersection Position Test 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/DebugIntersectPos.bmp)
 
- Intersection Geometry Color Test 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/DebugIntersectMatColor.bmp)
 
- Intersection Geometry Emittance Test 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/DebugIntersectMatEmit.bmp)

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) 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/SSAA%20comparison.bmp)

- 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) 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/subsurface%2Bssaa.bmp)

- 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): 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/CUDA%20PathTracer%205000%20iterations.bmp)
- Final result on WebGL (800X800): 
![Alt text](https://github.com/wulinjiansheng/WebGL_PathTracer/blob/master/Pics/FinalResultFromWebGL.bmp)
 
**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

WebGL_PathTracer

WebGL_PathTracer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

WebGL_PathTracer

WebGL_PathTracer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README