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

我能够将图像渲染为纹理，纹理在屏幕左上角渲染。现在，我想在X轴上慢慢向右移动纹理，并在左上角添加另一个纹理，然后继续这样做

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

我把我的代码，我已经做了到目前为止

代码：

顶点着色器

片段着色器

Javascript

其中dataTypedArray是像素的UInt8数组

---

接下来，我要移动此渲染纹理并添加更多纹理先前位置。有什么建议吗？

我认为实现这一点最简单的方法基本上是用两个单独的绘制调用绘制两个四边形。在第一个绘制调用中，在所需的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);

---

这通常通过平移纹理坐标本身来实现。顶点着色器通常包括纹理矩阵：

attribute vec2 vertexTexCoord;  // input texture coord (s,t)
uniform mat4 TextureMatrix;     // for transforming (s,t)
varying vec2 texCoord;          // output texture coord
...
 void main() {
      gl_Position = ModelViewProjection*vec4(vertexPosition,1.0);
      texCoord = (TextureMatrix*vec4(vertexTexCoord,0.0,1.0)).st;
      ...
 }

纹理矩阵可以平移、旋转、缩放，。。。纹理。客户端JS代码构造适当的变换并加载着色器的纹理矩阵。如果希望设置平移动画，则可以从以下位置重新计算每个位置的纹理矩阵：

 ... compute s-traslation ds based on frame time ...
 Texture = new Matrix4x4;
 Texture.translate(ds, 0, 0).scale(4, 2, 1);
 ...
 gl.uniformMatrix4fv(program.TextureMatrix, false, Texture.array);

如果希望包含多个纹理，则必须使用多个纹理单元，并根据需要在片段着色器中访问它们：

 varying vec2 texCoord;
 uniform sampler2D texUnit0;
 uniform sampler2D texUnit1;
 ...
 void main() {
     ... choose which texture you want to access based on texCoord.st
     gl_FragColor = texture2D(desiredTexUnit, texCoord);
     ...
 }

---

查看以查看使用单个纹理缩放纹理坐标的效果。您需要执行多重纹理以获得所需的效果。

指向圆环的链接是一个很好的演示，但它与我的问题有何关系。我需要两个纹理渲染一个接一个作为幻灯片。我的问题令人困惑吗？如果是，让我知道，我会尝试以不同的方式解释，在长时间阅读书籍和做一些例子之后，我对WebGL有点适应，我写了这个，它在鼠标滚轮上放大/缩小，但平移对我来说仍然是一个难题，你能修改小提琴来修复平移吗？在长时间阅读书籍和做一些例子之后，我对WebGL有点满意，我写了这个，它在鼠标滚轮上放大/缩小，但平移对我来说仍然是一个难题，你能修改小提琴来修复平移吗？

attribute vec2 vertexTexCoord;  // input texture coord (s,t)
uniform mat4 TextureMatrix;     // for transforming (s,t)
varying vec2 texCoord;          // output texture coord
...
 void main() {
      gl_Position = ModelViewProjection*vec4(vertexPosition,1.0);
      texCoord = (TextureMatrix*vec4(vertexTexCoord,0.0,1.0)).st;
      ...
 }

 ... compute s-traslation ds based on frame time ...
 Texture = new Matrix4x4;
 Texture.translate(ds, 0, 0).scale(4, 2, 1);
 ...
 gl.uniformMatrix4fv(program.TextureMatrix, false, Texture.array);

 varying vec2 texCoord;
 uniform sampler2D texUnit0;
 uniform sampler2D texUnit1;
 ...
 void main() {
     ... choose which texture you want to access based on texCoord.st
     gl_FragColor = texture2D(desiredTexUnit, texCoord);
     ...
 }