Fast Pixi Tilemap Renderer trying to fix

[Stephan_H]

I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. 
I am using the pixi-tilemap library to  create a fast & simple renderer to render a dynamic tilemap.

The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function  .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added.
The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial 

[ivan.popelyshev]

I will look at it today or tomorrow, but there's something i can mention right now : 

I'm working on new tutorial , https://github.com/ivanpopelyshev/pixi-starfighter , and it has a tilemap based on v5 graphics. You can use the same algorithm for pixi-tilemap. In fact im gonna use the same algo for pixi-tilemap v5 tutorial when I start it.

You already have something like that but I'm not sure that everything is correct. For example, im not sure about "tileset.position.set(startCol,startRow);" maybe you need *scale there

[ivan.popelyshev]

Two more ideas not related:

requestAnimationFrame is the same as "app.ticker.add()" , and I recommend to read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , it applies both to v4 and v5.

Here's your demo on pixi-playground: https://www.pixiplayground.com/#/edit/BWlwUnkwKmNnqV4we9ch5 
Please make it work so i can fix your bugs   You can take this tileset if you want:  http://ivanpopelyshev.github.io/bombermine-shuffle/img/tileset.png

[Stephan_H]

Hi Ivan, Thank you for your reply.
I was able to solve my issue almost. The bug was that drawn pixtures were not cleared.
Alan could add that at drawTiles() before drawing: tilemap.clear();

Still the renderer seems to jump every draw time. Somehow the PIXI playground seems not to save my code. That's why I opened a githubg page: 
I can't use a tileset.png as I don't know how to use that correctly. A Json file seems to be easier.

After that I will add a scale and a movement function to the tilemap renderer. Ill probably publish this renderer for others later that newbies won't have to waste too much time.

[Christoph]

Check this one, if all you need is static tiles. I did bench the "lookup" on very old devices some time ago (ipad2) and it was faster than batching tiles like you do.

https://codepen.io/goodboydigital/pen/vdvEmE

[ivan.popelyshev]

Thanks, I'll look when I have time. Im currently on vacation and my ability to check out examples is limited

[ivan.popelyshev]

21 hours ago, Christoph said:

Check this one, if all you need is static tiles. I did bench the "lookup" on very old devices some time ago (ipad2) and it was faster than batching tiles like you do.

https://codepen.io/goodboydigital/pen/vdvEmE

I thought its very slow on old devices because of "mod" operation inside fragment shader.

[Stephan_H]

Is there a way of changing the drawn tile size with tilemap.addFrame(png,x*size,y*size)?
For example, instead of drawing 32px*32px tiles, the t.addFrame should draw 16px*16px tiles of the original 32px*32px tiles.

[ivan.popelyshev]

no, there's no such feature per tile, however something can be done with hacks for the whole tilemap, like, set its scale to 0.5. Why? Because I traded rotations and scale for faster buffer upload. I think when I port it to v5 i'll add scale and rotations back or at least make them optional.

[Stephan_H]

When will you add that to pixi, because I could take advantage of these features

[Stephan_H]

I have updated the pixi tilemap renderer. However it seems that the the .addFrame function has some sort of limit, as it displays at a certain point only a specific amount of tiles. Ivan, can you check the renderer, if I am not wrong please.
Fully working renderer: https://github.com/StephanHQ/PIXI-Tilemap-Renderer

[ivan.popelyshev]

The limit is 16384 because indices are 16-bit. We are working on the fix for that.

I'll look after vacation, im on ibiza now and I have a big queue of things to do in pixi plugins. I'll also send you invite to pixijs team when i'll be ready to talk about that thing  Currently i'm trying to make https://github.com/pixijs/pixi.js/pull/5706 , it should help with porting pixi-projection and some other plugins.

[ivan.popelyshev]

ok, i looked at your demo, and that's a very big zoom. 500k tiles in geometry is a very heavy scene. However im working on pixi-tilemap improvements and maybe i'll add support of 500k tiles.

Thank you, I will use this demo for debug! Though I cant estimate the time, im currently under very heavy load.

[Stephan_H]

I found a new bug in PIXI-Tilemap, which is probably correlating to the tiles limitation of 16384 tiles.

This time, I am adding a feature that objects will be shown as one big image instead of seperate layed together tiles like in:https://github.com/Alan01252/pixi-tilemap-tutorial

