Skip to content

Commit 11b9f41

Browse files
sunagsunag
authored
Examples: More inspector usage. (#31984)
* revision * update examples * Update Performance.js * add example * Update ReflectorNode.js
1 parent 8a9f4d0 commit 11b9f41

File tree

9 files changed

+130
-116
lines changed

9 files changed

+130
-116
lines changed

‎examples/jsm/inspector/RendererInspector.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@ export class RendererInspector extends InspectorBase {
8787

8888
}
8989

90+
getParent() {
91+
92+
return this.currentRender || this.getFrame();
93+
94+
}
95+
9096
begin() {
9197

9298
this.currentFrame = this._createFrame();
@@ -313,7 +319,7 @@ export class RendererInspector extends InspectorBase {
313319

314320
const currentCompute = new ComputeStats( uid, computeNode );
315321
currentCompute.timestamp = performance.now();
316-
currentCompute.parent = this.currentRender;
322+
currentCompute.parent = this.currentCompute || this.getParent();
317323

318324
frame.computes.push( currentCompute );
319325

@@ -340,7 +346,7 @@ export class RendererInspector extends InspectorBase {
340346
const currentCompute = this.currentCompute;
341347
currentCompute.cpu = performance.now() - currentCompute.timestamp;
342348

343-
this.currentCompute = null;
349+
this.currentCompute = currentCompute.parent.isComputeStats ? currentCompute.parent : null;
344350

345351
}
346352

@@ -352,7 +358,7 @@ export class RendererInspector extends InspectorBase {
352358

353359
const currentRender = new RenderStats( uid, scene, camera, renderTarget );
354360
currentRender.timestamp = performance.now();
355-
currentRender.parent = this.currentRender;
361+
currentRender.parent = this.getParent();
356362

357363
frame.renders.push( currentRender );
358364

‎examples/jsm/inspector/tabs/Performance.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,15 @@ class Performance extends Tab {
129129

130130
}
131131

132-
setText( item.data[ 0 ], item.userData.name );
132+
let name = item.userData.name;
133+
134+
if ( stats.isComputeStats ) {
135+
136+
name += ' [ Compute ]';
137+
138+
}
139+
140+
setText( item.data[ 0 ], name );
133141
setText( item.data[ 1 ], data.cpu.toFixed( 2 ) );
134142
setText( item.data[ 2 ], stats.gpuNotAvailable === true ? '-' : data.gpu.toFixed( 2 ) );
135143
setText( item.data[ 3 ], data.total.toFixed( 2 ) );

‎examples/webgpu_compute_cloth.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@
44
<title>three.js webgpu - compute cloth</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+
1011
<div id="info">
11-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - compute cloth<br />
12-
Simple cloth simulation with a verlet system running in compute shaders
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>Compute Cloth</span>
16+
</div>
17+
18+
<small>Simple cloth simulation with a verlet system running in compute shaders.</small>
1319
</div>
1420

1521
<script type="importmap">
@@ -29,7 +35,8 @@
2935

3036
import { Fn, If, Return, instancedArray, instanceIndex, uniform, select, attribute, uint, Loop, float, transformNormalToView, cross, triNoise3D, time } from 'three/tsl';
3137

32-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
38+
import { Inspector } from 'three/addons/inspector/Inspector.js';
39+
3340
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3441
import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
3542
import WebGPU from 'three/addons/capabilities/WebGPU.js';
@@ -87,6 +94,7 @@
8794
renderer.setSize( window.innerWidth, window.innerHeight );
8895
renderer.toneMapping = THREE.NeutralToneMapping;
8996
renderer.toneMappingExposure = 1;
97+
renderer.inspector = new Inspector();
9098
document.body.appendChild( renderer.domElement );
9199

92100
scene = new THREE.Scene();
@@ -110,7 +118,7 @@
110118

111119
setupCloth();
112120

113-
const gui = new GUI();
121+
const gui = renderer.inspector.createParameters( 'Settings' );
114122
gui.add( stiffnessUniform, 'value', 0.1, 0.5, 0.01 ).name( 'stiffness' );
115123
gui.add( params, 'wireframe' );
116124
gui.add( params, 'sphere' );
@@ -317,7 +325,7 @@
317325
const force = dist.sub( restLength ).mul( stiffnessUniform ).mul( delta ).mul( 0.5 ).div( dist );
318326
springForceBuffer.element( instanceIndex ).assign( force );
319327

320-
} )().compute( springCount );
328+
} )().compute( springCount ).setName( 'Spring Forces' );
321329

