Home Explore Help
Register Sign In
samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: More inspector usage. (#31964)

Michael Herzog 4 months ago
parent
4f803ab174
commit
f44e0cbce0
13 changed files with 193 additions and 148 deletions
Split View Show Diff Stats
  1. 14 3
      examples/webgpu_custom_fog.html
  2. 13 16
      examples/webgpu_custom_fog_background.html
  3. 13 4
      examples/webgpu_display_stereo.html
  4. 20 19
      examples/webgpu_equirectangular.html
  5. 19 13
      examples/webgpu_hdr.html
  6. 15 15
      examples/webgpu_instance_mesh.html
  7. 13 3
      examples/webgpu_instance_path.html
  8. 16 22
      examples/webgpu_instance_points.html
  9. 15 15
      examples/webgpu_instance_sprites.html
  10. 12 12
      examples/webgpu_instance_uniform.html
  11. 17 10
      examples/webgpu_instancing_morph.html
  12. 10 2
      examples/webgpu_layers.html
  13. 16 14
      examples/webgpu_lensflares.html

+ 14 - 3
examples/webgpu_custom_fog.html
View File 

@@ -4,11 +4,20 @@
 
 		<title>three.js webgpu - custom fog</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 - custom fog
 
+
 
+		<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>Custom Fog</span>
 
+			</div>
 
+
 
+			<small>
 
+				Custom Fog via TSL.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -28,6 +37,7 @@
 
 			import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, uniform } from 'three/tsl';
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			let camera, scene, renderer;
 
 			let controls;
 
@@ -124,6 +134,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				// controls

+ 13 - 16
examples/webgpu_custom_fog_background.html
View File 

@@ -4,22 +4,22 @@
 
 		<title>three.js webgpu - custom fog background</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 {
 
-				background-color: #4080cc;
 
-			}
 
-
 
-		</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> webgpu - custom fog background<br />
 
-			Battle Damaged Sci-fi Helmet by
 
-			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 
-			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</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>Custom Fog Background</span>
 
+			</div>
 
+
 
+			<small>
 
+				Custom Fog Background via Post-Processing.<br/>
 
+				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>.<br/>
 
