Shaders – Resources and Examples

Shaders are probably the best tool for start-of-art visualizations. Having shaders in our dipy would be a cool addition.  Apart from the implementation, I also spend time getting to know the shaders better. Fragment shaders and Vertex Shaders are not very trivial and it takes a bit of time to understand and digest completely. Below are some points about Shaders and some easy examples of how they work.

Vertex Shaders

As the name suggests, Vertex Shaders contains attributes about a particular vertex in a shape. All the information about a vertex is contained in it including the color and texture. As mentioned here, there is always a 1:1 correspondence between the input vertex and the output vertex. Just the shader does a particular transform on the attributes.

Fragment Shaders

Fragment Shaders gives the color and the depth value of an input pixel. The fragment shader is something which is independent of the movement of the object. It is very important to note that each Fragment Shader has its own “window space” which acts as the output of the stream.

It requires examples to properly understand the difference between the two and how both of them when combined, can render interesting shapes.

Now, look at the sample code given below:

#ifdef GL_ES

precision medium float;


void main() {

fl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);


Clearly, this deals with the fragment shader. Why so? It is because of the fact that we just want to see the color of the output and no vertex is involved here. Hence, Fragment Shaders makes sense here. The color of the screen is set to Red and Blue, which yields Pink.

There are a lot of interesting examples which uses the combination of two to get eye-catching examples and visualizations.

Inbuilt Variables in Shaders

It is very very important to know what all predefined variables comes along with shader so that you don’t have to keep looking for where it was first used. So, here is a resource which gives major focus on the predefined variables and what it does. It also has important data types required for visualization tasks.

*NOTE* This blog will be updated regularly as I read more about Shaders and try them out.

Leave a Reply

Your email address will not be published. Required fields are marked *