Nightly

dist/preview release/babylon.max.js

@@ -22842,12 +22842,16 @@ var BABYLON;
 (function (BABYLON) {
     var RenderingManager = /** @class */ (function () {
         function RenderingManager(scene) {
+            /**
+             * Hidden
+             */
+            this._useSceneAutoClearSetup = false;
             this._renderingGroups = new Array();
             this._autoClearDepthStencil = {};
             this._customOpaqueSortCompareFn = {};
             this._customAlphaTestSortCompareFn = {};
             this._customTransparentSortCompareFn = {};
-            this._renderinGroupInfo = null;
+            this._renderingGroupInfo = new BABYLON.RenderingGroupInfo();
             this._scene = scene;
             for (var i = RenderingManager.MIN_RENDERINGGROUPS; i < RenderingManager.MAX_RENDERINGGROUPS; i++) {
                 this._autoClearDepthStencil[i] = { autoClear: true, depth: true, stencil: true };
@@ -22863,17 +22867,10 @@ var BABYLON;
             this._depthStencilBufferAlreadyCleaned = true;
         };
         RenderingManager.prototype.render = function (customRenderFunction, activeMeshes, renderParticles, renderSprites) {
-            // Check if there's at least on observer on the onRenderingGroupObservable and initialize things to fire it
-            var observable = this._scene.onRenderingGroupObservable.hasObservers() ? this._scene.onRenderingGroupObservable : null;
-            var info = null;
-            if (observable) {
-                if (!this._renderinGroupInfo) {
-                    this._renderinGroupInfo = new BABYLON.RenderingGroupInfo();
-                }
-                info = this._renderinGroupInfo;
-                info.scene = this._scene;
-                info.camera = this._scene.activeCamera;
-            }
+            // Update the observable context (not null as it only goes away on dispose)
+            var info = this._renderingGroupInfo;
+            info.scene = this._scene;
+            info.camera = this._scene.activeCamera;
             // Dispatch sprites
             if (renderSprites) {
                 for (var index = 0; index < this._scene.spriteManagers.length; index++) {
@@ -22885,47 +22882,33 @@ var BABYLON;
             for (var index = RenderingManager.MIN_RENDERINGGROUPS; index < RenderingManager.MAX_RENDERINGGROUPS; index++) {
                 this._depthStencilBufferAlreadyCleaned = index === RenderingManager.MIN_RENDERINGGROUPS;
                 var renderingGroup = this._renderingGroups[index];
-                if (!renderingGroup && !observable)
+                if (!renderingGroup)
                     continue;
-                var renderingGroupMask = 0;
-                // Fire PRECLEAR stage
-                if (observable && info) {
-                    renderingGroupMask = Math.pow(2, index);
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRECLEAR;
-                    info.renderingGroupId = index;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
+                var renderingGroupMask = Math.pow(2, index);
+                info.renderingGroupId = index;
+                // Before Observable
+                this._scene.onBeforeRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
                 // Clear depth/stencil if needed
                 if (RenderingManager.AUTOCLEAR) {
-                    var autoClear = this._autoClearDepthStencil[index];
+                    var autoClear = this._useSceneAutoClearSetup ?
+                        this._scene.getAutoClearDepthStencilSetup(index) :
+                        this._autoClearDepthStencil[index];
                     if (autoClear && autoClear.autoClear) {
                         this._clearDepthStencilBuffer(autoClear.depth, autoClear.stencil);
                     }
                 }
-                if (observable && info) {
-                    // Fire PREOPAQUE stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PREOPAQUE;
-                    observable.notifyObservers(info, renderingGroupMask);
-                    // Fire PRETRANSPARENT stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRETRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
-                if (renderingGroup) {
-                    for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
-                        var step = _a[_i];
-                        step.action(index);
-                    }
-                    renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
-                    for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
-                        var step = _c[_b];
-                        step.action(index);
-                    }
+                // Render
+                for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
+                    var step = _a[_i];
+                    step.action(index);
                 }
-                // Fire POSTTRANSPARENT stage
-                if (observable && info) {
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_POSTTRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
+                renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
+                for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
+                    var step = _c[_b];
+                    step.action(index);
                 }
+                // After Observable
+                this._scene.onAfterRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
             }
         };
         RenderingManager.prototype.reset = function () {
@@ -22939,6 +22922,7 @@ var BABYLON;
         RenderingManager.prototype.dispose = function () {
             this.freeRenderingGroups();
             this._renderingGroups.length = 0;
+            this._renderingGroupInfo = null;
         };
         /**
          * Clear the info related to rendering groups preventing retention points during dispose.
@@ -23020,6 +23004,15 @@ var BABYLON;
             };
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        RenderingManager.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._autoClearDepthStencil[index];
+        };
+        /**
          * The max id used for rendering groups (not included)
          */
         RenderingManager.MAX_RENDERINGGROUPS = 4;
@@ -23678,26 +23671,6 @@ var BABYLON;
     var RenderingGroupInfo = /** @class */ (function () {
         function RenderingGroupInfo() {
         }
-        /**
-         * Stage corresponding to the very first hook in the renderingGroup phase: before the render buffer may be cleared
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_PRECLEAR = 1;
-        /**
-         * Called before opaque object are rendered.
-         * This stage will be fired only if there's 3D Opaque content to render
-         */
-        RenderingGroupInfo.STAGE_PREOPAQUE = 2;
-        /**
-         * Called after the opaque objects are rendered and before the transparent ones
-         * This stage will be fired only if there's 3D transparent content to render
-         */
-        RenderingGroupInfo.STAGE_PRETRANSPARENT = 3;
-        /**
-         * Called after the transparent object are rendered, last hook of the renderingGroup phase
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_POSTTRANSPARENT = 4;
         return RenderingGroupInfo;
     }());
     BABYLON.RenderingGroupInfo = RenderingGroupInfo;
@@ -23913,11 +23886,17 @@ var BABYLON;
             */
             _this.onAfterStepObservable = new BABYLON.Observable();
             /**
-             * This Observable will be triggered for each stage of each renderingGroup of each rendered camera.
+             * This Observable will be triggered before rendering each renderingGroup of each rendered camera.
+             * The RenderinGroupInfo class contains all the information about the context in which the observable is called
+             * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
+             */
+            _this.onBeforeRenderingGroupObservable = new BABYLON.Observable();
+            /**
+             * This Observable will be triggered after rendering each renderingGroup of each rendered camera.
              * The RenderinGroupInfo class contains all the information about the context in which the observable is called
              * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
              */
-            _this.onRenderingGroupObservable = new BABYLON.Observable();
+            _this.onAfterRenderingGroupObservable = new BABYLON.Observable();
             // Animations
             _this._registeredForLateAnimationBindings = new BABYLON.SmartArrayNoDuplicate(256);
             /**
@@ -28041,6 +28020,8 @@ var BABYLON;
             this.onBeforeAnimationsObservable.clear();
             this.onAfterAnimationsObservable.clear();
             this.onDataLoadedObservable.clear();
+            this.onBeforeRenderingGroupObservable.clear();
+            this.onAfterRenderingGroupObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -28855,6 +28836,15 @@ var BABYLON;
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil, depth, stencil);
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        Scene.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._renderingManager.getAutoClearDepthStencilSetup(index);
+        };
+        /**
          * Will flag all materials as dirty to trigger new shader compilation
          * @param flag defines the flag used to specify which material part must be marked as dirty
          * @param predicate If not null, it will be used to specifiy if a material has to be marked as dirty
@@ -58192,9 +58182,15 @@ var BABYLON;
             return "LinesMesh";
         };
         Object.defineProperty(LinesMesh.prototype, "material", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return this._colorShader;
             },
+            /**
+             * @hidden
+             */
             set: function (value) {
                 // Do nothing
             },
@@ -58202,6 +58198,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(LinesMesh.prototype, "checkCollisions", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return false;
             },
@@ -64981,6 +64980,7 @@ var BABYLON;
             _this._doNotChangeAspectRatio = doNotChangeAspectRatio;
             // Rendering groups
             _this._renderingManager = new BABYLON.RenderingManager(scene);
+            _this._renderingManager._useSceneAutoClearSetup = true;
             if (isMulti) {
                 return _this;
             }
@@ -65481,6 +65481,7 @@ var BABYLON;
          */
         RenderTargetTexture.prototype.setRenderingAutoClearDepthStencil = function (renderingGroupId, autoClearDepthStencil) {
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil);
+            this._renderingManager._useSceneAutoClearSetup = false;
         };
         RenderTargetTexture.prototype.clone = function () {
             var textureSize = this.getSize();

dist/preview release/babylon.no-module.max.js

@@ -22809,12 +22809,16 @@ var BABYLON;
 (function (BABYLON) {
     var RenderingManager = /** @class */ (function () {
         function RenderingManager(scene) {
+            /**
+             * Hidden
+             */
+            this._useSceneAutoClearSetup = false;
             this._renderingGroups = new Array();
             this._autoClearDepthStencil = {};
             this._customOpaqueSortCompareFn = {};
             this._customAlphaTestSortCompareFn = {};
             this._customTransparentSortCompareFn = {};
-            this._renderinGroupInfo = null;
+            this._renderingGroupInfo = new BABYLON.RenderingGroupInfo();
             this._scene = scene;
             for (var i = RenderingManager.MIN_RENDERINGGROUPS; i < RenderingManager.MAX_RENDERINGGROUPS; i++) {
                 this._autoClearDepthStencil[i] = { autoClear: true, depth: true, stencil: true };
@@ -22830,17 +22834,10 @@ var BABYLON;
             this._depthStencilBufferAlreadyCleaned = true;
         };
         RenderingManager.prototype.render = function (customRenderFunction, activeMeshes, renderParticles, renderSprites) {
-            // Check if there's at least on observer on the onRenderingGroupObservable and initialize things to fire it
-            var observable = this._scene.onRenderingGroupObservable.hasObservers() ? this._scene.onRenderingGroupObservable : null;
-            var info = null;
-            if (observable) {
-                if (!this._renderinGroupInfo) {
-                    this._renderinGroupInfo = new BABYLON.RenderingGroupInfo();
-                }
-                info = this._renderinGroupInfo;
-                info.scene = this._scene;
-                info.camera = this._scene.activeCamera;
-            }
+            // Update the observable context (not null as it only goes away on dispose)
+            var info = this._renderingGroupInfo;
+            info.scene = this._scene;
+            info.camera = this._scene.activeCamera;
             // Dispatch sprites
             if (renderSprites) {
                 for (var index = 0; index < this._scene.spriteManagers.length; index++) {
@@ -22852,47 +22849,33 @@ var BABYLON;
             for (var index = RenderingManager.MIN_RENDERINGGROUPS; index < RenderingManager.MAX_RENDERINGGROUPS; index++) {
                 this._depthStencilBufferAlreadyCleaned = index === RenderingManager.MIN_RENDERINGGROUPS;
                 var renderingGroup = this._renderingGroups[index];
-                if (!renderingGroup && !observable)
+                if (!renderingGroup)
                     continue;
-                var renderingGroupMask = 0;
-                // Fire PRECLEAR stage
-                if (observable && info) {
-                    renderingGroupMask = Math.pow(2, index);
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRECLEAR;
-                    info.renderingGroupId = index;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
+                var renderingGroupMask = Math.pow(2, index);
+                info.renderingGroupId = index;
+                // Before Observable
+                this._scene.onBeforeRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
                 // Clear depth/stencil if needed
                 if (RenderingManager.AUTOCLEAR) {
-                    var autoClear = this._autoClearDepthStencil[index];
+                    var autoClear = this._useSceneAutoClearSetup ?
+                        this._scene.getAutoClearDepthStencilSetup(index) :
+                        this._autoClearDepthStencil[index];
                     if (autoClear && autoClear.autoClear) {
                         this._clearDepthStencilBuffer(autoClear.depth, autoClear.stencil);
                     }
                 }
-                if (observable && info) {
-                    // Fire PREOPAQUE stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PREOPAQUE;
-                    observable.notifyObservers(info, renderingGroupMask);
-                    // Fire PRETRANSPARENT stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRETRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
-                if (renderingGroup) {
-                    for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
-                        var step = _a[_i];
-                        step.action(index);
-                    }
-                    renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
-                    for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
-                        var step = _c[_b];
-                        step.action(index);
-                    }
+                // Render
+                for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
+                    var step = _a[_i];
+                    step.action(index);
                 }
-                // Fire POSTTRANSPARENT stage
-                if (observable && info) {
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_POSTTRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
+                renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
+                for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
+                    var step = _c[_b];
+                    step.action(index);
                 }
+                // After Observable
+                this._scene.onAfterRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
             }
         };
         RenderingManager.prototype.reset = function () {
@@ -22906,6 +22889,7 @@ var BABYLON;
         RenderingManager.prototype.dispose = function () {
             this.freeRenderingGroups();
             this._renderingGroups.length = 0;
+            this._renderingGroupInfo = null;
         };
         /**
          * Clear the info related to rendering groups preventing retention points during dispose.
@@ -22987,6 +22971,15 @@ var BABYLON;
             };
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        RenderingManager.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._autoClearDepthStencil[index];
+        };
+        /**
          * The max id used for rendering groups (not included)
          */
         RenderingManager.MAX_RENDERINGGROUPS = 4;
@@ -23645,26 +23638,6 @@ var BABYLON;
     var RenderingGroupInfo = /** @class */ (function () {
         function RenderingGroupInfo() {
         }
-        /**
-         * Stage corresponding to the very first hook in the renderingGroup phase: before the render buffer may be cleared
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_PRECLEAR = 1;
-        /**
-         * Called before opaque object are rendered.
-         * This stage will be fired only if there's 3D Opaque content to render
-         */
-        RenderingGroupInfo.STAGE_PREOPAQUE = 2;
-        /**
-         * Called after the opaque objects are rendered and before the transparent ones
-         * This stage will be fired only if there's 3D transparent content to render
-         */
-        RenderingGroupInfo.STAGE_PRETRANSPARENT = 3;
-        /**
-         * Called after the transparent object are rendered, last hook of the renderingGroup phase
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_POSTTRANSPARENT = 4;
         return RenderingGroupInfo;
     }());
     BABYLON.RenderingGroupInfo = RenderingGroupInfo;
@@ -23880,11 +23853,17 @@ var BABYLON;
             */
             _this.onAfterStepObservable = new BABYLON.Observable();
             /**
-             * This Observable will be triggered for each stage of each renderingGroup of each rendered camera.
+             * This Observable will be triggered before rendering each renderingGroup of each rendered camera.
+             * The RenderinGroupInfo class contains all the information about the context in which the observable is called
+             * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
+             */
+            _this.onBeforeRenderingGroupObservable = new BABYLON.Observable();
+            /**
+             * This Observable will be triggered after rendering each renderingGroup of each rendered camera.
              * The RenderinGroupInfo class contains all the information about the context in which the observable is called
              * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
              */
-            _this.onRenderingGroupObservable = new BABYLON.Observable();
+            _this.onAfterRenderingGroupObservable = new BABYLON.Observable();
             // Animations
             _this._registeredForLateAnimationBindings = new BABYLON.SmartArrayNoDuplicate(256);
             /**
@@ -28008,6 +27987,8 @@ var BABYLON;
             this.onBeforeAnimationsObservable.clear();
             this.onAfterAnimationsObservable.clear();
             this.onDataLoadedObservable.clear();
+            this.onBeforeRenderingGroupObservable.clear();
+            this.onAfterRenderingGroupObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -28822,6 +28803,15 @@ var BABYLON;
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil, depth, stencil);
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        Scene.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._renderingManager.getAutoClearDepthStencilSetup(index);
+        };
+        /**
          * Will flag all materials as dirty to trigger new shader compilation
          * @param flag defines the flag used to specify which material part must be marked as dirty
          * @param predicate If not null, it will be used to specifiy if a material has to be marked as dirty
@@ -58159,9 +58149,15 @@ var BABYLON;
             return "LinesMesh";
         };
         Object.defineProperty(LinesMesh.prototype, "material", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return this._colorShader;
             },
+            /**
+             * @hidden
+             */
             set: function (value) {
                 // Do nothing
             },
@@ -58169,6 +58165,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(LinesMesh.prototype, "checkCollisions", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return false;
             },
@@ -64948,6 +64947,7 @@ var BABYLON;
             _this._doNotChangeAspectRatio = doNotChangeAspectRatio;
             // Rendering groups
             _this._renderingManager = new BABYLON.RenderingManager(scene);
+            _this._renderingManager._useSceneAutoClearSetup = true;
             if (isMulti) {
                 return _this;
             }
@@ -65448,6 +65448,7 @@ var BABYLON;
          */
         RenderTargetTexture.prototype.setRenderingAutoClearDepthStencil = function (renderingGroupId, autoClearDepthStencil) {
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil);
+            this._renderingManager._useSceneAutoClearSetup = false;
         };
         RenderTargetTexture.prototype.clone = function () {
             var textureSize = this.getSize();

dist/preview release/es6.js

@@ -22809,12 +22809,16 @@ var BABYLON;
 (function (BABYLON) {
     var RenderingManager = /** @class */ (function () {
         function RenderingManager(scene) {
+            /**
+             * Hidden
+             */
+            this._useSceneAutoClearSetup = false;
             this._renderingGroups = new Array();
             this._autoClearDepthStencil = {};
             this._customOpaqueSortCompareFn = {};
             this._customAlphaTestSortCompareFn = {};
             this._customTransparentSortCompareFn = {};
-            this._renderinGroupInfo = null;
+            this._renderingGroupInfo = new BABYLON.RenderingGroupInfo();
             this._scene = scene;
             for (var i = RenderingManager.MIN_RENDERINGGROUPS; i < RenderingManager.MAX_RENDERINGGROUPS; i++) {
                 this._autoClearDepthStencil[i] = { autoClear: true, depth: true, stencil: true };
@@ -22830,17 +22834,10 @@ var BABYLON;
             this._depthStencilBufferAlreadyCleaned = true;
         };
         RenderingManager.prototype.render = function (customRenderFunction, activeMeshes, renderParticles, renderSprites) {
-            // Check if there's at least on observer on the onRenderingGroupObservable and initialize things to fire it
-            var observable = this._scene.onRenderingGroupObservable.hasObservers() ? this._scene.onRenderingGroupObservable : null;
-            var info = null;
-            if (observable) {
-                if (!this._renderinGroupInfo) {
-                    this._renderinGroupInfo = new BABYLON.RenderingGroupInfo();
-                }
-                info = this._renderinGroupInfo;
-                info.scene = this._scene;
-                info.camera = this._scene.activeCamera;
-            }
+            // Update the observable context (not null as it only goes away on dispose)
+            var info = this._renderingGroupInfo;
+            info.scene = this._scene;
+            info.camera = this._scene.activeCamera;
             // Dispatch sprites
             if (renderSprites) {
                 for (var index = 0; index < this._scene.spriteManagers.length; index++) {
@@ -22852,47 +22849,33 @@ var BABYLON;
             for (var index = RenderingManager.MIN_RENDERINGGROUPS; index < RenderingManager.MAX_RENDERINGGROUPS; index++) {
                 this._depthStencilBufferAlreadyCleaned = index === RenderingManager.MIN_RENDERINGGROUPS;
                 var renderingGroup = this._renderingGroups[index];
-                if (!renderingGroup && !observable)
+                if (!renderingGroup)
                     continue;
-                var renderingGroupMask = 0;
-                // Fire PRECLEAR stage
-                if (observable && info) {
-                    renderingGroupMask = Math.pow(2, index);
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRECLEAR;
-                    info.renderingGroupId = index;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
+                var renderingGroupMask = Math.pow(2, index);
+                info.renderingGroupId = index;
+                // Before Observable
+                this._scene.onBeforeRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
                 // Clear depth/stencil if needed
                 if (RenderingManager.AUTOCLEAR) {
-                    var autoClear = this._autoClearDepthStencil[index];
+                    var autoClear = this._useSceneAutoClearSetup ?
+                        this._scene.getAutoClearDepthStencilSetup(index) :
+                        this._autoClearDepthStencil[index];
                     if (autoClear && autoClear.autoClear) {
                         this._clearDepthStencilBuffer(autoClear.depth, autoClear.stencil);
                     }
                 }
-                if (observable && info) {
-                    // Fire PREOPAQUE stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PREOPAQUE;
-                    observable.notifyObservers(info, renderingGroupMask);
-                    // Fire PRETRANSPARENT stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRETRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
-                if (renderingGroup) {
-                    for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
-                        var step = _a[_i];
-                        step.action(index);
-                    }
-                    renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
-                    for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
-                        var step = _c[_b];
-                        step.action(index);
-                    }
+                // Render
+                for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
+                    var step = _a[_i];
+                    step.action(index);
                 }
-                // Fire POSTTRANSPARENT stage
-                if (observable && info) {
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_POSTTRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
+                renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
+                for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
+                    var step = _c[_b];
+                    step.action(index);
                 }
+                // After Observable
+                this._scene.onAfterRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
             }
         };
         RenderingManager.prototype.reset = function () {
@@ -22906,6 +22889,7 @@ var BABYLON;
         RenderingManager.prototype.dispose = function () {
             this.freeRenderingGroups();
             this._renderingGroups.length = 0;
+            this._renderingGroupInfo = null;
         };
         /**
          * Clear the info related to rendering groups preventing retention points during dispose.
@@ -22987,6 +22971,15 @@ var BABYLON;
             };
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        RenderingManager.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._autoClearDepthStencil[index];
+        };
+        /**
          * The max id used for rendering groups (not included)
          */
         RenderingManager.MAX_RENDERINGGROUPS = 4;
@@ -23645,26 +23638,6 @@ var BABYLON;
     var RenderingGroupInfo = /** @class */ (function () {
         function RenderingGroupInfo() {
         }
-        /**
-         * Stage corresponding to the very first hook in the renderingGroup phase: before the render buffer may be cleared
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_PRECLEAR = 1;
-        /**
-         * Called before opaque object are rendered.
-         * This stage will be fired only if there's 3D Opaque content to render
-         */
-        RenderingGroupInfo.STAGE_PREOPAQUE = 2;
-        /**
-         * Called after the opaque objects are rendered and before the transparent ones
-         * This stage will be fired only if there's 3D transparent content to render
-         */
-        RenderingGroupInfo.STAGE_PRETRANSPARENT = 3;
-        /**
-         * Called after the transparent object are rendered, last hook of the renderingGroup phase
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_POSTTRANSPARENT = 4;
         return RenderingGroupInfo;
     }());
     BABYLON.RenderingGroupInfo = RenderingGroupInfo;
@@ -23880,11 +23853,17 @@ var BABYLON;
             */
             _this.onAfterStepObservable = new BABYLON.Observable();
             /**
-             * This Observable will be triggered for each stage of each renderingGroup of each rendered camera.
+             * This Observable will be triggered before rendering each renderingGroup of each rendered camera.
+             * The RenderinGroupInfo class contains all the information about the context in which the observable is called
+             * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
+             */
+            _this.onBeforeRenderingGroupObservable = new BABYLON.Observable();
+            /**
+             * This Observable will be triggered after rendering each renderingGroup of each rendered camera.
              * The RenderinGroupInfo class contains all the information about the context in which the observable is called
              * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
              */
-            _this.onRenderingGroupObservable = new BABYLON.Observable();
+            _this.onAfterRenderingGroupObservable = new BABYLON.Observable();
             // Animations
             _this._registeredForLateAnimationBindings = new BABYLON.SmartArrayNoDuplicate(256);
             /**
@@ -28008,6 +27987,8 @@ var BABYLON;
             this.onBeforeAnimationsObservable.clear();
             this.onAfterAnimationsObservable.clear();
             this.onDataLoadedObservable.clear();
+            this.onBeforeRenderingGroupObservable.clear();
+            this.onAfterRenderingGroupObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -28822,6 +28803,15 @@ var BABYLON;
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil, depth, stencil);
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        Scene.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._renderingManager.getAutoClearDepthStencilSetup(index);
+        };
+        /**
          * Will flag all materials as dirty to trigger new shader compilation
          * @param flag defines the flag used to specify which material part must be marked as dirty
          * @param predicate If not null, it will be used to specifiy if a material has to be marked as dirty
@@ -58159,9 +58149,15 @@ var BABYLON;
             return "LinesMesh";
         };
         Object.defineProperty(LinesMesh.prototype, "material", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return this._colorShader;
             },
+            /**
+             * @hidden
+             */
             set: function (value) {
                 // Do nothing
             },
@@ -58169,6 +58165,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(LinesMesh.prototype, "checkCollisions", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return false;
             },
@@ -64948,6 +64947,7 @@ var BABYLON;
             _this._doNotChangeAspectRatio = doNotChangeAspectRatio;
             // Rendering groups
             _this._renderingManager = new BABYLON.RenderingManager(scene);
+            _this._renderingManager._useSceneAutoClearSetup = true;
             if (isMulti) {
                 return _this;
             }
@@ -65448,6 +65448,7 @@ var BABYLON;
          */
         RenderTargetTexture.prototype.setRenderingAutoClearDepthStencil = function (renderingGroupId, autoClearDepthStencil) {
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil);
+            this._renderingManager._useSceneAutoClearSetup = false;
         };
         RenderTargetTexture.prototype.clone = function () {
             var textureSize = this.getSize();

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -3276,10 +3276,12 @@ var BABYLON;
                 quaternion[1] *= -1;
             };
             _GLTFUtilities._NormalizeTangentFromRef = function (tangent) {
-                var length = Math.sqrt(tangent.x * tangent.x + tangent.y * tangent.y + tangent.z + tangent.z);
-                tangent.x /= length;
-                tangent.y /= length;
-                tangent.z /= length;
+                var length = Math.sqrt(tangent.x * tangent.x + tangent.y * tangent.y + tangent.z * tangent.z);
+                if (length > 0) {
+                    tangent.x /= length;
+                    tangent.y /= length;
+                    tangent.z /= length;
+                }
             };
             return _GLTFUtilities;
         }());

dist/preview release/serializers/babylonjs.serializers.js

@@ -3437,10 +3437,12 @@ var BABYLON;
                 quaternion[1] *= -1;
             };
             _GLTFUtilities._NormalizeTangentFromRef = function (tangent) {
-                var length = Math.sqrt(tangent.x * tangent.x + tangent.y * tangent.y + tangent.z + tangent.z);
-                tangent.x /= length;
-                tangent.y /= length;
-                tangent.z /= length;
+                var length = Math.sqrt(tangent.x * tangent.x + tangent.y * tangent.y + tangent.z * tangent.z);
+                if (length > 0) {
+                    tangent.x /= length;
+                    tangent.y /= length;
+                    tangent.z /= length;
+                }
             };
             return _GLTFUtilities;
         }());

dist/preview release/viewer/babylon.viewer.max.js

@@ -22930,12 +22930,16 @@ var BABYLON;
 (function (BABYLON) {
     var RenderingManager = /** @class */ (function () {
         function RenderingManager(scene) {
+            /**
+             * Hidden
+             */
+            this._useSceneAutoClearSetup = false;
             this._renderingGroups = new Array();
             this._autoClearDepthStencil = {};
             this._customOpaqueSortCompareFn = {};
             this._customAlphaTestSortCompareFn = {};
             this._customTransparentSortCompareFn = {};
-            this._renderinGroupInfo = null;
+            this._renderingGroupInfo = new BABYLON.RenderingGroupInfo();
             this._scene = scene;
             for (var i = RenderingManager.MIN_RENDERINGGROUPS; i < RenderingManager.MAX_RENDERINGGROUPS; i++) {
                 this._autoClearDepthStencil[i] = { autoClear: true, depth: true, stencil: true };
@@ -22951,17 +22955,10 @@ var BABYLON;
             this._depthStencilBufferAlreadyCleaned = true;
         };
         RenderingManager.prototype.render = function (customRenderFunction, activeMeshes, renderParticles, renderSprites) {
-            // Check if there's at least on observer on the onRenderingGroupObservable and initialize things to fire it
-            var observable = this._scene.onRenderingGroupObservable.hasObservers() ? this._scene.onRenderingGroupObservable : null;
-            var info = null;
-            if (observable) {
-                if (!this._renderinGroupInfo) {
-                    this._renderinGroupInfo = new BABYLON.RenderingGroupInfo();
-                }
-                info = this._renderinGroupInfo;
-                info.scene = this._scene;
-                info.camera = this._scene.activeCamera;
-            }
+            // Update the observable context (not null as it only goes away on dispose)
+            var info = this._renderingGroupInfo;
+            info.scene = this._scene;
+            info.camera = this._scene.activeCamera;
             // Dispatch sprites
             if (renderSprites) {
                 for (var index = 0; index < this._scene.spriteManagers.length; index++) {
@@ -22973,47 +22970,33 @@ var BABYLON;
             for (var index = RenderingManager.MIN_RENDERINGGROUPS; index < RenderingManager.MAX_RENDERINGGROUPS; index++) {
                 this._depthStencilBufferAlreadyCleaned = index === RenderingManager.MIN_RENDERINGGROUPS;
                 var renderingGroup = this._renderingGroups[index];
-                if (!renderingGroup && !observable)
+                if (!renderingGroup)
                     continue;
-                var renderingGroupMask = 0;
-                // Fire PRECLEAR stage
-                if (observable && info) {
-                    renderingGroupMask = Math.pow(2, index);
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRECLEAR;
-                    info.renderingGroupId = index;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
+                var renderingGroupMask = Math.pow(2, index);
+                info.renderingGroupId = index;
+                // Before Observable
+                this._scene.onBeforeRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
                 // Clear depth/stencil if needed
                 if (RenderingManager.AUTOCLEAR) {
-                    var autoClear = this._autoClearDepthStencil[index];
+                    var autoClear = this._useSceneAutoClearSetup ?
+                        this._scene.getAutoClearDepthStencilSetup(index) :
+                        this._autoClearDepthStencil[index];
                     if (autoClear && autoClear.autoClear) {
                         this._clearDepthStencilBuffer(autoClear.depth, autoClear.stencil);
                     }
                 }
-                if (observable && info) {
-                    // Fire PREOPAQUE stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PREOPAQUE;
-                    observable.notifyObservers(info, renderingGroupMask);
-                    // Fire PRETRANSPARENT stage
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_PRETRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
-                }
-                if (renderingGroup) {
-                    for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
-                        var step = _a[_i];
-                        step.action(index);
-                    }
-                    renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
-                    for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
-                        var step = _c[_b];
-                        step.action(index);
-                    }
+                // Render
+                for (var _i = 0, _a = this._scene._beforeRenderingGroupDrawStage; _i < _a.length; _i++) {
+                    var step = _a[_i];
+                    step.action(index);
                 }
-                // Fire POSTTRANSPARENT stage
-                if (observable && info) {
-                    info.renderStage = BABYLON.RenderingGroupInfo.STAGE_POSTTRANSPARENT;
-                    observable.notifyObservers(info, renderingGroupMask);
+                renderingGroup.render(customRenderFunction, renderSprites, renderParticles, activeMeshes);
+                for (var _b = 0, _c = this._scene._afterRenderingGroupDrawStage; _b < _c.length; _b++) {
+                    var step = _c[_b];
+                    step.action(index);
                 }
+                // After Observable
+                this._scene.onAfterRenderingGroupObservable.notifyObservers(info, renderingGroupMask);
             }
         };
         RenderingManager.prototype.reset = function () {
@@ -23027,6 +23010,7 @@ var BABYLON;
         RenderingManager.prototype.dispose = function () {
             this.freeRenderingGroups();
             this._renderingGroups.length = 0;
+            this._renderingGroupInfo = null;
         };
         /**
          * Clear the info related to rendering groups preventing retention points during dispose.
@@ -23108,6 +23092,15 @@ var BABYLON;
             };
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        RenderingManager.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._autoClearDepthStencil[index];
+        };
+        /**
          * The max id used for rendering groups (not included)
          */
         RenderingManager.MAX_RENDERINGGROUPS = 4;
@@ -23766,26 +23759,6 @@ var BABYLON;
     var RenderingGroupInfo = /** @class */ (function () {
         function RenderingGroupInfo() {
         }
-        /**
-         * Stage corresponding to the very first hook in the renderingGroup phase: before the render buffer may be cleared
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_PRECLEAR = 1;
-        /**
-         * Called before opaque object are rendered.
-         * This stage will be fired only if there's 3D Opaque content to render
-         */
-        RenderingGroupInfo.STAGE_PREOPAQUE = 2;
-        /**
-         * Called after the opaque objects are rendered and before the transparent ones
-         * This stage will be fired only if there's 3D transparent content to render
-         */
-        RenderingGroupInfo.STAGE_PRETRANSPARENT = 3;
-        /**
-         * Called after the transparent object are rendered, last hook of the renderingGroup phase
-         * This stage will be fired no matter what
-         */
-        RenderingGroupInfo.STAGE_POSTTRANSPARENT = 4;
         return RenderingGroupInfo;
     }());
     BABYLON.RenderingGroupInfo = RenderingGroupInfo;
@@ -24001,11 +23974,17 @@ var BABYLON;
             */
             _this.onAfterStepObservable = new BABYLON.Observable();
             /**
-             * This Observable will be triggered for each stage of each renderingGroup of each rendered camera.
+             * This Observable will be triggered before rendering each renderingGroup of each rendered camera.
+             * The RenderinGroupInfo class contains all the information about the context in which the observable is called
+             * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
+             */
+            _this.onBeforeRenderingGroupObservable = new BABYLON.Observable();
+            /**
+             * This Observable will be triggered after rendering each renderingGroup of each rendered camera.
              * The RenderinGroupInfo class contains all the information about the context in which the observable is called
              * If you wish to register an Observer only for a given set of renderingGroup, use the mask with a combination of the renderingGroup index elevated to the power of two (1 for renderingGroup 0, 2 for renderingrOup1, 4 for 2 and 8 for 3)
              */
-            _this.onRenderingGroupObservable = new BABYLON.Observable();
+            _this.onAfterRenderingGroupObservable = new BABYLON.Observable();
             // Animations
             _this._registeredForLateAnimationBindings = new BABYLON.SmartArrayNoDuplicate(256);
             /**
@@ -28129,6 +28108,8 @@ var BABYLON;
             this.onBeforeAnimationsObservable.clear();
             this.onAfterAnimationsObservable.clear();
             this.onDataLoadedObservable.clear();
+            this.onBeforeRenderingGroupObservable.clear();
+            this.onAfterRenderingGroupObservable.clear();
             this.detachControl();
             // Release sounds & sounds tracks
             if (BABYLON.AudioEngine) {
@@ -28943,6 +28924,15 @@ var BABYLON;
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil, depth, stencil);
         };
         /**
+         * Gets the current auto clear configuration for one rendering group of the rendering
+         * manager.
+         * @param index the rendering group index to get the information for
+         * @returns The auto clear setup for the requested rendering group
+         */
+        Scene.prototype.getAutoClearDepthStencilSetup = function (index) {
+            return this._renderingManager.getAutoClearDepthStencilSetup(index);
+        };
+        /**
          * Will flag all materials as dirty to trigger new shader compilation
          * @param flag defines the flag used to specify which material part must be marked as dirty
          * @param predicate If not null, it will be used to specifiy if a material has to be marked as dirty
@@ -58280,9 +58270,15 @@ var BABYLON;
             return "LinesMesh";
         };
         Object.defineProperty(LinesMesh.prototype, "material", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return this._colorShader;
             },
+            /**
+             * @hidden
+             */
             set: function (value) {
                 // Do nothing
             },
@@ -58290,6 +58286,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(LinesMesh.prototype, "checkCollisions", {
+            /**
+             * @hidden
+             */
             get: function () {
                 return false;
             },
@@ -65069,6 +65068,7 @@ var BABYLON;
             _this._doNotChangeAspectRatio = doNotChangeAspectRatio;
             // Rendering groups
             _this._renderingManager = new BABYLON.RenderingManager(scene);
+            _this._renderingManager._useSceneAutoClearSetup = true;
             if (isMulti) {
                 return _this;
             }
@@ -65569,6 +65569,7 @@ var BABYLON;
          */
         RenderTargetTexture.prototype.setRenderingAutoClearDepthStencil = function (renderingGroupId, autoClearDepthStencil) {
             this._renderingManager.setRenderingAutoClearDepthStencil(renderingGroupId, autoClearDepthStencil);
+            this._renderingManager._useSceneAutoClearSetup = false;
         };
         RenderTargetTexture.prototype.clone = function () {
             var textureSize = this.getSize();