Introduction:
In my current project, I am using Three.JS (v95, WebGL Renderer) to render an isometric map that consists of various graphic tilesets. The specific tile is obtained through a TextureAtlasLoader and its position from a JSON file. Here's an example of what the map looks like: https://i.sstatic.net/Jbh2X.png
However, as I add more tiles to the map (approximately 120,000 tiles), the performance decreases significantly. Moving the camera becomes sluggish and challenging. While I understand that there are better approaches than adding each tile as a sprite to the scene, I'm struggling to implement them effectively.
Here is an excerpt from the code used to create the tiles within 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've also attempted rendering the tiles as Mesh, but it hasn't improved performance:
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 explored:
I've discovered that adding numerous sprites or meshes to a scene negatively impacts performance. Despite trying different methods and studying examples where similar scenarios work smoothly, I haven't been able to adapt those approaches to my own code. Each tile on my map has a unique texture and position.
An example in the official three.js documentation showcases the use of PointsMaterial and Points, reducing the number of rendered elements significantly while maintaining visual integrity. They only add 5 points to the scene, which represent around 10,000 "vertices/images". Documentation link:
Another approach can be found on GitHub at https://github.com/YaleDHLab/pix-plot. In this project, they construct 5 meshes, each containing roughly 4,096 "tiles" built with Faces, Vertices, etc.
Final question:
My main concern revolves around improving the performance of rendering my map. I find myself overwhelmed by the task of implementing one of the potential solutions suggested above. How can I tackle this challenge efficiently?