Skip to content

Commit 7ac88e4

Browse files
sunagsunag
authored
Examples: Update with the new style and inspector (#31907)
* PassNode: Rename `setResolution()` to `setResolutionScale()` * PassNode: Improve name in inspector * Parameters: Add `.addFolder()` and `addColor()`, fix slider default value * BloomNode: Improve name in inspector * Examples: update with the new style and inspector * Update Values.js * webgpu testing
1 parent b641d6d commit 7ac88e4

File tree

10 files changed

+262
-87
lines changed

10 files changed

+262
-87
lines changed

‎examples/jsm/inspector/Inspector.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -155,25 +155,31 @@ class Inspector extends RendererInspector {
155155

156156
setRenderer( renderer ) {
157157

158+
super.setRenderer( renderer );
159+
158160
if ( renderer !== null ) {
159161

160162
setConsoleFunction( this.resolveConsole.bind( this ) );
161163

162-
renderer.backend.trackTimestamp = true;
164+
if ( this.isAvailable ) {
165+
166+
renderer.backend.trackTimestamp = true;
163167

164-
renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
168+
renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
165169

166-
if ( available !== true ) {
170+
if ( available !== true ) {
167171

168-
this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
172+
this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
169173

170-
}
174+
}
171175

172-
} );
176+
} );
177+
178+
}
173179

174180
}
175181

176-
return super.setRenderer( renderer );
182+
return this;
177183

178184
}
179185

‎examples/jsm/inspector/RendererInspector.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,14 @@ export class RendererInspector extends InspectorBase {
242242

243243
}
244244

245+
get isAvailable() {
246+
247+
const renderer = this.getRenderer();
248+
249+
return renderer !== null && renderer.backend.isWebGPUBackend;
250+
251+
}
252+
245253
addFrame( frame ) {
246254

247255
// Limit to max frames.
@@ -256,7 +264,11 @@ export class RendererInspector extends InspectorBase {
256264
this.frames.push( frame );
257265
this.framesLib[ frame.frameId ] = frame;
258266

259-
this.resolveTimestamp();
267+
if ( this.isAvailable ) {
268+
269+
this.resolveTimestamp();
270+
271+
}
260272

261273
}
262274

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

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Tab } from '../ui/Tab.js';
22
import { List } from '../ui/List.js';
33
import { Item } from '../ui/Item.js';
44
import { createValueSpan } from '../ui/utils.js';
5-
import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox } from '../ui/Values.js';
5+
import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor } from '../ui/Values.js';
66

