GLSL Shaders

Shaders use GLSL, a special OpenGL shading language with syntax similar to C, which is executed directly by the graphics pipeline. There are two types — Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates while the latter computes rendering colors and other attributes.

GLSL is different from JavaScript — it's strongly typed, and there's a lot of maths involved to calculate vectors and matrices. Writing shaders can get complex very quickly, but creating a simple one is not too difficult. In this article we'll take you through the basics of using shaders, and build up an example that uses Three.js to speed up the background code somewhat.

As you may remember from the basic theory article, a vertex is a point in space having its own 3D position in the coordinate system and usually some additional information that defines it. The space itself is defined by that coordinate system, and everything is about representations of shapes in that 3D space.

Shader types

A shader is essentially a function required to draw something on the screen. Shaders run on your GPU, which is optimized for such operations, so that you can offload some of the number crunching from the CPU and focus its processing power on executing your own code.

Vertex Shader

Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the gl_Position variable — this is a special, global and built-in GLSL variable that is used to store the position of the current vertex:

void main() {
	gl_Position = makeCalculationsToHaveCoordinates;
}

The void main() function is a standard way of defining the gl_Position variable. Everything inside that function will be executed by the shader. The calculations result in a variable containing information on how the position in the 3D space is projected onto a 2D screen.

Fragment Shader

Frament (or texture) shaders define RGBA colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the shader is to set up the gl_FragColor variable, which is also a built-in GLSL variable:

void main() {
	gl_FragColor = makeCalculationsToHaveColor;
}

The calculations result in a variable containing the information about the RGBA color.

Demo

Let's build a simple demo to explain those shaders in action. Be sure to read Three.js tutorial first to grasp the concept of the scene, its objects and materials.

Note: Remember that you don't have to use Three.js or any other library to write your shaders — pure WebGL is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.

Environment setup

To start with the WebGL shaders you don't need much. You should:

Make sure you are using a modern browser with good WebGL support, such as the latest Firefox or Chrome.
Create a directory to store your experiments in.
Save a copy of the latest minimized Three.js library inside your directory.

HTML structure

Here's the HTML structure we will use.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>MDN Games: Shaders demo</title>
	<style>
		body { margin: 0; padding: 0; font-size: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
	<script src="three.min.js"></script>
</head>
<body>
  <script id="vertexShader" type="x-shader/x-vertex">
	// vertex shader's code goes here
  </script>
  <script id="fragmentShader" type="x-shader/x-fragment">
	// fragment shader's code goes here
  </script>
  <script>
	// scene setup goes here
  </script>
</body>
</html>

It contains some basic information like the document <title>, and some CSS to set the width and height of the <canvas> element that Three.js will insert on the page to be the full size of the videwport. The <script> element in the <head> includes the Three.js library in the page; we will write our code into three script tags in the <body> tag:

The first one will contain the vertex shader.
The second one will contain the fragment shader.
The third one will contain the actual JavaScript code generating the scene.

Before reading on, copy this code to a new text file and save it in your working directory as index.html. We'll create a scene featuring a simple cube in this file, to explain how the shaders work.

The cube's source code

Instead of creating everything from scratch we can reuse the Building up a basic demo with Three.js source code of the cube. Most of the components like the renderer, camera and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.

Go to the cube.html file on GitHub, copy all the JavaScript code from inside the second <script> element, and paste it into the third <script> element of the current example. Save and load index.html in your browser — you should see a blue cube.

The vertex shader code

Let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag:

void main() {
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
}

The resulting gl_Position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.

Note: You can learn more about model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it.

Both projectionMatrix and modelViewMatrix are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the x axis and 5 units along the z axis, translated via a shader. We can ignore the fourth parameter and leave it with the default 1.0 value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.

The texture shader code

Now we'll add the texture shader to the code — add the code below to the body's second <script> tag:

void main() {
	gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
}

This will set an RGBA color to recreate the current light blue one — the first three float values (ranging from 0.0 to 1.0) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from 0.0 — fully transparent — to 1.0 — fully opaque).

Applying the shaders

To actually apply the newly created shaders to the cube, comment out the basicMaterial definition first:

// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});

Then, create the shaderMaterial:

var shaderMaterial = new THREE.ShaderMaterial( {
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

This shader material takes the code from the scripts and applies it to the object the material is assigned to.

Then, in the line that defines the cube we need to replace the basicMaterial:

var cube = new THREE.Mesh(boxGeometry, basicMaterial);

...with the newly created shaderMaterial:

var cube = new THREE.Mesh(boxGeometry, shaderMaterial);

Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:

Three.js blue cube demo

It looks exactly the same as the Three.js cube demo but the slightly different position and the same blue color are both achieved using the shader. You can see this in action — here's the final code:

You can also see it on GitHub.

Conclusion

This article has taught the very basics of shaders. Our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on ShaderToy for inspiration and to learn from their sources.