# WebGL - Scaling

#### Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)

10 Lectures 1 hours

#### WebGL 2D/3D Programming and Graphics Rendering For The Web

28 Lectures 4 hours

In this chapter, we will take an example to demonstrate how to modify the scale of a triangle using WebGL.

## 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 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 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);

//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

//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

//Create and use combiened shader program
var shaderProgram = gl.createProgram();

/*===================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);

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 −