A simple raytracer using WebGL and Three.js to render static scenes and raytrace them as well. Additionally, you can view the 🌟 demo. 🌟
- Phong illumination model
- Reflections
- Shadows
- Supersampling
- Controllable camera with orbit controls
- Adjustable size of the rendered image
- Download rendered images as PNG
- Flexible rendering settings through dat.GUI
- Set up your scene using helpers in the
helper.ts
file or create your own components. - Adjust rendering settings using the dat.GUI controls as desired.
- Press the "Render" button to start rendering the scene.
- To download a high-quality render of the scene, press the "Save" button.
The raytracer functionality can be found in the rayCasting
function in the main.ts
file.
Raytracing breaks down the scene into pixels and shoots rays from the camera, calculating the color for each ray based on the intersections with the objects in the scene. The process involves calculating reflections, shadows, and diffuse/specular lighting components using the Phong illumination model.
The project uses the following libraries and helper functions:
- Three.js for WebGL rendering. Also used to draw our geometry
- dat.GUI for controlling settings and adjustments.
- Utility functions for canvas drawing and color manipulation in
./lib/utils.ts
helper.ts
: Set up geometry, lights, camera, controls, etc.