What is the fastest way to render subsets of a single texture onto a WebGL canvas?

user_1911432 0
Viewed 530

If you have a single power-of-two width/height texture (say 2048) and you want to blit out scaled and translated subsets of it (say 64x92-sized tiles scaled down) as quickly as possible onto another texture (as a buffer so it can be cached when not dirty), then draw that texture onto a webgl canvas, and you have no more requirements - what is the fastest strategy?

Is it first loading the source texture, binding an empty texture to a framebuffer, rendering the source with drawElementsInstancedANGLE to the framebuffer, then unbinding the framebuffer and rendering to the canvas?

I don't know much about WebGL and I'm trying to write a non-stateful version of https://github.com/kutuluk/js13k-2d (that just uses draw() calls instead of sprites that maintain state, since I would have millions of sprites). Before I get too far into the weeds, I'm hoping for some feedback.

webgl
1 Answers

There is no generic fastest way. The fastest way is different by GPU and also different by specifics.

  • Are you drawing lots of things the same size?
  • Are the parts of the texture atlas the same size?
  • Will you be rotating or scaling each instance?
  • Can their movement be based on time alone?
  • Will their drawing order change?
  • Do the textures have transparency?
  • Is that transparency 100% or not (0 or 1) or is it various values in between?

I'm sure there's tons of other considerations. For every consideration I might choose a different approach.

In general your idea if using drawElementsAngleInstanced seems fine but without knowing exactly what you're trying to do and on which device it's hard to know.

Here's some tests of drawing lots of stuff.

user_1285110
Related