WebGPURenderer: MeshPhysicalMaterial creation is 10x slower than in WebGLRenderer

[hybridherbst]

Description

Creating a regular MeshPhysicalMaterial is 10x slower in WebGPURenderer compared to WebGLRenderer. The WebGL backend shows the same slowness.

From doing a performance trace, it looks like long chains of "getNodeType" happen on every creation, even for the same material parameters. Maybe something is not/incorrectly cached?

I do understand creating a material every frame is not something one should do; nonetheless, I believe it shouldn't be 10x slower.

Reproduction steps

1. Run the attached fiddle
2. Switch from "WebGPU" to "WebGL"
3. Note performance improves 10x

Code

  const material = new THREE.MeshPhysicalMaterial({
    color: new THREE.Color().setHSL(Math.random(), 0.7, 0.5),
    roughness: Math.random() * 0.5 + 0.25,
    metalness: Math.random() * 0.5,
    transparent: true,
    clearcoat: 1.0,
    transmission: 1.0,
    opacity: 0.8,
  });

Live example

• https://jsfiddle.net/12qu67yg/

Screenshots

No response

Version

r179

Related:

• TSL: Slow compilation time #31674
• Examples: Add TSL Procedural Wood Material #31640

[Mugen87]

#31691 introduces a first performance improvement. Before the PR I had around 70ms for 100 materials per frame, now it's 20ms 🎉.

Fiddle with latest build: https://jsfiddle.net/h8y0svto/2/

[Mugen87]

Merging into #31674.