Three.JS：基于不同的图块渲染大型地图（纹理图集）

Question

简介：

我使用Three.JS（v95，WebGL Renderer）渲染等轴测图。该地图包括许多不同的图形图块集。我通过TextureAtlasLoader获取了特定的图块，它是通过JSON定位的。看起来像这样：

问题是，我渲染的图块越多，它的执行速度就越慢（我需要在一张地图上渲染约120'000个图块）。那我几乎不能移动相机。我知道有几种比将每个图块作为精灵添加到场景更好的方法。但是我被卡住了。

当前从代码中提取的内容以创建图块（处于循环状态）：

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)

我也尝试将其渲染为网格，也可以使用，但是性能相同（当然）：

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

网络上可能的解决方案：

我知道我无法在一个场景中添加如此多的精灵或网格物体，并且我尝试了不同的方法并查看了可以完美运行的示例，但是我无法根据我的代码调整它们的方法。我地图上的每个图块都具有不同的纹理，并且具有自己的位置。

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

可以在github上找到另一种方法：https://github.com/YaleDHLab/pix-plot 他们创建了5个网格，每个网格包含大约4096个“平铺”，并使用Faces，Vertices等进行构建。

最终问题：

我的问题是，如何使地图的性能更高？我只是将代码更改为可能的解决方案之一而感到挑战。

Answer 1

我认为Sergiu Paraschiv处在正确的轨道上。尝试将渲染分成多个块。此处概述了此策略和其他策略：Tilemap Performance。根据地形的动态程度，这些块可能更大或更小。这样，您只需要重新渲染已更改的块即可。假设您的地形不变，则可以将整个地形渲染为一个纹理，然后只需要每帧渲染一个纹理，而不是一个庞大的数组。看一下rendering to a texture上的本教程，它应该使您了解从何处开始渲染块。