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
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.