Добавление двух индексированных геометрий в BufferGeometry

Question

На данный момент я использую набор предопределенных данных (содержащих индексы, вершины и цвета) и несколько THREE.Geometryдля добавления объектов на сцену. Как вы можете себе представить, это довольно медленно, так как требует добавления и удаления множества объектов одновременно или объединения многих вместе.

Однако, если бы я использовал один THREE.BufferGeometry это позволило бы мне использовать _gl.bufferSubData добавлять и удалять объекты и в теории должны иметь минимальное влияние на производительность.

Проблема, которую я имею, состоит в том, чтобы применить это на практике. У меня уже есть bufferSubData функция работает, однако я не могу добавить два набора данных в одну и ту же BufferGeometry. Я предполагаю, что это потому, что данные не следуют друг от друга (так как это два отдельных объекта), поэтому они используют одни и те же индексы. Это изображение показывает результат.

Я создал JSFiddle, который использует массив с именем section содержащий данные чанка. Если бы кто-нибудь мог взглянуть и изменить его так, чтобы он добавил оба набора данных, я был бы очень признателен:

http://jsfiddle.net/dUqwT/

Кроме того, мне не удалось найти цель смещения индекса. Если бы кто-то мог связать или объяснить, для чего он используется, это было бы очень полезно.

Спасибо за помощь!

Answer 1

Хорошо, разобрался, как это сделать, и я обновил JSFiddle:
http://jsfiddle.net/dUqwT/1/

Это было проще, чем я думал, и не имело никакого отношения к смещению индекса (до сих пор не знаю, что это делает). Я просто гарантировал, что он добавляется к каждому массиву правильно, чтобы позиции, индексы и цвета не перезаписывались. Сделал это, используя две переменные и установив их на соответствующую длину.

Реально, так как объекты, которые я добавляю в BufferGeometry, будут динамическими, мне нужно будет дать каждому объекту определенный объем буфера, который он может использовать вместо установки двух переменных длины. Это позволит мне затем удалить и изменить каждый объект, используя _gl.bufferSubData,

for (var chunkID = 0; chunkID < 2; chunkID++) {

    var chunkIndices = section[chunkID].indices;
    var chunkVertices = section[chunkID].vertices;
    var chunkColors = section[chunkID].colors;

    var sectionXPos = chunkID * 32;
    var sectionYPos = 0;
    var sectionZPos = 0;

    // Add indices to BufferGeometry
    for ( var i = 0; i < chunkIndices.length; i ++ ) {
        var q = chunkIndices[i];

        var j = i * 3 + iLength;

        indices[ j ]     = (q[0] + vLength / 3) % chunkSize;
        indices[ j + 1 ] = (q[1] + vLength / 3) % chunkSize;
        indices[ j + 2 ] = (q[2] + vLength / 3) % chunkSize;

    }

    // Add vertices to BufferGeometry
    for ( var i = 0; i < chunkVertices.length; i ++ ) {
        var q = chunkVertices[i];

        var j = i * 3 + vLength;

        // positions
        positions[ j ]     = q[0] + sectionXPos;
        positions[ j + 1 ] = q[1] + sectionYPos;
        positions[ j + 2 ] = q[2] + sectionZPos;

        // colors
        var hexColor = chunkColors[i / 4];
        color.set(hexColor);

        colors[ j ]     = color.r;
        colors[ j + 1 ] = color.g;
        colors[ j + 2 ] = color.b;
    }

    iLength += chunkIndices.length * 3;
    vLength += chunkVertices.length * 3;
}