322330
// 2. computeVertexForces:
323331
// This shader accumulates the force for each vertex.
@@ -381,7 +389,7 @@
381389
vertexForceBuffer.element( instanceIndex ).assign( force );
382390
vertexPositionBuffer.element( instanceIndex ).addAssign( force );
383391

384-
} )().compute( vertexCount );
392+
} )().compute( vertexCount ).setName( 'Vertex Forces' );
385393

386394
}
387395

@@ -569,12 +577,12 @@
569577
timestamp += timePerStep;
570578
timeSinceLastStep -= timePerStep;
571579
updateSphere();
572-
await renderer.computeAsync( computeSpringForces );
573-
await renderer.computeAsync( computeVertexForces );
580+
renderer.compute( computeSpringForces );
581+
renderer.compute( computeVertexForces );
574582

575583
}
576584

577-
await renderer.renderAsync( scene, camera );
585+
renderer.render( scene, camera );
578586

579587
}
580588

‎examples/webgpu_compute_geometry.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@
44
<title>three.js webgpu - compute geometry</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> - compute geometry
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>Compute Geometry</span>
16+
</div>
17+
18+
<small>Jelly deformation with compute shaders. Move pointer to interact.</small>
1319
</div>
1420

1521
<script type="importmap">
@@ -32,13 +38,10 @@
3238

3339
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3440

35-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
36-
37-
import Stats from 'three/addons/libs/stats.module.js';
41+
import { Inspector } from 'three/addons/inspector/Inspector.js';
3842

3943
let camera, scene, renderer;
4044
let raycaster, pointer;
41-
let stats;
4245

4346
let mesh;
4447

@@ -117,7 +120,7 @@
117120

118121
currentPosition.addAssign( currentSpeed );
119122

120-
} )().compute( count );
123+
} )().compute( count ).setName( 'Update Jelly' );
121124

122125
// initialize the storage buffer with the base position
123126

@@ -172,21 +175,19 @@
172175
renderer.setPixelRatio( window.devicePixelRatio );
173176
renderer.setSize( window.innerWidth, window.innerHeight );
174177
renderer.setAnimationLoop( animate );
178+
renderer.inspector = new Inspector();
175179
document.body.appendChild( renderer.domElement );
176180

177181
const controls = new OrbitControls( camera, renderer.domElement );
178182
controls.minDistance = .7;
179183
controls.maxDistance = 2;
180184

181-
const gui = new GUI();
185+
const gui = renderer.inspector.createParameters( 'Settings' );
182186
gui.add( elasticity, 'value', 0, .5 ).name( 'elasticity' );
183187
gui.add( damping, 'value', .9, .98 ).name( 'damping' );
184188
gui.add( brushSize, 'value', .1, .5 ).name( 'brush size' );
185189
gui.add( brushStrength, 'value', .1, .3 ).name( 'brush strength' );
186190

187-
stats = new Stats();
188-
document.body.appendChild( stats.dom );
189-
190191
window.addEventListener( 'resize', onWindowResize );
191192
window.addEventListener( 'pointermove', onPointerMove );
192193

@@ -226,8 +227,6 @@
226227

227228
async function animate() {
228229

229-
stats.update();
230-
231230
renderer.render( scene, camera );
232231

233232
}

‎examples/webgpu_compute_particles.html‎

Lines changed: 21 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
<html lang="en">
22
<head>
3-
<title>three.js - WebGPU - Compute Particles</title>
3+
<title>three.js webgpu - compute particles</title>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6-
<link type="text/css" rel="stylesheet" href="main.css">
6+
<link type="text/css" rel="stylesheet" href="example.css">
77
</head>
88
<body>
99

