Merge pull request #7896 from BabylonJS/master

Nightly

.vscode/launch.json

@@ -13,7 +13,21 @@
             "runtimeArgs": [
                 "--enable-unsafe-es3-apis"
             ]
-        },        
+        },           
+        {
+            "name": "Launch Node Material Editor (Edge)",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/nodeEditor/public/index-local.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "preLaunchTask": "run",
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
+        },      
         {
             "name": "Launch Viewer (Chrome)",
             "type": "chrome",

dist/preview release/babylon.d.ts

@@ -1183,8 +1183,8 @@ declare module BABYLON {
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }

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

@@ -1193,8 +1193,8 @@ declare module "babylonjs/Engines/Processors/Expressions/shaderDefineExpression"
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }
@@ -75471,8 +75471,8 @@ declare module BABYLON {
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }

dist/preview release/documentation.d.ts

@@ -1183,8 +1183,8 @@ declare module BABYLON {
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4",
-        "babylonjs-gui": "4.2.0-alpha.4",
-        "babylonjs-loaders": "4.2.0-alpha.4",
-        "babylonjs-materials": "4.2.0-alpha.4",
-        "babylonjs-serializers": "4.2.0-alpha.4",
-        "babylonjs-gltf2interface": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5",
+        "babylonjs-gui": "4.2.0-alpha.5",
+        "babylonjs-loaders": "4.2.0-alpha.5",
+        "babylonjs-materials": "4.2.0-alpha.5",
+        "babylonjs-serializers": "4.2.0-alpha.5",
+        "babylonjs-gltf2interface": "4.2.0-alpha.5"
     },
     "devDependencies": {
         "@types/react": "~16.7.3",

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.2.0-alpha.4",
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs-gltf2interface": "4.2.0-alpha.5",
+        "babylonjs": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

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

@@ -492,6 +492,33 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export interface IColorPickerComponentProps {
+        value: BABYLON.Color4 | BABYLON.Color3;
+        onColorChanged: (newOne: string) => void;
+        disableAlpha?: boolean;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a?: number;
+        };
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     export interface IColor3LineComponentProps {
         label: string;
         target: any;

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

@@ -606,6 +606,35 @@ declare module "babylonjs-node-editor/components/propertyTab/properties/vector2P
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-node-editor/sharedComponents/colorPickerComponent" {
+    import * as React from "react";
+    import { Color4, Color3 } from 'babylonjs/Maths/math.color';
+    export interface IColorPickerComponentProps {
+        value: Color4 | Color3;
+        onColorChanged: (newOne: string) => void;
+        disableAlpha?: boolean;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a?: number;
+        };
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-node-editor/sharedComponents/color3LineComponent" {
     import * as React from "react";
     import { Observable } from "babylonjs/Misc/observable";
@@ -2204,6 +2233,33 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export interface IColorPickerComponentProps {
+        value: BABYLON.Color4 | BABYLON.Color3;
+        onColorChanged: (newOne: string) => void;
+        disableAlpha?: boolean;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a?: number;
+        };
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     export interface IColor3LineComponentProps {
         label: string;
         target: any;

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":114605,"engineOnly":151234,"sceneOnly":508412,"minGridMaterial":640273,"minStandardMaterial":781344}
+{"thinEngineOnly":114605,"engineOnly":151234,"sceneOnly":508624,"minGridMaterial":640485,"minStandardMaterial":781556}

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.4",
-        "babylonjs-gltf2interface": "4.2.0-alpha.4"
+        "babylonjs": "4.2.0-alpha.5",
+        "babylonjs-gltf2interface": "4.2.0-alpha.5"
     },
     "engines": {
         "node": "*"

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

@@ -1193,8 +1193,8 @@ declare module "babylonjs/Engines/Processors/Expressions/shaderDefineExpression"
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }
@@ -75471,8 +75471,8 @@ declare module BABYLON {
         isTrue(preprocessors: {
             [key: string]: string;
         }): boolean;
-        private static OperatorPriority;
-        private static Stack;
+        private static _OperatorPriority;
+        private static _Stack;
         static postfixToInfix(postfix: string[]): string;
         static infixToPostfix(infix: string): string[];
     }

inspector/src/components/actionTabs/actionTabs.scss

@@ -236,8 +236,6 @@ $line-padding-left: 2px;
                     .color-picker-float {
                         z-index: 2;
                         position: absolute;  
-                        width: 300px;
-                        height: 300px;
                     }                
                 }
 
@@ -370,6 +368,7 @@ $line-padding-left: 2px;
 
                         .color2{
                             height: 100%;
+                            padding-left: 5px;
                         }
                             
                         .factor1 {

inspector/src/components/actionTabs/lines/colorPickerComponent.tsx

@@ -52,8 +52,8 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
             top = window.innerHeight - height - 10;
         }
 
-        div.style.top = top + "px";
-        div.style.left = "10px";
+        div.style.top = top + "px";        
+        div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
     }
 
     shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {
@@ -84,24 +84,25 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
                 {
                     this.state.pickerEnabled &&
                     <>
-                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}></div>
-                        <div className="color-picker-float" ref={this._floatRef}>
-                            <SketchPicker color={color} 
-                                disableAlpha={this.props.disableAlpha}
-                                onChange={(color) => {
-                                    let hex: string;
-
-                                    if (this.props.disableAlpha) {
-                                        let newColor3 = Color3.FromInts(color.rgb.r, color.rgb.g, color.rgb.b);
-                                        hex = newColor3.toHexString();    
-                                    } else {
-                                        let newColor4 = Color4.FromInts(color.rgb.r, color.rgb.g, color.rgb.b, 255 * (color.rgb.a || 0));
-                                        hex = newColor4.toHexString();   
-                                    }
-                                    this.setState({hex: hex, color: color.rgb});
-                                    this.props.onColorChanged(hex);
-                                }}
-                            />
+                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}>
+                            <div className="color-picker-float" ref={this._floatRef}>
+                                <SketchPicker color={color} 
+                                    disableAlpha={this.props.disableAlpha}
+                                    onChange={(color) => {
+                                        let hex: string;
+
+                                        if (this.props.disableAlpha) {
+                                            let newColor3 = Color3.FromInts(color.rgb.r, color.rgb.g, color.rgb.b);
+                                            hex = newColor3.toHexString();    
+                                        } else {
+                                            let newColor4 = Color4.FromInts(color.rgb.r, color.rgb.g, color.rgb.b, 255 * (color.rgb.a || 0));
+                                            hex = newColor4.toHexString();   
+                                        }
+                                        this.setState({hex: hex, color: color.rgb});
+                                        this.props.onColorChanged(hex);
+                                    }}
+                                />
+                            </div>
                         </div>
                     </>
                 }                