+				<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -50,9 +50,6 @@
 
 
 			function init() {
 
 
-				const container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 
 				camera.position.set( - 1.8, 0.6, 2.7 );
 
 
@@ -62,7 +59,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.toneMapping = THREE.NoToneMapping; // apply tone mapping in post processing, instead
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				// post processing

+ 13 - 4
examples/webgpu_display_stereo.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js webgpu - stereo effects</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> - stereo effects. skybox by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</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>Stereo Effects</span>
 
+			</div>
 
+
 
+			<small>
 
+				Collection of Stereo, Anaglyph and Parallax Barrier effects.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -31,7 +39,7 @@
 
 			import { anaglyphPass } from 'three/addons/tsl/display/AnaglyphPassNode.js';
 
 			import { parallaxBarrierPass } from 'three/addons/tsl/display/ParallaxBarrierPassNode.js';
 
 			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';
 
 
 			let camera, scene, renderer, postProcessing;
 
 
@@ -97,6 +105,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				postProcessing = new THREE.PostProcessing( renderer );
 
@@ -106,7 +115,7 @@
 
 
 				postProcessing.outputNode = stereo;
 
 
-				const gui = new GUI();
 
+				const gui = renderer.inspector.createParameters( 'Stereo Settings' );
 
 				gui.add( params, 'effect', effects ).onChange( update );
 
 				gui.add( params, 'eyeSep', 0.001, 0.15, 0.001 ).onChange( function ( value ) {

+ 20 - 19
examples/webgpu_equirectangular.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js webgpu - equirectangular</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> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</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>Equirectangular Panorama</span>
 
+			</div>
 
+
 
+			<small>
 
+				Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -28,9 +36,8 @@
 
 			import * as THREE from 'three/webgpu';
 
 			import { texture, equirectUV } from 'three/tsl';
 
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			let camera, scene, renderer;
 
 			let controls;
 
@@ -54,7 +61,8 @@
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.setAnimationLoop( render );
 
+				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				container.appendChild( renderer.domElement );
 
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
@@ -62,6 +70,12 @@
 
 				controls.rotateSpeed = - 0.125; // negative, to track mouse pointer
 
 				controls.autoRotateSpeed = 1.0;
 
 
+				// GUI
 
+
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
+
 
+				gui.add( scene, 'backgroundIntensity', 0, 1 ).name( 'background intensity' );
 
+
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 			}
 
@@ -75,7 +89,7 @@
 
 
 			}
 
 
-			function render() {
 
+			function animate() {
 
 
 				controls.update();
 
 
@@ -83,19 +97,6 @@
 
 
 			}
 
 
-			const gui = new GUI();
 
-
 
-			const params = {
 
-				intensity: 1.0,
 
-			};
 
-			gui.add( params, 'intensity', 0, 1 ).onChange( function ( value ) {
 
-
 
-				scene.backgroundIntensity = value;
 
-				render();
 
-
 
-			} );
 
-
 
-
 
 		</script>
 
 
 	</body>

+ 19 - 13
examples/webgpu_hdr.html
View File 

@@ -4,8 +4,11 @@
 
 	<meta charset="utf-8" />
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 
 	<title>three.js webgpu - HDR Draw</title>
 
-	<link type="text/css" rel="stylesheet" href="main.css" />
 
+	<link type="text/css" rel="stylesheet" href="example.css">
 
 	<style>
 
+		body {
 
+			background-color: #fff;
 
+		}
 
 		#no-hdr {
 
 			position: absolute;
 
 			font-family: monospace;
 
@@ -24,9 +27,18 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="info" style="color: #000">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - HDR Draw
 
+		<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>HDR</span>
 
+			</div>
 
+
 
+			<small>
 
+				The demo produces a color output intended for HDR monitors.
 
+			</small>
 
 		</div>
 
+
 
 		<div id="no-hdr" style="display: none">
 
 			<div>
 
 			The browser says your device or monitor doesn't support HDR.<br />
 
@@ -53,7 +65,7 @@
 
 			import { pass, uv, uniform } from 'three/tsl';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import { ExtendedSRGBColorSpace, ExtendedSRGBColorSpaceImpl } from 'three/addons/math/ColorSpaces.js';
 
 
@@ -95,6 +107,7 @@
 
 			renderer.outputColorSpace = ExtendedSRGBColorSpace;
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.inspector = new Inspector();
 
 			document.body.appendChild( renderer.domElement );
 
 
 			const camera = new THREE.OrthographicCamera( 0, window.innerWidth, window.innerHeight, 0, 1, 2 );
 
@@ -152,24 +165,17 @@
 
 			renderer.domElement.addEventListener( 'touchend', ( e ) => e.preventDefault(), { passive: false } );
 
 
 			// GUI setup
 
-			const gui = new GUI();
 
+			const gui = renderer.inspector.createParameters( 'Settings' );
 
 
 			const colorFolder = gui.addFolder( 'HDR' );
 
 			colorFolder.add( params.intensity, 'value', 0, 10, 0.1 ).name( 'Intensity' );
 
-			colorFolder.open();
 
 
 			const brushFolder = gui.addFolder( 'Brush Settings' );
 
 			brushFolder.add( params.hardness, 'value', 0, 0.99, 0.01 ).name( 'Hardness' );
 
 			brushFolder.add( params.radius, 'value', 0.1, 2.0, 0.01 ).name( 'Radius' );
 
-			brushFolder.open();
 
 
 			const effectFolder = gui.addFolder( 'Effects' );
 
-			effectFolder
 
-				.add( params.afterImageDecay, 'value', 0.9, 0.999, 0.001 )
 
-				.name( 'After Image Decay' );
 
-			effectFolder.open();
 
-
 
-			gui.open();
 
+			effectFolder.add( params.afterImageDecay, 'value', 0.9, 0.999, 0.001 ).name( 'After Image Decay' );
 
 
 			// Resize handling
 
 			function onResize() {

+ 15 - 15
examples/webgpu_instance_mesh.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js webgpu - instance mesh</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 - instance mesh
 
+			<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>Instancing</span>
 
+			</div>
 
+
 
+			<small>
 
+				Instanced rendering via InstancedMesh.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -28,11 +36,9 @@
 
 			import * as THREE from 'three/webgpu';
 
 			import { mix, range, normalWorld, oscSine, time } from 'three/tsl';
 
 
-			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';
 
-
 
-			let camera, scene, renderer, stats;
 
+			let camera, scene, renderer;
 
 
 			let mesh;
 
 			const amount = parseInt( window.location.search.slice( 1 ) ) || 10;
 
@@ -69,8 +75,8 @@
 
 
 					//
 
 
-					const gui = new GUI();
 
-					gui.add( mesh, 'count', 1, count );
 
+					const gui = renderer.inspector.createParameters( 'Settings' );
 
+					gui.add( mesh, 'count', 1, count ).step( 1 ).name( 'instance count' );
 
 
 				} );
 
 
@@ -80,15 +86,11 @@
 
 				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 );
 
