0
$\begingroup$

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

I have column major matrices and I'm just trying to render basic rectangle but for some reason no matter what I do after multiplification by perspective matrix my Z of vertex 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 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.