super-three 0.181.0 → 0.185.0

package/examples/jsm/inspector/tabs/Viewer.js

@@ -1,34 +1,196 @@
 import { Tab } from '../ui/Tab.js';
 import { List } from '../ui/List.js';
 import { Item } from '../ui/Item.js';
+import { splitPath, splitCamelCase } from '../ui/utils.js';
+import { getItem, setItem } from '../Inspector.js';
 
-import { RendererUtils, NoToneMapping, LinearSRGBColorSpace } from 'three/webgpu';
+import { RendererUtils, NoToneMapping, LinearSRGBColorSpace, QuadMesh, NodeMaterial, CanvasTarget, Vector2 } from 'three/webgpu';
+import { renderOutput, vec2, vec3, vec4, Fn, screenUV, step, OnMaterialUpdate, uniform, float } from 'three/tsl';
+
+const _size = /*@__PURE__*/ new Vector2();
+
+const aspectRatioUV = /*@__PURE__*/ Fn( ( [ uv, textureNode, canvasAspect ] ) => {
+
+	const textureAspect = uniform( 0 );
+
+	OnMaterialUpdate( () => {
+
+		const { width, height } = textureNode.value;
+
+		textureAspect.value = width / height;
+
+	} );
+
+	const ratio = canvasAspect.div( textureAspect );
+
+	const centered = uv.sub( 0.5 );
+
+	// If canvasAspect > textureAspect:
+	const uvWide = vec2( centered.x.mul( ratio ), centered.y ).add( 0.5 );
+
+	// If canvasAspect <= textureAspect:
+	const uvTall = vec2( centered.x, centered.y.div( ratio ) ).add( 0.5 );
+
+	const finalUV = canvasAspect.greaterThan( textureAspect ).select( uvWide, uvTall );
+
+	const inBounds = step( 0.0, finalUV.x ).mul( step( finalUV.x, 1.0 ) ).mul( step( 0.0, finalUV.y ) ).mul( step( finalUV.y, 1.0 ) );
+
+	return vec3( finalUV, inBounds );
+
+} );
 
 class Viewer extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
+
+		super( 'Viewer', options );
+
+		this.content.style.overflow = 'hidden';
+		this.maximizedByFullscreenButton = false;
+
+		// Toolbar
+		const toolbar = document.createElement( 'div' );
+		toolbar.className = 'toolbar';
+
+		const backBtn = document.createElement( 'button' );
+		backBtn.className = 'viewer-back-btn';
+		backBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>';
+		backBtn.title = 'Back to list';
+		backBtn.style.display = 'none';
+		toolbar.appendChild( backBtn );
 
-		super( 'Viewer' );
+		const label = document.createElement( 'span' );
+		label.textContent = 'View:';
+		toolbar.appendChild( label );
+
+		const select = document.createElement( 'select' );
+		select.className = 'select';
+		select.style.width = '200px';
+
+		const defaultOption = document.createElement( 'option' );
+		defaultOption.value = 'list';
+		defaultOption.textContent = 'List';
+		select.appendChild( defaultOption );
+
+		toolbar.appendChild( select );
+		this.content.appendChild( toolbar );
 
 		const nodeList = new List( 'Viewer', 'Name' );
 		nodeList.setGridStyle( '150px minmax(200px, 2fr)' );
-		nodeList.domElement.style.minWidth = '600px';
+		nodeList.domElement.style.minWidth = '400px';
 
 		const scrollWrapper = document.createElement( 'div' );
 		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.style.flexGrow = '1';
+		scrollWrapper.style.overflowY = 'auto';
+		scrollWrapper.style.minHeight = '0';
 		scrollWrapper.appendChild( nodeList.domElement );
 		this.content.appendChild( scrollWrapper );
 
