Tips for seamlessly loading a texture in three.js / javascript without causing disruptions to the main thread

When working on a project, I came across an issue with loading large textures onto spheres. While most textures load within an acceptable time frame, some larger ones take up to ten seconds to fully download, causing the app to freeze during this process. To address this issue, I am looking for a way to preload all textures in the background and only apply them to the spheres once they have finished downloading.

I have experimented with using callback functions, promises, and even the built-in .loadAsync feature of the texture loader, but none of these solutions have reduced the freezing duration.

If anyone has suggestions on how to resolve this loading problem, it would greatly benefit my project. The project can be accessed here.

Answer №1

To avoid the performance hit of decoding textures when uploading them to the GPU, there are two choices:

  • Opt for using ImageBitmapLoader in your application instead of the TextureLoader. The documentation offers a code snippet demonstrating how to utilize this loader along with a link to a comprehensive example. The underlying ImageBitmap API provides an efficient and asynchronous approach to handling textures in WebGL. It's important to note that this API may not be supported on all web browsers.
  • Alternatively, consider utilizing a compressed texture format such as Basis, which can also lead to reduced video memory usage. However, the workflow associated with this option is more complex compared to the first one.

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

MongoDB is experiencing an issue where the latest document is not being stored at the

Storing comments for my webpage in MongoDB has been flawless so far. Whenever a new comment is saved, it gets added to the bottom of the collection. This results in the newest comment appearing at the top when loading comments, which is ideal. However, I e ...

Sorting through an array of objects nested within another array of objects

I'm currently working on a MERN app where I retrieve all albums using axios. This is the structure of the data: [ { title: "", artist: "", reviews: [ { username: "", comment: "", }, { ...

What is the most effective way to update a variable from a function in Angular?

I have textboxes within an ng-repeat block. To detect changes from the original content, I store the original data in a variable. <tr data-ng-repeat="p in products"> <td> <textarea data-elastic data-ng-model="p.comment" data-ng-change ...

Leverage jQuery to loop through a JSON array containing WordPress coordinates generated by Advanced Custom Fields and JSON API

I am currently working with a custom field named coordinates to display a Google Map within a Wordpress post. To achieve this, I am utilizing two plugins: Advanced Custom Fields and JSON API. The resulting JSON array looks like this: {\"address\ ...

Exploring the Next Level of jQuery's serializeArray() Function

Presently, I am utilizing ajax to submit a form and passing in a manually constructed data variable that resembles the following: var data = 'answer1=' + $("input[name=question_1]:checked").val() + '&q1_option=' + $("input[ ...

Load a file in JavaScript with the help of Flask

I am struggling to import a 3D file into three.js using Flask Here's what I've attempted in my .html file: <script> var model = '{{ url_for('static', filename = 'mesh.dae') }}' </script> and t ...

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

I’ve been struggling with this issue for days now. It seems like I may have overcomplicated a simple piece of code. I'm trying to show some divs when a button is clicked, but I’m having trouble getting it to work properly. Initially, I used VAR.st ...

Terminating the HTTP connection in Node.js after a set period of time

I am working on a program in nodejs that needs to retrieve json data from existing services. However, due to real time constraints in my application, I need to ensure that the response is prepared within a maximum of 2 seconds. If the response preparation ...

The initial attempt to fetch a value using jQuery returned as undefined

When using jQuery to retrieve each message ID, I am facing an issue where the first instance of the message that the user has shows up as undefined. However, for all subsequent messages, it works perfectly fine. var mssg_id = $(this).find('input[name= ...

Add data to form by clicking on the map using Mapbox

When using mapbox, I am able to insert a marker on map click and want to append those values in a form so that I can use my controller to store them. The marker is added and values are appended; however, https://i.sstatic.net/Tv1lk.jpg In the last value ...

What is the best way to extract data from the JSON response obtained from the Facebook Graph API in a Node

I am struggling to parse a JSON file in order to extract specific data, particularly the latest picture. How can I achieve this using Node.js and the Facebook Graph API? Below is the snippet of code I currently have: var params = { hostname: ' ...

What is the best way to incorporate NoFollow attributes into the external links on my Weebly website?

It's frustrating that Weebly doesn't offer a way to make external links noFollow. After reaching out to them with no success, I took matters into my own hands and searched for a solution online. <script src='http://ajax.googleapis.com/aj ...

unable to view icons from Summernote inline

I am currently using the Summernote editor, but I am experiencing some issues with the icons. Here is the image of the problem: https://i.sstatic.net/fRm0B.png My goal is to have all the icons aligned in a single line. Below is the code I am using: $(&a ...

What seems to be the issue with this basic Node.js function not functioning properly?

I'm attempting to utilize a function that returns a boolean answer and then verifying it using if-else statements. function checkDNS(domain, tld) { var dns = require('dns'); dns.lookup(domain+'.'+tld, function (err, addres ...

Is it possible in Angular to first escape HTML strings and then add HTML markup?

Working with a search form in Angular that pulls data from a database and includes an array of strings, I implemented a pipe to highlight the search query in the results by wrapping it with <mark></mark>. This feature has been quite useful so f ...

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

I am working with JSON data that looks like this: [ { "taxonomy_slug": "product_cat", "taxonomy_name": "Categories", "frontend_slug": "product-category" }, { ...

Receiving data dynamically from Highcharts results in an additional legend appearing in the chart display

I am currently looking for a solution to dynamically create highcharts series in my project. Although I have tried using the addSeries method, I am encountering an issue where an extra legend is appearing unnecessarily. If you are aware of any alternative ...

What are the steps to align the alert message of my PHP contact form using Javascript?

Struggling to position the alert message (e.g. "You need to fill in all required fields!!") due to CSS constraints. Any suggestions on how to approach this issue? Any ideas? <!DOCTYPE html> <html lang="en-US"> <head> <me ...

Looking to implement a Javascript AJAX queue system for handling cross-domain JSONP requests. Seeking guidance on how to effectively accomplish this

I have a JavaScript code that I need to convert into a queue system. Currently, the code looks messy with long chains of requests being made in a specific order. Please note that my function requests return JSON objects and setting async to false is not an ...

Creating a dynamic variable within a for loop and calculating the total of values to assign to that variable

Is it possible to dynamically create variables and add values to them repeatedly? For example: var totalIncomeCr = 0, totalIncomeDr = 0; for (var k = 1; k <= numOfYears; k++) { if(response[i]["AmountType" + k] == "Cr") { if(response[ ...