有效地连接大型连续生成的阵列

Question

我将许多长数组（80个数组，每个80,000个元素，最终更多）组合成几个单独的数组（每个数组包含1,600,000个元素），作为属性在Three.js BufferGeometry中上传。我努力让这个过程足够高效，不会冻结浏览器。我已经过了那一点，但它仍然很缓慢。有没有什么方法可以加快这一点 - 我应该考虑优化？我尝试使用push.apply，这大大加快了这个过程，但最终超出了调用堆栈。我目前正在使用concat，但是想知道是否将流程转换为字符串或其他数据结构，然后再返回可能会有所帮助？其他想法？我听见了。

以下是有问题的代码块：

var motifMinBufferSize = 80000;

function setMinimumBufferSize( pointCloudAttributeArray, itemSize, fillValue ) {
    // buffers cannot be resized once they've been sent to the graphics card, so I am emulating resizing by setting a minimum buffer size that exceeds the number of vertex positions in the largest known point cloud.
    supplementalArray.fill( fillValue );
    var fullArray = pointCloudAttributeArray.concat( supplementalArray );
    return fullArray;
}


function flattenVertexArray( array ) {
    var flattenedArray = [];
    for ( var i = 0; i < array.length; i++ ) {
        flattenedArray.push( array[i].x, array[i].y, array[i].z );
    }
    return flattenedArray;
}


function concatArrays( gridArray, motifArray ) {
    var newGridArray = [];
    newGridArray = gridArray.concat( motifArray );
    return newGridArray;
}


function compileGridOfPointCloudAttributes( ... ) {

    ...code to compile the attributes for a BufferGeometry representing a grid of point clouds...
    // Skipping ahead in the function:
    for ( var i = 0; i < 80; i++ ) {
        ...
        // I have 8 of these attributes that gradually accumulate representing 80,000 values each for 80 different particle clouds:
            var position = flattenVertexArray( motif.position );
            var aGridPosition = flattenVertexArray ( motif.aGridPosition );

            pointCloudGridAttributes.aPointCloudIDPerVertex = concatArrays( pointCloudGridAttributes.aMotifIDPerVertex, setMinimumBufferSize( motif.aPointCloudIDPerVertex, 1, 0 ) );
            pointCloudGridAttributes.position = concatArrays( pointCloudGridAttributes.position, setMinimumBufferSize( position, 3, gridDimensions.gridWidth ) );
            pointCloudGridAttributes.aGridPosition = concatArrays( pointCloudAttributes.aGridPosition, setMinimumBufferSize( motif.aGridPosition, 1, 0 ) );
        ...continue like this for 5 more attributes...
    }
}

上下文 我正在使用由80个左右的粒子云组成的Three.js进行可视化，每个粒子云都有一个独特的点数（每个云点数超过50,000个点），并且所有点都组成一个BufferGeometry以进行高效渲染。我定期将点云替换为另一个，但了解到缓冲区几何中的缓冲区一旦实现就无法调整大小，所以我现在有一个固定的，超大的阵列专用于每个点云。