Examples: More Inspector usage. (#31988)

* Examples: More Inspector usage.

* E2E: Update screenshots.

* add partial .setValue

* Update webgpu_postprocessing_transition.html

* Update webgpu_postprocessing_transition.jpg

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>

examples/jsm/inspector/ui/Values.js

@@ -25,6 +25,14 @@ class Value extends EventDispatcher {
 
 	}
 
+	setValue( /*val*/ ) {
+
+		this.dispatchChange();
+
+		return this;
+
+	}
+
 	getValue() {
 
 		return null;
@@ -240,6 +248,15 @@ class ValueSlider extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.slider.value = val;
+		this.numberInput.value = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return parseFloat( this.slider.value );

examples/jsm/tsl/display/AfterImageNode.js

@@ -2,7 +2,7 @@ import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode,
 import { nodeObject, Fn, float, uv, texture, passTexture, sign, max, convertToTexture } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
-const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
@@ -144,10 +144,11 @@ class AfterImageNode extends TempNode {
 		this.textureNodeOld.value = this._oldRT.texture;
 
 		// comp
-		_quadMeshComp.material = this._materialComposed;
+		_quadMesh.material = this._materialComposed;
+		_quadMesh.name = 'AfterImage';
 
 		renderer.setRenderTarget( this._compRT );
-		_quadMeshComp.render( renderer );
+		_quadMesh.render( renderer );
 
 		// Swap the textures
 

examples/jsm/tsl/display/AnamorphicNode.js

@@ -158,6 +158,7 @@ class AnamorphicNode extends TempNode {
 		const currentTexture = textureNode.value;
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'Anamorphic';
 
 		this.setSize( map.image.width, map.image.height );
 

examples/jsm/tsl/display/DepthOfFieldNode.js

@@ -285,6 +285,7 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._CoCMaterial;
 		renderer.setRenderTarget( this._CoCRT );
+		_quadMesh.name = 'DoF [ CoC ]';
 		_quadMesh.render( renderer );
 
 		// blur near field to avoid visible aliased edges when the near field
@@ -294,6 +295,7 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._CoCBlurredMaterial;
 		renderer.setRenderTarget( this._CoCBlurredRT );
+		_quadMesh.name = 'DoF [ CoC Blur ]';
 		_quadMesh.render( renderer );
 
 		// blur64 near
@@ -302,12 +304,14 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._blur64Material;
 		renderer.setRenderTarget( this._blur64RT );
+		_quadMesh.name = 'DoF [ Blur64 Near ]';
 		_quadMesh.render( renderer );
 
 		// blur16 near
 
 		_quadMesh.material = this._blur16Material;
 		renderer.setRenderTarget( this._blur16NearRT );
+		_quadMesh.name = 'DoF [ Blur16 Near ]';
 		_quadMesh.render( renderer );
 
 		// blur64 far
@@ -316,18 +320,21 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._blur64Material;
 		renderer.setRenderTarget( this._blur64RT );
+		_quadMesh.name = 'DoF [ Blur64 Far ]';
 		_quadMesh.render( renderer );
 
 		// blur16 far
 
 		_quadMesh.material = this._blur16Material;
 		renderer.setRenderTarget( this._blur16FarRT );
+		_quadMesh.name = 'DoF [ Blur16 Far ]';
 		_quadMesh.render( renderer );
 
 		// composite
 
 		_quadMesh.material = this._compositeMaterial;
 		renderer.setRenderTarget( this._compositeRT );
+		_quadMesh.name = 'DoF [ Composite ]';
 		_quadMesh.render( renderer );
 
 		// restore

examples/jsm/tsl/display/GTAONode.js

@@ -253,6 +253,7 @@ class GTAONode extends TempNode {
 		this.setSize( size.width, size.height );
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'AO';
 
 		// clear
 

examples/jsm/tsl/display/SSRNode.js

@@ -347,6 +347,7 @@ class SSRNode extends TempNode {
 		// ssr
 
 		renderer.setRenderTarget( ssrRenderTarget );
+		_quadMesh.name = 'SSR [ Reflections ]';
 		_quadMesh.render( renderer );
 
 		// blur (optional)
@@ -361,6 +362,7 @@ class SSRNode extends TempNode {
 
 				this._blurSpread.value = i;
 				renderer.setRenderTarget( blurRenderTarget, 0, i );
+				_quadMesh.name = 'SSR [ Blur Level ' + i + ' ]';
 				_quadMesh.render( renderer );
 
 			}

examples/webgpu_postprocessing.html

@@ -4,9 +4,20 @@
 		<title>three.js webgpu - postprocessing</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" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Post Processing</span>
+			</div>
+
+			<small>Mix of simple post processing effects.</small>
+		</div>
+
 		<script type="importmap">
 			{
 				"imports": {
@@ -24,6 +35,7 @@
 			import { pass } from 'three/tsl';
 			import { dotScreen } from 'three/addons/tsl/display/DotScreenNode.js';
 			import { rgbShift } from 'three/addons/tsl/display/RGBShiftNode.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, renderer, postProcessing;
 			let object;
@@ -36,6 +48,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -74,7 +87,7 @@
 				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
-				const scenePassColor = scenePass.getTextureNode();
+				const scenePassColor = scenePass.getTextureNode().toInspector( 'Scene Color' );
 
 				const dotScreenPass = dotScreen( scenePassColor );
 				dotScreenPass.scale.value = 0.3;

examples/webgpu_postprocessing_3dlut.html

@@ -4,15 +4,22 @@
 		<title>three.js webgpu - 3d luts</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> - post processing - 3D LUTs<br />
-			Based on <a href="https://threejs-journey.com/lessons/coffee-smoke-shader" target="_blank" rel="noopener">Three.js Journey</a> lesson<br />
-			Perlin noise texture from <a href="http://kitfox.com/projects/perlinNoiseMaker/" target="_blank" rel="noopener">Perlin Noise Maker</a>, 
-			LUTs from <a href="https://www.rocketstock.com/free-after-effects-templates/35-free-luts-for-color-grading-videos/">RocketStock</a>, <a href="https://www.freepresets.com/product/free-luts-cinematic/">FreePresets.com</a>
+			<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>3D LUTs</span>
+			</div>
+
+			<small>
+				3D Lookup-Tables for color grading, based on <a href="https://threejs-journey.com/lessons/coffee-smoke-shader" target="_blank" rel="noopener">Three.js Journey</a> lesson.<br />
+				Perlin noise texture from <a href="http://kitfox.com/projects/perlinNoiseMaker/" target="_blank" rel="noopener">Perlin Noise Maker</a>, 
+				LUTs from <a href="https://www.rocketstock.com/free-after-effects-templates/35-free-luts-for-color-grading-videos/">RocketStock</a>, <a href="https://www.freepresets.com/product/free-luts-cinematic/">FreePresets.com</a>.
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -37,7 +44,7 @@
 			import { LUTCubeLoader } from 'three/addons/loaders/LUTCubeLoader.js';
 			import { LUT3dlLoader } from 'three/addons/loaders/LUT3dlLoader.js';
 			import { LUTImageLoader } from 'three/addons/loaders/LUTImageLoader.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			const params = {
 				lut: 'Bourbon 64.CUBE',
@@ -195,6 +202,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				// post processing
@@ -226,9 +234,9 @@
 
 				// gui
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( params, 'lut', Object.keys( lutMap ) );
-				gui.add( params, 'intensity' ).min( 0 ).max( 1 );
+				gui.add( params, 'intensity', 0, 1 );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgpu_postprocessing_afterimage.html

@@ -4,13 +4,21 @@
 		<title>three.js webgpu - postprocessing afterimage</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</a> - postprocessing - after image<br />
-			Based on <a href="https://oosmoxiecode.com/archive/js_webgl/spiral/" target="_blank" rel="noopener">Particle Spiral</a>
-			by <a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>
+			<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>After Image</span>
+			</div>
+
+			<small>
+				Based on <a href="https://oosmoxiecode.com/archive/js_webgl/spiral/" target="_blank" rel="noopener">Particle Spiral</a>
+				by <a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>.
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -30,10 +38,9 @@
 			import { instancedBufferAttribute, uniform, mod, pass, texture, float, time, vec2, vec3, vec4, sin, cos } from 'three/tsl';
 			import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, particles, stats;
+			let camera, scene, renderer, particles;
 			let postProcessing, afterImagePass, scenePass;
 
 			const params = {
@@ -51,6 +58,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -123,15 +131,10 @@
 
 				//
 
-				const gui = new GUI( { title: 'Damp setting' } );
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( afterImagePass.damp, 'value', 0.25, 1 );
 				gui.add( params, 'enabled' ).onChange( updatePassChain );
 
-				//
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -184,8 +187,6 @@
 
 				postProcessing.render();
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_anamorphic.html

@@ -4,14 +4,20 @@
 		<title>three.js webgpu - postprocessing anamorphic</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</a> webgpu - postprocessing anamorphic<br />
-			Battle Damaged Sci-fi Helmet by
-			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
+			<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>Anamorphic Lensflares</span>
+			</div>
+
+			<small>
+				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>.
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -36,7 +42,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
 			let postProcessing;
@@ -78,6 +84,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.LinearToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.inspector = new Inspector();
 				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
@@ -94,7 +101,7 @@
 				const intensity = uniform( 1 );
 				const samples = 64;
 
-				const anamorphicPass = anamorphic( scenePass.getTextureNode(), threshold, scaleNode, samples );
+				const anamorphicPass = anamorphic( scenePass.getTextureNode().toInspector( 'Color' ), threshold, scaleNode, samples ).toInspector( 'Anamorphic' );
 				anamorphicPass.resolutionScale = params.resolutionScale; // 1 = full resolution
 
 				postProcessing = new THREE.PostProcessing( renderer );
@@ -103,7 +110,7 @@
 
 				// gui
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( intensity, 'value', 0, 4, 0.1 ).name( 'intensity' );
 				gui.add( threshold, 'value', .8, 3, .001 ).name( 'threshold' );
 				gui.add( scaleNode, 'value', 1, 10, 0.1 ).name( 'scale' );

examples/webgpu_postprocessing_ao.html

@@ -4,14 +4,22 @@
 		<title>three.js webgpu - ambient occlusion</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</a> webgpu - postprocessing - ambient occlusion<br />
-			<a href="https://skfb.ly/oCnNx" target="_blank" rel="noopener">Minimalistic Modern Bedroom</a> by 
-			<a href="https://sketchfab.com/dylanheyes" target="_blank" rel="noopener">dylanheyes</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
+			<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>AO</span>
+			</div>
+
+			<small>
+				Ambient Occlusion based on GTAO.<br />
+				<a href="https://skfb.ly/oCnNx" target="_blank" rel="noopener">Minimalistic Modern Bedroom</a> by 
+				<a href="https://sketchfab.com/dylanheyes" target="_blank" rel="noopener">dylanheyes</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.	
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -37,10 +45,9 @@
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls, stats;
+			let camera, scene, renderer, postProcessing, controls;
 
 			let aoPass, traaPass, blendPassAO, scenePassColor;
 
@@ -67,11 +74,9 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.domElement );
-
 				await renderer.init();
 
 				const environment = new RoomEnvironment();
@@ -103,14 +108,18 @@
 					velocity: velocity
 				} ) );
 
-				scenePassColor = scenePass.getTextureNode( 'output' );
-				const scenePassNormal = scenePass.getTextureNode( 'normal' );
-				const scenePassDepth = scenePass.getTextureNode( 'depth' );
-				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
+				scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' );
+				const scenePassDepth = scenePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => {
+
+					return scenePass.getLinearDepthNode();
+
+				} );
+				const scenePassNormal = scenePass.getTextureNode( 'normal' ).toInspector( 'Normal' );
+				const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' );
 
 				// ao
 
-				aoPass = ao( scenePassDepth, scenePassNormal, camera );
+				aoPass = ao( scenePassDepth, scenePassNormal, camera ).toInspector( 'AO' );
 				aoPass.resolutionScale = 0.5; // running AO in half resolution is often sufficient
 				blendPassAO = vec4( scenePassColor.rgb.mul( aoPass.r ), scenePassColor.a ); // the AO is stored only in the red channel
 
@@ -151,14 +160,13 @@
 
 				//
 
-				const gui = new GUI();
-				gui.title( 'AO settings' );
-				gui.add( params, 'samples' ).min( 4 ).max( 32 ).step( 1 ).onChange( updateParameters );
-				gui.add( params, 'distanceExponent' ).min( 1 ).max( 2 ).onChange( updateParameters );
-				gui.add( params, 'distanceFallOff' ).min( 0.01 ).max( 1 ).onChange( updateParameters );
-				gui.add( params, 'radius' ).min( 0.1 ).max( 1 ).onChange( updateParameters );
-				gui.add( params, 'scale' ).min( 0.01 ).max( 2 ).onChange( updateParameters );
-				gui.add( params, 'thickness' ).min( 0.01 ).max( 2 ).onChange( updateParameters );
+				const gui = renderer.inspector.createParameters( 'Settings' );
+				gui.add( params, 'samples', 4, 32 ).step( 1 ).onChange( updateParameters );
+				gui.add( params, 'distanceExponent', 1, 2 ).onChange( updateParameters );
+				gui.add( params, 'distanceFallOff', 0.01, 1 ).onChange( updateParameters );
+				gui.add( params, 'radius', 0.1, 1 ).onChange( updateParameters );
+				gui.add( params, 'scale', 0.01, 2 ).onChange( updateParameters );
+				gui.add( params, 'thickness', 0.01, 2 ).onChange( updateParameters );
 				gui.add( params, 'aoOnly' ).onChange( ( value ) => {
 
 					if ( value === true ) {
@@ -205,8 +213,6 @@
 
 				controls.update();
 
-				stats.update();
-
 				postProcessing.render();
 
 			}

examples/webgpu_postprocessing_bloom.html

@@ -4,24 +4,22 @@
 		<title>three.js webgpu - postprocessing - bloom</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">
-		<style>
-		#info > * {
-			max-width: 650px;
-			margin-left: auto;
-			margin-right: auto;
-		}
-		</style>
+		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 	<body>
 
-		<div id="container"></div>
-
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
-			<br/>
-			Model: <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by
-			<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution.
+			<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>Bloom</span>
+			</div>
+
+			<small>
+				Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>.<br/>
+				<a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by 
+				<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -41,14 +39,13 @@
 			import { pass } from 'three/tsl';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 
-			let camera, stats;
+			let camera;
 			let postProcessing, renderer, mixer, clock;
 
 			const params = {
@@ -94,26 +91,22 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ReinhardToneMapping;
-				container.appendChild( renderer.domElement );
+				renderer.inspector = new Inspector();
+				document.body.appendChild( renderer.domElement );
 
 				//
 
 				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
-				const scenePassColor = scenePass.getTextureNode( 'output' );
+				const scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' );
 
-				const bloomPass = bloom( scenePassColor );
+				const bloomPass = bloom( scenePassColor ).toInspector( 'Bloom' );
 
 				postProcessing.outputNode = scenePassColor.add( bloomPass );
 
 				//
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				//
-
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI * 0.5;
 				controls.minDistance = 3;
@@ -121,7 +114,7 @@
 
 				//
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				const bloomFolder = gui.addFolder( 'bloom' );
 
@@ -175,8 +168,6 @@
 
 				postProcessing.render();
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_bloom_emissive.html

@@ -4,12 +4,18 @@
 		<title>three.js webgpu - bloom emissive</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</a> webgpu - bloom emissive
+			<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>Emissive Bloom</span>
+			</div>
+
+			<small>Selective Bloom based on the "emissive" material property.</small>
 		</div>
 
 		<script type="importmap">
@@ -34,7 +40,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
 			let postProcessing;
@@ -80,6 +86,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
 
 				//
@@ -90,8 +97,8 @@
 					emissive
 				} ) );
 
-				const outputPass = scenePass.getTextureNode();
-				const emissivePass = scenePass.getTextureNode( 'emissive' );
+				const outputPass = scenePass.getTextureNode().toInspector( 'Color' );
+				const emissivePass = scenePass.getTextureNode( 'emissive' ).toInspector( 'Emissive' );
 
 				const bloomPass = bloom( emissivePass, 2.5, .5 );
 
@@ -109,13 +116,13 @@
 
 				//
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
-				const bloomFolder = gui.addFolder( 'bloom' );
+				const bloomFolder = gui.addFolder( 'Bloom' );
 				bloomFolder.add( bloomPass.strength, 'value', 0.0, 5.0 ).name( 'strength' );
 				bloomFolder.add( bloomPass.radius, 'value', 0.0, 1.0 ).name( 'radius' );
 
-				const toneMappingFolder = gui.addFolder( 'tone mapping' );
+				const toneMappingFolder = gui.addFolder( 'Tone Mapping' );
 				toneMappingFolder.add( renderer, 'toneMappingExposure', 0.1, 2 ).name( 'exposure' );
 
 			}

examples/webgpu_postprocessing_bloom_selective.html

@@ -4,12 +4,18 @@
 		<title>three.js webgpu - bloom selective</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</a> webgpu - bloom selective
+			<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>Selective Bloom</span>
+			</div>
+
+			<small>Using MRT do define whether an object should be affected by Bloom or not.</small>
 		</div>
 
 		<script type="importmap">
@@ -31,7 +37,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			// scene
 
@@ -71,6 +77,7 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( animate );
+			renderer.inspector = new Inspector();
 			renderer.toneMapping = THREE.NeutralToneMapping;
 			document.body.appendChild( renderer.domElement );
 
@@ -82,8 +89,8 @@
 				bloomIntensity: float( 0 ) // default bloom intensity
 			} ) );
 
