0
$\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';
$\endgroup$
  • $\begingroup$ This question was effectively cross posted by you on stack overflow and has answer here $\endgroup$ – gman Jul 10 '19 at 14:54
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

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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