Implementing perspective matrix in webgl

Question

I have this little code which spins a triangle at the world origin (0,0,0) along the y axis.

<!DOCTYPE HTML>
<html>

<canvas id = "can" width="400" height="400">

</canvas>


<script>
var webgl_canvas = document.getElementById('can');
var gl = webgl_canvas.getContext('experimental-webgl');
var width = gl.width;
var vertices = [-1,-1,0,1,-1,0,0,1,0];
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW); 

vertexBuffer.itemSize = 3;
vertexBuffer.numItems = parseInt(vertices.length/vertexBuffer.itemSize);

var tx = 0, ty = 0, tz = 0;

var degrees = 0.1;

function rotY (degrees) {
    m = identityMatrix;
    var c = Math.cos(degrees);
    var s = Math.sin(degrees);
    var mv0=m[0], mv4=m[4], mv8=m[8];
    m[0]=c*m[0]+s*m[2];
    m[4]=c*m[4]+s*m[6];
    m[8]=c*m[8]+s*m[10];

    m[2]=c*m[2]-s*mv0;
    m[6]=c*m[6]-s*mv4;
    m[10]=c*m[10]-s*mv8;
}

var identityMatrix = [1,0,0,0,
                      0,1,0,0,
                      0,0,1,0,
                      0,0,0,1];

var translationMatrix = [1,0,0,tx,
                         0,1,0,ty,
                         0,0,1,tz,
                         0,0,0,1];



function degToRadians(deg){
    return (deg*MATH.PI/180);
}

function translation(x) {
    m = identityMatrix;
    return m[12] += x;
}

var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 u_move;' + 'void main() { gl_Position = u_move * vec4 (a_position,1); }';
var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';



//Compile shaders
var buildShader = function (shaderSource, typeOfShader) {
var shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert (gl.getShaderInfoLog(shader));
}
return shader;
}

var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);

//setup GLSL program
program = gl.createProgram();
gl.attachShader(program,compiledVertexShader);
gl.attachShader(program,compiledFragmentShader);
gl.linkProgram(program);



var positionLocation = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLocation);
gl.useProgram(program);




var translate = gl.getUniformLocation (program, "u_move");



//Draw
var start_time =0;
var animate=function(time) {
var dt= time-start_time;
var matrix = rotY(degrees);
gl.uniformMatrix4fv(translate,false,new Float32Array(identityMatrix));
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);


//console.log(dt);

start_time=time;
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
window.requestAnimationFrame(animate);
}
animate(0);
</script>

</html>

Now, I've added the rotation function

function rotY (degrees) {
    m = identityMatrix;
    console.log(identityMatrix);
    var c = Math.cos(degrees);
    var s = Math.sin(degrees);
    var mv0=m[0], mv4=m[4], mv8=m[8];
    m[0]=c*m[0]+s*m[2];
    m[4]=c*m[4]+s*m[6];
    m[8]=c*m[8]+s*m[10];

    m[2]=c*m[2]-s*mv0;
    m[6]=c*m[6]-s*mv4;
    m[10]=c*m[10]-s*mv8;
}

linked it to the uniform

var perspective_matrix = gl.getUniformLocation (program, "u_perspective");

and enabled it

gl.uniformMatrix4fv(perspective_matrix,false, PERSPMATRIX);

The triangle has now disappeared. Checking the console my matrix value returns undefined so I suspect I've something wrong there, though I'm not seeing exactly where. The full code follows

<!DOCTYPE HTML>
<html>

<canvas id = "can" width="400" height="400">

</canvas>


<script>
var webgl_canvas = document.getElementById('can');
var gl = webgl_canvas.getContext('experimental-webgl');
webgl_canvas.width=window.innerWidth;
webgl_canvas.height=window.innerHeight;
var width = gl.width;
var vertices = [-1,-1,0,1,-1,0,0,1,0];
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW); 

vertexBuffer.itemSize = 3;
vertexBuffer.numItems = parseInt(vertices.length/vertexBuffer.itemSize);

var tx = 0, ty = 0, tz = 0;

var degrees = 0.1;

var identityMatrix = [1,0,0,0,
                      0,1,0,0,
                      0,0,1,0,
                      0,0,0,1];

function perspective(angle,aspect,zMin,zMax){
    var tan = Math.tan(degToRadians(0.5*angle)),
    A =-(zMax+zMin)/(zMax-zMin),
    B = (-2*zMax*zMin)/(zMax-zMin);

    return [ .5/tan,0,0,0,
             0, .5*aspect/tan, 0, 0,
             0,0,A,-1,
             0,0,B,0
           ];    
}

