在着色器中旋转2D图像矩阵上的Z轴 [英] rotate Z axis on 2d image's matrix in shader

问题描述

我正在尝试在顶点着色器内部旋转2d图像的矩阵.

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

我希望2d图像围绕我认为是z轴的方向旋转.

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

但是我得到的关门是:

这是我的着色器中的矩阵，可在其中应用平移和缩放:

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);
}

Rabbid76在评论中解决了我的问题.

My problem was solved by Rabbid76 in the comments.

推荐答案

GLSL中的4 * 4转换矩阵如下:

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) );

通常这样设置围绕Z轴的旋转矩阵:

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 ) ); 

另请参见旋转矩阵

这意味着您必须像这样设置 worldPosTrans 矩阵:

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)
);

这篇关于在着色器中旋转2D图像矩阵上的Z轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！