Question

所以我试图将旋转和透视效果添加到顶点着色器中。旋转工作正常，但我无法制作透视效果。我在2D工作。

旋转矩阵是从代码生成的，但透视矩阵是我通过使用透视工具从GIMP获得的一堆硬编码值。

private final Matrix3 perspectiveTransform = new Matrix3(new float[] {
    0.58302f, -0.29001f, 103.0f,
    -0.00753f, 0.01827f, 203.0f,
    -0.00002f, -0.00115f, 1.0f
});

这个透视矩阵正在使用500x500图像在GIMP中完成我想要的结果。然后我尝试在纹理坐标上应用相同的矩阵。这就是为什么我之前乘以500并除以500后的原因。

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;
uniform mat3 u_rotation;
uniform mat3 u_perspective;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;

    vec3 vec = vec3(a_texCoord0 * 500.0, 1.0);

    vec = vec * u_perspective;

    vec = vec3((vec.xy / vec.z) / 500.0, 0.0);

    vec -= vec3(0.5, 0.5, 0.0);
    vec = vec * u_rotation;
    v_texCoords = vec.xy + vec2(0.5);

    gl_Position = u_projTrans * a_position;
}

对于旋转，我会偏移原点，使其围绕中心而不是左上角旋转。

我所知道的关于GIMP的透视工具的所有内容都来自http://www.math.ubc.ca/~cass/graphics/manual/pdf/ch10.ps这表明我能够重现GIMP在阅读之后所做的事情，但事实证明我无法做到。结果显示没有（没有像素），而移除透视部分显示图像正确旋转。

如链接中所述，我将vec.z除以将我的齐次坐标转换回2D点。我没有使用原点移动进行透视变换，因为链接中提到左上角用作原点。第11页：

有一点需要注意 - GIMP的起源坐标位于左上角，y向下增加。

修改：

感谢@ Rabbid76的回答，它现在正在展示一些东西！然而，它并没有改变我的纹理，就像矩阵在GIMP上转换我的图像一样。

我在GIMP上的转换矩阵应该做一些类似的事情：

但相反，它看起来像那样：

我从实际结果中可以看出这是我的想法：

https://imgur.com/X56rp8K（已使用Image）

（正如所指出的那样，它的纹理参数是夹到边缘而不是夹到边界，但是在点旁边）

它看起来与我正在寻找的完全相反。在尝试应用矩阵之前，我尝试将原点偏移到图像的中心和左下角，但没有成功。这是一个新结果，但它仍然是同一个问题：如何将GIMP透视矩阵应用到GLSL着色器中？

EDIT2 ：

通过更多测试，我可以确认它正在执行＆＃34;反对＆＃34;。使用这个简单的缩减变换矩阵：

private final Matrix3 perspectiveTransform = new Matrix3(new float[] {
        0.75f, 0f, 50f,
        0f, 0.75f, 50f,
        0f, 0f, 1.0f
});

结果是图像的放大版本：

如果我以编程方式反转矩阵，它适用于简单的缩放矩阵！但对于透视矩阵，它表明：

https://imgur.com/v3TLe2d

EDIT3 ：

再次感谢@ Rabbid76，在透视矩阵完成旋转之后，结果是应用了旋转，我最终得到了这样的结果：https://imgur.com/n1vWq0M

差不多了！唯一的问题是图像非常挤压。它就像透视矩阵被多次应用一样。但是如果仔细观察，你可以看到它在透视时旋转，就像我想要的那样。现在的问题是如何不像我在GIMP中那样得到结果。（根问题仍然是相同的，如何采用GIMP矩阵并将其应用于着色器）

Answer 1

这个透视矩阵正在使用500x500图像在GIMP中完成我想要的结果。然后我尝试在纹理坐标上应用相同的矩阵。这就是为什么我之前乘以500并除以500后的原因。

矩阵

 0.58302 -0.29001 103.0
-0.00753  0.01827 203.0
-0.00002 -0.00115 1.0f

