Introduction

It is well known that pixel shaders are an important tool for controlling how 3D models appear when rendered, but it is less well known that they can also be used for 2D image processing. This article in a gentle introduction to pixel shaders (also known as fragment shaders) in GLSL.

What is a Shader?

A shader is a computer program that computes the appearance of pixels in a rendered image. Shaders usually consist of several sub-programs (stages) that compute detailed information about a 3D model before finally computing how the individual pixels will appear. 

The three most common programmable stages of a modern shader are:

1. Vertex shader - Computes a vertex's position in the 2D plane
2. Geometry shader - Computes new graphics primitives 
3. Pixel shader (Fragment shader) - Compute the color of individual pixels.

Shading Languages

Experimenting with GLSL Shaders Online

Probably the best way to understand shaders is to experiment by writing your own or modifying existing ones.

I've found two excellent online web-sites that allow you to experiment with shaders. The first site, which I've used for my example programs allows you to create basic pixel shaders using GLSL: http://glsl.heroku.com.

Another site that allows you to create complete graphics programs (including both pixel shaders and vertex shaders) using WebGL is http://www.webglplayground.net.

My First Pixel Shader: The Color Purple

First is a simple shader (http://glsl.heroku.com/e#2444.2) that outputs the same color (a shade of purple) consistently across a surface.

  void main(void) {
     gl_FragColor = vec4(0.5, 0.0, 0.2, 1.0); 
  }

The pixel shader is evaluated once for each pixel. Each time it is executed the pixel color is extracted from the predefined output variable gl_FragColor.

The gl_FragColor variable is a vector of four floating point values which correspond to the color’s red, green, blue, and alpha components. Each color component is clamped to the range of 0.0 to 1.0. Thus the value of vec4(0.5, 0.0, 0.2, 1.0) is a mixture of red and blue creating purple.

My Second Shader: Bands of Color

The next shader (http://glsl.heroku.com/e#2443.1) computes different colors for different pixels based on their location in the image. We use the  predefined input variable gl_FragCoord which contains X and Y coordinates of the pixel being colored.

#ifdef GL_ES
precision mediump float;
#endif
 
void main(void) {
    // Get a value between -1.0 and 1.0 based on X coordinate
    // Dividing by 50.0 increases the width of the stripes.
    // The gl_FragCoord predefined input variable contains the
    // coordinates of the current pixel whose color is being computed.
    float val = sin(gl_FragCoord.x / 50.0);

    // Adjust the value to the range of 0.0 to 1.0
    val = (val / 2.0) + 0.5;

    // Dim the intensity
    val *= 0.5;

    // Set the output color for the current pixel.    
    gl_FragColor = vec4(
           0.0,
           val,
           0.0,
           1.0);
}

In this example the color of the pixel is computed as a function of its x coordinate thus producing vertical stripes.

My Third Shader: Mouse Tracking

The third shader (http://glsl.heroku.com/e#2445.1) demonstrates the usage of global shader parameters called uniforms in GLSL. The uniform is an input variable that does not vary across pixels for each rendered frame. 

In this example the color is computed based on the pixel’s distance from the current mouse position. The effect is that an ellipse of color is drawn where the mouse pointer is with the center of the ellipse having the strongest intensity.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 mouse;
uniform vec2 resolution;

void main(void) {
    float dist = length(mouse - (gl_FragCoord.xy / resolution.xy));
    float intensity = 0.5 - (dist);
    // Set the output color for the current pixel. 	
    gl_FragColor = vec4(
	    0.0,
	    intensity, 
	    0.0, 
	    1.0); 
}

Using GLSL Pixel Shaders in Autodesk Smoke

An interesting use of pixel shaders is for image processing. Autodesk Smoke and Flame Premium comes with a tool called Matchbox which allows GLSL code to be used to define image filters. An excellent video posted on the Stoned & Wired blog demonstrates how to use the Matchbox node in Smoke with arbitrary GLSL pixel shader code.

For more information see the topics:

• Matchbox on the Autodesk Smoke and Flame Premium Wiki.

Using GLSL Shaders in Autodesk Softimage

Autodesk Softimage has built-in support for GLSL shaders as well as HLSL and CgFX. 

For more information see the topics:

• GLSL Shaders
• GLSL Shader Node Reference
• HLSL and CgFX Shaders

Using Custom Hardware Shaders in Autodesk 3ds Max

Autodesk 3ds Max provides native support for HLSL and CgFX shaders via the DirectX material. Shaders can also be written in the mental ray shader language (MetaSL). GLSL can’t be used in 3ds Max as-is, unless you have a special plug-in such as the VRay renderer from the Chaos Group.

3ds Max comes with a number of HLSL shaders (FX files) and a few CgFX shaders that you can experiment with in the mapsfx sub-folder of your 3ds Max installation (for example C:Program FilesAutodesk3ds Max 2012mapsfx).

For more information see:

• Autodesk Max help topic on the DirectX material
• Ben Cloward's tutorial on writing HLSL shaders for 3ds Max

Using Custom Hardware Shaders in Autodesk Maya

Like 3ds Max, Maya also provides support for displaying HLSL and CgFX shaders in the viewport. For more information see the following Maya help topics:

• Hardware Shaders
• Using Hardware Shaders

For More Information

The following sites are excellent resource for learning more about writing shaders:

• LightHouse3D GLSL Tutorial
• WebGL Tutorial - Lesson 2 
• WebGL Fundamentals
• HLSL Pixel Shader Effects Tutorial
• Neatware HLSL Tutorial
• Writing HLSL Shaders in DirectX 9
• Crash Course in HLSL
• Effects and HLSL Shaders
• About ActionScript Shaders