javascript - 如何在WebGL中使纹理在y轴和x轴上移动

Question

对于这个项目，我尝试将纹理(以 1024x2048 png 形式发送的雨滴图像)沿着屏幕移动，然后在像素到达 Canvas 底部后将像素循环回屏幕顶部。一旦像素到达顶部，我还想将其向右移动一点，经过几次迭代后，它将到达 Canvas 的最左侧，然后将其发送到 Canvas 的最右侧。但是，我似乎无法让它正常工作。由于我对 WebGL 的了解非常有限，我不确定我做错了什么，或者我应该问的正确问题是什么。我很确定这是我如何尝试移动像素的问题，但我不知道我应该做什么。

这是我的顶点着色器:

<script id="vertex-shader1" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute vec2 vTexCoord;

varying vec2 fTexCoord;

void main() 
{
	float y= vTexCoord.y - float(0.01);
	float x= vTexCoord.x;
	
	if(y < float(0.0)) {
		y = float(1.0);
		//x = fTexCoord.x + float(0.1) ;
	}
/*	if(x > float(1.0)){
		x = float(0.0);
	}
*/	
   gl_Position = vPosition;
	fTexCoord= vec2(x,y);
} 
</script>

这是我的片段着色器:

<script id="fragment-shader1" type="x-shader/x-fragment">

precision mediump float;

uniform sampler2D texture1;

varying vec2 fTexCoord;

void
main()
{

//	gl_FragColor = texture2D(texture1, vec2(x,y)); 

	
	gl_FragColor= texture2D(texture1, fTexCoord);
}

</script>

上述着色器应该使图像(下面链接)中的雨滴向下移动到屏幕上。 raindrop.png

但相反，它只是将雨滴拉长。 (它这样做:messedup_raindrops.png)

关于如何解决这个问题有什么想法吗？

Answer 1

我听起来你想“滚动”纹理。为此，您只需传递纹理坐标的偏移量即可。您可以在片段或顶点着色器中执行此操作

有效

uniform vec2 offset;

vec2 newTexCoords = texCoords + offset;

然后随着时间的推移改变offset。偏移值通常只需要在 0 到 1 的范围内，因为过去的事情只会重复。

示例:

const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform vec2 offset;

varying vec2 v_texcoord;

void main() {
  gl_Position = position;
  v_texcoord = texcoord + offset;
}
`;

const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D tex;
void main() {
  gl_FragColor = texture2D(tex, v_texcoord);
}
`;

const gl = document.querySelector('canvas').getContext('webgl');

// compile shaders, link program, lookup locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    numComponents: 2,
    data: [
      -1, -1,
       1, -1,
      -1,  1,
      -1,  1,
       1, -1,
       1,  1,
    ],
  },
  texcoord: {
    numComponents: 2,
    data: [
       0,  1,
       1,  1,
       0,  0,
       0,  0,
       1,  1,
       1,  0,
    ],
  },
});

const texture = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/ZKMnXce.png',
  crossOrigin: 'anonymous',
});

function render(time) {
  time *= 0.001;  // convert to seconds
  
  gl.useProgram(programInfo.program);
  // bind buffers and set attributes
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  // set uniforms and bind textures
  twgl.setUniforms(programInfo, {
    tex: texture,
    offset: [(time * .5) % 1, (time * .6) % 1],
  });
  const count = 6;
  gl.drawArrays(gl.TRIANGLES, 0, count);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

canvas { border: 1px solid black; }

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.js"></script>

如果你想要更灵活的东西，我建议你使用纹理坐标矩阵

uniform mat4 texMatrix;

vec2 newTexCoords = (texMatrix * vec4(texCoords, 0, 1)).xy;

这将让你以与经常操纵顶点坐标相同的方式操纵纹理坐标，这意味着你将能够缩放纹理、旋转纹理、倾斜纹理等......你可以看到 an example of using a texture matrix here