Added support for rendering pipelines in inspector

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

@@ -10,6 +10,9 @@ 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,
@@ -27,6 +30,16 @@ export class DefaultRenderingPipelinePropertyGridComponent extends React.Compone
 
         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} />
@@ -34,13 +47,13 @@ export class DefaultRenderingPipelinePropertyGridComponent extends React.Compone
                     <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="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={10} step={0.1} target={renderPipeline.chromaticAberration} propertyName="radialIntensity" 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>
@@ -48,7 +61,8 @@ export class DefaultRenderingPipelinePropertyGridComponent extends React.Compone
                     <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} />
+                    <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} />
@@ -62,11 +76,29 @@ export class DefaultRenderingPipelinePropertyGridComponent extends React.Compone
                     <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={1} step={0.05} target={renderPipeline.sharpen} propertyName="edgeAmount" 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/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

@@ -20,7 +20,7 @@ export class RenderingPipelineItemComponent extends React.Component<IRenderPipel
     render() {
         return (
             <div className="postProcessTools">
-                <TreeItemLabelComponent label={this.props.renderPipeline.name} onClick={() => this.props.onClick()} icon={faMagic} color="red" />
+                <TreeItemLabelComponent label={this.props.renderPipeline.name} onClick={() => this.props.onClick()} icon={faMagic} color="orangered" />
                 {
                     <ExtensionsComponent target={this.props.renderPipeline} extensibilityGroups={this.props.extensibilityGroups} />
                 }

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");
 
@@ -206,6 +207,20 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         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">
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
@@ -217,10 +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} />
                 }
-                {
-                    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} />
-                }
+                <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,7 +192,12 @@ 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 => {

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -25,7 +25,7 @@ import { AnimationGroupItemComponent } from "./entities/animationGroupTreeItemCo
 import { GlobalState } from "../globalState";
 import { PostProcessItemComponent } from './entities/postProcessTreeItemComponent';
 import { RenderingPipelineItemComponent } from './entities/renderingPipelineTreeItemComponent';
-import { PostProcessRenderPipeline } from 'babylonjs';
+import { PostProcessRenderPipeline } from 'babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline';
 
 
 interface ITreeItemSpecializedComponentProps {

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;