Skip to content

[pull] dev from mrdoob:dev #1603

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Aug 29, 2026
Merged

[pull] dev from mrdoob:dev #1603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 8 additions & 2 deletions examples/jsm/inspector/Inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@ import { setConsoleFunction, getConsoleFunction, REVISION } from 'three/webgpu';

class Inspector extends RendererInspector {

constructor() {
constructor( options = {} ) {

super();

const {
nonce = null
} = options;

this.nonce = nonce;

// init profiler

const profiler = new Profiler( this );
const profiler = new Profiler( this, options );
profiler.addEventListener( 'resize', ( e ) => this.dispatchEvent( e ) );
profiler.addEventListener( 'orientationchange', ( e ) => this.dispatchEvent( e ) );
profiler.addEventListener( 'layoutchange', ( e ) => this.dispatchEvent( e ) );
Expand Down
16 changes: 5 additions & 11 deletions examples/jsm/inspector/extensions/color-grading/ColorGrading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export class ColorGrading extends Extension {

super( 'Color Grading', options );

LUT3DStyle.init();
LUT3DStyle.init( options.nonce );

this.params = createDefaultParams();
this.lutSize = 32;
Expand Down Expand Up @@ -186,14 +186,14 @@ export class ColorGrading extends Extension {

if ( this.sceneGradingEnabled ) {

if ( this.viewContainer ) this.viewContainer.classList.add( 'is-live-active' );
this.viewContainer.classList.add( 'is-live-active' );
gradingBtn.className = 'lut-dock-btn active';
lbl.textContent = 'Live Preview';
lbl.className = 'lut-dock-text';

} else {

if ( this.viewContainer ) this.viewContainer.classList.remove( 'is-live-active' );
this.viewContainer.classList.remove( 'is-live-active' );
gradingBtn.className = 'lut-dock-btn';
lbl.textContent = 'Live Preview';
lbl.className = 'lut-dock-text';
Expand Down Expand Up @@ -1813,7 +1813,6 @@ export class ColorGrading extends Extension {
version: 2,
lutSize: this.lutSize,
selectedToneMapping: this.selectedToneMapping,
sceneGradingEnabled: this.sceneGradingEnabled,
pipelineOrder: [ ...this.pipelineOrder ],
modules: modulesData,
params: params
Expand Down Expand Up @@ -1948,13 +1947,6 @@ export class ColorGrading extends Extension {

}

if ( typeof json.sceneGradingEnabled === 'boolean' ) {

this.sceneGradingEnabled = json.sceneGradingEnabled;
this.updateGradingBtnState();
this._toggleSceneGrading( this.sceneGradingEnabled );

}

if ( Array.isArray( json.pipelineOrder ) && json.pipelineOrder.length > 0 ) {

Expand Down Expand Up @@ -2307,6 +2299,8 @@ export class ColorGrading extends Extension {

super.init( inspector );

LUT3DStyle.init( inspector.nonce );

const renderer = inspector.getRenderer();
const rendererComp = this.modulesMap.get( 'renderer' );

Expand Down
9 changes: 8 additions & 1 deletion examples/jsm/inspector/extensions/color-grading/LUT3DStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,19 @@

export class LUT3DStyle {

static init() {
static init( nonce = null ) {

if ( document.getElementById( 'lut3d-generator-style' ) ) return;

const style = document.createElement( 'style' );
style.id = 'lut3d-generator-style';

if ( nonce ) {

style.nonce = nonce;

}

style.textContent = /* css */`
@scope (.lut-container) {

Expand Down
10 changes: 5 additions & 5 deletions examples/jsm/inspector/tabs/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1253,15 +1253,15 @@ class Timeline extends Tab {

if ( details[ key ] !== undefined ) {

parts.push( `<span style="opacity: 0.5">${key}:</span> <span style="color: var(--text-secondary); opacity: 1">${details[ key ]}</span>` );
parts.push( `<span class="timeline-detail-key">${key}:</span> <span class="timeline-detail-value">${details[ key ]}</span>` );

}

}

if ( parts.length === 0 ) return '';

return `<span style="font-size: 11px; margin-left: 8px; color: var(--text-secondary); opacity: 1;">{ ${parts.join( '<span style="opacity: 0.5">, </span>' )} }</span>`;
return `<span class="timeline-detail-block">{ ${parts.join( '<span class="timeline-detail-sep">, </span>' )} }</span>`;

}

Expand Down Expand Up @@ -1357,10 +1357,10 @@ class Timeline extends Tab {
const callsSuffix = isCompact ? '' : ' calls';
const trianglesSuffix = isCompact ? '' : ' triangles';

const group = ( c, text ) => `<span style="display:inline-flex;align-items:center;margin-left:12px;flex-shrink:0;"><span style="width:6px;height:6px;border-radius:50%;background-color:${c};margin-right:6px;flex-shrink:0;"></span>${text}</span>`;
const group = ( type, text ) => `<span class="timeline-info-group"><span class="timeline-info-dot ${type}"></span>${text}</span>`;
const maxTriangles = Math.max( this.baseTriangles, frame.triangles || 0 );
const trianglesText = isCompact ? ( frame.triangles || 0 ) : ( frame.triangles || 0 ) + ' / ' + maxTriangles + trianglesSuffix;
this.frameInfo.innerHTML = frameLabel + frame.id + group( 'var(--color-fps)', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'var(--color-call)', frame.calls.length + callsSuffix ) + group( 'var(--color-red)', trianglesText );
this.frameInfo.innerHTML = frameLabel + frame.id + group( 'fps', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'call', frame.calls.length + callsSuffix ) + group( 'red', trianglesText );

// Update playhead position
const rect = this.graphSlider.getBoundingClientRect();
Expand Down Expand Up @@ -1567,7 +1567,7 @@ class Timeline extends Tab {
let detailsAndCountHTML = ( call.formatedDetails ? call.formatedDetails : '' );
if ( call.count > 1 ) {

detailsAndCountHTML += ` <span style="opacity: 0.5">( ${call.count} )</span>`;
detailsAndCountHTML += ` <span class="timeline-call-count">( ${call.count} )</span>`;

}

Expand Down
10 changes: 1 addition & 9 deletions examples/jsm/inspector/ui/List.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ export class List {
this.id = `list-${Math.random().toString( 36 ).slice( 2, 11 )}`;
this.domElement.dataset.listId = this.id;

this.gridStyleElement = document.createElement( 'style' );
this.domElement.appendChild( this.gridStyleElement );

const headerRow = document.createElement( 'div' );
headerRow.className = 'list-header';
this.headers.forEach( headerText => {
Expand All @@ -30,12 +27,7 @@ export class List {

setGridStyle( gridTemplate ) {

this.gridStyleElement.textContent = `
[data-list-id="${this.id}"] > .list-header,
[data-list-id="${this.id}"] .list-item-row {
grid-template-columns: ${gridTemplate};
}
`;
this.domElement.style.setProperty( '--list-grid-template', gridTemplate );

}

Expand Down
15 changes: 11 additions & 4 deletions examples/jsm/inspector/ui/Profiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import { getItem, setItem } from '../Inspector.js';

export class Profiler extends EventDispatcher {

constructor( inspector ) {
constructor( inspector, options = {} ) {

super();

this.inspector = inspector;
this.nonce = options.nonce ?? inspector?.nonce ?? null;
this.tabs = {};
this.activeTabId = null;
this.isResizing = false;
Expand All @@ -26,7 +27,7 @@ export class Profiler extends EventDispatcher {
this.setupShell();
this.setupResizing();

Style.init( this.domElement );
Style.init( this.domElement, this.nonce );

this.updateWidgetPosition();

Expand Down Expand Up @@ -274,13 +275,19 @@ export class Profiler extends EventDispatcher {
<span class="toggle-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
<span class="console-badge-container">
<span class="console-badge error" style="display: none;">0</span>
<span class="console-badge warn" style="display: none;">0</span>
<span class="console-badge error">0</span>
<span class="console-badge warn">0</span>
</span>
</span>
`;
this.toggleButton.onclick = () => this.togglePanel();

const errorBadge = this.toggleButton.querySelector( '.console-badge.error' );
errorBadge.style.display = 'none';

const warnBadge = this.toggleButton.querySelector( '.console-badge.warn' );
warnBadge.style.display = 'none';

this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' );

// Create mini-panel for builtin tabs (shown when panel is hidden)
Expand Down
57 changes: 56 additions & 1 deletion examples/jsm/inspector/ui/Style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export class Style {

static init( container ) {
static init( container, nonce = null ) {

const css = /* css */`
@scope (.three-inspector) {
Expand Down Expand Up @@ -1081,6 +1081,7 @@ export class Style {

.list-item-row {
display: grid;
grid-template-columns: var(--list-grid-template, none);
align-items: center;
padding: 4px 8px;
border-radius: 3px;
Expand Down Expand Up @@ -1172,6 +1173,7 @@ export class Style {

.list-header {
display: grid;
grid-template-columns: var(--list-grid-template, none);
align-items: center;
padding: 4px 8px;
font-weight: 600;
Expand Down Expand Up @@ -2232,10 +2234,63 @@ export class Style {
justify-content: center !important;
}

/* Timeline Info & Details */
.timeline-detail-block {
font-size: 11px;
margin-left: 8px;
color: var(--text-secondary);
opacity: 1;
}

.timeline-detail-key,
.timeline-detail-sep,
.timeline-call-count {
opacity: 0.5;
}

.timeline-detail-value {
color: var(--text-secondary);
opacity: 1;
}

.timeline-info-group {
display: inline-flex;
align-items: center;
margin-left: 12px;
flex-shrink: 0;
}

.timeline-info-dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
flex-shrink: 0;
}

.timeline-info-dot.fps {
background-color: var(--color-fps);
}

.timeline-info-dot.call {
background-color: var(--color-call);
}

.timeline-info-dot.red {
background-color: var(--color-red);
}

}
`;

const styleElement = document.createElement( 'style' );

if ( nonce ) {

styleElement.nonce = nonce;

}

styleElement.textContent = css;

container.appendChild( styleElement );
Expand Down