是2D透视变换矩阵。它使用2D Homogeneous coordinate进行操作见2D affine and perspective transformation matrices

由于GIMP中显示的矩阵是从透视到正交视图的变换，因此逆矩阵必须用于变换。可以通过调用inv()来计算逆矩阵。

设置矩阵以执行范围为[0,500]的Cartesian coordinate到[0,500]范围内的Homogeneous coordinates的操作。

您的假设是正确的，您必须将输入从[0,1]范围缩放到[0,500]，输出从[0,500]缩放到[0,1]。但是你必须缩放2D笛卡尔坐标此外，您必须在透视投影和Perspective divide之后进行旋转可能需要（取决于位图和纹理坐标属性），您必须翻转纹理坐标的V坐标。

最重要的是，必须在片段着色器中按片段完成转换。请注意，由于此变换不是线性的（它是透视变换），因此仅计算角点上的纹理坐标是不够的。

vec2 Project2D( in vec2 uv_coord )
{
    vec2 v_texCoords;

    const float scale = 500.0;

    // flip Y
    //vec2 uv = vec2(uv_coord.x, 1.0 - uv_coord.y);
    vec2 uv = uv_coord.xy;

    // uv_h: 3D homougenus in range [0, 500] 
    vec3 uv_h = vec3(uv * scale, 1.0) * u_perspective;

    // uv_h: perspective devide and downscale [0, 500] -> [0, 1]
    vec3 uv_p = vec3(uv_h.xy / uv_h.z / scale, 1.0);

    // rotate
    uv_p = vec3(uv_p.xy - vec2(0.5), 0.0) * u_rotation + vec3(0.5, 0.5, 0.0);

    return uv_p.xy; 
}

当然你也可以在顶点着色器中进行变换。但是你必须将2d齐次坐标从顶点着色器传递到片段着色器这类似于将剪辑空间坐标设置为gl_Position。区别在于你有一个2d齐次坐标而不是3d。你必须在片段着色器中手动执行Perspective divide：

顶点着色器：

attribute vec2 a_texCoord0;
varying   vec3 v_texCoords_h;

uniform mat3 u_perspective

vec3 Project2D( in vec2 uv_coord )
{
    vec2 v_texCoords;

    const float scale = 500.0;

    // flip Y
    //vec2 uv = vec2(uv_coord.x, 1.0 - uv_coord.y);
    vec2 uv = uv_coord.xy;

    // uv_h: 3D homougenus in range [0, 500] 
    vec3 uv_h = vec3(uv * scale, 1.0) * u_perspective;

    // downscale
    return vec3(uv_h.xy / scale, uv_h.z);
}

void main()
{
    v_texCoords_h = Project2D( a_texCoord0 );

    .....
}

片段着色器：

varying vec3 v_texCoords_h;

uniform mat3 u_rotation;

void main()
{
    // perspective divide
    vec2 uv = vertTex.xy / vertTex.z;

    // rotation
    uv = (vec3(uv.xy - vec2(0.5), 0.0) * u_rotation + vec3(0.5, 0.5, 0.0)).xy;

    .....
}

请参阅预览，其中我使用了以下2D投影矩阵，它是GIMP中显示的逆矩阵：

2.452f,     2.6675f,    -388.0f,
0.0f,       7.7721f,    -138.0f,
0.00001f,   0.00968f,    1.0f

进一步说明，与u_projTrans相比，u_perspective按行主要顺序初始化。

因此，你必须将左边的矢量乘以u_perspective：

vec_h = vec3(vec.xy * 500.0, 1.0) * u_perspective;

但是你必须将右边的矢量乘以u_projTrans：

gl_Position = u_projTrans * a_position;

见GLSL Programming/Vector and Matrix Operations
和Data Type (GLSL)

当然，如果您在按glUniformMatrix*

设置矩阵时转置矩阵，则可能会发生变化

将GIMP中的透视变换矩阵应用到GLSL着色器中

1 个答案: