Scribd
Upload
2 views9 pages

Lab8,9

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views9 pages

Lab8,9

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Lab – 8,9: (Transformation)

Aim: To Perform 2D Transformations such as Translation, Rotation, and Scaling.

Translation

Moving an object from one position to another position on the screen is called Translation. In 2D
graphics, we can translate an object by adding translation coordinate (Tx,Ty) to each coordinate
in the original object.

Steps

 Define the Canvas


 Define the vertex shader and fragment shader
 Initialize the shaders
 Initialize the vertex buffers
 Retrieve the storage location and assign data from
 Draw the object.
Sample Program
Translation.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>2D Translation</title>
// Vertex Shader
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_Position;
attribute float a_PointSize;
uniform vec4 u_Translation;
void main() {
gl_Position = a_Position + u_Translation;
gl_PointSize = a_PointSize;
}
</script>

// Fragment Shader
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
</script>

</head>

<body onload="main()">
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<script type="text/javascript" src="Common/webgl-utils.js"></script>


<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MVnew.js"></script>
<script type="text/javascript" src="translation.js"></script>

</body>
</html>

In the vertex shader, the u_Translation is defined so that it can carry the translation
coordinates.
Hence, using the vertex shader the translation coordinates will be added to any point we draw
gl_Position = a_Position + u_Translation;
Translation.js

var Tx = 0.5, Ty = 0.5, Tz = 0.0;

function main() {

var canvas = document.getElementById('gl-canvas');


if (!canvas) {
console.log('Failed to retrieve the <canvas> element.');
return;
}

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) {
alert( "WebGL isn't available" );
}

var program = initShaders( gl, "vertex-shader", "fragment-shader" );


gl.useProgram( program );
gl.program=program;

var n = initVertexBuffers(gl);
if ( n < 0 ) {
console.log('/Failed to set the positions of the vertices');
return;
}

var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');


if (a_PointSize < 0) {
console.log('Failed to get the storage location of a_PointSize.');
return;
}

gl.vertexAttrib1f(a_PointSize, 10.0);

var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');


if (! u_Translation) {
console.log('Failed to get u_Translation variable');
return;
}

gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');


if (! u_FragColor) {
console.log('Failed to get u_FragColor variable');
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);


gl.clear(gl.COLOR_BUFFER_BIT);
//var mode = gl.POINTS;
//var mode = gl.LINES;
//var mode = gl.LINE_STRIP;
//var mode = gl.LINE_LOOP;
var mode = gl.TRIANGLES;
//var mode = gl.TRIANGLES_STRIP;
gl.drawArrays(mode, 0, n);

function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
var n = 3;

var vertexBuffer = gl.createBuffer();


if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position.');
return;
}

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);


gl.enableVertexAttribArray(a_Position);

return n;
}

Since the values of Tx , Ty , and Tz are fixed (uniform) all vertices, we use the uniform variable
for the u_Translation to pass them to the vertex shader.

This line of code is used for retrieving the storage location of the uniform variable
u_Translation
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');

This line of code is used to assign the translation values from JavaScript to the u_Transalation
variable in the vertex shader.
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

Exercise

Modify the sample program for object translation to use translation matrix instead of
mathematical expression.

Rotation

Any object can be rotated at a particular angle θ (theta) from its origin. As illustrated in the
figure below the triangle P is located at angle φ from the horizontal X coordinate with distance r
from the origin. Let us suppose you want to rotate it at the angle θ. After rotating it to a new
location, you will get a new triangle P’.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>2D Rotation</title>

<script id="vertex-shader" type="x-shader/x-vertex">


attribute vec4 a_Position;
attribute float a_PointSize;
uniform mat4 u_xformMatrix;
void main() {
gl_Position = u_xformMatrix * a_Position;
gl_PointSize = a_PointSize;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">


precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
</script>

</head>

<body onload="main()">
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<script type="text/javascript" src="Common/webgl-utils.js"></script>


<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MVnew.js"></script>
<script type="text/javascript" src="RotatedTriangle.js"></script>

</body>
</html>
var ANGLE = 90.0;

function main() {

var canvas = document.getElementById('gl-canvas');


if (!canvas) {
console.log('Failed to retrieve the <canvas> element.');
return;
}

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) {
alert( "WebGL isn't available" );
}

var program = initShaders( gl, "vertex-shader", "fragment-shader" );


gl.useProgram( program );
gl.program=program;

var n = initVertexBuffers(gl);
if ( n < 0 ) {
console.log('/Failed to set the positions of the vertices');
return;
}

var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');


if (a_PointSize < 0) {
console.log('Failed to get the storage location of a_PointSize.');
return;
}

gl.vertexAttrib1f(a_PointSize, 10.0);

// rotation
var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
if (! u_xformMatrix) {
console.log('Failed to get u_xformMatrix variable');
return;
}

var radian = Math.PI * ANGLE / 180.0;


var cosB = Math.cos(radian);
var sinB = Math.sin(radian);

// column major order


var xformMatrix = new Float32Array([
cosB, sinB, 0.0, 0.0,
-sinB, cosB, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
]);

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

//
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (! u_FragColor) {
console.log('Failed to get u_FragColor variable');
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);


gl.clear(gl.COLOR_BUFFER_BIT);

//var mode = gl.POINTS;


//var mode = gl.LINES;
//var mode = gl.LINE_STRIP;
//var mode = gl.LINE_LOOP;
var mode = gl.TRIANGLES;
//var mode = gl.TRIANGLES_STRIP;
gl.drawArrays(mode, 0, n);
}

function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
var n = 3;

var vertexBuffer = gl.createBuffer();


if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');


if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position.');
return;
}

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);


gl.enableVertexAttribArray(a_Position);

return n;
}
Scaling

Scaling means to change the size of an object. In the scaling process, we can either increase or
decrease the dimensions of the object. This process can be achieved by multiplying the original
coordinates of the object with the scaling factor to get the intended result.

Exercise:

Based on the sample codes provided for translation and rotation, write a program to perform the
scaling operation.

Reference

Interactive Computer Graphics: A Top Down Approach with WebGL

You might also like