Three.js: Comparing the Process of Updating Geometries with Replacing Them

Question

Three.js: Comparing the Process of Updating Geometries with Replacing Them

In my current project, I have a complex scene filled with objects created using the ExtrudeGeometry method. These objects need to be updated every frame, with the extrusion shape and amount constantly changing. The shapes are generated using d3's voronoi algorithm.

If you want to see an example, check out this link.

Currently, I am redrawing every object in the scene each frame by removing and recreating them. This process is very resource-intensive and is leading to performance issues. I'm wondering if there is a way to edit the meshes/geometry directly instead of removing and recreating them. Would this approach improve performance? Are there more efficient methods for updating the scene without sacrificing performance?

The key requirement is the ability to adjust both the extrusion shape and amount dynamically.

Thank you for your help!

javascript performance three.js

Answer 1

Answer №1

If you want to keep the number of faces the same, morph targets are the way to go. Check out this link for more information:

Here's what you need to do:

Start by creating your geometry
Clone the geometry and make any necessary modifications, like adjusting the maximum length of a pillar
Set both geometries as morph targets to your base geometry. Here's an example:

baseGeo.morphTargets.push( { name: "targetName", vertices: [ modifiedVertexArray ] } );

Once that's done, you can animate the mesh by using mesh.updateMorphTargets()

For more details, visit:

Answer 2

If you want to keep the number of faces the same, morph targets are the way to go. Check out this link for more information:

Here's what you need to do:

Start by creating your geometry
Clone the geometry and make any necessary modifications, like adjusting the maximum length of a pillar
Set both geometries as morph targets to your base geometry. Here's an example:

baseGeo.morphTargets.push( { name: "targetName", vertices: [ modifiedVertexArray ] } );

Once that's done, you can animate the mesh by using mesh.updateMorphTargets()

For more details, visit:

Answer 3

Answer №2

After experimenting, I found a way to optimize performance by avoiding redrawing the scene each time.

http://jsfiddle.net/x00xsdrt/4/

Here's the technique I used:

Created a "template geometry" with ExtrudeGeometry using a dummy 10 sided polygon.
Created multiple "points", each assigned with one of these template geometries.
During each frame, looped through each geometry, updating every vertex to match the new one (via the voronoi algorithm).
If there are excess vertices, grouped them together into a single point. (refer to http://github.com/mrdoob/three.js/wiki/Updates.)

Reflecting on it now, the process appears quite straightforward. Initially, manipulating each vertex seemed daunting, but with simple shapes, it's actually manageable!

For the iteration, polycColumn is a simple 2 item array with the same polygon in both items:

// Set the vertex index
var v = 0;

// Loop over both top and bottom of poly
for (var p=0;p<polyColumn.length;p++) {

    // Iterate over half the vertices
    for (var j=0;j<verts.length/2;j++) {

        // Determine z-index based on top/bottom
        if (p == 1) {
            var z = point.extrudeAmount;
        } else {
            var z = 0;
        }

        // Handle legitimate verts
        if (j < poly.length) {

            verts[v].x = poly[j][0];
            verts[v].y = poly[j][1];
            verts[v].z = z;

        // For extra verts, group them at the same position
        } else {

            verts[v].x = verts[v - 1].x;
            verts[v].y = verts[v - 1].y;
            verts[v].z = z;
        }

        v++;
    }
}

point.mesh.geometry.verticesNeedUpdate = true;

Answer 4

After experimenting, I found a way to optimize performance by avoiding redrawing the scene each time.

http://jsfiddle.net/x00xsdrt/4/

Here's the technique I used:

Created a "template geometry" with ExtrudeGeometry using a dummy 10 sided polygon.
Created multiple "points", each assigned with one of these template geometries.
During each frame, looped through each geometry, updating every vertex to match the new one (via the voronoi algorithm).
If there are excess vertices, grouped them together into a single point. (refer to http://github.com/mrdoob/three.js/wiki/Updates.)

Reflecting on it now, the process appears quite straightforward. Initially, manipulating each vertex seemed daunting, but with simple shapes, it's actually manageable!

For the iteration, polycColumn is a simple 2 item array with the same polygon in both items:

// Set the vertex index
var v = 0;

// Loop over both top and bottom of poly
for (var p=0;p<polyColumn.length;p++) {

    // Iterate over half the vertices
    for (var j=0;j<verts.length/2;j++) {

        // Determine z-index based on top/bottom
        if (p == 1) {
            var z = point.extrudeAmount;
        } else {
            var z = 0;
        }

        // Handle legitimate verts
        if (j < poly.length) {

            verts[v].x = poly[j][0];
            verts[v].y = poly[j][1];
            verts[v].z = z;

        // For extra verts, group them at the same position
        } else {

            verts[v].x = verts[v - 1].x;
            verts[v].y = verts[v - 1].y;
            verts[v].z = z;
        }

        v++;
    }
}

point.mesh.geometry.verticesNeedUpdate = true;

Three.js: Comparing the Process of Updating Geometries with Replacing Them

Answer №1

Answer №2

Similar questions

The pure JavaScript function for changing the background color in CSS is not functioning properly

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Border becomes dashed when dragging and dropping

The functionality of the webservice is not functioning properly

Troubleshooting Cordova's ng-route functionality issue

The body content of the webpage needs to be updated without altering the header and footer, all while avoiding a page

Discover the capability to choose dates from different months using the DatePicker component from @material-ui/pickers

Is there a way to initiate the server only after webpack has finished bundling all of the bundles

Unable to automatically prompt the button inside the iframe

Sending information back to the server without causing a postback, all while remaining unseen

Implementing Ionic 4 with HTML2Canvas technology

Handling mousewheel events for child elements and their parent element

Handling memory in javascript jquery mobile using phonegap

Terminate the rethinkdb data stream

Can Google Charts be integrated with $refs in VueJS?

Can the GPGPU water example be adapted to work with planes of varying shapes, such as rectangles or boomerangs?

Selecting objects in Three.js using the camera but without using the mouse

Using Middleware to Access LocaleStorage in Universal Mode

Determining the distance between points in an STL file with three.js

React frontend encountered a connectivity issue while trying to establish a network connection