WebGPURenderer: Potential performance regression starting with r176.

[Jenychen1996]

Description

Using WebGPURenderer, when comparing the R171 version with the R178 and dev versions, it was found that the rendering frame rate of the dev version was lower than that of the R171 version for the same model.

renderer.info.render:
{
"calls": 4960,
"frameCalls": 2,
"drawCalls": 4493,
"triangles": 1347487,
"points": 0,
"lines": 0,
"timestamp": 0,
"previousFrameCalls": 2,
"timestampCalls": 0
}

Hardware Information:
Processor: Intel(R) Xeon(R) W-2245 CPU @ 3.90GHz 3.91 GHz
Memory: 64.0 GB (63.7 GB available)
Graphics Card: NVIDIA RTX A4000

Reproduction steps

1. Using different versions of three.js
2. Loading models
3. Comparing frame rate performance

Code

<html lang="en">

<head>
    <title>three.js webgl - animation retargeting</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>

    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation retargeting
    </div>

    <script type="importmap">
        {
            "imports": {
                "three": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
                "three/webgpu": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
                "three/addons/": "https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three/webgpu';

        import Stats from 'three/addons/libs/stats.module.js';

        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
        import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

        let camera, scene, renderer, stats, controls;

        init();

        function init() {
            renderer = new THREE.WebGPURenderer({
                antialias: true,
                logarithmicDepthBuffer: true,
                powerPreference: "high-performance"
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setClearColor(0x000000, 0.0);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setAnimationLoop(animate);
            document.body.appendChild(renderer.domElement);

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xcccccc)

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100000);
            camera.position.set(1000, 1000, 1000);

            controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;

            stats = new Stats();
            document.body.appendChild(stats.dom);

            window.scene = scene;
            window.renderer = renderer;
            window.camera = camera;

            const light = new THREE.HemisphereLight(0xe9c0a5, 0x0175ad, 5);
            scene.add(light);

            const dirLight = new THREE.DirectionalLight(0xfff9ea, 4);
            dirLight.position.set(2, 5, 2);
            scene.add(dirLight);

            const axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);

            window.addEventListener('resize', onWindowResize);
            onWindowResize();

            loadGltf();
        }

        function loadGltf() {
           // Note: Perhaps you need to switch to a corresponding model dataset. When we compared it with our own business data, the frame rate dropped by about 4 frames. The model below is for example
            const url = `https://threejs.org/examples/models/gltf/LittlestTokyo.glb`;

            const dracoPath = 'https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/libs/draco/gltf/';
            const gltfLoader = new GLTFLoader();
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath(dracoPath);
            dracoLoader.preload();
            gltfLoader.setDRACOLoader(dracoLoader);
            console.log('start load gltf');
            console.time('load gltf');

            let materialUUIDMap = new Map();
            gltfLoader.load(url, function (data) {
                const mesh = data.scene;
                console.timeEnd('load gltf');
                mesh.traverse(child => {
                    if (child.isMesh) {
                        let material = child.material;
                        if (!materialUUIDMap.has(material.uuid)) {
                            const {
                                uuid,
                                name,
                                side,
                                map,
                                roughness,
                                metalness
                            } = material;
                            const nodeMaterial = new THREE.MeshStandardNodeMaterial({
                                name,
                                side,
                                map,
                                roughness,
                                metalness,
                            });
                            materialUUIDMap.set(uuid, nodeMaterial);
                        }

                        child.material = materialUUIDMap.get(material.uuid);
                        child.material.needsUpdate = true;
                        material.dispose();
                        material = undefined;
                    }
                })
                // gltfMesh = mesh;
                for (var i = 0; i < 15; i++) {
                    let clonemesh = mesh.clone()

                    scene.add(clonemesh);
                }

                // scene.add(mesh);
                materialUUIDMap.clear();
                materialUUIDMap = undefined;
            })
        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);


        }

        function animate() {

            stats.update();

            controls.update();

            renderer.render(scene, camera);


        }


    </script>
</body>

</html>

Live example

Screenshots

No response

Version

r171,r178,dev

Device

Desktop

Browser

Chrome

OS

Windows

[Mugen87]

