Combining two geometries with indexes into a BufferGeometry

Question

Combining two geometries with indexes into a BufferGeometry

Currently, I am utilizing a fixed set of data that contains indices, vertices, and colors, along with multiple instances of THREE.Geometry to populate a scene with objects. This process is quite slow, as it involves adding and removing numerous objects at once or merging them together.

However, by employing a single THREE.BufferGeometry, I can leverage _gl.bufferSubData to add and remove objects, which should ideally have minimal impact on performance.

The challenge I am facing lies in implementing this solution. While I have successfully implemented the bufferSubData function, I am struggling to incorporate two sets of data within the same BufferGeometry. It seems that the data does not seamlessly flow into each other (due to being separate objects), resulting in both sets using the same indices. You can observe the outcome in this image.

I have created a JSFiddle that contains an array named section with the chunk data. If anyone could review it and modify it to incorporate both sets of data, it would be highly appreciated:

http://jsfiddle.net/dUqwT/

Additionally, I have been unable to discern the purpose of the index offset. If someone could provide a link or explanation regarding its usage, it would be immensely beneficial.

Thank you for the assistance!

javascript three.js geometry webgl

Answer 1

Answer №1

After figuring out the process, I have made some changes to the JSFiddle link:
http://jsfiddle.net/dUqwT/1/

The solution turned out to be simpler than expected, and it was not related to the index offset (still unsure about its purpose). The key was to ensure that each array appends correctly to avoid overwriting positions, indices, and colors. This was achieved by using two variables set to the appropriate lengths.

Considering that the objects added to the BufferGeometry will be dynamic, I plan to allocate a specific portion of the buffer to each object instead of setting two variables to the length. This approach will allow for removal and modification of each object using _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;
}

Answer 2

After figuring out the process, I have made some changes to the JSFiddle link:
http://jsfiddle.net/dUqwT/1/

The solution turned out to be simpler than expected, and it was not related to the index offset (still unsure about its purpose). The key was to ensure that each array appends correctly to avoid overwriting positions, indices, and colors. This was achieved by using two variables set to the appropriate lengths.

Considering that the objects added to the BufferGeometry will be dynamic, I plan to allocate a specific portion of the buffer to each object instead of setting two variables to the length. This approach will allow for removal and modification of each object using _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;
}

Combining two geometries with indexes into a BufferGeometry

Answer №1

Similar questions

Retrieve all elements from an array using jQuery

Issue with grunt-closure-tools: ERROR - There is a parse error due to using a reserved word as an

Parsing JSON data received through a URL using Ruby

Dividing the JSON dataset into smaller segments

Interactive calendar feature displaying events upon hovering over a date

The hidden textbox loses its value when submitting

Tips for including an external babel JS (ES6) file in an HTML document:

What is the method for utilizing Jquery to target the width value of an inline property?

Testing Vue watcher that observes a computed property in VueX: Tips and Tricks

Mistakes in validating email form

Difficulty in sharing cookies among subdomains

What is the reason for this JavaScript code not activating the input field (aspx)?

What is causing an empty box to appear due to padding? Is there a way to conceal it

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

Trigger an alert when a button is clicked and redirect the user to an newly opened tab

Ways to soften a section of a canvas component?

Understanding how flex-wrap property works in flexbox is essential for creating

Show an SVG overlay when hovering over an image

Conquering disparities in standards mode with Javascript

Prop validation error: prop type mismatch occurred