Is it possible to duplicate the mesh thousands of times and animate it without causing significant performance issues

Question

Is it possible to duplicate the mesh thousands of times and animate it without causing significant performance issues

I have created a demo with numerous cubes that share the same geometry and texture:

texture  = THREE.ImageUtils.loadTexture ...
material = new THREE.MeshLambertMaterial( map: texture )
geometry = new THREE.BoxGeometry( 1, 1, 1 )

cubes = []
for i in [0..1000]
  cubes.push new THREE.Mesh geometry, material

... on each frame

for cube in cubes
  // perform actions on each cube

After generating all the cubes, I begin moving them around the screen.

Although the cubes have identical textures and sizes, the computer struggles to render them all when there are hundreds of cubes.

Is there a way to inform Three.js / WebGL that these cubes are essentially the same object, just in different positions?

I've heard about BufferGeometry and Geometry2 potentially improving performance in this scenario, but I'm unsure of the best approach to take.

Thank you

javascript 3d three.js webgl

Answer 1

Answer №1

Is there a way to inform Three.js / WebGL that all these objects are essentially the same object, just placed in different positions?

Unfortunately, there is no automatic way to optimize render calls in this scenario. It would be great if there was.

I've heard about BufferGeometry and Geometry2 potentially improving performance in this situation, but I'm unsure of the best approach to take.

The key here is that the standard THREE.Geometry class in three.js is designed for developer convenience and is not optimized for how WebGL handles data. The DirectGeometry (previously Geometry2) and BufferGeometry classes are specifically for this purpose. BufferGeometry aligns with how WebGL expects data for draw calls, utilizing typed arrays for geometry attributes. The conversion from Geometry to BufferGeometry occurs automatically when geometry.verticesNeedsUpdate is set to true.

If attributes are not modified, this conversion occurs once per geometry, which is fine since you only have one geometry. Moving to BufferGeometry won't provide further optimization since you are already using it.

The main challenge with multiple geometries is the increased number of draw calls needed for rendering. Each instance of THREE.Mesh results in a draw call, and multiple draw calls can impact performance significantly. Combining meshes or geometries into a single entity can reduce draw calls, although it may not be practical for dynamic positioning and rotation.

What you may be interested in is geometry instancing in WebGL, allowing for rendering multiple objects in a single draw call. Each instance shares a common geometry while special attributes like InstancedBufferAttribute enable unique values for each instance. This approach can streamline rendering for multiple objects.

Examples of geometry instancing can be found here:

The challenge with instancing lies in creating a custom vertex shader to handle per-instance attributes in the material. This customization is crucial for applying unique transformations to each instance during rendering.

Answer 2

Is there a way to inform Three.js / WebGL that all these objects are essentially the same object, just placed in different positions?

Unfortunately, there is no automatic way to optimize render calls in this scenario. It would be great if there was.

I've heard about BufferGeometry and Geometry2 potentially improving performance in this situation, but I'm unsure of the best approach to take.

The key here is that the standard THREE.Geometry class in three.js is designed for developer convenience and is not optimized for how WebGL handles data. The DirectGeometry (previously Geometry2) and BufferGeometry classes are specifically for this purpose. BufferGeometry aligns with how WebGL expects data for draw calls, utilizing typed arrays for geometry attributes. The conversion from Geometry to BufferGeometry occurs automatically when geometry.verticesNeedsUpdate is set to true.

If attributes are not modified, this conversion occurs once per geometry, which is fine since you only have one geometry. Moving to BufferGeometry won't provide further optimization since you are already using it.

The main challenge with multiple geometries is the increased number of draw calls needed for rendering. Each instance of THREE.Mesh results in a draw call, and multiple draw calls can impact performance significantly. Combining meshes or geometries into a single entity can reduce draw calls, although it may not be practical for dynamic positioning and rotation.

What you may be interested in is geometry instancing in WebGL, allowing for rendering multiple objects in a single draw call. Each instance shares a common geometry while special attributes like InstancedBufferAttribute enable unique values for each instance. This approach can streamline rendering for multiple objects.

