CODEWITHSUNDEEP
javascriptgoogle-chromethree.jswebgl
Brenden
Brenden

Reputation: 185

WebGL large texture causes hidden stalling in chrome

When initializing a large (4096 x 4096) texture in WebGL on Windows 10 (with Three.js) the main thread of chrome stalls for an appreciable amount of time while the profiler shows nothing happening.

Here's an example profile of a 4096 x 4096 texture: enter image description here

The "plateau" at a little before 1500ms is a call to texImage2D in Three.js and WebGL, then the requestAnimationFrame code gets called twice before the phantom gap shows up.

What causes this? Is there something happening with the underlying WebGL code in chrome that the profiler isn't reporting? Why does the call to texImage2D take 90 ms, and then the blank spot happens? I would expect all the work involving loading the texture to the GPU to happen there.

Here is a link that should reproduce the behavior.

Upvotes: 0

Views: 446

Answers (2)

Brenden
Brenden

Reputation: 185

It turns out that the problem here is with requestAnimationFrame. Here's two profiles to illustrate

requestAnimationFrame:

enter image description here

setTimeout:

enter image description here

This seems like a fairly huge problem since most WebGL tutorials that exist mention that requestAnimationFrame is the "correct" way to do an animation loop.

Updated demo here.

Upvotes: 0

WacławJasper
WacławJasper

Reputation: 3384

Well 4096 x 4096 is a large texture and it takes some time to transfer all the data to the GPU. If you are calling texImage2D then drawArrays immediately, the drawArray can not be executed until the uploading in the texImage2D is done. This explains the delay you are seeing in the profiler.

Upvotes: 1

Related Questions