Examples: Update with the new style and inspector

examples/jsm/inspector/Inspector.js

@@ -155,25 +155,31 @@ class Inspector extends RendererInspector {
 
 	setRenderer( renderer ) {
 
+		super.setRenderer( renderer );
+
 		if ( renderer !== null ) {
 
 			setConsoleFunction( this.resolveConsole.bind( this ) );
 
-			renderer.backend.trackTimestamp = true;
+			if ( this.isAvailable ) {
+
+				renderer.backend.trackTimestamp = true;
 
-			renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
+				renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
 
-				if ( available !== true ) {
+					if ( available !== true ) {
 
-					this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
+						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
 
-				}
+					}
 
-			} );
+				} );
+
+			}
 
 		}
 
-		return super.setRenderer( renderer );
+		return this;
 
 	}
 

examples/jsm/inspector/RendererInspector.js

@@ -242,6 +242,14 @@ export class RendererInspector extends InspectorBase {
 
 	}
 
+	get isAvailable() {
+
+		const renderer = this.getRenderer();
+
+		return renderer !== null && renderer.backend.isWebGPUBackend;
+
+	}
+
 	addFrame( frame ) {
 
 		// Limit to max frames.
@@ -256,7 +264,11 @@ export class RendererInspector extends InspectorBase {
 		this.frames.push( frame );
 		this.framesLib[ frame.frameId ] = frame;
 
-		this.resolveTimestamp();
+		if ( this.isAvailable ) {
+
+			this.resolveTimestamp();
+
+		}
 
 	}
 

examples/jsm/inspector/tabs/Parameters.js

@@ -2,7 +2,7 @@ import { Tab } from '../ui/Tab.js';
 import { List } from '../ui/List.js';
 import { Item } from '../ui/Item.js';
 import { createValueSpan } from '../ui/utils.js';
-import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox } from '../ui/Values.js';
+import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor } from '../ui/Values.js';
 
 class ParametersGroup {
 
@@ -11,7 +11,15 @@ class ParametersGroup {
 		this.parameters = parameters;
 		this.name = name;
 
-		this.item = new Item( name );
+		this.paramList = new Item( name );
+
+	}
+
+	close() {
+
+		this.paramList.close();
+
+		return this;
 
 	}
 
@@ -48,6 +56,16 @@ class ParametersGroup {
 
 	}
 
+	addFolder( name ) {
+
+		const group = new ParametersGroup( this.parameters, name );
+
+		this.paramList.add( group.paramList );
+
+		return group;
+
+	}
+
 	addBoolean( object, property ) {
 
 		const value = object[ property ];
@@ -63,7 +81,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		// extends logic to toggle checkbox when clicking on the row
 
@@ -114,7 +132,41 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
+
+		const itemRow = subItem.domElement.firstChild;
+		itemRow.classList.add( 'actionable' );
+
+		// extend object property
+
+		editor.name = ( name ) => {
+
+			description.textContent = name;
+
+			return editor;
+
+		};
+
+		return editor;
+
+	}
+
+	addColor( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueColor( { value } );
+		editor.addEventListener( 'change', ( { value } ) => {
+
+			object[ property ] = value;
+
+		} );
+
+		const description = createValueSpan();
+		description.textContent = property;
+
+		const subItem = new Item( description, editor.domElement );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -148,7 +200,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -183,7 +235,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -226,9 +278,9 @@ class Parameters extends Tab {
 
 	createGroup( name ) {
 
-		const group = new ParametersGroup( this.parameters, name );
+		const group = new ParametersGroup( this, name );
 
-		this.paramList.add( group.item );
+		this.paramList.add( group.paramList );
 
 		return group;
 

examples/jsm/inspector/ui/Item.js

@@ -66,6 +66,7 @@ export class Item {
 
 			this.childrenContainer = document.createElement( 'div' );
 			this.childrenContainer.className = 'list-children-container';
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
 			this.domElement.appendChild( this.childrenContainer );
 			this.itemRow.addEventListener( 'click', this.onItemClick );
 
@@ -141,10 +142,16 @@ export class Item {
 
 	toggle() {
 
-		if ( ! this.childrenContainer ) return;
 		this.isOpen = ! this.isOpen;
 		this.itemRow.classList.toggle( 'open', this.isOpen );
-		this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		if ( this.childrenContainer ) {
+
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		}
+
+		return this;
 
 	}
 

examples/jsm/inspector/ui/Values.js

@@ -209,7 +209,6 @@ class ValueSlider extends Value {
 
 		this.slider = document.createElement( 'input' );
 		this.slider.type = 'range';
-		this.slider.value = value;
 		this.slider.min = min;
 		this.slider.max = max;
 		this.slider.step = step;
@@ -219,6 +218,8 @@ class ValueSlider extends Value {
 		this.numberInput.style.width = '60px';
 		this.numberInput.style.flexShrink = '0';
 
+		this.slider.value = value;
+
 		this.domElement.append( this.slider, this.numberInput );
 
 		this.slider.addEventListener( 'input', () => {
@@ -318,4 +319,65 @@ class ValueSelect extends Value {
 
 }
 
-export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect };
+class ValueColor extends Value {
+
+	constructor( { value = '#ffffff' } ) {
+
+		super();
+
+		const colorInput = document.createElement( 'input' );
+		colorInput.type = 'color';
+		colorInput.value = this._getColorHex( value );
+		this.colorInput = colorInput;
+
+		this._value = value;
+
+		colorInput.addEventListener( 'input', () => {
+
+			const colorValue = colorInput.value;
+
+			if ( this._value.isColor ) {
+
+				this._value.setHex( parseInt( colorValue.slice( 1 ), 16 ) );
+
+			} else {
+
+				this._value = colorValue;
+
+			}
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( colorInput );
+
+	}
+
+	_getColorHex( color ) {
+
+		if ( color.isColor ) {
+
+			color = color.getHex();
+
+		}
+
+		if ( typeof color === 'number' ) {
+
+			color = `#${ color.toString( 16 ) }`;
+
+		}
+
+		return color;
+
+	}
+
+	getValue() {
+
+		return this._value;
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor };

examples/jsm/tsl/display/BloomNode.js

@@ -300,6 +300,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetBright );
 		_quadMesh.material = this._highPassFilterMaterial;
+		_quadMesh.name = 'Bloom [ High Pass ]';
 		_quadMesh.render( renderer );
 
 		// 2. Blur all the mips progressively
@@ -313,11 +314,13 @@ class BloomNode extends TempNode {
 			this._separableBlurMaterials[ i ].colorTexture.value = inputRenderTarget.texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionX;
 			renderer.setRenderTarget( this._renderTargetsHorizontal[ i ] );
+			_quadMesh.name = `Bloom [ Blur Horizontal - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			this._separableBlurMaterials[ i ].colorTexture.value = this._renderTargetsHorizontal[ i ].texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionY;
 			renderer.setRenderTarget( this._renderTargetsVertical[ i ] );
+			_quadMesh.name = `Bloom [ Blur Vertical - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			inputRenderTarget = this._renderTargetsVertical[ i ];
@@ -328,6 +331,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetsHorizontal[ 0 ] );
 		_quadMesh.material = this._compositeMaterial;
+		_quadMesh.name = 'Bloom [ Composite ]';
 		_quadMesh.render( renderer );
 
 		// restore