I'm migrating my project from WebGLRenderer to WebGPURenderer in Lume (which uses Three.js for rendering), and I'm running into an issue where object transformations are misaligned on screen.

I performed a simple swap in my code: replaced instances of WebGLRenderer with WebGPURenderer and made minor adjustments (for example, removing unsupported properties like .premultipliedAlpha). However, after this change, the scene no longer positions objects correctly. Note that all meshes have .matrixAutoUpdate set to false and Lume manually updates their transforms.

Below is the patch applied to test WebGPURenderer in Lume. The file WebglRendererThree.ts (which will be abstracted further to support different renderers such as WebGPURenderer, WebgpuRendererPlaycanvas, WebglRendererBabylon, etc.) is shown in its current, not-yet-simplified form:

DIFFCopied
diff --git a/src/renderers/WebglRendererThree.ts b/src/renderers/WebglRendererThree.ts
index a6b17da81..d019381c3 100644
--- a/src/renderers/WebglRendererThree.ts
+++ b/src/renderers/WebglRendererThree.ts
@@ -1,18 +1,18 @@
 import {reactive, signal, Effects} from 'classy-solid'
-import {WebGLRenderer} from 'three/src/renderers/WebGLRenderer.js'
+import WebGPURenderer from 'three/src/renderers/webgpu/WebGPURenderer.js'
 import {BasicShadowMap, PCFSoftShadowMap, PCFShadowMap} from 'three/src/constants.js'
-import {PMREMGenerator} from 'three/src/extras/PMREMGenerator.js'
+import PMREMGenerator from 'three/src/renderers/common/extras/PMREMGenerator.js'
 import {TextureLoader} from 'three/src/loaders/TextureLoader.js'
 import {Motor} from '../core/Motor.js'
-import {triangleBlurTexture} from '../utils/three/texture-blur.js'
+// import {triangleBlurTexture} from '../utils/three/texture-blur.js'
 import './handle-DOM-absence.js'
