Inspector: Introduce `forceWebGL` (#33074)

examples/jsm/inspector/Inspector.js

@@ -4,6 +4,7 @@ import { Profiler } from './ui/Profiler.js';
 import { Performance } from './tabs/Performance.js';
 import { Console } from './tabs/Console.js';
 import { Parameters } from './tabs/Parameters.js';
+import { Settings } from './tabs/Settings.js';
 import { Viewer } from './tabs/Viewer.js';
 import { setText, splitPath, splitCamelCase } from './ui/utils.js';
 
@@ -59,6 +60,9 @@ class Inspector extends RendererInspector {
 		const consoleTab = new Console();
 		profiler.addTab( consoleTab );
 
+		const settings = new Settings();
+		profiler.addTab( settings );
+
 		profiler.loadLayout();
 
 		if ( ! profiler.activeTabId ) {

examples/jsm/inspector/tabs/Parameters.js

@@ -314,7 +314,7 @@ class Parameters extends Tab {
 
 	constructor( options = {} ) {
 
-		super( 'Parameters', options );
+		super( options.name || 'Parameters', options );
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );

examples/jsm/inspector/tabs/Settings.js

@@ -0,0 +1,105 @@
+import { Parameters } from './Parameters.js';
+import { WebGPURenderer, WebGLBackend } from 'three/webgpu';
+
+const _init = WebGPURenderer.prototype.init;
+
+function forceWebGL( enable ) {
+
+	if ( enable ) {
+
+		WebGPURenderer.prototype.init = async function () {
+
+			if ( this.backend.isWebGLBackend !== true ) {
+
+				const parameters = this.backend.parameters;
+
+				this.backend = new WebGLBackend( parameters );
+
+			}
+
+			return _init.call( this );
+
+		};
+
+	} else {
+
+		WebGPURenderer.prototype.init = _init;
+
+	}
+
+}
+
+function loadState() {
+
+	let settings = {};
+
+	try {
+
+		const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
+		settings = data.settings || {};
+
+	} catch ( e ) {
+
+		console.error( 'Failed to load settings:', e );
+
+	}
+
+	const state = {
+		forceWebGL: settings.forceWebGL || false
+	};
+
+	return state;
+
+}
+
+function saveState( state ) {
+
+	try {
+
+		const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
+		data.settings = state;
+
+		localStorage.setItem( 'threejs-inspector', JSON.stringify( data ) );
+
+	} catch ( e ) {
+
+		console.error( 'Failed to save settings:', e );
+
+	}
+
+}
+
+//
+
+const state = loadState();
+
+if ( state.forceWebGL ) {
+
+	forceWebGL( true );
+
+}
+
+class Settings extends Parameters {
+
+	constructor() {
+
+		super( { name: 'Settings' } );
+
+		// UI
+
+		const rendererGroup = this.createGroup( 'Renderer' );
+
+		rendererGroup.add( state, 'forceWebGL' ).name( 'Force WebGL' ).onChange( ( enable ) => {
+
+			forceWebGL( enable );
+			saveState( state );
+
+			location.reload();
+
+		} );
+
+	}
+
+}
+
+export { Settings };

examples/jsm/inspector/ui/Style.js

@@ -775,7 +775,7 @@ export class Style {
 	content: '⋮⋮';
 	position: absolute;
 	left: 3px;
-	top: calc(50% - 2px);
+	top: calc(50% + 1px);
 	transform: translateY(-50%);
 	color: var(--profiler-border);
 	font-size: 18px;

src/Three.WebGPU.Nodes.js

@@ -2,6 +2,8 @@ export * from './Three.Core.js';
 
 export * from './materials/nodes/NodeMaterials.js';
 export { default as WebGPURenderer } from './renderers/webgpu/WebGPURenderer.Nodes.js';
+export { default as WebGPUBackend } from './renderers/webgpu/WebGPUBackend.js';
+export { default as WebGLBackend } from './renderers/webgl-fallback/WebGLBackend.js';
 export { default as Lighting } from './renderers/common/Lighting.js';
 export { default as BundleGroup } from './renderers/common/BundleGroup.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';

src/Three.WebGPU.js

@@ -2,6 +2,8 @@ export * from './Three.Core.js';
 
 export * from './materials/nodes/NodeMaterials.js';
 export { default as WebGPURenderer } from './renderers/webgpu/WebGPURenderer.js';
+export { default as WebGPUBackend } from './renderers/webgpu/WebGPUBackend.js';
+export { default as WebGLBackend } from './renderers/webgl-fallback/WebGLBackend.js';
 export { default as Lighting } from './renderers/common/Lighting.js';
 export { default as BundleGroup } from './renderers/common/BundleGroup.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';