added lensrenderingpipeline to inspector

Playground/babylon.d.txt

@@ -46620,6 +46620,66 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * This represents a texture coming from an equirectangular image supported by the web browser canvas.
+     */
+    export class EquiRectangularCubeTexture extends BaseTexture {
+        /** The six faces of the cube. */
+        private static _FacesMapping;
+        private _noMipmap;
+        private _onLoad;
+        private _onError;
+        /** The size of the cubemap. */
+        private _size;
+        /** The buffer of the image. */
+        private _buffer;
+        /** The width of the input image. */
+        private _width;
+        /** The height of the input image. */
+        private _height;
+        /** The URL to the image. */
+        url: string;
+        /** The texture coordinates mode. As this texture is stored in a cube format, please modify carefully. */
+        coordinatesMode: number;
+        /**
+         * Instantiates an EquiRectangularCubeTexture from the following parameters.
+         * @param url The location of the image
+         * @param scene The scene the texture will be used in
+         * @param size The cubemap desired size (the more it increases the longer the generation will be)
+         * @param noMipmap Forces to not generate the mipmap if true
+         * @param gammaSpace Specifies if the texture will be used in gamma or linear space
+         * (the PBR material requires those textures in linear space, but the standard material would require them in Gamma space)
+         * @param onLoad — defines a callback called when texture is loaded
+         * @param onError — defines a callback called if there is an error
+         */
+        constructor(url: string, scene: Scene, size: number, noMipmap?: boolean, gammaSpace?: boolean, onLoad?: Nullable<() => void>, onError?: Nullable<(message?: string, exception?: any) => void>);
+        /**
+         * Load the image data, by putting the image on a canvas and extracting its buffer.
+         */
+        private loadImage;
+        /**
+         * Convert the image buffer into a cubemap and create a CubeTexture.
+         */
+        private loadTexture;
+        /**
+         * Convert the ArrayBuffer into a Float32Array and drop the transparency channel.
+         * @param buffer The ArrayBuffer that should be converted.
+         * @returns The buffer as Float32Array.
+         */
+        private getFloat32ArrayFromArrayBuffer;
+        /**
+         * Get the current class name of the texture useful for serialization or dynamic coding.
+         * @returns "EquiRectangularCubeTexture"
+         */
+        getClassName(): string;
+        /**
+         * Create a clone of the current EquiRectangularCubeTexture and return it.
+         * @returns A clone of the current EquiRectangularCubeTexture.
+         */
+        clone(): EquiRectangularCubeTexture;
+    }
+}
+declare module BABYLON {
+    /**
      * Based on jsTGALoader - Javascript loader for TGA file
      * By Vincent Thibault
      * @see http://blog.robrowser.com/javascript-tga-loader.html
@@ -51212,6 +51272,59 @@ declare module BABYLON {
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -51266,6 +51379,7 @@ declare module BABYLON {
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */

dist/preview release/babylon.d.ts

@@ -51983,6 +51983,59 @@ declare module BABYLON {
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -52037,6 +52090,7 @@ declare module BABYLON {
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */

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

@@ -54419,6 +54419,59 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPi
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -54473,6 +54526,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPi
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */
@@ -109898,6 +109952,59 @@ declare module BABYLON {
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -109952,6 +110059,7 @@ declare module BABYLON {
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -35060,6 +35060,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _propertyGrids_meshes_bonePropertyGridComponent__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./propertyGrids/meshes/bonePropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/meshes/bonePropertyGridComponent.tsx");
 /* harmony import */ var _propertyGrids_lights_directionalLightPropertyGridComponent__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./propertyGrids/lights/directionalLightPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/lights/directionalLightPropertyGridComponent.tsx");
 /* harmony import */ var _propertyGrids_lights_spotLightPropertyGridComponent__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./propertyGrids/lights/spotLightPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/lights/spotLightPropertyGridComponent.tsx");
+/* harmony import */ var _propertyGrids_postProcesses_lensRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent.tsx");
+
 
 
 
@@ -35195,6 +35197,10 @@ var PropertyGridTabComponent = /** @class */ (function (_super) {
                 var renderPipeline = entity;
                 return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_postProcesses_defaultRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_36__["DefaultRenderingPipelinePropertyGridComponent"], { renderPipeline: renderPipeline, globalState: this.props.globalState, lockObject: this._lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
             }
+            if (className.indexOf("LensRenderingPipeline") !== -1) {
+                var renderPipeline = entity;
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_postProcesses_lensRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_43__["LensRenderingPipelinePropertyGridComponent"], { renderPipeline: renderPipeline, globalState: this.props.globalState, lockObject: this._lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+            }
             if (className.indexOf("SSAORenderingPipeline") !== -1) {
                 var renderPipeline = entity;
                 return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_postProcesses_ssaoRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_37__["SSAORenderingPipelinePropertyGridComponent"], { renderPipeline: renderPipeline, globalState: this.props.globalState, lockObject: this._lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
@@ -38294,8 +38300,10 @@ var CommonPostProcessPropertyGridComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "GENERAL" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Class", value: postProcess.getClassName() }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Width", value: postProcess.width.toString() }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Height", value: postProcess.height.toString() }),
+                postProcess.width &&
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Width", value: postProcess.width.toString() }),
+                postProcess.height &&
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Height", value: postProcess.height.toString() }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__["CheckBoxLineComponent"], { label: "Auto clear", target: postProcess, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 postProcess.clearColor &&
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__["Color3LineComponent"], { label: "Clear color", target: postProcess, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
@@ -38467,6 +38475,59 @@ var DefaultRenderingPipelinePropertyGridComponent = /** @class */ (function (_su
 
 /***/ }),
 
+/***/ "./components/actionTabs/tabs/propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent.tsx":
+/*!***************************************************************************************************************!*\
+  !*** ./components/actionTabs/tabs/propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent.tsx ***!
+  \***************************************************************************************************************/
+/*! exports provided: LensRenderingPipelinePropertyGridComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LensRenderingPipelinePropertyGridComponent", function() { return LensRenderingPipelinePropertyGridComponent; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commonRenderingPipelinePropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/postProcesses/commonRenderingPipelinePropertyGridComponent.tsx");
+/* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./components/actionTabs/lines/sliderLineComponent.tsx");
+/* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
+/* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./components/actionTabs/lines/checkBoxLineComponent.tsx");
+
+
+
+
+
+
+var LensRenderingPipelinePropertyGridComponent = /** @class */ (function (_super) {
+    tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](LensRenderingPipelinePropertyGridComponent, _super);
+    function LensRenderingPipelinePropertyGridComponent(props) {
+        return _super.call(this, props) || this;
+    }
+    LensRenderingPipelinePropertyGridComponent.prototype.render = function () {
+        var renderPipeline = this.props.renderPipeline;
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonRenderingPipelinePropertyGridComponent"], { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__["LineContainerComponent"], { globalState: this.props.globalState, title: "OPTIONS" },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Edge blur", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Edge distortion", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Grain amount", minimum: 0, maximum: 1, step: 0.1, target: renderPipeline, propertyName: "grainAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Chromatic aberration", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "chromaticAberration", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Darken out of focus", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "darkenOutOfFocus", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Blur noise", target: renderPipeline, propertyName: "blurNoise", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__["LineContainerComponent"], { globalState: this.props.globalState, title: "DEPTH OF FIELD" },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Aperture", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline, propertyName: "dofAperture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Distortion", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline, propertyName: "dofDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Pentagon bokeh", target: renderPipeline, propertyName: "pentagonBokeh", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Highlight gain", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsGain", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__["SliderLineComponent"], { label: "Highlight threshold", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
+    };
+    return LensRenderingPipelinePropertyGridComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
+
+
+
+/***/ }),
+
 /***/ "./components/actionTabs/tabs/propertyGrids/postProcesses/postProcessPropertyGridComponent.tsx":
 /*!*****************************************************************************************************!*\
   !*** ./components/actionTabs/tabs/propertyGrids/postProcesses/postProcessPropertyGridComponent.tsx ***!

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

@@ -1175,6 +1175,18 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface ILenstRenderingPipelinePropertyGridComponentProps {
+        globalState: GlobalState;
+        renderPipeline: BABYLON.LensRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ILenstRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     export class PropertyGridTabComponent extends PaneComponent {
         private _timerIntervalId;
         private _lockObject;

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

@@ -1541,6 +1541,24 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lig
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { LensRenderingPipeline } from "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    import { GlobalState } from "babylonjs-inspector/components/globalState";
+    interface ILenstRenderingPipelinePropertyGridComponentProps {
+        globalState: GlobalState;
+        renderPipeline: LensRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ILenstRenderingPipelinePropertyGridComponentProps);
+        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 {
@@ -3317,6 +3335,18 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface ILenstRenderingPipelinePropertyGridComponentProps {
+        globalState: GlobalState;
+        renderPipeline: BABYLON.LensRenderingPipeline;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
+        constructor(props: ILenstRenderingPipelinePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     export class PropertyGridTabComponent extends PaneComponent {
         private _timerIntervalId;
         private _lockObject;

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

@@ -54419,6 +54419,59 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPi
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -54473,6 +54526,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPi
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */
@@ -109898,6 +109952,59 @@ declare module BABYLON {
          */
         constructor(name: string, parameters: any, scene: Scene, ratio?: number, cameras?: Camera[]);
         /**
+         * Get the class name
+         * @returns "LensRenderingPipeline"
+         */
+        getClassName(): string;
+        /**
+         * Gets associated scene
+         */
+        readonly scene: Scene;
+        /**
+         * Gets or sets the edge blur
+         */
+        edgeBlur: number;
+        /**
+         * Gets or sets the grain amount
+         */
+        grainAmount: number;
+        /**
+         * Gets or sets the chromatic aberration amount
+         */
+        chromaticAberration: number;
+        /**
+         * Gets or sets the depth of field aperture
+         */
+        dofAperture: number;
+        /**
+         * Gets or sets the edge distortion
+         */
+        edgeDistortion: number;
+        /**
+         * Gets or sets the depth of field distortion
+         */
+        dofDistortion: number;
+        /**
+         * Gets or sets the darken out of focus amount
+         */
+        darkenOutOfFocus: number;
+        /**
+         * Gets or sets a boolean indicating if blur noise is enabled
+         */
+        blurNoise: boolean;
+        /**
+         * Gets or sets a boolean indicating if pentagon bokeh is enabled
+         */
+        pentagonBokeh: boolean;
+        /**
+         * Gets or sets the highlight grain amount
+         */
+        highlightsGain: number;
+        /**
+         * Gets or sets the highlight threshold
+         */
+        highlightsThreshold: number;
+        /**
          * Sets the amount of blur at the edges
          * @param amount blur amount
          */
@@ -109952,6 +110059,7 @@ declare module BABYLON {
          * @param amount amount of DarkenOutOfFocus
          */
         setDarkenOutOfFocus(amount: number): void;
+        private _pentagonBokehIsEnabled;
         /**
          * Creates a pentagon bokeh effect
          */

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

@@ -196,11 +196,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -217,11 +217,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -950,7 +950,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): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1593,20 +1593,6 @@ 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

@@ -229,11 +229,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -250,11 +250,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -1030,14 +1030,13 @@ 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): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1737,22 +1736,6 @@ 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/tabs/propertyGridTabComponent.tsx

@@ -83,6 +83,8 @@ import { DirectionalLightPropertyGridComponent } from './propertyGrids/lights/di
 import { DirectionalLight } from 'babylonjs/Lights/directionalLight';
 import { SpotLight } from 'babylonjs/Lights/spotLight';
 import { SpotLightPropertyGridComponent } from './propertyGrids/lights/spotLightPropertyGridComponent';
+import { LensRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline';
+import { LensRenderingPipelinePropertyGridComponent } from './propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent';
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -264,6 +266,14 @@ export class PropertyGridTabComponent extends PaneComponent {
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
+            if (className.indexOf("LensRenderingPipeline") !== -1) {
+                const renderPipeline = entity as LensRenderingPipeline;
+                return (<LensRenderingPipelinePropertyGridComponent renderPipeline={renderPipeline}
+                    globalState={this.props.globalState}
+                    lockObject={this._lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }
+
             if (className.indexOf("SSAORenderingPipeline") !== -1) {
                 const renderPipeline = entity as SSAORenderingPipeline;
                 return (<SSAORenderingPipelinePropertyGridComponent renderPipeline={renderPipeline}

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

@@ -31,8 +31,14 @@ export class CommonPostProcessPropertyGridComponent extends React.Component<ICom
             <div>
                 <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
                     <TextLineComponent label="Class" value={postProcess.getClassName()} />
-                    <TextLineComponent label="Width" value={postProcess.width.toString()} />
-                    <TextLineComponent label="Height" value={postProcess.height.toString()} />
+                    {
+                        postProcess.width &&
+                        <TextLineComponent label="Width" value={postProcess.width.toString()} />
+                    }
+                    {
+                        postProcess.height &&
+                        <TextLineComponent label="Height" value={postProcess.height.toString()} />
+                    }
                     <CheckBoxLineComponent label="Auto clear" target={postProcess} propertyName="autoClear" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         postProcess.clearColor &&

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+import { LensRenderingPipeline } from "babylonjs/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline";
+
+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 { GlobalState } from '../../../../globalState';
+
+interface ILenstRenderingPipelinePropertyGridComponentProps {
+    globalState: GlobalState;
+    renderPipeline: LensRenderingPipeline,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
+    constructor(props: ILenstRenderingPipelinePropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const renderPipeline = this.props.renderPipeline;
+
+        return (
+            <div className="pane">
+                <CommonRenderingPipelinePropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} renderPipeline={renderPipeline} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                <LineContainerComponent globalState={this.props.globalState} title="OPTIONS">
+                    <SliderLineComponent label="Edge blur" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="edgeBlur" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Edge distortion" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="edgeDistortion" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Grain amount" minimum={0} maximum={1} step={0.1} target={renderPipeline} propertyName="grainAmount" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Chromatic aberration" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="chromaticAberration" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Darken out of focus" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="darkenOutOfFocus" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Blur noise" target={renderPipeline} propertyName="blurNoise" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+                <LineContainerComponent globalState={this.props.globalState} title="DEPTH OF FIELD">
+                    <SliderLineComponent label="Aperture" minimum={0} maximum={10} step={0.1} target={renderPipeline} propertyName="dofAperture" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Distortion" minimum={0} maximum={10} step={0.1} target={renderPipeline} propertyName="dofDistortion" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Pentagon bokeh" target={renderPipeline} propertyName="pentagonBokeh" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Highlight gain" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="highlightsGain" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Highlight threshold" minimum={0} maximum={5} step={0.1} target={renderPipeline} propertyName="highlightsThreshold" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

src/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline.ts

@@ -139,6 +139,148 @@ export class LensRenderingPipeline extends PostProcessRenderPipeline {
         }
     }
 
+    /**
+     * Get the class name
+     * @returns "LensRenderingPipeline"
+     */
+    public getClassName(): string {
+        return "LensRenderingPipeline";
+    }
+
+    // Properties
+
+    /**
+     * Gets associated scene
+     */
+    public get scene(): Scene {
+        return this._scene;
+    }
+
+    /**
+     * Gets or sets the edge blur
+     */
+    public get edgeBlur(): number {
+        return this._edgeBlur;
+    }
+
+    public set edgeBlur(value: number) {
+        this.setEdgeBlur(value);
+    }
+
+    /**
+     * Gets or sets the grain amount
+     */
+    public get grainAmount(): number {
+        return this._grainAmount;
+    }
+
+    public set grainAmount(value: number) {
+        this.setGrainAmount(value);
+    }
+
+    /**
+     * Gets or sets the chromatic aberration amount
+     */
+    public get chromaticAberration(): number {
+        return this._chromaticAberration;
+    }
+
+    public set chromaticAberration(value: number) {
+        this.setChromaticAberration(value);
+    }
+
+    /**
+     * Gets or sets the depth of field aperture
+     */
+    public get dofAperture(): number {
+        return this._dofAperture;
+    }
+
+    public set dofAperture(value: number) {
+        this.setAperture(value);
+    }
+
+    /**
+     * Gets or sets the edge distortion
+     */
+    public get edgeDistortion(): number {
+        return this._distortion;
+    }
+
+    public set edgeDistortion(value: number) {
+        this.setEdgeDistortion(value);
+    }
+
+    /**
+     * Gets or sets the depth of field distortion
+     */
+    public get dofDistortion(): number {
+        return this._dofDistance;
+    }
+
+    public set dofDistortion(value: number) {
+        this.setFocusDistance(value);
+    }
+
+    /**
+     * Gets or sets the darken out of focus amount
+     */
+    public get darkenOutOfFocus(): number {
+        return this._dofDarken;
+    }
+
+    public set darkenOutOfFocus(value: number) {
+        this.setDarkenOutOfFocus(value);
+    }
+
+    /**
+     * Gets or sets a boolean indicating if blur noise is enabled
+     */
+    public get blurNoise(): boolean {
+        return this._blurNoise;
+    }
+
+    public set blurNoise(value: boolean) {
+        this._blurNoise = value;
+    }
+
+    /**
+     * Gets or sets a boolean indicating if pentagon bokeh is enabled
+     */
+    public get pentagonBokeh(): boolean {
+        return this._pentagonBokehIsEnabled;
+    }
+
+    public set pentagonBokeh(value: boolean) {
+        if (value) {
+            this.enablePentagonBokeh();
+        } else {
+            this.disablePentagonBokeh();
+        }
+    }
+
+    /**
+     * Gets or sets the highlight grain amount
+     */
+    public get highlightsGain(): number {
+        return this._highlightsGain;
+    }
+
+    public set highlightsGain(value: number) {
+        this.setHighlightsGain(value);
+    }
+
+    /**
+     * Gets or sets the highlight threshold
+     */
+    public get highlightsThreshold(): number {
+        return this._highlightsThreshold;
+    }
+
+    public set highlightsThreshold(value: number) {
+        this.setHighlightsThreshold(value);
+    }
+
     // public methods (self explanatory)
     /**
      * Sets the amount of blur at the edges
@@ -195,16 +337,20 @@ export class LensRenderingPipeline extends PostProcessRenderPipeline {
      * @param amount amount of DarkenOutOfFocus
      */
     public setDarkenOutOfFocus(amount: number) { this._dofDarken = amount; }
+
+    private _pentagonBokehIsEnabled = false;
     /**
      * Creates a pentagon bokeh effect
      */
     public enablePentagonBokeh() {
         this._highlightsPostProcess.updateEffect("#define PENTAGON\n");
+        this._pentagonBokehIsEnabled = true;
     }
     /**
      * Disables the pentagon bokeh effect
      */
     public disablePentagonBokeh() {
+        this._pentagonBokehIsEnabled = false;
         this._highlightsPostProcess.updateEffect();
     }
     /**