Skip to content

Commit f44e0cb

Browse files
Mugen87Mugen87
authored
Examples: More inspector usage. (#31964)
1 parent 4f803ab commit f44e0cb

13 files changed

+193
-148
lines changed

‎examples/webgpu_custom_fog.html‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,20 @@
44
<title>three.js webgpu - custom fog</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<link type="text/css" rel="stylesheet" href="main.css">
7+
<link type="text/css" rel="stylesheet" href="example.css">
88
</head>
99
<body>
10-
<div id="info">
11-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - custom fog
10+
11+
<div id="info" class="invert">
12+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
13+
14+
<div class="title-wrapper">
15+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Custom Fog</span>
16+
</div>
17+
18+
<small>
19+
Custom Fog via TSL.
20+
</small>
1221
</div>
1322

1423
<script type="importmap">
@@ -28,6 +37,7 @@
2837
import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, uniform } from 'three/tsl';
2938

3039
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
40+
import { Inspector } from 'three/addons/inspector/Inspector.js';
3141

3242
let camera, scene, renderer;
3343
let controls;
@@ -124,6 +134,7 @@
124134
renderer.setPixelRatio( window.devicePixelRatio );
125135
renderer.setSize( window.innerWidth, window.innerHeight );
126136
renderer.setAnimationLoop( animate );
137+
renderer.inspector = new Inspector();
127138
document.body.appendChild( renderer.domElement );
128139

129140
// controls

‎examples/webgpu_custom_fog_background.html‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
<title>three.js webgpu - custom fog background</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<link type="text/css" rel="stylesheet" href="main.css">
8-
<style>
9-
10-
#info {
11-
background-color: #4080cc;
12-
}
13-
14-
</style>
7+
<link type="text/css" rel="stylesheet" href="example.css">
158
</head>
169
<body>
1710

1811
<div id="info">
19-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - custom fog background<br />
20-
Battle Damaged Sci-fi Helmet by
21-
<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
22-
<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>
12+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
13+
14+
<div class="title-wrapper">
15+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Custom Fog Background</span>
16+
</div>
17+
18+
<small>
19+
Custom Fog Background via Post-Processing.<br/>
20+
Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>.<br/>
21+
<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>.
22+
</small>
2323
</div>
2424

2525
<script type="importmap">
@@ -50,9 +50,6 @@
5050

