Examples/Inspector: Revisions (#32003)

* change init message icon/style

* fix button parameters `.name()`

* improve mobile style

* remove `.step()` function from ui parameters

* Update webgpu_backdrop_water.html

* updates

* Update puppeteer.js

examples/jsm/inspector/Inspector.js

@@ -135,7 +135,7 @@ class Inspector extends RendererInspector {
 
 		const renderer = this.getRenderer();
 
-		let sign = `🚀 "WebGPURenderer" - ${ REVISION } [ "`;
+		let sign = `THREE.WebGPURenderer: ${ REVISION } [ "`;
 
 		if ( renderer.backend.isWebGPUBackend ) {
 

examples/jsm/inspector/tabs/Console.js

@@ -104,6 +104,10 @@ class Console extends Tab {
 
 			icon = '✨';
 
+		} else if ( subType === 'webgpurenderer' ) {
+
+			icon = '🎨';
+
 		} else if ( type === 'warn' ) {
 
 			icon = '⚠️';

examples/jsm/inspector/tabs/Parameters.js

@@ -283,7 +283,13 @@ class ParametersGroup {
 
 		// extend object property
 
-		this._addParameter( object, property, editor, subItem );
+		editor.name = ( name ) => {
+
+			editor.domElement.childNodes[ 0 ].textContent = name;
+
+			return editor;
+
+		};
 
 		return editor;
 

examples/jsm/inspector/ui/Style.js

@@ -146,6 +146,7 @@ export class Style {
 	overflow-x: auto;
 	overflow-y: hidden;
 	width: calc(100% - 89px);
+	height: 38px;
 }
 
 .profiler-tabs {

examples/jsm/inspector/ui/Values.js

@@ -97,13 +97,6 @@ class ValueNumber extends Value {
 
 	}
 
-	step( value ) {
-
-		this.input.step = value;
-		return this;
-
-	}
-
 	addDragHandler() {
 
 		let isDragging = false;

examples/webgl_morphtargets.html

@@ -138,12 +138,12 @@
 				};
 				const gui = new GUI( { title: 'Morph Targets' } );
 
-				gui.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Spherify', 0, 1, 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 0 ] = value;
 
 				} );
-				gui.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Twist', 0, 1, 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 1 ] = value;
 

examples/webgpu_lines_fat_wireframe.html

@@ -146,6 +146,9 @@
 				renderer.autoClear = true;
 
 				scene.backgroundNode = null;
+
+				scene.name = 'Scene';
+
 				renderer.render( scene, camera );
 
 				// inset scene
@@ -166,6 +169,9 @@
 				renderer.autoClear = false;
 
 				scene.backgroundNode = backgroundNode;
+
+				scene.name = 'Scene [ Scissor ]';
+
 				renderer.render( scene, camera2 );
 
 				renderer.setScissorTest( false );

examples/webgpu_mesh_batch.html

@@ -247,8 +247,8 @@
 				init( ! api.webgpu );
 
 			} );
-			gui.add( api, 'count', 1, MAX_GEOMETRY_COUNT ).step( 1 ).onChange( initMesh );
-			gui.add( api, 'dynamic', 0, MAX_GEOMETRY_COUNT ).step( 1 );
+			gui.add( api, 'count', 1, MAX_GEOMETRY_COUNT, 1 ).onChange( initMesh );
+			gui.add( api, 'dynamic', 0, MAX_GEOMETRY_COUNT, 1 );
 
 			gui.add( api, 'opacity', 0, 1 ).onChange( v => {
 
@@ -271,7 +271,7 @@
 			gui.add( api, 'sortObjects' );
 			gui.add( api, 'perObjectFrustumCulled' );
 			gui.add( api, 'useCustomSort' );
-			gui.add( api, 'randomizeGeometry' );
+			gui.add( api, 'randomizeGeometry' ).name( 'randomize geometry' );
 
 
 			// listeners

examples/webgpu_morphtargets.html

@@ -151,12 +151,12 @@
 
 				const gui = renderer.inspector.createParameters( 'Morph Targets' );
 
-				gui.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Spherify', 0, 1, 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 0 ] = value;
 
 				} );
-				gui.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Twist', 0, 1, 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 1 ] = value;
 

examples/webgpu_multisampled_renderbuffers.html

@@ -77,7 +77,7 @@
 			function initGUI() {
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
-				gui.add( params, 'samples', 0, 4 ).step( 1 );
+				gui.add( params, 'samples', 0, 4, 1 );
 				gui.add( params, 'animated' );
 
 			}

examples/webgpu_ocean.html

@@ -4,7 +4,7 @@
 		<title>three.js webgpu - ocean</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>
 
@@ -37,14 +37,13 @@
 
 			import * as THREE from 'three/webgpu';
 
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { WaterMesh } from 'three/addons/objects/WaterMesh.js';
 			import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
 
-			let container, stats;
+			let container;
 			let camera, scene, renderer;
 			let controls, water, sun, mesh;
 
@@ -59,9 +58,10 @@
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( animate );
+				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.5;
+				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
 
 				//
@@ -157,25 +157,18 @@
 				controls.maxDistance = 200.0;
 				controls.update();
 
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
 				// GUI
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				const folderSky = gui.addFolder( 'Sky' );
 				folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun );
 				folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun );
