.

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,74 @@
+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';
+
+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!;
+
+        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={1} step={0.05} 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={10} step={0.1} 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="Focus distance" minimum={0} maximum={camera.maxZ} step={0.1} target={renderPipeline.depthOfField} propertyName="focusDistance" 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">
+                </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={1} 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/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="red" />
+                {
+                    <ExtensionsComponent target={this.props.renderPipeline} extensibilityGroups={this.props.extensibilityGroups} />
+                }
+            </div>
+        )
+    }
+}

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -204,6 +204,7 @@ 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;
 
         return (
             <div id="tree">
@@ -217,6 +218,10 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                     <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={postProcessses} label="Post-processes" offset={1} filter={this.state.filter} />
                 }
                 {
+                    pipelines.length > 0 &&
+                    <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} 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

@@ -163,7 +163,7 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
                     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';
 
 
 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()} />);
             }

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 {