-import {VRButton} from 'three/examples/jsm/webxr/VRButton.js'
+// import {VRButton} from 'three/examples/jsm/webxr/VRButton.js'
 // TODO import {ARButton}  from 'three/examples/jsm/webxr/ARButton.js'
 import type {Scene} from '../core/Scene.js'
 import type {Texture} from 'three/src/Three.js'

 interface SceneState {
-	renderer: WebGLRenderer
+	renderer: WebGPURenderer
  pmremgen?: PMREMGenerator
  hasBg?: boolean
  bgIsEquirectangular?: boolean
@@ -22,7 +22,7 @@ interface SceneState {
  effects: Effects
 }

-let instance: WebglRendererThree | null = null
+let instance: WebgpuRendererThree | null = null
 let isCreatingSingleton = false

 /** @typedef {'pcf' | 'pcfsoft' | 'basic'} ShadowMapTypeString */
@@ -35,13 +35,13 @@ export type ShadowMapTypeString = 'pcf' | 'pcfsoft' | 'basic'
  */
 export
 @reactive
-class WebglRendererThree {
+class WebgpuRendererThree {
  static singleton() {
		if (instance) return instance
 		else {
 			try {
 				isCreatingSingleton = true
-				return (instance = new WebglRendererThree())
+				return (instance = new WebgpuRendererThree())
 			} catch (e) {
 				throw e
 			} finally {
@@ -69,10 +69,10 @@ class WebglRendererThree {
 	if (sceneState) return
 	
 	// TODO: options controlled by HTML attributes on scene elements.
-	const renderer = new WebGLRenderer({
+	const renderer = new WebGPURenderer({
 		// TODO: how do we change alpha:true to alpha:false after the fact?
 		alpha: true,
-		premultipliedAlpha: true,
+		// premultipliedAlpha: true, // not applicable for WebGPURenderer
 		
 		antialias: true,
 	})
@@ -114,6 +114,7 @@ class WebglRendererThree {
 	scene._glLayer?.removeChild(sceneState.renderer.domElement)
 	
 	sceneState.renderer.dispose()
+	// @ts-expect-error no type yet
 	sceneState.pmremgen?.dispose()
 	sceneState.effects.stopEffects()
 	
@@ -208,6 +209,7 @@ class WebglRendererThree {
 		// Load the PMREM machinery only if needed.
 		if (!state.pmremgen) {
 			state.pmremgen = new PMREMGenerator(state.renderer)
+		// @ts-expect-error no type yet
 			state.pmremgen.compileCubemapShader()
 		}
 	}
@@ -227,6 +229,7 @@ class WebglRendererThree {
 	this.#bgVersion += 1
 	
 	if (!state.hasBg && !state.hasEnv) {
+		// @ts-expect-error no type yet
 		state.pmremgen?.dispose()
 		state.pmremgen = undefined
 	}
 	
@@ -255,20 +258,22 @@ class WebglRendererThree {
 		state.bgTexture = triangleBlurTexture(state.renderer, tex, blurAmount, 2)
 		tex.dispose()
 		tex = state.bgTexture
 	
 		}
 	
 		if (state.bgIsEquirectangular) {
+		// @ts-expect-error no type yet
 		state.bgTexture = state.pmremgen!.fromEquirectangular(tex).texture
 		t.dispose() // might not be needed, but just in case.
 		} else {
 			state.bgTexture = tex
 		}
 	
-		cb(state.bgTexture)
+		cb(state.bgTexture!)
 	
 	})
 }	
@@ -290,7 +295,7 @@ class WebglRendererThree {
 		state.pmremgen = new PMREMGenerator(state.renderer)
-		state.pmremgen.compileCubemapShader()
+		// state.pmremgen.compileCubemapShader() // not needed for gpu renderer?
 	}
 	
 		state.hasEnv = true
@@ -308,7 +313,7 @@ class WebglRendererThree {
 		this.#envVersion += 1
 	
 		if (!state.hasBg && !state.hasEnv) {
-			state.pmremgen?.dispose()
+			// state.pmremgen?.dispose() // not needed for gpu renderer?
 			state.pmremgen = undefined
 	}
 	
@@ -334,10 +339,11 @@ class WebglRendererThree {
 			if (version !== this.#envVersion) return
 	
+		// @ts-expect-error no type yet
 		state.envTexture = state.pmremgen!.fromEquirectangular(tex).texture
 		t.dispose() // might not be needed, but just in case.
 	
-		cb(state.envTexture)
+		cb(state.envTexture!)
 		})
 }	
@@ -346,21 +352,14 @@ class WebglRendererThree {
 		if (!state) throw new ReferenceError('Unable to request frame. Scene state should be initialized first.')
 	
 		const {renderer} = state
-		if (renderer.setAnimationLoop)
-			// >= r94
-			renderer.setAnimationLoop(fn)
-		else if (renderer.animate)
-			// < r94
-			renderer.animate(fn as () => void)
+		renderer.setAnimationLoop(fn)
 }	
 	
 // TODO: at the moment this has only been tested toggling it on
-// once. Should we be able to turn it off too (f.e. the vr attribute is removed)?
-// TODO Update to WebXR (WebXRManager in Three)
+	// once. Should we be able to turn it off too (f.e. the xr attribute is removed)?
 	enableVR(scene: Scene, enable: boolean) {
 		const state = this.sceneStates.get(scene)
-		if (!state) throw new ReferenceError('Unable to enable VR. Scene state should be initialized first.')
+		if (!state) throw new ReferenceError('Unable to enable XR. Scene state should be initialized first.')
 		
 		const {renderer} = state
 		renderer.xr.enabled = enable
 	@@ -370,10 +369,12 @@ class WebglRendererThree {
 	
 // TODO Update to WebXR
 	createDefaultVRButton(scene: Scene): HTMLElement {
 		const state = this.sceneStates.get(scene)
-		if (!state) throw new ReferenceError('Unable to create VR button. Scene state should be initialized first.')
+		if (!state) throw new ReferenceError('Unable to create XR button. Scene state should be initialized first.')
 		
-		const {renderer} = state
-		return VRButton.createButton(renderer)
+		// TODO port to WebGPURenderer
+		// const {renderer} = state
+		// return VRButton.createButton(renderer)
+		return document.createElement('div')
 	}
 }

This file is part of a draft abstraction layer that allows swapping out different renderer implementations for Lume. The goal is to standardize 3D features across multiple renderers, making the underlying technology interchangeable.

Any ideas on why the transforms are not applying correctly? Could it be related to manually updating matrices or an edge case in the WebGPU mode?