Examples: Update with the new style and inspector

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 @@
 
 		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 @@
 		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,69 @@
 
 }
 
-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 ) }`;
+
+		} else {
+
+			color = color;
+
+		}
+
+		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

examples/webgpu_volume_caustics.html

@@ -4,12 +4,18 @@
 		<title>three.js webgpu - volumetric caustics</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
+		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - volumetric caustics
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Caustics</span>
+			</div>
+
+			<small>Real-time volumetric caustics effects.</small>
 		</div>
 
 		<script type="importmap">
@@ -34,16 +40,13 @@
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			import { bayer16 } from 'three/addons/tsl/math/Bayer.js';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-
 			let camera, scene, renderer, controls;
 			let postProcessing;
-			let stats;
 			let gltf;
 
 			init();
@@ -143,12 +146,6 @@
 
 				} )();
 
-				// GUI
-
-				const gui = new GUI();
-				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
-				gui.addColor( duck.material, 'color' ).name( 'material color' );
-
 				// Ground
 
 				const textureLoader = new THREE.TextureLoader();
@@ -168,11 +165,18 @@
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
+				// GUI
+
+				const gui = renderer.inspector.createParameters( 'Volumetric Caustics' );
+				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
+				gui.addColor( duck.material, 'color' ).name( 'material color' );
+
 				// Post-Processing
 
 				postProcessing = new THREE.PostProcessing( renderer );
@@ -276,8 +280,9 @@
 				// Volumetric Lighting Pass
 
 				const volumetricPass = pass( scene, camera, { depthBuffer: false } );
+				volumetricPass.name = 'Volumetric Lighting';
 				volumetricPass.setLayers( volumetricLayer );
-				volumetricPass.setResolution( .5 );
+				volumetricPass.setResolutionScale( .5 );
 
 				// Compose and Denoise
 
@@ -287,11 +292,6 @@
 
 				postProcessing.outputNode = scenePassColor;
 
-				// Stats
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				// Controls
 
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -314,8 +314,6 @@
 
 			function animate() {
 
-				stats.update();
-
 				for ( const mesh of gltf.children ) {
 
 					mesh.rotation.y -= .01;