<p>Try This... I guess you got the matrix wrong.</p>

<pre><code>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;
</code></pre>

<p>I referred the following site after I googled =><a href="http://learnwebgl.brown37.net/08_projections/projections_perspective.html" rel="nofollow noreferrer">Link</a></p>

CC BY-SA 4.0
2019-06-11T12:27:49.050Z
2019-06-11T12:27:49.050Z
Som Pra
<p>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.</p>

<p>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.</p>

<p>My perspective matrix calculation : </p>

<pre><code>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;
}
</code></pre>

<p>My vertex shader:</p>

<pre><code> 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';
</code></pre>

CC BY-SA 4.0
2019-07-10T14:54:16.410Z
This question was effectively cross posted by you on stack overflow and has answer [here](https://stackoverflow.com/a/56457127/128511)
gman
CC BY-SA 4.0
2023-04-09T16:06:54.603Z
I’m voting to close this question because it already has an answer on StackOverflow: https://stackoverflow.com/questions/56445837/webgl-wont-render-anything-what-are-the-proper-matrices/
luser droog
<webgl><projections><perspective>
WebGL Can't render anything, wrong projection?
Dreik
# WebGL Can't render anything, wrong projection?

(Asked by: username_0 on 2019-06-04)

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;
}

```

My vertex shader:

```
 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';

```

**Tags:** webgl, projections, perspective

> **Comments:**
> **username_1**: This question was effectively cross posted by you on stack overflow and has answer [here](https://stackoverflow.com/a/56457127/128511)  
> **username_2**: I’m voting to close this question because it already has an answer on StackOverflow: https://stackoverflow.com/questions/56445837/webgl-wont-render-anything-what-are-the-proper-matrices/  

---

## 1 answers

### Answer by username_3 on 2019-06-11. Score: 0

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](http://learnwebgl.brown37.net/08_projections/projections_perspective.html)


---

