Leaflet MandelbrotGL demo


This Leaflet plugin uses WebGL and <canvas> to render the Mandelbrot set insanely fast.

Each tile is 256 pixels wide and high, and 256 pixels map to one unit in the complex plane. There is a very simple coordinate system to account for this and display coordinates when hovering the mouse over the map.

The plugin works only with Leaflet 1.0 (master branch as of 2015-05-22) due to the naming of the L.GridLayer class.

The Mandelbrot set is calculated using floating point arithmetic in the GPU, and unfortunately artifacts start showing up at zoom level 20, even though the mandelbrot set can be infinitely zoomed in.

To do the rendering, the layer creates an invisible canvas with a WebGL context, renders one tile there, then copies the image to the tiled canvases. This way, the shader code has to be uploaded just once to the GPU.

Switching the colour pallette is done by detaching the GLSL program and attaching a new one, with a different fragment shader. The shaders are stored internally as several constant strings which, in turn, are stored in split files for development and replaced into the main JS file during the Gobble build phase (yes, you will need to use Gobble in order to get proper executable javascript files.