MENU
Positional Matrices
A transformation can be achieved by multiplying the positional vectors of the vertices with a 4*4 matrix in the vertex shader.
In this section, we will develop a JavaScript object called Matrix4 that contains many useful methods for transformations, viewing, and projection.
The matrix object defined is passed to the vertex shader as a uniform variable.
Here three functions are added to webgl-library.js, allowing the coder to construct a Matrix4, set it to I, and multiply a matrix to it. This example does not perform any transformation but it teaches how to use Matrix4 at the basic level. It will serve as a template for other examples in this section.
RESETRUNFULL
RESETRUNFULL
// /shared/webgl-library.js
function Matrix4(s){
var i;
this.entries = new Array();
if (s && (typeof s)==='object' && s.length &&
s.length==16){
for (i=0; i<16; i++) this.entries.push(s[i]);
} else {
this.entries=[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
}
}
Matrix4.prototype.setIdentity = function(){
var e = this.entries;
e[0] = 1; e[4] = 0; e[8] = 0; e[12] = 0;
e[1] = 0; e[5] = 1; e[9] = 0; e[13] = 0;
e[2] = 0; e[6] = 0; e[10] = 1; e[14] = 0;
e[3] = 0; e[7] = 0; e[11] = 0; e[15] = 1;
return this;
}
Matrix4.prototype.multiply_matrix = function(other){
var i, e, a, b, ai0, ai1, ai2, ai3;
e = this.entries;
a = this.entries;
b = other;
for (i = 0; i < 4; i++) {
ai0=a[i]; ai1=a[i+4]; ai2=a[i+8]; ai3=a[i+12];
e[i] = ai0*b[0] + ai1*b[1] + ai2*b[2] + ai3*b[3];
e[i+4] = ai0*b[4] + ai1*b[5] + ai2*b[6] + ai3*b[7];
e[i+8] = ai0*b[8] + ai1*b[9] + ai2*b[10] + ai3*b[11];
e[i+12] = ai0*b[12] + ai1*b[13] + ai2*b[14] + ai3*b[15];
}
return this;
}
<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
function draw_colored_triangle(){
var points=new Array();
var vc= new Float32Array([ 0.0,-0.5, 1.0, 0.0, 0.0,
-0.5, 0.5, 0.0, 1.0, 0.0,
0.5, 0.5, 0.0, 0.0, 1.0]);
var ESIZE=vc.BYTES_PER_ELEMENT;
var b=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,b);
gl.bufferData(gl.ARRAY_BUFFER,vc,gl.STATIC_DRAW);
pL=gl.getAttribLocation(gl.program,'p');
gl.vertexAttribPointer(pL,2,gl.FLOAT,false,ESIZE*5,0);
gl.enableVertexAttribArray(pL);
cL=gl.getAttribLocation(gl.program,'c');
gl.vertexAttribPointer(cL,3,gl.FLOAT,false,ESIZE*5,ESIZE*2);
gl.enableVertexAttribArray(cL);
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,3);
}
var VS_SOURCE=`
uniform mat4 I;
attribute vec4 p;
attribute vec4 c;
varying vec4 c2;
void main(){
c2=c;\
gl_Position = I*p;
}`;
var FS_SOURCE=`
precision mediump float;
varying vec4 c2;
void main(){
gl_FragColor=c2;
}`;
var gl,m,mL;
function start(){
var canvas = document.getElementById("myCanvas");
gl = canvas.getContext("webgl");
initShaders(gl,VS_SOURCE,FS_SOURCE);
m = new Matrix4();
mL = gl.getUniformLocation(gl.program, 'I');
gl.uniformMatrix4fv(mL,false,m.entries);
draw_colored_triangle();
}
</script>
</head>
<body onload="start()">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>