Main image of article How Shaders Can Render Awesome 3-D Graphics

Creating 3-D graphics involves more than just creating objects -- you also have to tell the GPU how to best render them. To do that, you use shaders. Shaders are computer programs that are run on graphics processor units (GPUs) when 3-D images are rendered, that rapidly calculate colors, lighting and special effects. Here's how it works:

The Graphics Pipeline

Graphics processing units run a pipeline of processing stages with instructions — compiled shader software — and geometry data. The shader software is usually written in High Level Shading Language (HLSL) for Direct3D, OpenGL Shading Language (GLSL) for OpenGL or Cg, which is API independent and so works with both DirectX and OpenGL. These high level instructions are turned into low level code — much like with a CPU — that runs on shader hardware; only unlike a CPU there are hundreds of GPU shader hardware cores that each runs one set of shader code instructions. For example, the GTX 480 card in my three-year-old PC has 480 cores. The graphics pipeline consists of multiple stages, but basically the vertex shader program is called for each of the vertexes it needs to process, transforming them into triangles. Later, they are colored and shaded by pixel shaders. That's the very simple explanation — I've skipped a bit about splitting fragments into quads, which are modified by the pixel shader. Nowadays there are more types of shader to give greater flexibility. For example, in DirectX11, three new shaders were added for tessellation. Its pipeline process shaders in the following order: vertex, hull, tessellation, domain, geometry, and finally pixel.

Experiment with Shaders

The biggest thing to keep in mind with shaders is efficiency, as they're called for each vertex. I could go on quite a bit more, but a better way to learn is to experiment with them yourself. Here are some great resources for doing just that: First, the GLSL website on Heroku.com. Take a look at the gallery and select one of the examples. You'll see the source code over the rendered image. You can make a change and it will compile and run in a second or less. It's a great way to experiment with creating or editing OpenGL shaders in your browser. Below is example number 13995.  This is just a small part of the shader source code, to give you a flavor. If you’re comfortable with C type languages, such as JavaScript, this should present few problems. GLSL Sample Another resource to check out is Shadertoy. Developed by Inigo Quilez and Pol Jeremias, Shadertoy, like GLSL, is a place to showcase shader code and experiment with it. But here the emphasis is on WebGL and the site is built for WebGL browsers, including most of the recent versions of Chrome, Firefox, IE and Safari. ZEditing with Shadertoy I could spend hours just admiring the work of some contributors. For instance, the water in the buoy shader looks totally realistic and the shader is just over 400 lines long. Likewise, the Dalek is superb. Some of the demos can have inputs selected from textures, Web cams and some other sources to show real-time changes.

Both GLSL and Shadertoy had my GTX 480 fans running at full speed with some of the demos. If 3-D programming is of interest to you, start with some tutorials — Rastertek is particularly good for that. Then visit Shadertoy and/or GLSL to see how the experts do it.