Skip to content

Examples: More inspector usage. #31984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sunag merged 5 commits into from
Sep 30, 2025
Merged

Examples: More inspector usage. #31984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85c63cc
revision
sunag Sep 30, 2025
daa5c1c
update examples
sunag Sep 30, 2025
4e8a256
Update Performance.js
sunag Sep 30, 2025
52a005e
add example
sunag Sep 30, 2025
80adb68
Update ReflectorNode.js
sunag Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions examples/jsm/inspector/RendererInspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@ export class RendererInspector extends InspectorBase {

}

getParent() {

return this.currentRender || this.getFrame();

}

begin() {

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

const currentCompute = new ComputeStats( uid, computeNode );
currentCompute.timestamp = performance.now();
currentCompute.parent = this.currentRender;
currentCompute.parent = this.currentCompute || this.getParent();

frame.computes.push( currentCompute );

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

this.currentCompute = null;
this.currentCompute = currentCompute.parent.isComputeStats ? currentCompute.parent : null;

}

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

const currentRender = new RenderStats( uid, scene, camera, renderTarget );
currentRender.timestamp = performance.now();
currentRender.parent = this.currentRender;
currentRender.parent = this.getParent();

frame.renders.push( currentRender );

Expand Down
10 changes: 9 additions & 1 deletion examples/jsm/inspector/tabs/Performance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,15 @@ class Performance extends Tab {

}

setText( item.data[ 0 ], item.userData.name );
let name = item.userData.name;

if ( stats.isComputeStats ) {

name += ' [ Compute ]';

}

setText( item.data[ 0 ], name );
setText( item.data[ 1 ], data.cpu.toFixed( 2 ) );
setText( item.data[ 2 ], stats.gpuNotAvailable === true ? '-' : data.gpu.toFixed( 2 ) );
setText( item.data[ 3 ], data.total.toFixed( 2 ) );
Expand Down
28 changes: 18 additions & 10 deletions examples/webgpu_compute_cloth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
<title>three.js webgpu - compute cloth</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 - compute cloth<br />
Simple cloth simulation with a verlet system running in compute shaders
<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>Compute Cloth</span>
</div>

<small>Simple cloth simulation with a verlet system running in compute shaders.</small>
</div>

<script type="importmap">
Expand All @@ -29,7 +35,8 @@

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

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 { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
import WebGPU from 'three/addons/capabilities/WebGPU.js';
Expand Down Expand Up @@ -87,6 +94,7 @@
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.NeutralToneMapping;
renderer.toneMappingExposure = 1;
renderer.inspector = new Inspector();
document.body.appendChild( renderer.domElement );

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

setupCloth();

const gui = new GUI();
const gui = renderer.inspector.createParameters( 'Settings' );
gui.add( stiffnessUniform, 'value', 0.1, 0.5, 0.01 ).name( 'stiffness' );
gui.add( params, 'wireframe' );
gui.add( params, 'sphere' );
Expand Down Expand Up @@ -317,7 +325,7 @@
const force = dist.sub( restLength ).mul( stiffnessUniform ).mul( delta ).mul( 0.5 ).div( dist );
springForceBuffer.element( instanceIndex ).assign( force );

} )().compute( springCount );
} )().compute( springCount ).setName( 'Spring Forces' );

// 2. computeVertexForces:
// This shader accumulates the force for each vertex.
Expand Down Expand Up @@ -381,7 +389,7 @@
vertexForceBuffer.element( instanceIndex ).assign( force );
vertexPositionBuffer.element( instanceIndex ).addAssign( force );

} )().compute( vertexCount );
} )().compute( vertexCount ).setName( 'Vertex Forces' );

}

Expand Down Expand Up @@ -569,12 +577,12 @@
timestamp += timePerStep;
timeSinceLastStep -= timePerStep;
updateSphere();
await renderer.computeAsync( computeSpringForces );
await renderer.computeAsync( computeVertexForces );
renderer.compute( computeSpringForces );
renderer.compute( computeVertexForces );

}

await renderer.renderAsync( scene, camera );
renderer.render( scene, camera );

}

