为何我的基准测试中WebGPU性能远逊于WebGL？

我在Win11系统的最新Chrome Canary浏览器中（已禁用垂直同步、解锁帧率）进行性能基准测试，发现WebGPU的FPS仅为WebGL的约1/3，无法定位原因。已调整Chrome多项设置，确认WebGPU硬件加速正常，但测试时WebGPU的CPU占用升高、GPU占用降低，与预期相反。

我想制作WebGL与WebGPU在典型场景下的简单基准测试，纠结是继续使用THREE.js还是从零开发。

测试代码如下：

import * as THREE from 'three';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';

var stats0 = new Stats();
stats0.showPanel( 0 );
stats0.domElement.style.cssText = 'position:fixed;bottom:20px;left:0px;';
document.body.appendChild( stats0.dom );

function setupScene() {
    const scene = new THREE.Scene();
    scene.background = new THREE.Color("#0d0c18");
    return scene;
}

function setupCamera() {
    const camera = new THREE.PerspectiveCamera(75, 16 / 9, 0.1, 1000);
    camera.position.set(1, 1, 100);
    camera.lookAt(0, 0, 0);
    return camera;
}

function setupWebGLRenderer() {
    const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( 1600, 900 );
    document.body.appendChild(renderer.domElement);
    return renderer;
}

function setupWebGPURenderer() {
    const renderer = new WebGPURenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( 1600, 900 );
    document.body.appendChild( renderer.domElement );
    return renderer;
}

function createGeometry(scene) {
    const geometry = new THREE.SphereGeometry( 1, 32, 16 ); //Verts:482, Edges: 992, Faces: 512, Tris: 960
    const NUM_OBJECTS = 5000;
    for (let i = 0; i < NUM_OBJECTS; i++) {
        const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: 0x00ff00 });
        const cubeMesh = new THREE.Mesh(geometry, material);
        cubeMesh.position.x = Math.random() * 200 - 105;
        cubeMesh.position.y = Math.random() * 110 - 55;
        cubeMesh.position.z = Math.random() * 100 - 80;
        scene.add(cubeMesh);
    }
}

async function animate(scene, camera, renderer, rendererType, stats0) {
    async function render() {
        requestAnimationFrame(render);

        if (rendererType === 'webgl')
        {
            await renderer.clear();
        } else {
            await renderer.clearAsync();
        }
        
        scene.traverse((object) => {
            if (object instanceof THREE.Mesh) {
                object.rotation.x += 0.005;
                object.rotation.y += 0.01;
            }
        });

        if (rendererType === 'webgl')
        {
            await renderer.render(scene, camera);
        } else {
            await renderer.renderAsync(scene, camera);
        }

        //fps counter
        stats0.update();
    }
    
    await render();
}

export function loadGeometryBenchmark(rendererType, stats0) {

    const scene = setupScene();
    const camera = setupCamera();
    let renderer = null
    if (rendererType === 'webgl')
    {
        console.info('WebGL selected');
        renderer = setupWebGLRenderer();
    } else {
        console.info('WebGPU selected'); 
        renderer = setupWebGPURenderer();
    }
    createGeometry(scene);
    animate(scene, camera, renderer, rendererType, stats0);
}

内容的提问来源于stack exchange，提问作者Adrian Mikołajczyk