WebGL - Translation
So far, we discussed how to draw various shapes and apply colors in them using WebGL. Here, in this chapter, we will take an example to show how to translate a triangle.
Translation
Translation is one of the affine transformations provided by WebGL. Using translation, we can move a triangle (any object) on the xyz plane. Suppose we have a triangle [a, b, c] and we want to move the triangle to a position which is 5 units towards the positive X-axis and 3 units towards the positive Y-axis. Then the new vertices would be [a+5, b+3, c+0]. That means, to translate the triangle, we need to add the translation distances, say, tx, ty, tz to each vertex.
Since it is a per-vertex operation, we can carry it in the vertex shader program.
In the vertex shader, along with the attribute, coordinates (that hold the vertex positions), we define a uniform variable that holds the translation distances (x,y,z). Later, we add this uniform variable to the coordinates variable and assign the result to the gl_Position variable.
Note − Since vertex shader will be run on each vertex, all the vertices of the triangle will be translated.
Steps to Translate a Triangle
The following steps are required to create a WebGL application to draw a triangle and then translate it to a new position.
Step 1 − Prepare the Canvas and Get the WebGL Rendering Context
In this step, we obtain the WebGL Rendering context object using getContext().
Step 2 − Define the Geometry and Store it in the Buffer Objects
Since we are drawing a triangle, we have to pass three vertices of the triangle, and store them in buffers.
var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];
Step 3 − Create and Compile the Shader Programs
In this step, you need to write the vertex shader and fragment shader programs, compile them, and create a combined program by linking these two programs.
Vertex Shader − In the vertex shader of the program, we define a vector attribute to store 3D coordinates. Along with it, we define a uniform variable to store the translation distances, and finally, we add these two values and assign it to gl_position which holds the final position of the vertices.
var vertCode =
'attribute vec4 coordinates;' +
'uniform vec4 translation;'+
'void main(void) {' +
' gl_Position = coordinates + translation;' +
'}';
var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';
Step 4 − Associate the Shader Programs to the Buffer Objects
In this step, we associate the buffer objects with the shader program.
Step 5 − Drawing the Required Object
Since we are drawing the triangle using indices, we will use the method drawArrays(). To this method, we have to pass the number of vertices /elements to be considered. Since we are drawing a triangle, we will pass 3 as a parameter.
gl.drawArrays(gl.TRIANGLES, 0, 3);
Example – Translate a Triangle
The following example show how to translate a triangle on xyz plane.
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/*=================Creating a canvas=========================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*===========Defining and storing the geometry==============*/
var vertices = [
-0.5,0.5,0.0,
-0.5,-0.5,0.0,
0.5,-0.5,0.0,
];
//Create an empty buffer object and store vertex data
var vertex_buffer = gl.createBuffer();
//Create a new buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//bind it to the current buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Pass the buffer data
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/*========================Shaders============================*/
//vertex shader source code
var vertCode =
'attribute vec4 coordinates;' +
'uniform vec4 translation;'+
'void main(void) {' +
' gl_Position = coordinates + translation;' +
'}';
//Create a vertex shader program object and compile it
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
//fragment shader source code
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
'}';
//Create a fragment shader program object and compile it
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
//Create and use combiened shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
/* ===========Associating shaders to buffer objects============*/
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coordinatesVar);
/* ==========translation======================================*/
var Tx = 0.5, Ty = 0.5, Tz = 0.0;
var translation = gl.getUniformLocation(shaderProgram, 'translation');
gl.uniform4f(translation, Tx, Ty, Tz, 0.0);
/*=================Drawing the riangle and transforming it========================*/
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
If you run this example, it will produce the following output −
