Merge remote-tracking branch 'upstream/master'

Playground/babylon.d.txt

@@ -49136,7 +49136,7 @@ declare module BABYLON {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -49597,13 +49597,17 @@ declare module BABYLON {
         protected _cameras: Camera[];
         /** @hidden */
name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -49693,7 +49697,7 @@ declare module BABYLON {
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -49713,6 +49717,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -49792,6 +49800,11 @@ declare module BABYLON {
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;

Tools/Config/config.json

@@ -30,7 +30,10 @@
             "../../dist/preview release/loaders/babylonjs.loaders.d.ts",
             "../../dist/preview release/serializers/babylonjs.serializers.d.ts"
         ],
-        "typedocEntryPoint": ["\"babylon.d\"", "BABYLON"],
+        "typedocEntryPoint": [
+            "\"babylon.d\"",
+            "BABYLON"
+        ],
         "typedocJSON": "../../.temp/babylon.typedoc.json",
         "typedocValidationBaseline": "../../dist/preview release/typedocValidationBaseline.json"
     },
@@ -534,7 +537,8 @@
                         "@babylonjs/loaders": "BABYLON",
                         "@babylonjs/serializers": "BABYLON",
                         "@babylonjs/gui": "BABYLON.GUI",
-                        "@fortawesome": false
+                        "@fortawesome": false,
+                        "react-contextmenu": false
                     }
                 }
             },

dist/preview release/babylon.d.ts

@@ -49810,7 +49810,7 @@ declare module BABYLON {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -50276,13 +50276,17 @@ declare module BABYLON {
         /** @hidden */
         _name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -50383,7 +50387,7 @@ declare module BABYLON {
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -50403,6 +50407,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -50482,6 +50490,11 @@ declare module BABYLON {
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;

dist/preview release/babylon.max.js

@@ -46247,9 +46247,9 @@ if (typeof globalObject !== "undefined") {
     }
     for (var key in _index__WEBPACK_IMPORTED_MODULE_0__) {
         // Prevent Reassignment.
-        if (keys.indexOf(key) > -1) {
-            continue;
-        }
+        // if (keys.indexOf(key) > -1) {
+        // continue;
+        // }
         BABYLON[key] = _index__WEBPACK_IMPORTED_MODULE_0__[key];
     }
 }
@@ -58905,10 +58905,15 @@ var CubeTexture = /** @class */ (function (_super) {
     tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
         Object(_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])("rotationY")
     ], CubeTexture.prototype, "rotationY", null);
+    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
+        Object(_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])("textureMatrix")
+    ], CubeTexture.prototype, "_textureMatrix", void 0);
     return CubeTexture;
 }(_Materials_Textures_baseTexture__WEBPACK_IMPORTED_MODULE_4__["BaseTexture"]));
 
 _Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_5__["Texture"]._CubeTextureParser = CubeTexture.Parse;
+// Some exporters relies on Tools.Instantiate
+_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__["_TypeStore"].RegisteredTypes["BABYLON.CubeTexture"] = CubeTexture;
 
 
 /***/ }),
