javascript - 如何在 WebGL 中沿 x 轴移动纹理？

Question

我能够将图像渲染到纹理，该纹理渲染在屏幕的左上角。现在我想在 X 轴上缓慢地向右移动纹理并在左上角添加另一个纹理，并且想要连续执行此操作。

现在，我能够渲染单个纹理，但无法进一步移动。有人可以帮助我更进一步吗？

我正在放置我到目前为止已经完成的代码。

代码:

顶点着色器

attribute vec2 a_position;
uniform vec2 u_resolution;
uniform mat3 u_matrix;
varying vec2 v_texCoord;
void main() {
    gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);
    v_texCoord = a_position;
}

片段着色器

precision mediump float;
// our texture
uniform sampler2D u_image;
// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;
void main() {
    gl_FragColor = texture2D(u_image, v_texCoord);
}

Javascript

gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, dataTypedArray);
//Draw the rectangle.
gl.drawArrays(gl.TRIANGLES, 0, 6);

其中 dataTypedArray 是像素的 Uint8Array。

接下来我想移动这个渲染的纹理并添加更多纹理以前的位置。有什么建议吗？

Answer 1

我认为实现这一点的最简单方法基本上是通过 2 个单独的绘制调用绘制 2 个四边形。在第一个绘制调用中，在所需的 x 位置绘制第一个四边形，然后切换到第二个纹理并在所需位置绘制第二个四边形。您不必以任何方式更改着色器。

在伪 js 中:

// allocate the two textures 

gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);
gl.bindTexture(gl.TEXTURE_2D, firstTexture);
// use whatever method you want uniform/attribute/watever to upload the quad position
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.bindTexture(gl.TEXTURE_2D, secondTexture);
// upload the second quad position
gl.drawArrays(gl.TRIANGLES, 0, 6);