-		const nodes = new Item( 'Nodes' );
+		// Container for full screen view
+		const fullViewerContainer = document.createElement( 'div' );
+		fullViewerContainer.className = 'full-viewer-container';
+		fullViewerContainer.style.touchAction = 'none';
+		this.content.appendChild( fullViewerContainer );
+
+		const nodes = new Item( 'User Defined' );
+		nodes.setCollapsible( true );
 		nodeList.add( nodes );
 
 		//
 
 		this.itemLibrary = new Map();
 		this.folderLibrary = new Map();
+		this.canvasNodes = new Map();
 		this.currentDataList = [];
 		this.nodeList = nodeList;
 		this.nodes = nodes;
+		this.scrollWrapper = scrollWrapper;
+		this.fullViewerContainer = fullViewerContainer;
+		this.select = select;
+		this.backBtn = backBtn;
+		this.activeFullNodeId = null;
+		this.pendingRestoreView = true;
+
+		backBtn.addEventListener( 'click', () => {
+
+			select.value = 'list';
+			this.showListView();
+
+			if ( this.maximizedByFullscreenButton ) {
+
+				if ( this.profiler && this.profiler.panel.classList.contains( 'maximized' ) ) {
+
+					this.profiler.toggleMaximize();
+
+				}
+
+				this.maximizedByFullscreenButton = false;
+
+			}
+
+			this.saveLastView();
+
+		} );
+
+		select.addEventListener( 'change', () => {
+
+			const val = select.value;
+
+			if ( val === 'list' ) {
+
+				this.showListView();
+
+			} else {
+
+				this.showNodeView( val );
+
+			}
+
+			this.saveLastView();
+
+		} );
+
+		// Event forwarding setup for OrbitControls
+		this.isDraggingThumbnail = false;
+		this.activeSourceCanvas = null;
+		this.activePointerIds = new Set();
+
+		const handleGlobalPointer = ( e ) => {
+
+			if ( ! this.isDraggingThumbnail || ! this.activeSourceCanvas ) return;
+
+			const renderer = this.inspector.getRenderer();
+
+			if ( ! renderer || ! renderer.domElement ) return;
+
+			if ( e.isForwarded ) return;
+
+			// Block native event from reaching other document-level listeners (OrbitControls)
+			e.stopImmediatePropagation();
+			e.preventDefault();
+
+			// Project and dispatch forwarded event
+			this.forwardEvent( e, this.activeSourceCanvas, renderer.domElement );
+
+			if ( e.type === 'pointerup' || e.type === 'pointercancel' ) {
+
+				this.activePointerIds.delete( e.pointerId );
+
+				if ( this.activePointerIds.size === 0 ) {
+
+					this.isDraggingThumbnail = false;
+					this.activeSourceCanvas = null;
+
+				}
+
+			}
+
+		};
+
+		window.addEventListener( 'pointermove', handleGlobalPointer, true );
+		window.addEventListener( 'pointerup', handleGlobalPointer, true );
+		window.addEventListener( 'pointercancel', handleGlobalPointer, true );
 
 	}
 
