Spell: Let’s color the world with shaders!

After many Russian adventures, I am finally back home ready to discuss another cool technology and get the CodeBrave spirit running. Have you ever wondered how your 3D character is colored? How do the newest video games and animation studios achieve the perfect-looking shiny armor and soft leather? How does Cassandra from the Dragon Age Inquisition game screenshot below look so realistic?


Shaders. What kind of shady beasts are those?

A shader is a program that runs on your computer’s Graphics Processing Unit (GPU) as opposed to a Central Processing Unit (CPU) where most of your programs run.

Shader program has a very simple input-output structure. It takes an x,y,z coordinate in the scene that you are applying a shader to (trying to color) as an input parameter and outputs a color. In the example of Cassandra’s armor, the shader will receive a (1035, 4000, 768) coordinate for the pixel on Cassandra’s left shoulder pad, and the shader will promptly return appropriate shade of grey. So far we have done calculation for one pixel only. What about the rest of thousands – no! – millions of pixels we have to shade in the scene?


This is where the power of GPU comes in. GPU can process many pixels at the same time, in parallel. This means that a shader processing pixel A = (1035, 4000, 768) has to be completely independent from the shader processing pixel B = (0, 4000, 768). Thus shaders have no state and cannot communicate with each other. This is pretty awesome, but does make code a little bit tricky. You have to start thinking differently when writing shader code. How does one program that takes in a coordinate and returns a color handle all the possible inputs in your scene?


Hello Word program for a shader looks pretty simple (though it does not print ‘Hello World’ phrase to your console, sorry to disappoint you). The program below is written in the standard GLSL shader language understood by GPUs. It looks like C programming language, and has a main() function that is called by the GPU for each pixel. Inside the main() function, gl_FragColor is set. This is the color that the pixel passed into the function will be colored by. vec4() function is used to create a 4-dimensional vector representing red, blue, green (RGB) components of the color as well as the color opacity.


#ifdef GL_ES
precision mediump float;

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


How do you run this code? One way is to install glslViewer on your machine. Or, if you want to take a simpler route and play with shaders online, you can use GLSL Sandbox online tool, create a new effect and just paste the code above into it.

Try playing with different values of the color and opacity and see what you can come up with. Also, if you would like to be super CodeBrave, think of how you would write a shader that assigns a different color to a pixel depending on the pixel coordinate (gl_FragCoord) and resolution of the screen (u_resolution).

If I have piqued your interest and you would like to find out more about how shader magic truly works, check out the Book of Shaders. It has marvelous explanations about shaders and goes deep explaining the shader magic. Start shading and be CodeBrave!


Spell: Let’s color the world with shaders!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s