WebGL fractal zoomer
- I'll wait. It works in most modern browsers except for Internet Explorer. To zoom in click on the location to zoom with the left-mouse button; too zoom out press the right-mouse button.
As I've noted previously I generally practise programming new platforms by developing fractal generators. WebGL, which can be thought of as OpenGL for the web, lowers the barriers to entry for writing 3D code. It has the potential to allow vastly improved web graphics, unleashing the hugely powerful 3D graphics hardware in many systems, and best of all, is now available in all the good web browsers, including Mozilla Firefox, Google Chrome, Opera and Safari. For all these reasons it was an obvious next choice for building a fractal generator.
WebGL combines Javascript and shader code on a web page to utilise the graphics card's hardware facilities to produce images. Prior to WebGL one common method to access the 3D hardware was through the XNA platform, which requires Visual Studio, the Microsoft .NET framework, and some other tools. I used the predecessor to XNA, Managed DirectX, in my previous 3D fractal work, and it was a lot of effort to get started. WebGL just needs a compatible browser, and then the coding can be done in any old text editor.
My immediate programming goal was to recreate the output of my existing browser-based fractal zoomer, which I built after the release of the Canvas feature in web browsers to test it out. I described it in a bit more detail in a previous post. In theory, using the graphics card hardware I should be able to achieve the exact same output but much faster, in more detail, and without taxing the CPU.
I started by learning WebGL at the lessons section of the appropriately-titled Learning WebGL site. Serendipitously, that site provided code that showed pretty much exactly what I wanted to do - Zooming into the Mandelbrot set in a WebGL fragment shader. That code made the usage of pixel (aka fragment) shaders very clear to me. In my previous DirectX work I diverted off into writing my own stuff before I fully understood pixel shaders, so I missed out of a very useful element for building fractals. Essentially, you provide instructions for how each given pixel should be coloured. This is a perfect match for the calculation of fractals, where each element of the fractal is determined solely by its coordinates. It was then straightforward to make the modifications to get the simplify the interface to match my old zoomer, and modify the colours to match too.
A great benefit of WebGL programming which should not be underestimated is the ability to see the code of any WebGL page. As with any HTML page, just view the source, and you can see how the magic is created, and learn from others. This was one of the critical elements in the fast adoption of HTML and Javascript.
Looking at my zoomer, you'll notice that if you zoom in for a while it gets blocky. This is where you are reaching the limits of medium precision floating point numbers. I made a small attempt at using high precision numbers with the highp command, but it didn't seem to have any effect. I guess it may be hardware dependent. It may also be, as noted in the WebGL Specification
OpenGL ES 2.0, and therefore WebGL, does not support double-precision floating-point data.The speed of the zoomer is highly influenced by the speed of your video card. Integrated cards, such as in laptops or business PCs, may be a trifle slow in 2012. Come back in a year or two when you've upgraded to be really impressed!
Note that I've used a little bit of JQuery in the code. Although this was an example of using WebGL, adding a minimal bit of JQuery to the mix allowed for easy capturing of user-input without cluttering the code.
I am very impressed with WebGL. It's an easy way to get access to 3D hardware, the code is easy to write, and the benefit of being able to look at other peoples' code is a great incentive. If I want to learn more 3D graphics programming in future I'll certainly look at WebGL first. Maybe by then Microsoft will have added WebGL to Internet Explorer.
P.S. I found the WebGL quick reference card (pdf) very useful in explaining the C-like elements of the language used in the shaders.