Morten Nobel's Blog

I have created three very basic shaders to demonstrate GLSL ES shaders in WegbGL and the KickJS Shader Editor. The shaders are a Mandelbrot animation, a brick shader and a sliced geometry shader. Besides running in WebGL they will also run on any devices running OpenGL ES 2.0, OpenGL 2.1 (with very few modifications).

Mandelbrot shader

Mandelbrot

My mandelbrot shader is created in the fragement shader only (the vertex shader is only passing position and uv coordinates along).

For drawing the Mandelbrot you need two things:

• Number of iterations: Calculation the number of iterations for each point (calculateMandelbrotIterations(position))
• Color: Based on the number of iterations you need to find a color. I have implemented this by a lookup in a texture (simply looking up at the x coordinate equal to numberOfIterations / maxNumberOfIterations).

To animated the mandelbrot I do the following:

• Smoothstep (Easy in/out interpolation) between two views of the mandelbrot set based on time. I use a ping-pong function to go both ways.
• Interpolate between different sets of gradients. This changes the color theme of the mandelbrot over time. The texture I use for this contains 8 different color gradients:
  

A live demo and full source code can be seen here: http://goo.gl/EoxBh

The brick shader

Brick shader

Based on the brick shader example in “OpenGL Shading Language – Third edition” I have created this very simple brick shader. The shader demonstrate how to create procedural generated shaders based only on the local (or world) position.

The algorithm basically forms a brick pattern. To make the surface more brick-like every second brick layer in the xz plane are moved half a brick.

A live demo and full source code can be seen here: http://goo.gl/2JJe0

Sliced geometry

Sliced geometry

A shader effect can also be achieved by discarding the fragments in the fragment shader. In this example I transfer the world position from the vertex shader to the fragment shader. In the fragment shader I simply ‘slice’ geometry by discarding fragments based on its y-value of the world position.

A live demo and full source code can be seen here: http://goo.gl/2SwX1