JavaScript – the glMatrix. – free-tutorials.org with free tutorials and source code

The glMatrix javascript is designed to perform vector and matrix operations very fast.
The official website can be found here.
What’s new in 2.0?
The glMatrix 2.0 is the result of a lot of excellent feedback from the community, and features:

Revamped and consistent API (not backward compatible with 1.x)
New functions for each type, based on request.
New array operations: vec(2/3/4).forEach
Even more optimizations!
A cleaner code base, broken up by type.
A more complete unit testing suite.

Let’s test one example with gl matrix and shaders:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://glmatrix.net/dist/gl-matrix-min.js"></script>
<title>Test gl matrix </title>
<script type='text/javascript'>
window.onload=function(){
var gl = document.querySelector("canvas").getContext("experimental-webgl");

var str = document.querySelector("#vs").textContent;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, str);
gl.compileShader(vs);
        
var str = document.querySelector("#fs").textContent;
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, str);
gl.compileShader(fs);

var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

var colorLoc = gl.getAttribLocation(program, "color");
gl.enableVertexAttribArray(colorLoc);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
var colors = [
         1.0, 0.0, 0.0,
         0.0, 1.0, 0.0,
         0.0, 0.0, 1.0,
         1.0, 0.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0);

var posLoc = gl.getAttribLocation(program, "pos");
gl.enableVertexAttribArray(posLoc);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var vertices = [
         1.0, 0.0, 0.0,
         0.0, 1.0, 0.0,
         0.0, 0.0, 1.0,
         1.0, 0.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
var indices = [0, 1, 2, 0, 1, 3, 1, 2, 3, 0, 2, 3];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

var mmatrix = mat4.create();
mat4.scale(mmatrix, mmatrix, vec3.fromValues(0.4, 0.8, 0.7));
var mmLoc = gl.getUniformLocation(program, "MMatrix");

var vmatrix = mat4.create();
mat4.translate(vmatrix, vmatrix, vec3.fromValues(0, 0, -2));
var vmLoc = gl.getUniformLocation(program, "VMatrix");
gl.uniformMatrix4fv(vmLoc, false, vmatrix);

var pmatrix = mat4.create();
mat4.perspective(pmatrix, Math.PI/3, 2, 0.1, 100);
var pmLoc = gl.getUniformLocation(program, "GLMatrix");
gl.uniformMatrix4fv(pmLoc, false, pmatrix);

gl.enable(gl.DEPTH_TEST);
var render = function() {
    mat4.rotateX(mmatrix, mmatrix, 0.01);
    mat4.rotateY(mmatrix, mmatrix, 0.01);
    gl.uniformMatrix4fv(mmLoc, false, mmatrix);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
    requestAnimationFrame(render);
}
window.requestAnimationFrame = window.requestAnimationFrame
        || window.mozRequestAnimationFrame
        || window.webkitRequestAnimationFrame
        || function(cb) { setTimeout(cb, 1000/60); };

render();
}</script>
</head>
<body>
<canvas></canvas>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 pos;
attribute vec3 color;
varying vec3 varyingColor;
uniform mat4 MMatrix;
uniform mat4 VMatrix;
uniform mat4 GLMatrix;
void main(void) {
        gl_Position = GLMatrix * VMatrix * MMatrix * vec4(pos, 1.0);
        varyingColor = color;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 varyingColor;
void main(void) {
        gl_FragColor = vec4(varyingColor, 1.0);
}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

<!DOCTYPE html>

<html>

<head>

<title>Test gl matrix </title>

window.onload=function(){

var gl = document.querySelector("canvas").getContext("experimental-webgl");

var str = document.querySelector("#vs").textContent;

var vs = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vs, str);

gl.compileShader(vs);

var str = document.querySelector("#fs").textContent;

var fs = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fs, str);

gl.compileShader(fs);

var program = gl.createProgram();

gl.attachShader(program, vs);

gl.attachShader(program, fs);

gl.linkProgram(program);

gl.useProgram(program);

var colorLoc = gl.getAttribLocation(program, "color");

gl.enableVertexAttribArray(colorLoc);

var colorBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

var colors = [

1.0, 0.0, 0.0,

0.0, 1.0, 0.0,

0.0, 0.0, 1.0,

1.0, 0.0, 1.0

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0);

var posLoc = gl.getAttribLocation(program, "pos");

gl.enableVertexAttribArray(posLoc);

var vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

var vertices = [

1.0, 0.0, 0.0,

0.0, 1.0, 0.0,

0.0, 0.0, 1.0,

1.0, 0.0, 1.0

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

var indexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

var indices = [0, 1, 2, 0, 1, 3, 1, 2, 3, 0, 2, 3];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

var mmatrix = mat4.create();

mat4.scale(mmatrix, mmatrix, vec3.fromValues(0.4, 0.8, 0.7));

var mmLoc = gl.getUniformLocation(program, "MMatrix");

var vmatrix = mat4.create();

mat4.translate(vmatrix, vmatrix, vec3.fromValues(0, 0, -2));

var vmLoc = gl.getUniformLocation(program, "VMatrix");

gl.uniformMatrix4fv(vmLoc, false, vmatrix);

var pmatrix = mat4.create();

mat4.perspective(pmatrix, Math.PI/3, 2, 0.1, 100);

var pmLoc = gl.getUniformLocation(program, "GLMatrix");

gl.uniformMatrix4fv(pmLoc, false, pmatrix);

gl.enable(gl.DEPTH_TEST);

var render = function() {

mat4.rotateX(mmatrix, mmatrix, 0.01);

mat4.rotateY(mmatrix, mmatrix, 0.01);

gl.uniformMatrix4fv(mmLoc, false, mmatrix);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);

requestAnimationFrame(render);

}

window.requestAnimationFrame = window.requestAnimationFrame

|| window.mozRequestAnimationFrame

|| window.webkitRequestAnimationFrame

|| function(cb) { setTimeout(cb, 1000/60); };

render();

}</script>

</head>

<body>

attribute vec3 pos;

attribute vec3 color;

varying vec3 varyingColor;

uniform mat4 MMatrix;

uniform mat4 VMatrix;

uniform mat4 GLMatrix;

void main(void) {

gl_Position = GLMatrix * VMatrix * MMatrix * vec4(pos, 1.0);

varyingColor = color;

}

</script>

precision mediump float;

varying vec3 varyingColor;

void main(void) {

gl_FragColor = vec4(varyingColor, 1.0);

}

</script>

</body>

</html>

Leave a Reply Cancel reply