Enhancing speed and efficiency through the utilization of Three.js

Question

Enhancing speed and efficiency through the utilization of Three.js

I'm currently working on my first Three.js / WebGL application, and while it runs smoothly on my PC (Chrome), I've noticed that the framerate tends to drop below 30 frames per second on other PCs.

Despite the application not being overly complex, I would appreciate any tips you have to offer on how to enhance its performance. You can find a version of the app here:

www.wrodewald.de/StackOverflowExample/

The main element in the application is a dynamic plane with 64² vertices that morphs. It utilizes a matrix to store a static heightmap and wavemap, which is updated every frame to recalibrate itself using filters to maintain consistency among neighboring vertices. As a result, each frame requires updating the plane's color and vertex position, potentially contributing to the performance issue.

The secondary object, a rhombus, should not pose a problem as it is static, only moving slightly.

In terms of lighting, there are three types present (ambient, directional, spherical) without shadows, along with a tilt shift shader and vignette shader.

The following functions are executed per frame:

var render = function() {
    requestAnimationFrame( render );
    var time = clock.getDelta();

    world.updateWorld(time);
    diamond.rotate(time);
    diamond.update(time);
    control.updateCamera(camera, time);
    composer.render();      
    stats.update();
}

This is what world.updateWorld(time) entails:

// Within world.updateWorld(time):
// accmap stores acceleration and wavemap stores position
// this.mapSize indicates the plane's size in vertices (64)

// Update Acceleration Map
for(var iX = 1; iX < (this.mapSize-1); iX++) {
    for(var iY = 1; iY < (this.mapSize-1); iY++) {
        accmap[iX][iY] -=  dT * (wavemap[iX][iY]) * Math.abs(wavemap[iX][iY]);
    }   
}

// Smooth Acceleration Map
for(var iX = 1; iX < (this.mapSize-1); iX++) {
    for(var iY = 1; iY < (this.mapSize-1); iY++) {
        // Calculation omitted for brevity
    }
}

// Update Wave Map
// Wave map update and vertex calculation code provided

Here are the "diamond" functions:

this.rotate = function(dT) {
    // Rotation logic explained
}

this.update = function(dT) {
    // Color interpolation logic described
}

Can you identify any specific reasons causing the inconsistent framerate in the application?

javascript performance three.js

Answer 1

Answer №1

Update:

I have identified 2 key areas for improvement:

Implementing Plane Updates with GPU

Speedup: High

Lets focus on your code in plane.js

    timer += dT;
    if(timer > 0.1) {           
        var x = 2 + Math.floor(Math.random() * (this.mapSize - 4));
        var y = 2 + Math.floor(Math.random() * (this.mapSize - 4));
        //accmap[x][y] += 30000 * Math.random () - 15000
    }


    // UPDATE ACCELERATION MAP
    for(var iX = 1; iX < (this.mapSize-1); iX++) {
        for(var iY = 1; iY < (this.mapSize-1); iY++) {
            accmap[iX][iY] -=  dT * (wavemap[iX][iY]) * Math.abs(wavemap[iX][iY]);
        }   
    }

You are currently updating 4096 vertices every 17 ms with the CPU. You are not utilizing the advantages of GPU processing. Here's how it can be done more effectively:

First, create buffers for vertex positions, normals, texture coordinates, indices, etc. This collection is referred to as a mesh.
Then, create a model consisting of one or more meshes along with a modelViewMatrix. The matrix 4x4 represents the position, rotation, and scale of the model.
For each render, perform this operation in the vertex shader:
```
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
```
This snippet is from your cg/shaders/VerticalTiltShiftShader.js file
If you want to rotate your plane, instead of multiplying each vertex, multiply the model matrix once using three.js function:
```
projectionMatrix.makeRotationY(dT);
```
Each vertex will then be multiplied by this matrix in the vertex shader, resulting in much faster processing.

Javascript Coding Style

Speedup: None - Medium, but it enhances coding efficiency

Let's take a look at your plane.js for illustration.

// Interface definition
function PlaneWorld () {
    this.init = function() {};
    this.updateVertices = function() {};
    this.updateWorld = function(dT) {};
    // ... and more
}

// Instantiation somewhere else:
var world = new PlaneWorld();

If your project only involves one plane, treating it as a singleton is acceptable. But when dealing with multiple planes, all functions are recreated for each instance (new PlaneWorld()). A better approach would be:

function PlaneWorld () {
    ...
}

PlaneWorld.prototype.init = function() {};    
PlaneWorld.prototype.updateVertices = function() {};    
PlaneWorld.prototype.updateWorld = function(dT) {};  
// ... and more

var world = new PlaneWorld();

// Method calls remain the same
world.updateVertices();

Or a more advanced version using an anonymous function:

var PlaneWorld = (function() {

    // Private static variables here

    var PlaneWorld = function () {
        ...
    }

    PlaneWorld.prototype = {
        init: function() {},
        updateVertices: function() {},
        updateWorld: function(dT) {} 
        // ... and more
    }

    return PlaneWorld();
})();

var world = new PlaneWorld();
// Method calls remain the same
world.updateVertices();

This optimization reduces the cost of creating new instances. It's important that every instance shares the same mesh while having its own modelViewMatrix.

Answer 2

Update:

I have identified 2 key areas for improvement:

Implementing Plane Updates with GPU

Speedup: High

Lets focus on your code in plane.js

    timer += dT;
    if(timer > 0.1) {           
        var x = 2 + Math.floor(Math.random() * (this.mapSize - 4));
        var y = 2 + Math.floor(Math.random() * (this.mapSize - 4));
        //accmap[x][y] += 30000 * Math.random () - 15000
    }


    // UPDATE ACCELERATION MAP
    for(var iX = 1; iX < (this.mapSize-1); iX++) {
        for(var iY = 1; iY < (this.mapSize-1); iY++) {
            accmap[iX][iY] -=  dT * (wavemap[iX][iY]) * Math.abs(wavemap[iX][iY]);
        }   
    }

You are currently updating 4096 vertices every 17 ms with the CPU. You are not utilizing the advantages of GPU processing. Here's how it can be done more effectively:

First, create buffers for vertex positions, normals, texture coordinates, indices, etc. This collection is referred to as a mesh.
Then, create a model consisting of one or more meshes along with a modelViewMatrix. The matrix 4x4 represents the position, rotation, and scale of the model.
For each render, perform this operation in the vertex shader:
```
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
```
This snippet is from your cg/shaders/VerticalTiltShiftShader.js file
If you want to rotate your plane, instead of multiplying each vertex, multiply the model matrix once using three.js function:
```
projectionMatrix.makeRotationY(dT);
```
Each vertex will then be multiplied by this matrix in the vertex shader, resulting in much faster processing.

Javascript Coding Style

Speedup: None - Medium, but it enhances coding efficiency

Let's take a look at your plane.js for illustration.

// Interface definition
function PlaneWorld () {
    this.init = function() {};
    this.updateVertices = function() {};
    this.updateWorld = function(dT) {};
    // ... and more
}

// Instantiation somewhere else:
var world = new PlaneWorld();

If your project only involves one plane, treating it as a singleton is acceptable. But when dealing with multiple planes, all functions are recreated for each instance (new PlaneWorld()). A better approach would be:

function PlaneWorld () {
    ...
}

PlaneWorld.prototype.init = function() {};    
PlaneWorld.prototype.updateVertices = function() {};    
PlaneWorld.prototype.updateWorld = function(dT) {};  
// ... and more

var world = new PlaneWorld();

// Method calls remain the same
world.updateVertices();

Or a more advanced version using an anonymous function:

var PlaneWorld = (function() {

    // Private static variables here

    var PlaneWorld = function () {
        ...
    }

    PlaneWorld.prototype = {
        init: function() {},
        updateVertices: function() {},
        updateWorld: function(dT) {} 
        // ... and more
    }

    return PlaneWorld();
})();

var world = new PlaneWorld();
// Method calls remain the same
world.updateVertices();

This optimization reduces the cost of creating new instances. It's important that every instance shares the same mesh while having its own modelViewMatrix.

Enhancing speed and efficiency through the utilization of Three.js

Answer №1

Similar questions

Guide: Executing an Angular web application using Express

Specification for dynamically changing CSS in Bootstrap tooltips

Using jQuery to Populate a Dropdown List in ASP.NET Core 2.1

How can you locate the position of a selector within a parent or set using jQuery

Effectively detect the 'scrollend' event on mobile devices

Google Cloud Platform (GCP) reported a Stripe webhook error stating that no matching signatures were found for the expected signature

Having trouble running Webpack Config in React.js 2020?

Get rid of all numbers from a jQuery selection except for the first and last

Develop a regular expression tailored for jQuery validation purposes

Unable to display using a simulated array in ReactJS/JS

Tool to stop automatic logouts on websites

Use PipeTransform to apply multiple filters simultaneously

Can we modify the styling of elements in Angular based on an object property?

Preserve the data from various select boxes using their respective ids

How can we stop the interval when the object is no longer in use?

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

Vue.js | Dynamically add a new key and value pair to an array being built using $ajax

Utilizing the Google Maps JavaScript API in npm to generate route directions

Having issues with the functionality of AngularJS ng-show

Stop modal content from automatically opening