<pstyle="font-size:30px; ">In this homework, I implemented Global illumination w/
<pstyle="font-size:30px; ">In this homework, I implemented Global illumination w/
Realtime Recursive Ray Tracing!
Realtime Recursive Ray Tracing!
<p>
<p>
<istyle="font-size:25px;">Here is how it works:</i>
<istyle="font-size:25px;">Usage: </i>
<ul>
<ul>
<li>First, I added <ahref="http://planetpixelemporium.com/download/download.php?earthmap1k.jpg">texture</a> to the sphere. The code to load the texture is from
<li>Ctrl+Alt/Option+T: Toggle Texture.</li>
<ahref="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">here</a>. Please wait a sec for the texture to download.</li>
<li>Ctrl+S: Download fragment shader.</li>
<li>Then, I mapped the 3D sphere surface to the rectangular 2D texture picture. </li>
<li>Ctrl+Alt/Option+R: Toggle Recursive Ray Tracing.</li>
<li>I also make it look like it's rotating by adding uTime to the offset of the texture and reset the offset to 0 whenever it exceeds
<li>Ctrl+Alt/Option+N: Reset ViewPoint.</li>
the width of the texture.</li>
<li>Ctrl+Alt/Option+P: Toggle Pause/Resume.</li>
<li>I used Perlin Noise to generate fake clouds.</li>
<listyle="color:red;">Please unfocus the Editing area (click somewhere else on the page) to use hotkeys.</li>
<li> I modified the lighting so that the light source won't move with the sphere and
<li>Double Click on canvas (WITHOUT key modifiers): Toggle Pause/Resume.</li>
the lighting will change when the sphere moves. I also added specular lights to make it shinier.</li>
<li> I tried to add some 'soft shadow' to it. I used a mix of methods inspired by Ambient Occlusion and Ray Tracing.<br>
<li>Use Chromium based browser for better performance.</li>
</ul>
<istyle="font-size:25px;">How it works:</i>
<ul>
<li>First, I started with what I've already done in <ahref="https://billsun.dev/graphics/hw1">homework 1</a>. Which already included complete Phong shading with
Specular light and much more (spherical texture mapping, simple interactions, improved UI/shader editor).
</li>
<li> I then merged the code from hw2 and added texture to each sphere.</li>
<li> I modified the ray tracing algorithm so that when hitting an object, instead of just returning color calculated from
Phong model:<br>
<ul>
<ul>
<li>The Ambient lights and diffusion lights are reduced with respect to the distance between the background point and the sphere.</li>
uniformvec4rot;//ROTATION VALUES USED TO CALCULATE TRANSFORMATION MATRIX
//rot=[cosx, sinx, cosy, siny], x, y BING ROTATED ANGLE
uniformfloatdFL;//DELTA on FOCAL LENGTH
uniformvec3fDir;//Flash light direction
varyingvec3vPos;// -1 < vPos.x < +1
varyingvec3vPos;// -1 < vPos.x < +1
// -1 < vPos.y < +1
// -1 < vPos.y < +1
// vPos.z == 0
// vPos.z == 0
floatfl=3.;
floatfl=3.;//ORIGINAL FOCAL LENGTH
constfloatpi=3.14159265359;
constfloatpi=3.14159265359;
constintn_ref=2;
constfloat_2pi=2.*pi;
constintns=2;
constintn_ref=5;//<<=======***********************MAX NUMBER OF RAY TRACING RECURRSIONS. INCREASE IT IF YOUR GRAPHICS CARD CAN HANDLE.****************************
//const int ns=4; ns is added from .js
vec4Sph[ns];
vec4Sph[ns];
uniformsampler2DuSampler[ns];
uniformsampler2DuSampler[ns];
vec3Ambient[ns];
vec3Ambient[ns];
vec3Diffuse[ns];
vec3Diffuse[ns];
vec4Specular[ns];
vec4Specular[ns];
structRT{
floatks[ns];
structSphere{//UPDATED SPHERE STRUCTURE THAT SUPPORTS TRANSPARENCY.(UNUSED)
sunyinqi0508
4 years ago
committed by
GitHub
