<pstyle="font-size:30px; ">In this homework, I implemented Global illumination w/
Realtime Recursive Ray Tracing!
<p>
<istyle="font-size:25px;">Here is how it works:</i>
<istyle="font-size:25px;">Usage: </i>
<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
<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>Then, I mapped the 3D sphere surface to the rectangular 2D texture picture. </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
the width of the texture.</li>
<li>I used Perlin Noise to generate fake clouds.</li>
<li> I modified the lighting so that the light source won't move with the sphere and
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>Ctrl+Alt/Option+T: Toggle Texture.</li>
<li>Ctrl+S: Download fragment shader.</li>
<li>Ctrl+Alt/Option+R: Toggle Recursive Ray Tracing.</li>
<li>Ctrl+Alt/Option+N: Reset ViewPoint.</li>
<li>Ctrl+Alt/Option+P: Toggle Pause/Resume.</li>
<listyle="color:red;">Please unfocus the Editing area (click somewhere else on the page) to use hotkeys.</li>
<li>Double Click on canvas (WITHOUT key modifiers): Toggle Pause/Resume.</li>
<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>
<li>The Ambient lights and diffusion lights are reduced with respect to the distance between the background point and the sphere.</li>
<li>The specular light of the background wall is eliminated and the diffusion factor is reduced when the ray shooting from the background point
towards the light source or from the background point towards the camera position intersect with 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
// -1 < vPos.y < +1
// vPos.z == 0
floatfl=3.;
floatfl=3.;//ORIGINAL FOCAL LENGTH
constfloatpi=3.14159265359;
constintn_ref=2;
constintns=2;
constfloat_2pi=2.*pi;
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];
uniformsampler2DuSampler[ns];
vec3Ambient[ns];
vec3Diffuse[ns];
vec4Specular[ns];
structRT{
floatks[ns];
structSphere{//UPDATED SPHERE STRUCTURE THAT SUPPORTS TRANSPARENCY.(UNUSED)
sunyinqi0508
4 years ago
committed by
GitHub