-				folderSky.open();
 
 
 				const folderWater = gui.addFolder( 'Water' );
 				folderWater.add( water.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
 				folderWater.add( water.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
-				folderWater.open();
 
 				//
 
@@ -192,13 +185,6 @@
 
 			}
 
-			function animate() {
-
-				render();
-				stats.update();
-
-			}
-
 			function render() {
 
 				const time = performance.now() * 0.001;

examples/webgpu_postprocessing_ao.html

@@ -161,7 +161,7 @@
 				//
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
-				gui.add( params, 'samples', 4, 32 ).step( 1 ).onChange( updateParameters );
+				gui.add( params, 'samples', 4, 32, 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 );

examples/webgpu_postprocessing_bloom.html

@@ -130,7 +130,7 @@
 
 				} );
 
-				gui.add( params, 'radius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'radius', 0.0, 1.0, 0.01 ).onChange( function ( value ) {
 
 					bloomPass.radius.value = value;
 

examples/webgpu_postprocessing_ssgi.html

@@ -224,8 +224,8 @@
 
 				const gui = renderer.inspector.createParameters( 'SSGI settings' );
 				gui.add( params, 'output', types ).onChange( updatePostprocessing );
-				gui.add( giPass.sliceCount, 'value', 1, 4 ).step( 1 ).name( 'slice count' );
-				gui.add( giPass.stepCount, 'value', 1, 32 ).step( 1 ).name( 'step count' );
+				gui.add( giPass.sliceCount, 'value', 1, 4, 1 ).name( 'slice count' );
+				gui.add( giPass.stepCount, 'value', 1, 32, 1 ).name( 'step count' );
 				gui.add( giPass.radius, 'value', 1, 25 ).name( 'radius' );
 				gui.add( giPass.expFactor, 'value', 1, 3 ).name( 'exp factor' );
 				gui.add( giPass.thickness, 'value', 0.01, 10 ).name( 'thickness' );

examples/webgpu_postprocessing_ssr.html

@@ -181,7 +181,7 @@
 			const gui = renderer.inspector.createParameters( 'Settings' );
 			const ssrFolder = gui.addFolder( 'SSR' );
 			ssrFolder.add( params, 'quality', 0, 1 ).onChange( updateParameters );
-			ssrFolder.add( params, 'blurQuality', 1, 3 ).step( 1 ).onChange( updateParameters );
+			ssrFolder.add( params, 'blurQuality', 1, 3, 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 );

examples/webgpu_shadowmap_csm.html

@@ -195,7 +195,7 @@
 
 				} );
 
-				gui.add( params, 'maxFar', 1, 5000 ).step( 1 ).name( 'max shadow far' ).onChange( function ( value ) {
+				gui.add( params, 'maxFar', 1, 5000, 1 ).name( 'max shadow far' ).onChange( function ( value ) {
 
 					csm.maxFar = value;
 					csm.updateFrustums();

examples/webgpu_shadowmap_progressive.html

@@ -198,9 +198,9 @@
 				const gui = renderer.inspector.createParameters( 'Accumulation Settings' );
 				gui.add( params, 'Enable' );
 				gui.add( params, 'Blur Edges' );
-				gui.add( params, 'Blend Window', 1, 500 ).step( 1 );
-				gui.add( params, 'Light Radius', 0, 200 ).step( 10 );
-				gui.add( params, 'Ambient Weight', 0, 1 ).step( 0.1 );
+				gui.add( params, 'Blend Window', 1, 500, 1 );
+				gui.add( params, 'Light Radius', 0, 200, 10 );
+				gui.add( params, 'Ambient Weight', 0, 1, 0.1 );
 				gui.add( params, 'Debug Lightmap' ).onChange( ( value ) => progressiveSurfacemap.showDebugLightmap( value ) );
 
 			}

examples/webgpu_water.html

@@ -217,13 +217,13 @@
 					waterNode.scale.value = value;
 
 				} );
-				gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'flowX', - 1, 1, 0.01 ).onChange( function ( value ) {
 
 					waterNode.flowDirection.value.x = value;
 					waterNode.flowDirection.value.normalize();
 
 				} );
-				gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'flowY', - 1, 1, 0.01 ).onChange( function ( value ) {
 
 					waterNode.flowDirection.value.y = value;
 					waterNode.flowDirection.value.normalize();

test/e2e/puppeteer.js

@@ -190,6 +190,7 @@ const exceptionList = [
 	'webgpu_volume_lighting',
 	'webgpu_volume_lighting_rectarea',
 	'webgpu_reflection',
+	'webgpu_ocean',
 
 	// WebGPU idleTime and parseTime too low
 	'webgpu_compute_cloth',