如何使用带有three.js的GLSL着色器替换平面上的2D纹理？

Question

假设我们有一个简单的PlaneBufferGeometry，其纹理应用如下：

知道材质将使用ShaderMaterial，通过某种排序从第一个状态变为结果状态，需要对像这样的纹理进行什么操作？提供给片段着色器的uProgress / uTime制服？

我希望通过开始在glsl中编写这种操作，我将能够实现更高级的效果（如2D火焰动画）。

Answer 1

你可以按照

的方式做点什么

vec2 mySkewUv = vec2(vUv.x + vUv.y , vUv.y);

Answer 2

从@pailhead回答开始，我能够创建最终动画代码，如下所示：

除了由three.js传递的基本制服和属性之外，我们还传递时间（自动画循环开始）和一个uMap，它是纹理加载器加载的纹理并暴露为均匀

顶点着色器是基本的。它只是将uv位置传递给片段着色器：

改变vec2 vUv;

void main() {
  vUv = uv;  
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

在片段着色器中，我们使用sin函数来变换位移，使其“环绕”到初始位置并且也在负面上。

varying vec2 vUv;

uniform float uTime;
uniform sampler2D uMap;

void main() {
  vec4 map = texture2D(uMap, vec2(vUv.x + (vUv.y - 0.5) * sin(uTime * 0.01), vUv.y) );
  gl_FragColor = vec4( map.rgb,  1.0 );
}

book of shaders可视化和sin函数的练习帮助我想象并提出了解决方案。

附加了结果的屏幕剪辑（由于stackoverflow的图像最大大小限制而导致质量下降）