@babylonjs/node-editor 6.22.1 → 6.23.1

package/dist/babylon.nodeEditor.max.js

@@ -56928,7 +56928,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _svgs_omni_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./svgs/omni.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/omni.svg");
 /* harmony import */ var _svgs_directionalRight_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./svgs/directionalRight.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/directionalRight.svg");
 /* harmony import */ var _svgs_directionalLeft_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./svgs/directionalLeft.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/directionalLeft.svg");
-/* harmony import */ var shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared-ui-components/lines/optionsLineComponent */ "../../../dev/sharedUiComponents/dist/lines/optionsLineComponent.js");
+/* harmony import */ var _svgs_icon_ibl_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./svgs/icon-ibl.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/icon-ibl.svg");
+/* harmony import */ var shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/lines/optionsLineComponent */ "../../../dev/sharedUiComponents/dist/lines/optionsLineComponent.js");
+
 
 
 
@@ -56988,7 +56990,7 @@ class PreviewAreaComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             { label: "OneOne", value: core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.ParticleSystem.BLENDMODE_ONEONE },
             { label: "Standard", value: core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.ParticleSystem.BLENDMODE_STANDARD },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview", style: { height: this.props.width + "px" }, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { onPointerOver: this._onPointerOverCanvas, onPointerOut: this._onPointerOutCanvas, id: "preview-canvas" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "waitPanel" + (this.state.isLoading ? "" : " hidden"), children: "Please wait, loading..." })] }), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "preview-config-bar", className: "extended", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Blend mode", options: blendModeOptions, target: this.props.globalState, propertyName: "particleSystemBlendMode", noDirectUpdate: true, onSelect: (value) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview", style: { height: this.props.width + "px" }, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { onPointerOver: this._onPointerOverCanvas, onPointerOut: this._onPointerOutCanvas, id: "preview-canvas" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "waitPanel" + (this.state.isLoading ? "" : " hidden"), children: "Please wait, loading..." })] }), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "preview-config-bar", className: "extended", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "Blend mode", options: blendModeOptions, target: this.props.globalState, propertyName: "particleSystemBlendMode", noDirectUpdate: true, onSelect: (value) => {
                             this.changeParticleSystemBlendMode(value);
                         } }) })), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview-config-bar", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Render without back face culling", onClick: () => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling), className: "button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_doubleSided_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Render with depth pre-pass", onClick: () => this.changeDepthPrePass(!this.props.globalState.depthPrePass), className: "button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_depthPass_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn on/off hemispheric light", onClick: () => {
                                     this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
@@ -57005,7 +57007,12 @@ class PreviewAreaComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                                     core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
                                     this.props.globalState.onLightUpdated.notifyObservers();
                                     this.forceUpdate();
-                                }, className: "button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalLeft_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) })] }) }))] }));
+                                }, className: "button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalLeft_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn on/off environment", onClick: () => {
+                                    this.props.globalState.backgroundHDR = !this.props.globalState.backgroundHDR;
+                                    core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.DataStorage.WriteBoolean("backgroundHDR", this.props.globalState.backgroundHDR);
+                                    this.props.globalState.onBackgroundHDRUpdated.notifyObservers();
+                                    this.forceUpdate();
+                                }, className: "button " + (this.props.globalState.backgroundHDR ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_icon_ibl_svg__WEBPACK_IMPORTED_MODULE_8__, alt: "" }) })] }) }))] }));
     }
 }
 
@@ -57051,10 +57058,15 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 
 const dontSerializeTextureContent = true;
+/**
+ *
+ */
 class PreviewManager {
     _serializeMaterial() {
         const nodeMaterial = this._nodeMaterial;
@@ -57105,6 +57117,9 @@ class PreviewManager {
         this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
             this._prepareLights();
         });
+        this._onBackgroundHDRUpdatedObserver = globalState.onBackgroundHDRUpdated.add(() => {
+            this._prepareBackgroundHDR();
+        });
         this._onUpdateRequiredObserver = globalState.stateManager.onUpdateRequiredObservable.add(() => {
             this._updatePreview();
         });
@@ -57179,6 +57194,7 @@ class PreviewManager {
         });
     }
     _reset() {
+        this._globalState.envType = _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Room;
         this._globalState.previewType = _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Box;
         this._globalState.listOfCustomPreviewFiles = [];
         this._scene.meshes.forEach((m) => m.dispose());
@@ -57225,11 +57241,26 @@ class PreviewManager {
             dir1.parent = this._lightParent;
         }
     }
