Question

对于这个项目，我尝试将纹理（雨滴图像以1024x2048 png发送）在屏幕上移动，然后在像素到达画布底部时将其循环回到屏幕顶部。一旦像素到达顶部，我还想将其向右移动一点，经过几次迭代，它将到达画布的最左侧，然后将其发送到画布的最右侧。但是，我似乎无法使其正常工作。由于我对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;

这将使您能够以与通常操纵顶点坐标相同的方式来操纵纹理坐标，这意味着您将能够缩放纹理，旋转纹理，倾斜纹理等。...您可以看到{ {3}}

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

1 个答案: