# WebGL Can't render anything, wrong projection? [closed]

I'm trying to understand and learn WebGL and computer graphics from the bottom up, that is why I started to work on my own little library for that. I've spent a couple of days looking for a right answer but I can't make it work.

I have column major matrices and I'm just trying to render a basic rectangle but for some reason no matter what I do after multiplication by a perspective matrix the vertex's Z is always out of bounds.

My perspective matrix calculation :

static perspective(fov, aspect, near, far) {
const r = fov * aspect;
const l = -4;
const t = r;
const b = l;
const matrix = new Matrix4();
matrix.n11 = (2 * near) / (r - l);
matrix.n12 = 0;
matrix.n13 = (r+l)/(r-l);
matrix.n14 = 0;
matrix.n21 = 0;
matrix.n22 = (2 * near) / (t - b);
matrix.n23 = (t+b)/(t-b);
matrix.n24 = 0;
matrix.n31 = 0;
matrix.n32 = 0;
matrix.n33 = (near + far) / (near - far);
matrix.n34 = (2 * near * far) / (near - far);
matrix.n41 = 0;
matrix.n42 = 0;
matrix.n43 = -1;
matrix.n44 = 0;
return matrix;
}


 this.vertexShaderScript =
'\r\n' +
'precision highp float;\r\n' +
'uniform mat4 u_model;\r\n' +
'uniform mat4 u_view;\r\n' +
'uniform mat4 u_projection;\r\n' +
'attribute vec3 a_position;\r\n' +
'attribute vec4 a_color;\r\n' +
'varying vec4 v_color;\r\n' +
'void main(void) {\r\n' +
'    v_color = a_color;\r\n' +
'    gl_Position = u_projection * u_view *  u_model * vec4(a_position, 1.0);\r\n' +
'}\r\n';

• This question was effectively cross posted by you on stack overflow and has answer here
– gman
Commented Jul 10, 2019 at 14:54
• I’m voting to close this question because it already has an answer on StackOverflow: stackoverflow.com/questions/56445837/… Commented Apr 9, 2023 at 16:06

Try This... I guess you got the matrix wrong.

matrix.n11 = -(2 * near) / (r - l);
matrix.n12 = 0;
matrix.n13 = 0;
matrix.n14 = -near*(r+l)/(r-l);
matrix.n21 = 0;
matrix.n22 = (2 * near) / (t - b);
matrix.n23 = 0;
matrix.n24 = -near*(t+b)/(t-b);
matrix.n31 = 0;
matrix.n32 = 0;
matrix.n33 = (near + far) / (near - far);
matrix.n34 = (2 * near * far) / (near - far);
matrix.n41 = 0;
matrix.n42 = 0;
matrix.n43 = -1;
matrix.n44 = 0;


I referred the following site after I googled =>Link