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

### Like this:

Like Loading...

*Related*

Posted in GLSL, WebGL | Tags: KickJS

## Leave a Reply