I have prepared a few live examples for easier performance comparison:

r172: https://jsfiddle.net/fzg69rh8/5/
r182: https://jsfiddle.net/fzg69rh8/6/
r183dev: https://jsfiddle.net/sqc214jn/

With Firefox on a macMini M2 Pro I get:

r172: 40 FPS
r182: 38 FPS
r183dev: 42 FPS

So I can see a minor performance regression in this particular test. However, the current dev version performs best (there were some small optimization lately). Can you give the current dev build a try?

[Jenychen1996]

Have you tried opening only this one URL in your browser?

1. Open r172 using only the browser and observe the frame rate.
2. Open r182 or dev using only the browser and observe the frame rate.
   I just tried it on a machine with integrated graphics (Intel UHD Graphics 770) and two machines with dedicated graphics (NVIDIA RTX A4000 and GeForce RTX 5080), and I observed significantly different frame rate results.

[Mugen87]

Have you tried opening only this one URL in your browser?

On what URL are you referring?

[Jenychen1996]

Have you tried opening only this one URL in your browser?

On what URL are you referring?

It's the url you provided above.
r172: https://jsfiddle.net/fzg69rh8/5/
r182: https://jsfiddle.net/fzg69rh8/6/
r183dev: https://jsfiddle.net/sqc214jn/

[Mugen87]

I have shared my performance data in #32675 (comment).

I've tested on macOS. I had not the chance to test on different OS.

I observed significantly different frame rate results.

Can you please share the FPS on your system like I did?

[Jenychen1996]

Can you please share the FPS on your system like I did?

Note	The browser only opens one tab.
OS	Test Url	Intel UHD Graphics 770	NVIDIA RTX A4000	GeForce RTX 5080
windows	r172: https://jsfiddle.net/fzg69rh8/5/	53-55	26	65-66
windows	r182: https://jsfiddle.net/fzg69rh8/6/	32-34	17	37-38
windows	r183dev: https://jsfiddle.net/sqc214jn/	34-35	17	40-41

[Mugen87]

I currently don't have a Windows device around but I see if I can organize one in the next days.

[Jenychen1996]

Thank you very much for your reply. If you need any assistance, please feel free to contact me. I will also test it on Firefox tomorrow.

Test results for Firefox 146.0.1 browser are here.

	OS	Test Url	Intel UHD Graphics 770	NVIDIA RTX A4000	GeForce RTX 5080
"FireFox-146.0.1"	windows	r172: https://jsfiddle.net/fzg69rh8/5/	37-39	NA	41-45
"FireFox-146.0.1"	windows	r182: https://jsfiddle.net/fzg69rh8/6/	31-33	NA	36-37
"FireFox-146.0.1"	windows	r183dev: https://jsfiddle.net/sqc214jn/	33-34	NA	37-39

[Mugen87]

I had the chance to test on a Windows device and can confirm the performance regression. It wasn't my device so I could only do a quick test.

I did another test with an Android Device (Pixel 8a) and Chrome and I see a similar noticeable performance drop starting with r176.

[Mugen87]

I'm a bit irritated how inconsistent the measurements are. Depending on the order of the tests and how often I repeat it, I get different results. It's possible that when switching the WebGPU app or when reloading, browser resources are not properly cleaned up which affects the applications frame rate. Maybe it's better to test with the WebGL 2 backend instead.

r172: https://jsfiddle.net/4oma1vck/
r182: https://jsfiddle.net/dhv016r5/
r183dev: https://jsfiddle.net/q15scfhw/

With Chrome on a macMini M2 Pro I get:

r172: 10 FPS
r182: 10 FPS
r183dev: 11 FPS

I've closed and reopen the browser after each test. Still on Android, the result in noticeably worse.

r172: 34 FPS
r182: 21 FPS
r183dev: 22 FPS

[Mugen87]

Note: After more analysis, I can say r176 and 178 noticeably increased the CPU load of the above demo. These are the CPU numbers of Chrome's task manager:

r172: ~23 %
r175: ~24 %
r176: ~34 %
r177: ~34 %
r178: ~43 %
r179: ~43 %
r180: ~43 %
r181: ~45 %
r182: ~48 %
r183dev: ~47 %