+    _prepareBackgroundHDR() {
+        this._scene.environmentTexture = null;
+        if (this._hdrSkyBox) {
+            this._scene.removeMesh(this._hdrSkyBox);
+        }
+        if (this._globalState.backgroundHDR) {
+            this._scene.environmentTexture = this._hdrTexture;
+            this._hdrSkyBox = this._scene.createDefaultSkybox(this._hdrTexture);
+        }
+        this._updatePreview();
+    }
     _prepareScene() {
         this._camera.useFramingBehavior = this._globalState.mode === core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material;
         switch (this._globalState.mode) {
             case core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material: {
                 this._prepareLights();
+                if (!this._globalState.envFile) {
+                    this._globalState.backgroundHDR = false;
+                }
+                this._prepareBackgroundHDR();
                 const framingBehavior = this._camera.getBehaviorByName("Framing");
                 setTimeout(() => {
                     // Let the behavior activate first
@@ -57267,6 +57298,25 @@ class PreviewManager {
         this._updatePreview();
     }
     _refreshPreviewMesh(force) {
+        switch (this._globalState.envType) {
+            case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Room:
+                this._hdrTexture = new core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CubeTexture(PreviewManager.DefaultEnvironmentURL, this._scene);
+                if (this._hdrTexture) {
+                    this._prepareBackgroundHDR();
+                }
+                break;
+            case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Custom: {
+                const blob = new Blob([this._globalState.envFile], { type: "octet/stream" });
+                const reader = new FileReader();
+                reader.onload = (evt) => {
+                    const dataurl = evt.target.result;
+                    this._hdrTexture = new core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CubeTexture(dataurl, this._scene, undefined, false, undefined, undefined, undefined, undefined, undefined, ".env");
+                    this._prepareBackgroundHDR();
+                };
+                reader.readAsDataURL(blob);
+                break;
+            }
+        }
         if (this._currentType !== this._globalState.previewType || this._currentType === _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Custom || force) {
             this._currentType = this._globalState.previewType;
             if (this._meshes && this._meshes.length) {
@@ -57537,6 +57587,7 @@ class PreviewManager {
         this._globalState.onBackFaceCullingChanged.remove(this._onBackFaceCullingChangedObserver);
         this._globalState.onDepthPrePassChanged.remove(this._onDepthPrePassChangedObserver);
         this._globalState.onLightUpdated.remove(this._onLightUpdatedObserver);
+        this._globalState.onBackgroundHDRUpdated.remove(this._onBackgroundHDRUpdatedObserver);
         if (this._material) {
             this._material.dispose(false, true);
         }
@@ -57548,6 +57599,10 @@ class PreviewManager {
         this._engine.dispose();
     }
 }
+/**
+ * Default Environment URL
+ */
+PreviewManager.DefaultEnvironmentURL = "https://assets.babylonjs.com/environments/environmentSpecular.env";
 
 
 /***/ }),
@@ -57570,9 +57625,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _previewType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./previewType */ "../../../tools/nodeEditor/dist/components/preview/previewType.js");
 /* harmony import */ var _svgs_popOut_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./svgs/popOut.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/popOut.svg");
 /* harmony import */ var _svgs_colorPicker_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./svgs/colorPicker.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/colorPicker.svg");
-/* harmony import */ var _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./svgs/pauseIcon.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/pauseIcon.svg");
-/* harmony import */ var _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./svgs/playIcon.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/playIcon.svg");
-/* harmony import */ var shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared-ui-components/lines/optionsLineComponent */ "../../../dev/sharedUiComponents/dist/lines/optionsLineComponent.js");
+/* harmony import */ var _svgs_envPicker_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./svgs/envPicker.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/envPicker.svg");
+/* harmony import */ var _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./svgs/pauseIcon.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/pauseIcon.svg");
+/* harmony import */ var _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./svgs/playIcon.svg */ "../../../tools/nodeEditor/dist/components/preview/svgs/playIcon.svg");
+/* harmony import */ var shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/lines/optionsLineComponent */ "../../../dev/sharedUiComponents/dist/lines/optionsLineComponent.js");
+
 
 
 
@@ -57589,6 +57646,7 @@ class PreviewMeshControlComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         super(props);
         this._colorInputRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         this._filePickerRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+        this._envPickerRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
             this.forceUpdate();
         });
@@ -57627,6 +57685,19 @@ class PreviewMeshControlComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
             this._filePickerRef.current.value = "";
         }
     }
+    useCustomEnv(evt) {
+        const files = evt.target?.files || evt.dataTransfer?.files;
+        if (files && files.length) {
+            const file = files[0];
+            this.props.globalState.envFile = file;
+            this.props.globalState.envType = _previewType__WEBPACK_IMPORTED_MODULE_3__.PreviewType.Custom;
+            this.props.globalState.onPreviewCommandActivated.notifyObservers(false);
+            this.forceUpdate();
+        }
+        if (this._envPickerRef.current) {
+            this._envPickerRef.current.value = "";
+        }
+    }
     onPopUp() {
         this.props.togglePreviewAreaComponent();
     }