@@ -117911,7 +117916,7 @@ var DefaultRenderingPipeline = /** @class */ (function (_super) {
          */
         _this.GrainPostProcessId = "GrainPostProcessEffect";
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         _this._glowLayer = null;
         /**
@@ -117989,6 +117994,16 @@ var DefaultRenderingPipeline = /** @class */ (function (_super) {
         _this._buildPipeline();
         return _this;
     }
+    Object.defineProperty(DefaultRenderingPipeline.prototype, "scene", {
+        /**
+         * Gets active scene
+         */
+        get: function () {
+            return this._scene;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DefaultRenderingPipeline.prototype, "sharpenEnabled", {
         get: function () {
             return this._sharpenEnabled;
@@ -118196,7 +118211,7 @@ var DefaultRenderingPipeline = /** @class */ (function (_super) {
     });
     Object.defineProperty(DefaultRenderingPipeline.prototype, "glowLayerEnabled", {
         get: function () {
-            return this._glowLayer == null;
+            return this._glowLayer != null;
         },
         /**
          * If glow layer is enabled. (Adds a glow effect to emmissive materials)
@@ -118248,6 +118263,13 @@ var DefaultRenderingPipeline = /** @class */ (function (_super) {
         configurable: true
     });
     /**
+     * Get the class name
+     * @returns "DefaultRenderingPipeline"
+     */
+    DefaultRenderingPipeline.prototype.getClassName = function () {
+        return "DefaultRenderingPipeline";
+    };
+    /**
      * Force the compilation of the entire pipeline.
      */
     DefaultRenderingPipeline.prototype.prepare = function () {
@@ -120892,8 +120914,18 @@ var PostProcessRenderPipeline = /** @class */ (function () {
         this._renderEffectsForIsolatedPass = new Array();
         this._cameras = [];
     }
+    Object.defineProperty(PostProcessRenderPipeline.prototype, "name", {
+        /**
+         * Gets pipeline name
+         */
+        get: function () {
+            return this._name;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
-     * "PostProcessRenderPipeline"
+     * Gets the class name
      * @returns "PostProcessRenderPipeline"
      */
     PostProcessRenderPipeline.prototype.getClassName = function () {
@@ -122313,7 +122345,7 @@ var DepthOfFieldEffect = /** @class */ (function (_super) {
             return this._circleOfConfusion.fStop;
         },
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         set: function (value) {
             this._circleOfConfusion.fStop = value;

dist/preview release/babylon.module.d.ts

@@ -52081,7 +52081,7 @@ declare module "babylonjs/PostProcesses/depthOfFieldEffect" {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -52609,13 +52609,17 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
         /** @hidden */
         _name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -52728,7 +52732,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -52748,6 +52752,10 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -52827,6 +52835,11 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;
@@ -106379,7 +106392,7 @@ declare module BABYLON {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -106845,13 +106858,17 @@ declare module BABYLON {
         /** @hidden */
         _name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -106952,7 +106969,7 @@ declare module BABYLON {
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -106972,6 +106989,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -107051,6 +107072,11 @@ declare module BABYLON {
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;

dist/preview release/inspector/babylon.inspector.d.ts

@@ -9,7 +9,7 @@ declare module INSPECTOR {
 }
 declare module INSPECTOR {
     export class GlobalState {
-        onSelectionChangedObservable: BABYLON.Observable<string>;
+        onSelectionChangedObservable: BABYLON.Observable<any>;
         onPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
         onInspectorClosedObservable: BABYLON.Observable<BABYLON.Scene>;
         onTabChangedObservable: BABYLON.Observable<number>;
@@ -625,6 +625,9 @@ declare module INSPECTOR {
         displayAxis: boolean;
     }> {
         constructor(props: IAxisViewerComponentProps);
+        shouldComponentUpdate(nextProps: IAxisViewerComponentProps, nextState: {
+            displayAxis: boolean;
+        }): boolean;
         displayAxes(): void;
         render(): JSX.Element;
     }
@@ -961,6 +964,64 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface ICommonRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ICommonRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IVector2LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onChange?: (newvalue: BABYLON.Vector2) => void;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector2;
+    }> {
+        private _localChange;
+        constructor(props: IVector2LineComponentProps);
+        shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector2;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IDefaultRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.DefaultRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     export class PropertyGridTabComponent extends PaneComponent {
         private _timerIntervalId;
         private _lockObject;
@@ -1229,6 +1290,17 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IRenderPipelineItemComponenttProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        onClick: () => void;
+    }
+    export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
+        constructor(props: IRenderPipelineItemComponenttProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface ITreeItemSpecializedComponentProps {
         label: string;
         entity?: any;
@@ -1288,17 +1360,23 @@ declare module INSPECTOR {
         entity?: any;
         selectedEntity: any;
         extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        contextMenuItems?: {
+            label: string;
+            action: () => void;
+        }[];
     }
     export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
         isExpanded: boolean;
         mustExpand: boolean;
     }> {
+        static _ContextMenuUniqueIdGenerator: number;
         constructor(props: ITreeItemComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
             isExpanded: boolean;
         }): boolean;
         expandAll(expand: boolean): void;
+        renderContextMenu(): JSX.Element | null;
         render(): JSX.Element;
     }
 }

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -18,7 +18,7 @@ declare module "babylonjs-inspector/components/globalState" {
     import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
     import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
     export class GlobalState {
-        onSelectionChangedObservable: Observable<string>;
+        onSelectionChangedObservable: Observable<any>;
         onPropertyChangedObservable: Observable<PropertyChangedEvent>;
         onInspectorClosedObservable: Observable<Scene>;
         onTabChangedObservable: Observable<number>;
@@ -760,6 +760,9 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mes
         displayAxis: boolean;
     }> {
         constructor(props: IAxisViewerComponentProps);
+        shouldComponentUpdate(nextProps: IAxisViewerComponentProps, nextState: {
+            displayAxis: boolean;
+        }): boolean;
         displayAxes(): void;
         render(): JSX.Element;
     }
@@ -1221,6 +1224,83 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/pos
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/postProcesses/commonRenderingPipelinePropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+    interface ICommonRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ICommonRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/postProcesses/renderingPipelinePropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PostProcessRenderPipeline } from "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    interface IRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-inspector/components/actionTabs/lines/vector2LineComponent" {
+    import * as React from "react";
+    import { Vector2 } from "babylonjs/Maths/math";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    interface IVector2LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onChange?: (newvalue: Vector2) => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+        isExpanded: boolean;
+        value: Vector2;
+    }> {
+        private _localChange;
+        constructor(props: IVector2LineComponentProps);
+        shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: Vector2;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Vector2): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/postProcesses/defaultRenderingPipelinePropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { DefaultRenderingPipeline } from "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    interface IDefaultRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: DefaultRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGridTabComponent" {
     import { PaneComponent, IPaneComponentProps } from "babylonjs-inspector/components/actionTabs/paneComponent";
     export class PropertyGridTabComponent extends PaneComponent {
@@ -1536,6 +1616,20 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/postProces
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/sceneExplorer/entities/renderingPipelineTreeItemComponent" {
+    import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
+    import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+    import * as React from 'react';
+    interface IRenderPipelineItemComponenttProps {
+        renderPipeline: PostProcessRenderPipeline;
+        extensibilityGroups?: IExplorerExtensibilityGroup[];
+        onClick: () => void;
+    }
+    export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
+        constructor(props: IRenderPipelineItemComponenttProps);
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-inspector/components/sceneExplorer/treeItemSpecializedComponent" {
     import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
     import * as React from "react";
@@ -1607,17 +1701,23 @@ declare module "babylonjs-inspector/components/sceneExplorer/treeItemComponent"
         entity?: any;
         selectedEntity: any;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
+        contextMenuItems?: {
+            label: string;
+            action: () => void;
+        }[];
     }
     export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
         isExpanded: boolean;
         mustExpand: boolean;
     }> {
+        static _ContextMenuUniqueIdGenerator: number;
         constructor(props: ITreeItemComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
             isExpanded: boolean;
         }): boolean;
         expandAll(expand: boolean): void;
+        renderContextMenu(): JSX.Element | null;
         render(): JSX.Element;
     }
 }
@@ -1814,7 +1914,7 @@ declare module INSPECTOR {
 }
 declare module INSPECTOR {
     export class GlobalState {
-        onSelectionChangedObservable: BABYLON.Observable<string>;
+        onSelectionChangedObservable: BABYLON.Observable<any>;
         onPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
         onInspectorClosedObservable: BABYLON.Observable<BABYLON.Scene>;
         onTabChangedObservable: BABYLON.Observable<number>;
@@ -2430,6 +2530,9 @@ declare module INSPECTOR {
         displayAxis: boolean;
     }> {
         constructor(props: IAxisViewerComponentProps);
+        shouldComponentUpdate(nextProps: IAxisViewerComponentProps, nextState: {
+            displayAxis: boolean;
+        }): boolean;
         displayAxes(): void;
         render(): JSX.Element;
     }
@@ -2766,6 +2869,64 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface ICommonRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ICommonRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IVector2LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onChange?: (newvalue: BABYLON.Vector2) => void;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector2;
+    }> {
+        private _localChange;
+        constructor(props: IVector2LineComponentProps);
+        shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector2;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IDefaultRenderingPipelinePropertyGridComponentProps {
+        renderPipeline: BABYLON.DefaultRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     export class PropertyGridTabComponent extends PaneComponent {
         private _timerIntervalId;
         private _lockObject;
@@ -3034,6 +3195,17 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IRenderPipelineItemComponenttProps {
+        renderPipeline: BABYLON.PostProcessRenderPipeline;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        onClick: () => void;
+    }
+    export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
+        constructor(props: IRenderPipelineItemComponenttProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface ITreeItemSpecializedComponentProps {
         label: string;
         entity?: any;
@@ -3093,17 +3265,23 @@ declare module INSPECTOR {
         entity?: any;
         selectedEntity: any;
         extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        contextMenuItems?: {
+            label: string;
+            action: () => void;
+        }[];
     }
     export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
         isExpanded: boolean;
         mustExpand: boolean;
     }> {
+        static _ContextMenuUniqueIdGenerator: number;
         constructor(props: ITreeItemComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
             isExpanded: boolean;
         }): boolean;
         expandAll(expand: boolean): void;
+        renderContextMenu(): JSX.Element | null;
         render(): JSX.Element;
     }
 }

dist/preview release/viewer/babylon.module.d.ts

@@ -52081,7 +52081,7 @@ declare module "babylonjs/PostProcesses/depthOfFieldEffect" {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -52609,13 +52609,17 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
         /** @hidden */
         _name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -52728,7 +52732,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -52748,6 +52752,10 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -52827,6 +52835,11 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;
@@ -106379,7 +106392,7 @@ declare module BABYLON {
          */
         focalLength: number;
         /**
-         * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+         * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
          */
         fStop: number;
         /**
@@ -106845,13 +106858,17 @@ declare module BABYLON {
         /** @hidden */
         _name: string;
         /**
+         * Gets pipeline name
+         */
+        readonly name: string;
+        /**
          * Initializes a PostProcessRenderPipeline
          * @param engine engine to add the pipeline to
          * @param name name of the pipeline
          */
         constructor(engine: Engine, name: string);
         /**
-         * "PostProcessRenderPipeline"
+         * Gets the class name
          * @returns "PostProcessRenderPipeline"
          */
         getClassName(): string;
@@ -106952,7 +106969,7 @@ declare module BABYLON {
         grain: GrainPostProcess;
         private _grainEffect;
         /**
-         * Glow post process which adds a glow to emmisive areas of the image
+         * Glow post process which adds a glow to emissive areas of the image
          */
         private _glowLayer;
         /**
@@ -106972,6 +106989,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * Gets active scene
+         */
+        readonly scene: Scene;
+        /**
          * Enable or disable the sharpen process from the pipeline
          */
         sharpenEnabled: boolean;
@@ -107051,6 +107072,11 @@ declare module BABYLON {
          */
         constructor(name?: string, hdr?: boolean, scene?: Scene, cameras?: Camera[], automaticBuild?: boolean);
         /**
+         * Get the class name
+         * @returns "DefaultRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
          * Force the compilation of the entire pipeline.
          */
         prepare(): void;

dist/preview release/viewer/babylon.viewer.d.ts

@@ -926,7 +926,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,6 +1558,20 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
+    /**
+        * A custom upgrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedUpgrade(sceneManager: SceneManager): boolean;
+    /**
+        * A custom degrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedDegrade(sceneManager: SceneManager): boolean;
+}
+declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {
             /**
                 * Environment map texture path in relative to the asset folder.

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -987,13 +987,14 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
+    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1664,6 +1665,22 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
+declare module 'babylonjs-viewer/optimizer/custom/extended' {
+    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
+    /**
+        * A custom upgrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedUpgrade(sceneManager: SceneManager): boolean;
+    /**
+        * A custom degrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedDegrade(sceneManager: SceneManager): boolean;
+}
+
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

inspector/src/components/actionTabs/lines/vector2LineComponent.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { Vector2 } from "babylonjs/Maths/math";
+import { Observable } from "babylonjs/Misc/observable";
+
+import { NumericInputComponent } from "./numericInputComponent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { PropertyChangedEvent } from "../../propertyChangedEvent";
+
+interface IVector2LineComponentProps {
+    label: string,
+    target: any,
+    propertyName: string,
+    onChange?: (newvalue: Vector2) => void,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, { isExpanded: boolean, value: Vector2 }> {
+    private _localChange = false;
+
+    constructor(props: IVector2LineComponentProps) {
+        super(props);
+
+        this.state = { isExpanded: false, value: this.props.target[this.props.propertyName].clone() }
+    }
+
+    shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: { isExpanded: boolean, value: Vector2 }) {
+        const nextPropsValue = nextProps.target[nextProps.propertyName];
+
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+
+    switchExpandState() {
+        this._localChange = true;
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+
+    raiseOnPropertyChanged(previousValue: Vector2) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue
+        });
+    }
+
+    updateStateX(value: number) {
+        this._localChange = true;
+
+        const store = this.state.value.clone();
+        this.props.target[this.props.propertyName].x = value;
+        this.state.value.x = value;
+        this.setState({ value: this.state.value });
+
+        this.raiseOnPropertyChanged(store);
+    }
+
+    updateStateY(value: number) {
+        this._localChange = true;
+
+        const store = this.state.value.clone();
+        this.props.target[this.props.propertyName].y = value;
+        this.state.value.y = value;
+        this.setState({ value: this.state.value });
+
+        this.raiseOnPropertyChanged(store);
+    }
+
+    render() {
+        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
+
+        return (
+            <div className="vector3Line">
+                <div className="firstLine">
+                    <div className="label">
+                        {this.props.label}
+                    </div>
+                    <div className="vector">
+                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}`}
+
+                    </div>
+                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
+                        {chevron}
+                    </div>
+                </div>
+                {
+                    this.state.isExpanded &&
+                    <div className="secondLine">
+                        <NumericInputComponent label="x" value={this.state.value.x} onChange={value => this.updateStateX(value)} />
+                        <NumericInputComponent label="y" value={this.state.value.y} onChange={value => this.updateStateY(value)} />
+                    </div>
+                }
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGridTabComponent.tsx

@@ -67,6 +67,10 @@ import { PBRSpecularGlossinessMaterialPropertyGridComponent } from "./propertyGr
 import { StackPanelPropertyGridComponent } from "./propertyGrids/gui/stackPanelPropertyGridComponent";
 import { PostProcess } from 'babylonjs/PostProcesses/postProcess';
 import { PostProcessPropertyGridComponent } from './propertyGrids/postProcesses/postProcessPropertyGridComponent';
+import { RenderingPipelinePropertyGridComponent } from './propertyGrids/postProcesses/renderingPipelinePropertyGridComponent';
+import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+import { DefaultRenderingPipelinePropertyGridComponent } from './propertyGrids/postProcesses/defaultRenderingPipelinePropertyGridComponent';
+import { DefaultRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -212,6 +216,20 @@ export class PropertyGridTabComponent extends PaneComponent {
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
+            if (className.indexOf("DefaultRenderingPipeline") !== -1) {
+                const renderPipeline = entity as DefaultRenderingPipeline;
+                return (<DefaultRenderingPipelinePropertyGridComponent renderPipeline={renderPipeline}
+                    lockObject={this._lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }
+
+            if (className.indexOf("RenderingPipeline") !== -1) {
+                const renderPipeline = entity as PostProcessRenderPipeline;
+                return (<RenderingPipelinePropertyGridComponent renderPipeline={renderPipeline}
+                    lockObject={this._lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }
+
             if (className.indexOf("PostProcess") !== -1) {
                 const postProcess = entity as PostProcess;
                 return (<PostProcessPropertyGridComponent postProcess={postProcess}

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/axesViewerComponent.tsx

@@ -5,6 +5,7 @@ import { TransformNode } from "babylonjs/Meshes/transformNode";
 import { AxesViewer } from "babylonjs/Debug/axesViewer";
 
 import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
+import { UtilityLayerRenderer } from 'babylonjs/Rendering/utilityLayerRenderer';
 
 interface IAxisViewerComponentProps {
     node: TransformNode;
@@ -22,9 +23,17 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
         this.state = { displayAxis: (node.reservedDataStore && node.reservedDataStore.axisViewer) ? true : false };
     }
 
+    shouldComponentUpdate(nextProps: IAxisViewerComponentProps, nextState: { displayAxis: boolean }) {
+        if (nextProps.node !== this.props.node) {
+            nextState.displayAxis = (nextProps.node.reservedDataStore && nextProps.node.reservedDataStore.axisViewer) ? true : false;
+        }
+
+        return true;
+    }
+
     displayAxes() {
         const node = this.props.node;
-        const scene = node.getScene();
+        const scene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
 
         if (node.reservedDataStore.axisViewer) {
             node.reservedDataStore.axisViewer.dispose();
@@ -49,13 +58,12 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
         viewer.zAxis.reservedDataStore = { hidden: true };
 
         node.reservedDataStore.onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+            let cameraMatrix = scene.activeCamera!.getWorldMatrix();
             let matrix = node.getWorldMatrix();
             let extend = Tmp.Vector3[0];
-            const worldExtend = scene.getWorldExtends();
-            worldExtend.max.subtractToRef(worldExtend.min, extend);
-            extend.scaleInPlace(0.5 * 0.5);
+            Vector3.TransformCoordinatesFromFloatsToRef(0, 0, 1, cameraMatrix, extend);
 
-            viewer.scaleLines = Math.max(extend.x, extend.y, extend.z) * 2;
+            viewer.scaleLines = extend.length() / 10;
             viewer.update(node.getAbsolutePosition(), Vector3.TransformNormal(x, matrix), Vector3.TransformNormal(y, matrix), Vector3.TransformNormal(z, matrix));
         });
 

inspector/src/components/actionTabs/tabs/propertyGrids/postProcesses/commonPostProcessPropertyGridComponent.tsx

@@ -39,14 +39,6 @@ export class CommonPostProcessPropertyGridComponent extends React.Component<ICom
                     <CheckBoxLineComponent label="Pixel perfect" target={postProcess} propertyName="enablePixelPerfectMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Fullscreen viewport" target={postProcess} propertyName="forceFullscreenViewport" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Samples" target={postProcess} propertyName="samples" minimum={1} maximum={8} step={1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    {/* <CheckBoxLineComponent label="Backface culling" target={material} propertyName="backFaceCulling" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <OptionsLineComponent label="Orientation" options={orientationOptions} target={material} propertyName="sideOrientation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
-x                    <CheckBoxLineComponent label="Disable depth write" target={material} propertyName="disableDepthWrite" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Need depth pre-pass" target={material} propertyName="needDepthPrePass" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Wireframe" target={material} propertyName="wireframe" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Point cloud" target={material} propertyName="pointsCloud" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <SliderLineComponent label="Point size" target={material} propertyName="pointSize" minimum={0} maximum={100} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <SliderLineComponent label="Z-offset" target={material} propertyName="zOffset" minimum={-10} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} /> */}
                 </LineContainerComponent>
             </div>
         );

inspector/src/components/actionTabs/tabs/propertyGrids/postProcesses/commonRenderingPipelinePropertyGridComponent.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { TextLineComponent } from "../../../lines/textLineComponent";
+import { LockObject } from "../lockObject";
+import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+
+interface ICommonRenderingPipelinePropertyGridComponentProps {
+    renderPipeline: PostProcessRenderPipeline;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
+    constructor(props: ICommonRenderingPipelinePropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const renderPipeline = this.props.renderPipeline;
+
+        return (
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextLineComponent label="Class" value={renderPipeline.getClassName()} />
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/postProcesses/defaultRenderingPipelinePropertyGridComponent.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+import { DefaultRenderingPipeline } from "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LockObject } from "../lockObject";
+import { CommonRenderingPipelinePropertyGridComponent } from './commonRenderingPipelinePropertyGridComponent';
+import { SliderLineComponent } from '../../../lines/sliderLineComponent';
+import { LineContainerComponent } from '../../../lineContainerComponent';
+import { CheckBoxLineComponent } from '../../../lines/checkBoxLineComponent';
+import { Vector2LineComponent } from '../../../lines/vector2LineComponent';
+import { OptionsLineComponent } from '../../../lines/optionsLineComponent';
+import { ImageProcessingConfiguration } from 'babylonjs/Materials/imageProcessingConfiguration';
+import { Color3LineComponent } from '../../../lines/color3LineComponent';
+
+interface IDefaultRenderingPipelinePropertyGridComponentProps {
+    renderPipeline: DefaultRenderingPipeline,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
+    constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const renderPipeline = this.props.renderPipeline;
+
+        const camera = renderPipeline.scene.activeCamera!;
+
+        var toneMappingOptions = [
+            { label: "Standard", value: ImageProcessingConfiguration.TONEMAPPING_STANDARD },
+            { label: "ACES", value: ImageProcessingConfiguration.TONEMAPPING_ACES }
+        ];
+
+        var vignetteModeOptions = [
+            { label: "Multiply", value: ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
+            { label: "Opaque", value: ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE }
+        ];
+
+        return (
+            <div className="pane">
+                <CommonRenderingPipelinePropertyGridComponent lockObject={this.props.lockObject} renderPipeline={renderPipeline} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                <LineContainerComponent title="BLOOM">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="bloomEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Threshold" minimum={0} maximum={1} step={0.05} target={renderPipeline} propertyName="bloomThreshold" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Weight" minimum={0} maximum={1} step={0.05} target={renderPipeline} propertyName="bloomWeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Kernel" minimum={0} maximum={128} step={1} target={renderPipeline} propertyName="bloomKernel" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Scale" minimum={0} maximum={1} step={0.25} target={renderPipeline} propertyName="bloomScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="CHROMATIC ABERRATION">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="chromaticAberrationEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="aberrationAmount" minimum={0} maximum={128} step={0.1} target={renderPipeline.chromaticAberration} propertyName="aberrationAmount" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Radial intensity" minimum={0} maximum={1} step={0.01} target={renderPipeline.chromaticAberration} propertyName="radialIntensity" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <Vector2LineComponent label="Center" target={renderPipeline.chromaticAberration} propertyName="centerPosition" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <Vector2LineComponent label="Direction" target={renderPipeline.chromaticAberration} propertyName="direction" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="DEPTH OF FIELD">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="depthOfFieldEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Focal length" minimum={0} maximum={camera.maxZ} step={0.1} target={renderPipeline.depthOfField} propertyName="focalLength" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="fStop" minimum={0} maximum={32} step={0.1} target={renderPipeline.depthOfField} propertyName="fStop" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Distance" minimum={0} maximum={camera.maxZ} step={0.1} target={renderPipeline.depthOfField} propertyName="focusDistance" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Lens size" minimum={0} maximum={1000} step={1} target={renderPipeline.depthOfField} propertyName="lensSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="FXAA">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="fxaaEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="GLOW LAYER">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="glowLayerEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="GRAIN">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="grainEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Animated" target={renderPipeline.grain} propertyName="animated" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Intensity" minimum={0} maximum={50} step={0.1} target={renderPipeline.grain} propertyName="intensity" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent title="IMAGE PROCESSING">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="imageProcessingEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    {
+                        renderPipeline.imageProcessing &&
+                        <div>
+                            <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Contrast" target={renderPipeline.imageProcessing} propertyName="contrast" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Exposure" target={renderPipeline.imageProcessing} propertyName="exposure" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <CheckBoxLineComponent label="Tone mapping" target={renderPipeline.imageProcessing} propertyName="toneMappingEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <OptionsLineComponent label="Tone mapping type" options={toneMappingOptions} target={renderPipeline.imageProcessing} propertyName="toneMappingType" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
+                            <CheckBoxLineComponent label="Vignette" target={renderPipeline.imageProcessing} propertyName="vignetteEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Vignette weight" target={renderPipeline.imageProcessing} propertyName="vignetteWeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette stretch" target={renderPipeline.imageProcessing} propertyName="vignetteStretch" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={Math.PI} step={0.1} label="Vignette FOV" target={renderPipeline.imageProcessing} propertyName="vignetteCameraFov" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette center X" target={renderPipeline.imageProcessing} propertyName="vignetteCentreX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette center Y" target={renderPipeline.imageProcessing} propertyName="vignetteCentreY" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <Color3LineComponent label="Vignette color" target={renderPipeline.imageProcessing} propertyName="vignetteColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <OptionsLineComponent label="Vignette blend mode" options={vignetteModeOptions} target={renderPipeline.imageProcessing} propertyName="vignetteBlendMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
+                        </div>
+                    }
+                </LineContainerComponent>
+                <LineContainerComponent title="SHARPEN">
+                    <CheckBoxLineComponent label="Enabled" target={renderPipeline} propertyName="sharpenEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Color amount" minimum={0} maximum={1} step={0.05} target={renderPipeline.sharpen} propertyName="colorAmount" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Edge amount" minimum={0} maximum={5} step={0.05} target={renderPipeline.sharpen} propertyName="edgeAmount" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/postProcesses/renderingPipelinePropertyGridComponent.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+import { PostProcessRenderPipeline } from "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LockObject } from "../lockObject";
+import { CommonRenderingPipelinePropertyGridComponent } from './commonRenderingPipelinePropertyGridComponent';
+
+interface IRenderingPipelinePropertyGridComponentProps {
+    renderPipeline: PostProcessRenderPipeline,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
+    constructor(props: IRenderingPipelinePropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const renderPipeline = this.props.renderPipeline;
+
+        return (
+            <div className="pane">
+                <CommonRenderingPipelinePropertyGridComponent lockObject={this.props.lockObject} renderPipeline={renderPipeline} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/scenePropertyGridComponent.tsx

@@ -121,6 +121,11 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
             { label: "ACES", value: ImageProcessingConfiguration.TONEMAPPING_ACES }
         ];
 
+        var vignetteModeOptions = [
+            { label: "Multiply", value: ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
+            { label: "Opaque", value: ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE }
+        ];
+
         return (
             <div className="pane">
                 <LineContainerComponent title="RENDERING MODE">
@@ -145,6 +150,14 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
                     <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Exposure" target={imageProcessing} propertyName="exposure" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Tone mapping" target={imageProcessing} propertyName="toneMappingEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <OptionsLineComponent label="Tone mapping type" options={toneMappingOptions} target={imageProcessing} propertyName="toneMappingType" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
+                    <CheckBoxLineComponent label="Vignette" target={imageProcessing} propertyName="vignetteEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Vignette weight" target={imageProcessing} propertyName="vignetteWeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette stretch" target={imageProcessing} propertyName="vignetteStretch" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent minimum={0} maximum={Math.PI} step={0.1} label="Vignette FOV" target={imageProcessing} propertyName="vignetteCameraFov" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette center X" target={imageProcessing} propertyName="vignetteCentreX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent minimum={0} maximum={1} step={0.1} label="Vignette center Y" target={imageProcessing} propertyName="vignetteCentreY" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <Color3LineComponent label="Vignette color" target={imageProcessing} propertyName="vignetteColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <OptionsLineComponent label="Vignette blend mode" options={vignetteModeOptions} target={imageProcessing} propertyName="vignetteBlendMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                 </LineContainerComponent>
                 {
                     dummy !== null &&

inspector/src/components/globalState.ts

@@ -10,7 +10,7 @@ import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 
 export class GlobalState {
-    public onSelectionChangedObservable: Observable<string>;
+    public onSelectionChangedObservable: Observable<any>;
     public onPropertyChangedObservable: Observable<PropertyChangedEvent>;
     public onInspectorClosedObservable = new Observable<Scene>();
     public onTabChangedObservable = new Observable<number>();

inspector/src/components/sceneExplorer/entities/renderingPipelineTreeItemComponent.tsx

@@ -0,0 +1,30 @@
+import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
+import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+
+import { faMagic } from '@fortawesome/free-solid-svg-icons';
+import { TreeItemLabelComponent } from "../treeItemLabelComponent";
+import { ExtensionsComponent } from "../extensionsComponent";
+import * as React from 'react';
+
+interface IRenderPipelineItemComponenttProps {
+    renderPipeline: PostProcessRenderPipeline,
+    extensibilityGroups?: IExplorerExtensibilityGroup[],
+    onClick: () => void
+}
+
+export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
+    constructor(props: IRenderPipelineItemComponenttProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="postProcessTools">
+                <TreeItemLabelComponent label={this.props.renderPipeline.name} onClick={() => this.props.onClick()} icon={faMagic} color="orangered" />
+                {
+                    <ExtensionsComponent target={this.props.renderPipeline} extensibilityGroups={this.props.extensibilityGroups} />
+                }
+            </div>
+        )
+    }
+}

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -13,6 +13,19 @@
     display: none;
 }
 
+.context-menu {
+    background: #222222;
+
+    .react-contextmenu-item {
+        padding: 10px;
+        cursor: pointer;
+
+        &:hover {
+            background: #555555;
+        }
+    }
+}
+
 #sceneExplorer {
     background: #333333;
     height: 100%;
@@ -410,6 +423,18 @@
             }
         }
 
+        .renderingPipelineTools {
+            grid-column: 2;
+            display: grid;
+            grid-template-columns: 1fr auto 5px;
+            align-items: center;
+
+            .extensions {
+                width: 20px;
+                grid-column: 2;
+            }
+        }
+
         .textureTools {
             grid-column: 2;
             display: grid;

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -12,6 +12,7 @@ import { HeaderComponent } from "../headerComponent";
 import { SceneTreeItemComponent } from "./entities/sceneTreeItemComponent";
 import { Tools } from "../../tools";
 import { GlobalState } from "../../components/globalState";
+import { DefaultRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
 
 require("./sceneExplorer.scss");
 
@@ -204,6 +205,21 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         let guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
         let textures = scene.textures.filter((t) => t.getClassName() !== "AdvancedDynamicTexture");
         let postProcessses = scene.postProcesses;
+        let pipelines = scene.postProcessRenderPipelineManager.supportedPipelines;
+
+        let pipelineContextMenus: { label: string, action: () => void }[] = [];
+
+        if (scene.activeCamera) {
+            if (!pipelines.some(p => p.getClassName() === "DefaultRenderingPipeline")) {
+                pipelineContextMenus.push({
+                    label: "Add new DefaultRenderingPipeline",
+                    action: () => {
+                        let newPipeline = new DefaultRenderingPipeline("Default rendering pipeline", true, scene, [scene.activeCamera!]);
+                        this.props.globalState.onSelectionChangedObservable.notifyObservers(newPipeline);
+                    }
+                })
+            }
+        }
 
         return (
             <div id="tree">
@@ -216,6 +232,9 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                     postProcessses.length > 0 &&
                     <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={postProcessses} label="Post-processes" offset={1} filter={this.state.filter} />
                 }
+                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups}
+                    contextMenuItems={pipelineContextMenus}
+                    selectedEntity={this.state.selectedEntity} items={pipelines} label="Rendering pipelines" offset={1} filter={this.state.filter} />
                 {
                     guiElements && guiElements.length > 0 &&
                     <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} filter={this.state.filter} />

inspector/src/components/sceneExplorer/treeItemComponent.tsx

@@ -8,6 +8,7 @@ import { faPlus, faMinus, faBan, faExpandArrowsAlt, faCompress } from '@fortawes
 import { TreeItemSelectableComponent } from "./treeItemSelectableComponent";
 import { Tools } from "../../tools";
 import { GlobalState } from "../globalState";
+import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
 
 interface ITreeItemExpandableHeaderComponentProps {
     isExpanded: boolean,
@@ -80,10 +81,13 @@ export interface ITreeItemComponentProps {
     globalState: GlobalState,
     entity?: any,
     selectedEntity: any,
-    extensibilityGroups?: IExplorerExtensibilityGroup[]
+    extensibilityGroups?: IExplorerExtensibilityGroup[],
+    contextMenuItems?: { label: string, action: () => void }[]
 }
 
 export class TreeItemComponent extends React.Component<ITreeItemComponentProps, { isExpanded: boolean, mustExpand: boolean }> {
+    static _ContextMenuUniqueIdGenerator = 0;
+
     constructor(props: ITreeItemComponentProps) {
         super(props);
 
@@ -119,6 +123,27 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
         this.setState({ isExpanded: expand, mustExpand: expand });
     }
 
+    renderContextMenu() {
+        if (!this.props.contextMenuItems) {
+            TreeItemComponent._ContextMenuUniqueIdGenerator++;
+            return null;
+        }
+
+        return (
+            <ContextMenu id={"contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator++} className="context-menu">
+                {
+                    this.props.contextMenuItems.map(c => {
+                        return (
+                            <MenuItem onClick={() => c.action()} key={c.label}>
+                                {c.label}
+                            </MenuItem>
+                        )
+                    })
+                }
+            </ContextMenu>
+        )
+    }
+
     render() {
         const items = this.props.items;
 
@@ -139,7 +164,12 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
         if (!items.length) {
             return (
                 <div className="groupContainer" style={marginStyle}>
-                    <TreeItemRootHeaderComponent label={this.props.label} />
+                    <ContextMenuTrigger id={"contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator}>
+                        {
+                            this.renderContextMenu()
+                        }
+                        <TreeItemRootHeaderComponent label={this.props.label} />
+                    </ContextMenuTrigger>
                 </div>
             )
         }
@@ -147,7 +177,12 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
         if (!this.state.isExpanded) {
             return (
                 <div className="groupContainer" style={marginStyle}>
-                    <TreeItemExpandableHeaderComponent isExpanded={false} label={this.props.label} onClick={() => this.switchExpandedState()} onExpandAll={expand => this.expandAll(expand)} />
+                    <ContextMenuTrigger id={"contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator}>
+                        {
+                            this.renderContextMenu()
+                        }
+                        <TreeItemExpandableHeaderComponent isExpanded={false} label={this.props.label} onClick={() => this.switchExpandedState()} onExpandAll={expand => this.expandAll(expand)} />
+                    </ContextMenuTrigger>
                 </div >
             )
         }
@@ -157,13 +192,18 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
         return (
             <div>
                 <div className="groupContainer" style={marginStyle}>
-                    <TreeItemExpandableHeaderComponent isExpanded={this.state.isExpanded} label={this.props.label} onClick={() => this.switchExpandedState()} onExpandAll={expand => this.expandAll(expand)} />
+                    <ContextMenuTrigger id={"contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator}>
+                        {
+                            this.renderContextMenu()
+                        }
+                        <TreeItemExpandableHeaderComponent isExpanded={this.state.isExpanded} label={this.props.label} onClick={() => this.switchExpandedState()} onExpandAll={expand => this.expandAll(expand)} />
+                    </ContextMenuTrigger>
                 </div>
                 {
                     sortedItems.map(item => {
                         return (
                             <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups}
-                                key={item.uniqueId}
+                                key={item.uniqueId || item.name}
                                 offset={this.props.offset + 1} selectedEntity={this.props.selectedEntity} entity={item}
                                 globalState={this.props.globalState} filter={this.props.filter} />
                         );

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -24,6 +24,8 @@ import { AdvancedDynamicTextureTreeItemComponent } from "./entities/gui/advanced
 import { AnimationGroupItemComponent } from "./entities/animationGroupTreeItemComponent";
 import { GlobalState } from "../globalState";
 import { PostProcessItemComponent } from './entities/postProcessTreeItemComponent';
+import { RenderingPipelineItemComponent } from './entities/renderingPipelineTreeItemComponent';
+import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
 
 
 interface ITreeItemSpecializedComponentProps {
@@ -90,6 +92,10 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
                 return (<TextureTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} texture={entity as Texture} onClick={() => this.onClick()} />);
             }
 
+            if (className.indexOf("RenderingPipeline") !== -1) {
+                return (<RenderingPipelineItemComponent extensibilityGroups={this.props.extensibilityGroups} renderPipeline={entity as PostProcessRenderPipeline} onClick={() => this.onClick()} />);
+            }
+
             if (className.indexOf("PostProcess") !== -1) {
                 return (<PostProcessItemComponent extensibilityGroups={this.props.extensibilityGroups} postProcess={entity as PostProcess} onClick={() => this.onClick()} />);
             }

package.json

@@ -103,6 +103,7 @@
         "webpack": "^4.25.1",
         "webpack-cli": "^3.1.2",
         "webpack-dev-server": "^3.1.14",
-        "webpack-stream": "5.0.0"
+        "webpack-stream": "5.0.0",
+        "react-contextmenu": "~2.10.0"
     }
-}
+}

src/Legacy/legacy.ts

@@ -23,9 +23,9 @@ if (typeof globalObject !== "undefined") {
     }
     for (var key in Babylon) {
         // Prevent Reassignment.
-        if (keys.indexOf(key) > -1) {
-            continue;
-        }
+        // if (keys.indexOf(key) > -1) {
+        // continue;
+        // }
 
         BABYLON[key] = (<any>Babylon)[key];
     }

src/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.ts

@@ -86,7 +86,7 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
     public grain: GrainPostProcess;
     private _grainEffect: PostProcessRenderEffect;
     /**
-     * Glow post process which adds a glow to emmisive areas of the image
+     * Glow post process which adds a glow to emissive areas of the image
      */
     private _glowLayer: Nullable<GlowLayer> = null;
 
@@ -111,6 +111,13 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
     private _buildAllowed = true;
 
     /**
+     * Gets active scene
+     */
+    public get scene(): Scene {
+        return this._scene;
+    }
+
+    /**
      * Enable or disable the sharpen process from the pipeline
      */
     public set sharpenEnabled(enabled: boolean) {
@@ -349,7 +356,7 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
 
     @serialize()
     public get glowLayerEnabled(): boolean {
-        return this._glowLayer == null;
+        return this._glowLayer != null;
     }
 
     /**
@@ -450,6 +457,14 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
     }
 
     /**
+     * Get the class name
+     * @returns "DefaultRenderingPipeline"
+     */
+    public getClassName(): string {
+        return "DefaultRenderingPipeline";
+    }
+
+    /**
      * Force the compilation of the entire pipeline.
      */
     public prepare(): void {

src/PostProcesses/RenderPipeline/postProcessRenderPipeline.ts

@@ -23,6 +23,13 @@ export class PostProcessRenderPipeline {
     public _name: string;
 
     /**
+     * Gets pipeline name
+     */
+    public get name(): string {
+        return this._name;
+    }
+
+    /**
      * Initializes a PostProcessRenderPipeline
      * @param engine engine to add the pipeline to
      * @param name name of the pipeline
@@ -37,7 +44,7 @@ export class PostProcessRenderPipeline {
     }
 
     /**
-     * "PostProcessRenderPipeline"
+     * Gets the class name
      * @returns "PostProcessRenderPipeline"
      */
     public getClassName(): string {

src/PostProcesses/depthOfFieldEffect.ts

@@ -54,7 +54,7 @@ export class DepthOfFieldEffect extends PostProcessRenderEffect {
         return this._circleOfConfusion.focalLength;
     }
     /**
-     * F-Stop of the effect's camera. The diamater of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
+     * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
      */
     public set fStop(value: number) {
         this._circleOfConfusion.fStop = value;