Way to speed up multiple renderTexture

Phaser 3
1

Hello everybody,
I need to renderTexture several times (in the order of ~400 times).

Something like:

scene.add.renderTexture(0, 0, chunkWidth, chunkHeight);

about 400 times. This operation blocks the UI, and it takes up to some seconds on mobile. chunkWidth and chunkHeight are about 50px each (it’s a square, if that can help somehow).

I suspect (…hope :slight_smile: ) that there is a way to achieve better performances.

Any suggestion or idea?

2

Maybe you want one large renderTexture and draw small chunks on it?

3

The thing is that I need to use the chunks individually later (I use saveTexture for that). How can I get smaller independent textures from a large renderTexture?

4

To have a better understanding, this is the complete snippet I am using:

						const chunkGenerator = scnFrame.add.renderTexture(0, 0, chunkWidth, chunkHeight);

						chunkGenerator.draw(
							scnFrame.textures.getFrame("atlas_images", `symbols/${symbolId}`),
							-(chunkX * chunkWidth),
							-(chunkY * chunkHeight)
						);
						chunkGenerator.erase(`random-shape-${Phaser.Math.Between(0, 10)}`);

						chunkGenerator.saveTexture(`${symbolId}-${chunkX}-${chunkY}`);

						chunkGenerator.destroy();

Even if there are other operations, the UI suffers when it renderTexture.

5

Create one render texture, draw all the chunks on it, then use renderTexture.texture.addFrame(…) for each chunk.

1 Like
6

Brilliant! I used the approach you suggested and the rendering time dropped by ~3 times!

Thank you @samme !