Examples of geometry instancing can be found here:

The challenge with instancing lies in creating a custom vertex shader to handle per-instance attributes in the material. This customization is crucial for applying unique transformations to each instance during rendering.

Answer 3

Answer №2

Since you're working with a webgl tag, I'll provide an alternative approach that doesn't involve using Three.js.

One effective method is to create a float texture array that contains model transform matrix data (or just vec3 positions if that's all you need). Then, you can allocate a mesh chunk that holds all the cube data. Introduce an additional attribute called modelTransform index, which corresponds to the correct offset in the model transform data texture for each "cube instance" in the mesh chunk.

During each frame, calculate the appropriate model transform data for all the cubes and update the model transform data texture with the correct offsets before uploading it to the GPU. In the vertex shader, access the model transform data using the modelTransform index attribute and the float texture.

This method has proved effective in my own engine, especially for small objects like cubes. However, keep in mind that updating 150,000 cubes at 60 FPS will likely consume a significant amount of your CPU resources. This limitation is inherent in any instancing scheme you choose.

For cubes with fixed motion or animation, consider uploading a velocity attribute and initial creation time stamp attribute for each cube instance. Each frame, pass the current time as a uniform and calculate the position using the formula

"pos += attr_velocity * getDeltaTime(attr_initTime, unif_currentTime);"

. This approach eliminates CPU workload entirely and enables you to render a larger number of cubes more efficiently.

Answer 4

Since you're working with a webgl tag, I'll provide an alternative approach that doesn't involve using Three.js.

One effective method is to create a float texture array that contains model transform matrix data (or just vec3 positions if that's all you need). Then, you can allocate a mesh chunk that holds all the cube data. Introduce an additional attribute called modelTransform index, which corresponds to the correct offset in the model transform data texture for each "cube instance" in the mesh chunk.

During each frame, calculate the appropriate model transform data for all the cubes and update the model transform data texture with the correct offsets before uploading it to the GPU. In the vertex shader, access the model transform data using the modelTransform index attribute and the float texture.

This method has proved effective in my own engine, especially for small objects like cubes. However, keep in mind that updating 150,000 cubes at 60 FPS will likely consume a significant amount of your CPU resources. This limitation is inherent in any instancing scheme you choose.

For cubes with fixed motion or animation, consider uploading a velocity attribute and initial creation time stamp attribute for each cube instance. Each frame, pass the current time as a uniform and calculate the position using the formula

"pos += attr_velocity * getDeltaTime(attr_initTime, unif_currentTime);"

. This approach eliminates CPU workload entirely and enables you to render a larger number of cubes more efficiently.

Is it possible to duplicate the mesh thousands of times and animate it without causing significant performance issues

Answer №1

Answer №2

Similar questions

What is the best method for deleting a portion of a string following the final instance of a particular character?

Issues with Bootstrap Contact Form submission

The webpage continues to refresh after executing a JavaScript function triggered by the AJAX response

The NextJs router encountered an unknown key passed through the urlObject during the push operation

Experiencing difficulty in updating GitHub pages with React application

Exploring the World with AngularJS and Google Maps API through ngGeolocation

The custom validation function in jQuery is not triggering

How can I incorporate a standalone Vuetify component into my Nuxt.js project?

JavaScript loop used to create markers on Google Maps

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

Generate a fresh row in a table with user inputs and save the input values when the "save" button is

What is the best way to enhance a tool-tip with images or legends?

Adjust the size of the logo as the user scrolls

Using jQuery to select the next table cell vertically

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Getting POST data in Next.js is a common task that requires understanding of how the

Issue with React component not displaying in the browser.Here are some

The $.get jQuery function is unexpectedly retrieving an entire HTML page instead of the expected JSON data

steps to extract routing into its own component

JavaScript heap ran out of memory near heap limit during mark-compacts, rendering the allocation ineffective, resulting in a failed Ionic 3 production build