5

Introduction:

I render an isometric map with Three.JS (v95, WebGL Renderer). The map includes many different graphic tilesets. I get the specific tile via a TextureAtlasLoader and it’s position from a JSON. It looks like this:

View of the map

The problem is that it performs really slow the more tiles I render (I need to render about 120’000 tiles on one map). I can barely move the camera then. I know there are several better approaches than adding every single tile as sprite to the scene. But I’m stuck somehow.

Current extract from the code to create the tiles (it’s in a loop):

var ts_tile = Map.Imagesets[ims].Map.getTexture((bg_left / tw), (bg_top / th));
var material = new THREE.SpriteMaterial({ map: ts_tile, color: 0xffffff, fog: false });
var sprite = new THREE.Sprite(material);
sprite.position.set(pos_left, -top, 0);
sprite.scale.set(tw, th, 1);

scene.add(sprite)

I also tried to render it as a Mesh, which also works, but the performance is the same (of course):

var material = new THREE.MeshBasicMaterial({ map: ts_tile, color: 0xffffff, transparent: true, depthWrite: false });
var geo = new THREE.PlaneGeometry(1, 1, 1);
var sprite = new THREE.Mesh(new THREE.BufferGeometry().fromGeometry(geo), material);

possible solutions in the web:

I know that I can’t add so many sprites or meshes to a scene and I have tried different things and looked at examples, where it works flawless, but I can’t adapt their approaches to my code. Every tile on my map has a different texture and has it’s own position.

There is an example in the official three.js docs: They work with PointsMaterial and Points. In the end they only add 5 Points to the scene, which includes about 10000 “vertices / Images”. docs: https://threejs.org/examples/#webgl_points_sprites

Another approach can be found here on github: https://github.com/YaleDHLab/pix-plot They create 5 meshes, every mesh includes around 4096 “tiles”, which they build up with Faces, Vertices, etc.

Final question:

My question is, how can I render my map more performant? I’m simply overchallenged by changing my code into one of the possible solutions.

6
  • Does this map need to be necessarily rendered this way? Can't you pre-process the data and generate a 2D tile set (like Google Maps for example) and then display a matrix of those? Commented Sep 6, 2018 at 11:20
  • If I understand you right: I think they pre-process the data and render it like a tile set (in Meshes?) in the possible solutions? Even now I only change the position of the camera in requsetAnimationFrame without accessing the data. But this is where the slow part appears, because there are so many tiles added to the scene.
    – Bluesight
    Commented Sep 6, 2018 at 11:27
  • Yes, that's the idea. Instead of rendering a lot of smaller tiles you combine / pre-render them in larger tiles. It could really be a single large image that you move around, but of course you'd end up with a single huge image, so instead you can split that up into smaller slices. If zoom is a feature you need you'd also need to generate different tile sets for each zoom level. If then you for example would need to render "interactive" elements you'd do it on top of these 2D tiles just like you do now. Trees for example if they are sparse enough. Commented Sep 6, 2018 at 11:29
  • And this is exactly where I fail, I don't know how to accomplish this. I could achieve it with a simple 2d - canvas (which is too slow anyway), but I really like to use the advantages of WebGL with Three.JS.
    – Bluesight
    Commented Sep 6, 2018 at 11:33
  • Your problem is that your scene has too many sprites, each with it's own material. The only solution is to reduce the number of sprites. But your implementation is limited by the sprite materials themselves, which are one image for each tile. My suggestion is to write code that combines sets of tile images into larger "pre-rendered" images that cover 10 x 10 tiles for example, so then you'd have 10% of your original number of sprites. How you generate these combined 10 x 10 sprites is up to you, but you don't need to do it on the fly, thus "pre-render". Commented Sep 6, 2018 at 11:39

1 Answer 1

0

I think Sergiu Paraschiv is on the right track. Try to split your rendering into chunks. This strategy and others are outlined here: Tilemap Performance. Depending on how dynamic your terrain is, these chunks could be bigger or smaller. This way you only have to re-render chunks that have changed. Assuming your terrain doesn't change, you can render the whole terrain to a texture and then you only have to render a single texture per frame, rather than a huge array of them. Take a look at this tutorial on rendering to a texture, it should give you an idea on where to start with rendering your chunks.

5
  • 1
    Yeah, I once did this approach, when I rendered the entire map onto a 2d canvas. I will try to reduce the amount of tiles for the underlaying ground. There will be more tiles which I need to render separtely (Buildings, Trees, etc.). I will post my attempt later!
    – Bluesight
    Commented Sep 11, 2018 at 6:27
  • Hey @Bluesight, just wanted to follow up. What approach did you end up taking?
    – Sparky
    Commented Sep 28, 2018 at 14:29
  • 1
    Thanks for asking, to be honest, I tried to render them in langer chunks and there were some improvements in performance. Unfortunately I won't continue to follow this approach, because we now have decided to switch to Unity and do our game in 3d (All our rendered graphics are actually Models made in Blender). Thanks anyway for your support.
    – Bluesight
    Commented Oct 5, 2018 at 7:26
  • No worries! Sorry I couldn't be more help. Anywhere I can follow development on this? It looks like a neat project!
    – Sparky
    Commented Oct 11, 2018 at 15:48
  • No problem :) Have a look at nemos-inis.de/suite/index.php?nemos. We are also on Facebook. Unfortunately most posts are in german, but we will publish the game in english and german.
    – Bluesight
    Commented Oct 12, 2018 at 6:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.