@gnsx/three 0.185.15 → 0.186.0

package/examples/jsm/helpers/LightProbeGridHelperWebGL.js

@@ -0,0 +1,221 @@
+import {
+	InstancedBufferAttribute,
+	InstancedMesh,
+	Matrix4,
+	ShaderMaterial,
+	SphereGeometry,
+	Vector3
+} from '@gnsx/three';
+
+/**
+ * Visualizes an {@link LightProbeGridWebGL} by rendering a sphere at each
+ * probe position, shaded with the probe's L2 spherical harmonics.
+ *
+ * Uses a single `InstancedMesh` draw call for all probes.
+ *
+ * ```js
+ * const helper = new LightProbeGridHelperWebGL( probes );
+ * scene.add( helper );
+ * ```
+ *
+ * @augments InstancedMesh
+ * @three_import import { LightProbeGridHelperWebGL } from 'three/addons/helpers/LightProbeGridHelperWebGL.js';
+ */
+class LightProbeGridHelperWebGL extends InstancedMesh {
+
+	/**
+	 * Constructs a new irradiance probe grid helper.
+	 *
+	 * @param {LightProbeGridWebGL} probes - The probe grid to visualize.
+	 * @param {number} [sphereSize=0.12] - The radius of each probe sphere.
+	 */
+	constructor( probes, sphereSize = 0.12 ) {
+
+		const geometry = new SphereGeometry( sphereSize, 16, 16 );
+
+		const material = new ShaderMaterial( {
+
+			uniforms: {
+
+				probesSH: { value: null },
+				probesResolution: { value: new Vector3() },
+
+			},
+
+			vertexShader: /* glsl */`
+
+				attribute vec3 instanceUVW;
+
+				varying vec3 vWorldNormal;
+				varying vec3 vUVW;
+
+				void main() {
+
+					vUVW = instanceUVW;
+					vWorldNormal = normalize( mat3( modelMatrix ) * normal );
+					gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4( position, 1.0 );
+
+				}
+
+			`,
+
+			fragmentShader: /* glsl */`
+
+				precision highp sampler3D;
+
+				uniform sampler3D probesSH;
+				uniform vec3 probesResolution;
+
+				varying vec3 vWorldNormal;
+				varying vec3 vUVW;
+
+				void main() {
+
+					// Atlas UV mapping — must match lightprobes_pars_fragment.glsl.js
+					float nz          = probesResolution.z;
+					float paddedSlices = nz + 2.0;
+					float atlasDepth  = 7.0 * paddedSlices;
+					float uvZBase     = vUVW.z * nz + 1.0;
+
+					vec4 s0 = texture( probesSH, vec3( vUVW.xy, ( uvZBase                       ) / atlasDepth ) );
+					vec4 s1 = texture( probesSH, vec3( vUVW.xy, ( uvZBase +       paddedSlices   ) / atlasDepth ) );
+					vec4 s2 = texture( probesSH, vec3( vUVW.xy, ( uvZBase + 2.0 * paddedSlices   ) / atlasDepth ) );
+					vec4 s3 = texture( probesSH, vec3( vUVW.xy, ( uvZBase + 3.0 * paddedSlices   ) / atlasDepth ) );
+					vec4 s4 = texture( probesSH, vec3( vUVW.xy, ( uvZBase + 4.0 * paddedSlices   ) / atlasDepth ) );
+					vec4 s5 = texture( probesSH, vec3( vUVW.xy, ( uvZBase + 5.0 * paddedSlices   ) / atlasDepth ) );
+					vec4 s6 = texture( probesSH, vec3( vUVW.xy, ( uvZBase + 6.0 * paddedSlices   ) / atlasDepth ) );
+
+					// Unpack 9 vec3 SH L2 coefficients
+
+					vec3 c0 = s0.xyz;
+					vec3 c1 = vec3( s0.w, s1.xy );
+					vec3 c2 = vec3( s1.zw, s2.x );
+					vec3 c3 = s2.yzw;
+					vec3 c4 = s3.xyz;
+					vec3 c5 = vec3( s3.w, s4.xy );
+					vec3 c6 = vec3( s4.zw, s5.x );
+					vec3 c7 = s5.yzw;
+					vec3 c8 = s6.xyz;
+
+					vec3 n = normalize( vWorldNormal );
+
+					float x = n.x, y = n.y, z = n.z;
+
+					// band 0
+					vec3 result = c0 * 0.886227;
+
+					// band 1,
+					result += c1 * 2.0 * 0.511664 * y;
+					result += c2 * 2.0 * 0.511664 * z;
+					result += c3 * 2.0 * 0.511664 * x;
+
+					// band 2,
+					result += c4 * 2.0 * 0.429043 * x * y;
+					result += c5 * 2.0 * 0.429043 * y * z;
+					result += c6 * ( 0.743125 * z * z - 0.247708 );
+					result += c7 * 2.0 * 0.429043 * x * z;
+					result += c8 * 0.429043 * ( x * x - y * y );
+
+					gl_FragColor = vec4( max( result, vec3( 0.0 ) ), 1.0 );
+
+					#include <tonemapping_fragment>
+					#include <colorspace_fragment>
+
+				}
+
+			`
+
+		} );
+
+		const res = probes.resolution;
+		const count = res.x * res.y * res.z;
+
+		super( geometry, material, count );
+
+		/**
+		 * The probe grid to visualize.
+		 *
+		 * @type {LightProbeGridWebGL}
+		 */
+		this.probes = probes;
+
+		this.type = 'LightProbeGridHelperWebGL';
+
+		this.update();
+
+	}
+
+	/**
+	 * Rebuilds instance matrices and UVW attributes from the current probe grid.
+	 * Call this after changing `probes` or after re-baking.
+	 */
+	update() {
+
+		const probes = this.probes;
+		const res = probes.resolution;
+		const count = res.x * res.y * res.z;
+
+		// Resize instance matrix buffer if needed
+
+		if ( this.instanceMatrix.count !== count ) {
+
+			this.instanceMatrix = new InstancedBufferAttribute( new Float32Array( count * 16 ), 16 );
+
+		}
+
+		this.count = count;
+
+		const uvwArray = new Float32Array( count * 3 );
+		const matrix = new Matrix4();
+		const probePos = new Vector3();
+
+		let i = 0;
+
+		for ( let iz = 0; iz < res.z; iz ++ ) {
+
+			for ( let iy = 0; iy < res.y; iy ++ ) {
+
+				for ( let ix = 0; ix < res.x; ix ++ ) {
+
+					// Remap to texel centers (must match lightprobes_pars_fragment.glsl.js)
+					uvwArray[ i * 3 ] = ( ix + 0.5 ) / res.x;
+					uvwArray[ i * 3 + 1 ] = ( iy + 0.5 ) / res.y;
+					uvwArray[ i * 3 + 2 ] = ( iz + 0.5 ) / res.z;
+
+					probes.getProbePosition( ix, iy, iz, probePos );
+					matrix.makeTranslation( probePos.x, probePos.y, probePos.z );
+					this.setMatrixAt( i, matrix );
+
+					i ++;
+
+				}
+
+			}
+
+		}
+
+		this.instanceMatrix.needsUpdate = true;
+
+		this.geometry.setAttribute( 'instanceUVW', new InstancedBufferAttribute( uvwArray, 3 ) );
+
+		// Update texture uniforms
+
+		this.material.uniforms.probesSH.value = probes.texture;
+		this.material.uniforms.probesResolution.value.copy( probes.resolution );
+
+	}
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this
+	 * method whenever this instance is no longer used in your app.
+	 */
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+}
+
+export { LightProbeGridHelperWebGL };

