webgl rotating quads looks incorrect

Question

I am writing some webgl code in dart and I am rendering some sprites on screen.

I have a single quad that I reuse to render all of the sprites. I have a projection, view and model matrix. I use the view matrix for the camera which I assume is correct, though rotation had to be done on the projection matrix because rotating the view matrix produced incorrect results.

I wish to rotate the quad individually. All of my attempts have resulted in incorrect results.

This is the scene without any rotation being applied

This is a gif of the scene with a rotation being applied over time from the code below.

The rotation looks fine, but if we move to the sides,

we can quite clearly see that the z axis seems to be ignored or something of that sort.

This is my object matrix in my quad class's render method

objectMatrix.setIdentity();
objectMatrix.translate(pos.x - w / 2.0, pos.y - h * 1.0, pos.z * 1.0);
objectMatrix.scale(w * 1.0, h * 1.0, 0.0);
objectMatrix.rotateY(tick * PI/180); // rotate over time
gl.uniformMatrix4fv(objectMatrixLocation, false, objectMatrix.storage);

The tick variable increments everytime we render the scene

The vertex shader

precision highp float;

attribute vec3 a_pos;

uniform mat4 u_projectMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_objectMatrix;
uniform mat4 u_textureMatrix;

varying vec2 v_texcoord;
varying float v_dist;
varying vec4 v_pos;

void main() {
    v_texcoord = (u_textureMatrix * vec4(a_pos, 1.0)).xy;
    v_pos = vec4(u_projectMatrix * u_viewMatrix * vec4(a_pos, 1.0));
    vec4 pos = u_projectMatrix * u_viewMatrix * u_objectMatrix * vec4(a_pos, 1.0);
    v_dist = 1.0 - pos.z / 2.75; //for fragment shader's fade in the back stuff
    gl_Position = pos;
}

Looks like you have a shearing operation rather that rotation. What Matrix class library are you using? McCutchan's Vector Math ? — Argenti Apparatus
Yeah, I don't think it's a problem with his framework's code though — Nicolas Martel

Nicolas Martel Nicolas Martel · Accepted Answer · 2014-10-04T17:41:34

The problem seems to have been that I scale the Z component of my model matrix by 0

objectMatrix.scale(w * 1.0, h * 1.0, 0.0);

webgl rotating quads looks incorrect

1 Answers