5151
function init() {
5252

53-
const container = document.createElement( 'div' );
54-
document.body.appendChild( container );
55-
5653
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
5754
camera.position.set( - 1.8, 0.6, 2.7 );
5855

@@ -62,7 +59,7 @@
6259
renderer.setPixelRatio( window.devicePixelRatio );
6360
renderer.setSize( window.innerWidth, window.innerHeight );
6461
renderer.toneMapping = THREE.NoToneMapping; // apply tone mapping in post processing, instead
65-
container.appendChild( renderer.domElement );
62+
document.body.appendChild( renderer.domElement );
6663

6764
// post processing
6865

‎examples/webgpu_display_stereo.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,20 @@
44
<title>three.js webgpu - stereo effects</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<link type="text/css" rel="stylesheet" href="main.css">
7+
<link type="text/css" rel="stylesheet" href="example.css">
88
</head>
99

1010
<body>
1111
<div id="info">
12-
<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>
12+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
13+
14+
<div class="title-wrapper">
15+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Stereo Effects</span>
16+
</div>
17+
18+
<small>
19+
Collection of Stereo, Anaglyph and Parallax Barrier effects.
20+
</small>
1321
</div>
1422

1523
<script type="importmap">
@@ -31,7 +39,7 @@
3139
import { anaglyphPass } from 'three/addons/tsl/display/AnaglyphPassNode.js';
3240
import { parallaxBarrierPass } from 'three/addons/tsl/display/ParallaxBarrierPassNode.js';
3341
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
34-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
42+
import { Inspector } from 'three/addons/inspector/Inspector.js';
3543

3644
let camera, scene, renderer, postProcessing;
3745

@@ -97,6 +105,7 @@
97105
renderer.setPixelRatio( window.devicePixelRatio );
98106
renderer.setSize( window.innerWidth, window.innerHeight );
99107
renderer.setAnimationLoop( animate );
108+
renderer.inspector = new Inspector();
100109
document.body.appendChild( renderer.domElement );
101110

102111
postProcessing = new THREE.PostProcessing( renderer );
@@ -106,7 +115,7 @@
106115

107116
postProcessing.outputNode = stereo;
108117

109-
const gui = new GUI();
118+
const gui = renderer.inspector.createParameters( 'Stereo Settings' );
110119
gui.add( params, 'effect', effects ).onChange( update );
111120
gui.add( params, 'eyeSep', 0.001, 0.15, 0.001 ).onChange( function ( value ) {
112121

‎examples/webgpu_equirectangular.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,20 @@
44
<title>three.js webgpu - equirectangular</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<link type="text/css" rel="stylesheet" href="main.css">
7+
<link type="text/css" rel="stylesheet" href="example.css">
88
</head>
99
<body>
1010

1111
<div id="info">
12-
<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>.
12+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
13+
14+
<div class="title-wrapper">
15+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Equirectangular Panorama</span>
16+
</div>
17+
18+
<small>
19+
Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
20+
</small>
1321
</div>
1422

1523
<script type="importmap">
@@ -28,9 +36,8 @@
2836
import * as THREE from 'three/webgpu';
2937
import { texture, equirectUV } from 'three/tsl';
3038

31-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
32-
3339
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
40+
import { Inspector } from 'three/addons/inspector/Inspector.js';
3441

3542
let camera, scene, renderer;
3643
let controls;
@@ -54,14 +61,21 @@
5461
renderer = new THREE.WebGPURenderer( { antialias: true } );
5562
renderer.setPixelRatio( window.devicePixelRatio );
5663
renderer.setSize( window.innerWidth, window.innerHeight );
57-
renderer.setAnimationLoop( render );
64+
renderer.setAnimationLoop( animate );
65+
renderer.inspector = new Inspector();
5866
container.appendChild( renderer.domElement );
5967

6068
controls = new OrbitControls( camera, renderer.domElement );
6169
controls.autoRotate = true;
6270
controls.rotateSpeed = - 0.125; // negative, to track mouse pointer
6371
controls.autoRotateSpeed = 1.0;
6472

73+
// GUI
74+
75+
const gui = renderer.inspector.createParameters( 'Settings' );
76+
77+
gui.add( scene, 'backgroundIntensity', 0, 1 ).name( 'background intensity' );
78+
6579
window.addEventListener( 'resize', onWindowResize );
6680

6781
}
@@ -75,27 +89,14 @@
7589

7690
}
7791

78-
function render() {
92+
function animate() {
7993

8094
controls.update();
8195

8296
renderer.render( scene, camera );
8397

8498
}
8599

86-
const gui = new GUI();
87-
88-
const params = {
89-
intensity: 1.0,
90-
};
91-
gui.add( params, 'intensity', 0, 1 ).onChange( function ( value ) {
92-
93-
scene.backgroundIntensity = value;
94-
render();
95-
96-
} );
97-
98-
99100
</script>
100101

101102
</body>

‎examples/webgpu_hdr.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
66
<title>three.js webgpu - HDR Draw</title>
7-
<link type="text/css" rel="stylesheet" href="main.css" />
7+
<link type="text/css" rel="stylesheet" href="example.css">
88
<style>
9+
body {
10+
background-color: #fff;
11+
}
912
#no-hdr {
1013
position: absolute;
1114
font-family: monospace;
@@ -24,9 +27,18 @@
2427
</head>
2528
<body>
2629

27-
<div id="info" style="color: #000">
28-
<a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - HDR Draw
30+
<div id="info" class="invert">
31+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
32+
33+
<div class="title-wrapper">
34+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>HDR</span>
35+
</div>
36+
37+
<small>
38+
The demo produces a color output intended for HDR monitors.
39+
</small>
2940
</div>
41+
3042
<div id="no-hdr" style="display: none">
3143
<div>
3244
The browser says your device or monitor doesn't support HDR.<br />
@@ -53,7 +65,7 @@
5365
import { pass, uv, uniform } from 'three/tsl';
5466
import WebGPU from 'three/addons/capabilities/WebGPU.js';
5567
import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
56-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
68+
import { Inspector } from 'three/addons/inspector/Inspector.js';
5769

5870
import { ExtendedSRGBColorSpace, ExtendedSRGBColorSpaceImpl } from 'three/addons/math/ColorSpaces.js';
5971

@@ -95,6 +107,7 @@
95107
renderer.outputColorSpace = ExtendedSRGBColorSpace;
96108
renderer.setPixelRatio( window.devicePixelRatio );
97109
renderer.setSize( window.innerWidth, window.innerHeight );
110+
renderer.inspector = new Inspector();
98111
document.body.appendChild( renderer.domElement );
99112

100113
const camera = new THREE.OrthographicCamera( 0, window.innerWidth, window.innerHeight, 0, 1, 2 );
@@ -152,24 +165,17 @@
152165
renderer.domElement.addEventListener( 'touchend', ( e ) => e.preventDefault(), { passive: false } );
153166

154167
// GUI setup
155-
const gui = new GUI();
168+
const gui = renderer.inspector.createParameters( 'Settings' );
156169

157170
const colorFolder = gui.addFolder( 'HDR' );
158171
colorFolder.add( params.intensity, 'value', 0, 10, 0.1 ).name( 'Intensity' );
159-
colorFolder.open();
160172

161173
const brushFolder = gui.addFolder( 'Brush Settings' );
162174
brushFolder.add( params.hardness, 'value', 0, 0.99, 0.01 ).name( 'Hardness' );
163175
brushFolder.add( params.radius, 'value', 0.1, 2.0, 0.01 ).name( 'Radius' );
164-
brushFolder.open();
165176

166177
const effectFolder = gui.addFolder( 'Effects' );
167-
effectFolder
168-
.add( params.afterImageDecay, 'value', 0.9, 0.999, 0.001 )
169-
.name( 'After Image Decay' );
170-
effectFolder.open();
171-
172-
gui.open();
178+
effectFolder.add( params.afterImageDecay, 'value', 0.9, 0.999, 0.001 ).name( 'After Image Decay' );
173179

174180
// Resize handling
175181
function onResize() {

‎examples/webgpu_instance_mesh.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,20 @@
44
<title>three.js webgpu - instance mesh</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<link type="text/css" rel="stylesheet" href="main.css">
7+
<link type="text/css" rel="stylesheet" href="example.css">
88
</head>
99
<body>
1010

1111
<div id="info">
12-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - instance mesh
12+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
13+
14+
<div class="title-wrapper">
15+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Instancing</span>
16+
</div>
17+
18+
<small>
19+
Instanced rendering via InstancedMesh.
20+
</small>
1321
</div>
1422

1523
<script type="importmap">
@@ -28,11 +36,9 @@
2836
import * as THREE from 'three/webgpu';
2937
import { mix, range, normalWorld, oscSine, time } from 'three/tsl';
3038

31-
import Stats from 'three/addons/libs/stats.module.js';
39+
import { Inspector } from 'three/addons/inspector/Inspector.js';
3240

33-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
34-
35-
let camera, scene, renderer, stats;
41+
let camera, scene, renderer;
3642

3743
let mesh;
3844
const amount = parseInt( window.location.search.slice( 1 ) ) || 10;
@@ -69,8 +75,8 @@
6975

7076
//
7177

72-
const gui = new GUI();
73-
gui.add( mesh, 'count', 1, count );
78+
const gui = renderer.inspector.createParameters( 'Settings' );
79+
gui.add( mesh, 'count', 1, count ).step( 1 ).name( 'instance count' );
7480

7581
} );
7682

@@ -80,15 +86,11 @@
8086
renderer.setPixelRatio( window.devicePixelRatio );
8187
renderer.setSize( window.innerWidth, window.innerHeight );
8288
renderer.setAnimationLoop( animate );
89+
renderer.inspector = new Inspector();
8390
document.body.appendChild( renderer.domElement );
8491

8592
//
8693

87-
stats = new Stats();
88-
document.body.appendChild( stats.dom );
89-
90-
//
91-
9294
window.addEventListener( 'resize', onWindowResize );
9395

9496
}
@@ -108,8 +110,6 @@
108110

109111
render();
110112

111-
stats.update();
112-
113113
}
114114

115115
async function render() {

0 commit comments

Comments
 (0)