@@ -57677,16 +57748,16 @@ class PreviewMeshControlComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         }
         const options = this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle ? particleTypeOptions : meshTypeOptions;
         const accept = this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle ? ".json" : ".*";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview-mesh-bar", children: [(this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material || this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "", options: options, target: this.props.globalState, propertyName: "previewType", noDirectUpdate: true, onSelect: (value) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview-mesh-bar", children: [(this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material || this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "", options: options, target: this.props.globalState, propertyName: "previewType", noDirectUpdate: true, onSelect: (value) => {
                                 if (value !== _previewType__WEBPACK_IMPORTED_MODULE_3__.PreviewType.Custom + 1) {
                                     this.changeMeshType(value);
                                 }
                                 else {
                                     this._filePickerRef.current?.click();
                                 }
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { style: {
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { style: {
                                 display: "none",
-                            }, title: "Preview with a custom mesh", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._filePickerRef, multiple: true, id: "file-picker", type: "file", onChange: (evt) => this.useCustomMesh(evt), accept: accept }) })] })), this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn-table animation", onClick: () => this.changeAnimation(), className: "button", id: "play-button", children: this.props.globalState.rotatePreview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "color-picker-button", title: "Background color", className: "button align", onClick: (_) => this.changeBackgroundClick(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_colorPicker_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "", id: "color-picker-image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._colorInputRef, id: "color-picker", type: "color", value: this.props.globalState.backgroundColor.toHexString().slice(0, 7), onChange: (evt) => this.changeBackground(evt.target.value) })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Open preview in new window", id: "preview-new-window", onClick: () => this.onPopUp(), className: "button", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_popOut_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) })] }));
+                            }, title: "Preview with a custom mesh", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._filePickerRef, multiple: true, id: "file-picker", type: "file", onChange: (evt) => this.useCustomMesh(evt), accept: accept }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._envPickerRef, id: "env-picker", accept: ".env", type: "file", onChange: (evt) => this.useCustomEnv(evt) })] })] })), this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "env-button", title: "Environment image", className: "button", onClick: (_) => this._envPickerRef.current?.click(), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_envPicker_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "", id: "env-picker-image" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn-table animation", onClick: () => this.changeAnimation(), className: "button", id: "play-button", children: this.props.globalState.rotatePreview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_8__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "color-picker-button", title: "Background color", className: "button align", onClick: (_) => this.changeBackgroundClick(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_colorPicker_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "", id: "color-picker-image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._colorInputRef, id: "color-picker", type: "color", value: this.props.globalState.backgroundColor.toHexString().slice(0, 7), onChange: (evt) => this.changeBackground(evt.target.value) })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Open preview in new window", id: "preview-new-window", onClick: () => this.onPopUp(), className: "button", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_popOut_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) })] }));
     }
 }
 
@@ -57721,6 +57792,8 @@ var PreviewType;
     PreviewType[PreviewType["Explosion"] = 10] = "Explosion";
     PreviewType[PreviewType["Fire"] = 11] = "Fire";
     PreviewType[PreviewType["Custom"] = 12] = "Custom";
+    // Env
+    PreviewType[PreviewType["Room"] = 13] = "Room";
 })(PreviewType || (PreviewType = {}));
 
 
@@ -58284,6 +58357,9 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("PreviewType", this.props.globalState.previewType);
         this.props.globalState.mode = value;
         this.props.globalState.onResetRequiredObservable.notifyObservers(true);