package/examples/jsm/inspector/Extension.js

@@ -1,4 +1,5 @@
 import { Tab } from '@gnsx/three/addons/inspector/ui/Tab.js';
+import { getItem, setItem } from './Inspector.js';
 
 export class Extension extends Tab {
 
@@ -10,4 +11,97 @@ export class Extension extends Tab {
 
 	}
 
+	init( inspector ) {
+
+		super.init( inspector );
+
+		if ( this._handleLayout && this._inspector ) {
+
+			this._inspector.removeEventListener( 'orientationchange', this._handleLayout );
+			this._inspector.removeEventListener( 'layoutchange', this._handleLayout );
+			this._inspector.removeEventListener( 'resize', this._handleLayout );
+			window.removeEventListener( 'resize', this._handleLayout );
+
+		}
+
+		this._inspector = inspector;
+
+		this._handleLayout = ( event ) => {
+
+			this.onOrientationChange( event );
+			this.onLayoutChange( event );
+
+		};
+
+		if ( inspector ) {
+
+			inspector.addEventListener( 'orientationchange', this._handleLayout );
+			inspector.addEventListener( 'layoutchange', this._handleLayout );
+			inspector.addEventListener( 'resize', this._handleLayout );
+
+		}
+
+		window.addEventListener( 'resize', this._handleLayout );
+
+		const data = getItem( this.name );
+
+		if ( Object.keys( data ).length > 0 ) {
+
+			this.deserialize( data );
+
+		}
+
+	}
+
+	serialize() {
+
+		return {};
+
+	}
+
+	deserialize( /* data */ ) {
+
+	}
+
+	save() {
+
+		const data = this.serialize();
+
+		if ( data === null || ( typeof data === 'object' && Object.keys( data ).length === 0 ) ) {
+
+			setItem( this.name, null );
+
+		} else {
+
+			setItem( this.name, data );
+
+		}
+
+	}
+
+	dispose() {
+
+		if ( this._handleLayout ) {
+
+			if ( this._inspector ) {
+
+				this._inspector.removeEventListener( 'orientationchange', this._handleLayout );
+				this._inspector.removeEventListener( 'layoutchange', this._handleLayout );
+				this._inspector.removeEventListener( 'resize', this._handleLayout );
+
+			}
+
+			window.removeEventListener( 'resize', this._handleLayout );
+			this._handleLayout = null;
+
+		}
+
+		this._inspector = null;
+
+	}
+
+	onOrientationChange( /* event */ ) { }
+
+	onLayoutChange( /* event */ ) { }
+
 }

