Framerate when rendering tilemap is only 30

[Kanbaru]

I am using "pixijs/pixi-tilemap" library to render maps exported from Tiled, but the rendering frame rate is low.

I am newbie and I guess there may be a problem with the rendering loop logic,

My thinking is as follows:
I have several rendering layers(PIXI.display.Layer) in my game, I call them 'RenderingLayer',

there are several cameras in the game (inherited from PIXI.Container),

each camera can render multiple 'RenderingLayer' And output to RenderTexture,

finally use the PIXI.Sprite group to render the final result according to the depth property of the camera.

I use the ECS architecture to implement the game

Code of RenderingSystem.update:

for ( const camera of this.cameraComponents ) {

	if ( camera.renderingLayers.length === 0 ) {
		continue;
	}

	// clear stage
	$app.stage.removeChildren ();

	// add current rendering camera
	$app.stage.addChild ( camera.cam );
	
	// collect camera rendering layer
	for ( const layerName of camera.renderingLayers ) {
		if ( $app.renderingLayers.has ( layerName )  ) {
			let layer = $app.renderingLayers.get ( layerName );
			if ( layer.visible ) {
				camera.cam.addChild ( layer );
			}
		}
	}
	
	// rendering camera result
	Graphics.render ( $app.stage, camera.renderTexture, this.renderTarget );

	// clear
	camera.cam.removeChildren ();
}

// render final result
this.renderSprite.removeChildren ();
for ( const camera of this.cameraComponents ) {
	this.renderSprite.addChild ( camera.renderSprite );
}
renderer.render ( this.renderSprite, null, true );

May be frequent use of removeChildren / addChild affects rendering performance??

I use the ECS architecture to implement the game, You can find the code for the RenderingSystem class here: js/ecs/systems/rendering_system.js.

Another guess might be that I did not use the pixijs / pixi-tilemap library correctly.?

see here: https://lihaochen910.github.io/RPGMakerProject/

code is here: https://github.com/lihaochen910/RPGMakerProject

[ivan.popelyshev]

Hi!

This subforum has many threads related to tilemap, just search for them. I dont feel well and cant make a new post about it  

Basically you need both good high-level algo and good low-level implementation. There are variants for both.

Your choice of renderTexture caching depends on size of the map. Just "30FPS" is not enough for debugging, need more info. Profile it with devtools and https://spector.babylonjs.com/

Welcome to the forums!

Edited February 7, 2020 by ivan.popelyshev

[Kanbaru]

Thanks for your reply,

I tried using SpectorJS to debug rendering performance and found that it took a long time to call the gl.texSubImage2D method.

The call stack is as follows:

• 0: _hackSubImage (TileRenderer.ts)
• 1: TileRenderer.bindTextures
• 2: RectTileLayer.renderWebGLCore
• 3: TileLayer.CompositeRectTileLayer.renderWebGL

 

[ivan.popelyshev]

oh, well, adjust the constants: https://github.com/pixijs/pixi-tilemap/blob/master/src/Constant.ts

Explanation is here: https://github.com/pixijs/pixi-tilemap#multi-texture-configuration-important

In v4 default mode was RMMV - tilemap is creating 4 textures by 2048 , each holds 4 subtextures of 1024 that you submit. Its bad because those texture are GLOBAL and if you have two tilemaps, or one tilemap that changes textures every frame - they will re-upload textures every tick.

You can configure constants to switch it off and use 16 textures directly, without re-uploading:

PIXI.tilemap.Constant.boundCountPerBuffer = 1;
PIXI.tilemap.Constant.maxTextures = 16;

For pixi-v5 that is default configuration.

The whole problem existed only because there are devices that support only 4 or 8 texture locations. Fortunately, now all devices support 16.

Edited February 8, 2020 by ivan.popelyshev

[Kanbaru]

nice! it works well.

thank you for your help.