-			const outputPass = scenePass.getTextureNode();
-			const bloomIntensityPass = scenePass.getTextureNode( 'bloomIntensity' );
+			const outputPass = scenePass.getTextureNode().toInspector( 'Color' );
+			const bloomIntensityPass = scenePass.getTextureNode( 'bloomIntensity' ).toInspector( 'Bloom Intensity' );
 
 			const bloomPass = bloom( outputPass.mul( bloomIntensityPass ) );
 
@@ -125,14 +132,14 @@
 
 			// gui
 
-			const gui = new GUI();
+			const gui = renderer.inspector.createParameters( 'Settings' );
 
-			const bloomFolder = gui.addFolder( 'bloom' );
+			const bloomFolder = gui.addFolder( 'Bloom' );
 			bloomFolder.add( bloomPass.threshold, 'value', 0.0, 1.0 ).name( 'threshold' );
 			bloomFolder.add( bloomPass.strength, 'value', 0.0, 3 ).name( 'strength' );
 			bloomFolder.add( bloomPass.radius, 'value', 0.0, 1.0 ).name( 'radius' );
 
-			const toneMappingFolder = gui.addFolder( 'tone mapping' );
+			const toneMappingFolder = gui.addFolder( 'Tone Mapping' );
 			toneMappingFolder.add( renderer, 'toneMappingExposure', 0.1, 3 ).name( 'exposure' );
 
 			// events