77
class ParametersGroup {
88

@@ -11,7 +11,15 @@ class ParametersGroup {
1111
this.parameters = parameters;
1212
this.name = name;
1313

14-
this.item = new Item( name );
14+
this.paramList = new Item( name );
15+
16+
}
17+
18+
close() {
19+
20+
this.paramList.close();
21+
22+
return this;
1523

1624
}
1725

@@ -48,6 +56,16 @@ class ParametersGroup {
4856

4957
}
5058

59+
addFolder( name ) {
60+
61+
const group = new ParametersGroup( this.parameters, name );
62+
63+
this.paramList.add( group.paramList );
64+
65+
return group;
66+
67+
}
68+
5169
addBoolean( object, property ) {
5270

5371
const value = object[ property ];
@@ -63,7 +81,7 @@ class ParametersGroup {
6381
description.textContent = property;
6482

6583
const subItem = new Item( description, editor.domElement );
66-
this.item.add( subItem );
84+
this.paramList.add( subItem );
6785

6886
// extends logic to toggle checkbox when clicking on the row
6987

@@ -114,7 +132,41 @@ class ParametersGroup {
114132
description.textContent = property;
115133

116134
const subItem = new Item( description, editor.domElement );
117-
this.item.add( subItem );
135+
this.paramList.add( subItem );
136+
137+
const itemRow = subItem.domElement.firstChild;
138+
itemRow.classList.add( 'actionable' );
139+
140+
// extend object property
141+
142+
editor.name = ( name ) => {
143+
144+
description.textContent = name;
145+
146+
return editor;
147+
148+
};
149+
150+
return editor;
151+
152+
}
153+
154+
addColor( object, property ) {
155+
156+
const value = object[ property ];
157+
158+
const editor = new ValueColor( { value } );
159+
editor.addEventListener( 'change', ( { value } ) => {
160+
161+
object[ property ] = value;
162+
163+
} );
164+
165+
const description = createValueSpan();
166+
description.textContent = property;
167+
168+
const subItem = new Item( description, editor.domElement );
169+
this.paramList.add( subItem );
118170

119171
const itemRow = subItem.domElement.firstChild;
120172
itemRow.classList.add( 'actionable' );
@@ -148,7 +200,7 @@ class ParametersGroup {
148200
description.textContent = property;
149201

150202
const subItem = new Item( description, editor.domElement );
151-
this.item.add( subItem );
203+
this.paramList.add( subItem );
152204

153205
const itemRow = subItem.domElement.firstChild;
154206
itemRow.classList.add( 'actionable' );
@@ -183,7 +235,7 @@ class ParametersGroup {
183235
description.textContent = property;
184236

185237
const subItem = new Item( description, editor.domElement );
186-
this.item.add( subItem );
238+
this.paramList.add( subItem );
187239

188240
const itemRow = subItem.domElement.firstChild;
189241
itemRow.classList.add( 'actionable' );
@@ -226,9 +278,9 @@ class Parameters extends Tab {
226278

227279
createGroup( name ) {
228280

229-
const group = new ParametersGroup( this.parameters, name );
281+
const group = new ParametersGroup( this, name );
230282

231-
this.paramList.add( group.item );
283+
this.paramList.add( group.paramList );
232284

233285
return group;
234286

‎examples/jsm/inspector/ui/Item.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class Item {
6666

6767
this.childrenContainer = document.createElement( 'div' );
6868
this.childrenContainer.className = 'list-children-container';
69+
this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
6970
this.domElement.appendChild( this.childrenContainer );
7071
this.itemRow.addEventListener( 'click', this.onItemClick );
7172

@@ -141,10 +142,16 @@ export class Item {
141142

142143
toggle() {
143144

144-
if ( ! this.childrenContainer ) return;
145145
this.isOpen = ! this.isOpen;
146146
this.itemRow.classList.toggle( 'open', this.isOpen );
147-
this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
147+
148+
if ( this.childrenContainer ) {
149+
150+
this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
151+
152+
}
153+
154+
return this;
148155

149156
}
150157

‎examples/jsm/inspector/ui/Values.js‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,6 @@ class ValueSlider extends Value {
209209

210210
this.slider = document.createElement( 'input' );
211211
this.slider.type = 'range';
212-
this.slider.value = value;
213212
this.slider.min = min;
214213
this.slider.max = max;
215214
this.slider.step = step;
@@ -219,6 +218,8 @@ class ValueSlider extends Value {
219218
this.numberInput.style.width = '60px';
220219
this.numberInput.style.flexShrink = '0';
221220

221+
this.slider.value = value;
222+
222223
this.domElement.append( this.slider, this.numberInput );
223224

224225
this.slider.addEventListener( 'input', () => {
@@ -318,4 +319,65 @@ class ValueSelect extends Value {
318319

319320
}
320321

321-
export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect };
322+
class ValueColor extends Value {
323+
324+
constructor( { value = '#ffffff' } ) {
325+
326+
super();
327+
328+
const colorInput = document.createElement( 'input' );
329+
colorInput.type = 'color';
330+
colorInput.value = this._getColorHex( value );
331+
this.colorInput = colorInput;
332+
333+
this._value = value;
334+
335+
colorInput.addEventListener( 'input', () => {
336+
337+
const colorValue = colorInput.value;
338+
339+
if ( this._value.isColor ) {
340+
341+
this._value.setHex( parseInt( colorValue.slice( 1 ), 16 ) );
342+
343+
} else {
344+
345+
this._value = colorValue;
346+
347+
}
348+
349+
this.dispatchChange();
350+
351+
} );
352+
353+
this.domElement.appendChild( colorInput );
354+
355+
}
356+
357+
_getColorHex( color ) {
358+
359+
if ( color.isColor ) {
360+
361+
color = color.getHex();
362+
363+
}
364+
365+
if ( typeof color === 'number' ) {
366+
367+
color = `#${ color.toString( 16 ) }`;
368+
369+
}
370+
371+
return color;
372+
373+
}
374+
375+
getValue() {
376+
377+
return this._value;
378+
379+
}
380+
381+
}
382+
383+
export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor };

‎examples/jsm/tsl/display/BloomNode.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@ class BloomNode extends TempNode {
300300

301301
renderer.setRenderTarget( this._renderTargetBright );
302302
_quadMesh.material = this._highPassFilterMaterial;
303+
_quadMesh.name = 'Bloom [ High Pass ]';
303304
_quadMesh.render( renderer );
304305

305306
// 2. Blur all the mips progressively
@@ -313,11 +314,13 @@ class BloomNode extends TempNode {
313314
this._separableBlurMaterials[ i ].colorTexture.value = inputRenderTarget.texture;
314315
this._separableBlurMaterials[ i ].direction.value = _BlurDirectionX;
315316
renderer.setRenderTarget( this._renderTargetsHorizontal[ i ] );
317+
_quadMesh.name = `Bloom [ Blur Horizontal - ${ i } ]`;
316318
_quadMesh.render( renderer );
317319

318320
this._separableBlurMaterials[ i ].colorTexture.value = this._renderTargetsHorizontal[ i ].texture;
319321
this._separableBlurMaterials[ i ].direction.value = _BlurDirectionY;
320322
renderer.setRenderTarget( this._renderTargetsVertical[ i ] );
323+
_quadMesh.name = `Bloom [ Blur Vertical - ${ i } ]`;
321324
_quadMesh.render( renderer );
322325

323326
inputRenderTarget = this._renderTargetsVertical[ i ];
@@ -328,6 +331,7 @@ class BloomNode extends TempNode {
328331

329332
renderer.setRenderTarget( this._renderTargetsHorizontal[ 0 ] );
330333
_quadMesh.material = this._compositeMaterial;
334+
_quadMesh.name = 'Bloom [ Composite ]';
331335
_quadMesh.render( renderer );
332336

333337
// restore

0 commit comments

Comments
 (0)