inspector/src/components/actionTabs/tabs/propertyGrids/particleSystems/particleSystemPropertyGridComponent.tsx

@@ -299,10 +299,13 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     <TextLineComponent label="Active count" value={system.getActiveCount().toString()} />  
                     <TextureLinkLineComponent label="Texture" texture={system.particleTexture} onSelectionChangedObservable={this.props.onSelectionChangedObservable}/>
                     <OptionsLineComponent label="Blend mode" options={blendModeOptions} target={system} propertyName="blendMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <Vector3LineComponent label="World offset" target={system} propertyName="worldOffset"
+                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Vector3LineComponent label="Gravity" target={system} propertyName="gravity"
                         onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Is billboard" target={system} propertyName="isBillboardBased" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Is local" target={system} propertyName="isLocal" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Force depth write" target={system} propertyName="forceDepthWrite" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Update speed" target={system} propertyName="updateSpeed" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>                      
                 <LineContainerComponent globalState={this.props.globalState} title="COMMANDS">
@@ -674,6 +677,15 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                         mode={GradientGridMode.Factor}                        
                         lockObject={this.props.lockObject}/>                    
                 </LineContainerComponent>  
+                <LineContainerComponent globalState={this.props.globalState} title="SPRITESHEET" closed={true}>
+                    <CheckBoxLineComponent label="Animation sheet enabled" target={system} propertyName="isAnimationSheetEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="First sprite index" isInteger={true} target={system} propertyName="startSpriteCellID" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Last sprite index" isInteger={true} target={system} propertyName="endSpriteCellID" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Random start cell index" target={system} propertyName="spriteRandomStartCell" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Cell width" isInteger={true} target={system} propertyName="spriteCellWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Cell height" isInteger={true} target={system} propertyName="spriteCellHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Cell change speed" target={system} propertyName="spriteCellChangeSpeed" minimum={0} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
             </div>
         );
     }

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -208,6 +208,32 @@
         }
     }
 
