Tres WebGPU broken on three v181

[JaimeTorrealba]

Describe the bug

It start happen when update the version of threejs to the new 181

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction-vcbxobzm?file=src%2FApp.vue

Steps to reproduce

Is on stackblitz, if needed npm install && npm run dev

System Info

npm, window, stackblitz


  "dependencies": {
    "@tresjs/core": "5.0.2",
    "@tresjs/leches": "^0.14.0",
    "three": "^0.181.0",
    "unocss": "^66.1.0-beta.5",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[edgexie]

them error in windows11, chrome 142.0.7444.176, but on my mac chrome, there is not this error

[alvarosabu]

Three.js r181 introduced breaking changes to WebGPU renderer initialization (PR #24755):

1. Deprecated async methods: renderAsync(), computeAsync(), hasFeatureAsync(), etc. were deprecated
2. Stricter initialization: await renderer.init() is now required before calling any sync methods or setting properties
3. New recommended pattern: Use renderer.setAnimationLoop() for automatic initialization, or explicitly await renderer.init() for manual control

Why It Worked Before r181

Prior to r181, WebGPU renderer methods were more lenient about async initialization. The async variants (renderAsync(), etc.) handled partial initialization states internally, allowing some operations to work even if initialization wasn't complete.

Why TresJS Breaks Now

TresJS's useRendererManager calls renderer.init() but doesn't await it (source):

if (isRenderer(renderer)) {
  renderer.init()  // ❌ Not awaited - returns a Promise
  readyEventHook.trigger(renderer)  // Triggers immediately
}

Then it immediately tries to:

• Set renderer properties (setClearColor, toneMapping, shadowMap.enabled, etc.)
• Start the render loop
• Call renderer.render()

All these operations happen on a Promise instead of the initialized renderer instance, causing the error you're seeing.

The Fix

We haven't decide yet.

---

Sources:

• https://github.com/mrdoob/three.js/releases/tag/r181
• WebGPURenderer: Move .init() to private and added .setAnimationLoop() mrdoob/three.js#24755
• https://discourse.threejs.org/t/webgpu-r181-error-notice-has-featureasync-has-been-deprecated/87944