Expand Down
25 changes: 12 additions & 13 deletions examples/webgpu_compute_geometry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
<title>three.js webgpu - compute geometry</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> - compute geometry
<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>Compute Geometry</span>
</div>

<small>Jelly deformation with compute shaders. Move pointer to interact.</small>
</div>

<script type="importmap">
Expand All @@ -32,13 +38,10 @@

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 raycaster, pointer;
let stats;

let mesh;

Expand Down Expand Up @@ -117,7 +120,7 @@

currentPosition.addAssign( currentSpeed );

} )().compute( count );
} )().compute( count ).setName( 'Update Jelly' );

// initialize the storage buffer with the base position

Expand Down Expand Up @@ -172,21 +175,19 @@
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.inspector = new Inspector();
document.body.appendChild( renderer.domElement );

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

const gui = new GUI();
const gui = renderer.inspector.createParameters( 'Settings' );
gui.add( elasticity, 'value', 0, .5 ).name( 'elasticity' );
gui.add( damping, 'value', .9, .98 ).name( 'damping' );
gui.add( brushSize, 'value', .1, .5 ).name( 'brush size' );
gui.add( brushStrength, 'value', .1, .3 ).name( 'brush strength' );

stats = new Stats();
document.body.appendChild( stats.dom );

window.addEventListener( 'resize', onWindowResize );
window.addEventListener( 'pointermove', onPointerMove );

Expand Down Expand Up @@ -226,8 +227,6 @@

async function animate() {

stats.update();

renderer.render( scene, camera );

}
Expand Down
79 changes: 21 additions & 58 deletions examples/webgpu_compute_particles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
<html lang="en">
<head>
<title>three.js - WebGPU - Compute Particles</title>
<title>three.js webgpu - compute particles</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 - Compute - 500k Particles
<div id="timestamps" style="
position: absolute;
top: 60px;
left: 0;
padding: 10px;
background: rgba( 0, 0, 0, 0.5 );
color: #fff;
font-family: monospace;
font-size: 12px;
line-height: 1.5;
pointer-events: none;
text-align: left;
"></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>Compute Particles</span>
</div>

<small>500k Particles.</small>
</div>

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

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
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';

const particleCount = 200000;

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

let camera, scene, renderer;
let controls, stats;
let controls;
let computeParticles;

let isOrbitControlsActive;

const timestamps = document.getElementById( 'timestamps' );

init();

function init() {
Expand Down Expand Up @@ -100,7 +90,7 @@
color.x = hash( instanceIndex );
color.y = hash( instanceIndex.add( 2 ) );

} )().compute( particleCount );
} )().compute( particleCount ).setName( 'Init Particles' );

//

Expand Down Expand Up @@ -130,7 +120,7 @@

} );

computeParticles = computeUpdate().compute( particleCount );
computeParticles = computeUpdate().compute( particleCount ).setName( 'Update Particles' );

// create particles

Expand Down Expand Up @@ -163,15 +153,13 @@

//

renderer = new THREE.WebGPURenderer( { antialias: true, trackTimestamp: true } );
renderer = new THREE.WebGPURenderer( { antialias: true } );
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 );

//

renderer.computeAsync( computeInit );
Expand All @@ -192,7 +180,7 @@

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

} )().compute( particleCount );
} )().compute( particleCount ).setName( 'Hit Particles' );

//

Expand Down Expand Up @@ -256,7 +244,7 @@

// gui

const gui = new GUI();
const gui = renderer.inspector.createParameters( 'Settings' );

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

}

async function animate() {

stats.update();
function animate() {

controls.update();

await renderer.computeAsync( computeParticles );
renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );

await renderer.renderAsync( scene, camera );
renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );

// throttle the logging

if ( renderer.hasFeature( 'timestamp-query' ) ) {

if ( renderer.info.render.calls % 5 === 0 ) {

timestamps.innerHTML = `

Compute ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.render.timestamp.toFixed( 6 )}ms`;

}

} else {

timestamps.innerHTML = 'Timestamp queries not supported';

}

renderer.compute( computeParticles );
renderer.render( scene, camera );

}

Expand Down
Loading