In this chapter, we will take an example to demonstrate how to modify the scale of a triangle using WebGL.
You can also scale a particular vertex.
To scale a triangle, in the vertex shader of the program, we create a uniform matrix and multiply the coordinate values with this matrix. Later, we pass a 4×4 diagonal matrix having the scaling factors of x,y,z coordinates in the diagonal positions (last diagonal position 1).
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.
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.
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 use the drawArrays() method. 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.
Scaling
Scaling is nothing but increasing or decreasing the size of an object. For example, if a triangle has vertices of the size [a,b,c], then the triangle with the vertices [2a, 2b, 2c] will be double its size. Therefore, to scale a triangle, you have to multiply each vertices with the scaling factor.You can also scale a particular vertex.
To scale a triangle, in the vertex shader of the program, we create a uniform matrix and multiply the coordinate values with this matrix. Later, we pass a 4×4 diagonal matrix having the scaling factors of x,y,z coordinates in the diagonal positions (last diagonal position 1).
Required Steps
The following steps are required to create a WebGL application to scale a triangle.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 matrix to store the scaling factors, and finally, we multiply these two values and assign it to gl_position which holds the final position of the vertices.
var vertCode =
'attribute vec4 coordinates;' +
'uniform mat4 u_xformMatrix;' +
'void main(void) {' +
' gl_Position = u_xformMatrix * coordinates;' +
'}';
- Fragment Shader − In the fragment shader, we simply assign the fragment color to the gl_FragColor variable.
var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';
Step 4 − Associate the Shader Programs with the Buffer ObjectsIn 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 use the drawArrays() method. 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 – Scale a Triangle
The following example shows how to scale a triangle −<!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(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); /*========================Shaders============================*/ //Vertex shader source code var vertCode = 'attribute vec4 coordinates;' + 'uniform mat4 u_xformMatrix;' + 'void main(void) {' + ' gl_Position = u_xformMatrix * coordinates;' + '}'; //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); /*===================scaling==========================*/ var Sx = 1.0, Sy = 1.5, Sz = 1.0; var xformMatrix = new Float32Array([ Sx, 0.0, 0.0, 0.0, 0.0, Sy, 0.0, 0.0, 0.0, 0.0, Sz, 0.0, 0.0, 0.0, 0.0, 1.0 ]); var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix'); gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); /* ===========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); /*=================Drawing the Quad========================*/ 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>It will produce the following result −
No comments:
Post a Comment