-
 
-				//
 
-
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 			}
 
@@ -108,8 +110,6 @@
 
 
 				render();
 
 
-				stats.update();
 
-
 
 			}
 
 
 			async function render() {

+ 13 - 3
examples/webgpu_instance_path.html
View File 

@@ -1,15 +1,23 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgpu - geometry path</title>
 
+		<title>three.js webgpu - instance path</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 - geometry path
 
+			<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>Instance Path</span>
 
+			</div>
 
+
 
+			<small>
 
+				Rendering and animating instances along a path.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -29,6 +37,7 @@
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import { abs, add, instancedBufferAttribute, positionLocal, mod, time, sin, vec3, select, float, screenUV, color } from 'three/tsl';
 
 
@@ -132,6 +141,7 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
 				renderer.toneMapping = THREE.NeutralToneMapping;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				await renderer.init();

+ 16 - 22
examples/webgpu_instance_points.html
View File 

@@ -4,14 +4,22 @@
 
 		<title>three.js webgpu - points instanced</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">
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
 
-		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> webgpu - instanced points</div>
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Instanced Points</span>
 
+			</div>
 
+
 
+			<small>
 
+				Rendering instanced sprites with TSL to emulate wide points.
 
+			</small>
 
+		</div>
 
 
 		<script type="importmap">
 
 			{
 
@@ -29,17 +37,13 @@
 
 			import * as THREE from 'three/webgpu';
 
 			import { color, storage, Fn, instancedBufferAttribute, instanceIndex, sin, time, float, uniform, shapeCircle, mix, vec3 } from 'three/tsl';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
 
 
 			let renderer, scene, camera, camera2, controls, backgroundNode;
 
 			let material;
 
-			let stats;
 
-			let gui;
 
 			let effectController;
 
 
 			// viewport
 
@@ -67,8 +71,7 @@
 
 
 					pulseSpeed: uniform( 6 ),
 
 					minWidth: uniform( 6 ),
 
-					maxWidth: uniform( 20 ),
 
-					alphaToCoverage: true
 
+					maxWidth: uniform( 20 )
 
 
 				};
 
 
@@ -148,7 +151,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
-				//renderer.logarithmicDepthBuffer = true;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
@@ -161,16 +164,9 @@
 
 
 				// GUI
 
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				gui = new GUI();
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 
-				gui.add( effectController, 'alphaToCoverage' ).onChange( function ( val ) {
 
-
 
-					material.alphaToCoverage = val;
 
-
 
-				} );
 
+				gui.add( material, 'alphaToCoverage' );
 
 
 				gui.add( effectController.minWidth, 'value', 1, 30, 1 ).name( 'minWidth' );
 
 				gui.add( effectController.maxWidth, 'value', 2, 30, 1 ).name( 'maxWidth' );
 
@@ -195,8 +191,6 @@
 
 
 			function animate() {
 
 
-				stats.update();
 
-
 
 				// compute
 
 
 				renderer.compute( computeSize );

+ 15 - 15
examples/webgpu_instance_sprites.html
View File 

@@ -4,14 +4,22 @@
 
 		<title>three.js webgpu - instance sprites</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 - instance sprites
 
-		</div>
 
+			<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>Instanced Sprites</span>
 
+			</div>
 
 
+			<small>
 
+				Rendering instanced sprites with TSL.
 
+			</small>
 
+		</div>
 
+		
 		<script type="importmap">
 
 			{
 
 				"imports": {
 
@@ -27,13 +35,12 @@
 
 
 			import * as THREE from 'three/webgpu';
 
 
-			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 { uniform, time, instanceIndex, instancedBufferAttribute } from 'three/tsl';
 
 
 
-			let camera, scene, renderer, stats, material;
 
+			let camera, scene, renderer, material;
 
 			let mouseX = 0, mouseY = 0;
 
 
 			let windowHalfX = window.innerWidth / 2;
 
@@ -89,16 +96,12 @@
 
 				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 );
 
-
 
-				//
 
-
 
-				const gui = new GUI();
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 
 				gui.add( material, 'sizeAttenuation' ).onChange( function () {
 
 
@@ -107,8 +110,6 @@
 
 			
 				} );
 
 
-				gui.open();
 
-
 
 				//
 
 
 				document.body.style.touchAction = 'none';
 
@@ -146,7 +147,6 @@
 
 			function animate() {
 
 
 				render();
 
-				stats.update();
 
 
 			}

+ 12 - 12
examples/webgpu_instance_uniform.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js webgpu - instance uniform</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 - instance uniform
 
+			<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>Instanced Uniform</span>
 
+			</div>
 
+
 
+			<small>
 
+				Rendering instanced meshes with individual instance uniforms.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -32,7 +40,7 @@
 
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			class InstanceUniformNode extends THREE.Node {
 
 
@@ -64,8 +72,6 @@
 
 
 			}
 
 
-			let stats;
 
-
 
 			let camera, scene, renderer;
 
 			let controls;
 
 
@@ -126,6 +132,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				container.appendChild( renderer.domElement );
 
 
 				//
 
@@ -136,11 +143,6 @@
 
 
 				//
 
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 			}
 
@@ -188,8 +190,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 17 - 10
examples/webgpu_instancing_morph.html
View File 

@@ -4,9 +4,22 @@
 
 		<title>three.js webgpu - instancing morph target animations</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>Instancing Morph</span>
 
+			</div>
 
+
 
+			<small>
 
+				Rendering instances which are individually animated via morph targets.
 
+			</small>
 
+		</div>
 
+
 
 		<script type="importmap">
 
 			{
 
 				"imports": {
 
@@ -23,10 +36,9 @@
 
 			import * as THREE from 'three/webgpu';
 
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
-			let camera, scene, renderer, stats, mesh, mixer, dummy;
 
+			let camera, scene, renderer, mesh, mixer, dummy;
 
 
 			const offset = 5000;
 
 
@@ -52,12 +64,8 @@
 
 
 				scene.fog = new THREE.Fog( 0x99DDFF, 5000, 10000 );
 
 
-
 
 				//
 
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
 				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 
 
 				light.position.set( 200, 1000, 50 );
 
@@ -142,6 +150,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -183,8 +192,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 10 - 2
examples/webgpu_layers.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js webgpu - layers</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 layers
 
+			<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>Layers</span>
 
+			</div>
 
+
 
+			<small>
 
+				Organizing 3D objects in different layers.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">

+ 16 - 14
examples/webgpu_lensflares.html
View File 

@@ -4,14 +4,22 @@
 
 		<title>three.js webgpu - 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> - lensflares<br/>
 
-			textures from <a href="http://www.ro.me" target="_blank" rel="noopener">ro.me</a><br/>
 
-			fly with WASD/RF/QE + mouse
 
+			<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>
 
+				Fly with WASD/RF/QE + mouse.<br/>
 
+				Textures from <a href="http://www.ro.me" target="_blank" rel="noopener">ro.me</a>
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -29,12 +37,11 @@
 
 
 			import * as THREE from 'three/webgpu';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
 			import { FlyControls } from 'three/addons/controls/FlyControls.js';
 
 			import { LensflareMesh, LensflareElement } from 'three/addons/objects/LensflareMesh.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
-			let container, stats;
 
+			let container;
 
 
 			let camera, scene, renderer;
 
 			let controls;
 
@@ -125,10 +132,11 @@
 
 
 				// renderer
 
 
-				renderer = new THREE.WebGPURenderer( { antialias: false } );
 
+				renderer = new THREE.WebGPURenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				container.appendChild( renderer.domElement );
 
 
 				//
 
@@ -141,11 +149,6 @@
 
 				controls.autoForward = false;
 
 				controls.dragToLook = false;
 
 
-				// stats
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
 				// events
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -168,7 +171,6 @@
 
 			function animate() {
 
 
 				render();
 
-				stats.update();
 
 
 			}

粤ICP备19079148号