WebGL Ray Marcher

The "canvas" element is not supported; an HTML 5 compliant browser is required.
FPS 00.00

Demo Usage Tutorial

This demo illustrates the rendering of 3D computer graphics using the "ray marching" technique. This demo uses the WebGL 2 API to leverage the compute capacity of dedicated graphics rendering hardware. Click on the viewport above to enable user interaction. Afterward, hold down any mouse button then move the cursor to swivel the camera in the scene. The tilt of the camera can be controlled with the "Q" and "E" keys where "Q" rotates counter-clockwise and "E" rotates clockwise. The position of the camera can be adjusted with the "W", "A", "S", and "D" keys where "W" moves forward (i.e. the direction of the camera), "A" moves to screen left, "S" moves backwards, and "D" moves to screen right.