|
@@ -2,19 +2,19 @@ module INSPECTOR {
|
|
|
|
|
|
export class StatsTab extends Tab {
|
|
export class StatsTab extends Tab {
|
|
|
|
|
|
- private _inspector : Inspector;
|
|
|
|
|
|
+ private _inspector: Inspector;
|
|
|
|
|
|
/**
|
|
/**
|
|
* Properties in this array will be updated
|
|
* Properties in this array will be updated
|
|
* in a render loop - Mostly stats properties
|
|
* in a render loop - Mostly stats properties
|
|
*/
|
|
*/
|
|
- private _updatableProperties : Array<{elem:HTMLElement, updateFct : () => string}> = [];
|
|
|
|
|
|
+ private _updatableProperties: Array<{ elem: HTMLElement, updateFct: () => string }> = [];
|
|
|
|
|
|
- private _scene : BABYLON.Scene;
|
|
|
|
- private _engine : BABYLON.Engine;
|
|
|
|
- private _glInfo : any;
|
|
|
|
|
|
+ private _scene: BABYLON.Scene;
|
|
|
|
+ private _engine: BABYLON.Engine;
|
|
|
|
+ private _glInfo: any;
|
|
|
|
|
|
- private _updateLoopHandler : any;
|
|
|
|
|
|
+ private _updateLoopHandler: any;
|
|
|
|
|
|
private _sceneInstrumentation: BABYLON.Nullable<BABYLON.SceneInstrumentation>;
|
|
private _sceneInstrumentation: BABYLON.Nullable<BABYLON.SceneInstrumentation>;
|
|
private _engineInstrumentation: BABYLON.Nullable<BABYLON.EngineInstrumentation>;
|
|
private _engineInstrumentation: BABYLON.Nullable<BABYLON.EngineInstrumentation>;
|
|
@@ -39,298 +39,298 @@ module INSPECTOR {
|
|
this._engineInstrumentation.captureGPUFrameTime = true;
|
|
this._engineInstrumentation.captureGPUFrameTime = true;
|
|
}
|
|
}
|
|
|
|
|
|
- constructor(tabbar:TabBar, insp:Inspector) {
|
|
|
|
- super(tabbar, 'Stats');
|
|
|
|
|
|
+ constructor(tabbar: TabBar, insp: Inspector) {
|
|
|
|
+ super(tabbar, 'Stats');
|
|
|
|
|
|
- this._inspector = insp;
|
|
|
|
|
|
+ this._inspector = insp;
|
|
|
|
|
|
- this._scene = this._inspector.scene;
|
|
|
|
- this._engine = this._scene.getEngine();
|
|
|
|
- this._glInfo = this._engine.getGlInfo();
|
|
|
|
|
|
+ this._scene = this._inspector.scene;
|
|
|
|
+ this._engine = this._scene.getEngine();
|
|
|
|
+ this._glInfo = this._engine.getGlInfo();
|
|
|
|
|
|
this._connectToInstrumentation();
|
|
this._connectToInstrumentation();
|
|
|
|
|
|
// Build the stats panel: a div that will contains all stats
|
|
// Build the stats panel: a div that will contains all stats
|
|
- this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
|
|
|
|
|
|
+ this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
|
|
this._panel.classList.add("stats-panel")
|
|
this._panel.classList.add("stats-panel")
|
|
-
|
|
|
|
- let title = Helpers.CreateDiv('stat-title1', this._panel);
|
|
|
|
- let fpsSpan = Helpers.CreateElement('span', 'stats-fps');
|
|
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:fpsSpan,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._inspector.scene.getEngine().getFps(), 0) + " fps"}
|
|
|
|
|
|
+
|
|
|
|
+ let title = Helpers.CreateDiv('stat-title1', this._panel);
|
|
|
|
+ let fpsSpan = Helpers.CreateElement('span', 'stats-fps');
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: fpsSpan,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._inspector.scene.getEngine().getFps(), 0) + " fps" }
|
|
});
|
|
});
|
|
-
|
|
|
|
|
|
+
|
|
let versionSpan = Helpers.CreateElement('span');
|
|
let versionSpan = Helpers.CreateElement('span');
|
|
versionSpan.textContent = `Babylon.js v${BABYLON.Engine.Version} - `;
|
|
versionSpan.textContent = `Babylon.js v${BABYLON.Engine.Version} - `;
|
|
title.appendChild(versionSpan);
|
|
title.appendChild(versionSpan);
|
|
title.appendChild(fpsSpan);
|
|
title.appendChild(fpsSpan);
|
|
-
|
|
|
|
|
|
+
|
|
this._updateLoopHandler = this._update.bind(this);
|
|
this._updateLoopHandler = this._update.bind(this);
|
|
|
|
|
|
// Count block
|
|
// Count block
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title.textContent = "Count";
|
|
title.textContent = "Count";
|
|
- {
|
|
|
|
- let elemLabel = this._createStatLabel("Total meshes", this._panel);
|
|
|
|
|
|
+ {
|
|
|
|
+ this._createStatLabel("Total meshes", this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.meshes.length.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.meshes.length.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Draw calls", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Draw calls", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._sceneInstrumentation!.drawCallsCounter.current.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._sceneInstrumentation!.drawCallsCounter.current.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Total lights", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Total lights", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.lights.length.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.lights.length.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Total vertices", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Total vertices", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.getTotalVertices().toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.getTotalVertices().toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Total materials", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Total materials", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.materials.length.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.materials.length.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Total textures", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Total textures", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.textures.length.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.textures.length.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Active meshes", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Active meshes", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.getActiveMeshes().length.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.getActiveMeshes().length.toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Active indices", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Active indices", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.getActiveIndices().toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.getActiveIndices().toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Active bones", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Active bones", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.getActiveBones().toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.getActiveBones().toString() }
|
|
});
|
|
});
|
|
|
|
|
|
- elemLabel = this._createStatLabel("Active particles", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Active particles", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._scene.getActiveParticles().toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._scene.getActiveParticles().toString() }
|
|
});
|
|
});
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title.textContent = "Duration";
|
|
title.textContent = "Duration";
|
|
{
|
|
{
|
|
- let elemLabel = this._createStatLabel("Meshes selection", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Meshes selection", this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.activeMeshesEvaluationTimeCounter.current)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.activeMeshesEvaluationTimeCounter.current) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Render targets", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Render targets", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.renderTargetsRenderTimeCounter.current)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.renderTargetsRenderTimeCounter.current) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Particles", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Particles", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.particlesRenderTimeCounter.current)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.particlesRenderTimeCounter.current) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Sprites", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Sprites", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.spritesRenderTimeCounter.current)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.spritesRenderTimeCounter.current) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Animations", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Animations", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.animationsTimeCounter.current)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Physics", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.animationsTimeCounter.current) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Physics", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.physicsTimeCounter.current)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Render", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.physicsTimeCounter.current) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Render", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.renderTimeCounter.current)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.renderTimeCounter.current) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Frame", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Frame", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.frameTimeCounter.current)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Inter-frame", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.frameTimeCounter.current) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Inter-frame", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation!.interFrameTimeCounter.current)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("GPU Frame time", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._sceneInstrumentation!.interFrameTimeCounter.current) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("GPU Frame time", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._engineInstrumentation!.gpuFrameTimeCounter.current * 0.000001)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("GPU Frame time (average)", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._engineInstrumentation!.gpuFrameTimeCounter.current * 0.000001) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("GPU Frame time (average)", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(this._engineInstrumentation!.gpuFrameTimeCounter.average * 0.000001)}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Potential FPS", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(this._engineInstrumentation!.gpuFrameTimeCounter.average * 0.000001) }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Potential FPS", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return BABYLON.Tools.Format(1000.0 / this._sceneInstrumentation!.frameTimeCounter.current, 0)}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return BABYLON.Tools.Format(1000.0 / this._sceneInstrumentation!.frameTimeCounter.current, 0) }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Resolution", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Resolution", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._engine.getRenderWidth() + "x" + this._engine.getRenderHeight()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._engine.getRenderWidth() + "x" + this._engine.getRenderHeight() }
|
|
});
|
|
});
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title.textContent = "Extensions";
|
|
title.textContent = "Extensions";
|
|
{
|
|
{
|
|
- let elemLabel = this._createStatLabel("Std derivatives", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Std derivatives", this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().standardDerivatives ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().standardDerivatives ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Compressed textures", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Compressed textures", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().s3tc ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().s3tc ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Hardware instances", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Hardware instances", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().instancedArrays ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().instancedArrays ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Texture float", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Texture float", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().textureFloat ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().textureFloat ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("32bits indices", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("32bits indices", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().uintIndices ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().uintIndices ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Fragment depth", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Fragment depth", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().fragmentDepthSupported ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().fragmentDepthSupported ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("High precision shaders", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("High precision shaders", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().highPrecisionShaderSupported ? "Yes" : "No")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().highPrecisionShaderSupported ? "Yes" : "No") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Draw buffers", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Draw buffers", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().drawBuffersExtension ? "Yes" : "No")}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Vertex array object", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().drawBuffersExtension ? "Yes" : "No") }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Vertex array object", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().vertexArrayObject ? "Yes" : "No")}
|
|
|
|
- });
|
|
|
|
- elemLabel = this._createStatLabel("Timer query", this._panel);
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().vertexArrayObject ? "Yes" : "No") }
|
|
|
|
+ });
|
|
|
|
+ this._createStatLabel("Timer query", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.getCaps().timerQuery ? "Yes" : "No")}
|
|
|
|
- });
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.getCaps().timerQuery ? "Yes" : "No") }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title.textContent = "Caps.";
|
|
title.textContent = "Caps.";
|
|
{
|
|
{
|
|
- let elemLabel = this._createStatLabel("Stencil", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Stencil", this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return (this._engine.isStencilEnable ? "Enabled" : "Disabled")}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return (this._engine.isStencilEnable ? "Enabled" : "Disabled") }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Max textures units", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Max textures units", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._engine.getCaps().maxTexturesImageUnits.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._engine.getCaps().maxTexturesImageUnits.toString() }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Max textures size", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Max textures size", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._engine.getCaps().maxTextureSize.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._engine.getCaps().maxTextureSize.toString() }
|
|
});
|
|
});
|
|
- elemLabel = this._createStatLabel("Max anisotropy", this._panel);
|
|
|
|
|
|
+ this._createStatLabel("Max anisotropy", this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
elemValue = Helpers.CreateDiv('stat-value', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return this._engine.getCaps().maxAnisotropy.toString()}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return this._engine.getCaps().maxAnisotropy.toString() }
|
|
});
|
|
});
|
|
}
|
|
}
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title = Helpers.CreateDiv('stat-title2', this._panel);
|
|
title.textContent = "Info";
|
|
title.textContent = "Info";
|
|
{
|
|
{
|
|
let elemValue = Helpers.CreateDiv('stat-infos', this._panel);
|
|
let elemValue = Helpers.CreateDiv('stat-infos', this._panel);
|
|
- this._updatableProperties.push({
|
|
|
|
- elem:elemValue,
|
|
|
|
- updateFct:() => { return "WebGL v" + this._engine.webGLVersion + " - " + this._glInfo.version + " - "+this._glInfo.renderer}
|
|
|
|
|
|
+ this._updatableProperties.push({
|
|
|
|
+ elem: elemValue,
|
|
|
|
+ updateFct: () => { return "WebGL v" + this._engine.webGLVersion + " - " + this._glInfo.version + " - " + this._glInfo.renderer }
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- private _createStatLabel(content:string, parent: HTMLElement) : HTMLElement {
|
|
|
|
|
|
+
|
|
|
|
+ private _createStatLabel(content: string, parent: HTMLElement): HTMLElement {
|
|
let elem = Helpers.CreateDiv('stat-label', parent);
|
|
let elem = Helpers.CreateDiv('stat-label', parent);
|
|
elem.textContent = content;
|
|
elem.textContent = content;
|
|
return elem;
|
|
return elem;
|
|
@@ -351,9 +351,9 @@ module INSPECTOR {
|
|
this._engineInstrumentation = null;
|
|
this._engineInstrumentation = null;
|
|
}
|
|
}
|
|
|
|
|
|
- public active(b: boolean){
|
|
|
|
|
|
+ public active(b: boolean) {
|
|
super.active(b);
|
|
super.active(b);
|
|
- if (b){
|
|
|
|
|
|
+ if (b) {
|
|
this._connectToInstrumentation();
|
|
this._connectToInstrumentation();
|
|
this._scene.registerAfterRender(this._updateLoopHandler);
|
|
this._scene.registerAfterRender(this._updateLoopHandler);
|
|
}
|
|
}
|