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类硬件支持写入自由确定的图像位置（散点写入），但散点写入效率极低，应该避免使用。

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

³：应使用所谓的separable filters实现模糊效果，以大幅提升性能。

GLSL纹理失真

1 个答案: