Indexing THREE.JS+；Delaunator.JS保持面索引

这个问题可能是针对Mapbox团队和Delaunator.JS开发人员的，但我希望有人能在这里帮助我

我有一个伪四叉树几何体（THREE.BufferGeometry），由一系列点设置，这些点有七个分区，分别具有各自的绘图调用（geometry.addGroup（）方法）和材质

GLSL交叉口

如果计划以后再次单独渲染网格，为什么要通过delaunay运行网格？在四边形之间的过渡边界处，如果最终共享的点以不同的顶点属性（在本例中为UV）开始，您希望发生什么？我不打算在以后单独渲染它们。这将只是一个单一的几何体，但是我必须使用多个绘制调用来处理60多个纹理（1024x1024）。您还没有回答关于过渡边界的问题——瓷砖之间的过渡应该发生什么？这在很大程度上改变了复杂性。为什么要通过delaunay重新调整角度，而不是将所有原始四边形放在一个网格中？是隐藏几何接缝吗？是的，你完全正确，delaunay消除了瓷砖之间的裂缝，因为它们具有不同的高程“分辨率”，除此之外，处理后的几何图形看起来更好（更平滑）。我已经完成了按质心和分区边界对三角形排序的后处理代码。它工作得很好，但是，虽然我需要快速优化的代码，但我正在尝试修改Delaunay.JS以合并这种排序，从而避免额外的循环。您所需要的只是按其父分区边界对三角形进行双重排序，并从左>右和上>下在其托管平铺内进行排序。[非均匀斑块地形，图7]

//pseudo quadtree
var points = [], indices = [], quad_uvs = [], groups = [], materials = [];
getSegmentSubpoints(0, new THREE.Vector3(-1024, 0, -1024), 1024, 1024, 4);
getSegmentSubpoints(1, new THREE.Vector3(0, 0, -1024), 1024, 1024, 4);
getSegmentSubpoints(2, new THREE.Vector3(-1024, 0, 0), 1024, 1024, 4);
 
getSegmentSubpoints(3, new THREE.Vector3(0, 0, 0), 512, 512, 8);
getSegmentSubpoints(4, new THREE.Vector3(512, 0, 0), 512, 512, 8);
getSegmentSubpoints(5, new THREE.Vector3(0, 0, 512), 512, 512, 8);
getSegmentSubpoints(6, new THREE.Vector3(512, 0, 512), 512, 512, 8);
  
var geometry = new THREE.BufferGeometry().setFromPoints(points);
    
geometry.setIndex(indices);
    
geometry.setAttribute( 'uv', new THREE.BufferAttribute(new Float32Array(quad_uvs), 2 ) );
geometry.computeVertexNormals();
    
var colors = [new THREE.Color(0xe6194b), new THREE.Color(0x3cb44b), new THREE.Color(0xffe119), new THREE.Color(0x4363d8), new THREE.Color(0xf58231), new THREE.Color(0x911eb4), new THREE.Color(0x46f0f0) ]
groups.forEach(function(g_, i_){ geometry.addGroup(g_.start, g_.end, g_.id); });
    
var plane = new THREE.Mesh(geometry, materials);
plane.rotation.set(Math.PI, 0, 0);
plane.position.set(-1152, 0, 0);
scene.add(plane);

function getSegmentSubpoints(id_, lt_, w_, h_, level_){
    
    var subpoints = [];
    var subindices = [];
    var subquad = [];
    var lastIndex = points.length;
    var lastIndex2 = indices.length;
    
    var step = {x: w_ / level_, z: h_ / level_ };
    var stepT = {x: 1.0 / level_, z: 1.0 / level_ };
    
    for(var z = 0; z <= level_; z++){
        for(var x = 0; x <= level_; x++){
            
            var dx = lt_.x + step.x * x;
            var dz = lt_.z + step.z * z;
            var dy = noise.simplex2(dx / 512.0, dz / 512.0) * 32.0;
            
            subquad.push(...[stepT.x * x, stepT.z * z]);
            subpoints.push(new THREE.Vector3(dx, dy, dz));
        }
    }
    
    for(var i = 0; i < subpoints.length - level_ - 2; i++) {
        
        if(i % (level_ + 1) != (level_)){
        subindices.push(lastIndex + i, lastIndex + i + 1, lastIndex + i + level_ + 2, lastIndex + i + level_ + 2, lastIndex + i + level_ + 1, lastIndex + i);
        }
        
    }
   
    points.push(...subpoints);
    indices.push(...subindices);
    quad_uvs.push(...subquad);
    groups.push({id: id_, start: lastIndex2, end: subindices.length});
    materials.push(new THREE.MeshBasicMaterial({ wireframe: true, map: new THREE.TextureLoader().load("textures/" + id_ + ".jpg")}));
    
}

//delaunay
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var indexDelaunay = Delaunator.from(points.map(v => { return [v.x, v.z]; }) );
var meshIndex = [];
for (let i = 0; i < indexDelaunay.triangles.length; i++){ meshIndex.push(indexDelaunay.triangles[i]); }

geometry.setIndex(meshIndex);
geometry.computeVertexNormals();
    
count = 0;
    
for(var i = 0; i < meshIndex.length; i += 6){
    
    geometry.addGroup(i, 6, i / 6);
    materials.push(new THREE.MeshBasicMaterial({ wireframe: true, color: new THREE.Color("hsl(" + (360 / 316 * count) + ",80%, 80%)")}))
    count++;
    
}
      
var plane = new THREE.Mesh(geometry, materials);
plane.rotation.set(Math.PI, 0, 0)
plane.position.set(1152, 0, 0); 
scene.add(plane);