Chrome experiences a hidden stalling issue due to a large WebGL texture

While working with WebGL on Windows 10 using Three.js, I noticed that initializing a large (4096 x 4096) texture causes the main thread of Chrome to stall for a significant amount of time. Surprisingly, the profiler doesn't show any activity during this period.

For instance, when profiling a 4096 x 4096 texture, you can see a "plateau" just before 1500ms which corresponds to a call to texImage2D in Three.js and WebGL. Subsequently, there are two calls to requestAnimationFrame followed by an unexplained gap.

What could be causing this delay? Could it be related to some underlying WebGL code in Chrome that is not captured by the profiler? Why does the initial call to texImage2D take 90 ms, while the subsequent blank spot occurs? One would expect all the GPU texture loading work to be completed within that duration.

Here is a link where you can observe the behavior firsthand.

javascriptgoogle-chromethree.jswebgl

Answer №1

When dealing with a texture as large as 4096 x 4096, the process of transferring all the data to the GPU can be time-consuming. If you are making successive calls to texImage2D followed by drawArrays right after, keep in mind that the drawArray operation will have to wait until the uploading process in the texImage2D is complete. This delay is what accounts for the slowdown seen in the profiler results.

Answer №2

After some investigation, it appears that the issue lies with the function requestAnimationFrame. Here are two comparisons to demonstrate:

requestAnimationFrame:

https://i.sstatic.net/r91dR.png

setTimeout:

https://i.sstatic.net/gQoFb.png

This poses a significant challenge as many WebGL tutorials emphasize that using requestAnimationFrame is the preferred method for creating an animation loop.

Check out the updated demo here.

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

What is the reason behind these sinon stubs returning undefined values?

I have created a unit test for this code snippet and used Sinon to stub the browser methods (specifically with sinon-chrome, an older but still functional library that suits my needs). /** * Returns an array of languages based on getAcceptLanguages and ge ...

javascriptnode.jsmocha.jschaisinon

Navigating Error: net::ERR_CONNECTION while utilizing Puppeteer

I attempted to utilize a proxy from the following site: Below is my Puppeteer scraping code (deployed on Heroku), encountering an error at the .goto() method, as mentioned in the title: const preparePageForTests = async (page) => { const userAgent = & ...

javascriptnode.jsherokuweb-scrapingpuppeteer

What's the best approach for implementing TimeInput exclusively in React-Admin?

I discovered this helpful code snippet on the React-Admin documentation that allows me to input both a date and time: import { DateTimeInput } from 'react-admin'; <DateTimeInput source="published_at" /> But now I'm wonderin ...

javascriptreactjsreact-admin

What is the process for retrieving data from mongoDB and displaying it by year in a single row?

I have received an array of data from MongoDB, which includes id, userName, and date. The date consists of years and months. My goal is to display this data categorized by years. How can I construct a query to the database that will show the data for all y ...

javascriptnode.jsmongodb

Discover how to use your own search engine suggestions within the search bar of Google Chrome

I recently created a search engine on my website, and everything seems to be working perfectly when I visit the search page. However, I wanted to streamline the process by searching directly from the search box in Chrome. After adjusting the settings to ...

javascriptphpajax

Unable to save text to file in both Javascript and PHP

I'm facing an issue with my website signup form. It consists of fields for email and password. The HTML triggers a JavaScript function which, in turn, calls PHP code to save the email to a file on the server. While the JavaScript seems to be functioni ...

javascriptphpajax

Displaying the state in NextJS rather than revealing server error messages

I recently implemented a register page on my NextJS app where users can input their information. Once the registration is successful, the form clears and a success message is displayed. However, I encountered an issue after adding the success message. Now ...

javascriptreactjsnext.js

Update a section of my PHP webpage using setInterval()

How can I refresh a PHP value every second using setInterval()? I am familiar with refreshing values in HTML, but now I want to do the same with PHP values. Here is my code: <script> setInterval(function() { <?php $urlMachineOnline = ' ...

javascriptphpjqueryhtmlajax

Using a custom TypeScript wrapper for Next.js GetServerSideProps

I developed a wrapper for the SSR function GetServerSideProps to minimize redundancy. However, I am facing challenges in correctly typing it with TypeScript. Here is the wrapper: type WithSessionType = <T extends {}>( callback: GetServerSideProps&l ...

javascriptreactjstypescripttypesnext.js

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

Understanding the significance of underscores in JavaScript strings

Some places mention using _() around strings like _('some string'). For instance, in a desktop program with these imports: const Applet = imports.ui.applet; const St = imports.gi.St; const Gdk = imports.gi.Gdk; const Gtk = imports.gi.Gtk; const ...

javascriptlinux

The Axios.get function is mistakenly returning raw HTML instead of the expected JSON data

I'm new to using react js and am currently attempting to retrieve data from the database by utilizing axios.get within the componentDidMount lifecycle method. The code snippet below shows how I am trying to fetch products. My setup involves using reac ...

javascriptreactjslaravelaxios

Error: The object #<HTMLCollection> does not support the 'tags' method

While trying to troubleshoot this issue, it seems like I haven't been able to pinpoint the simple solution. This particular javascript menu works perfectly in IE, however in Chrome, there is an error when trying to open the menu with a first-level cli ...

javascripthtml

Using the getAttribute method in Edge with JavaScript

My goal is to dynamically load videos on the page after it has fully loaded. I have a script that successfully works in Firefox and Chrome, but I encounter errors when using Edge/IE. The specific error message I receive is SCRIPT5007: Unable to get propert ...

javascriptinternet-explorer

Revamp your JavaScript code to trigger when the clock strikes bold!

Having trouble setting up JavaScript to automatically bold the next clock time. Any tips on rewriting the JavaScript? For instance, if it is currently 6:49, I want the next clock time of 7:32 to be automatically bolded. And when the time reaches 7:32, I wa ...

javascript

The onchange() function for a multi-checkbox dropdown is failing to work as

Issue with Multiple Drop Down Checkbox Functionality: The first parameter is always received as undefined, and the onchange event only captures the value of the first checkbox selected. <select name="multicheckbox[]" multiple="multiple" class="4colacti ...

javascriptjqueryhtmlajax

Retrieve the output of a Node.js function

I have a function that extracts data from a website and displays it in the console. However, I now want to return this data so I can perform additional actions with it. Instead of using console.log(temperature), I would like to retrieve the temperature v ...

javascriptnode.jsexpressreturncheerio

Structural engineering for massive webpage

Currently I am in the process of building a large page using AngularJS. As I plan out the architecture for this page, I am debating which approach would be most effective. The page consists of 3 distinct blocks with various functionalities, but the prima ...

javascriptangularjsarchitecturecontroller

Tips for differentiating between elements with identical values in an HTML datalist using Angular

My boss is insisting that I use a datalist in our website interface to select an employee, even though there's no way to determine if the user typed in the name or picked from the list. The challenge is that the list must only display full names, but ...

javascriptangulartypescripthtml-datalist