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 

是否有可能在第二個參數來獲得「鄰居」的像素顏色值？

是的，這是正確的做法。在片段着色器中，您要寫入的位置是不可變的，所以它通過獲取位置來完成。另外請注意，您可以從相同的紋理採樣任意2次，這使您可以實現模糊³效果。

---

¹：寫入自由地確定圖像的位置（散點寫入）由OpenGL的4級的硬件支持，但散射寫入是非常低效的，應該避免。

2：着色器的總運行時間有一個實際限制，可能受操作系統限制，也可能受限於所需的幀速率。

³：應該使用所謂的separable filters實現模糊效果，以顯着改善性能。