1010
<div id="info">
11-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute - 500k Particles
12-
<div id="timestamps" style="
13-
position: absolute;
14-
top: 60px;
15-
left: 0;
16-
padding: 10px;
17-
background: rgba( 0, 0, 0, 0.5 );
18-
color: #fff;
19-
font-family: monospace;
20-
font-size: 12px;
21-
line-height: 1.5;
22-
pointer-events: none;
23-
text-align: left;
24-
"></div>
11+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
12+
13+
<div class="title-wrapper">
14+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Compute Particles</span>
15+
</div>
16+
17+
<small>500k Particles.</small>
2518
</div>
2619

2720
<script type="importmap">
@@ -41,10 +34,9 @@
4134
import { Fn, If, uniform, float, uv, vec3, hash, shapeCircle,
4235
instancedArray, instanceIndex } from 'three/tsl';
4336

44-
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
45-
import Stats from 'three/addons/libs/stats.module.js';
37+
import { Inspector } from 'three/addons/inspector/Inspector.js';
4638

47-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
39+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
4840

4941
const particleCount = 200000;
5042

@@ -56,13 +48,11 @@
5648
const clickPosition = uniform( new THREE.Vector3() );
5749

5850
let camera, scene, renderer;
59-
let controls, stats;
51+
let controls;
6052
let computeParticles;
6153

6254
let isOrbitControlsActive;
6355

64-
const timestamps = document.getElementById( 'timestamps' );
65-
6656
init();
6757

6858
function init() {
@@ -100,7 +90,7 @@
10090
color.x = hash( instanceIndex );
10191
color.y = hash( instanceIndex.add( 2 ) );
10292

103-
} )().compute( particleCount );
93+
} )().compute( particleCount ).setName( 'Init Particles' );
10494

10595
//
10696

@@ -130,7 +120,7 @@
130120

131121
} );
132122

133-
computeParticles = computeUpdate().compute( particleCount );
123+
computeParticles = computeUpdate().compute( particleCount ).setName( 'Update Particles' );
134124

135125
// create particles
136126

@@ -163,15 +153,13 @@
163153

164154
//
165155

166-
renderer = new THREE.WebGPURenderer( { antialias: true, trackTimestamp: true } );
156+
renderer = new THREE.WebGPURenderer( { antialias: true } );
167157
renderer.setPixelRatio( window.devicePixelRatio );
168158
renderer.setSize( window.innerWidth, window.innerHeight );
169159
renderer.setAnimationLoop( animate );
160+
renderer.inspector = new Inspector();
170161
document.body.appendChild( renderer.domElement );
171162

172-
stats = new Stats();
173-
document.body.appendChild( stats.dom );
174-
175163
//
176164

177165
renderer.computeAsync( computeInit );
@@ -192,7 +180,7 @@
192180

193181
velocity.assign( velocity.add( direction.mul( relativePower ) ) );
194182

195-
} )().compute( particleCount );
183+
} )().compute( particleCount ).setName( 'Hit Particles' );
196184

197185
//
198186

@@ -256,7 +244,7 @@
256244

257245
// gui
258246

259-
const gui = new GUI();
247+
const gui = renderer.inspector.createParameters( 'Settings' );
260248

261249
gui.add( gravity, 'value', - .0098, 0, 0.0001 ).name( 'gravity' );
262250
gui.add( bounce, 'value', .1, 1, 0.01 ).name( 'bounce' );
@@ -276,37 +264,12 @@
276264

277265
}
278266

279-
async function animate() {
280-
281-
stats.update();
267+
function animate() {
282268

283269
controls.update();
284270

285-
await renderer.computeAsync( computeParticles );
286-
renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
287-
288-
await renderer.renderAsync( scene, camera );
289-
renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );
290-
291-
// throttle the logging
292-
293-
if ( renderer.hasFeature( 'timestamp-query' ) ) {
294-
295-
if ( renderer.info.render.calls % 5 === 0 ) {
296-
297-
timestamps.innerHTML = `
298-
299-
Compute ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
300-
Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.render.timestamp.toFixed( 6 )}ms`;
301-
302-
}
303-
304-
} else {
305-
306-
timestamps.innerHTML = 'Timestamp queries not supported';
307-
308-
}
309-
271+
renderer.compute( computeParticles );
272+
renderer.render( scene, camera );
310273

311274
}
312275

0 commit comments

Comments
 (0)