I would like to add pictures to illustrate the problem, however this website won`t let me ? So I will briefly explain my assumption.

The problem is that not all trees are displayed, altough the renderer perceives all trees which need to be rendered.
Simply, a few trees of a dozen are displayed.
Furthermore, when moving, these trees disappear at a certain point in the middle of the screen and other trees appear in the middle of the screen. Moving forward and back, this certain point for every particular tree is unchanging.

When delaying rendering trees trough collecting all needed trees in an array and then executing rendering, more trees are displayed, but not all trees.

This brings me to the conlcusion that the limitation of the plugin PIXI-tilemap is the cause of the problem.

[ivan.popelyshev]

Pixi-tilemap has limit on number of baseTextures. I've modified the README: https://github.com/pixijs/pixi-tilemap#pixi-tilemap . It doesn't do batching, so if there are 17 textures with a limit of 16 it can do weird stuff.

Its general rule that plugins that do good performance or quality have certain limitations. Removing those limitations takes time.

[Stephan_H]

You have told that you will start upgrading Pixi-tilemap soon. Did you find time yet?

And apart from that can you explain me how to hack Pixi-tilemap to improve performance?

 

[ivan.popelyshev]

Well, since our last talk i've added an option to use separate textures and not united ones  No, pixi-tilemap for v5 is still not ready. As for performance, your case is really heavy, i have some ideas, but your ZOOM kills everything ) Need extra time to think on that, its not the only plugin im managing.

[Stephan_H]

I propose changing the way the renderer draws, as the renderer wont be able to draw more than 16k tiles per second.

My renderer draws the visible part of the map when moving which means moving every tile forward, the renderer must draw the whole map again.

I think a pc wont be able to draw all 500k tiles at once. Instead we can predraw a couple of chunks (32tilesx32tiles) sourrinding the visible part of the map. Like this ,the map appears smooth and big when moving, while the renderer works and predraws chunks at the area where the player goes to. And when zooming out, all chunks are scaled and simply moved and not drawn.

What you would need to do is

• to put the limitation way higher or completly remove it,
• make a seperate function to prepare tile/ object images (json) for universal .addFrame.
• and introduce a function for the creation and deletion of tilemaps (chunks) in which .addFrame() is used

I imagine functions like this

chunk[a] = new Pixi.tilemap();
// I know these three functions already exist
chunk[a].position.set(x,y);
// when created or a tile in this chunk changes
chunk[a].clear();
chunk[a].addFrame(tree.png,x,y,);
// when it is to far away from viewport
chunk[a].delete();

This is just a suggestion. Maybe you already have this idea.

[ivan.popelyshev]

> This is just a suggestion. Maybe you already have this idea.

Well, that's how I teach other people. Its not possible to do everything right from beginning, so evolution looks like that:

0. draw everything

1. Re-fill tilemap in whole window when camera touches the edge if "visible" zone.

2. Chunks.

3. Chunks with prefetch like in multiplayer, different distance for "NEED DRAW IT NOW" . "PUT IT IN QUEUE" and "TOO FAR, DELETE".

Congratulations for reaching chunks! My job with pixi-tilemap is to give basic element that can be used in any tilemap technique. Limitations also exist that way people try to balance low-level tilemap optimization and high-level algorithms instead of fully relying on some piece of code that I wrote

[Stephan_H]

Thank you for showing me up. 

Look, I am just trying to meet you halfway. Nowhere in your github posts were chunks mentioned, neither looks like your plugin Pixi-tilemap ready for chunks, neither is the chunks method new which you already exhibited.

As you have said, you are facing problems when zooming out which is why, I am just trying to meet you halfway.?

I would like to do a "high-level algorithms" renderer, however
yet I dont think that Pixi-Tilemap is ready for chunks, as there is an "overall 16k tiles limitation" (how should it be then possible to go beyond) and creating a tilemap can be simplified without bounding texture to it.

tileset = new PIXI.tilemap.CompositeRectTileLayer(0, PIXI.loader.resources['atlas'].texture,true);

[ivan.popelyshev]

well yeah, i mention it almost every tilemap thread here. Just not that one, because im not infallible

Actually you dont need texture for a tilelayer, you can specify empty array there, it will automatically get texture from the frames you specify there: https://github.com/pixijs/pixi-tilemap/blob/master/src/CompositeRectTileLayer.ts#L69 https://github.com/pixijs/pixi-tilemap/blob/master/src/CompositeRectTileLayer.ts#L24 . I recommend to use that setting i specified in README for your case, it turns off strange "temp renderTexture" logic.

As overall 16k - its per one tilemap. You dont need big chunks, right? 16x16 or 32x32 or even 64x64 tiles in one chunk is fine