+        // Env
+        this.props.globalState.envFile = undefined;
+        core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("EnvType", this.props.globalState.envType);
         return true;
     }
     render() {
@@ -58416,6 +58492,7 @@ class GlobalState {
         this.onIsLoadingChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onPreviewCommandActivated = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onLightUpdated = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this.onBackgroundHDRUpdated = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onPreviewBackgroundChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onBackFaceCullingChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onDepthPrePassChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -58429,11 +58506,13 @@ class GlobalState {
         this.pointerOverCanvas = false;
         this.onRefreshPreviewMeshControlComponentRequiredObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.previewType = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("PreviewType", _components_preview_previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Box);
+        this.envType = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("EnvType", _components_preview_previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Room);
         this.backFaceCulling = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("BackFaceCulling", true);
         this.depthPrePass = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("DepthPrePass", false);
         this.hemisphericLight = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("HemisphericLight", true);
         this.directionalLight0 = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("DirectionalLight0", false);
         this.directionalLight1 = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("DirectionalLight1", false);
+        this.backgroundHDR = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("backgroundHDR", false);
         this.controlCamera = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadBoolean("ControlCamera", true);
         this._mode = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("Mode", core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material);
         this.stateManager = new shared_ui_components_nodeGraphSystem_stateManager__WEBPACK_IMPORTED_MODULE_5__.StateManager();
@@ -64308,6 +64387,28 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
 
 /***/ }),
 
+/***/ "../../../tools/nodeEditor/dist/components/preview/svgs/envPicker.svg":
+/*!****************************************************************************!*\
+  !*** ../../../tools/nodeEditor/dist/components/preview/svgs/envPicker.svg ***!
+  \****************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjQuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0zMjAgNjI3LjJsMjkuODY2NjY3LTI5Ljg2NjY2NyAyOS44NjY2NjYgMjkuODY2NjY3IDY0IDY0IDE0OS4zMzMzMzQtMTQ5LjMzMzMzMyAyOS44NjY2NjYtMjkuODY2NjY3IDI5Ljg2NjY2NyAyOS44NjY2NjcgMTk2LjI2NjY2NyAxOTYuMjY2NjY2VjI5OC42NjY2NjdIMjEzLjMzMzMzM3Y0MzUuMmwxMDYuNjY2NjY3LTEwNi42NjY2Njd6IG0yOS44NjY2NjcgMjkuODY2NjY3TDIzOC45MzMzMzMgNzY4aDEzNi41MzMzMzRsLTQuMjY2NjY3LTQuMjY2NjY3IDQyLjY2NjY2Ny00Mi42NjY2NjYtNjQtNjR6TTgyMy40NjY2NjcgNzY4bC0xOTYuMjY2NjY3LTE5Ni4yNjY2NjctMTk2LjI2NjY2NyAxOTYuMjY2NjY3aDM5Mi41MzMzMzR6TTg5NiAyNTZ2NTU0LjY2NjY2N0gxNzAuNjY2NjY3VjI1Nmg3MjUuMzMzMzMzeiIgIC8+PC9zdmc+";
+
+/***/ }),
+
+/***/ "../../../tools/nodeEditor/dist/components/preview/svgs/icon-ibl.svg":
+/*!***************************************************************************!*\
+  !*** ../../../tools/nodeEditor/dist/components/preview/svgs/icon-ibl.svg ***!
+  \***************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZS13aWR0aDowcHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTEyLDEuOTdDNi40NiwxLjk3LDEuOTcsNi40NiwxLjk3LDEyczQuNDksMTAuMDMsMTAuMDMsMTAuMDMsMTAuMDMtNC40OSwxMC4wMy0xMC4wM1MxNy41NCwxLjk3LDEyLDEuOTdabTAsMTguNTVjLTQuNzEsMC04LjUyLTMuODItOC41Mi04LjUyUzcuMjksMy40OCwxMiwzLjQ4czguNTIsMy44Miw4LjUyLDguNTItMy44Miw4LjUyLTguNTIsOC41MlptNS4wMS0xMC4zM2MwLTIuNzctMi4yNS01LjAxLTUuMDEtNS4wMXMtNS4wMSwyLjI0LTUuMDEsNS4wMXYuMjdzLjAzLjI2LjAzLjI2Yy4xNCwxLjI3Ljc0LDIuNDIsMS42OCwzLjI0bC4xNS4xMy43NywzLjM4LjA0LjE1Yy4yNi43My45MSwxLjIsMS42NSwxLjJoMS41NHMuMTUtLjAzLjE1LS4wM2MuNy0uMTQsMS4yMy0uNjQsMS4zOC0xLjMxbC43Ny0zLjM4LS4wMy4wM2MxLjItLjk2LDEuOS0yLjM5LDEuOS0zLjkzWm0tNC4xLDYuOTRjLS4wMi4wOS0uMS4xNi0uMi4xOGgtLjA3cy0xLjM0LDAtMS4zNCwwYy0uMSwwLS4xOS0uMDYtLjIyLS4xNWwtLjAyLS4wNy0uMjUtMS4wOGgyLjM1bC0uMjYsMS4xMlptMS4yOC00LjJsLS4xNy4xMy0uMDguMDdjLS4xLjEtLjE3LjIzLS4yLjM2bC0uMjMsMS4wMWgtLjA0cy0yLjk1LDAtMi45NSwwaC0uMDRzLS4yMy0xLjAxLS4yMy0xLjAxYy0uMDQtLjE4LS4xNS0uMzQtLjMtLjQ0LS44Ni0uNjEtMS40LTEuNTgtMS40Ni0yLjY1di0uMjNjMC0xLjkyLDEuNTctMy40OSwzLjUtMy40OXMzLjUxLDEuNTcsMy41MSwzLjUxYzAsMS4wOC0uNDksMi4wOC0xLjMyLDIuNzRaIiBzdHlsZT0iZmlsbDp3aGl0ZSIvPjwvc3ZnPg==";
+
+/***/ }),
+
 /***/ "../../../tools/nodeEditor/dist/components/preview/svgs/omni.svg":
 /*!***********************************************************************!*\
   !*** ../../../tools/nodeEditor/dist/components/preview/svgs/omni.svg ***!