'Chocolux' GPU raytracer in WebGL

What you're seeing is a WebGL port of Auld's amazing 1K demo, Chocolux from to WebGL. Chocolux is a real-time recursive GPU raytracer using four spheres. There are only 2 triangles on screen; all of the ray tracing happens in the fragment shader! I adapted Auld's code to run in the OpenGL ES 2.0 subset that WebGL supports. Some webby parts are also from Dag Ågren.

To see this demo, you'll need 1) a PS 3.0 video card and 2) the latest WebKit, Chromium or Firefox nightly with WebGL enabled. My MacBook can sustain about 60 fps in "Large" mode. Firefox nightlies seem to have a bug in resizing the canvas. If you don't have the right video hardware, here's Auld's video of Chocolux in action.

Chocolux's ray tracer does a few things for distortion (reuse of a loop variable in an inner loop) to achieve the stylized effect and the small footprint.

The implications of this are pretty mind blowing. WebGL now allows compiled code to run on the GPU. Imagine what games, image processing, and applications will be possible with compiled shaders and general GPU computing (OpenCL?) now in the browser. And with WebGL gaining widespread adoption, it's going to be here fairly soon.

For more information about fragment shader GPU raytracing and rendering, check out Rendering Worlds with Two Triangles.

If you enjoyed this, please check out my other web experiments and iPhone apps: EasyPlay, a new simple gesture music controller, and iRhyme, a natural language processed rhyming dictionary built from song lyrics.

Last updated: October 18, 2009.

« Back to satine.org