Performance issue with WebGPURenderer in Windows Chrome

[danrossi]

Description

I thought I would try here first as my AB vanilla test produces less cpu resources compared to WebGPURenderer. I am not sure what it is doing but in Chrome I have consistent cpu usage of 20% and 3% gpu. In Canary its 5-10% cpu and 20% gpu. In the Vanilla example it is 1-2% cpu for chrome production and Canary. Hopefully the shader used in the vanilla example is relevant.

Reproduction steps

Updated WebGPURenderer

Code

Updated texture with

texture.colorSpace = THREE.SRGBColorSpace;

Live example

• WebGPURenderer with colorspace fix.
• Vanilla example

Screenshots

No response

Version

153dev

Device

No response

Browser

Chrome

OS

Windows

[danrossi]

I've been doing alot of AB testing. And it seems WebGLRenderer is also having issues so may not be WebGPU related although the cpu usage for WebGPU is higher.

WebGPURenderer needs a colorSpace on the video texture or there is an error. If I remove the colorSpace for WebGLRenderer I get that over exposed colour issue again but it produces less cpu. So WebGLRenderer also needs SRGBColorSpace set on the texture.

I have an 153dev build that doesn't have any cpu or colour issues or requirement for SRGBColorSpace but I'm not sure which date that build was for. I picked one from the dev branch and has the colour issue also.

https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular.html

The tests aren't updated yet but if this colorspace is removed the cpu is lower. I changed these tests to use the basic trimmed down shader I use personally and don't have the color issue. But if I add a colorspace back in it darkens the video.

https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular_nosrgb.html
https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular_r153.html

Update: I just checked the nosrgb example with my basic shader on Firefox and get very low cpu. But the same cpu usage as Chrome with colorspace set.

[danrossi]

For WebGLRenderer it's when the internal format is set to _gl.SRGB8_ALPHA8 because of srgb color space if set to _gl.RGBA8 there is low cpu for video textures. It might be the same problem for WebGPURenderer.

I'm updating the webgl demo with a shadernaterial showing lower cpu. I'm not sure if they are similar issues. I can't debug the webgpu renderer well yet. https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular_nosrgb.html

One thing I thought might be doing it comparing with the vanilla code. This map key is never get/set. So on each frame the shader is being setup again. The vanilla code does it external of the loop. Its because the shader string is being used as the map key. It should be a unique identifier of the shader string perhaps.

three.js/examples/jsm/renderers/common/Pipelines.js

Line 92 in cbe823c

let stageVertex = this.programs.vertex.get( nodeBuilder.vertexShader );

[sunag]

One thing I thought might be doing it comparing with the vanilla code. This map key is never get/set. So on each frame the shader is being setup again. The vanilla code does it external of the loop. Its because the shader string is being used as the map key. It should be a unique identifier of the shader string perhaps.

@danrossi Fixed this point.

[danrossi]

I don't want to spam the thread thanks. I did my own webgpu setup debug to compare with vanilla but can't find the issue, it's very significant cpu usage with video. The setups look exactly the same apart from buffers setup. If its a chrome problem I will report it. I think there is already a bug report for srgb when using SRGB8_ALPHA8 with webgl and was told it was unrelated but its clearly a problem with video textures.

Update: I get clear frame dropping at intervals with WebGPU. My cpu issue with WebGL doesn't drop frames. I reported that to Chrome. I'm not sure what to report with webgpu yet.

[danrossi]

I've discovered with the WebGL performance issue throttling to 30fps with video callback alleviates the issue. But the cpu usage is still 13% with webgpu. Not sure what to report to Chrome yet.

https://danrossi.github.io/three-webgpu-renderer/tests/webgpu_video_panorama_equirectangular_30fps.html

[danrossi]

I found the CPU usage issue it's another map key problem. The pipeline is being cleared and created on every loop.

three.js/examples/jsm/renderers/common/Pipelines.js

Line 202 in 40d18fd

if ( pipeline === undefined ) {

If I comment this out I get 1-2% cpu. But now the GPU usage is 30%. WegGL still performing better with the srgb fix.

three.js/examples/jsm/renderers/common/Pipelines.js

Line 254 in 40d18fd

this.caches.delete( pipeline.cacheKey );

[danrossi]

The latest commits lower the cpu, but now the gpu usage is 20%. WebGL usage is less. Is that intentional ?

at 60fps its 20-40% gpu for one video texture

https://danrossi.github.io/three-webgpu-renderer/tests/webgpu_video_panorama_equirectangular.html

Webgl with chrome srgb fix is significantly lower in cpu still also. Webgpu slightly higher

https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular_nosrgb.html

WebGPU at 30fps video callback is very low cpu and 2% gpu usage

https://danrossi.github.io/three-webgpu-renderer/tests/webgpu_video_panorama_equirectangular_30fps.html