Add space conversion to input colors3/4

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -96,12 +96,26 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
                     <Vector2PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
                 );
             case NodeMaterialBlockConnectionPointTypes.Color3:
-                return (
-                    <Color3PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
-                );
+                return (<>
+                        <Color3PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
+                        <CheckBoxLineComponent label="Convert to gamma space" propertyName="convertToGammaSpace" target={this.props.block} onValueChanged={() => {
+                            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                        }}/>
+                        <CheckBoxLineComponent label="Convert to linear space" propertyName="convertToLinearSpace" target={this.props.block} onValueChanged={() => {
+                            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                        }}/>
+                        </>
+            );
             case NodeMaterialBlockConnectionPointTypes.Color4:
-                return (
-                    <Color4PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
+                return (<>
+                        <Color4PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
+                        <CheckBoxLineComponent label="Convert to gamma space" propertyName="convertToGammaSpace" target={this.props.block} onValueChanged={() => {
+                            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                        }}/>
+                        <CheckBoxLineComponent label="Convert to linear space" propertyName="convertToLinearSpace" target={this.props.block} onValueChanged={() => {
+                            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                        }}/>
+                        </>
                 );
             case NodeMaterialBlockConnectionPointTypes.Vector3:
                 return (

src/Materials/Node/Blocks/Input/inputBlock.ts

@@ -10,7 +10,7 @@ import { NodeMaterialConnectionPoint } from '../../nodeMaterialBlockConnectionPo
 import { NodeMaterialBuildState } from '../../nodeMaterialBuildState';
 import { NodeMaterialBlockTargets } from '../../Enums/nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../../Misc/typeStore';
-import { Color3, Color4 } from '../../../../Maths/math';
+import { Color3, Color4, TmpColors } from '../../../../Maths/math';
 import { AnimatedInputBlockTypes } from './animatedInputBlockTypes';
 import { Observable } from '../../../../Misc/observable';
 import { MaterialHelper } from '../../../../Materials/materialHelper';
@@ -69,6 +69,12 @@ export class InputBlock extends NodeMaterialBlock {
     /** Gets an observable raised when the value is changed */
     public onValueChangedObservable = new Observable<InputBlock>();
 
+    /** Gets or sets a boolean indicating if content needs to be converted to gamma space (for color3/4 only) */
+    public convertToGammaSpace = false;
+
+    /** Gets or sets a boolean indicating if content needs to be converted to linear space (for color3/4 only) */
+    public convertToLinearSpace = false;
+
     /**
      * Gets or sets the connection point type (default is float)
      */
@@ -417,9 +423,23 @@ export class InputBlock extends NodeMaterialBlock {
             case NodeMaterialBlockConnectionPointTypes.Vector4:
                 return `vec4(${this.value.x}, ${this.value.y}, ${this.value.z}, ${this.value.w})`;
             case NodeMaterialBlockConnectionPointTypes.Color3:
-                return `vec3(${this.value.r}, ${this.value.g}, ${this.value.b})`;
+                TmpColors.Color3[0].set(this.value.r, this.value.g, this.value.b);
+                if (this.convertToGammaSpace) {
+                    TmpColors.Color3[0].toGammaSpaceToRef(TmpColors.Color3[0]);
+                }
+                if (this.convertToLinearSpace) {
+                    TmpColors.Color3[0].toLinearSpaceToRef(TmpColors.Color3[0]);
+                }
+                return `vec3(${TmpColors.Color3[0].r}, ${TmpColors.Color3[0].g}, ${TmpColors.Color3[0].b})`;
             case NodeMaterialBlockConnectionPointTypes.Color4:
-                return `vec4(${this.value.r}, ${this.value.g}, ${this.value.b}, ${this.value.a})`;
+                TmpColors.Color4[0].set(this.value.r, this.value.g, this.value.b, this.value.a);
+                if (this.convertToGammaSpace) {
+                    TmpColors.Color4[0].toGammaSpaceToRef(TmpColors.Color4[0]);
+                }
+                if (this.convertToLinearSpace) {
+                    TmpColors.Color4[0].toLinearSpaceToRef(TmpColors.Color4[0]);
+                }
+                return `vec4(${TmpColors.Color4[0].r}, ${TmpColors.Color4[0].g}, ${TmpColors.Color4[0].b}, ${TmpColors.Color4[0].a})`;
         }
 
         return "";
@@ -588,10 +608,24 @@ export class InputBlock extends NodeMaterialBlock {
                 effect.setInt(variableName, value);
                 break;
             case NodeMaterialBlockConnectionPointTypes.Color3:
-                effect.setColor3(variableName, value);
+                TmpColors.Color3[0].set(this.value.r, this.value.g, this.value.b);
+                if (this.convertToGammaSpace) {
+                    TmpColors.Color3[0].toGammaSpaceToRef(TmpColors.Color3[0]);
+                }
+                if (this.convertToLinearSpace) {
+                    TmpColors.Color3[0].toLinearSpaceToRef(TmpColors.Color3[0]);
+                }
+                effect.setColor3(variableName, TmpColors.Color3[0]);
                 break;
             case NodeMaterialBlockConnectionPointTypes.Color4:
-                effect.setDirectColor4(variableName, value);
+                TmpColors.Color4[0].set(this.value.r, this.value.g, this.value.b, this.value.a);
+                if (this.convertToGammaSpace) {
+                    TmpColors.Color4[0].toGammaSpaceToRef(TmpColors.Color4[0]);
+                }
+                if (this.convertToLinearSpace) {
+                    TmpColors.Color4[0].toLinearSpaceToRef(TmpColors.Color4[0]);
+                }
+                effect.setDirectColor4(variableName, TmpColors.Color4[0]);
                 break;
             case NodeMaterialBlockConnectionPointTypes.Vector2:
                 effect.setVector2(variableName, value);
@@ -647,9 +681,21 @@ export class InputBlock extends NodeMaterialBlock {
                     break;
                 case NodeMaterialBlockConnectionPointTypes.Color3:
                     valueString = `new BABYLON.Color3(${this.value.r}, ${this.value.g}, ${this.value.b})`;
+                    if (this.convertToGammaSpace) {
+                        valueString += ".toGammaSpace()";
+                    }
+                    if (this.convertToLinearSpace) {
+                        valueString += ".toLinearSpace()";
+                    }
                     break;
                 case NodeMaterialBlockConnectionPointTypes.Color4:
                     valueString = `new BABYLON.Color4(${this.value.r}, ${this.value.g}, ${this.value.b}, ${this.value.a})`;
+                    if (this.convertToGammaSpace) {
+                        valueString += ".toGammaSpace()";
+                    }
+                    if (this.convertToLinearSpace) {
+                        valueString += ".toLinearSpace()";
+                    }
                     break;
                 case NodeMaterialBlockConnectionPointTypes.Matrix:
                     valueString = `BABYLON.Matrix.FromArray([${(this.value as Matrix).m}])`;
@@ -701,6 +747,8 @@ export class InputBlock extends NodeMaterialBlock {
         serializationObject.matrixMode = this.matrixMode;
         serializationObject.isConstant = this.isConstant;
         serializationObject.groupInInspector = this.groupInInspector;
+        serializationObject.convertToGammaSpace = this.convertToGammaSpace;
+        serializationObject.convertToLinearSpace = this.convertToLinearSpace;
 
         if (this._storedValue != null && this._mode === NodeMaterialBlockConnectionPointMode.Uniform) {
             if (this._storedValue.asArray) {
@@ -729,6 +777,8 @@ export class InputBlock extends NodeMaterialBlock {
         this.matrixMode = serializationObject.matrixMode || 0;
         this.isConstant = !!serializationObject.isConstant;
         this.groupInInspector = serializationObject.groupInInspector || "";
+        this.convertToGammaSpace = !!serializationObject.convertToGammaSpace;
+        this.convertToLinearSpace = !!serializationObject.convertToLinearSpace;
 
         if (!serializationObject.valueType) {
             return;