package/examples/jsm/inspector/Inspector.js

@@ -10,18 +10,26 @@ import { Viewer } from './tabs/Viewer.js';
 import { Timeline } from './tabs/Timeline.js';
 import { setText } from './ui/utils.js';
 
-import { setConsoleFunction, REVISION } from '@gnsx/three/webgpu';
+import { setConsoleFunction, getConsoleFunction, REVISION } from '@gnsx/three/webgpu';
 
 class Inspector extends RendererInspector {
 
-	constructor() {
+	constructor( options = {} ) {
 
 		super();
 
+		const {
+			nonce = null
+		} = options;
+
+		this.nonce = nonce;
+
 		// init profiler
 
-		const profiler = new Profiler( this );
+		const profiler = new Profiler( this, options );
 		profiler.addEventListener( 'resize', ( e ) => this.dispatchEvent( e ) );
+		profiler.addEventListener( 'orientationchange', ( e ) => this.dispatchEvent( e ) );
+		profiler.addEventListener( 'layoutchange', ( e ) => this.dispatchEvent( e ) );
 
 		const parameters = new Parameters( {
 			builtin: true,
@@ -68,6 +76,8 @@ class Inspector extends RendererInspector {
 		this.settings = settings;
 		this.once = {};
 		this.extensionsData = new WeakMap();
+		this.previousConsoleFunction = null;
+		this._domObserver = null;
 
 		this.displayCycle = {
 			text: {
@@ -95,6 +105,12 @@ class Inspector extends RendererInspector {
 
 	}
 
+	isVertical() {
+
+		return this.profiler ? this.profiler.isVertical() : false;
+
+	}
+
 	onExtension( name, callback ) {
 
 		const extensionAdded = ( e ) => {
@@ -135,6 +151,20 @@ class Inspector extends RendererInspector {
 
 	}
 
+	setVisible( value ) {
+
+		this.domElement.style.display = value ? '' : 'none';
+
+		return this;
+
+	}
+
+	getVisible() {
+
+		return this.domElement.style.display !== 'none';
+
+	}
+
 	getSize() {
 
 		return this.profiler.getSize();
@@ -149,6 +179,22 @@ class Inspector extends RendererInspector {
 
 	}
 
+	setHorizontalAlign( value ) {
+
+		this.profiler.setHorizontalAlign( value );
+
+		return this;
+
+	}
+
+	setVerticalAlign( value ) {
+
+		this.profiler.setVerticalAlign( value );
+
+		return this;
+
+	}
+
 	addTab( tab ) {
 
 		this.profiler.addTab( tab );
@@ -159,6 +205,8 @@ class Inspector extends RendererInspector {
 
 	removeTab( tab ) {
 
+		tab.dispose();
+
 		this.profiler.removeTab( tab );
 
 		return this;
@@ -234,81 +282,129 @@ class Inspector extends RendererInspector {
 
 	}
 
-	init() {
+	setRenderer( renderer ) {
+
+		super.setRenderer( renderer );
 
-		const renderer = this.getRenderer();
+		if ( renderer !== null ) {
 
-		let sign = `THREE.WebGPURenderer: ${ REVISION } [ "`;
+			const previousConsoleFunction = getConsoleFunction();
 
-		if ( renderer.backend.isWebGPUBackend ) {
+			this.previousConsoleFunction = previousConsoleFunction;
 
-			sign += 'WebGPU';
+			setConsoleFunction( ( type, message, ...params ) => {
 
-		} else if ( renderer.backend.isWebGLBackend ) {
+				if ( previousConsoleFunction ) {
 
-			sign += 'WebGL2';
+					previousConsoleFunction( type, message, ...params );
 
-		}
+				}
 
-		sign += '" ]';
+				this.resolveConsole( type, message, ...params );
 
-		this.console.addMessage( 'info', sign );
+			} );
 
-		//
+			if ( this.isAvailable ) {
 
-		if ( renderer.inspector.domElement.parentElement === null ) {
+				const init = async () => {
 
-			if ( renderer.domElement.parentElement !== null ) {
+					if ( renderer.hasInitialized() === false ) await renderer.init();
 
-				renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
+					renderer.backend.trackTimestamp = true;
 
-			} else {
+					if ( renderer.hasFeature( 'timestamp-query' ) !== true ) {
 
-				const observer = new MutationObserver( () => {
+						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
 
-					if ( renderer.domElement.parentElement !== null ) {
+					}
 
-						renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
-						observer.disconnect();
+					let sign = `THREE.WebGPURenderer: ${ REVISION } [ "`;
+
+					if ( renderer.backend.isWebGPUBackend ) {
+
+						sign += 'WebGPU';
+
+					} else if ( renderer.backend.isWebGLBackend ) {
+
+						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;
@@ -450,9 +546,9 @@ class Inspector extends RendererInspector {
 
 	resolveFrame( frame ) {
 
-		const nextFrame = this.getFrameById( frame.frameId + 1 );
+		const previousFrame = this.getFrameById( frame.frameId - 1 );
 
-		if ( ! nextFrame ) return;
+		if ( ! previousFrame ) return;
 
 		frame.cpu = 0;
 		frame.gpu = 0;
@@ -470,9 +566,9 @@ class Inspector extends RendererInspector {
 
 		}
 
-		// improve stats using next frame
+		// improve stats using previous frame
 
-		frame.deltaTime = nextFrame.startTime - frame.startTime;
+		frame.deltaTime = frame.startTime - previousFrame.startTime;
 		frame.miscellaneous = frame.deltaTime - frame.total;
 
 		if ( frame.miscellaneous < 0 ) {
@@ -535,6 +631,14 @@ class Inspector extends RendererInspector {
 
 	}
 
+	dispose() {
+
+		super.dispose();
+
+		this.setRenderer( null );
+
+	}
+
 }
 
 function getItem( id ) {