c++ - 使用 openGL 着色器倾斜图像

Question

为了减轻美术师的工作量，我正在为图像制作一个简单的骨骼动画系统。我已经概念化了所有部分的工作原理。但要让它按照我想要的方式进行动画处理，我需要能够实时扭曲图像。 (如果我做不到，我仍然知道如何让它工作，但如果我可以倾斜图像以增加视角，它会更漂亮)

我使用的是 SFML，它不支持图像倾斜。有人告诉我需要在图像上使用 OpenGL 着色器，但我得到的所有建议都是“学习 GLSL”。所以我想也许这里有人可以帮我一些忙。

有人知道我应该从哪里开始吗？或者怎么做？

基本上，我希望能够对图像进行变形以赋予它透视图(如下面的模型所示)

左边的图像在顶部和底部倾斜。右侧的图像左右倾斜。

Answer 1

如何在 GLSL 中倾斜纹理的示例是以下(优化不佳的)着色器。理想情况下，您可能希望在您的常规程序中实际预先计算您的变换矩阵并将其作为统一传递，这样您就不会在着色器中的每一步都重新计算变换。如果您仍想在着色器中计算变换，请改为将偏斜因子作为制服传递。否则，每次要更改倾斜因子时，您都必须打开着色器并对其进行编辑。

这也适用于屏幕对齐的四边形。

垂直

attribute vec3 aVertexPosition;

varying vec2 texCoord;

void main(void){
   // Set regular texture coords
   texCoord = ((vec2(aVertexPosition.xy) + 1.0) / 2.0);

   // How much we want to skew each axis by
   float xSkew = 0.0;
   float ySkew = 0.0;

   // Create a transform that will skew our texture coords
   mat3 trans = mat3(
      1.0       , tan(xSkew), 0.0,
      tan(ySkew), 1.0,        0.0,
      0.0       , 0.0,        1.0
   );

   // Apply the transform to our tex coords
   texCoord = (trans * (vec3(texCoord.xy, 0.0))).xy;

   // Set vertex position
   gl_Position = (vec4(aVertexPosition, 1.0));
}

碎片

precision highp float;

uniform sampler2D sceneTexture;

varying vec2 texCoord;

void main(void){
   gl_FragColor = texture2D(sceneTexture, texCoord);
}