examples/webgpu_postprocessing_ca.html

@@ -4,13 +4,19 @@
 		<title>three.js webgpu - chromatic aberration</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</a> webgpu - chromatic aberration
+			<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>CA</span>
+			</div>
+
+			<small>Chromatic Aberration effect.</small>
 		</div>
 
 		<script type="importmap">
@@ -33,7 +39,7 @@
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 			import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			const params = {
 				enabled: true,
@@ -56,6 +62,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				await renderer.init();
@@ -114,8 +121,7 @@
 
 				// GUI
 
-				const gui = new GUI();
-				gui.title( 'Chromatic Aberration' );
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				gui.add( params, 'enabled' ).onChange( ( value ) => {
 

examples/webgpu_postprocessing_difference.html

@@ -4,13 +4,18 @@
 		<title>three.js webgpu - frame difference</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</a>
-			<br/>saturated color of objects according to the difference from one frame to another
+			<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>Difference</span>
+			</div>
+
+			<small>Saturated color of objects according to the difference from one frame to another.</small>
 		</div>
 
 		<script type="importmap">
@@ -31,7 +36,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			const params = {
 				speed: 0
@@ -48,6 +53,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				renderer.toneMapping = THREE.NeutralToneMapping;
 				document.body.appendChild( renderer.domElement );
 
@@ -99,7 +105,7 @@
 
 				//
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( params, 'speed', 0, 2 );
 
 			}

examples/webgpu_postprocessing_dof.html

@@ -4,9 +4,20 @@
 		<title>three.js webgpu - postprocessing dof</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" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>DoF</span>
+			</div>
+
+			<small>High-Quality Depth-of-Field effect.</small>
+		</div>
+
 		<script type="importmap">
 			{
 				"imports": {
@@ -25,13 +36,11 @@
 			import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			//
 
-			let camera, scene, renderer, mesh, controls, stats;
+			let camera, scene, renderer, mesh, controls;
 
 			let width = window.innerWidth;
 			let height = window.innerHeight;
@@ -98,6 +107,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				const effectController = {
@@ -112,7 +122,7 @@
 
 				const scenePass = pass( scene, camera );
 
-				const scenePassColor = scenePass.getTextureNode();
+				const scenePassColor = scenePass.getTextureNode().toInspector( 'Color' );
 				const scenePassViewZ = scenePass.getViewZNode();
 
 				const dofPass = dof( scenePassColor, scenePassViewZ, effectController.focusDistance, effectController.focalLength, effectController.bokehScale );
@@ -126,14 +136,9 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				// stats
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				// gui
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( effectController.focusDistance, 'value', 10.0, 3000.0 ).name( 'focus distance' );
 				gui.add( effectController.focalLength, 'value', 50, 750 ).name( 'focal length' );
 				gui.add( effectController.bokehScale, 'value', 1, 20 ).name( 'bokeh scale' );
@@ -158,8 +163,6 @@
 
 				postProcessing.render();
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_dof_basic.html

@@ -4,25 +4,22 @@
 		<title>three.js webgpu - postprocessing dof - basic</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">
-		<style>
-			body {
-				touch-action: none;
-				color: #000000;
-				background: #90D5FF;
-			}
-			a {
-				color: #2983ff;
-			}
-		</style>
+		<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</a> - DOF - basic</a><br />
-			<a href="https://skfb.ly/opNFG" target="_blank" rel="noopener">Bath day</a> by 
-			<a href="https://sketchfab.com/stanst" target="_blank" rel="noopener">Stan.St</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
-			Click on a position in the scene to focus it.<br />
+			<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>DoF Basic</span>
+			</div>
+
+			<small>
+				Performant Depth-of-Field effect with a simple box blur. Click on a position in the scene to focus it.<br />
+				<a href="https://skfb.ly/opNFG" target="_blank" rel="noopener">Bath day</a> by 
+				<a href="https://sketchfab.com/stanst" target="_blank" rel="noopener">Stan.St</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -48,7 +45,7 @@
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 			import TWEEN from 'three/addons/libs/tween.module.js';
 
 			let camera, controls, scene, timer, renderer, model, mixer, raycaster, postProcessing;
@@ -105,6 +102,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				renderer.toneMapping = THREE.NeutralToneMapping;
 				document.body.appendChild( renderer.domElement );
 
@@ -124,7 +122,7 @@
 
 				const scenePass = pass( scene, camera );
 			
-				const scenePassColor = scenePass.getTextureNode();
+				const scenePassColor = scenePass.getTextureNode().toInspector( 'Color' );
 				const scenePassViewZ = scenePass.getViewZNode();
 				const scenePassBlurred = boxBlur( scenePassColor, { size: blurSize, separation: blurSpread } );
 
@@ -140,7 +138,7 @@
 
 				// GUI
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( minDistance, 'value', 0, 3 ).name( 'min distance' );
 				gui.add( maxDistance, 'value', 0, 5 ).name( 'max distance' );
 				gui.add( blurSize, 'value', 1, 3, 1 ).name( 'blur size' );

examples/webgpu_postprocessing_fxaa.html

@@ -4,11 +4,21 @@
 		<title>three.js webgpu - FXAA</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" class="invert">
+			<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>FXAA</span>
+			</div>
+
+			<small>Fast Approximate Anti-Aliasing.</small>
+		</div>
+
 		<script type="importmap">
 			{
 				"imports": {
@@ -26,7 +36,7 @@
 			import { pass, renderOutput } from 'three/tsl';
 			import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			const params = {
 				enabled: true,
@@ -89,6 +99,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				// post processing
@@ -102,7 +113,7 @@
 
 				// scene pass
 
-				const scenePass = pass( scene, camera );
+				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 				const outputPass = renderOutput( scenePass );
 
 				// FXAA must be computed in sRGB color space (so after tone mapping and color space conversion)
@@ -116,8 +127,7 @@
 
 				//
 
-				const gui = new GUI();
-				gui.title( 'FXAA settings' );
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( params, 'enabled' ).onChange( ( value ) => {
 			
 					if ( value === true ) {

examples/webgpu_postprocessing_lensflare.html

@@ -4,15 +4,23 @@
 		<title>three.js webgpu - postprocessing lensflares</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</a> webgpu - postprocessing lensflares<br />
-			<a href="https://skfb.ly/6SqUF" target="_blank" rel="noopener">Space Ship Hallway</a> by 
-			<a href="https://sketchfab.com/yeeyeeman" target="_blank" rel="noopener">yeeyeeman</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
-			<a href="https://www.spacespheremaps.com/planetary-spheremaps/" target="_blank" rel="noopener">Ice Planet Close</a> from <a href="https://www.spacespheremaps.com/" target="_blank" rel="noopener">Space Spheremaps</a>.
+			<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>Lensflares</span>
+			</div>
+
+			<small>
+				Bloom based Lensflares via Post Processing.<br />
+				<a href="https://skfb.ly/6SqUF" target="_blank" rel="noopener">Space Ship Hallway</a> by 
+				<a href="https://sketchfab.com/yeeyeeman" target="_blank" rel="noopener">yeeyeeman</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
+				<a href="https://www.spacespheremaps.com/planetary-spheremaps/" target="_blank" rel="noopener">Ice Planet Close</a> from <a href="https://www.spacespheremaps.com/" target="_blank" rel="noopener">Space Spheremaps</a>.
+			</small>
 		</div>
 
 		<script type="importmap">
@@ -39,19 +47,15 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, controls, stats;
+			let camera, scene, renderer, controls;
 			let postProcessing;
 
 			init();
 
 			async function init() {
 
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				//
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
@@ -92,7 +96,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				container.appendChild( renderer.domElement );
+				renderer.inspector = new Inspector();
+				document.body.appendChild( renderer.domElement );
 
 				//
 
@@ -102,10 +107,10 @@
 					emissive
 				} ) );
 
-				const outputPass = scenePass.getTextureNode();
-				const emissivePass = scenePass.getTextureNode( 'emissive' );
+				const outputPass = scenePass.getTextureNode().toInspector( 'Color' );
+				const emissivePass = scenePass.getTextureNode( 'emissive' ).toInspector( 'Emissive' );
 
-				const bloomPass = bloom( emissivePass, 1, 1 );
+				const bloomPass = bloom( emissivePass, 1, 1 ).toInspector( 'Bloom' );
 
 				const threshold = uniform( 0.5 );
 				const ghostAttenuationFactor = uniform( 25 );
@@ -136,12 +141,7 @@
 
 				//
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
-				//
-
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				const bloomFolder = gui.addFolder( 'bloom' );
 				bloomFolder.add( bloomPass.strength, 'value', 0.0, 2.0 ).name( 'strength' );
@@ -170,8 +170,6 @@
 
 			function render() {
 
-				stats.update();
-
 				controls.update();
 
 				postProcessing.render();

examples/webgpu_postprocessing_masking.html

@@ -4,11 +4,19 @@
 		<title>three.js webgpu - masking</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="container"></div>
+		<div id="info" class="invert">
+			<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>Masking</span>
+			</div>
+
+			<small>Masking via Post Processing.</small>
+		</div>
 
 		<script type="importmap">
 			{
@@ -25,6 +33,7 @@
 
 			import * as THREE from 'three/webgpu';
 			import { pass, texture } from 'three/tsl';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, postProcessing, renderer;
 			let box, torus;
@@ -67,6 +76,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgpu_postprocessing_motion_blur.html

@@ -4,12 +4,18 @@
 		<title>three.js webgpu - motion blur</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</a> webgpu - motion blur
+			<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>Motion Blur</span>
+			</div>
+
+			<small>Motion Blur based on Velocity (Motion Vectors).</small>
 		</div>
 
 		<script type="importmap">
@@ -26,22 +32,19 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, texture, uniform, output, mrt, mix, velocity, uv, screenUV } from 'three/tsl';
+			import { pass, texture, uniform, output, mrt, velocity, uv, screenUV } from 'three/tsl';
 			import { motionBlur } from 'three/addons/tsl/display/MotionBlur.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
 			let boxLeft, boxRight, model, mixer, clock;
 			let postProcessing;
 			let controls;
-			let stats;
 
 			const params = {
 				speed: 1.0
@@ -158,11 +161,9 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 10;
@@ -177,7 +178,6 @@
 				// post-processing
 
 				const blurAmount = uniform( 1 );
-				const showVelocity = uniform( 0 );
 
 				const scenePass = pass( scene, camera );
 
@@ -186,24 +186,22 @@
 					velocity
 				} ) );
 
-				const beauty = scenePass.getTextureNode();
-				const vel = scenePass.getTextureNode( 'velocity' ).mul( blurAmount );
+				const beauty = scenePass.getTextureNode().toInspector( 'Color' );
+				const vel = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' ).mul( blurAmount );
 
 				const mBlur = motionBlur( beauty, vel );
 
 				const vignette = screenUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
 
 				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = mix( mBlur, vel, showVelocity ).mul( vignette );
+				postProcessing.outputNode = mBlur.mul( vignette );
 
 				//
 
-				const gui = new GUI();
-				gui.title( 'Motion Blur Settings' );
+				const gui = renderer.inspector.createParameters( 'Motion Blur Settings' );
 				gui.add( controls, 'autoRotate' );
 				gui.add( blurAmount, 'value', 0, 3 ).name( 'blur amount' );
 				gui.add( params, 'speed', 0, 2 );
-				gui.add( showVelocity, 'value', 0, 1 ).name( 'show velocity' );
 
 				//
 
@@ -222,8 +220,6 @@
 
 			function animate() {
 
-				stats.update();
-
 				controls.update();
 
 				const delta = clock.getDelta();

examples/webgpu_postprocessing_outline.html

@@ -4,11 +4,18 @@
 		<title>three.js webgpu - post processing - Outline Pass</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</a> - Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
+			<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>Outline</span>
+			</div>
+
+			<small>Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>.</small>
 		</div>
 
 		<script type="importmap">
@@ -28,13 +35,11 @@
 			import { pass, uniform, time, oscSine } from 'three/tsl';
 			import { outline } from 'three/addons/tsl/display/OutlineNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
-			let container, stats;
 			let camera, scene, renderer, controls;
 			let postProcessing, outlinePass;
 
@@ -50,17 +55,15 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
 				renderer = new THREE.WebGPURenderer();
-				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
+				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -167,11 +170,6 @@
 				torus.receiveShadow = true;
 				torus.castShadow = true;
 
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
 				// outline pass
 
 				const edgeStrength = uniform( 3.0 );
@@ -197,14 +195,14 @@
 
 				// postprocessing
 
-				const scenePass = pass( scene, camera );
+				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = outlinePulse.add( scenePass );
 
 				// gui
 
-				const gui = new GUI( { width: 280 } );
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( edgeStrength, 'value', 0.01, 10 ).name( 'edgeStrength' );
 				gui.add( edgeGlow, 'value', 0.0, 1 ).name( 'edgeGlow' );
 				gui.add( edgeThickness, 'value', 1, 4 ).name( 'edgeThickness' );
@@ -281,14 +279,10 @@
 
 			function animate() {
 
-				stats.begin();
-
 				controls.update();
 
 				postProcessing.render();
 
-				stats.end();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_pixel.html

@@ -4,16 +4,20 @@
 		<title>three.js webgpu - postprocessing pixel</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</a> - Node based pixelation pass with optional single pixel outlines by
-		<a href="https://github.com/KodyJKing" target="_blank" rel="noopener">Kody King</a><br /><br />
-	</div>
+		<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
-	<div id="container"></div>
+		<div class="title-wrapper">
+			<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Pixelation</span>
+		</div>
+
+		<small>Node based pixelation pass with optional single pixel outlines by <a href="https://github.com/KodyJKing" target="_blank" rel="noopener">Kody King</a>.</small>
+	</div>
 
 	<script type="importmap">
 		{
@@ -32,13 +36,13 @@
 		import * as THREE from 'three/webgpu';
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+		import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 		import { uniform } from 'three/tsl';
 		import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
 
 		let camera, scene, renderer, postProcessing, crystalMesh, clock;
-		let gui, effectController;
+		let effectController;
 
 		init();
 
@@ -128,10 +132,11 @@
 			scene.add( spotLight );
 
 			renderer = new THREE.WebGPURenderer();
-			renderer.shadowMap.enabled = true;
-			renderer.shadowMap.type = THREE.BasicShadowMap;
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( animate );
+			renderer.inspector = new Inspector();
+			renderer.shadowMap.enabled = true;
+			renderer.shadowMap.type = THREE.BasicShadowMap;
 			document.body.appendChild( renderer.domElement );
 
 			effectController = {
@@ -152,7 +157,7 @@
 
 			// gui
 
-			gui = new GUI();
+			const gui = renderer.inspector.createParameters( 'Settings' );
 			gui.add( effectController.pixelSize, 'value', 1, 16, 1 ).name( 'Pixel Size' );
 			gui.add( effectController.normalEdgeStrength, 'value', 0, 2, 0.05 ).name( 'Normal Edge Strength' );
 			gui.add( effectController.depthEdgeStrength, 'value', 0, 1, 0.05 ).name( 'Depth Edge Strength' );

examples/webgpu_postprocessing_smaa.html

@@ -4,11 +4,18 @@
 		<title>three.js webgpu - postprocessing smaa</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 noreferrer">three.js</a> - post-processing SMAA
+			<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>SMAA</span>
+			</div>
+
+			<small>Subpixel Morphological Anti-Aliasing.</small>
 		</div>
 
 		<script type="importmap">
@@ -28,10 +35,9 @@
 			import { pass } from 'three/tsl';
 			import { smaa } from 'three/addons/tsl/display/SMAANode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, stats;
+			let camera, scene, renderer, postProcessing;
 
 			const params = {
 				enabled: true,
@@ -47,11 +53,9 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				//
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -79,7 +83,7 @@
 
 				postProcessing = new THREE.PostProcessing( renderer );
 
-				const scenePass = pass( scene, camera );
+				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 				const smaaPass = smaa( scenePass );
 
 				postProcessing.outputNode = smaaPass;
@@ -88,7 +92,7 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				const smaaFolder = gui.addFolder( 'SMAA' );
 				smaaFolder.add( params, 'enabled' ).onChange( ( value ) => {
@@ -126,8 +130,6 @@
 
 			function animate() {
 
-				stats.begin();
-
 				if ( params.autoRotate === true ) {
 
 					for ( let i = 0; i < scene.children.length; i ++ ) {
@@ -143,8 +145,6 @@
 
 				postProcessing.render();
 
-				stats.end();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_sobel.html

@@ -4,11 +4,18 @@
 		<title>three.js webgpu - postprocessing sobel</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</a> - Edge Detection with Sobel
+			<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> Sobel</span>
+			</div>
+
+			<small>Edge Detection with a Sobel operator.</small>
 		</div>
 
 		<script type="importmap">
@@ -31,8 +38,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
-
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, controls;
 			let postProcessing;
@@ -65,6 +71,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				renderer.toneMapping = THREE.LinearToneMapping;
 				document.body.appendChild( renderer.domElement );
 
@@ -96,10 +103,8 @@
 
 				//
 
-				const gui = new GUI();
-
+				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( params, 'enabled' );
-				gui.open();
 
 				//
 

examples/webgpu_postprocessing_ssaa.html

@@ -1,14 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - postprocessing manual ssaa</title>
+		<title>three.js webgpu - postprocessing ssaa</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</a> - Unbiased Manual Supersampling Anti-Aliasing (SSAA) pass by <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
+			<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>SSAA</span>
+			</div>
+
+			<small>Unbiased Manual Supersampling Anti-Aliasing (SSAA) pass by <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>.</small>
 		</div>
 
 		<script type="importmap">
@@ -27,12 +34,11 @@
 			import * as THREE from 'three/webgpu';
 			import { ssaaPass } from 'three/addons/tsl/display/SSAAPassNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let scene, mesh, renderer, postProcessing;
 			let camera, ssaaRenderPass;
-			let gui, stats, timer;
+			let timer;
 
 			const params = {
 				sampleLevel: 3,
@@ -46,31 +52,6 @@
 
 			init();
 
-			clearGui();
-
-			function clearGui() {
-
-				if ( gui ) gui.destroy();
-
-				gui = new GUI();
-
-				gui.add( params, 'sampleLevel', {
-					'Level 0: 1 Sample': 0,
-					'Level 1: 2 Samples': 1,
-					'Level 2: 4 Samples': 2,
-					'Level 3: 8 Samples': 3,
-					'Level 4: 16 Samples': 4,
-					'Level 5: 32 Samples': 5
-				} );
-				gui.add( params, 'clearColor', [ 'black', 'white', 'blue', 'green', 'red' ] );
-				gui.add( params, 'clearAlpha', 0, 1 );
-				gui.add( params, 'viewOffsetX', - 100, 100 );
-				gui.add( params, 'autoRotate' );
-
-				gui.open();
-
-			}
-
 			function init() {
 
 				const width = window.innerWidth;
@@ -80,11 +61,9 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				timer = new THREE.Timer();
 				timer.connect( document );
 
@@ -158,6 +137,23 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
+				// GUI
+
+				const gui = renderer.inspector.createParameters( 'Settings' );
+
+				gui.add( params, 'sampleLevel', {
+					'Level 0: 1 Sample': 0,
+					'Level 1: 2 Samples': 1,
+					'Level 2: 4 Samples': 2,
+					'Level 3: 8 Samples': 3,
+					'Level 4: 16 Samples': 4,
+					'Level 5: 32 Samples': 5
+				} );
+				gui.add( params, 'clearColor', [ 'black', 'white', 'blue', 'green', 'red' ] );
+				gui.add( params, 'clearAlpha', 0, 1 );
+				gui.add( params, 'viewOffsetX', - 100, 100 );
+				gui.add( params, 'autoRotate' );
+
 			}
 
 			function onWindowResize() {
@@ -207,8 +203,6 @@
 
 				postProcessing.render();
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_ssr.html

@@ -7,16 +7,24 @@
 		<title>three.js webgpu - postprocessing - Screen Space Reflections (SSR)</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</a> webgpu - postprocessing - screen space reflections<br />
-		<a href="https://skfb.ly/6tqYD" target="_blank" rel="noopener">Steampunk Camera</a> by
-		<a href="https://sketchfab.com/lumoize" target="_blank" rel="noopener">dylanheyes</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
-	</div>
+		<div id="info">
+			<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>SSR</span>
+			</div>
+
+			<small>
+				Screen Space Reflections.<br />
+				<a href="https://skfb.ly/6tqYD" target="_blank" rel="noopener">Steampunk Camera</a> by
+				<a href="https://sketchfab.com/lumoize" target="_blank" rel="noopener">dylanheyes</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.
+			</small>
+		</div>
 
 	<script type="importmap">
 		{
@@ -40,8 +48,7 @@
 		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
-		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-		import Stats from 'three/addons/libs/stats.module.js';
+		import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 		const params = {
 			quality: 0.5,
@@ -54,7 +61,7 @@
 		};
 
 		let camera, scene, model, renderer, postProcessing, ssrPass;
-		let gui, stats, controls;
+		let controls;
 
 		init();
 
@@ -105,6 +112,7 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( animate );
 			renderer.toneMapping = THREE.ACESFilmicToneMapping;
+			renderer.inspector = new Inspector();
 			document.body.appendChild( renderer.domElement );
 
 			await renderer.init();
@@ -127,10 +135,14 @@
 				metalrough: vec2( metalness, roughness ) // pack metalness and roughness into a single attachment
 			} ) );
 
-			const scenePassColor = scenePass.getTextureNode( 'output' );
-			const scenePassNormal = scenePass.getTextureNode( 'normal' );
-			const scenePassDepth = scenePass.getTextureNode( 'depth' );
-			const scenePassMetalRough = scenePass.getTextureNode( 'metalrough' );
+			const scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' );
+			const scenePassNormal = scenePass.getTextureNode( 'normal' ).toInspector( 'Normal' );
+			const scenePassDepth = scenePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => {
+
+				return scenePass.getLinearDepthNode();
+
+			} );
+			const scenePassMetalRough = scenePass.getTextureNode( 'metalrough' ).toInspector( 'Metalness-Roughness' );
 
 			// optional: optimize bandwidth by reducing the texture precision for normals and metal/roughness
 
@@ -148,7 +160,7 @@
 
 			//
 
-			ssrPass = ssr( scenePassColor, scenePassDepth, sceneNormal, scenePassMetalRough.r, scenePassMetalRough.g );
+			ssrPass = ssr( scenePassColor, scenePassDepth, sceneNormal, scenePassMetalRough.r, scenePassMetalRough.g ).toInspector( 'SSR' );
 
 			// blend SSR over beauty
 
@@ -162,22 +174,17 @@
 			controls.enableDamping = true;
 			controls.update();
 
-			// stats
-
-			stats = new Stats();
-			document.body.appendChild( stats.dom );
-
 			window.addEventListener( 'resize', onWindowResize );
 
 			// GUI
 
-			gui = new GUI();
+			const gui = renderer.inspector.createParameters( 'Settings' );
 			const ssrFolder = gui.addFolder( 'SSR' );
-			ssrFolder.add( params, 'quality' ).min( 0 ).max( 1 ).onChange( updateParameters );
-			ssrFolder.add( params, 'blurQuality' ).min( 1 ).max( 3 ).step( 1 ).onChange( updateParameters );
-			ssrFolder.add( params, 'maxDistance' ).min( 0 ).max( 1 ).onChange( updateParameters );
-			ssrFolder.add( params, 'opacity' ).min( 0 ).max( 1 ).onChange( updateParameters );
-			ssrFolder.add( params, 'thickness' ).min( 0 ).max( 0.05 ).onChange( updateParameters );
+			ssrFolder.add( params, 'quality', 0, 1 ).onChange( updateParameters );
+			ssrFolder.add( params, 'blurQuality', 1, 3 ).step( 1 ).onChange( updateParameters );
+			ssrFolder.add( params, 'maxDistance', 0, 1 ).onChange( updateParameters );
+			ssrFolder.add( params, 'opacity', 0, 1 ).onChange( updateParameters );
+			ssrFolder.add( params, 'thickness', 0, 0.05 ).onChange( updateParameters );
 			ssrFolder.add( params, 'enabled' ).onChange( () => {
 
 				if ( params.enabled === true ) {
@@ -194,7 +201,7 @@
 
 			} );
 			const modelFolder = gui.addFolder( 'Model' );
-			modelFolder.add( params, 'roughness' ).min( 0 ).max( 1 ).onChange( ( value ) => {
+			modelFolder.add( params, 'roughness', 0, 1 ).onChange( ( value ) => {
 
 				model.traverse( function ( object ) {
 
@@ -233,14 +240,10 @@
 
 		function animate() {
 
-			stats.begin();
-
 			controls.update();
 
 			postProcessing.render();
-
-			stats.end();
-
+		
 		}
 
 	</script>

examples/webgpu_postprocessing_traa.html

@@ -4,11 +4,18 @@
 		<title>three.js webgpu - postprocessing traa</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</a> - Temporal Reprojection Anti-Aliasing (TRAA) 
+			<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>TRAA</span>
+			</div>
+
+			<small>Temporal Reprojection Anti-Aliasing.</small>
 		</div>
 
 		<script type="importmap">
@@ -28,10 +35,9 @@
 			import { mrt, output, pass, velocity } from 'three/tsl';
 			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, postProcessing;
-			let stats;
 			let index = 0;
 
 			init();
@@ -42,11 +48,9 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 2.5;
 
@@ -80,9 +84,13 @@
 					velocity: velocity
 				} ) );
 
-				const scenePassColor = scenePass.getTextureNode( 'output' );
-				const scenePassDepth = scenePass.getTextureNode( 'depth' );
-				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
+				const scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' );
+				const scenePassDepth = scenePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => {
+
+					return scenePass.getLinearDepthNode();
+
+				} );
+				const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' );
 
 				const traaNode = traa( scenePassColor, scenePassDepth, scenePassVelocity, camera );
 			
@@ -125,8 +133,6 @@
 
 				postProcessing.render();
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgpu_postprocessing_transition.html

@@ -4,13 +4,18 @@
 		<title>three.js webgpu - scenes transition</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</a> webgpu scene transitions.<br/>
-			Original implementation by <a href="https://twitter.com/fernandojsg">fernandojsg</a> - <a href="https://github.com/kile/three.js-demos">github</a>
+			<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>Scene Transitions</span>
+			</div>
+
+			<small>Original implementation by <a href="https://twitter.com/fernandojsg" target="_blank">fernandojsg</a> - <a href="https://github.com/kile/three.js-demos" target="_blank">github</a>.</small>
 		</div>
 
 		<script type="importmap">
@@ -28,8 +33,10 @@
 
 			import * as THREE from 'three/webgpu';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import TWEEN from 'three/addons/libs/tween.module.js';
+
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
+
 			import { uniform, pass } from 'three/tsl';
 			import { transition } from 'three/addons/tsl/display/TransitionNode.js';
 
@@ -154,6 +161,7 @@
 				}
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.inspector = new Inspector();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -168,7 +176,7 @@
 
 				postProcessing.outputNode = transitionPass;
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				gui.add( effectController, 'animateScene' ).name( 'Animate Scene' );
 				gui.add( effectController, 'animateTransition' ).name( 'Animate Transition' );

test/e2e/puppeteer.js

@@ -177,6 +177,8 @@ const exceptionList = [
 	'webgpu_rendertarget_2d-array_3d',
 	'webgpu_materials_envmaps_bpcem',
 	'webgpu_postprocessing_ao',
+	'webgpu_postprocessing_difference',
+	'webgpu_postprocessing_dof',
 	'webgpu_postprocessing_sobel',
 	'webgpu_postprocessing_3dlut',
 	'webgpu_postprocessing_fxaa',