绘制可变数量的纹理

Question

对于一些科学数据可视化，我使用WebGL绘制一个大型浮点数组。数据集是二维的，通常有数百或数千个高度值和数万个宽度值。

为了将这个数据集安装到视频内存中，我将其切割成几个非方形纹理（取决于MAX_TEXTURE_SIZE）并将它们显示在一起。我使用相同的着色器和一个sampler2d来绘制所有纹理。这意味着我必须迭代所有纹理以进行绘制：

for (var i=0; i<dataTextures.length; i++) {
    gl.activeTexture(gl.TEXTURE0+i);
    gl.bindTexture(gl.TEXTURE_2D, dataTextures[i]);
    gl.uniform1i(samplerUniform, i);

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffers[i]);
    gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

但是，如果纹理数量大于六个，性能会变得非常糟糕。现在我知道游戏使用了比这更多的纹理，所以这不是预期的行为。我还读到你可以绑定采样器数组，但据我所知，纹理总数必须提前知道。对我来说，纹理的数量取决于数据集，所以在加载数据之前我无法知道它。

另外，我怀疑我在这个渲染循环中做了不必要的事情。任何提示都会受到欢迎。

你通常如何在WebGL中绘制可变数量的纹理？

Answer 1

以下是一些有用的答案

How to bind an array of textures to a WebGL shader uniform?

How to send multiple textures to a fragment shader in WebGL?

How many textures can I use in a webgl fragment shader?

如果我的头脑有点远离顶部

1. 创建一个循环遍历N个纹理的着色器。将您未使用的纹理设置为某些1x1像素纹理，其中包含0,0,0,0或其他不会影响计算的内容

2. 创建一个循环遍历N个纹理的着色器。创建一个统一的布尔数组，在循环中跳过任何相应的布尔值为false的纹理。

3. 动态生成一个具有所需纹理数量的着色器。它不应该难以连接几个字符串等。