Manipulating TextGeometry by both removing and adding it can cause the scene to

My current project involves creating a clock using Text Geometry. To update the time displayed on the clock, I have to remove and recreate a new Text Geometry every time. Unfortunately, this process of adding a new Text Geometry causes my browser to freeze:

 // Remove old mesh
  earthClockMesh.geometry.dispose();
  earthClockMesh.material.dispose();
  group.remove(earthClockMesh);


   //add new mesh
  earthClockMesh = this.getTextMesh(
    new Date(diluatedTime).toLocaleString(),
    textMaterial
  );
  group.add(earthClockMesh);

If anyone knows of a more efficient way to update the text in Text Geometry without causing the browser to freeze, please share your insights.

Live Example

https://codesandbox.io/s/peaceful-boyd-x859m

You may notice that the particles temporarily freeze when the TextGeometry is changed.

Answer №1

Opting for THREE.TextBufferGeometry can greatly enhance performance by reducing object allocation compared to TextGeometry. Additionally, every instance of THREE.Geometry is automatically converted to THREE.BufferGeometry prior to the initial rendering process. By decreasing the number of curveSegments, any lag experienced should become almost imperceptible.

three.js version R107

Answer №2

The issue arises from repeatedly deleting and rebuilding the geometry, resulting in the CPU working overtime to reconstruct thousands of triangles every second. This process is incredibly demanding computationally, leading to freezing animation as the CPU struggles to keep up. Here's a breakdown of what's happening:

  1. Disposable text geometry
  2. CPU reconstructs all characters with updated data (first bottleneck)
  3. New geometry information sent to GPU (second bottleneck)
  4. Smooth scene rendering between geometry rebuilds

In real-time graphics applications like video games or visualizers, it's crucial to construct geometry at the app's start to prevent these disruptions during runtime. Instead, aim to generate geometry once and simply swap it when needed:

  1. Develop a "dictionary" containing all 16 required characters as separate Mesh objects: 0123456789:/APM,
  2. With this base dictionary, utilize .clone() to duplicate necessary characters and position them using .position. Opt for .clone(false).
  3. For updates each second, duplicate the geometry from the dictionary into the specific characters requiring modification using .clone().

The advantage of cloning Meshes in this manner lies in generating geometry only once, alleviating the need for significant processing power to recreate it continuously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal an extended menu by clicking away from the container: a guide on implementing a code snippet

I'm working on a menu that opens a sub-menu section when clicked (let's call this container: "sub-menu"). I want the "sub-menu" to disappear if the user clicks outside of it, on the rest of the page. I found a solution on How do I detect a click ...

In TypeScript, the function is failing to retrieve the complete array value

I'm facing an issue with a program that is supposed to piece together all the letters, but it's not functioning correctly. I've tried using the debugger, but it doesn't display any errors. Here's the code snippet: var phrase = [ &a ...

Saving Information from Various MongoDB Searches on Node.js

Okay, I believe it would be more helpful if I provide my entire node.js route for you to better understand what I am trying to explain. The issue I am facing is with making multiple queries to my MongoDB database (one for each day). The queries are execut ...

What provides quicker performance in AngularJS: a directive or one-time binding?

I need to display a static array on a webpage without Angular watching its value. With that requirement in mind, my question is: Which method is faster: using a directive to fetch a scope variable and create an HTML element with this variable as a hard-co ...

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

Creating a POST Endpoint in Express JS

Hey there! Can someone help me out with creating a basic login script for an app using Express JS? I've been working on a POST function to handle this task, but unfortunately, when I try to echo back the parameters being passed (testing via Postman), ...

Developing a MEAN application with simultaneous servers running Express, NodeJS, and Angular 2

Currently, I am trying to establish a connection between my backend (NodeJS, Express) and frontend (Angular 2), but I am facing a hurdle in the process. When I run both servers separately, the client-side and server-side functionalities work correctly. In ...

Encounter a Config validation error while trying to utilize Nest.js ConfigService within e2e tests

I'm encountering an error despite having the NODE_ENV=development variable in my .env file. The error message reads: ● Test suite failed to run Config validation error: "NODE_ENV" must be one of [development, production] 11 | imports ...

Creation of source map for Ionic 2 TypeScript not successful

Struggling with debugging my Ionic 2 application and in need of guidance on how to include souceMap for each typescript file that corresponds to the javascript files. Despite enabling "sourceMap":true in my tsconfig.json file, the dev tools in Chrome do n ...

Building a sub route in React Router v4 allows developers to efficiently organize and manage

Before starting, I familiarized myself with the concept of react router by visiting https://reacttraining.com/react-router/web/guides/quick-start. I have developed a simple 3-page site in react and now want to create a list that will allow me to display so ...

transferring iterative information via ajax data flow

My form includes hidden input fields that are manually declared in the AJAX data without a loop. How can I efficiently loop through them in the AJAX data? Below is my form script: <form method="POST" name="myform"> <?php for($i=1;$i<=5;$i+ ...

modify header when button is clicked

I am trying to create a JavaScript function that will update the name of an HTML table header when a button is clicked. However, I am having trouble accessing the text content within the th element. document.getElementById("id").text and document.getEl ...

What are some effective troubleshooting methods for resolving issues with chrome.storage.sync?

My Chrome extension is a simple tool that utilizes the chrome.storage API to keep track of tasks in a organized list. Whenever there is an update to the task list, the array is saved to chrome.storage.sync. I have both of my laptops configured with the Ch ...

Can we achieve live map updates in real time using Google API with Node.js technology?

Can Google Maps API in conjunction with Node.js provide truly real-time updates on a map without any callback limits, or does Google enforce restrictions such as a 5 second or 30 second time frame? Node.js is known for its ability to handle almost real-ti ...

Enhance your Vue PWA by utilizing ServiceWorker to efficiently cache remote media assets fetched from an array of URLs

In my PWA development project, I am looking to provide users with the option to download and cache all media assets used in the application. However, the default behavior of PWAs only caches assets when they are requested during app navigation. My goal is ...

Comparison between using jQuery to append and execute a <script> tag versus using vanilla JavaScript

As I enhance my application, I've made the decision to embrace Bootstrap 5, which no longer relies on jQuery. Consequently, I am working to eliminate this dependency from my application entirely. One of the changes I'm making is rewriting the Ja ...

Guide to creating several AJAX requests using a for loop

I'm currently experimenting with the Star Wars API (SWAPI) and attempting to display the names of all the planets. However, the planet information is spread across multiple pages. How can I go about making several AJAX requests in order to retrieve an ...

How to selectively display specific columns when outputting JSON to a dynamic HTML table?

I'm looking to output specific JSON data in an HTML table with JavaScript. The headers will remain the same, but the JSON content will vary. Currently, I have a working function that generates the entire table using JavaScript: <body> ...

Vue API and Frame

Just starting out. Looking to display a skeleton while waiting for data from the API. Any ideas on how to achieve this? Appreciate any help My workaround involved implementing a timeout function ...

What could be causing my Express server to return a 404 error when trying to submit the form, all while failing to display any console

Having trouble setting up multi-user sessions similar to Google Docs, but my server file seems unresponsive. I've double-checked my fetch function and ensured it is accurate, yet no changes are occurring. Even console.logs from the server file command ...