Texture: Performance issues with hardware sRGB decode.

[clementroche]

Description

Since 0.152.0 VideoTexture takes a lot of GPU ressources, the larger the video the slower it gets.

Windows 11
NVIDIA GeForce RTX 3060 Ti

Maybe related to this commit https://github.com/mrdoob/three.js/pull/25752/commits
cc @donmccurdy

Reproduction steps

Open Chrome Devtools performance tab in v0.152.2 and you gonna notice GPU is busy

Code

See live examples

Live example

v0.152.2 https://codesandbox.io/s/three-0-152-2-videotexture-mj2y8m (bad performance)
v0.151.3 https://codesandbox.io/s/three-0-151-3-videotexture-1et5sq (good performance)

Screenshots

Version

">= 0.152.0"

Device

No response

Browser

Chrome

OS

Windows

[Mugen87]

Do you see similar performance issues on macOS or other OS as well? There was an issue with Chromium on Windows but it has been fixed for quite a while now: https://bugs.chromium.org/p/chromium/issues/detail?id=1256340

Can you also make a test with Firefox?

[donmccurdy]

On my laptop (MacBook Pro, Apple M1 Pro, Chromium-based browser) I don't see a difference, would be curious for the result in Firefox on Windows as well.

[clementroche]

@Mugen87 @donmccurdy i'm not familiar with Firefox devTool, it's hard to tell but i would say it's not as obvious as Chrome

[clementroche]

I see the difference using MacBook air M1 2020 but less compared to Windows

[toddka]

I also see a massive performance drop on my M1 macbook air between these two versions on Chrome.

I wonder if this is related to sRGB -> Linear encoding. I recently ran into an issue with updating a CanvasTexture animation and can only get reasonable performance if I set the texture encoding to Linear. Here's a minimal example:
https://codesandbox.io/s/2d-canvas-texture-encoding-performance-iphunc?file=/src/App.js

[Mugen87]

@toddka I see no FPS difference no matter using sRGB or linear-srgb. I'm on Chrome 114.0.5735.90, macOS 13.4 and a M2 Pro. Can you please quantify the difference in performance so we can compare your FPS values?

[toddka]

I'm on Chrome 114.0.5735.90, M1 2020 Macbook Air, MacOS Ventura 13.0.1.

Canvas width and height seem significant. If I decrease the canvas size FPS increases. I'm seeing the FPS drop from stable 60 FPS to 23-28 FPS when switching to texture.encoding = THREE.sRGBEncoding with a 1725x1280 canvas.

Let me know if I can provide anything more concrete in terms of performance numbers or repro. I'm also not sure if the issue in my sandbox is related to this, so happy to create another issue if requested! I've run into OP's video performance issue as well.

[Mugen87]

I've made a more intense test case and now I can confirm performance issues with hardware sRGB decode in Chrome. The following fiddles update a 4096x4096 canvas texture per frame:

(A) CanvasTexture with THREE.LinearSRGBColorSpace: https://jsfiddle.net/8p7tk5y9/3/
(B) CanvasTexture with THREE.SRGBColorSpace: https://jsfiddle.net/8p7tk5y9/2/

(A) runs with 60 FPS, (B) with 7 FPS. The entire tab becomes quite slow with (B).

I don't see this kind of performance difference with Firefox. Both fiddles run with 23 FPS.

Safari slows down from 15 to 8 FPS.

@donmccurdy Can you reproduce on your MacBook?

[arpu]

Chrome/114.0.5735.90 Linux ANGLE (AMD, AMD Radeon RX 460 Graphics (polaris11 LLVM 16.0.4), OpenGL 4.6 (Core Profile) Mesa 23.0.3)

(A) 60 FPS
(B) 4 FPS

[arpu]

DEV Chrome/115.0.5790.3 Linux ANGLE (AMD, Vulkan 1.3.238 (AMD Radeon RX 460 Graphics (RADV POLARIS11) (0x000067EF)), radv-23.0.3)], DRIVER_VENDOR=AMD, DRIVER_VERSION=23.0.3

(A) 60 FPS
(B) 60 FPS

[Mugen87]

Interesting. I've made a test with Chrome Canary (116.0.5809.0) and both fiddles run with 60 FPS!

[LeviPesin]

So it seems that the issue was fixed in Chrome 115?