Posted by: Morten Nobel-Jørgensen | October 30, 2011

GLSL examples (using KickJS ShaderEditor)

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


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:

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:

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:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: