Sluggish animation performance in threejs when using requestAnimationFrame within a class

Question

Sluggish animation performance in threejs when using requestAnimationFrame within a class

Experiencing choppy animation on the JSFiddle? When trying to move your mouse or interact with the content, you may have come across issues with the classing related to requestAnimationFrame(this.animation). Initially, it didn't work as expected, but after seeking help on stackoverflow, I found a solution by adding

this.animate = this.animate.bind(this);

. However, this fix resulted in a significant slowdown. Is there a way to optimize performance while still utilizing the class?

Check out the JSFiddle:

https://jsfiddle.net/gentleman_goat66/o5wn3bpf/100/

Below is the code snippet:

HTML

<script type="importmap">
{
"imports": 
  {
    "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9a869c8b8baedec0dfdbdfc0dd">[email protected]</a>/build/three.module.js",
    "OrbitControls": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f0512123747594642465944">[email protected]</a>/examples/jsm/controls/OrbitControls.js"
  }
}
</script>
<div id="container">
</div>

JS

// JavaScript code
// Goes here...

CSS

body,html{
  margin: 0;
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  background-color: black;
  margin: 0;
}

javascript class three.js this requestanimationframe

Answer 1

Answer №1

I'm not entirely clear on the expectations you have for the

this.delta += this.clock.getDelta();
if (this.delta > this.interval) {

aspect's operation. The problem arises from setting this.interval = 1, which means the code inside the if block will only run once every second.
If your intention was to limit it to a specific FPS, then you should have defined this.interval = 1 / this.fps;. However, achieving accurate FPS control is quite complex (as it requires selecting a multiple of the monitor's refresh rate, _{especially with variable-rate monitors...})
Therefore, it might be best to remove this constraint altogether and let the code run at the natural pace of the browser and monitor.

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  background-color: black;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="modulemap">
{
  "imports": 
    {
      "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bde1fbf9f9dcbcb2bdb9bdb2af">[email protected]</a>/build/three.module.js",
      "OrbitControls": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b2f331821219c8c827d787c78778a">[email protected]</a>/examples/jsm/controls/OrbitControls.js"
    }
}
</script>
<div id="container">
</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';

class Heatmap {
  constructor(){
    console.log("Heatmap - constructor()");
    
    //ThreeJS Variables
    this.camera = null;
    this.scene = null;
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.orbital_controls = null;
    this.ambientLight = null;
    this.heatmap = new THREE.Object3D();
    this.animate = this.animate.bind(this);
    
    this.seconds = 2; 
    this.timeSoFar = 0;
    this.targetTime = 3;
    
    //Setup
    this.scene = new THREE.Scene();
    this.setUpCamera();
    this.setUpRenderer();
    this.setUpLighting();
    this.setUpOrbitalControls();
    
    this.scene.add(new THREE.GridHelper());
    
    //TODO: Implement the heatmap logic here
    this.createDataRectangle();
    
    this.scene.add(this.heatmap);
    this.render();
    this.animate();
  }
  setUpRenderer(){
    console.log("Heatmap - setUpRenderer()");
    let width = $('#container').width();
    let height = $('#container').height();
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0x404040);
 
    $("#container").html(this.renderer.domElement);
    
    window.addEventListener("resize", event => {
      this.camera.aspect = innerWidth / innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(innerWidth, innerHeight);
    });
  }
  setUpCamera(){
    console.log("Heatmap - setUpCamera()");
    this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
    this.camera.position.z = 4;
  }
  setUpLighting(){
    console.log("Heatmap - setUpLighting()");
    this.ambientLight = new THREE.AmbientLight(0xffffff, 1);
    this.scene.add(this.ambientLight);
  }
  setUpOrbitalControls(){
    console.log("Heatmap - setUpOrbitalControls()");
    this.orbital_controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.orbital_controls.target.set(0, 0, 0);
    this.orbital_controls.enableDamping = true;
    this.orbital_controls.dampingFactor = 0.025;
    this.orbital_controls.maxPolarAngle = Math.PI / 2.0;
    this.orbital_controls.minDistance = 2.0;
    this.or..."

Answer 2

I'm not entirely clear on the expectations you have for the

this.delta += this.clock.getDelta();
if (this.delta > this.interval) {

aspect's operation. The problem arises from setting this.interval = 1, which means the code inside the if block will only run once every second.
If your intention was to limit it to a specific FPS, then you should have defined this.interval = 1 / this.fps;. However, achieving accurate FPS control is quite complex (as it requires selecting a multiple of the monitor's refresh rate, _{especially with variable-rate monitors...})
Therefore, it might be best to remove this constraint altogether and let the code run at the natural pace of the browser and monitor.

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  background-color: black;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="modulemap">
{
  "imports": 
    {
      "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bde1fbf9f9dcbcb2bdb9bdb2af">[email protected]</a>/build/three.module.js",
      "OrbitControls": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b2f331821219c8c827d787c78778a">[email protected]</a>/examples/jsm/controls/OrbitControls.js"
    }
}
</script>
<div id="container">
</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';

class Heatmap {
  constructor(){
    console.log("Heatmap - constructor()");
    
    //ThreeJS Variables
    this.camera = null;
    this.scene = null;
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.orbital_controls = null;
    this.ambientLight = null;
    this.heatmap = new THREE.Object3D();
    this.animate = this.animate.bind(this);
    
    this.seconds = 2; 
    this.timeSoFar = 0;
    this.targetTime = 3;
    
    //Setup
    this.scene = new THREE.Scene();
    this.setUpCamera();
    this.setUpRenderer();
    this.setUpLighting();
    this.setUpOrbitalControls();
    
    this.scene.add(new THREE.GridHelper());
    
    //TODO: Implement the heatmap logic here
    this.createDataRectangle();
    
    this.scene.add(this.heatmap);
    this.render();
    this.animate();
  }
  setUpRenderer(){
    console.log("Heatmap - setUpRenderer()");
    let width = $('#container').width();
    let height = $('#container').height();
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0x404040);
 
    $("#container").html(this.renderer.domElement);
    
    window.addEventListener("resize", event => {
      this.camera.aspect = innerWidth / innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(innerWidth, innerHeight);
    });
  }
  setUpCamera(){
    console.log("Heatmap - setUpCamera()");
    this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
    this.camera.position.z = 4;
  }
  setUpLighting(){
    console.log("Heatmap - setUpLighting()");
    this.ambientLight = new THREE.AmbientLight(0xffffff, 1);
    this.scene.add(this.ambientLight);
  }
  setUpOrbitalControls(){
    console.log("Heatmap - setUpOrbitalControls()");
    this.orbital_controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.orbital_controls.target.set(0, 0, 0);
    this.orbital_controls.enableDamping = true;
    this.orbital_controls.dampingFactor = 0.025;
    this.orbital_controls.maxPolarAngle = Math.PI / 2.0;
    this.orbital_controls.minDistance = 2.0;
    this.or..."

Sluggish animation performance in threejs when using requestAnimationFrame within a class

Answer №1

Similar questions

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

Guide to implementing a variable delay or sleep function in JQuery within a for loop

How can I make the droppable elements only drop within draggable elements in jQuery UI?

jQuery scrollTop(0) leading to unusual scrolling patterns

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

What is the process for invoking a functional component within a class-based component using the onClick event?

Custom server not required for optional dynamic routes in NextJS version 9.5.2

What can you tell me about Page Event functionality in Datatables?

Disappear the loading icon once all children have finished rendering

Utilizing npm packages with grunt: A guide

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

Upon migrating from Vue CLI 2 to 3, an error is thrown stating: "Cannot locate element: #app" and an empty body is

I am looking to access a public method from a different component in Angular 2

In Angular 2, you can include a routerLink in a child component that directs to the root

The functionality of Jquery and JS lies in working on DOM elements as opposed to

Sending an image file using AJAX and jQuery

Struggling to detect a click event within a VueJS application when using a bootstrap button-group

Real-time Data Stream and Navigation Bar Location