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？还是我必须创建一个有很多顶点的平面并扭曲顶点位置？是否可以获得 'neighbour' 像素颜色值？谢谢！

Answer 1

How can I modify pixel locations to distort the texture?

通过修改采样纹理的位置。那将是 texture2D

的第二个参数

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

Is it possible to get 'neighbour' pixel color values?

是的，这是正确的方法。在片段着色器中，您要写入的位置是不可变的¹，因此这一切都必须通过获取位置来完成。另请注意，您可以从同一纹理中采样任意 ² 次，这使您能够实现模糊 ³ 效果。

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

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

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

GLSL 纹理失真

GLSL texture distortion

opengl-es

glsl