Quick method to populate an array with elements

Question

Quick method to populate an array with elements

I need to populate an array with a large number of objects. Currently, my approach looks like this:

let useVertices = [];
const len = this.indices.length;
for(let i = 0; i < len; i++){
    let index = this.indices[i]*3;
    useVertices.push(new THREE.Vector3(
        this.vertices[index],
        this.vertices[index+1], 
        this.vertices[index+2])
    );
}

this.indices is an Int32Array that contains nearly 4 million elements. this.verticesis a Float32Array with around 650,000 elements.

The current implementation usually takes between 500 and 800 ms to complete.

I am using CefSharp as the browser since the website is running within a C# application.

Are there any ways to optimize this code for faster performance?

javascript loops three.js

Answer 1

Answer №1

Compiling what I believe to be the top suggestions from the responses (excluding challenges to the original idea) awaiting your experimentation:

Ouroborus mentioned that with 4M indices and only 650k vertices, you may end up creating redundant instances of THREE.Vector3. Reusing instances by storing previous ones based on index is a possible optimization.
Gabriele Petrioli suggested using assignment instead of push to avoid an extra method call: useVertices[i] = ___
Prior allocation of the array can be done using new Array(len)
To minimize unnecessary property lookups, cache indices, vertices, and THREE.Vector3
If possible, declare useVertices as const

const { indices, vertices } = this;
const V = THREE.Vector3;
const len = indices.length;
const useVertices = new Array(len);
const vectors = new Map(); // For reusing vectors
for (let i = 0; i < len; i++) {
    let index = indices[i] * 3;
    let vector = vectors.get(index);
    if (!vector) {
        vector = new V(
            vertices[index],
            vertices[index + 1],
            vertices[index + 2]
        );
        vectors.set(index, vector);
    }
    useVertices[i] = vector;
}

(Please note: Plat00n attempted to use an array in place of a Map earlier, but even with the inclusion of the get and set method calls, the Map proved to be more efficient.)

Answer 2

Compiling what I believe to be the top suggestions from the responses (excluding challenges to the original idea) awaiting your experimentation:

Ouroborus mentioned that with 4M indices and only 650k vertices, you may end up creating redundant instances of THREE.Vector3. Reusing instances by storing previous ones based on index is a possible optimization.
Gabriele Petrioli suggested using assignment instead of push to avoid an extra method call: useVertices[i] = ___
Prior allocation of the array can be done using new Array(len)
To minimize unnecessary property lookups, cache indices, vertices, and THREE.Vector3
If possible, declare useVertices as const

const { indices, vertices } = this;
const V = THREE.Vector3;
const len = indices.length;
const useVertices = new Array(len);
const vectors = new Map(); // For reusing vectors
for (let i = 0; i < len; i++) {
    let index = indices[i] * 3;
    let vector = vectors.get(index);
    if (!vector) {
        vector = new V(
            vertices[index],
            vertices[index + 1],
            vertices[index + 2]
        );
        vectors.set(index, vector);
    }
    useVertices[i] = vector;
}

(Please note: Plat00n attempted to use an array in place of a Map earlier, but even with the inclusion of the get and set method calls, the Map proved to be more efficient.)

Answer 3

Answer №2

One efficient method is the Vectorized approach

To optimize performance, utilize typed arrays (Float32Array) directly for useVertices instead of adding elements one by one.
Implement vectorized operations such as slice and copy to manipulate these typed arrays, avoiding the need to iterate through individual elements.

Take advantage of built-in vectorized functions in Three.js like Vector3.fromArray for a direct conversion from the vertices array to useVertices.

 // Create typed array directly
 const useVertices = new Float32Array(this.indices.length * 3);

 // Copy data by traversing indices
 for (let i = 0, j = 0; i < this.indices.length; i++, j += 3) {
   const index = this.indices[i] * 3;
   useVertices.copyWithin(j, this.vertices, index, index + 3);
 }

 // Alternatively, use Vector3.fromArray  
 const useVertices = THREE.Vector3.fromArray(this.vertices, 
 this.indices);

Answer 4

One efficient method is the Vectorized approach

To optimize performance, utilize typed arrays (Float32Array) directly for useVertices instead of adding elements one by one.
Implement vectorized operations such as slice and copy to manipulate these typed arrays, avoiding the need to iterate through individual elements.

Take advantage of built-in vectorized functions in Three.js like Vector3.fromArray for a direct conversion from the vertices array to useVertices.

 // Create typed array directly
 const useVertices = new Float32Array(this.indices.length * 3);

 // Copy data by traversing indices
 for (let i = 0, j = 0; i < this.indices.length; i++, j += 3) {
   const index = this.indices[i] * 3;
   useVertices.copyWithin(j, this.vertices, index, index + 3);
 }

 // Alternatively, use Vector3.fromArray  
 const useVertices = THREE.Vector3.fromArray(this.vertices, 
 this.indices);

Quick method to populate an array with elements

Answer №1

Answer №2

Similar questions

Create a toggle effect similar to jQuery using JavaScript

Material Angular table fails to sort columns with object values

Interacting with an iframe element using Selenium in Python

Unable to execute a JavaScript function when triggered from an HTML form

React snap scrolling feature is not working as intended

Submitting a POST request to paginate and sort the results

A little brain teaser for you: Why is this not functioning properly on Google Chrome?

A step-by-step guide to adding an object to an already existing array in Vue.js

Tips for locating and substituting a string in Javascript

How to retrieve data as an array using a promise in an Express application with React and

Error 9 in Firebase: The function 'initializeApp' could not be located within the 'firebase/app' module

Listening for server updates with jQuery

Utilize Next.js and GSAP to dynamically showcase images upon hovering over the title

How to activate a single element within a React array

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

Position the Material-UI AppBar and Tab on the far right of the screen

There was an issue with retrieving the image URL from the source, causing an error message to display: "

Leverage the power of Laravel and ReactJS to beautifully display images

Unsupported file format for Three.js FBX Binary model