• 1/1

A Gentle Introduction to Pixel Shaders using GLSL

Posted by Christopher Diggins, 19 May 2012 2:38 pm

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.
The relation of the different shader sub-programs is called the graphics pipeline.

Shading Languages

Shaders are written in a specialized programming language called a shading language. The shader program file is sometimes called an effect file. Here is a list of some the more common shading languages: 
  • GLSL - Used by OpenGL graphics drivers
  • HLSL – Used by DirectX graphics drivers
  • CgFX – Used by NVIDIA graphics cards
  • MetaSL – Used by mental ray
  • AGAL – Used by the Stage3D API in Flash 11
  • RSL - RenderMan shading language

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:

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:

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:

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:

For More Information

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

 

3 Comments

Christopher Diggins

Posted 22 May 2012 8:38 pm

I updated the post to include information about GLSL in Softimage.

kingmax.res

Posted 21 June 2012 6:34 am

Maybe this is a good learning path

DileepS_pbr

Posted 26 July 2012 8:28 am

I am in search of learning GPGPU . I am not having an idea that

How matrix multiplication implemented on pixel shader work?


I only know it work each pixel but not getting how it work.

Let me know about a link from which I can learn such basics

Add Your Comment

You must be logged in to post a comment.

Please only report comments that are spam or abusive.