Improve reflectionBlock

nodeEditor/src/components/diagram/texture/texturePropertyTabComponent.tsx

@@ -15,27 +15,29 @@ import { FloatLineComponent } from '../../../sharedComponents/floatLineComponent
 import { ButtonLineComponent } from '../../../sharedComponents/buttonLineComponent';
 import { ReflectionTextureNodeModel } from '../reflectionTexture/reflectionTextureNodeModel';
 import { CubeTexture } from 'babylonjs/Materials/Textures/cubeTexture';
+import { OptionsLineComponent } from '../../../sharedComponents/optionsLineComponent';
 
 interface ITexturePropertyTabComponentProps {
     globalState: GlobalState;
     node: TextureNodeModel | ReflectionTextureNodeModel;
 }
 
-export class TexturePropertyTabComponent extends React.Component<ITexturePropertyTabComponentProps, {isEmbedded: boolean}> {
+export class TexturePropertyTabComponent extends React.Component<ITexturePropertyTabComponentProps, {isEmbedded: boolean, loadAsCubeTexture: boolean}> {
 
     constructor(props: ITexturePropertyTabComponentProps) {
         super(props);
 
         let texture = this.props.node.texture as BaseTexture;
 
-        this.state = {isEmbedded: !texture || texture.name.substring(0, 4) !== "http"};
+        this.state = {isEmbedded: !texture || texture.name.substring(0, 4) !== "http", loadAsCubeTexture: texture && texture.isCube};
     }
 
-    UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {isEmbedded: boolean}) {
+    UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {isEmbedded: boolean, loadAsCubeTexture: boolean}) {
         if (nextProps.node !== this.props.node) {
             let texture = nextProps.node.texture as BaseTexture;
 
             nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+            nextState.loadAsCubeTexture = texture && texture.isCube;
         }
     }
 
@@ -50,6 +52,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
     updateAfterTextureLoad() {
         this.props.globalState.onUpdateRequiredObservable.notifyObservers();
         this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+        this.forceUpdate();
     }
 
 	/**
@@ -62,11 +65,18 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         }
 
         let texture = this.props.node.texture as BaseTexture;
+
+        if (texture && texture.isCube !== this.state.loadAsCubeTexture) {
+            texture.dispose();
+            (texture as any) = null;
+        }
+
         if (!texture) {
 
-            if (this.props.node instanceof TextureNodeModel) {
+            if (!this.state.loadAsCubeTexture) {
                 this.props.node.texture = new Texture(null, this.props.globalState.nodeMaterial.getScene(), false, false);
                 texture = this.props.node.texture;
+                texture.coordinatesMode = Texture.EQUIRECTANGULAR_MODE;
             } else {
                 this.props.node.texture = new CubeTexture("", this.props.globalState.nodeMaterial.getScene());
                 texture = this.props.node.texture;
@@ -82,18 +92,14 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
             reader.onloadend = () => {
                 let base64data = reader.result as string;                
 
-                if (texture.isCube || this.props.node instanceof ReflectionTextureNodeModel) {
-                    let extension: string | undefined = undefined;
-                    if (file.name.toLowerCase().indexOf(".dds") > 0) {
-                        extension = ".dds";
-                    } else if (file.name.toLowerCase().indexOf(".env") > 0) {
-                        extension = ".env";
-                    }
-
-                    (texture as Texture).updateURL(base64data, extension, () => this.updateAfterTextureLoad());
-                } else {
-                    (texture as Texture).updateURL(base64data, null, () => this.updateAfterTextureLoad());
+                let extension: string | undefined = undefined;
+                if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                    extension = ".dds";
+                } else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                    extension = ".env";
                 }
+
+                (texture as Texture).updateURL(base64data, extension, () => this.updateAfterTextureLoad());
             }
         }, undefined, true);
     }
@@ -132,6 +138,36 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         url = url.replace(/\?nocache=\d+/, "");
 
         let isInReflectionMode = this.props.node instanceof ReflectionTextureNodeModel;
+
+        var reflectionModeOptions: {label: string, value: number}[] = [
+            {
+                label: "Cubic", value: Texture.CUBIC_MODE
+            },
+            {                
+                label: "Equirectangular", value: Texture.EQUIRECTANGULAR_MODE
+            },
+            {
+                label: "Explicit", value: Texture.EXPLICIT_MODE
+            },
+            {
+                label: "Fixed equirectangular", value: Texture.FIXED_EQUIRECTANGULAR_MODE
+            },
+            {
+                label: "Fixed mirrored equirectangular", value: Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE
+            },
+            {
+                label: "Planar", value: Texture.PLANAR_MODE
+            },              
+            {
+                label: "Projection", value: Texture.PROJECTION_MODE
+            },         
+            {
+                label: "Skybox", value: Texture.SKYBOX_MODE
+            },         
+            {
+                label: "Spherical", value: Texture.SPHERICAL_MODE
+            },
+        ];
         
         return (
             <div>
@@ -145,9 +181,11 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                     }}/> 
                     {
                         texture && isInReflectionMode &&
-                        <CheckBoxLineComponent label="Gamma space" propertyName="gammaSpace" target={texture} onValueChanged={() => {                        
+                        <OptionsLineComponent label="Reflection mode" options={reflectionModeOptions} target={texture} propertyName="coordinatesMode" onSelect={(value: any) => {
+                            texture.coordinatesMode = value;
+                            this.forceUpdate();
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-                        }}/>
+                        }} />
                     }                    
                     {
                         texture && !isInReflectionMode &&
@@ -231,6 +269,11 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         this.updateAfterTextureLoad();
                     }}/>
                     {
+                        isInReflectionMode &&
+                        <CheckBoxLineComponent label="Load as cube texture" isSelected={() => this.state.loadAsCubeTexture} 
+                            onSelect={value => this.setState({loadAsCubeTexture: value})}/> 
+                    }
+                    {
                         this.state.isEmbedded &&
                         <FileButtonLineComponent label="Upload" onClick={(file) => this.replaceTexture(file)} accept=".jpg, .png, .tga, .dds, .env" />
                     }

src/Materials/Node/Blocks/Dual/reflectionTextureBlock.ts

@@ -17,6 +17,7 @@ import { Constants } from '../../../../Engines/constants';
 
 import "../../../../Shaders/ShadersInclude/reflectionFunction";
 import { CubeTexture } from '../../../Textures/cubeTexture';
+import { Texture } from '../../../Textures/texture';
 
 /**
  * Block used to read a reflection texture from a sampler
@@ -336,7 +337,6 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         let view = `${this.view.associatedVariableName}`;
 
         state.compilationString += `vec3 ${this._reflectionColorName};\r\n`;
-        state.compilationString += `#ifdef ${this._define3DName}\r\n`;
         state.compilationString += `#ifdef ${this._defineMirroredEquirectangularFixedName}\r\n`;
         state.compilationString += `    vec3 ${this._reflectionCoordsName} = computeMirroredFixedEquirectangularCoords(${worldPos}, ${worldNormal}, ${direction});\r\n`;
         state.compilationString += `#endif\r\n`;
@@ -377,6 +377,7 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         state.compilationString += `    vec3 ${this._reflectionCoordsName} = vec3(0, 0, 0);\r\n`;
         state.compilationString += `#endif\r\n`;
 
+        state.compilationString += `#ifdef ${this._define3DName}\r\n`;
         state.compilationString += `${this._reflectionColorName} = textureCube(${this._cubeSamplerName}, ${this._reflectionCoordsName}).rgb;\r\n`;
         state.compilationString += `#else\r\n`;
         state.compilationString += `vec2 ${this._reflection2DCoordsName} = ${this._reflectionCoordsName}.xy;\r\n`;
@@ -412,7 +413,11 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         super._deserialize(serializationObject, scene, rootUrl);
 
         if (serializationObject.texture) {
-            this.texture = CubeTexture.Parse(serializationObject.texture, scene, rootUrl);
+            if (serializationObject.texture.isCube) {
+                this.texture = CubeTexture.Parse(serializationObject.texture, scene, rootUrl);
+            } else {
+                this.texture = Texture.Parse(serializationObject.texture, scene, rootUrl);
+            }
         }
     }
 }