+    .color-picker {
+        height: calc(100% - 8px);
+        margin: 4px;
+        width: calc(100% - 8px);
+
+        .color-rect {
+            height: calc(100% - 4px);
+            border: 2px white solid;
+            cursor: pointer;
+            min-height: 18px;
+        }
+
+        .color-picker-cover {
+            position: fixed;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+        }
+
+        .color-picker-float {
+            z-index: 2;
+            position: absolute;  
+        }                
+    }
+
     .gradient-step {
         display: grid;
         grid-template-rows: 100%;
@@ -508,7 +534,8 @@
             }
 
             .color3 {
-                grid-column: 2;
+                grid-column: 2;                
+                width: 50px;
                 
                 display: flex;
                 align-items: center;            

nodeEditor/src/sharedComponents/color3LineComponent.tsx

@@ -6,6 +6,7 @@ import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { GlobalState } from '../globalState';
+import { ColorPickerLineComponent } from './colorPickerComponent';
 
 const copyIcon: string = require("./copy.svg");
 
@@ -139,7 +140,6 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
     render() {
 
         const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;
-        const colorAsColor3 = this.state.color.getClassName() === "Color3" ? this.state.color : new Color3(this.state.color.r, this.state.color.g, this.state.color.b);
 
         return (
             <div className="color3Line">
@@ -148,7 +148,9 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
                         {this.props.label}
                     </div>
                     <div className="color3">
-                        <input type="color" value={colorAsColor3.toHexString()} onChange={(evt) => this.onChange(evt.target.value)} />
+                        <ColorPickerLineComponent value={this.state.color} disableAlpha={true} onColorChanged={color => {
+                                this.onChange(color);
+                            }} />  
                     </div>
                     <div className="copy hoverIcon" onClick={() => this.copyToClipboard()} title="Copy to clipboard">
                         <img src={copyIcon} alt=""/>

nodeEditor/src/sharedComponents/color4LineComponent.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { Observable } from "babylonjs/Misc/observable";
-import { Color3, Color4 } from "babylonjs/Maths/math.color";
+import { Color4 } from "babylonjs/Maths/math.color";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { GlobalState } from '../globalState';
+import { ColorPickerLineComponent } from './colorPickerComponent';
 
 const copyIcon: string = require("./copy.svg");
 
@@ -42,7 +43,7 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
 
     onChange(newValue: string) {
         this._localChange = true;
-        const newColor = Color3.FromHexString(newValue);
+        const newColor = Color4.FromHexString(newValue);
 
         if (this.props.onPropertyChangedObservable) {
             this.props.onPropertyChangedObservable.notifyObservers({
@@ -53,7 +54,7 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
             });
         }
 
-        this.props.target[this.props.propertyName] = new Color4(newColor.r, newColor.g, newColor.b, this.props.target[this.props.propertyName].a);
+        this.props.target[this.props.propertyName] = newColor;
 
         this.setState({ color: this.props.target[this.props.propertyName] });
 
@@ -150,7 +151,6 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
     render() {
 
         const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;
-        const colorAsColor3 = new Color3(this.state.color.r, this.state.color.g, this.state.color.b);
 
         return (
             <div className="color3Line">
@@ -159,7 +159,9 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
                         {this.props.label}
                     </div>
                     <div className="color3">
-                        <input type="color" value={colorAsColor3.toHexString()} onChange={(evt) => this.onChange(evt.target.value)} />
+                        <ColorPickerLineComponent value={this.state.color} onColorChanged={color => {
+                                this.onChange(color);
+                            }} />  
                     </div>
                     <div className="copy hoverIcon" onClick={() => this.copyToClipboard()} title="Copy to clipboard">
                         <img src={copyIcon} alt=""/>

nodeEditor/src/sharedComponents/colorPickerComponent.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { Color4, Color3 } from 'babylonjs/Maths/math.color';
+import { SketchPicker } from 'react-color';
+
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    onColorChanged: (newOne: string) => void;
+    disableAlpha?: boolean;
+}
+
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: {
+        r: number,
+        g: number,
+        b: number,
+        a?: number
+    },
+    hex: string
+}
+
+export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef: React.RefObject<HTMLDivElement>
+    private _floatHostRef: React.RefObject<HTMLDivElement>
+
+    constructor(props: IColorPickerComponentProps) {
+        super(props);
+
+        this.state = {pickerEnabled: false, color: {
+            r: this.props.value.r * 255,
+            g: this.props.value.g * 255,
+            b: this.props.value.b * 255,
+            a: this.props.value instanceof Color4 ? this.props.value.a * 100 : 100,
+        }, hex: this.props.value.toHexString()};
+        
+        this._floatRef = React.createRef();
+        this._floatHostRef = React.createRef();
+    }
+
+    syncPositions() {
+        const div = this._floatRef.current as HTMLDivElement;
+        const host = this._floatHostRef.current as HTMLDivElement;
+
+        if (!div || !host) {
+            return;
+        }
+
+        let top = host.getBoundingClientRect().top;
+        let height = div.getBoundingClientRect().height;
+
+        if (top + height + 10 > window.innerHeight) {
+            top = window.innerHeight - height - 10;
+        }
+
+        div.style.top = top + "px";
+        div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
+    }
+
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {
+        return nextProps.value.toHexString() !== this.props.value.toHexString() 
+            || nextProps.disableAlpha !== this.props.disableAlpha 
+            || nextState.hex !== this.state.hex
+            || nextState.pickerEnabled !== this.state.pickerEnabled;
+    }
+
+    componentDidUpdate() {
+        this.syncPositions();
+    }
+
+    componentDidMount() {
+        this.syncPositions();
+    }
+
+    render() {
+        var color = this.state.color;
+
+        return (
+            <div className="color-picker">
+                <div className="color-rect"  ref={this._floatHostRef} 
+                    style={{background: this.state.hex}} 
+                    onClick={() => this.setState({pickerEnabled: true})}>
+
+                </div>
+                {
+                    this.state.pickerEnabled &&
+                    <>
+                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}></div>
+                        <div className="color-picker-float" ref={this._floatRef}>
+                            <SketchPicker color={color} 
+                                disableAlpha={this.props.disableAlpha}
+                                onChange={(color) => {
+                                    let hex: string;
+
+                                    if (this.props.disableAlpha) {
+                                        let newColor3 = Color3.FromInts(color.rgb.r, color.rgb.g, color.rgb.b);
+                                        hex = newColor3.toHexString();    
+                                    } else {
+                                        let newColor4 = Color4.FromInts(color.rgb.r, color.rgb.g, color.rgb.b, 255 * (color.rgb.a || 0));
+                                        hex = newColor4.toHexString();   
+                                    }
+                                    this.setState({hex: hex, color: color.rgb});
+                                    this.props.onColorChanged(hex);
+                                }}
+                            />
+                        </div>
+                    </>
+                }                
+            </div>
+        );
+    }
+}

package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.2.0-alpha.4",
+    "version": "4.2.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -106,7 +106,7 @@
         "webpack-stream": "5.0.0",
         "xhr2": "^0.1.4",
         "xmlbuilder": "8.2.2",
-        "react-color": "^2.18.0",        
+        "react-color": "^2.18.0",
         "@types/react-color": "^3.0.1"
     }
-}
+}

