@babylonjs/inspector 5.22.0 → 5.22.1

package/dist/babylon.inspector.bundle.max.js

@@ -63411,7 +63411,7 @@ class DefaultRenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPOR
             { label: "Multiply", value: core_Materials_imageProcessingConfiguration__WEBPACK_IMPORTED_MODULE_7__.ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
             { label: "Opaque", value: core_Materials_imageProcessingConfiguration__WEBPACK_IMPORTED_MODULE_7__.ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "BLOOM", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "bloomEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.bloomEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Threshold", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Weight", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Kernel", minimum: 0, maximum: 128, step: 1, target: renderPipeline, propertyName: "bloomKernel", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Scale", minimum: 0, maximum: 1, step: 0.25, target: renderPipeline, propertyName: "bloomScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "CHROMATIC ABERRATION", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "chromaticAberrationEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.chromaticAberrationEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "aberrationAmount", minimum: 0, maximum: 128, step: 0.1, target: renderPipeline.chromaticAberration, propertyName: "aberrationAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radial intensity", minimum: 0, maximum: 1, step: 0.01, target: renderPipeline.chromaticAberration, propertyName: "radialIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Center", target: renderPipeline.chromaticAberration, propertyName: "centerPosition", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: renderPipeline.chromaticAberration, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "DEPTH OF FIELD", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "depthOfFieldEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.depthOfFieldEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Focal length", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focalLength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "fStop", minimum: 0, maximum: 32, step: 0.1, target: renderPipeline.depthOfField, propertyName: "fStop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Distance", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focusDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Lens size", minimum: 0, maximum: 1000, step: 1, target: renderPipeline.depthOfField, propertyName: "lensSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "FXAA", selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "fxaaEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "GLOW LAYER", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "glowLayerEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.glowLayerEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur kernel size", minimum: 1, maximum: 128, step: 1, decimalCount: 0, target: renderPipeline.glowLayer, propertyName: "blurKernelSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline.glowLayer, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "GRAIN", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "grainEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.grainEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Animated", target: renderPipeline.grain, propertyName: "animated", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 50, step: 0.1, target: renderPipeline.grain, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "IMAGE PROCESSING", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "imageProcessingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.imageProcessing && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to linear", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toLinearSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to gamma", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toGammaSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: renderPipeline.imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: renderPipeline.imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tone mapping", target: renderPipeline.imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: renderPipeline.imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Vignette", target: renderPipeline.imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: renderPipeline.imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: renderPipeline.imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: renderPipeline.imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: renderPipeline.imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: renderPipeline.imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "SHARPEN", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "sharpenEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.sharpenEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Color amount", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline.sharpen, propertyName: "colorAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge amount", minimum: 0, maximum: 5, step: 0.05, target: renderPipeline.sharpen, propertyName: "edgeAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "BLOOM", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "bloomEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.bloomEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Threshold", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Weight", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Kernel", minimum: 0, maximum: 128, step: 1, target: renderPipeline, propertyName: "bloomKernel", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Scale", minimum: 0, maximum: 1, step: 0.25, target: renderPipeline, propertyName: "bloomScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "CHROMATIC ABERRATION", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "chromaticAberrationEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.chromaticAberrationEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "aberrationAmount", minimum: 0, maximum: 128, step: 0.1, target: renderPipeline.chromaticAberration, propertyName: "aberrationAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radial intensity", minimum: 0, maximum: 1, step: 0.01, target: renderPipeline.chromaticAberration, propertyName: "radialIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Center", target: renderPipeline.chromaticAberration, propertyName: "centerPosition", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: renderPipeline.chromaticAberration, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "DEPTH OF FIELD", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "depthOfFieldEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.depthOfFieldEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Focal length", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focalLength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "fStop", minimum: 0, maximum: 32, step: 0.1, target: renderPipeline.depthOfField, propertyName: "fStop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Distance", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focusDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Lens size", minimum: 0, maximum: 1000, step: 1, target: renderPipeline.depthOfField, propertyName: "lensSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "FXAA", selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "fxaaEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "GLOW LAYER", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "glowLayerEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.glowLayerEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur kernel size", minimum: 1, maximum: 128, step: 1, decimalCount: 0, target: renderPipeline.glowLayer, propertyName: "blurKernelSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline.glowLayer, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "GRAIN", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "grainEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.grainEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Animated", target: renderPipeline.grain, propertyName: "animated", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 50, step: 0.1, target: renderPipeline.grain, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "IMAGE PROCESSING", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "imageProcessingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.imageProcessing && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to linear", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toLinearSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to gamma", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toGammaSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: renderPipeline.imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: renderPipeline.imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tone mapping", target: renderPipeline.imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: renderPipeline.imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Vignette", target: renderPipeline.imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: renderPipeline.imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: renderPipeline.imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: renderPipeline.imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: renderPipeline.imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: renderPipeline.imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Dithering", target: renderPipeline.imageProcessing, propertyName: "ditheringEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.5 / 255.0, label: "Dithering intensity", target: renderPipeline.imageProcessing, propertyName: "ditheringIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "SHARPEN", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "sharpenEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.sharpenEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Color amount", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline.sharpen, propertyName: "colorAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge amount", minimum: 0, maximum: 5, step: 0.05, target: renderPipeline.sharpen, propertyName: "edgeAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })] }));
     }
 }
 
