javascript - 如何使用 2 个或多个具有不同位置和 texCoords 的纹理？

Question

学习Webgl-2-textures的主题时，发现两个纹理共享相同的 a_positions 和 a_texCoord，通过使用一个 drawArrays 调用，它们在屏幕上显示为相同的尺寸。是否可以有不同的 a_position 和 a_texCoord，但仍然可以对两个图像进行如下处理:(假设 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;
}

Answer 1

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

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

   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;
}

与上述相同，您包含的数学内容取决于您。添加偏移量、比例或完整矩阵或任何您想要的内容。

允许完整矩阵是很常见的。

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

这可以让您平移(偏移)、缩放，甚至旋转纹理坐标。

这是an article that uses that style