背景
之前尝试过利用多个纹理单元，再基于传入给 shader 的 vertexBuffer 信息决定选 1 号纹理单元还是 2 号纹理单元。
虽然理论上，这个方式确实行得通，但是一次 drawcall 绘制多个纹理，本来目的是为了提高绘制性能，而实际上却无法提高性能，甚至还有反作用。
因为有说法是 shader 分支会降低 GPU 性能，详见：https://blog.csdn.net/qq_31788759/article/details/107248224
那么，是否还有其他批量绘制不同纹理的方式呢？
WebGL 2 sampler2DArray
WebGL 2 带来了一个新的数据结构：sampler2DArray。这个东西，还是占用一个纹理单元，但传入的不是一个纹理，而是一个纹理数组。
关键 shader 代码：
#version 300 es
precision mediump float;
precision mediump sampler2DArray;
// our texture
uniform sampler2DArray u_image;
// the texCoords passed in from the vertex shader.
in vec3 v_texCoord;
// we need to declare an output for the fragment shader
out vec4 outColor;
void main() {
outColor = texture(u_image, v_texCoord); // 这里从一般的 vec2 变成了 vec3，第三个元素是纹理 index
}
</script>
相对于普通的 2d 纹理渲染，最关键的是 JS 如何传递纹理到 GPU。这里关键是类型 gl.TEXTURE_2D 变成 gl.TEXTURE_2D_ARRAY，texImage2D 变成 texImage3D。
有两种方式传递纹理：
- 可以把多个纹理合并到一个大图，一次性推送；
- 也可以先预申请空间，再用 texSubImage3D 逐个推送。
关键 JS 代码：
var canvas = document.createElement('canvas');
canvas.width = imgs[0].width;
canvas.height = imgs[0].height * imgs.length;
var ctx = canvas.getContext('2d');
for (let i = 0; i < imgs.length; i++) {
ctx.drawImage(imgs[i], 0, imgs[0].height * i);
}
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = new Uint8Array(imageData.data.buffer);
gl.texImage3D(
gl.TEXTURE_2D_ARRAY,
0, // level 暂时不知道什么地方会用到
gl.RGBA, // internalFormat
imgs[0].width, // width
imgs[0].height, // height
imgs.length, // depth 多少个纹理
0, // border
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
pixels
);
// 利用 texImage3D 设定空间，再用 texSubImage3D 设置图片。texImage3D 创建空间时，宽高设定很重要，后续的尺寸不能超过这个尺寸。如果后续尺寸比这个小，会导致渲染时图片偏小，也很好理解，因为 subImage 传递的只是左上角一小部分的图片，其他面积为空白。
gl.texImage3D(
gl.TEXTURE_2D_ARRAY,
0, // level 暂时不知道什么地方会用到
gl.RGBA, // internalFormat
imgs[0].width, // width
imgs[0].height, // height
imgs.length, // depth 多少个纹理
0, // border
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
null
);
/**
* 用 texStorage3D 搭配 texSubImage3D 也可以。但这里需要时 RGBA8 不是 RGBA。
* 因为选项里边没有 RGBA https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage3D
* 另外，这里不是指输入图片的格式，是指把图片转为什么格式存储。
* texImage3D 的 gl.RGBA 默认情况下跟 gl.RGBA8 一致
*/
// gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, imgs[0].width, imgs[0].height,3);
gl.texSubImage3D(
gl.TEXTURE_2D_ARRAY,
0, // level 暂时不知道什么地方会用到
0, // x offset
0, // y offset
0, // z offset 不能超过前边预留的 depth
imgs[0].width, // width
imgs[0].height, // height
1, // depth 多少个纹理
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
imgs[0]
);
gl.texSubImage3D(
gl.TEXTURE_2D_ARRAY,
0, // level 暂时不知道什么地方会用到
0,
0,
1,
imgs[0].width, // width
imgs[0].height, // height
1, // depth 多少个纹理
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
imgs[1]
);
gl.texSubImage3D(
gl.TEXTURE_2D_ARRAY,
0, // level 暂时不知道什么地方会用到
0,
0,
2,
imgs[0].width, // width
imgs[0].height, // height
1, // depth 多少个纹理
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
imgs[2]
);
详细代码请见：https://github.com/kenkozheng/HTML5_research/tree/master/WebGL/sampler2DArray
参考资料
https://www.nxrte.com/jishu/19240.html
https://juejin.cn/post/6844903846678888461
https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D
https://github.com/WebGLSamples/WebGL2Samples/blob/master/samples/texture_2d_array.html