@@ -63800,7 +63800,7 @@ class ScenePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
             { label: "Multiply", value: core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
             { label: "Opaque", value: core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "RENDERING MODE", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Point", isSelected: () => scene.forcePointsCloud, onSelect: () => this.setRenderingModes(true, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Wireframe", isSelected: () => scene.forceWireframe, onSelect: () => this.setRenderingModes(false, true) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Solid", isSelected: () => !scene.forcePointsCloud && !scene.forceWireframe, onSelect: () => this.setRenderingModes(false, false) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "ENVIRONMENT", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clear color enabled", target: scene, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient color", target: scene, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Environment texture (IBL)", isSelected: () => scene.environmentTexture != null, onSelect: () => this.switchIBL() }), scene.environmentTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Env. texture", texture: scene.environmentTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_8__.FileButtonLineComponent, { label: "Update environment texture", onClick: (file) => this.updateEnvironmentTexture(file), accept: ".dds, .env" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 2, step: 0.01, label: "IBL Intensity", target: scene, propertyName: "environmentIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fogPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.FogPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, scene: scene, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: scene, scene: scene, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "MATERIAL IMAGE PROCESSING", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Tone mapping", target: imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Vignette", target: imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] }), dummy !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "PHYSICS", closed: true, selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Time step", target: dummy, propertyName: "timeStep", onChange: (newValue) => this.updateTimeStep(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: dummy, propertyName: "gravity", onChange: (newValue) => this.updateGravity(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "COLLISIONS", closed: true, selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: scene, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "SHADOWS", closed: true, selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__.ButtonLineComponent, { label: "Normalize scene", onClick: () => this.normalizeScene() }) })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "RENDERING MODE", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Point", isSelected: () => scene.forcePointsCloud, onSelect: () => this.setRenderingModes(true, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Wireframe", isSelected: () => scene.forceWireframe, onSelect: () => this.setRenderingModes(false, true) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Solid", isSelected: () => !scene.forcePointsCloud && !scene.forceWireframe, onSelect: () => this.setRenderingModes(false, false) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "ENVIRONMENT", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clear color enabled", target: scene, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient color", target: scene, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Environment texture (IBL)", isSelected: () => scene.environmentTexture != null, onSelect: () => this.switchIBL() }), scene.environmentTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Env. texture", texture: scene.environmentTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_8__.FileButtonLineComponent, { label: "Update environment texture", onClick: (file) => this.updateEnvironmentTexture(file), accept: ".dds, .env" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 2, step: 0.01, label: "IBL Intensity", target: scene, propertyName: "environmentIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fogPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.FogPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, scene: scene, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: scene, scene: scene, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "MATERIAL IMAGE PROCESSING", selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Tone mapping", target: imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Vignette", target: imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Dithering", target: imageProcessing, propertyName: "ditheringEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.5 / 255.0, label: "Dithering intensity", target: imageProcessing, propertyName: "ditheringIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), dummy !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "PHYSICS", closed: true, selection: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Time step", target: dummy, propertyName: "timeStep", onChange: (newValue) => this.updateTimeStep(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: dummy, propertyName: "gravity", onChange: (newValue) => this.updateGravity(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "COLLISIONS", closed: true, selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: scene, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, { title: "SHADOWS", closed: true, selection: this.props.globalState, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__.ButtonLineComponent, { label: "Normalize scene", onClick: () => this.normalizeScene() }) })] }));
     }
 }