Technics to render a LOT of tiles

[tedex]

So...

I'm playing around with pixi-tilemap and so ar it was the best performance implementation to render tiles 48x48. Unfortunately, when I implemented zoom support for the map I started dealing with something like 70k+ tiles for the screen (1920x1080 screen with stage.scale 0.1). And we're talking just one layer.

I've read alot about this idea but I would like to hear what you all have to say and suggest, and maybe some examples.

Relevant reads I've already looked
- http://gamedev.stackexchange.com/questions/15612/howd-they-do-it-millions-of-tiles-in-terraria
- http://evilmousestudios.com/optimizing-javascript-games/
- http://www.html5gamedevs.com/topic/6901-large-tile-maps/
- http://www.html5gamedevs.com/topic/16001-how-should-i-render-a-tile-map/

I know its retarded to render everything over and over again, juts want some help to point me to the right direction.

I also tryed to add chunk support for the update function, trying to make a chunk texture so I would not need to loop through all of tiles once they have already been genereated (procedurally). Unfortunately, my implementation was garbage and I was not able to make it work.

So far, I have sothing like this for the draw

/* Not tested, exemplifying */
var stage = new DisplayObjectContainer();
var map = new DisplayObjectContainer();
var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true);

stage.scale.set(0.1);

for(var y = 0; y < 500; y++) {
	for(var x = 0; x < 500; x++) {
		tilemap.addFrame(noisedTexture, x*48, y*48 );
	}
}

map.addChild(tilemap);

 

[Fatalist]

Besides those 70K, do you have lots of invisible tiles outside the viewport? You need to cull them somehow.  pixi-tilemap does that probably.

I made a test with ParticleContainer and it can render that many tiles at 60fps on my PC. If your tilemap is static, it can handle much more. 2 things that doubled the speed: disabling antialiasing of the renderer and enabling mipmaps on the texture atlas.

Another approach to render lots of (millions) tiles - http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html 

 

[tedex]

First of all, thanks for the reply! :3

Yes, I implemented culling myself, but i'm pretty sure pixi-tilemap does that too, disabling everything out of the render viewport.

I tested ParticleContainer with sprites too, it was worst then pixitilemap implementation.

I didn't knew about "enabling mipmaps" for texture atlas, I'll check those out. For now, how can I do that? I also will try disabling antialiasing and report the difference.
 

PS: Thanks for the link, I'll read asap

[Exca]

Mipmaps will be enabled automatically if your texture resolution is in power of two.

[Edit] Not 100% sure if this is the case with pixi tilemap. One way to make sure is to  set the basetexture.mipmap = true.

[Fatalist]

43 minutes ago, tedex said:

I tested ParticleContainer with sprites too, it was worst then pixitilemap implementation.

I could have a look at it if you upload it somewhere.

43 minutes ago, tedex said:

I didn't knew about "enabling mipmaps" for texture atlas, I'll check those out. For now, how can I do that?

 

38 minutes ago, Exca said:

Mipmaps will be enabled automatically if your texture resolution is in power of two.

(assuming you're using PIXI v4).

 

43 minutes ago, tedex said:

PS: Thanks for the link, I'll read asap

No problem. That approach is not easy to implement if you're not experienced with webgl though.

 

[tedex]

Wow. Disabled antialiasing, I'm rendering 1kk+ tiles at 60fps. Wat.

Looked the mipmap at the textures too, it was already enabled.

@Fatalist @Exca
Yes, i'm using pixi v4. I'll try some more technics and read the link you posted. For now I think my question was answered, rendering 1m+ tiles at 60fps is pretty damn cool, dont think I'll ever get close to this at a real project. Thanks alot!

[Fatalist]

No problem, good luck!