画一个立方体一百万次

Question

我需要使用一个尺寸为 1x1x1 的立方体构建地形，坐标在 .txt 文件中提供，大约有 1100 万个三元组。

问题是，使用我当前的代码我只能绘制大约 60k 个，然后浏览器选项卡被重置，并提示停止无响应的脚本，所以我使用了太多的内存和时间来生成它们。

这是我用来绘制它们的代码块：

function generateCubes(data) {
    var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
    var material = new THREE.MeshLambertMaterial({color: 0x587058});
    var mesh = new THREE.Mesh(cubeGeometry, material);
    var mergedGeo = new THREE.Geometry();
    var instance;
    var line = data[0].split(';');
    var translateX = line[0], translateY = line[1], translateZ = line[2];
    //var group = new THREE.Object3d();
    for(var i = 0; i < 100000; i++) { // should go to data.length
        line = data[i].split(';');
        //instance = mesh.clone();
        //instance.position.set(line[0] - translateX, line[2] - translateZ, line[1] - translateY);
        //group.add(instance);
        mesh.position.x = Number(line[0]) - translateX;
        mesh.position.y = Math.round(Number(line[2]) - translateZ);
        mesh.position.z = Number(line[1]) - translateY;
        mesh.updateMatrix();
        mergedGeo.merge(instance.geometry, instance.matrix);
    }
    group = new THREE.Mesh(mergedGeo, material);
    scene.add(group);
}

在 $.ajax 调用中成功调用该函数。

注释部分在没有合并几何的情况下使用，这样我可以绘制大约 100k 的数据。

谢谢你帮助我。

编辑：我看到了this question，但对我没有多大帮助。

Answer 1

您正在寻找的是体素渲染。实现此目的的两个主要渲染路径： A) 体积渲染，但 webgl 缺乏硬件 3d 纹理支持。 B) 网格表面生成和标准多边形渲染。可能是您唯一的选择。不要认为公开有什么好的高效 js 实现。

你需要做什么。

1. 把你的世界分成相同维度的块，块 尺寸可能需要是 2 的幂以允许更快 对它们进行操作。

2. 想出一个可以存储 11M 体素数据的数据结构。 这可能需要在 Int32Arrays 的某种排列中并使用 按位运算符访问/存储每个体素上的数据。

3. 为每个块生成表面网格。见link。

4. 对于远离相机的区块，想出一些方案 可以生成低 LOD 的网格（可选）。
5. 从前到后渲染可见截头体中的所有块 订购。