Combining Imported Models in Three.js: A Guide

Question

Combining Imported Models in Three.js: A Guide

I'm working on optimizing the draw calls in my THREE.js scene by reducing the amount of rendering required. I have a grid of large 32x32 tiles that are .gtlf models imported from the disk. Each tile has a model with just 8 vertices and a texture. However, when inspecting the canvas using tools like Spector, I noticed that there are 151 draw calls being made, with each model being rendered separately.

These tiles are generated by looping through the grid for every tile, checking if it needs a model, and then retrieving the model data from a Map where it was loaded using THREE.GLTFLoader. Occasionally, the material or rotation of the tiles may change, but only during setup.

Since these tiles will remain static and do not require any transformations, I am looking for optimization techniques to group the rendering of these tiles into as few draw calls as possible, considering they are essentially the same object.

javascript three.js

Answer 1

Answer №1

To combine your tiles into a single geometry, you can use the following approach:

Try something like the code snippet below:

const mergedGeometry = new THREE.BufferGeometry();
tiles.forEach( tile => {
  const geometry = tile.geometry.clone();
  geometry.applyMatrix(tile.matrixWorld);
  mergedGeometry.merge(geometry);
});

If you have multiple materials and textures, you will need to find a way to handle them as well.

Answer 2

To combine your tiles into a single geometry, you can use the following approach:

Try something like the code snippet below:

const mergedGeometry = new THREE.BufferGeometry();
tiles.forEach( tile => {
  const geometry = tile.geometry.clone();
  geometry.applyMatrix(tile.matrixWorld);
  mergedGeometry.merge(geometry);
});

If you have multiple materials and textures, you will need to find a way to handle them as well.

Combining Imported Models in Three.js: A Guide

Answer №1

Similar questions

Regex tips: Matching multiple words in regex

Unlocking the secret dropdown menu with Java Selenium WebDriver

Create a password variable while typing

Angular 5 - Strategies for excluding specific properties from Observable updates

Create a customizable Tree structure that includes checkboxes for each item and features drag

Converting PHP JSON encode to an Ajax array proved to be quite challenging for me at first, as it was a new concept to

Building a custom search modal using RenderPartial in Yii

retrieving the value of a field within an array

The field "addWorkout" cannot be queried on the type "Mutation"

The useEffect hook is executed only once and will not fetch data again upon refreshing the page

I purchased a code that was functioning properly on JQuery 1.3.2, but now it's not working on version 1.5. What steps

Encountering difficulties with updating an object in Angular

Apple Safari 14.0.3 restricts JavaScript from setting a cookie expiry date beyond one week from the current date

When the background image URL is altered, the button size automatically adjusts

IsContainer and IsModel properties in Dragular are not functioning properly with the accept or canBeAccepted methods

Interacting with HTML elements in Java programming

Using v-bind:class in Vue.js does not successfully assign a value in the method

The Checkbox handler in Material-UI component fails to update the state - Version 5.0

Encountered a MongoNetworkError while attempting to establish a connection with the server at localhost:27017. The initial connection failed due to an ECONNREFUSED error at 127.0.0.1:

Using the getAttribute method in Edge with JavaScript