GLSL纹理失真

Question

我想在纹理上创建一个简单的热变形，但似乎无法弄清楚完成此任务所需的步骤。 到目前为止，我已经能够通过以下方式更改像素颜色（使用像素着色器）：

    varying vec3 v_Position;        
    varying vec4 v_Color;           

    varying vec3 v_Normal;          
    varying vec2 v_TexCoordinate;  

    void main()
    {
      var col = texture2D(u_Texture, v_TexCoordinate);
      col.r = 0.5;
      gl_FragColor = col;
    }

这是我迷路的地方。 如何修改像素位置以扭曲纹理？ 我可以设置任何其他属性，但gl_FragColor？ 或者我是否必须创建一个具有许多顶点的平面并扭曲顶点位置？ 是否有可能获得“邻居”像素颜色值？ 谢谢！

Answer 1

如何修改像素位置以扭曲纹理？

通过修改采样纹理的位置。 这将是texture2D的第二个参数

var col = texture2D(u_Texture, v_TexCoordinate);
                              ^-------------^
          Texture distortion goes here

是否有可能获得“邻居”像素颜色值？

是的，这是正确的方法。 在片段着色器中，您要写入的位置是不可变的¹，因此必须通过获取位置完成所有操作。 另请注意，您可以从相同的纹理中采样任意²次数，这样您就可以实现模糊效果。

---

¹：OpenGL-4类硬件支持写入自由确定的图像位置（散点写入），但分散写入效率极低，应避免使用。

²：着色器的总运行时间有一个实际限制，可能受OS限制，也受所需帧速率的限制。

³：应使用所谓的可分离滤波器实现模糊效果，以大幅提高性能。