WebGL Mandelbox Explorer

Note: This demo requires a WebGL capable browser. Installation instructions can be found at Learning WebGL or the WebGL Wiki.

This weekend I put the finishing touches on a WebGL Mandelbox explorer I’ve been tinkering with for the past week or so. If you’re interested in the mathematics, Tom Lowes who wrote the Mandelbox formula does a good job explaining it in detail on his site. I’ve been captivated with the pattern ever since watching Krzysztof Marczak’s amazing Mandelbox trip on YouTube (a must-see).

Traversing a 3D Mandelbox in real-time is intensive on any platform, but WebGL does a fairly good job thanks to the GPU. I still need to lower the fractal iterations upon interaction, but that was expected. Rrrola was nice enough to post some source for his real-time explorer, which I ported to this version. I’ll add my own refinements over time as I get more comfortable with the formula.

There is plenty of room for refinement, but basic mouse and keyboard movement controls make exploration fairly simple. Things like camera viewing angles will be patched in over time.

This will be an evolving project. If you stumble upon any bugs or have suggestions, I’d love to hear them.

Check it out!

NOTE: You’ll need to use a Mozilla trunk nightly build (switch webgl.enabled_for_all_sites to true in about:config) or Chrome developer preview version (use “–enable-webgl” and “–no-sandbox” command-line switches). A video is included in this post if you’re having trouble installing.

After learning the basics of fragment and vertex shaders in my last example and using the Spore creature viewer as reference, it was fairly straightforward to implement texturing and lighting. Take a look at the source to see how it was done, and how the positioning matrix has evolved.

Having limited OpenGL knowledge, the learning experience with WebGL has been very good since it requires JavaScript to supply all the shader parameters. I have some concern with JS being able to handle a more intensive implementation, but further experimentation will expose that. Regardless, I’m loving the current performance results, especially when compared to Flash alternatives.

 

View on Vimeo.

UPDATE: Perspective added to the example. Thank you, Giles.

Check it out!

NOTE: To view WebGL, you’ll need to use a Mozilla trunk nightly build (starting September 18th). Once installed, switch webgl.enabled_for_all_sites to true in about:config. Your OpenGL drivers will also need to be up-to-date. A video of the experiment is included in this post if you’re having trouble installing.

A couple weeks ago, Vladimir Vukicevic posted the first working sample of WebGL, which gives us a glimpse of how JavaScript will access OpenGL ES 2.0. Since then, we’ve seen a number of impressive demos, and it seems GPU accelerated 3D in the browser is finally becoming a reality. This technology deserves attention.

Of course with WebGL in its infancy (even though they’ve been working on it for years), and the spec still in flux, no documentation exists. Learning the API involves scouring sample source and the nsICanvasRenderingContextWebGL interface reference. My OpenGL programming knowledge being limited, I had to use iPhone OpenGL ES 2.0 guides to get me up to speed with the spec. Jeff LaMarche has a fantastic series on the subject, and I decided to use his icosahedron example as a starting point.

It’s a simple low poly test, but I’m rather impressed with the result. And really, who can complain about finally having access to the GPU? Hopefully there aren’t too many roadblocks (ahem, Microsoft/DirectX) in the way before this spec becomes official. Next step for me will be texturing.