@@ -39,6 +201,7 @@ class Viewer extends Tab {
 		if ( folder === undefined ) {
 
 			folder = new Item( name );
+			folder.setCollapsible( true );
 
 			this.folderLibrary.set( name, folder );
 			this.nodeList.add( folder );
@@ -49,6 +212,16 @@ class Viewer extends Tab {
 
 	}
 
+	hide() {
+
+		super.hide();
+		this.maximizedByFullscreenButton = false;
+		this.isDraggingThumbnail = false;
+		this.activeSourceCanvas = null;
+		this.activePointerIds.clear();
+
+	}
+
 	addNodeItem( canvasData ) {
 
 		let item = this.itemLibrary.get( canvasData.id );
@@ -58,7 +231,75 @@ class Viewer extends Tab {
 			const name = canvasData.name;
 			const domElement = canvasData.canvasTarget.domElement;
 
-			item = new Item( domElement, name );
+			// Create wrapper
+			const wrapper = document.createElement( 'div' );
+			wrapper.className = 'node-canvas-wrapper';
+			wrapper.style.position = 'relative';
+			wrapper.style.display = 'inline-block';
+			wrapper.style.width = '140px';
+			wrapper.style.height = '140px';
+			wrapper.style.touchAction = 'none';
+
+			// View full screen button
+			const viewBtn = document.createElement( 'button' );
+			viewBtn.className = 'node-canvas-detach-btn';
+			viewBtn.title = 'View full size';
+			viewBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>';
+
+			viewBtn.onclick = ( e ) => {
+
+				e.stopPropagation();
+				this.select.value = canvasData.id;
+				this.showNodeView( canvasData.id );
+				this.saveLastView();
+
+			};
+
+			// Fullscreen and maximize button
+			const fullscreenBtn = document.createElement( 'button' );
+			fullscreenBtn.className = 'node-canvas-fullscreen-btn';
+			fullscreenBtn.title = 'Fullscreen view';
+			fullscreenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+
+			fullscreenBtn.onclick = ( e ) => {
+
+				e.stopPropagation();
+				this.select.value = canvasData.id;
+				this.showNodeView( canvasData.id );
+
+				if ( this.profiler && ! this.profiler.panel.classList.contains( 'maximized' ) ) {
+
+					this.profiler.toggleMaximize();
+					this.maximizedByFullscreenButton = true;
+
+					if ( ! this._maximizeListenerAdded && this.profiler.maximizeBtn ) {
+
+						this.profiler.maximizeBtn.addEventListener( 'click', () => {
+
+							this.maximizedByFullscreenButton = false;
+
+						} );
+						this._maximizeListenerAdded = true;
+
+					}
+
+				}
+
+				this.saveLastView();
+
+			};
+
+			wrapper.appendChild( domElement );
+			wrapper.appendChild( viewBtn );
+			wrapper.appendChild( fullscreenBtn );
+
+			this.setupEventForwarding( domElement );
+
+			// Store elements in canvasData for access
+			canvasData.domElement = domElement;
+			canvasData.wrapperElement = wrapper;
+
+			item = new Item( wrapper, name );
 			item.itemRow.children[ 1 ].style[ 'justify-content' ] = 'flex-start';
 			this.itemLibrary.set( canvasData.id, item );
 
@@ -68,10 +309,418 @@ class Viewer extends Tab {
 
 	}
 
-	update( renderer, canvasDataList ) {
+	setupEventForwarding( sourceCanvas ) {
+
+		sourceCanvas.style.touchAction = 'none';
+
+		const onPointerDown = ( e ) => {
+
+			const renderer = this.inspector.getRenderer();
+
+			if ( ! renderer || ! renderer.domElement ) return;
+
+			const targetCanvas = renderer.domElement;
+
+			this.isDraggingThumbnail = true;
+			this.activeSourceCanvas = sourceCanvas;
+			this.activePointerIds.add( e.pointerId );
+
+			// Project and dispatch pointerdown
+			this.forwardEvent( e, sourceCanvas, targetCanvas );
+
+		};
+
+		sourceCanvas.addEventListener( 'pointerdown', onPointerDown );
+
+		// Wheel event support for zooming
+		const onWheel = ( e ) => {
+
+			const renderer = this.inspector.getRenderer();
+
+			if ( ! renderer || ! renderer.domElement ) return;
+
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.forwardEvent( e, sourceCanvas, renderer.domElement );
+
+		};
+
+		sourceCanvas.addEventListener( 'wheel', onWheel, { passive: false } );
+
+		// Click, dblclick, contextmenu
+		const onMouseShortcut = ( e ) => {
+
+			const renderer = this.inspector.getRenderer();
+
+			if ( ! renderer || ! renderer.domElement ) return;
+
+			e.stopPropagation();
+
+			if ( e.type === 'contextmenu' ) {
+
+				e.preventDefault();
+
+			}
+
+			this.forwardEvent( e, sourceCanvas, renderer.domElement );
+
+		};
+
+		sourceCanvas.addEventListener( 'click', onMouseShortcut );
+		sourceCanvas.addEventListener( 'dblclick', onMouseShortcut );
+		sourceCanvas.addEventListener( 'contextmenu', onMouseShortcut );
+
+	}
+
+	forwardEvent( event, sourceCanvas, targetCanvas ) {
+
+		const sourceRect = sourceCanvas.getBoundingClientRect();
+		const targetRect = targetCanvas.getBoundingClientRect();
+
+		const localX = ( event.clientX - sourceRect.left ) / sourceRect.width;
+		const localY = ( event.clientY - sourceRect.top ) / sourceRect.height;
+
+		const targetClientX = targetRect.left + localX * targetRect.width;
+		const targetClientY = targetRect.top + localY * targetRect.height;
+		const targetPageX = targetClientX + window.scrollX;
+		const targetPageY = targetClientY + window.scrollY;
+
+		let newEvent;
+
+		const eventInit = {
+			bubbles: true,
+			cancelable: true,
+			view: window,
+			clientX: targetClientX,
+			clientY: targetClientY,
+			screenX: targetClientX + window.screenX,
+			screenY: targetClientY + window.screenY,
+			pageX: targetPageX,
+			pageY: targetPageY,
+			ctrlKey: event.ctrlKey,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+			metaKey: event.metaKey,
+			buttons: event.buttons,
+			button: event.button
+		};
+
+		if ( event instanceof WheelEvent ) {
+
+			newEvent = new WheelEvent( event.type, {
+				...eventInit,
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaZ: event.deltaZ,
+				deltaMode: event.deltaMode
+			} );
+
+		} else if ( window.PointerEvent && event instanceof PointerEvent ) {
+
+			newEvent = new PointerEvent( event.type, {
+				...eventInit,
+				pointerId: event.pointerId,
+				width: event.width,
+				height: event.height,
+				pressure: event.pressure,
+				tiltX: event.tiltX,
+				tiltY: event.tiltY,
+				pointerType: event.pointerType,
+				isPrimary: event.isPrimary
+			} );
+
+		} else {
+
+			newEvent = new MouseEvent( event.type, eventInit );
+
+		}
+
+		newEvent.isForwarded = true;
+		targetCanvas.dispatchEvent( newEvent );
+
+	}
+
+	showListView() {
+
+		if ( this.activeFullNodeId ) {
+
+			const canvasData = Array.from( this.canvasNodes.values() ).find( data => String( data.id ) === String( this.activeFullNodeId ) );
+
+			if ( canvasData ) {
+
+				// Move canvas back to wrapper
+				canvasData.wrapperElement.appendChild( canvasData.domElement );
+
+				// Reset size
+				canvasData.domElement.style.width = '';
+				canvasData.domElement.style.height = '';
+				canvasData.canvasTarget.setSize( 140, 140 );
+
+				const renderer = this.inspector.getRenderer();
+
+				renderer.backend.delete( canvasData.canvasTarget );
+
+			}
+
+			this.activeFullNodeId = null;
+
+		}
+
+		this.scrollWrapper.style.display = '';
+		this.fullViewerContainer.style.display = 'none';
+		this.backBtn.style.display = 'none';
+
+	}
+
+	showNodeView( nodeId ) {
+
+		// First restore previous full screen node if any
+		if ( this.activeFullNodeId && String( this.activeFullNodeId ) !== String( nodeId ) ) {
+
+			this.showListView();
+
+		}
+
+		const canvasData = Array.from( this.canvasNodes.values() ).find( data => String( data.id ) === String( nodeId ) );
+
+		if ( canvasData ) {
+
+			this.addNodeItem( canvasData );
+
+			this.activeFullNodeId = nodeId;
+			this.backBtn.style.display = 'flex';
+
+			// Hide list, show full screen container
+			this.scrollWrapper.style.display = 'none';
+			this.fullViewerContainer.style.display = 'flex';
+
+			// Move canvas to the full viewer container
+			this.fullViewerContainer.appendChild( canvasData.domElement );
+			canvasData.domElement.style.width = '100%';
+			canvasData.domElement.style.height = '100%';
+
+			// Resize canvas to fit full viewer container
+			const rect = this.fullViewerContainer.getBoundingClientRect();
+			const contentWidth = rect.width || this.content.clientWidth;
+			const contentHeight = rect.height || ( this.content.clientHeight - 38 ); // minus toolbar
+			canvasData.canvasTarget.setSize( contentWidth, contentHeight );
+
+			const renderer = this.inspector.getRenderer();
+
+			renderer.backend.delete( canvasData.canvasTarget );
+
+		}
+
+	}
+
+	getCanvasDataByNode( renderer, node ) {
+
+		let canvasData = this.canvasNodes.get( node );
+
+		if ( canvasData === undefined ) {
+
+			const canvas = document.createElement( 'canvas' );
+
+			const canvasTarget = new CanvasTarget( canvas );
+			canvasTarget.setPixelRatio( window.devicePixelRatio );
+			canvasTarget.setSize( 140, 140 );
+
+			const id = node.id;
+
+			const { path, name } = splitPath( splitCamelCase( node.getName() || '(unnamed)' ) );
+
+			const canvasAspect = uniform( 1 );
+			const mask = float( 1 );
+
+			const target = node.context( { getUV: ( textureNode ) => {
+
+				const uvData = aspectRatioUV( screenUV, textureNode, canvasAspect );
+				const correctedUV = uvData.xy;
+				mask.assign( uvData.z );
+
+				return correctedUV;
+
+			} } );
+
+			let output = vec4( vec3( target ), 1 ).mul( mask );
+			output = renderOutput( output, NoToneMapping, renderer.outputColorSpace );
+			output = output.context( { inspector: true } );
+
+			const material = new NodeMaterial();
+			material.outputNode = output;
+
+			const quad = new QuadMesh( material );
+			quad.name = 'Viewer - ' + name;
+
+			canvasData = {
+				id,
+				name,
+				path,
+				node,
+				quad,
+				canvasTarget,
+				material,
+				canvasAspect
+			};
+
+			this.canvasNodes.set( node, canvasData );
+
+		}
+
+		return canvasData;
+
+	}
+
+	update( inspector ) {
+
+		const renderer = inspector.getRenderer();
+		const nodes = inspector.getNodes();
+
+		if ( nodes.length > 0 ) {
+
+			if ( ! renderer.backend.isWebGPUBackend ) {
+
+				inspector.resolveConsoleOnce( 'warn', 'Inspector: Viewer is only available with WebGPU.' );
+
+				return;
+
+			}
+
+			if ( ! this.isVisible ) {
+
+				this.show();
+
+			}
+
+		}
 
 		if ( ! this.isActive ) return;
 
+		const canvasDataList = nodes.map( node => this.getCanvasDataByNode( renderer, node ) );
+
+		// Check if the list of nodes has changed
+		let nodesChanged = canvasDataList.length !== this.currentDataList.length;
+
+		if ( ! nodesChanged ) {
+
+			for ( let i = 0; i < canvasDataList.length; i ++ ) {
+
+				if ( canvasDataList[ i ].id !== this.currentDataList[ i ].id ) {
+
+					nodesChanged = true;
+					break;
+
+				}
+
+			}
+
+		}
+
+		if ( nodesChanged ) {
+
+			const currentSelectedValue = this.select.value;
+
+			// Clear options except the first one ('list')
+			while ( this.select.options.length > 1 ) {
+
+				this.select.remove( 1 );
+
+			}
+
+			// Add options for each node in canvasDataList
+			for ( const canvasData of canvasDataList ) {
+
+				const option = document.createElement( 'option' );
+				option.value = canvasData.id;
+				option.textContent = canvasData.path ? `${ canvasData.path } / ${ canvasData.name }` : canvasData.name;
+				this.select.appendChild( option );
+
+			}
+
+			// Try to restore from saved view first on initial load
+			let restored = false;
+
+			if ( this.pendingRestoreView ) {
+
+				const savedView = getItem( 'viewerLastView' );
+
+				if ( savedView !== 'list' ) {
+
+					for ( let i = 0; i < this.select.options.length; i ++ ) {
+
+						if ( this.select.options[ i ].textContent === savedView ) {
+
+							this.select.selectedIndex = i;
+							const nodeId = this.select.options[ i ].value;
+							this.showNodeView( nodeId );
+							restored = true;
+							this.pendingRestoreView = false;
+							break;
+
+						}
+
+					}
+
+				} else {
+
+					this.pendingRestoreView = false;
+
+				}
+
+			}
+
+			if ( ! restored ) {
+
+				// Restore selection if still valid
+				let hasSelectedValue = false;
+
+				for ( let i = 0; i < this.select.options.length; i ++ ) {
+
+					if ( this.select.options[ i ].value === currentSelectedValue ) {
+
+						this.select.selectedIndex = i;
+						hasSelectedValue = true;
+						break;
+
+					}
+
+				}
+
+				if ( ! hasSelectedValue ) {
+
+					this.select.value = 'list';
+					this.showListView();
+
+				}
+
+			}
+
+		}
+
+		// Real-time resize of active full-screen node canvas target
+		if ( this.activeFullNodeId ) {
+
+			const canvasData = canvasDataList.find( data => String( data.id ) === String( this.activeFullNodeId ) );
+
+			if ( canvasData ) {
+
+				const rect = this.fullViewerContainer.getBoundingClientRect();
+				const contentWidth = rect.width || this.content.clientWidth;
+				const contentHeight = rect.height || ( this.content.clientHeight - 38 );
+
+				if ( canvasData.canvasTarget.domElement.width !== contentWidth || canvasData.canvasTarget.domElement.height !== contentHeight ) {
+
+					canvasData.canvasTarget.setSize( contentWidth, contentHeight );
+
+					renderer.backend.delete( canvasData.canvasTarget );
+
+				}
+
+			}
+
+		}
+
 		//
 
 		const previousDataList = [ ...this.currentDataList ];
@@ -140,9 +789,31 @@ class Viewer extends Tab {
 
 			}
 
-			this.currentDataList = canvasDataList;
+			const rttNodes = [];
+
+			const mainSize = previousCanvasTarget.getDrawingBufferSize( _size );
+
+			canvasData.node.traverse( ( child ) => {
+
+				if ( child.isRTTNode && child.autoResize === true ) {
+
+					const oldWidth = child.width;
+					const oldHeight = child.height;
+
+					child.width = mainSize.width;
+					child.height = mainSize.height;
+
+					child.setSize( mainSize.width, mainSize.height );
+
+					rttNodes.push( {
+						node: child,
+						oldWidth,
+						oldHeight
+					} );
+
+				}
 
-			//
+			} );
 
 			const state = RendererUtils.resetRendererState( renderer );
 
@@ -151,12 +822,55 @@ class Viewer extends Tab {
 
 			renderer.setCanvasTarget( canvasData.canvasTarget );
 
+			if ( canvasData.canvasAspect ) {
+
+				canvasData.canvasAspect.value = canvasData.canvasTarget.domElement.width / canvasData.canvasTarget.domElement.height;
+
+			}
+
 			canvasData.quad.render( renderer );
 
 			renderer.setCanvasTarget( previousCanvasTarget );
 
 			RendererUtils.restoreRendererState( renderer, state );
 
+			for ( const rtt of rttNodes ) {
+
+				rtt.node.width = rtt.oldWidth;
+				rtt.node.height = rtt.oldHeight;
+
+			}
+
+		}
+
+		this.currentDataList = canvasDataList;
+
+	}
+
+	setActive( isActive ) {
+
+		super.setActive( isActive );
+
+	}
+
+	saveLastView() {
+
+		const selectedValue = this.select.value;
+
+		if ( selectedValue === 'list' ) {
+
+			setItem( 'viewerLastView', 'list' );
+
+		} else {
+
+			const selectedOption = this.select.options[ this.select.selectedIndex ];
+
+			if ( selectedOption ) {
+
+				setItem( 'viewerLastView', selectedOption.textContent );
+
+			}
+
 		}
 
 	}