javascript - 三.JS:根据不同的tilesets渲染大 map (Texture Atlas)

Question

简介:

我使用 Three.JS(v95，WebGL 渲染器)渲染等距 map 。该 map 包括许多不同的图形瓦片集。我通过 TextureAtlasLoader 获取特定的图 block ，它的位置来自 JSON。它看起来像这样:

问题是我渲染的图 block 越多，它的执行速度就越慢(我需要在一张 map 上渲染大约 120,000 个图 block )。那时我几乎不能移动相机。我知道有几种比将每个图 block 作为 Sprite 添加到场景中更好的方法。但我不知何故被困住了。

当前从代码中提取的用于创建图 block 的代码(在循环中):

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)

我也尝试将其渲染为 Mesh，这也可以，但性能是一样的(当然):

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);

网络中可能的解决方案:

我知道我不能在一个场景中添加那么多的 Sprite 或网格，我尝试了不同的方法并查看了示例，在这些示例中效果完美，但我无法将他们的方法应用到我的代码中。我 map 上的每个图 block 都有不同的纹理，并且有自己的位置。

官方 three.js 文档中有一个示例:它们使用 PointsMaterial 和 Points。最后他们只在场景中添加了 5 个点，其中包括大约 10000 个“顶点/图像”。文档:https://threejs.org/examples/#webgl_points_sprites

另一种方法可以在 github 上找到:https://github.com/YaleDHLab/pix-plot他们创建了 5 个网格，每个网格包含大约 4096 个“瓷砖”，他们用面、顶点等构建这些瓷砖。

最后一个问题:

我的问题是，如何才能使 map 的性能更高？将我的代码更改为可能的解决方案之一，我只是受到了过度挑战。

Answer 1

我认为 Sergiu Paraschiv 走在正确的轨道上。尝试将渲染分成 block 。此处概述了此策略和其他策略:Tilemap Performance .根据地形的动态程度，这些 block 可能更大或更小。这样你只需要重新渲染已经改变的 block 。假设你的地形没有改变，你可以将整个地形渲染成一个纹理，然后你只需要每帧渲染一个纹理，而不是一大堆纹理。在 rendering to a texture 上查看本教程，它应该让您了解从哪里开始渲染 block 。