Writing these tutorials is all good fun, but I decided to take a short break from them today to show something a little more visually interesting that you can do now that WebGL gives web pages access to the graphics hardware: a page that zooms into the Mandelbrot set in realtime, with all of the calculations taking place in a fragment shader. Fragment shaders run on the graphics card itself, so we can get a pretty impressive frame rate even though we completely recalculate the set every time we draw it.
Here’s a video showing what it looks like when run on a browser that supports WebGL:
[UPDATE: looks like not all drivers will support the shader, which is interesting. It's worked on all the desktop machines I've tried it on but doesn't work on the laptop where I have software rendering. I'll be taking a look at that over the weekend.]
[FURTHER UPDATE: Interesting, I was using "%" for modulo, but that's not valid GLSL. The desktop machines' drivers accepted it anyway, but the MESA software renderer used on the laptop was stricter. I've fixed the bug, and it works now on the laptop. Very very slowly.]
The UI is pretty simple — you can enter a “zoom point” in the fields at the bottom, and click the “Reset Zoom” button to start zooming in again with the target you’ve specified.
I won’t explain the details of how the code works here, but if you have been following the tutorial so far then it should be pretty easy to work out from the source, perhaps with reference to the Wikipedia pages for the Mandelbrot set and Hue/Saturation/Value to RGB conversions. If you haven’t been following the tutorial, you might want to check out lesson 1 and lesson 2, or Benjamin DeLillo’s shorter WebGL intro.
Do let me know if you know of any neat tricks for fixing either of those…