4

I'm trying to rotate a 2d image's matrix inside the vertex shader.

enter image description here

I want the 2d image to rotate around what I think would be the z axis.

However The closes I've ever gotten is:

enter image description here

Here is my matrix inside my shader that I apply translation and scaling on:

mat4 worldPosTrans = mat4(vec4(scale.x * cos(rotateZ), 0, 0, 0),
                          vec4(0, scale.y, 0, 0),
                          vec4(0, 0, scale.z, 0),
                          vec4(translation, 1));

This is a slightly changed version from something that was supposed to rotate everything:

mat4 worldPosTrans = mat4(vec4(scale.x * cos(rotateZ), -sin(rotateZ), 0, 0),
                          vec4(sin(rotateZ), scale.y * cos(rotateZ), 0, 0),
                          vec4(0, 0, scale.z, 0),
                          vec4(translation, 1));

This is my full vertex shader:

precision mediump float;

attribute vec3 vertPosition;
attribute vec3 vertColor;
attribute vec2 aTextureCoord;
varying vec3 fragColor;
varying highp vec2 vTextureCoord;

varying highp vec2 vTextureCoordBg;
uniform vec2 uvOffsetBg;
uniform vec2 uvScaleBg;

uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;

uniform vec2 uvOffset;
uniform vec2 uvScale;

uniform vec3 translation;
uniform vec3 scale;
uniform float rotateZ;

void main()
{
    fragColor = vertColor;

    vTextureCoord =  (vec4(aTextureCoord, 0, 1)).xy * uvScale + uvOffset;
    vTextureCoordBg = (vec4(aTextureCoord, 0, 1)).xy * uvScaleBg + uvOffsetBg;

    mat4 worldPosTrans = mat4(
        vec4(scale.x * cos(rotateZ), 0, 0, 0),
        vec4(0, scale.y, 0, 0),
        vec4(0, 0, scale.z, 0),
        vec4(translation, 1));

    gl_Position = (uPMatrix * worldPosTrans) * vec4(vertPosition.x, vertPosition.y, vertPosition.z, 1.0);
}

edit:

My problem was solved by Rabbid76 in the comments.

Elias
  • 195
  • 2
  • 13
  • Do you have a view matrix too? How do you calcualte `gl_Position`? Can you pleas post the full vertex shader code? Note the `worldPosTrans` has to be applied first to the vertex coordinate. – Rabbid76 Jan 07 '18 at 22:12
  • 2
    The scale should be applied to each component of the axis: `mat4( vec4(scale.x*cos(rotateZ),scale.y*-sin(rotateZ),0,0), vec4(scale.x*sin(rotateZ),scale.y*cos(rotateZ),0,0), vec4(0,0,scale.z,0), vec4(translation,1) );` – Rabbid76 Jan 07 '18 at 22:46
  • If you want to rotate around the center you need your vertices to be centered around the origin one way or another. Either adjust your input vertices or add more math to move them so they are centered around the origin. – gman Jan 08 '18 at 01:15

1 Answers1

2

A 4*4 trasformation matrix in GLSL looks like this:

mat4 m44 = mat4(
    vec4( Xx, Xy, Xz, 0.0),
    vec4( Yx, Xy, Yz, 0.0),
    vec4( Zx  Zy  Zz, 0.0),
    vec4( Tx, Ty, Tz, 1.0) );

In general a rotation matrix around the Z-axis is setup like this:

float angle;
mat4  rotation = mat4(
    vec4( cos(angle), -sin(angle), 0.0,  0.0 ),
    vec4( sin(angle), cos(angle),  0.0,  0.0 ),
    vec4( 0.0,        0.0,         1.0,  0.0 ),
    vec4( 0.0,        0.0,         0.0,  1.0 ) );

see also Rotation matrix


This means you have to setup the worldPosTrans matrix like this:

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.xyz,                                          1.0)
);
Rabbid76
  • 202,892
  • 27
  • 131
  • 174
  • This works, the matrix is being rotated around it's origin, top left. How do I make it rotate relative to the "screen/world" matrix. RIght now I'm not able to choose the origin point of rotation by translating the matrix to the origin and then rotating, it always rotates from the upper left corner relative to itself. – Elias Jan 09 '18 at 20:42
  • @Elias that depends on the vertex coordinates. If the vertex cooridnates would be from (-1.0,-1.0) to (1.0,1.0), it would rotate around the center (0.0, 0.0). Since your rectangle rotated around the top left, I guess that your texture coordinates are from (0.0, 0.0) to (1.0, 1.0). – Rabbid76 Jan 09 '18 at 20:54
  • @iscariot The comment section is not intended to ask questions. If you have a question, then [Ask a public question](https://stackoverflow.com/questions/ask) – Rabbid76 May 25 '20 at 08:00