# WebGPU performance significantly slower (rendering non-instanced geometries)

**URL:** <https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135>\
**Category:** Questions\
**Tags:** performance, webgpu\
**Created:** [July 20, 2023, 8:44am UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135 "2023-07-20T08:44:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Csilla\_Lukacs](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/csilla_lukacs/32/38319_2.png) [@Csilla\_Lukacs](https://discourse.threejs.org/u/Csilla_Lukacs)\
**Post date:** [July 20, 2023, 8:44am UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/1 "2023-07-20T08:44:42Z")

</div>

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:

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 20, 2023, 1:47pm UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/2 "2023-07-20T13:47:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 20, 2023, 2:21pm UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/3 "2023-07-20T14:21:00Z")

</div>

For reproduction: [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/yfu5xwvd/3/)

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

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 20, 2023, 3:02pm UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/4 "2023-07-20T15:02:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 20, 2023, 3:33pm UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/5 "2023-07-20T15:33:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [September 8, 2023, 7:50am UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/6 "2023-09-08T07:50:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 8, 2023, 9:11am UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/7 "2023-09-08T09:11:13Z")

</div>

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](https://jsfiddle.net/yfu5xwvd/3/)  
`r156`: [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/9k2o4g0d/)

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [September 8, 2023, 9:31am UTC](https://discourse.threejs.org/t/webgpu-performance-significantly-slower-rendering-non-instanced-geometries/54135/9 "2023-09-08T09:31:14Z")

</div>

it’s solved