Improving Mesh Updates in Three.js / WebGL (Strategies for Enhancing Performance in a Sizeable Music Visualizer)

I am a beginner in the world of Three.js / WebGL and I am currently working on a project that combines elements of gaming and music visualization. This project involves various geometries moving through the scene in unique ways. Despite my efforts to optimize the performance by following advice on merging geometries, reducing textures, and adjusting curve segments, I still experience inconsistent frame rates.

One major concern is the continuous updating of vertices, specifically with a large mesh of text geometries falling from the sky. I have tried to update them efficiently but still struggle with performance issues.

In addition, I am updating other aspects of the geometries such as scale, color, and rotation based on music input. Is there a more effective way to handle these operations?

I have three specific questions:

  1. Is there a better method to update the position of a large mesh without individually updating each vertex?

  2. Are the operations like updating scale, color, and rotation particularly resource-intensive? How can I optimize them?

  3. Aside from optimization, are there any other methods to ensure consistent performance across different devices?

You can find the source code here: https://github.com/jaclynj/dancingcities/blob/master/public/main.js

Visit my site at dancingcities.heroku.com

Thank you!

Answer №1

Your numerous inquiries serve as valuable topics for open dialogue rather than simple questions with quick answers. Consider exploring the option of utilizing a personalized vertex shader to manipulate your geometries exclusively on the GPU, experimenting with BufferedGeometry, or rendering at a reduced resolution (such as halved). These ideas may offer potential solutions to your challenges.

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

Guide on how to transmit an error message from PHP when handling a jQuery Ajax post request

Greetings! This is my inaugural inquiry, so please understand if I am a bit apprehensive. I am facing an issue in the following scenario... I have an Ajax request structured like this: $.ajax({ url: "test.php", method: "POST", data: { ...

Converting data to a JSON string using jQuery's AJAX method

When I use document.write() for JSON data, it works fine outside of the AJAX call, but not inside the .done() function. I even tried removing the dataType: 'json' parameter, but it still didn't work. $.ajax({ url: "http://api.wundergrou ...

Verify whether the element appears twice in the array

Is there a way to determine if an element appears more than once in an array? var arr = [elm1, elm2, elm3, elm3, elm4, elm5, elm5, elm5, elm6, elm7]; if (elm appears multiple times in the array) { // code to be executed } else { // do somethin ...

ASP.Net - Unexpected JSON Format Error

As I work on my ASP.Net web application, I am encountering an issue with binding data from a database to a Google Combo chart via a Web Service class. While I can successfully bind the data to a grid view, attempting to bind it to the chart results in the ...

The React Component is limited to updating once

Exploring the React Native code below: import React from 'react'; import {Text, View, StyleSheet, Button} from 'react-native'; export default class Target extends React.Component { constructor(props){ super(props); ...

Running PHP scripts from JavaScript

Currently working on a PHP project that involves a dropdown select button in a webpage. The goal is to call a JavaScript function whenever the value of the dropdown changes, and then pass this selected value to retrieve additional details from a MySQL da ...

Syntax error is not caught - why are there invalid regular expression flags being used?

I'm attempting to dynamically create rows that, when clicked, load a view for the associated row. Check out my javascript and jquery code below: var newRow = $('<tr />'); var url = '@Url.Action("Get", "myController", new ...

What is the method for disabling shadows in MaskPass?

I am working on a MaskPass that involves using a separate scene for a selected object. My goal is to ensure that the lighting on the object matches that of the original scene, without having to duplicate all the lights in the second scene and constantly ad ...

What is the best way to calculate the total sum of a column in Vue JS?

https://i.sstatic.net/K8Rqj.png To manually add a row, each row is stored in the "items" array items: [ { occuGroup:'', constType:'', bfloorArea: 0, cfloorArea: 0 }, ], Below is the code I wrote to calculate the to ...

Guidelines for updating state in React following a delay?

Trying my hand at creating a basic roulette wheel using React, I encountered an issue where setting the state spinning to false at the end of the function did not seem to have any effect. import React, { useState } from "react"; const numbers = ...

Analyzing Dynamic Content

Currently, I am engaged in content parsing and have successfully executed a sample program. To demonstrate, I have utilized a mock link which you can access below: Alternatively, you can click on this link: Click Here In the provided link, I have parsed ...

Tips for gathering an array of checkboxes within a dynamic array of items using Vue.js and Vuetify

I am currently working on a role permission system where I have defined a resource array containing items that users can access, as well as checks representing the permissions for each resource. My goal is to dynamically assign a role with these resources ...

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? https://i.sstatic.net/r25fd.jpg I have implemented this type of validation for a text box: <div class="form-group"> <label class="co ...

Retrieve the attribute of the clicked element by utilizing the on click event handler

Within my HTML, there is a page displaying approximately 25 thumbnails, each with a like button in this specific format: <input type="button" class="btn btn-primary btn-small" id="likeBtn" data-id="545206032225604" value="Like"> It's important ...

Unlocking JSON Keys Using Dashes

When working with JSON objects, we typically access elements using dot notation. For example, var obj = {"key": "value"}; var val = obj.key;. However, what if the key contains hyphens, like in this case: var obj = {"key-with-hyphens": "value"};? Do we ne ...

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

As I monitor my dashboard retrieving continuous data from an SAP server, I stumbled upon a solution to fetch the current server date. This approach allows me to display when the dashboard was last updated, and this date is displayed in the DOM. //Method f ...

Adjusting values in Vue.js with a slider bar

Just starting out with vue.js and wanted to create a slide-bar with min and max values. I came across vue range slider, installed it, and successfully implemented it. The issue I'm facing is changing the value on the slider. The values from my API r ...

Why is my JavaScript code functioning properly on jsfiddle but failing to work when run locally?

After recently creating JavaScript code that allows for form submission using the <form> tag, I encountered an issue when trying to implement it within an HTML page. Here is a snippet of the code: <script type="text/javascript"> var m ...

Transferring information from child to parent class in TypeScript

I have a scenario where I have two classes (Model). Can I access properties defined in the child class from the parent class? Parent Class: class Model{ constructor() { //I need the table name here. which is defined in child. } publ ...