1
$\begingroup$

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';
Improve this question
$\endgroup$
2
  • 1
    $\begingroup$ This question was effectively cross posted by you on stack overflow and has answer here $\endgroup$
    – gman
    Jul 10, 2019 at 14:54
  • $\begingroup$ I’m voting to close this question because it already has an answer on StackOverflow: stackoverflow.com/questions/56445837/… $\endgroup$
    – luser droog ♦
    Apr 9 at 16:06

1 Answer 1

Reset to default
0
$\begingroup$

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

Improve this answer
$\endgroup$

Not the answer you're looking for? Browse other questions tagged or ask your own question.