WebGPURenderer: Models with morphs are less performant

[0b5vr]

Description

I'm trying to improve the rendering performance of three-vrm on WebGPURenderer.

During my profiling, I found that models with morphs have much lesser GPU performance compared to the same model without morphs.

Reproduction steps

1. Load a GLTF model with morphs
2. Render
3. See the value renderer.info.render.timestamp

Code

const loader = new GLTFLoader();
const gltf = await loader.loadAsync(url); // a model with morphs
scene.add(gltf.scene);

Live example

Here is my fixture.

This loads the same model under 4 different finishes (without skins and morphs, with morphs, with skins, with both) and calculates the runtime CPU/GPU performance. Each model is rendered for 100 frames and does the same profiling for five sets.
On the "result" row of the textarea, the second column indicates the model name, the third is the mean CPU time, and the fourth is the mean GPU time.

I used renderer.info.render.timestamp to profile the GPU performance on WebGPU; I'm not sure how reliable this value is.

https://three-webgpu-profile-morphs.glitch.me/
https://glitch.com/edit/#!/three-webgpu-profile-morphs

Here is the result on my machine (Alienware x16 r1, Intel i9-13900HK, NVIDIA RTX 4070 Laptop):

model	webgl cpu (ms)	webgpu cpu (ms)	webgl gpu (ms)	webgpu gpu (ms)
AvatarSample_B_.glb	0.5560000007	0.7353999989	0.160837632	0.52953088
AvatarSample_B_morph.glb	0.4741999991	0.7295999993	0.08183808	1.796866048
AvatarSample_B_skin.glb	0.5308000017	0.7617999989	0.151005184	0.383254528
AvatarSample_B_both.glb	0.6412000004	0.8019999999	0.12335872	1.027211264

Screenshots

No response

Version

r170

Device

Desktop

Browser

Chrome

OS

Windows

[Samsy]

Also noticing skeletons meshes are slower on WebGPU backend