CODEWITHSUNDEEP
webgl
bastibe
bastibe

Reputation: 17217

Drawing a variable number of textures

For some scientific data visualization, I am drawing a large float array using WebGL. The dataset is two-dimensional and typically hundreds or few thousands of values in height and several tens of thousands values in width.

To fit this dataset into video memory, I cut it up into several non-square textures (depending on MAX_TEXTURE_SIZE) and display them next to one another. I use the same shader with a single sampler2d to draw all the textures. This means that I have to iterate over all the textures for drawing:

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

However, if the number of textures gets larger than half a dozen, performance becomes quite bad. Now I know that games use quite a few more textures than that, so this can't be expected behavior. I also read that you can bind arrays of samplers, but as far as I can tell, the total number of texture has to be known ahead of time. For me, the number of textures depends on the dataset, so I can't know it before loading the data.

Also, I suspect that I am doing unnecessary things in this render loop. Any hints would be welcome.

How would you normally draw a variable number of textures in WebGL?

Upvotes: 2

Views: 614

Answers (1)

user128511
user128511

Reputation:

Here's a few previous answers that will help

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?

Some ways off the top if my head

  1. Create a shader that loops over N textures. Set the textures you're not using to some 1x1 pixel texture with 0,0,0,0 in it or something else that doesn't effect your calculations

  2. Create a shader that loops over N textures. Create a uniform boolean array, in the loop skip any texture who's corresponding boolean value is false.

  3. Generate a shader on the fly that has exactly the number of textures you need. It shouldn't be that hard to concatinate a few strings etc..

Upvotes: 2

Related Questions