Edd Biddulph

Twitter | CV

January 2012
Some Pixel Shaders
I'm a pretty big fan of the GLSL Sandbox which provides a textfield in which to write a fragment shader, and instant feedback from any changes made to that shader. It's nice because you can jump straight into writing shader code which is handy for experimentation and learning. It's also fun to see how much can be achieved with a per-pixel evaluation alone. Some of the things I have created with it are shown below, with links to the GLSL Sandbox Gallery. You will need WebGL support in your browser to see them in action, and to write your own.

I managed to implement a fully working game based on Columns inside of the GLSL Sandbox. It was written entirely in a single fragment shader, and uses the alpha channel of the framebuffer to store game state. This is actually my second posting on the sandbox of this game, which has a few bugfixes.

This is a simple simulation of light scattering. Rays are projected from a camera and intersected with a set of planes. Then the ray is stepped along, accumulating values from a projected texture. This texture can be any function with a 2D domain.

This is a raymarched scene with an attempt at depth-of-field. The defocus effect is not so good, as producing good jittering turns out to be difficult in a fragment shader. The view can be rotated by moving the mouse, and the camera moves continuously along one axis.

This scene is formed only of softened particles. They have a gaussian falloff which is extended or decreased with distance to create an effect similar in appearence to depth-of-field. The particles undulate and the camera swings across them.

This is a tribute to the early-90's videogame Another World. All of the graphics for that game were formed of polygons adjusted by hand and rendered with a custom engine. I wrote a program to generate a shader which intersects the current pixel with a large list of trapezoids derived from Another World's internal data. I could have used any frame from any of Another World's amazing animations, but I chose this one as it is one of the first and so is likely to be recognisable by most who have seen the game.

A reflective car travelling along a path composed of connected and distorted semi-circles, with stateless particles spewing from it. The camera follows a raymarched car and moves around it, keeping the car at the centre of view. Particles like this are difficult to simulate when there is no way to store their locations and velocities.

This is a recreation of the slime enemy from Dragon Quest. It is formed of a 2D profile rotated to create a 3D signed distance field, and a number of clipped and deformed spheres. Two surfaces are rendered, one for the front of the slime and one for the back. The distance between the two surfaces is used to modulate the colour of the slime. Both surfaces have specular highlights.