WebGPU performance significantly slower (rendering non-instanced geometries)

Questions
,
1

I was trying to compare performance when using WebGPU and WebGL, by rendering 5000 non-instanced cube meshes. When using the WebGPU renderer I got an FPS of around ~20, with WebGL it was around ~130. This seems like a huge difference & I was wondering what the reason might be.

I tested this with chrome version 114.0.5735.199 & three.js version 0.154.0

This is my code:

import * as THREE from 'three';

import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

let camera, scene, renderer;

init();

function init() {

    if (WebGPU.isAvailable() === false) {
        document.body.appendChild(WebGPU.getErrorMessage());
        throw new Error('No WebGPU support');
    }

    const container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 2000);
    camera.position.set(0, 0, 20);

    scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial()
    material.color = new THREE.Color(0xff00ff)

    for (let i=0;i<1;i++)
    {
        const mesh = new THREE.Mesh(geometry, material)
        mesh.position.x += 0.001*i;
        mesh.position.y += 0.001*i;
        scene.add(mesh)
    }

    renderer = new WebGPURenderer();
    // renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(render);
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize);

    document.onclick = () => console.log(renderer.isWebGPURenderer ? renderer : renderer.info);

}

function onWindowResize() {

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

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

}

function render() {
    renderer.render(scene, camera);
}
2

If you could share a live example (CodePen, CodeSandbox, JSFiddle) it might be possible for other people to check whether they also get low fps for WebGPU rendering.

1 Like
3

For reproduction: three.js dev template - module - JSFiddle - Code Playground

I can confirm the performance issue.This needs a closer performance analysis to find out the bottleneck.

1 Like
4

Yes, I also experience drastic difference – 130fps vs 13fps.

5

Hello! Add one example for WebGL and one example for WebGPU.

6

the rendering result of any high-load model is that the number of webgpu frames is lower, and you can see that the CPU usage of webgpu is lower,This is also consistent with the real situation, but for some reason the number of rendering frames is very low.

7

The latest release r156 has implemented performance improvements to WebGPURenderer. The frame rate of the test fiddle has been improved from 27 FPS to 60 FPS on my Mac mini.

r154: three.js dev template - module - JSFiddle - Code Playground
r156: three.js dev template - module - JSFiddle - Code Playground

9

it’s solved