Ray Tracing
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.
This page started as a JavaScript implementation of the code from the In One Weekend series of books by Peter Shirley. I found these compact books with real code examples to be an amazing way to learn to start ray tracing! Here are my JavaScript implementations of the book code. Beware, some of the pages will be slow to load while the tracing is occurring.
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
1 - Create and manipulate an image
2 - Ray generation for parallel projection
3 - Ray generation for perspective projection
4 - Intersection with a sphere
5 - Simple lighting and shading
6 - Simple camera
7 - Adjustable camera orientation
8 - Multiple objects and lights
10 - Transmissive objects
11 - Refraction and Fresnel effects
12 - Shadows and blocking attenuation
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
1 - Create and manipulate image pixels
2 - Intersection with a sphere
3 - Simple lighting and shading
5 - Multiple objects and lights
7 - Transmission, refraction and Fresnel effects
8 - Shadows and blocking attenuation
9 - Re-factor to improve recursion logic
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.