Associated with #5638

dist/preview release/babylon.d.ts

@@ -50278,7 +50278,7 @@ declare module BABYLON {
          */
         getClassName(): string;
         /**
-         * If all the render effects in the pipeline are support
+         * If all the render effects in the pipeline are supported
          */
         readonly isSupported: boolean;
         /**
@@ -51254,6 +51254,10 @@ declare module BABYLON {
          */
         constructor();
         /**
+         * Gets the list of supported render pipelines
+         */
+        readonly supportedPipelines: PostProcessRenderPipeline[];
+        /**
          * Adds a pipeline to the manager
          * @param renderPipeline The pipeline to add
          */

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

@@ -52611,7 +52611,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
          */
         getClassName(): string;
         /**
-         * If all the render effects in the pipeline are support
+         * If all the render effects in the pipeline are supported
          */
         readonly isSupported: boolean;
         /**
@@ -53638,6 +53638,10 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
          */
         constructor();
         /**
+         * Gets the list of supported render pipelines
+         */
+        readonly supportedPipelines: PostProcessRenderPipeline[];
+        /**
          * Adds a pipeline to the manager
          * @param renderPipeline The pipeline to add
          */
@@ -106834,7 +106838,7 @@ declare module BABYLON {
          */
         getClassName(): string;
         /**
-         * If all the render effects in the pipeline are support
+         * If all the render effects in the pipeline are supported
          */
         readonly isSupported: boolean;
         /**
@@ -107810,6 +107814,10 @@ declare module BABYLON {
          */
         constructor();
         /**
+         * Gets the list of supported render pipelines
+         */
+        readonly supportedPipelines: PostProcessRenderPipeline[];
+        /**
          * Adds a pipeline to the manager
          * @param renderPipeline The pipeline to add
          */

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

@@ -65,6 +65,8 @@ import { GridPropertyGridComponent } from "./propertyGrids/gui/gridPropertyGridC
 import { PBRMetallicRoughnessMaterialPropertyGridComponent } from "./propertyGrids/materials/pbrMetallicRoughnessMaterialPropertyGridComponent";
 import { PBRSpecularGlossinessMaterialPropertyGridComponent } from "./propertyGrids/materials/pbrSpecularGlossinessMaterialPropertyGridComponent";
 import { StackPanelPropertyGridComponent } from "./propertyGrids/gui/stackPanelPropertyGridComponent";
+import { PostProcess } from 'babylonjs/PostProcesses/postProcess';
+import { PostProcessPropertyGridComponent } from './propertyGrids/postProcesses/postProcessPropertyGridComponent';
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -210,6 +212,13 @@ export class PropertyGridTabComponent extends PaneComponent {
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
+            if (className.indexOf("PostProcess") !== -1) {
+                const postProcess = entity as PostProcess;
+                return (<PostProcessPropertyGridComponent postProcess={postProcess}
+                    lockObject={this._lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }
+
             if (className.indexOf("Texture") !== -1) {
                 const texture = entity as Texture;
                 return (<TexturePropertyGridComponent texture={texture}
@@ -272,7 +281,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 return (<StackPanelPropertyGridComponent stackPanel={stackPanel}
                     lockObject={this._lockObject}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
-            }            
+            }
 
             if (className === "Grid") {
                 const grid = entity as Grid;

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { TextLineComponent } from "../../../lines/textLineComponent";
+import { LockObject } from "../lockObject";
+import { PostProcess } from 'babylonjs/PostProcesses/postProcess';
+import { Color3LineComponent } from '../../../lines/color3LineComponent';
+import { SliderLineComponent } from '../../../lines/sliderLineComponent';
+
+interface ICommonPostProcessPropertyGridComponentProps {
+    postProcess: PostProcess;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class CommonPostProcessPropertyGridComponent extends React.Component<ICommonPostProcessPropertyGridComponentProps> {
+    constructor(props: ICommonPostProcessPropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const postProcess = this.props.postProcess;
+
+        return (
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextLineComponent label="Class" value={postProcess.getClassName()} />
+                    <TextLineComponent label="Width" value={postProcess.width.toString()} />
+                    <TextLineComponent label="Height" value={postProcess.height.toString()} />
+                    <CheckBoxLineComponent label="Auto clear" target={postProcess} propertyName="autoClear" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    {
+                        postProcess.clearColor &&
+                        <Color3LineComponent label="Clear color" target={postProcess} propertyName="clearColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    }
+                    <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/postProcessPropertyGridComponent.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+import { PostProcess } from "babylonjs/PostProcesses/postProcess";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LockObject } from "../lockObject";
+import { CommonPostProcessPropertyGridComponent } from './commonPostProcessPropertyGridComponent';
+
+interface IPostProcessPropertyGridComponentProps {
+    postProcess: PostProcess,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class PostProcessPropertyGridComponent extends React.Component<IPostProcessPropertyGridComponentProps> {
+    constructor(props: IPostProcessPropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const postProcess = this.props.postProcess;
+
+        return (
+            <div className="pane">
+                <CommonPostProcessPropertyGridComponent lockObject={this.props.lockObject} postProcess={postProcess} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+            </div>
+        );
+    }
+}

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

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

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -398,6 +398,18 @@
             }
         }
 
+        .postProcessTools {
+            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

@@ -201,8 +201,9 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             return null;
         }
 
-        var guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
-        var textures = scene.textures.filter((t) => t.getClassName() !== "AdvancedDynamicTexture");
+        let guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
+        let textures = scene.textures.filter((t) => t.getClassName() !== "AdvancedDynamicTexture");
+        let postProcessses = scene.postProcesses;
 
         return (
             <div id="tree">
@@ -212,6 +213,10 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                 <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} filter={this.state.filter} />
                 <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} filter={this.state.filter} />
                 {
+                    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} />
+                }
+                {
                     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

@@ -162,7 +162,8 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
                 {
                     sortedItems.map(item => {
                         return (
-                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId}
+                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups}
+                                key={item.uniqueId}
                                 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

@@ -6,6 +6,7 @@ import { Texture } from "babylonjs/Materials/Textures/texture";
 import { TransformNode } from "babylonjs/Meshes/transformNode";
 import { Light } from "babylonjs/Lights/light";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+import { PostProcess } from 'babylonjs/PostProcesses/postProcess';
 
 import { MeshTreeItemComponent } from "./entities/meshTreeItemComponent";
 import { CameraTreeItemComponent } from "./entities/cameraTreeItemComponent";
@@ -22,6 +23,8 @@ import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"
 import { AdvancedDynamicTextureTreeItemComponent } from "./entities/gui/advancedDynamicTextureTreeItemComponent";
 import { AnimationGroupItemComponent } from "./entities/animationGroupTreeItemComponent";
 import { GlobalState } from "../globalState";
+import { PostProcessItemComponent } from './entities/postProcessTreeItemComponent';
+
 
 interface ITreeItemSpecializedComponentProps {
     label: string,
@@ -87,6 +90,10 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
                 return (<TextureTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} texture={entity as Texture} onClick={() => this.onClick()} />);
             }
 
+            if (className.indexOf("PostProcess") !== -1) {
+                return (<PostProcessItemComponent extensibilityGroups={this.props.extensibilityGroups} postProcess={entity as PostProcess} onClick={() => this.onClick()} />);
+            }
+
             if (entity._host) {
                 return (<ControlTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} control={entity as Control} onClick={() => this.onClick()} />);
             }

src/Misc/decorators.ts

@@ -31,7 +31,7 @@ var _copySource = function <T>(creationFunction: () => T, source: T, instanciate
         var sourceProperty = (<any>source)[property];
         var propertyType = propertyDescriptor.type;
 
-        if (sourceProperty !== undefined && sourceProperty !== null) {
+        if (sourceProperty !== undefined && sourceProperty !== null && property !== "uniqueId") {
             switch (propertyType) {
                 case 0:     // Value
                 case 6:     // Mesh reference

src/PostProcesses/RenderPipeline/postProcessRenderPipeline.ts

@@ -45,7 +45,7 @@ export class PostProcessRenderPipeline {
     }
 
     /**
-     * If all the render effects in the pipeline are support
+     * If all the render effects in the pipeline are supported
      */
     public get isSupported(): boolean {
         for (var renderEffectName in this._renderEffects) {

src/PostProcesses/RenderPipeline/postProcessRenderPipelineManager.ts

@@ -16,6 +16,24 @@ export class PostProcessRenderPipelineManager {
     }
 
     /**
+     * Gets the list of supported render pipelines
+     */
+    public get supportedPipelines(): PostProcessRenderPipeline[] {
+        let result = [];
+
+        for (var renderPipelineName in this._renderPipelines) {
+            if (this._renderPipelines.hasOwnProperty(renderPipelineName)) {
+                var pipeline = this._renderPipelines[renderPipelineName];
+                if (pipeline.isSupported) {
+                    result.push(pipeline);
+                }
+            }
+        }
+
+        return result;
+    }
+
+    /**
      * Adds a pipeline to the manager
      * @param renderPipeline The pipeline to add
      */

src/PostProcesses/postProcess.ts

@@ -26,6 +26,11 @@ export type PostProcessOptions = { width: number, height: number };
  */
 export class PostProcess {
     /**
+     * Gets or sets the unique id of the post process
+     */
+    public uniqueId: number;
+
+    /**
     * Width of the texture to apply the post process on
     */
     public width = -1;
@@ -301,12 +306,12 @@ export class PostProcess {
             this._engine = this._scene.getEngine();
 
             this._scene.postProcesses.push(this);
+            this.uniqueId = this._scene.getUniqueId();
         }
         else if (engine) {
             this._engine = engine;
             this._engine.postProcesses.push(this);
         }
-
         this._options = options;
         this.renderTargetSamplingMode = samplingMode ? samplingMode : Constants.TEXTURE_NEAREST_SAMPLINGMODE;
         this._reusable = reusable || false;
@@ -329,6 +334,14 @@ export class PostProcess {
     }
 
     /**
+     * Gets a string idenfifying the name of the class
+     * @returns "PostProcess" string
+     */
+    public getClassName(): string {
+        return "PostProcess";
+    }
+
+    /**
      * Gets the engine which this post process belongs to.
      * @returns The engine the post process was enabled with.
      */