Javascript 如何使用2个或更多具有不同位置和纹理坐标的纹理？

从中学习主题时，发现这两种纹理共享相同的a_位置和a_texCoord，通过使用一个DrawArray调用，它们在屏幕上显示为相同的大小。 这是否可能有不同的位置和纹理坐标，但仍然可以对两个图像进行如下处理：假设u_image0是背景，u_image1是前图像，它可以与背景一起产生屏幕效果，如下所示

precision mediump float;

// our textures
uniform sampler2D u_image0;
uniform sampler2D u_image1;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord0;
varying vec2 v_texCoord1;

void main() {
   vec4 color0 = texture2D(u_image0, v_texCoord0);
   vec4 color1 = texture2D(u_image1, v_texCoord1);
   gl_FragColor = color0 * color1;
}

---

不可能有不同的位置，因为WebGL一次只绘制一个像素。只有一个gl_位置可设置

每个纹理可能有不同的纹理坐标，或者在片段着色器中计算不同的纹理坐标。比如说

   vec4 color0 = texture2D(u_image0, v_texCoord0);
   vec4 color1 = texture2D(u_image1, v_texCoord0 * 2.0);

现在，第二个图像使用不同的纹理坐标。这个例子可能很傻，但关键是它是你的代码。你可以把任何你想要的数学

   uniform vec2 offset1;
   uniform vec2 offset2;
   uniform vec2 scale1;
   uniform vec2 scale2;

   vec4 color0 = texture2D(u_image0, v_texCoord0 * scale1 + offset1);
   vec4 color1 = texture2D(u_image1, v_texCoord0 * scale2 + offset2);

否则，还可以为每个纹理创建一个顶点着色器，该着色器以不同的纹理坐标传递

attribute vec2 texcoord0;
attribute vec2 texcoord1;

varying vec2 v_texCoord0;
varying vec2 v_texCoord1;

void main() {
  v_texcoord0 = v_texCoord0;
  v_texcoord1 = v_texCoord1;
}

正如上面提到的一样，你的数学内容由你自己决定。添加偏移、比例、完整矩阵或任何您想要的内容

   uniform vec2 offset1;
   uniform vec2 offset2;
   uniform vec2 scale1;
   uniform vec2 scale2;

   vec4 color0 = texture2D(u_image0, v_texCoord0 * scale1 + offset1);
   vec4 color1 = texture2D(u_image1, v_texCoord0 * scale2 + offset2);

允许使用完整的矩阵是很常见的

  vec2 uv = (some4x4Matrix * vec4(texcoord, 0, 1)).xy;

这使您可以平移偏移、缩放甚至旋转纹理坐标

这是