click here to hide content (F5) refresh to show again
Update: my current ray tracer, that generated this background image, has deviated from the quasi tutorial below.
GPU Ray Tracer (not supported in IE or Edge)
GPU Ray Tracer 2 (WebGL 2 - Chrome & Firefox only)
Supported features include: interactive adjustable camera with zoom, multiple objects, including polygon meshes, instances, transformations, bounding volume hierarchies and back-face culling, direct and indirect lighting effects: inter-object reflection, transmission, refraction, Schlick Fresnel approximation, shadows, transmissive light blocking, as well as texture support for: diffuse color, ambient occlusion, bump mapping using both normal and height maps, roughness and gloss textures. Custom JSON formatted scene files can be loaded. The ray tracer can be used interactively (real-time) at lower quality to position the view and then rendered at higher quality. Rendering is done using multiple processor cores on the CPU or the GPU and updates the on-screen image on the fly. The CPU ray tracer is much slower, but generates a slightly better image. The WebGL 2 version offers the best performance, but currently has limited browser support.
I then decided to write my own little tutorial series. The In One Weekend books focused on indirect lighting (global illumination) and I wanted to begin from the direct lighting approach that is more familiar from GPU rendering. So here is my quasi tutorial. The idea is to view the source code to read the comments and see what is being done. You can also use file compare operations in Visual Studio Community (free) or Visual Studio Code (free) to see what has changed from step to step. Compare instructions for VS and for Code.
0 - HTML page
6 - Simple camera
10 - Transmissive objects
real-time - Real-time workers per frame
With the last attempt at doing something in real-time, I became intrigued about trying to implement it on a GPU. So here is a similar series implementing the above concepts on the GPU using WebGL.
0 - WebGL canvas
interactive - Interactive left drag to trackball around the lookAt point, right drag to move lookAt point, mouse wheel to adjust view angle (zoom)
I have been able to achieve real-time interactive ray tracing on the GPU with refraction and it even handles being inside the objects, at least on my machine (Intel Core i7-4770K CPU @ 3.50GHz (8 cores) & NVIDIA GeForce GTX 770 GPU). There is still a lot more to come including a simple game concept that might lend itself well to the advantages of ray tracings handling of realistic reflectivity and transmissivity.