Some maps cause low performance

[MrYang614]

Description

My r183 webgpu project has low performance than webgl.
I spent some time conducting comparative experiments and identified the root cause of the issue.

In webgpu renderer , normalMap and aoMap will cause the gpu overload and lose many frames ( i am not sure other maps can cause the same problem , I think there's a high probability of that happening.)

Reproduction steps

1. r183 webgpu render
2. load gltf with aoMap or normalMap
3. change the window size can magnify this problem
4. observe the scene or open F12 performance record.

I can not provide the live example because the model is property of the company
I provide some screenshots helps find the root of the problem

Code

			new GLTFLoader().load('./models/gltf/建筑外立面.glb', function (gltf) {

				scene.add(gltf.scene);

				gltf.scene.children.forEach(child => {
					child.traverse(node => {
						if (node.isMesh) {
                                                        // the model with aoMap and normalMap , this 2 line can open or close the problem.
							node.material.aoMap = null
							node.material.normalMap = null
						}
					})
					t.push(child)
				});

			});

Live example

• jsfiddle-latest-release WebGLRenderer

Screenshots

1. webgpu set aoMap and normalMap

2. webgpu set aoMap and normalMap null 3. webgpu set aoMap and normalMap and change window size 4. webgpu set aoMap and normalMap null and change window size 5. webgl set aoMap and normalMap

Version

183

Device

Desktop

Browser

Edge

OS

Windows

[MrYang614]

F12 Performance recording show the problem is in gpu overload. This problem occurs intermittently.

[Mugen87]

I can not provide the live example because the model is property of the company. I provide some screenshots helps find the root of the problem

Can you maybe reproduce the issue with a glTF model from our repository? E.g.:

https://threejs.org/examples/webgpu_loader_gltf

I'm afraid screenshots alone won't be helpful in order to investigate the issue. We need a live example so we can actually reproduce the issue on our systems.

BTW: Do you have the same issue with r182? Or is this new in r183?

[Makio64]

Your GPU is already at a limit not reaching the 120fps on first one, so any operation you add will lower the fps.
Normal map & ao map add more operation on the gpu ( reading the texture in fragment ), but here im suspecting 2 things : overdraw + too many vertex / mesh.

You can also use compress texture ( ill recommend ktx2 format, but on normal you have to encoded it with special arguments ) for gpu friendly optimized texture.

Also reducing the windows reduce the number of pixel on screen making it faster, does the fps goes up when you increase the size on resize ? your screenshot show fps goes higher with less pixel in the viewport

[MrYang614]

你的显卡已经达到了第一张卡的120fps上限，所以你添加的任何作都会降低帧率。法线贴图和AO贴图会增加GPU上的作（读取片段中的纹理），但我这里怀疑两个原因：过度绘制+顶点/网格过多。

你也可以用压缩纹理（我推荐ktx2格式，但普通模式需要用特殊参数编码）来优化显卡友好的纹理。

缩小窗口会减少屏幕上的像素数，速度会更快，调整大小时帧率会提升吗？你的截图显示，视口像素减少时帧数会更高

我无法提供现场示例，因为模型属于公司所有。我提供一些截图，帮助找出问题根源

你能不能用我们仓库里的 glTF 模型重现这个问题？例如：

https://threejs.org/examples/webgpu_loader_gltf

恐怕仅凭截图无法帮助调查问题。我们不是活生生的例子，所以实际上可以在我们的系统上重现这个问题。

顺便问一下：你有同样的问题吗？还是说这是新的？r182``r183

I used the model from examples and haven't encountered this issue yet, but it still occurs in my model specifically under webGPU rendering.I will continue to try to provide more clues. I try the examples/gltf/BoomBox.glb haven't encountered. The model I'm currently replicating has 70,000 vertices and multiple AOMAPs, resulting in a 14MB file size.I will consult with the company leadership to provide this model.I suspect this might be related to multiple AO textures.

[MrYang614]

你的显卡已经达到了第一张卡的120fps上限，所以你添加的任何作都会降低帧率。法线贴图和AO贴图会增加GPU上的作（读取片段中的纹理），但我这里怀疑两个原因：过度绘制+顶点/网格过多。

你也可以用压缩纹理（我推荐ktx2格式，但普通模式需要用特殊参数编码）来优化显卡友好的纹理。

缩小窗口会减少屏幕上的像素数，速度会更快，调整大小时帧率会提升吗？你的截图显示，视口像素减少时帧数会更高

But I change to webgl renderer have no problem . I suspect this might be related to multiple AO textures.

[Mugen87]

Closing until an asset for reproduction is provided.