I have a rotating matrix with a texture on it. When the orthographic scene's aspect ratio is 1:1, like 600px and 600px, it rotates perfectly. But if I increase for example the height to 1200 I get a few problems. It looks as if the matrix's horixontal axis is scaled as if it wasn't rotated.
Lets say I have a sscene of 600x1200, and my matrix is suposed to be 30x30. If the matrix is not rotated, it's x scale should be 0.05*600 which is 30px. If I rotate the matrix 90 degrees it's x scale should be 0.025*1200 which is 30px. However I have nothing that compensates this and the matrix scale is the same always, as if it isn't being rotated.
How do I compensate for this?
Here is my vertex shader code:
void main()
{
fragColor = vertColor;
vTextureCoord = (vec4(aTextureCoord.x, aTextureCoord.y, 0.0, 1.0)).xy * uvScale + uvOffset;
vTextureCoordBg = (vec4(aTextureCoord, 0.0, 1.0)).xy * uvScaleBg + uvOffsetBg;
mat4 worldPosTrans = mat4(
vec4(scale.x*cos(rotateZ), scale.x*-sin(rotateZ), 0.0, 0.0),
vec4(scale.y*sin(rotateZ), scale.y*cos(rotateZ), 0.0, 0.0),
vec4(0.0, 0.0, scale.z, 0.0),
vec4(translation.x, translation.y, translation.z, 1.0));
gl_Position = (uPMatrix * worldPosTrans) * vec4(vertPosition.x + vertPosFixAfterRotate.x, vertPosition.y + vertPosFixAfterRotate.y, vertPosition.z, 1.0);
}
I tried to decrease the x scale as the angle approached 90 and 270 degrees with Math.sin but it didn't work as expected.