WebGPURenderer: Get fallback approach (#29218)

src/renderers/common/Renderer.js

@@ -45,7 +45,8 @@ class Renderer {
 			logarithmicDepthBuffer = false,
 			alpha = true,
 			antialias = false,
-			samples = 0
+			samples = 0,
+			getFallback = null
 		} = parameters;
 
 		// public
@@ -80,6 +81,8 @@ class Renderer {
 
 		// internals
 
+		this._getFallback = getFallback;
+
 		this._pixelRatio = 1;
 		this._width = this.domElement.width;
 		this._height = this.domElement.height;
@@ -185,7 +188,7 @@ class Renderer {
 
 		this._initPromise = new Promise( async ( resolve, reject ) => {
 
-			const backend = this.backend;
+			let backend = this.backend;
 
 			try {
 
@@ -193,8 +196,28 @@ class Renderer {
 
 			} catch ( error ) {
 
-				reject( error );
-				return;
+				if ( this._getFallback !== null ) {
+
+					// try the fallback
+
+					try {
+
+						this.backend = backend = this._getFallback( error );
+						await backend.init( this );
+
+					} catch ( error ) {
+
+						reject( error );
+						return;
+
+					}
+
+				} else {
+
+					reject( error );
+					return;
+
+				}
 
 			}
 

src/renderers/webgpu/WebGPURenderer.js

@@ -1,5 +1,3 @@
-import WebGPU from '../../../examples/jsm/capabilities/WebGPU.js';
-
 import Renderer from '../common/Renderer.js';
 import WebGLBackend from '../webgl-fallback/WebGLBackend.js';
 import WebGPUBackend from './WebGPUBackend.js';
@@ -27,15 +25,17 @@ class WebGPURenderer extends Renderer {
 
 			BackendClass = WebGLBackend;
 
-		} else if ( WebGPU.isAvailable() ) {
+		} else {
 
 			BackendClass = WebGPUBackend;
 
-		} else {
+			parameters.getFallback = () => {
 
-			BackendClass = WebGLBackend;
+				console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+
+				return new WebGLBackend( parameters );
 
-			console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+			};
 
 		}