src/Engines/Processors/Expressions/shaderDefineExpression.ts

@@ -4,20 +4,20 @@ export class ShaderDefineExpression {
         return true;
     }
 
-    private static OperatorPriority: { [name: string]: number } = {
+    private static _OperatorPriority: { [name: string]: number } = {
         ")": 0,
         "(": 1,
         "||": 2,
         "&&": 3,
     };
 
-    private static Stack = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
+    private static _Stack = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
 
     public static postfixToInfix(postfix: string[]): string {
         const stack: string[] = [];
 
         for (let c of postfix) {
-            if (ShaderDefineExpression.OperatorPriority[c] === undefined) {
+            if (ShaderDefineExpression._OperatorPriority[c] === undefined) {
                 stack.push(c);
             } else {
                 const v1 = stack[stack.length - 1],
@@ -45,14 +45,14 @@ export class ShaderDefineExpression {
         };
 
         const push = (s: string) => {
-            if (stackIdx < ShaderDefineExpression.Stack.length - 1) {
-                ShaderDefineExpression.Stack[++stackIdx] = s;
+            if (stackIdx < ShaderDefineExpression._Stack.length - 1) {
+                ShaderDefineExpression._Stack[++stackIdx] = s;
             }
         };
 
-        const peek = () => ShaderDefineExpression.Stack[stackIdx];
+        const peek = () => ShaderDefineExpression._Stack[stackIdx];
 
-        const pop = () => stackIdx === -1 ? '!!INVALID EXPRESSION!!' : ShaderDefineExpression.Stack[stackIdx--];
+        const pop = () => stackIdx === -1 ? '!!INVALID EXPRESSION!!' : ShaderDefineExpression._Stack[stackIdx--];
 
         let idx = 0,
             operand = '';
@@ -70,9 +70,9 @@ export class ShaderDefineExpression {
                     result.push(pop());
                 }
                 pop();
-            } else if (ShaderDefineExpression.OperatorPriority[token] > 1) {
+            } else if (ShaderDefineExpression._OperatorPriority[token] > 1) {
                 pushOperand();
-                while (stackIdx !== -1 && ShaderDefineExpression.OperatorPriority[peek()] >= ShaderDefineExpression.OperatorPriority[token]) {
+                while (stackIdx !== -1 && ShaderDefineExpression._OperatorPriority[peek()] >= ShaderDefineExpression._OperatorPriority[token]) {
                     result.push(pop());
                 }
                 push(token);

src/Engines/thinEngine.ts

@@ -132,14 +132,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.2.0-alpha.4";
+        return "babylonjs@4.2.0-alpha.5";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.2.0-alpha.4";
+        return "4.2.0-alpha.5";
     }
 
     /**