English 中文(简体)
WebGL Tutorial

WebGL Application

WebGL Examples

WebGL Useful Resources

Selected Reading

WebGL - Translation
  • 时间：2024-12-22

WebGL - Translation

Previous Page Next Page  

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 apppcation 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 pnking 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;  +
    } ;

    Fragment Shader − In the fragment shader, we simply assign the fragment color to the variable gl_FragColor.

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.pnkProgram(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 −