CODEWITHSUNDEEP
matrixwebgl
user1157885
user1157885

Reputation: 2069

OpenGL, Projection Matrix - Front of box is smaller...?

I'm in the process of learning WebGL and I'm trying to understand how to build a perspective matrix. I think I almost have it... I'm just stuck on 1 small problem which is that when I multiply my verts by the projection matrix I expect the front of the box that is being looked at to get bigger, but instead it gets smaller and the back gets bigger. I've attached a screen shot: (the green side is the front) enter image description here

My perspective matrix looks like this..

    var aspectRatio = 600 / 600;
    var fieldOfView = 30;
    var near = 1;
    var far = 2;

    myPerspectiveMatrix = [
        1 / Math.tan(fieldOfView / 2), 0, 0, 0,
        0, 1 / Math.tan(fieldOfView / 2), 0, 0,
        0, 0, (near + far) / (near - far), (2 * (near * far)) / (near - far),
        0, 0, -1, 0
    ];

    app.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(myPerspectiveMatrix));

And my vertex shader is..

attribute vec3 aPosition;
attribute vec4 aColor;

uniform mat4 uModelMatrix;
uniform mat4 uPerspectiveMatrix;

varying lowp vec4 vColor;

void main()
{
    gl_Position = uPerspectiveMatrix * vec4(aPosition, 5.0);
    //gl_Position = uPerspectiveMatrix * uModelMatrix * vec4(aPosition, 2.0);
    vColor = aColor;
}

Upvotes: 0

Views: 88

Answers (1)

user2209008
user2209008

Reputation:

What's likely happening here is that your triangles are being drawing in the wrong clockwise order (clockwise as opposed to counter-clockwise, or vice versa), so you are seeing the "inside" of the box.

There are myriad ways of fixing this. My recommendation would be to fix the clockwise order of the indices you are using to draw the box.

Alternatively, the quick fix would be to perhaps change the "front face" using glFrontFace.

Upvotes: 1

Related Questions