function rotX (degrees) {
    m = identityMatrix;
    var c = Math.cos(degrees);
    var s = Math.sin(degrees);
    var mv1=m[1], mv5=m[5], mv9=m[9];
    m[1]=m[1]*c-m[2]*s;
    m[5]=m[5]*c-m[6]*s;
    m[9]=m[9]*c-m[10]*s;

    m[2]=m[2]*c+mv1*s;
    m[6]=m[6]*c+mv5*s;
    m[10]=m[10]*c+mv9*s;
}

function rotY (degrees) {
    m = identityMatrix;
    console.log(identityMatrix);
    var c = Math.cos(degrees);
    var s = Math.sin(degrees);
    var mv0=m[0], mv4=m[4], mv8=m[8];
    m[0]=c*m[0]+s*m[2];
    m[4]=c*m[4]+s*m[6];
    m[8]=c*m[8]+s*m[10];

    m[2]=c*m[2]-s*mv0;
    m[6]=c*m[6]-s*mv4;
    m[10]=c*m[10]-s*mv8;
}


var translationMatrix = [1,0,0,tx,
                         0,1,0,ty,
                         0,0,1,tz,
                         0,0,0,1];



function degToRadians(deg){
    return (deg*Math.PI/180);
}

function translation(x) {
    m = identityMatrix;
    return m[12] += x;
}

var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 u_move;' + 'uniform mat4 u_perspective;' + 'void main() { gl_Position = u_perspective * u_move * vec4 (a_position,1); }';
var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';



//Compile shaders
var buildShader = function (shaderSource, typeOfShader) {
var shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert (gl.getShaderInfoLog(shader));
}
return shader;
}

var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);

//setup GLSL program
program = gl.createProgram();
gl.attachShader(program,compiledVertexShader);
gl.attachShader(program,compiledFragmentShader);
gl.linkProgram(program);

//link javascript variables with shaders uniforms
var perspective_matrix = gl.getUniformLocation (program, "u_perspective");
var translate = gl.getUniformLocation (program, "u_move");

var positionLocation = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLocation);
gl.useProgram(program);


var PERSPMATRIX = perspective(40,webgl_canvas.width/webgl_canvas.height,1,100);



//Draw
var start_time =0;
var animate=function(time) {



var dt= time-start_time;
var matrix = rotX(degrees);
console.log(matrix);
gl.uniformMatrix4fv(perspective_matrix,false, PERSPMATRIX);
gl.uniformMatrix4fv(translate,false,identityMatrix);
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
start_time=time;
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
window.requestAnimationFrame(animate);
}
animate(0);
</script>

</html>

Did you just post your entire code three times? ಠ_ಠ

Winchestro
– Winchestro

2014-11-02 19:07:53 +00:00
Commented Nov 2, 2014 at 19:07 — Winchestro
– Winchestro, Commented Nov 2, 2014 at 19:07
No, it has changed everytime.

Muteking
– Muteking

2014-11-02 19:21:38 +00:00
Commented Nov 2, 2014 at 19:21 — Muteking
– Muteking, Commented Nov 2, 2014 at 19:21
Oh ok it's three different versions of your entire code

Winchestro
– Winchestro

2014-11-02 19:30:19 +00:00
Commented Nov 2, 2014 at 19:30 — Winchestro
– Winchestro, Commented Nov 2, 2014 at 19:30

Martin Ernst · Accepted Answer · 2014-11-02 20:19:58Z

This will point out only particular issues.

1) With var identityMatrix = [ ... ] you create an array. Each time you reference it with var m = identityMatrix; you does not create a new array but always only points to the original. Now when you change an item in var m you change the same item in the original identityMatrix, and the changes appear at all places whereever you point to it in the whole code.

Make identityMatrix a function returning an array:

var identityMatrix = function() {return [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];}

and each time you want to start with a new identityMatrix do:

var m = identityMatrix(); // now you get new matrices not affecting each other

The same may happen with var vertices or var translationMatrix, I leave check to you.

2) Your function translation() does not return a matrix but only a number (the 13th item of the matrix). It must be:

function translation(x) {
    var m = identityMatrix; // don't miss the var keyword
    m[12] += x; // change value at index 12
    return m; // return the whole matrix
}

3) Both rotate-functions doesn't return anything. There should be return m; inside.

Collectives™ on Stack Overflow

Implementing perspective matrix in webgl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related