在顶点着色器中旋转时产生奇怪效果

所以我试图创建一个实例化效果。我使用了一个常规的矩形纹理着色器并添加到属性中。顺便说一句我的游戏是2D，如果它的第一，第二或第三等在顶点着色器中旋转时产生奇怪效果

位置偏移（所以他们可以走动的画面）

时间的OpenGL ES 2.0

的ID告诉它

基于ID，我将根据矩形Time和实例ID为动画旋转。我需要在GPU中这样做，因为我的CPU开销已经很高了。

我发现，声称创建基于角度的旋转矩阵GLSL功能但它最终建立一个真正的扭曲效应。我需要做的矩阵只是在2d屏幕上围绕矩形的点（0.5，0.0）（底部中心）旋转一个角度。

然而，由于打算在所有这些新的旋转功能不起作用，坐标是怪异的位置，我相当肯定，锚点不是在0.5，0.0。

旧版本（绘制在左下角，只是一个普通的矩形）（注意：我没有更改任何pos或tc信息在新版本中，它只需要旋转）

precision highp float; 

attribute vec2 pos; 
attribute vec2 tc; 
attribute float instance; 

uniform mat4 matrix; 
uniform float time; 
uniform vec2 position; 

varying vec2 v_texcoord; 

void main() 
{ 
    gl_Position = matrix/* * rotationMatrix(vec3(1.0), 3.14 * instance)*/ * vec4(pos, 1.0, 1.0); 
    v_texcoord = tc; 
}

新版本（由旋转和位置的话）

precision highp float; 

attribute vec2 pos; 
attribute vec2 tc; 
attribute float instance; 

uniform mat4 matrix; 
uniform float time; 
uniform vec2 position; 

varying vec2 v_texcoord; 

mat4 rotationMatrix(vec3 axis, float angle) 
{ 
    axis = normalize(axis); 
    float s = sin(angle); 
    float c = cos(angle); 
    float oc = 1.0 - c; 

    return mat4(oc * axis.x * axis.x + c,   oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0, 
       oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c,   oc * axis.y * axis.z - axis.x * s, 0.0, 
       oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c,   0.0, 
       0.0,        0.0,        0.0,        1.0); 
} 
void main() 
{ 
    gl_Position = matrix * rotationMatrix(vec3(1.0), 3.14 * instance) * vec4(pos + position, 1.0, 1.0); 
    v_texcoord = tc; 
}

任何想法，为什么？

来源

2016-05-29 J.Doe

在你发现用于建立旋转矩阵式中，限定所述轴线的向量必须是一个单位矢量，即它需要有长度为1这不是在您的示例的情况。当你写vec3(1.0)，对应于vec3(1.0, 1.0, 1.0)，这是一个长度为sqrt(3.0)的向量。

简单的解决方法是标准化的矢量：

normalize(vec3(1.0))

或写为直接的单位长度矢量：

vec3(1.0/sqrt(3.0))

从你的描述，它实际上听起来像你只是想旋转围绕其中一个坐标轴，因此不清楚为什么要使用(1.0, 1.0, 1.0)作为旋转轴。

例如，要围绕z轴旋转点pos的angle，我甚至不打算构建矩阵。只需直接写旋转为：

float c = cos(angle); 
float s = sin(angle); 
gl_Position = vec4(c * pos.x - s * pos.y, s * pos.x + c * pos.y, pos.zw);

来源

2016-05-29 15:14:43

在顶点着色器中旋转时产生奇怪效果

回答

相关问题