More instrumentations

dist/preview release/babylon.max.js

@@ -8630,7 +8630,9 @@ var BABYLON;
             if (this._gl.RGBA32F !== 0x8814) {
                 this._gl.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.
             }
-            this._gl.DEPTH24_STENCIL8 = 35056;
+            if (this._gl.DEPTH24_STENCIL8 !== 35056) {
+                this._gl.DEPTH24_STENCIL8 = 35056;
+            }
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
             this._caps.astc = this._gl.getExtension('WEBGL_compressed_texture_astc') || this._gl.getExtension('WEBKIT_WEBGL_compressed_texture_astc');
@@ -8838,14 +8840,16 @@ var BABYLON;
         Object.defineProperty(Engine.prototype, "drawCalls", {
             /** The number of draw calls submitted last frame */
             get: function () {
-                return this._drawCalls.current;
+                BABYLON.Tools.Warn("drawCalls is deprecated. Please use SceneInstrumentation class");
+                return 0;
             },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Engine.prototype, "drawCallsPerfCounter", {
             get: function () {
-                return this._drawCalls;
+                BABYLON.Tools.Warn("drawCallsPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
@@ -17170,7 +17174,7 @@ var BABYLON;
             }
             // Particles
             var activeCamera = this._scene.activeCamera;
-            this._scene._particlesDuration.beginMonitoring();
+            this._scene.onBeforeParticlesRenderingObservable.notifyObservers(this._scene);
             for (var particleIndex = 0; particleIndex < this._scene._activeParticleSystems.length; particleIndex++) {
                 var particleSystem = this._scene._activeParticleSystems.data[particleIndex];
                 if ((activeCamera && activeCamera.layerMask & particleSystem.layerMask) === 0) {
@@ -17181,7 +17185,7 @@ var BABYLON;
                     this._scene._activeParticles.addCount(particleSystem.render(), false);
                 }
             }
-            this._scene._particlesDuration.endMonitoring(false);
+            this._scene.onAfterParticlesRenderingObservable.notifyObservers(this._scene);
         };
         RenderingGroup.prototype._renderSprites = function () {
             if (!this._scene.spritesEnabled || this._spriteManagers.length === 0) {
@@ -17189,14 +17193,14 @@ var BABYLON;
             }
             // Sprites       
             var activeCamera = this._scene.activeCamera;
-            this._scene._spritesDuration.beginMonitoring();
+            this._scene.onBeforeSpritesRenderingObservable.notifyObservers(this._scene);
             for (var id = 0; id < this._spriteManagers.length; id++) {
                 var spriteManager = this._spriteManagers.data[id];
                 if (((activeCamera && activeCamera.layerMask & spriteManager.layerMask) !== 0)) {
                     spriteManager.render();
                 }
             }
-            this._scene._spritesDuration.endMonitoring(false);
+            this._scene.onAfterSpritesRenderingObservable.notifyObservers(this._scene);
         };
         return RenderingGroup;
     }());
@@ -17320,7 +17324,7 @@ var BABYLON;
             */
             this.onDisposeObservable = new BABYLON.Observable();
             /**
-            * An event triggered before rendering the scene
+            * An event triggered before rendering the scene (right after animations and physcis)
             * @type {BABYLON.Observable}
             */
             this.onBeforeRenderObservable = new BABYLON.Observable();
@@ -17335,6 +17339,16 @@ var BABYLON;
             */
             this.onBeforeAnimationsObservable = new BABYLON.Observable();
             /**
+            * An event triggered before draw calls are ready to be sent
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeDrawPhaseObservable = new BABYLON.Observable();
+            /**
+            * An event triggered after draw calls have been sent
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterDrawPhaseObservable = new BABYLON.Observable();
+            /**
             * An event triggered when the scene is ready
             * @type {BABYLON.Observable}
             */
@@ -17360,6 +17374,30 @@ var BABYLON;
             */
             this.onAfterActiveMeshesEvaluationObservable = new BABYLON.Observable();
             /**
+            * An event triggered when particles rendering is about to start
+            * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeParticlesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when particles rendering is done
+            * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterParticlesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when sprites rendering is about to start
+            * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeSpritesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when sprites rendering is done
+            * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterSpritesRenderingObservable = new BABYLON.Observable();
+            /**
             * An event triggered when a camera is created
             * @type {BABYLON.Observable}
             */
@@ -17558,9 +17596,6 @@ var BABYLON;
             this._totalVertices = new BABYLON.PerfCounter();
             this._activeIndices = new BABYLON.PerfCounter();
             this._activeParticles = new BABYLON.PerfCounter();
-            this._particlesDuration = new BABYLON.PerfCounter();
-            this._renderDuration = new BABYLON.PerfCounter();
-            this._spritesDuration = new BABYLON.PerfCounter();
             this._activeBones = new BABYLON.PerfCounter();
             this._animationTime = 0;
             this.animationTimeScale = 1;
@@ -18109,31 +18144,37 @@ var BABYLON;
             return 0;
         };
         Scene.prototype.getRenderDuration = function () {
-            return this._renderDuration.current;
+            BABYLON.Tools.Warn("getRenderDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "renderDurationPerfCounter", {
             get: function () {
-                return this._renderDuration;
+                BABYLON.Tools.Warn("renderDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
         });
         Scene.prototype.getParticlesDuration = function () {
-            return this._particlesDuration.current;
+            BABYLON.Tools.Warn("getParticlesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "particlesDurationPerfCounter", {
             get: function () {
-                return this._particlesDuration;
+                BABYLON.Tools.Warn("particlesDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
         });
         Scene.prototype.getSpritesDuration = function () {
-            return this._spritesDuration.current;
+            BABYLON.Tools.Warn("getSpritesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "spriteDuractionPerfCounter", {
             get: function () {
-                return this._spritesDuration;
+                BABYLON.Tools.Warn("spriteDuractionPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
@@ -19662,9 +19703,8 @@ var BABYLON;
             }
             this.onAfterActiveMeshesEvaluationObservable.notifyObservers(this);
             // Particle systems
-            this._particlesDuration.beginMonitoring();
             if (this.particlesEnabled) {
-                BABYLON.Tools.StartPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onBeforeParticlesRenderingObservable.notifyObservers(this);
                 for (var particleIndex = 0; particleIndex < this.particleSystems.length; particleIndex++) {
                     var particleSystem = this.particleSystems[particleIndex];
                     if (!particleSystem.isStarted() || !particleSystem.emitter) {
@@ -19677,9 +19717,8 @@ var BABYLON;
                         this._renderingManager.dispatchParticles(particleSystem);
                     }
                 }
-                BABYLON.Tools.EndPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onAfterParticlesRenderingObservable.notifyObservers(this);
             }
-            this._particlesDuration.endMonitoring(false);
         };
         Scene.prototype._activeMesh = function (sourceMesh, mesh) {
             if (mesh.skeleton && this.skeletonsEnabled) {
@@ -19803,7 +19842,6 @@ var BABYLON;
             this.OnAfterRenderTargetsRenderObservable.notifyObservers(this);
             // Prepare Frame
             this.postProcessManager._prepareFrame();
-            this._renderDuration.beginMonitoring();
             // Backgrounds
             var layerIndex;
             var layer;
@@ -19817,18 +19855,18 @@ var BABYLON;
                 }
                 engine.setDepthBuffer(true);
             }
-            // Render
-            BABYLON.Tools.StartPerformanceCounter("Main render");
             // Activate HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(true);
             }
+            // Render
+            this.onBeforeDrawPhaseObservable.notifyObservers(this);
             this._renderingManager.render(null, null, true, true);
+            this.onAfterDrawPhaseObservable.notifyObservers(this);
             // Restore HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(stencilState);
             }
-            BABYLON.Tools.EndPerformanceCounter("Main render");
             // Bounding boxes
             if (this._boundingBoxRenderer) {
                 this._boundingBoxRenderer.render();
@@ -19865,7 +19903,6 @@ var BABYLON;
                 }
                 engine.setDepthBuffer(true);
             }
-            this._renderDuration.endMonitoring(false);
             // Finalize frame
             this.postProcessManager._finalizeFrame(camera.isIntermediate);
             // Reset some special arrays
@@ -19931,14 +19968,10 @@ var BABYLON;
             if (this.isDisposed) {
                 return;
             }
-            this._particlesDuration.fetchNewFrame();
-            this._spritesDuration.fetchNewFrame();
             this._activeParticles.fetchNewFrame();
-            this._renderDuration.fetchNewFrame();
             this._totalVertices.fetchNewFrame();
             this._activeIndices.fetchNewFrame();
             this._activeBones.fetchNewFrame();
-            this.getEngine().drawCallsPerfCounter.fetchNewFrame();
             this._meshesForIntersections.reset();
             this.resetCachedMaterial();
             this.onBeforeAnimationsObservable.notifyObservers(this);
@@ -20312,6 +20345,12 @@ var BABYLON;
             this.onBeforeStepObservable.clear();
             this.onBeforeActiveMeshesEvaluationObservable.clear();
             this.onAfterActiveMeshesEvaluationObservable.clear();
+            this.onBeforeParticlesRenderingObservable.clear();
+            this.onAfterParticlesRenderingObservable.clear();
+            this.onBeforeSpritesRenderingObservable.clear();
+            this.onAfterSpritesRenderingObservable.clear();
+            this.onBeforeDrawPhaseObservable.clear();
+            this.onAfterDrawPhaseObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -75254,18 +75293,29 @@ var BABYLON;
             this._renderTargetsRenderTime = new BABYLON.PerfCounter();
             this._captureFrameTime = false;
             this._frameTime = new BABYLON.PerfCounter();
+            this._captureRenderTime = false;
+            this._renderTime = new BABYLON.PerfCounter();
             this._captureInterFrameTime = false;
             this._interFrameTime = new BABYLON.PerfCounter();
+            this._captureParticlesRenderTime = false;
+            this._particlesRenderTime = new BABYLON.PerfCounter();
+            this._captureSpritesRenderTime = false;
+            this._spritesRenderTime = new BABYLON.PerfCounter();
             // Observers
             this._onBeforeActiveMeshesEvaluationObserver = null;
             this._onAfterActiveMeshesEvaluationObserver = null;
             this._onBeforeRenderTargetsRenderObserver = null;
             this._onAfterRenderTargetsRenderObserver = null;
-            this._onBeforeRenderObserver = null;
             this._onAfterRenderObserver = null;
+            this._onBeforeDrawPhaseObserver = null;
+            this._onAfterDrawPhaseObserver = null;
             this._onBeforeAnimationsObserver = null;
+            this._onBeforeParticlesRenderingObserver = null;
+            this._onAfterParticlesRenderingObserver = null;
+            this._onBeforeSpritesRenderingObserver = null;
+            this._onAfterSpritesRenderingObserver = null;
             // Before render
-            this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(function () {
+            this._onBeforeAnimationsObserver = scene.onBeforeAnimationsObservable.add(function () {
                 if (_this._captureActiveMeshesEvaluationTime) {
                     _this._activeMeshesEvaluationTime.fetchNewFrame();
                 }
@@ -75276,6 +75326,16 @@ var BABYLON;
                     BABYLON.Tools.StartPerformanceCounter("Scene rendering");
                     _this._frameTime.beginMonitoring();
                 }
+                if (_this._captureInterFrameTime) {
+                    _this._interFrameTime.endMonitoring();
+                }
+                if (_this._captureParticlesRenderTime) {
+                    _this._particlesRenderTime.fetchNewFrame();
+                }
+                if (_this._captureSpritesRenderTime) {
+                    _this._spritesRenderTime.fetchNewFrame();
+                }
+                _this.scene.getEngine()._drawCalls.fetchNewFrame();
             });
             // After render
             this._onAfterRenderObserver = scene.onAfterRenderObservable.add(function () {
@@ -75283,6 +75343,9 @@ var BABYLON;
                     BABYLON.Tools.EndPerformanceCounter("Scene rendering");
                     _this._frameTime.endMonitoring();
                 }
+                if (_this._captureRenderTime) {
+                    _this._renderTime.endMonitoring(false);
+                }
                 if (_this._captureInterFrameTime) {
                     _this._interFrameTime.beginMonitoring();
                 }
@@ -75381,6 +75444,98 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(SceneInstrumentation.prototype, "particlesRenderTimeCounter", {
+            /**
+             * Gets the perf counter used for particles render time
+             */
+            get: function () {
+                return this._particlesRenderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureParticlesRenderTime", {
+            /**
+             * Gets the particles render time capture status
+             */
+            get: function () {
+                return this._captureParticlesRenderTime;
+            },
+            /**
+             * Enable or disable the particles render time capture
+             */
+            set: function (value) {
+                var _this = this;
+                if (value === this._captureParticlesRenderTime) {
+                    return;
+                }
+                this._captureParticlesRenderTime = value;
+                if (value) {
+                    this._onBeforeParticlesRenderingObserver = this.scene.onBeforeParticlesRenderingObservable.add(function () {
+                        BABYLON.Tools.StartPerformanceCounter("Particles");
+                        _this._particlesRenderTime.beginMonitoring();
+                    });
+                    this._onAfterParticlesRenderingObserver = this.scene.onAfterParticlesRenderingObservable.add(function () {
+                        BABYLON.Tools.EndPerformanceCounter("Particles");
+                        _this._particlesRenderTime.endMonitoring(false);
+                    });
+                }
+                else {
+                    this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+                    this._onBeforeParticlesRenderingObserver = null;
+                    this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+                    this._onAfterParticlesRenderingObserver = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "spritesRenderTimeCounter", {
+            /**
+             * Gets the perf counter used for sprites render time
+             */
+            get: function () {
+                return this._spritesRenderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureSpritesRenderTime", {
+            /**
+             * Gets the sprites render time capture status
+             */
+            get: function () {
+                return this._captureSpritesRenderTime;
+            },
+            /**
+             * Enable or disable the sprites render time capture
+             */
+            set: function (value) {
+                var _this = this;
+                if (value === this._captureSpritesRenderTime) {
+                    return;
+                }
+                this._captureSpritesRenderTime = value;
+                if (value) {
+                    this._onBeforeSpritesRenderingObserver = this.scene.onBeforeSpritesRenderingObservable.add(function () {
+                        BABYLON.Tools.StartPerformanceCounter("Sprites");
+                        _this._spritesRenderTime.beginMonitoring();
+                    });
+                    this._onAfterSpritesRenderingObserver = this.scene.onAfterSpritesRenderingObservable.add(function () {
+                        BABYLON.Tools.EndPerformanceCounter("Sprites");
+                        _this._spritesRenderTime.endMonitoring(false);
+                    });
+                }
+                else {
+                    this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+                    this._onBeforeSpritesRenderingObserver = null;
+                    this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+                    this._onAfterSpritesRenderingObserver = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(SceneInstrumentation.prototype, "frameTimeCounter", {
             /**
              * Gets the perf counter used for frame time capture
@@ -75407,7 +75562,7 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(SceneInstrumentation.prototype, "frameInterTimeCounter", {
+        Object.defineProperty(SceneInstrumentation.prototype, "interFrameTimeCounter", {
             /**
              * Gets the perf counter used for inter-frames time capture
              */
@@ -75428,27 +75583,68 @@ var BABYLON;
              * Enable or disable the inter-frames time capture
              */
             set: function (value) {
+                this._captureInterFrameTime = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "renderTimeCounter", {
+            /**
+             * Gets the perf counter used for render time capture
+             */
+            get: function () {
+                return this._renderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureRenderTime", {
+            /**
+             * Gets the render time capture status
+             */
+            get: function () {
+                return this._captureRenderTime;
+            },
+            /**
+             * Enable or disable the render time capture
+             */
+            set: function (value) {
                 var _this = this;
-                if (value === this._captureInterFrameTime) {
+                if (value === this._captureRenderTime) {
                     return;
                 }
-                this._captureInterFrameTime = value;
+                this._captureRenderTime = value;
                 if (value) {
-                    this._onBeforeAnimationsObserver = this.scene.onBeforeAnimationsObservable.add(function () {
-                        _this._interFrameTime.endMonitoring();
+                    this._onBeforeDrawPhaseObserver = this.scene.onBeforeDrawPhaseObservable.add(function () {
+                        _this._renderTime.beginMonitoring();
+                        BABYLON.Tools.StartPerformanceCounter("Main render");
+                    });
+                    this._onAfterDrawPhaseObserver = this.scene.onAfterDrawPhaseObservable.add(function () {
+                        _this._renderTime.endMonitoring(false);
+                        BABYLON.Tools.EndPerformanceCounter("Main render");
                     });
                 }
                 else {
-                    this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
-                    this._onBeforeAnimationsObserver = null;
+                    this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+                    this._onBeforeDrawPhaseObserver = null;
+                    this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+                    this._onAfterDrawPhaseObserver = null;
                 }
             },
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(SceneInstrumentation.prototype, "drawCallsCounter", {
+            /**
+             * Gets the perf counter used for frame time capture
+             */
+            get: function () {
+                return this.scene.getEngine()._drawCalls;
+            },
+            enumerable: true,
+            configurable: true
+        });
         SceneInstrumentation.prototype.dispose = function () {
-            this.scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
-            this._onBeforeRenderObserver = null;
             this.scene.onAfterRenderObservable.remove(this._onAfterRenderObserver);
             this._onAfterRenderObserver = null;
             this.scene.onBeforeActiveMeshesEvaluationObservable.remove(this._onBeforeActiveMeshesEvaluationObserver);
@@ -75461,6 +75657,18 @@ var BABYLON;
             this._onAfterRenderTargetsRenderObserver = null;
             this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
             this._onBeforeAnimationsObserver = null;
+            this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+            this._onBeforeParticlesRenderingObserver = null;
+            this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+            this._onAfterParticlesRenderingObserver = null;
+            this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+            this._onBeforeSpritesRenderingObserver = null;
+            this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+            this._onAfterSpritesRenderingObserver = null;
+            this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+            this._onBeforeDrawPhaseObserver = null;
+            this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+            this._onAfterDrawPhaseObserver = null;
             this.scene = null;
         };
         return SceneInstrumentation;

dist/preview release/customConfigurations/minimalGLTFViewer/babylon.max.js

@@ -8630,7 +8630,9 @@ var BABYLON;
             if (this._gl.RGBA32F !== 0x8814) {
                 this._gl.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.
             }
-            this._gl.DEPTH24_STENCIL8 = 35056;
+            if (this._gl.DEPTH24_STENCIL8 !== 35056) {
+                this._gl.DEPTH24_STENCIL8 = 35056;
+            }
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
             this._caps.astc = this._gl.getExtension('WEBGL_compressed_texture_astc') || this._gl.getExtension('WEBKIT_WEBGL_compressed_texture_astc');
@@ -8838,14 +8840,16 @@ var BABYLON;
         Object.defineProperty(Engine.prototype, "drawCalls", {
             /** The number of draw calls submitted last frame */
             get: function () {
-                return this._drawCalls.current;
+                BABYLON.Tools.Warn("drawCalls is deprecated. Please use SceneInstrumentation class");
+                return 0;
             },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Engine.prototype, "drawCallsPerfCounter", {
             get: function () {
-                return this._drawCalls;
+                BABYLON.Tools.Warn("drawCallsPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
@@ -17170,7 +17174,7 @@ var BABYLON;
             }
             // Particles
             var activeCamera = this._scene.activeCamera;
-            this._scene._particlesDuration.beginMonitoring();
+            this._scene.onBeforeParticlesRenderingObservable.notifyObservers(this._scene);
             for (var particleIndex = 0; particleIndex < this._scene._activeParticleSystems.length; particleIndex++) {
                 var particleSystem = this._scene._activeParticleSystems.data[particleIndex];
                 if ((activeCamera && activeCamera.layerMask & particleSystem.layerMask) === 0) {
@@ -17181,7 +17185,7 @@ var BABYLON;
                     this._scene._activeParticles.addCount(particleSystem.render(), false);
                 }
             }
-            this._scene._particlesDuration.endMonitoring(false);
+            this._scene.onAfterParticlesRenderingObservable.notifyObservers(this._scene);
         };
         RenderingGroup.prototype._renderSprites = function () {
             if (!this._scene.spritesEnabled || this._spriteManagers.length === 0) {
@@ -17189,14 +17193,14 @@ var BABYLON;
             }
             // Sprites       
             var activeCamera = this._scene.activeCamera;
-            this._scene._spritesDuration.beginMonitoring();
+            this._scene.onBeforeSpritesRenderingObservable.notifyObservers(this._scene);
             for (var id = 0; id < this._spriteManagers.length; id++) {
                 var spriteManager = this._spriteManagers.data[id];
                 if (((activeCamera && activeCamera.layerMask & spriteManager.layerMask) !== 0)) {
                     spriteManager.render();
                 }
             }
-            this._scene._spritesDuration.endMonitoring(false);
+            this._scene.onAfterSpritesRenderingObservable.notifyObservers(this._scene);
         };
         return RenderingGroup;
     }());
@@ -17320,7 +17324,7 @@ var BABYLON;
             */
             this.onDisposeObservable = new BABYLON.Observable();
             /**
-            * An event triggered before rendering the scene
+            * An event triggered before rendering the scene (right after animations and physcis)
             * @type {BABYLON.Observable}
             */
             this.onBeforeRenderObservable = new BABYLON.Observable();
@@ -17335,6 +17339,16 @@ var BABYLON;
             */
             this.onBeforeAnimationsObservable = new BABYLON.Observable();
             /**
+            * An event triggered before draw calls are ready to be sent
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeDrawPhaseObservable = new BABYLON.Observable();
+            /**
+            * An event triggered after draw calls have been sent
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterDrawPhaseObservable = new BABYLON.Observable();
+            /**
             * An event triggered when the scene is ready
             * @type {BABYLON.Observable}
             */
@@ -17360,6 +17374,30 @@ var BABYLON;
             */
             this.onAfterActiveMeshesEvaluationObservable = new BABYLON.Observable();
             /**
+            * An event triggered when particles rendering is about to start
+            * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeParticlesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when particles rendering is done
+            * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterParticlesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when sprites rendering is about to start
+            * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onBeforeSpritesRenderingObservable = new BABYLON.Observable();
+            /**
+            * An event triggered when sprites rendering is done
+            * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+            * @type {BABYLON.Observable}
+            */
+            this.onAfterSpritesRenderingObservable = new BABYLON.Observable();
+            /**
             * An event triggered when a camera is created
             * @type {BABYLON.Observable}
             */
@@ -17558,9 +17596,6 @@ var BABYLON;
             this._totalVertices = new BABYLON.PerfCounter();
             this._activeIndices = new BABYLON.PerfCounter();
             this._activeParticles = new BABYLON.PerfCounter();
-            this._particlesDuration = new BABYLON.PerfCounter();
-            this._renderDuration = new BABYLON.PerfCounter();
-            this._spritesDuration = new BABYLON.PerfCounter();
             this._activeBones = new BABYLON.PerfCounter();
             this._animationTime = 0;
             this.animationTimeScale = 1;
@@ -18109,31 +18144,37 @@ var BABYLON;
             return 0;
         };
         Scene.prototype.getRenderDuration = function () {
-            return this._renderDuration.current;
+            BABYLON.Tools.Warn("getRenderDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "renderDurationPerfCounter", {
             get: function () {
-                return this._renderDuration;
+                BABYLON.Tools.Warn("renderDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
         });
         Scene.prototype.getParticlesDuration = function () {
-            return this._particlesDuration.current;
+            BABYLON.Tools.Warn("getParticlesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "particlesDurationPerfCounter", {
             get: function () {
-                return this._particlesDuration;
+                BABYLON.Tools.Warn("particlesDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
         });
         Scene.prototype.getSpritesDuration = function () {
-            return this._spritesDuration.current;
+            BABYLON.Tools.Warn("getSpritesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         };
         Object.defineProperty(Scene.prototype, "spriteDuractionPerfCounter", {
             get: function () {
-                return this._spritesDuration;
+                BABYLON.Tools.Warn("spriteDuractionPerfCounter is deprecated. Please use SceneInstrumentation class");
+                return null;
             },
             enumerable: true,
             configurable: true
@@ -19662,9 +19703,8 @@ var BABYLON;
             }
             this.onAfterActiveMeshesEvaluationObservable.notifyObservers(this);
             // Particle systems
-            this._particlesDuration.beginMonitoring();
             if (this.particlesEnabled) {
-                BABYLON.Tools.StartPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onBeforeParticlesRenderingObservable.notifyObservers(this);
                 for (var particleIndex = 0; particleIndex < this.particleSystems.length; particleIndex++) {
                     var particleSystem = this.particleSystems[particleIndex];
                     if (!particleSystem.isStarted() || !particleSystem.emitter) {
@@ -19677,9 +19717,8 @@ var BABYLON;
                         this._renderingManager.dispatchParticles(particleSystem);
                     }
                 }
-                BABYLON.Tools.EndPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onAfterParticlesRenderingObservable.notifyObservers(this);
             }
-            this._particlesDuration.endMonitoring(false);
         };
         Scene.prototype._activeMesh = function (sourceMesh, mesh) {
             if (mesh.skeleton && this.skeletonsEnabled) {
@@ -19803,7 +19842,6 @@ var BABYLON;
             this.OnAfterRenderTargetsRenderObservable.notifyObservers(this);
             // Prepare Frame
             this.postProcessManager._prepareFrame();
-            this._renderDuration.beginMonitoring();
             // Backgrounds
             var layerIndex;
             var layer;
@@ -19817,18 +19855,18 @@ var BABYLON;
                 }
                 engine.setDepthBuffer(true);
             }
-            // Render
-            BABYLON.Tools.StartPerformanceCounter("Main render");
             // Activate HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(true);
             }
+            // Render
+            this.onBeforeDrawPhaseObservable.notifyObservers(this);
             this._renderingManager.render(null, null, true, true);
+            this.onAfterDrawPhaseObservable.notifyObservers(this);
             // Restore HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(stencilState);
             }
-            BABYLON.Tools.EndPerformanceCounter("Main render");
             // Bounding boxes
             if (this._boundingBoxRenderer) {
                 this._boundingBoxRenderer.render();
@@ -19865,7 +19903,6 @@ var BABYLON;
                 }
                 engine.setDepthBuffer(true);
             }
-            this._renderDuration.endMonitoring(false);
             // Finalize frame
             this.postProcessManager._finalizeFrame(camera.isIntermediate);
             // Reset some special arrays
@@ -19931,14 +19968,10 @@ var BABYLON;
             if (this.isDisposed) {
                 return;
             }
-            this._particlesDuration.fetchNewFrame();
-            this._spritesDuration.fetchNewFrame();
             this._activeParticles.fetchNewFrame();
-            this._renderDuration.fetchNewFrame();
             this._totalVertices.fetchNewFrame();
             this._activeIndices.fetchNewFrame();
             this._activeBones.fetchNewFrame();
-            this.getEngine().drawCallsPerfCounter.fetchNewFrame();
             this._meshesForIntersections.reset();
             this.resetCachedMaterial();
             this.onBeforeAnimationsObservable.notifyObservers(this);
@@ -20312,6 +20345,12 @@ var BABYLON;
             this.onBeforeStepObservable.clear();
             this.onBeforeActiveMeshesEvaluationObservable.clear();
             this.onAfterActiveMeshesEvaluationObservable.clear();
+            this.onBeforeParticlesRenderingObservable.clear();
+            this.onAfterParticlesRenderingObservable.clear();
+            this.onBeforeSpritesRenderingObservable.clear();
+            this.onAfterSpritesRenderingObservable.clear();
+            this.onBeforeDrawPhaseObservable.clear();
+            this.onAfterDrawPhaseObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -74930,18 +74969,29 @@ var BABYLON;
             this._renderTargetsRenderTime = new BABYLON.PerfCounter();
             this._captureFrameTime = false;
             this._frameTime = new BABYLON.PerfCounter();
+            this._captureRenderTime = false;
+            this._renderTime = new BABYLON.PerfCounter();
             this._captureInterFrameTime = false;
             this._interFrameTime = new BABYLON.PerfCounter();
+            this._captureParticlesRenderTime = false;
+            this._particlesRenderTime = new BABYLON.PerfCounter();
+            this._captureSpritesRenderTime = false;
+            this._spritesRenderTime = new BABYLON.PerfCounter();
             // Observers
             this._onBeforeActiveMeshesEvaluationObserver = null;
             this._onAfterActiveMeshesEvaluationObserver = null;
             this._onBeforeRenderTargetsRenderObserver = null;
             this._onAfterRenderTargetsRenderObserver = null;
-            this._onBeforeRenderObserver = null;
             this._onAfterRenderObserver = null;
+            this._onBeforeDrawPhaseObserver = null;
+            this._onAfterDrawPhaseObserver = null;
             this._onBeforeAnimationsObserver = null;
+            this._onBeforeParticlesRenderingObserver = null;
+            this._onAfterParticlesRenderingObserver = null;
+            this._onBeforeSpritesRenderingObserver = null;
+            this._onAfterSpritesRenderingObserver = null;
             // Before render
-            this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(function () {
+            this._onBeforeAnimationsObserver = scene.onBeforeAnimationsObservable.add(function () {
                 if (_this._captureActiveMeshesEvaluationTime) {
                     _this._activeMeshesEvaluationTime.fetchNewFrame();
                 }
@@ -74952,6 +75002,16 @@ var BABYLON;
                     BABYLON.Tools.StartPerformanceCounter("Scene rendering");
                     _this._frameTime.beginMonitoring();
                 }
+                if (_this._captureInterFrameTime) {
+                    _this._interFrameTime.endMonitoring();
+                }
+                if (_this._captureParticlesRenderTime) {
+                    _this._particlesRenderTime.fetchNewFrame();
+                }
+                if (_this._captureSpritesRenderTime) {
+                    _this._spritesRenderTime.fetchNewFrame();
+                }
+                _this.scene.getEngine()._drawCalls.fetchNewFrame();
             });
             // After render
             this._onAfterRenderObserver = scene.onAfterRenderObservable.add(function () {
@@ -74959,6 +75019,9 @@ var BABYLON;
                     BABYLON.Tools.EndPerformanceCounter("Scene rendering");
                     _this._frameTime.endMonitoring();
                 }
+                if (_this._captureRenderTime) {
+                    _this._renderTime.endMonitoring(false);
+                }
                 if (_this._captureInterFrameTime) {
                     _this._interFrameTime.beginMonitoring();
                 }
@@ -75057,6 +75120,98 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(SceneInstrumentation.prototype, "particlesRenderTimeCounter", {
+            /**
+             * Gets the perf counter used for particles render time
+             */
+            get: function () {
+                return this._particlesRenderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureParticlesRenderTime", {
+            /**
+             * Gets the particles render time capture status
+             */
+            get: function () {
+                return this._captureParticlesRenderTime;
+            },
+            /**
+             * Enable or disable the particles render time capture
+             */
+            set: function (value) {
+                var _this = this;
+                if (value === this._captureParticlesRenderTime) {
+                    return;
+                }
+                this._captureParticlesRenderTime = value;
+                if (value) {
+                    this._onBeforeParticlesRenderingObserver = this.scene.onBeforeParticlesRenderingObservable.add(function () {
+                        BABYLON.Tools.StartPerformanceCounter("Particles");
+                        _this._particlesRenderTime.beginMonitoring();
+                    });
+                    this._onAfterParticlesRenderingObserver = this.scene.onAfterParticlesRenderingObservable.add(function () {
+                        BABYLON.Tools.EndPerformanceCounter("Particles");
+                        _this._particlesRenderTime.endMonitoring(false);
+                    });
+                }
+                else {
+                    this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+                    this._onBeforeParticlesRenderingObserver = null;
+                    this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+                    this._onAfterParticlesRenderingObserver = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "spritesRenderTimeCounter", {
+            /**
+             * Gets the perf counter used for sprites render time
+             */
+            get: function () {
+                return this._spritesRenderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureSpritesRenderTime", {
+            /**
+             * Gets the sprites render time capture status
+             */
+            get: function () {
+                return this._captureSpritesRenderTime;
+            },
+            /**
+             * Enable or disable the sprites render time capture
+             */
+            set: function (value) {
+                var _this = this;
+                if (value === this._captureSpritesRenderTime) {
+                    return;
+                }
+                this._captureSpritesRenderTime = value;
+                if (value) {
+                    this._onBeforeSpritesRenderingObserver = this.scene.onBeforeSpritesRenderingObservable.add(function () {
+                        BABYLON.Tools.StartPerformanceCounter("Sprites");
+                        _this._spritesRenderTime.beginMonitoring();
+                    });
+                    this._onAfterSpritesRenderingObserver = this.scene.onAfterSpritesRenderingObservable.add(function () {
+                        BABYLON.Tools.EndPerformanceCounter("Sprites");
+                        _this._spritesRenderTime.endMonitoring(false);
+                    });
+                }
+                else {
+                    this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+                    this._onBeforeSpritesRenderingObserver = null;
+                    this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+                    this._onAfterSpritesRenderingObserver = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(SceneInstrumentation.prototype, "frameTimeCounter", {
             /**
              * Gets the perf counter used for frame time capture
@@ -75083,7 +75238,7 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(SceneInstrumentation.prototype, "frameInterTimeCounter", {
+        Object.defineProperty(SceneInstrumentation.prototype, "interFrameTimeCounter", {
             /**
              * Gets the perf counter used for inter-frames time capture
              */
@@ -75104,27 +75259,68 @@ var BABYLON;
              * Enable or disable the inter-frames time capture
              */
             set: function (value) {
+                this._captureInterFrameTime = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "renderTimeCounter", {
+            /**
+             * Gets the perf counter used for render time capture
+             */
+            get: function () {
+                return this._renderTime;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SceneInstrumentation.prototype, "captureRenderTime", {
+            /**
+             * Gets the render time capture status
+             */
+            get: function () {
+                return this._captureRenderTime;
+            },
+            /**
+             * Enable or disable the render time capture
+             */
+            set: function (value) {
                 var _this = this;
-                if (value === this._captureInterFrameTime) {
+                if (value === this._captureRenderTime) {
                     return;
                 }
-                this._captureInterFrameTime = value;
+                this._captureRenderTime = value;
                 if (value) {
-                    this._onBeforeAnimationsObserver = this.scene.onBeforeAnimationsObservable.add(function () {
-                        _this._interFrameTime.endMonitoring();
+                    this._onBeforeDrawPhaseObserver = this.scene.onBeforeDrawPhaseObservable.add(function () {
+                        _this._renderTime.beginMonitoring();
+                        BABYLON.Tools.StartPerformanceCounter("Main render");
+                    });
+                    this._onAfterDrawPhaseObserver = this.scene.onAfterDrawPhaseObservable.add(function () {
+                        _this._renderTime.endMonitoring(false);
+                        BABYLON.Tools.EndPerformanceCounter("Main render");
                     });
                 }
                 else {
-                    this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
-                    this._onBeforeAnimationsObserver = null;
+                    this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+                    this._onBeforeDrawPhaseObserver = null;
+                    this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+                    this._onAfterDrawPhaseObserver = null;
                 }
             },
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(SceneInstrumentation.prototype, "drawCallsCounter", {
+            /**
+             * Gets the perf counter used for frame time capture
+             */
+            get: function () {
+                return this.scene.getEngine()._drawCalls;
+            },
+            enumerable: true,
+            configurable: true
+        });
         SceneInstrumentation.prototype.dispose = function () {
-            this.scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
-            this._onBeforeRenderObserver = null;
             this.scene.onAfterRenderObservable.remove(this._onAfterRenderObserver);
             this._onAfterRenderObserver = null;
             this.scene.onBeforeActiveMeshesEvaluationObservable.remove(this._onBeforeActiveMeshesEvaluationObserver);
@@ -75137,6 +75333,18 @@ var BABYLON;
             this._onAfterRenderTargetsRenderObserver = null;
             this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
             this._onBeforeAnimationsObserver = null;
+            this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+            this._onBeforeParticlesRenderingObserver = null;
+            this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+            this._onAfterParticlesRenderingObserver = null;
+            this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+            this._onBeforeSpritesRenderingObserver = null;
+            this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+            this._onAfterSpritesRenderingObserver = null;
+            this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+            this._onBeforeDrawPhaseObserver = null;
+            this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+            this._onAfterDrawPhaseObserver = null;
             this.scene = null;
         };
         return SceneInstrumentation;

dist/preview release/inspector/babylon.inspector.js

@@ -3672,7 +3672,10 @@ var INSPECTOR;
             _this._sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
             _this._sceneInstrumentation.captureRenderTargetsRenderTime = true;
             _this._sceneInstrumentation.captureFrameTime = true;
+            _this._sceneInstrumentation.captureRenderTime = true;
             _this._sceneInstrumentation.captureInterFrameTime = true;
+            _this._sceneInstrumentation.captureParticlesRenderTime = true;
+            _this._sceneInstrumentation.captureSpritesRenderTime = true;
             _this._engineInstrumentation = new BABYLON.EngineInstrumentation(_this._engine);
             _this._engineInstrumentation.captureGPUFrameTime = true;
             // Build the stats panel: a div that will contains all stats
@@ -3703,7 +3706,7 @@ var INSPECTOR;
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
                 _this._updatableProperties.push({
                     elem: elemValue,
-                    updateFct: function () { return _this._engine.drawCalls.toString(); }
+                    updateFct: function () { return _this._sceneInstrumentation.drawCallsCounter.current.toString(); }
                 });
                 elemLabel = _this._createStatLabel("Total lights", _this._panel);
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
@@ -3773,19 +3776,19 @@ var INSPECTOR;
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
                 _this._updatableProperties.push({
                     elem: elemValue,
-                    updateFct: function () { return BABYLON.Tools.Format(_this._scene.getParticlesDuration()); }
+                    updateFct: function () { return BABYLON.Tools.Format(_this._sceneInstrumentation.particlesRenderTimeCounter.current); }
                 });
                 elemLabel = _this._createStatLabel("Sprites", _this._panel);
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
                 _this._updatableProperties.push({
                     elem: elemValue,
-                    updateFct: function () { return BABYLON.Tools.Format(_this._scene.getSpritesDuration()); }
+                    updateFct: function () { return BABYLON.Tools.Format(_this._sceneInstrumentation.spritesRenderTimeCounter.current); }
                 });
                 elemLabel = _this._createStatLabel("Render", _this._panel);
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
                 _this._updatableProperties.push({
                     elem: elemValue,
-                    updateFct: function () { return BABYLON.Tools.Format(_this._scene.getRenderDuration()); }
+                    updateFct: function () { return BABYLON.Tools.Format(_this._sceneInstrumentation.renderTimeCounter.current); }
                 });
                 elemLabel = _this._createStatLabel("Frame", _this._panel);
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
@@ -3797,7 +3800,7 @@ var INSPECTOR;
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
                 _this._updatableProperties.push({
                     elem: elemValue,
-                    updateFct: function () { return BABYLON.Tools.Format(_this._sceneInstrumentation.frameInterTimeCounter.current); }
+                    updateFct: function () { return BABYLON.Tools.Format(_this._sceneInstrumentation.interFrameTimeCounter.current); }
                 });
                 elemLabel = _this._createStatLabel("GPU Frame time", _this._panel);
                 elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);

inspector/src/tabs/StatsTab.ts

@@ -32,7 +32,10 @@ module INSPECTOR {
             this._sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
             this._sceneInstrumentation.captureRenderTargetsRenderTime = true;
             this._sceneInstrumentation.captureFrameTime = true;
+            this._sceneInstrumentation.captureRenderTime = true;
             this._sceneInstrumentation.captureInterFrameTime = true;
+            this._sceneInstrumentation.captureParticlesRenderTime = true;
+            this._sceneInstrumentation.captureSpritesRenderTime = true;
 
             this._engineInstrumentation = new BABYLON.EngineInstrumentation(this._engine);
             this._engineInstrumentation.captureGPUFrameTime = true;
@@ -70,7 +73,7 @@ module INSPECTOR {
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
                 this._updatableProperties.push({ 
                     elem:elemValue, 
-                    updateFct:() => { return this._engine.drawCalls.toString()}
+                    updateFct:() => { return this._sceneInstrumentation.drawCallsCounter.current.toString()}
                 });
 
                 elemLabel = this._createStatLabel("Total lights", this._panel);
@@ -149,19 +152,19 @@ module INSPECTOR {
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
                 this._updatableProperties.push({ 
                     elem:elemValue, 
-                    updateFct:() => { return BABYLON.Tools.Format(this._scene.getParticlesDuration())}
+                    updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation.particlesRenderTimeCounter.current)}
                 });
                 elemLabel = this._createStatLabel("Sprites", this._panel);
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
                 this._updatableProperties.push({ 
                     elem:elemValue, 
-                    updateFct:() => { return BABYLON.Tools.Format(this._scene.getSpritesDuration())}
+                    updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation.spritesRenderTimeCounter.current)}
                 });
                 elemLabel = this._createStatLabel("Render", this._panel);
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
                 this._updatableProperties.push({ 
                     elem:elemValue, 
-                    updateFct:() => { return BABYLON.Tools.Format(this._scene.getRenderDuration())}
+                    updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation.renderTimeCounter.current)}
                 });
                 elemLabel = this._createStatLabel("Frame", this._panel);
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
@@ -173,7 +176,7 @@ module INSPECTOR {
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);
                 this._updatableProperties.push({ 
                     elem:elemValue, 
-                    updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation.frameInterTimeCounter.current)}
+                    updateFct:() => { return BABYLON.Tools.Format(this._sceneInstrumentation.interFrameTimeCounter.current)}
                 });       
                 elemLabel = this._createStatLabel("GPU Frame time", this._panel);
                 elemValue = Helpers.CreateDiv('stat-value', this._panel);

src/Engine/babylon.engine.ts

@@ -1116,7 +1116,9 @@
             if (this._gl.RGBA32F !== 0x8814) {
                 this._gl.RGBA32F = 0x8814;      // RGBA 32-bit floating-point color-renderable internal sized format.
             }
-            this._gl.DEPTH24_STENCIL8 = 35056;
+            if (this._gl.DEPTH24_STENCIL8 !== 35056) {
+                this._gl.DEPTH24_STENCIL8 = 35056;
+            }
 
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
@@ -1340,11 +1342,13 @@
 
         /** The number of draw calls submitted last frame */
         public get drawCalls(): number {
-            return this._drawCalls.current;
+            Tools.Warn("drawCalls is deprecated. Please use SceneInstrumentation class");
+            return 0;
         }
 
-        public get drawCallsPerfCounter(): PerfCounter {
-            return this._drawCalls;
+        public get drawCallsPerfCounter(): Nullable<PerfCounter> {
+            Tools.Warn("drawCallsPerfCounter is deprecated. Please use SceneInstrumentation class");
+            return null;
         }
 
         public getDepthFunction(): Nullable<number> {

src/Instrumentation/babylon.sceneInstrumentation.ts

@@ -12,8 +12,17 @@ module BABYLON {
         private _captureFrameTime = false;
         private _frameTime = new PerfCounter();        
 
+        private _captureRenderTime = false;
+        private _renderTime = new PerfCounter();           
+
         private _captureInterFrameTime = false;
-        private _interFrameTime = new PerfCounter();              
+        private _interFrameTime = new PerfCounter();    
+        
+        private _captureParticlesRenderTime = false;
+        private _particlesRenderTime = new PerfCounter();       
+        
+        private _captureSpritesRenderTime = false;
+        private _spritesRenderTime = new PerfCounter();              
 
         // Observers
         private _onBeforeActiveMeshesEvaluationObserver: Nullable<Observer<Scene>> = null;
@@ -21,10 +30,18 @@ module BABYLON {
         private _onBeforeRenderTargetsRenderObserver: Nullable<Observer<Scene>> = null;
         private _onAfterRenderTargetsRenderObserver: Nullable<Observer<Scene>> = null;
 
-        private _onBeforeRenderObserver: Nullable<Observer<Scene>> = null;
         private _onAfterRenderObserver: Nullable<Observer<Scene>> = null;
+
+        private _onBeforeDrawPhaseObserver: Nullable<Observer<Scene>> = null;
+        private _onAfterDrawPhaseObserver: Nullable<Observer<Scene>> = null;        
         
         private _onBeforeAnimationsObserver: Nullable<Observer<Scene>> = null;
+
+        private _onBeforeParticlesRenderingObserver: Nullable<Observer<Scene>> = null;
+        private _onAfterParticlesRenderingObserver: Nullable<Observer<Scene>> = null;
+
+        private _onBeforeSpritesRenderingObserver: Nullable<Observer<Scene>> = null;
+        private _onAfterSpritesRenderingObserver: Nullable<Observer<Scene>> = null;        
                 
         // Properties
         /**
@@ -114,6 +131,92 @@ module BABYLON {
         }        
 
         /**
+         * Gets the perf counter used for particles render time
+         */
+        public get particlesRenderTimeCounter(): PerfCounter {
+            return this._particlesRenderTime;
+        }
+
+        /**
+         * Gets the particles render time capture status
+         */
+        public get captureParticlesRenderTime(): boolean {
+            return this._captureParticlesRenderTime;
+        }        
+
+        /**
+         * Enable or disable the particles render time capture
+         */        
+        public set captureParticlesRenderTime(value: boolean) {
+            if (value === this._captureParticlesRenderTime) {
+                return;
+            }
+
+            this._captureParticlesRenderTime = value;
+
+            if (value) {
+                this._onBeforeParticlesRenderingObserver = this.scene.onBeforeParticlesRenderingObservable.add(()=>{                    
+                    Tools.StartPerformanceCounter("Particles");
+                    this._particlesRenderTime.beginMonitoring();
+                });
+
+                this._onAfterParticlesRenderingObserver = this.scene.onAfterParticlesRenderingObservable.add(()=>{                                        
+                    Tools.EndPerformanceCounter("Particles");
+                    this._particlesRenderTime.endMonitoring(false);
+                });
+            } else {
+                this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+                this._onBeforeParticlesRenderingObserver = null;
+
+                this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+                this._onAfterParticlesRenderingObserver = null;
+            }
+        }        
+
+        /**
+         * Gets the perf counter used for sprites render time
+         */
+        public get spritesRenderTimeCounter(): PerfCounter {
+            return this._spritesRenderTime;
+        }
+
+        /**
+         * Gets the sprites render time capture status
+         */
+        public get captureSpritesRenderTime(): boolean {
+            return this._captureSpritesRenderTime;
+        }        
+
+        /**
+         * Enable or disable the sprites render time capture
+         */        
+        public set captureSpritesRenderTime(value: boolean) {
+            if (value === this._captureSpritesRenderTime) {
+                return;
+            }
+
+            this._captureSpritesRenderTime = value;
+
+            if (value) {
+                this._onBeforeSpritesRenderingObserver = this.scene.onBeforeSpritesRenderingObservable.add(()=>{                    
+                    Tools.StartPerformanceCounter("Sprites");
+                    this._spritesRenderTime.beginMonitoring();
+                });
+
+                this._onAfterSpritesRenderingObserver = this.scene.onAfterSpritesRenderingObservable.add(()=>{                                        
+                    Tools.EndPerformanceCounter("Sprites");
+                    this._spritesRenderTime.endMonitoring(false);
+                });
+            } else {
+                this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+                this._onBeforeSpritesRenderingObserver = null;
+
+                this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+                this._onAfterSpritesRenderingObserver = null;
+            }
+        }      
+        
+        /**
          * Gets the perf counter used for frame time capture
          */
         public get frameTimeCounter(): PerfCounter {
@@ -137,7 +240,7 @@ module BABYLON {
         /**
          * Gets the perf counter used for inter-frames time capture
          */
-        public get frameInterTimeCounter(): PerfCounter {
+        public get interFrameTimeCounter(): PerfCounter {
             return this._interFrameTime;
         }               
        
@@ -152,25 +255,61 @@ module BABYLON {
          * Enable or disable the inter-frames time capture
          */        
         public set captureInterFrameTime(value: boolean) {
-            if (value === this._captureInterFrameTime) {
+            this._captureInterFrameTime = value;
+        }     
+
+        /**
+         * Gets the perf counter used for render time capture
+         */
+        public get renderTimeCounter(): PerfCounter {
+            return this._renderTime;
+        }               
+       
+        /**
+         * Gets the render time capture status
+         */        
+        public get captureRenderTime(): boolean {
+            return this._captureRenderTime;
+        }        
+
+        /**
+         * Enable or disable the render time capture
+         */        
+        public set captureRenderTime(value: boolean) {
+            if (value === this._captureRenderTime) {
                 return;
             }
 
-            this._captureInterFrameTime = value;
+            this._captureRenderTime = value;
 
             if (value) {
-                this._onBeforeAnimationsObserver = this.scene.onBeforeAnimationsObservable.add(()=>{
-                    this._interFrameTime.endMonitoring(); 
+                this._onBeforeDrawPhaseObserver = this.scene.onBeforeDrawPhaseObservable.add(()=>{
+                    this._renderTime.beginMonitoring(); 
+                    Tools.StartPerformanceCounter("Main render");
                 });
+
+                this._onAfterDrawPhaseObserver = this.scene.onAfterDrawPhaseObservable.add(()=>{
+                    this._renderTime.endMonitoring(false); 
+                    Tools.EndPerformanceCounter("Main render");
+                });                
             } else {
-                this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
-                this._onBeforeAnimationsObserver = null;
+                this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+                this._onBeforeDrawPhaseObserver = null;
+                this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+                this._onAfterDrawPhaseObserver = null;
             }
-        }     
+        }            
+
+        /**
+         * Gets the perf counter used for frame time capture
+         */
+        public get drawCallsCounter(): PerfCounter {
+            return this.scene.getEngine()._drawCalls;
+        }            
     
         public constructor(public scene: Scene) {
             // Before render
-            this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+            this._onBeforeAnimationsObserver = scene.onBeforeAnimationsObservable.add(() => {
                 if (this._captureActiveMeshesEvaluationTime) {
                     this._activeMeshesEvaluationTime.fetchNewFrame();
                 }
@@ -183,6 +322,20 @@ module BABYLON {
                     Tools.StartPerformanceCounter("Scene rendering");
                     this._frameTime.beginMonitoring();
                 }   
+
+                if (this._captureInterFrameTime) {
+                    this._interFrameTime.endMonitoring(); 
+                }                   
+
+                if (this._captureParticlesRenderTime) {
+                    this._particlesRenderTime.fetchNewFrame();
+                }
+
+                if (this._captureSpritesRenderTime) {
+                    this._spritesRenderTime.fetchNewFrame();
+                }
+
+                this.scene.getEngine()._drawCalls.fetchNewFrame();
             });
 
             // After render
@@ -192,6 +345,10 @@ module BABYLON {
                     this._frameTime.endMonitoring();                    
                 }
 
+                if (this._captureRenderTime) {
+                    this._renderTime.endMonitoring(false);                    
+                }                
+
                 if (this._captureInterFrameTime) {
                     this._interFrameTime.beginMonitoring();  
                 }                
@@ -199,9 +356,6 @@ module BABYLON {
         }
 
         public dispose() {
-            this.scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
-            this._onBeforeRenderObserver = null;
-
             this.scene.onAfterRenderObservable.remove(this._onAfterRenderObserver);
             this._onAfterRenderObserver = null;
 
@@ -219,6 +373,24 @@ module BABYLON {
             
             this.scene.onBeforeAnimationsObservable.remove(this._onBeforeAnimationsObserver);
             this._onBeforeAnimationsObserver = null;
+
+            this.scene.onBeforeParticlesRenderingObservable.remove(this._onBeforeParticlesRenderingObserver);
+            this._onBeforeParticlesRenderingObserver = null;
+
+            this.scene.onAfterParticlesRenderingObservable.remove(this._onAfterParticlesRenderingObserver);
+            this._onAfterParticlesRenderingObserver = null;         
+            
+            this.scene.onBeforeSpritesRenderingObservable.remove(this._onBeforeSpritesRenderingObserver);
+            this._onBeforeSpritesRenderingObserver = null;
+
+            this.scene.onAfterSpritesRenderingObservable.remove(this._onAfterSpritesRenderingObserver);
+            this._onAfterSpritesRenderingObserver = null;       
+            
+            this.scene.onBeforeDrawPhaseObservable.remove(this._onBeforeDrawPhaseObserver);
+            this._onBeforeDrawPhaseObserver = null;
+
+            this.scene.onAfterDrawPhaseObservable.remove(this._onAfterDrawPhaseObserver);
+            this._onAfterDrawPhaseObserver = null;            
                 
             (<any>this.scene) = null;
         }

src/Rendering/babylon.renderingGroup.ts

@@ -360,7 +360,7 @@
 
             // Particles
             var activeCamera = this._scene.activeCamera;
-            this._scene._particlesDuration.beginMonitoring();
+            this._scene.onBeforeParticlesRenderingObservable.notifyObservers(this._scene);
             for (var particleIndex = 0; particleIndex < this._scene._activeParticleSystems.length; particleIndex++) {
                 var particleSystem = this._scene._activeParticleSystems.data[particleIndex];
 
@@ -373,7 +373,8 @@
                     this._scene._activeParticles.addCount(particleSystem.render(), false);
                 }
             }
-            this._scene._particlesDuration.endMonitoring(false);
+            this._scene.onAfterParticlesRenderingObservable.notifyObservers(this._scene);
+            
         }
 
         private _renderSprites(): void {
@@ -383,7 +384,7 @@
 
             // Sprites       
             var activeCamera = this._scene.activeCamera;
-            this._scene._spritesDuration.beginMonitoring();
+            this._scene.onBeforeSpritesRenderingObservable.notifyObservers(this._scene);
             for (var id = 0; id < this._spriteManagers.length; id++) {
                 var spriteManager = this._spriteManagers.data[id];
 
@@ -391,7 +392,7 @@
                     spriteManager.render();
                 }
             }
-            this._scene._spritesDuration.endMonitoring(false);
+            this._scene.onAfterSpritesRenderingObservable.notifyObservers(this._scene);
         }
     }
 } 

src/babylon.scene.ts

@@ -215,7 +215,7 @@
         }
 
         /**
-        * An event triggered before rendering the scene
+        * An event triggered before rendering the scene (right after animations and physcis)
         * @type {BABYLON.Observable}
         */
         public onBeforeRenderObservable = new Observable<Scene>();
@@ -256,6 +256,18 @@
         public onBeforeAnimationsObservable = new Observable<Scene>();        
 
         /**
+        * An event triggered before draw calls are ready to be sent
+        * @type {BABYLON.Observable}
+        */
+        public onBeforeDrawPhaseObservable = new Observable<Scene>();          
+
+        /**
+        * An event triggered after draw calls have been sent
+        * @type {BABYLON.Observable}
+        */
+        public onAfterDrawPhaseObservable = new Observable<Scene>();          
+
+        /**
         * An event triggered when the scene is ready
         * @type {BABYLON.Observable}
         */
@@ -303,6 +315,34 @@
         public onAfterActiveMeshesEvaluationObservable = new Observable<Scene>();           
 
         /**
+        * An event triggered when particles rendering is about to start
+        * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+        * @type {BABYLON.Observable}
+        */
+        public onBeforeParticlesRenderingObservable = new Observable<Scene>();        
+        
+        /**
+        * An event triggered when particles rendering is done
+        * Note: This event can be trigger more than once per frame (because particles can be rendered by render target textures as well)
+        * @type {BABYLON.Observable}
+        */
+        public onAfterParticlesRenderingObservable = new Observable<Scene>();  
+
+        /**
+        * An event triggered when sprites rendering is about to start
+        * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+        * @type {BABYLON.Observable}
+        */
+        public onBeforeSpritesRenderingObservable = new Observable<Scene>();        
+        
+        /**
+        * An event triggered when sprites rendering is done
+        * Note: This event can be trigger more than once per frame (because sprites can be rendered by render target textures as well)
+        * @type {BABYLON.Observable}
+        */
+        public onAfterSpritesRenderingObservable = new Observable<Scene>();          
+
+        /**
         * An event triggered when a camera is created
         * @type {BABYLON.Observable}
         */
@@ -758,9 +798,6 @@
         private _totalVertices = new PerfCounter();
         public _activeIndices = new PerfCounter();
         public _activeParticles = new PerfCounter();
-        public _particlesDuration = new PerfCounter();
-        private _renderDuration = new PerfCounter();
-        public _spritesDuration = new PerfCounter();
         public _activeBones = new PerfCounter();
 
         private _animationRatio: number;
@@ -1041,27 +1078,33 @@
         }
 
         public getRenderDuration(): number {
-            return this._renderDuration.current;
+            Tools.Warn("getRenderDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         }
 
-        public get renderDurationPerfCounter(): PerfCounter {
-            return this._renderDuration;
+        public get renderDurationPerfCounter(): Nullable<PerfCounter> {
+            Tools.Warn("renderDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+            return null;
         }
 
         public getParticlesDuration(): number {
-            return this._particlesDuration.current;
+            Tools.Warn("getParticlesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         }
 
-        public get particlesDurationPerfCounter(): PerfCounter {
-            return this._particlesDuration;
+        public get particlesDurationPerfCounter(): Nullable<PerfCounter> {
+            Tools.Warn("particlesDurationPerfCounter is deprecated. Please use SceneInstrumentation class");
+            return null;
         }
 
         public getSpritesDuration(): number {
-            return this._spritesDuration.current;
+            Tools.Warn("getSpritesDuration is deprecated. Please use SceneInstrumentation class");
+            return 0;
         }
 
-        public get spriteDuractionPerfCounter(): PerfCounter {
-            return this._spritesDuration;
+        public get spriteDuractionPerfCounter(): Nullable<PerfCounter> {
+            Tools.Warn("spriteDuractionPerfCounter is deprecated. Please use SceneInstrumentation class");
+            return null;
         }
 
         public getAnimationRatio(): number {
@@ -2871,9 +2914,8 @@
             this.onAfterActiveMeshesEvaluationObservable.notifyObservers(this);
 
             // Particle systems
-            this._particlesDuration.beginMonitoring();
             if (this.particlesEnabled) {
-                Tools.StartPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onBeforeParticlesRenderingObservable.notifyObservers(this);
                 for (var particleIndex = 0; particleIndex < this.particleSystems.length; particleIndex++) {
                     var particleSystem = this.particleSystems[particleIndex];
 
@@ -2888,9 +2930,8 @@
                         this._renderingManager.dispatchParticles(particleSystem);
                     }
                 }
-                Tools.EndPerformanceCounter("Particles", this.particleSystems.length > 0);
+                this.onAfterParticlesRenderingObservable.notifyObservers(this);
             }
-            this._particlesDuration.endMonitoring(false);
         }
 
         private _activeMesh(sourceMesh: AbstractMesh, mesh: AbstractMesh): void {
@@ -3050,8 +3091,6 @@
             // Prepare Frame
             this.postProcessManager._prepareFrame();
 
-            this._renderDuration.beginMonitoring();
-
             // Backgrounds
             var layerIndex;
             var layer;
@@ -3065,24 +3104,22 @@
                 }
                 engine.setDepthBuffer(true);
             }
-
-            // Render
-            Tools.StartPerformanceCounter("Main render");
-
+        
             // Activate HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(true);
             }
 
+            // Render
+            this.onBeforeDrawPhaseObservable.notifyObservers(this);
             this._renderingManager.render(null, null, true, true);
+            this.onAfterDrawPhaseObservable.notifyObservers(this);
 
             // Restore HighlightLayer stencil
             if (renderhighlights) {
                 this._engine.setStencilBuffer(stencilState);
             }
 
-            Tools.EndPerformanceCounter("Main render");
-
             // Bounding boxes
             if (this._boundingBoxRenderer) {
                 this._boundingBoxRenderer.render();
@@ -3124,8 +3161,6 @@
                 engine.setDepthBuffer(true);
             }
 
-            this._renderDuration.endMonitoring(false);
-
             // Finalize frame
             this.postProcessManager._finalizeFrame(camera.isIntermediate);
            
@@ -3207,14 +3242,10 @@
                 return;
             }
 
-            this._particlesDuration.fetchNewFrame();
-            this._spritesDuration.fetchNewFrame();
             this._activeParticles.fetchNewFrame();
-            this._renderDuration.fetchNewFrame();
             this._totalVertices.fetchNewFrame();
             this._activeIndices.fetchNewFrame();
             this._activeBones.fetchNewFrame();
-            this.getEngine().drawCallsPerfCounter.fetchNewFrame();
             this._meshesForIntersections.reset();
             this.resetCachedMaterial();
 
@@ -3656,6 +3687,12 @@
             this.onBeforeStepObservable.clear();
             this.onBeforeActiveMeshesEvaluationObservable.clear();
             this.onAfterActiveMeshesEvaluationObservable.clear();
+            this.onBeforeParticlesRenderingObservable.clear();
+            this.onAfterParticlesRenderingObservable.clear();
+            this.onBeforeSpritesRenderingObservable.clear();
+            this.onAfterSpritesRenderingObservable.clear();
+            this.onBeforeDrawPhaseObservable.clear();
+            this.onAfterDrawPhaseObservable.clear();
 
             this.detachControl();