[pull] dev from mrdoob:dev

examples/jsm/inspector/Inspector.js

@@ -10,7 +10,7 @@ import { Viewer } from './tabs/Viewer.js';
 import { Timeline } from './tabs/Timeline.js';
 import { setText } from './ui/utils.js';
 
-import { setConsoleFunction, REVISION } from 'three/webgpu';
+import { setConsoleFunction, getConsoleFunction, REVISION } from 'three/webgpu';
 
 class Inspector extends RendererInspector {
 
@@ -70,6 +70,8 @@ class Inspector extends RendererInspector {
 		this.settings = settings;
 		this.once = {};
 		this.extensionsData = new WeakMap();
+		this.previousConsoleFunction = null;
+		this._domObserver = null;
 
 		this.displayCycle = {
 			text: {
@@ -274,81 +276,129 @@ class Inspector extends RendererInspector {
 
 	}
 
-	init() {
+	setRenderer( renderer ) {
 
-		const renderer = this.getRenderer();
+		super.setRenderer( renderer );
 
-		let sign = `THREE.WebGPURenderer: ${ REVISION } [ "`;
+		if ( renderer !== null ) {
 
-		if ( renderer.backend.isWebGPUBackend ) {
+			const previousConsoleFunction = getConsoleFunction();
 
-			sign += 'WebGPU';
+			this.previousConsoleFunction = previousConsoleFunction;
 
-		} else if ( renderer.backend.isWebGLBackend ) {
+			setConsoleFunction( ( type, message, ...params ) => {
 
-			sign += 'WebGL2';
+				if ( previousConsoleFunction ) {
 
-		}
+					previousConsoleFunction( type, message, ...params );
 
-		sign += '" ]';
+				}
 
-		this.console.addMessage( 'info', sign );
+				this.resolveConsole( type, message, ...params );
 
-		//
+			} );
+
+			if ( this.isAvailable ) {
+
+				const init = async () => {
+
+					if ( renderer.hasInitialized() === false ) await renderer.init();
+
+					renderer.backend.trackTimestamp = true;
+
+					if ( renderer.hasFeature( 'timestamp-query' ) !== true ) {
 
-		if ( renderer.inspector.domElement.parentElement === null ) {
+						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
 
-			if ( renderer.domElement.parentElement !== null ) {
+					}
 
-				renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
+					let sign = `THREE.WebGPURenderer: ${ REVISION } [ "`;
 
-			} else {
+					if ( renderer.backend.isWebGPUBackend ) {
 
-				const observer = new MutationObserver( () => {
+						sign += 'WebGPU';
 
-					if ( renderer.domElement.parentElement !== null ) {
+					} else if ( renderer.backend.isWebGLBackend ) {
 
-						renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
-						observer.disconnect();
+						sign += 'WebGL2';
 
 					}
 
-				} );
+					sign += '" ]';
 
-				observer.observe( document.body || document.documentElement, { childList: true, subtree: true } );
+					this.console.addMessage( 'info', sign );
 
-			}
+					//
 
-		}
+					const domElement = this.domElement;
 
-	}
+					if ( domElement.parentElement === null ) {
 
-	setRenderer( renderer ) {
+						if ( renderer.domElement.parentElement !== null ) {
 
-		super.setRenderer( renderer );
+							renderer.domElement.parentElement.appendChild( domElement );
 
-		if ( renderer !== null ) {
+						} else {
 
-			setConsoleFunction( this.resolveConsole.bind( this ) );
+							if ( this._domObserver !== null ) {
 
-			if ( this.isAvailable ) {
+								this._domObserver.disconnect();
 
-				renderer.init().then( () => {
+							}
 
-					renderer.backend.trackTimestamp = true;
+							this._domObserver = new MutationObserver( () => {
 
-					if ( renderer.hasFeature( 'timestamp-query' ) !== true ) {
+								if ( renderer.domElement && renderer.domElement.parentElement !== null ) {
 
-						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
+									renderer.domElement.parentElement.appendChild( domElement );
+
+									if ( this._domObserver !== null ) {
+
+										this._domObserver.disconnect();
+										this._domObserver = null;
+
+									}
+
+								}
+
+							} );
+
+							this._domObserver.observe( document.body || document.documentElement, { childList: true, subtree: true } );
+
+						}
 
 					}
 
-				} );
+				};
+
+				init();
 
 				this.timeline.setRenderer( renderer );
 
 			}
 
+		} else {
+
+			if ( this.previousConsoleFunction ) {
+
+				setConsoleFunction( this.previousConsoleFunction );
+				this.previousConsoleFunction = undefined;
+
+			}
+
+			if ( this._domObserver !== null ) {
+
+				this._domObserver.disconnect();
+				this._domObserver = null;
+
+			}
+
+			this.profiler.dispose();
+
+			this.statsData.clear();
+
+			super.dispose();
+
 		}
 
 		return this;
@@ -575,6 +625,14 @@ class Inspector extends RendererInspector {
 
 	}
 
+	dispose() {
+
+		super.dispose();
+
+		this.setRenderer( null );
+
+	}
+
 }
 
 function getItem( id ) {

examples/jsm/inspector/RendererInspector.js

@@ -84,6 +84,7 @@ export class RendererInspector extends InspectorBase {
 
 		this._lastFinishTime = 0;
 		this._resolveTimestampPromise = null;
+		this._rAFId = null;
 
 		this.overdraw = false;
 		this._overdrawMaterial = null;
@@ -262,15 +263,33 @@ export class RendererInspector extends InspectorBase {
 
 		this._resolveTimestampPromise = new Promise( ( resolve ) => {
 
-			requestAnimationFrame( async () => {
+			this._rAFId = requestAnimationFrame( async () => {
+
+				this._rAFId = null;
 
 				const renderer = this.getRenderer();
 
+				if ( renderer === null ) {
+
+					this._resolveTimestampPromise = null;
+					resolve();
+					return;
+
+				}
+
 				if ( renderer.backend.hasTimestamp ) {
 
 					await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
 					await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
 
+					if ( renderer !== this.getRenderer() ) {
+
+						this._resolveTimestampPromise = null;
+						resolve();
+						return;
+
+					}
+
 					const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
 					const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
 
@@ -551,4 +570,26 @@ export class RendererInspector extends InspectorBase {
 
 	}
 
+	dispose() {
+
+		if ( this._rAFId !== null ) {
+
+			cancelAnimationFrame( this._rAFId );
+			this._rAFId = null;
+
+		}
+
+		this._resolveTimestampPromise = null;
+
+		if ( this._overdrawMaterial !== null ) {
+
+			this._overdrawMaterial.dispose();
+			this._overdrawMaterial = null;
+
+		}
+
+		super.dispose();
+
+	}
+
 }

examples/jsm/inspector/tabs/Viewer.js

@@ -675,6 +675,7 @@ class Viewer extends Tab {
 				const onPointerDown = ( e ) => {
 
 					isDragging = true;
+					line.classList.add( 'active' );
 					e.preventDefault();
 
 				};
@@ -700,6 +701,7 @@ class Viewer extends Tab {
 				const onPointerUp = () => {
 
 					isDragging = false;
+					line.classList.remove( 'active' );
 
 				};
 
@@ -946,6 +948,13 @@ class Viewer extends Tab {
 
 			const mainCanvas = renderer.domElement;
 			const rect = mainCanvas.getBoundingClientRect();
+
+			if ( rect.width <= 0 || rect.height <= 0 ) {
+
+				return;
+
+			}
+
 			const targetParent = document.fullscreenElement || this.profiler.domElement;
 			const parentRect = targetParent.getBoundingClientRect();
 			const localLeft = rect.left - parentRect.left;
@@ -1019,7 +1028,7 @@ class Viewer extends Tab {
 
 			if ( ! renderer.backend.isWebGPUBackend ) {
 
-				inspector.resolveConsoleOnce( 'warn', 'Inspector: Viewer is only available with WebGPU.' );
+				// Viewer is only available with WebGPU.
 
 				return;
 
@@ -1313,6 +1322,53 @@ class Viewer extends Tab {
 
 	}
 
+	dispose() {
+
+		if ( this.splitActive ) {
+
+			this.stopSplitMode();
+
+		}
+
+		if ( this.splitCanvas ) {
+
+			if ( this.splitCanvas.parentElement ) {
+
+				this.splitCanvas.parentElement.removeChild( this.splitCanvas );
+
+			}
+
+			this.splitCanvas = null;
+
+		}
+
+		if ( this.splitCanvasTarget ) {
+
+			this.splitCanvasTarget.dispose();
+			this.splitCanvasTarget = null;
+
+		}
+
+		if ( this.splitMaterial ) {
+
+			this.splitMaterial.dispose();
+			this.splitMaterial = null;
+
+		}
+
+		for ( const canvasData of this.canvasNodes.values() ) {
+
+			canvasData.canvasTarget.dispose();
+			canvasData.material.dispose();
+
+		}
+
+		this.canvasNodes.clear();
+
+		super.dispose();
+
+	}
+
 }
 
 export { Viewer };

examples/jsm/inspector/ui/Profiler.js

@@ -2243,4 +2243,24 @@ export class Profiler extends EventDispatcher {
 
 	}
 
+	dispose() {
+
+		for ( const tab of Object.values( this.tabs ) ) {
+
+			tab.dispose();
+
+		}
+
+		this.domElement.remove();
+
+		for ( const detachedWindow of this.detachedWindows ) {
+
+			detachedWindow.panel.remove();
+
+		}
+
+		this.toggleGraph.dispose();
+
+	}
+
 }