Merge remote-tracking branch 'remotes/origin/master' into engine-splitting

# Conflicts:
#	Playground/babylon.d.txt
#	dist/preview release/babylon.d.ts
#	dist/preview release/babylon.js
#	dist/preview release/babylon.max.js
#	dist/preview release/babylon.max.js.map
#	dist/preview release/babylon.module.d.ts
#	dist/preview release/documentation.d.ts
#	dist/preview release/packagesSizeBaseLine.json
#	dist/preview release/viewer/babylon.module.d.ts
#	dist/preview release/viewer/babylon.viewer.js
#	dist/preview release/viewer/babylon.viewer.max.js
#	src/Engines/engine.ts
#	src/Misc/performanceMonitor.ts

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

@@ -392,6 +392,9 @@ declare module NODEEDITOR {
         isEmbedded: boolean;
     }> {
         constructor(props: ITexturePropertyTabComponentProps);
+        UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {
+            isEmbedded: boolean;
+        }): void;
         private _generateRandomForCache;
         updateAftertextureLoad(): void;
         /**
@@ -1027,9 +1030,9 @@ declare module NODEEDITOR {
         private _onUpdateRequiredObserver;
         private _onPreviewBackgroundChangedObserver;
         private _onBackFaceCullingChangedObserver;
+        private _onLightUpdatedObserver;
         private _engine;
         private _scene;
-        private _light;
         private _meshes;
         private _camera;
         private _material;
@@ -1037,6 +1040,7 @@ declare module NODEEDITOR {
         private _currentType;
         constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState);
         private _handleAnimations;
+        private _prepareLights;
         private _prepareMeshes;
         private _refreshPreviewMesh;
         private _forceCompilationAsync;
@@ -1324,6 +1328,7 @@ declare module NODEEDITOR {
         onLogRequiredObservable: BABYLON.Observable<LogEntry>;
         onErrorMessageDialogRequiredObservable: BABYLON.Observable<string>;
         onPreviewCommandActivated: BABYLON.Observable<void>;
+        onLightUpdated: BABYLON.Observable<void>;
         onPreviewBackgroundChanged: BABYLON.Observable<void>;
         onBackFaceCullingChanged: BABYLON.Observable<void>;
         onAnimationCommandActivated: BABYLON.Observable<void>;
@@ -1334,6 +1339,8 @@ declare module NODEEDITOR {
         backgroundColor: BABYLON.Color4;
         backFaceCulling: boolean;
         blockKeyboardEvents: boolean;
+        hemisphericLight: boolean;
+        directionalLight0: boolean;
         customSave?: {
             label: string;
             action: (data: string) => Promise<void>;

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -70803,6 +70803,10 @@ var TexturePropertyTabComponent = /** @class */ (function (_super) {
         _this.state = { isEmbedded: !texture || texture.name.substring(0, 4) !== "http" };
         return _this;
     }
+    TexturePropertyTabComponent.prototype.UNSAFE_componentWillUpdate = function (nextProps, nextState) {
+        var texture = nextProps.node.texture;
+        nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+    };
     TexturePropertyTabComponent.prototype._generateRandomForCache = function () {
         return 'xxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, function (c) {
             var r = Math.random() * 10 | 0;
@@ -71417,7 +71421,21 @@ var PreviewAreaComponent = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faPalette"] })),
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { ref: "color-picker", id: "color-picker", type: "color", onChange: function (evt) { return _this.changeBackground(evt.target.value); } })),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { title: "Render without back face culling", onClick: function () { return _this.changeBackFaceCulling(!_this.props.globalState.backFaceCulling); }, className: "button" + (!this.props.globalState.backFaceCulling ? " selected" : "") },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faCheckDouble"] })))));
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faCheckDouble"] })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { title: "Turn on/off hemispheric light", onClick: function () {
+                        _this.props.globalState.hemisphericLight = !_this.props.globalState.hemisphericLight;
+                        _dataStorage__WEBPACK_IMPORTED_MODULE_5__["DataStorage"].StoreBoolean("HemisphericLight", _this.props.globalState.hemisphericLight);
+                        _this.props.globalState.onLightUpdated.notifyObservers();
+                        _this.forceUpdate();
+                    }, className: "button" + (this.props.globalState.hemisphericLight ? " selected" : "") },
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faSun"] })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { title: "Turn on/off direction light #0", onClick: function () {
+                        _this.props.globalState.directionalLight0 = !_this.props.globalState.directionalLight0;
+                        _dataStorage__WEBPACK_IMPORTED_MODULE_5__["DataStorage"].StoreBoolean("DirectionalLight0", _this.props.globalState.directionalLight0);
+                        _this.props.globalState.onLightUpdated.notifyObservers();
+                        _this.forceUpdate();
+                    }, className: "button" + (this.props.globalState.directionalLight0 ? " selected" : "") },
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__["faLocationArrow"] })))));
     };
     return PreviewAreaComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -71449,6 +71467,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var PreviewManager = /** @class */ (function () {
     function PreviewManager(targetCanvas, globalState) {
         var _this = this;
@@ -71461,6 +71480,9 @@ var PreviewManager = /** @class */ (function () {
         this._onPreviewCommandActivatedObserver = globalState.onPreviewCommandActivated.add(function () {
             _this._refreshPreviewMesh();
         });
+        this._onLightUpdatedObserver = globalState.onLightUpdated.add(function () {
+            _this._prepareLights();
+        });
         this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(function () {
             var serializationObject = _this._nodeMaterial.serialize();
             _this._updatePreview(serializationObject);
@@ -71505,11 +71527,23 @@ var PreviewManager = /** @class */ (function () {
             }
         }
     };
-    PreviewManager.prototype._prepareMeshes = function () {
-        // Light
-        if (!this._scene.lights.length) {
-            this._light = new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["HemisphericLight"]("light", new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["Vector3"](0, 1, 0), this._scene);
+    PreviewManager.prototype._prepareLights = function () {
+        // Remove current lights
+        var currentLights = this._scene.lights.slice(0);
+        for (var _i = 0, currentLights_1 = currentLights; _i < currentLights_1.length; _i++) {
+            var light = currentLights_1[_i];
+            light.dispose();
         }
+        // Create new lights based on settings
+        if (this._globalState.hemisphericLight) {
+            new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["HemisphericLight"]("Hemispheric light", new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["Vector3"](0, 1, 0), this._scene);
+        }
+        if (this._globalState.directionalLight0) {
+            new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["DirectionalLight"]("Directional light #0", new babylonjs_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__["Vector3"](-1, -1, 0), this._scene);
+        }
+    };
+    PreviewManager.prototype._prepareMeshes = function () {
+        this._prepareLights();
         // Framing
         this._camera.useFramingBehavior = true;
         var framingBehavior = this._camera.getBehaviorByName("Framing");
@@ -71621,6 +71655,7 @@ var PreviewManager = /** @class */ (function () {
         this._globalState.onAnimationCommandActivated.remove(this._onAnimationCommandActivatedObserver);
         this._globalState.onPreviewBackgroundChanged.remove(this._onPreviewBackgroundChangedObserver);
         this._globalState.onBackFaceCullingChanged.remove(this._onBackFaceCullingChangedObserver);
+        this._globalState.onLightUpdated.remove(this._onLightUpdatedObserver);
         if (this._material) {
             this._material.dispose();
         }
@@ -71629,9 +71664,6 @@ var PreviewManager = /** @class */ (function () {
             var mesh = _a[_i];
             mesh.dispose();
         }
-        if (this._light) {
-            this._light.dispose();
-        }
         this._scene.dispose();
         this._engine.dispose();
     };
@@ -72215,12 +72247,15 @@ var GlobalState = /** @class */ (function () {
         this.onLogRequiredObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.onErrorMessageDialogRequiredObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.onPreviewCommandActivated = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onLightUpdated = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.onPreviewBackgroundChanged = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.onBackFaceCullingChanged = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.onAnimationCommandActivated = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.blockKeyboardEvents = false;
         this.previewMeshType = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadNumber("PreviewMeshType", _components_preview_previewMeshType__WEBPACK_IMPORTED_MODULE_1__["PreviewMeshType"].Box);
         this.backFaceCulling = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadBoolean("BackFaceCulling", true);
+        this.hemisphericLight = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadBoolean("HemisphericLight", true);
+        this.directionalLight0 = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadBoolean("DirectionalLight0", true);
         var r = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadNumber("BackgroundColorR", 0.37);
         var g = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadNumber("BackgroundColorG", 0.37);
         var b = _dataStorage__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadNumber("BackgroundColorB", 0.37);

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

@@ -490,6 +490,9 @@ declare module "babylonjs-node-editor/components/diagram/texture/textureProperty
         isEmbedded: boolean;
     }> {
         constructor(props: ITexturePropertyTabComponentProps);
+        UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {
+            isEmbedded: boolean;
+        }): void;
         private _generateRandomForCache;
         updateAftertextureLoad(): void;
         /**
@@ -1234,9 +1237,9 @@ declare module "babylonjs-node-editor/components/preview/previewManager" {
         private _onUpdateRequiredObserver;
         private _onPreviewBackgroundChangedObserver;
         private _onBackFaceCullingChangedObserver;
+        private _onLightUpdatedObserver;
         private _engine;
         private _scene;
-        private _light;
         private _meshes;
         private _camera;
         private _material;
@@ -1244,6 +1247,7 @@ declare module "babylonjs-node-editor/components/preview/previewManager" {
         private _currentType;
         constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState);
         private _handleAnimations;
+        private _prepareLights;
         private _prepareMeshes;
         private _refreshPreviewMesh;
         private _forceCompilationAsync;
@@ -1603,6 +1607,7 @@ declare module "babylonjs-node-editor/globalState" {
         onLogRequiredObservable: Observable<LogEntry>;
         onErrorMessageDialogRequiredObservable: Observable<string>;
         onPreviewCommandActivated: Observable<void>;
+        onLightUpdated: Observable<void>;
         onPreviewBackgroundChanged: Observable<void>;
         onBackFaceCullingChanged: Observable<void>;
         onAnimationCommandActivated: Observable<void>;
@@ -1613,6 +1618,8 @@ declare module "babylonjs-node-editor/globalState" {
         backgroundColor: Color4;
         backFaceCulling: boolean;
         blockKeyboardEvents: boolean;
+        hemisphericLight: boolean;
+        directionalLight0: boolean;
         customSave?: {
             label: string;
             action: (data: string) => Promise<void>;
@@ -2056,6 +2063,9 @@ declare module NODEEDITOR {
         isEmbedded: boolean;
     }> {
         constructor(props: ITexturePropertyTabComponentProps);
+        UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {
+            isEmbedded: boolean;
+        }): void;
         private _generateRandomForCache;
         updateAftertextureLoad(): void;
         /**
@@ -2691,9 +2701,9 @@ declare module NODEEDITOR {
         private _onUpdateRequiredObserver;
         private _onPreviewBackgroundChangedObserver;
         private _onBackFaceCullingChangedObserver;
+        private _onLightUpdatedObserver;
         private _engine;
         private _scene;
-        private _light;
         private _meshes;
         private _camera;
         private _material;
@@ -2701,6 +2711,7 @@ declare module NODEEDITOR {
         private _currentType;
         constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState);
         private _handleAnimations;
+        private _prepareLights;
         private _prepareMeshes;
         private _refreshPreviewMesh;
         private _forceCompilationAsync;
@@ -2988,6 +2999,7 @@ declare module NODEEDITOR {
         onLogRequiredObservable: BABYLON.Observable<LogEntry>;
         onErrorMessageDialogRequiredObservable: BABYLON.Observable<string>;
         onPreviewCommandActivated: BABYLON.Observable<void>;
+        onLightUpdated: BABYLON.Observable<void>;
         onPreviewBackgroundChanged: BABYLON.Observable<void>;
         onBackFaceCullingChanged: BABYLON.Observable<void>;
         onAnimationCommandActivated: BABYLON.Observable<void>;
@@ -2998,6 +3010,8 @@ declare module NODEEDITOR {
         backgroundColor: BABYLON.Color4;
         backFaceCulling: boolean;
         blockKeyboardEvents: boolean;
+        hemisphericLight: boolean;
+        directionalLight0: boolean;
         customSave?: {
             label: string;
             action: (data: string) => Promise<void>;

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

@@ -29,6 +29,12 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         this.state = {isEmbedded: !texture || texture.name.substring(0, 4) !== "http"};
     }
 
+    UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {isEmbedded: boolean}) {
+        let texture = nextProps.node.texture as BaseTexture;
+
+        nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+    }
+
     private _generateRandomForCache() {
         return 'xxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, (c) => {
             var r = Math.random() * 10 | 0;

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { GlobalState } from '../../globalState';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlay, faStop, faPalette, faCheckDouble } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faStop, faPalette, faCheckDouble, faSun, faLocationArrow } from '@fortawesome/free-solid-svg-icons';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { DataStorage } from '../../dataStorage';
 
@@ -62,6 +62,26 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent>
                         onClick={() => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling)} className={"button" + (!this.props.globalState.backFaceCulling ? " selected" : "")}>
                         <FontAwesomeIcon icon={faCheckDouble} />
                     </div>  
+                    <div
+                        title="Turn on/off hemispheric light"  
+                        onClick={() => {
+                            this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;                            
+                            DataStorage.StoreBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
+                            this.props.globalState.onLightUpdated.notifyObservers();
+                            this.forceUpdate();
+                        }} className={"button" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faSun} />
+                    </div>    
+                    <div
+                        title="Turn on/off direction light #0"  
+                        onClick={() => {
+                            this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;                       
+                            DataStorage.StoreBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
+                            this.props.globalState.onLightUpdated.notifyObservers();
+                            this.forceUpdate();
+                        }} className={"button" + (this.props.globalState.directionalLight0 ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faLocationArrow} />
+                    </div>                  
                 </div>
             </>
         );

nodeEditor/src/components/preview/previewManager.ts

@@ -14,6 +14,7 @@ import { SceneLoader } from 'babylonjs/Loading/sceneLoader';
 import { TransformNode } from 'babylonjs/Meshes/transformNode';
 import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
 import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
+import { DirectionalLight } from 'babylonjs/Lights/directionalLight';
 
 export class PreviewManager {
     private _nodeMaterial: NodeMaterial;
@@ -23,9 +24,9 @@ export class PreviewManager {
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;
     private _onPreviewBackgroundChangedObserver: Nullable<Observer<void>>;
     private _onBackFaceCullingChangedObserver: Nullable<Observer<void>>;
+    private _onLightUpdatedObserver: Nullable<Observer<void>>;
     private _engine: Engine;
     private _scene: Scene;
-    private _light: HemisphericLight;
     private _meshes: AbstractMesh[];
     private _camera: ArcRotateCamera;
     private _material: NodeMaterial;
@@ -45,6 +46,10 @@ export class PreviewManager {
             this._refreshPreviewMesh();
         });
 
+        this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
+            this._prepareLights();
+        });        
+
         this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(() => {
             let serializationObject = this._nodeMaterial.serialize();
             this._updatePreview(serializationObject);
@@ -99,11 +104,26 @@ export class PreviewManager {
         }
     }
 
-    private _prepareMeshes() {
-        // Light
-        if (!this._scene.lights.length) {
-            this._light = new HemisphericLight("light", new Vector3(0, 1, 0), this._scene);
+    private _prepareLights() {
+        // Remove current lights
+        let currentLights = this._scene.lights.slice(0);
+
+        for (var light of currentLights) {
+            light.dispose();
+        }
+
+        // Create new lights based on settings
+        if (this._globalState.hemisphericLight) {
+            new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);            
+        }
+
+        if (this._globalState.directionalLight0) {
+            new DirectionalLight("Directional light #0", new Vector3(-1, -1, 0), this._scene);            
         }
+    }
+
+    private _prepareMeshes() {
+        this._prepareLights();
 
         // Framing
         this._camera.useFramingBehavior = true;
@@ -227,6 +247,7 @@ export class PreviewManager {
         this._globalState.onAnimationCommandActivated.remove(this._onAnimationCommandActivatedObserver);
         this._globalState.onPreviewBackgroundChanged.remove(this._onPreviewBackgroundChangedObserver);
         this._globalState.onBackFaceCullingChanged.remove(this._onBackFaceCullingChangedObserver);
+        this._globalState.onLightUpdated.remove(this._onLightUpdatedObserver);
 
         if (this._material) {
             this._material.dispose();
@@ -237,10 +258,6 @@ export class PreviewManager {
             mesh.dispose();
         }
 
-        if (this._light) {
-            this._light.dispose();
-        }
-
         this._scene.dispose();
         this._engine.dispose();
     }

nodeEditor/src/globalState.ts

@@ -23,6 +23,7 @@ export class GlobalState {
     onLogRequiredObservable = new Observable<LogEntry>();
     onErrorMessageDialogRequiredObservable = new Observable<string>();
     onPreviewCommandActivated = new Observable<void>();
+    onLightUpdated = new Observable<void>();
     onPreviewBackgroundChanged = new Observable<void>();
     onBackFaceCullingChanged = new Observable<void>();
     onAnimationCommandActivated = new Observable<void>();
@@ -33,12 +34,16 @@ export class GlobalState {
     backgroundColor: Color4;
     backFaceCulling: boolean;
     blockKeyboardEvents = false;
+    hemisphericLight: boolean;
+    directionalLight0: boolean;
     
     customSave?: {label: string, action: (data: string) => Promise<void>};
 
     public constructor() {
         this.previewMeshType = DataStorage.ReadNumber("PreviewMeshType", PreviewMeshType.Box);
         this.backFaceCulling = DataStorage.ReadBoolean("BackFaceCulling", true);
+        this.hemisphericLight = DataStorage.ReadBoolean("HemisphericLight", true);
+        this.directionalLight0 = DataStorage.ReadBoolean("DirectionalLight0", true);
 
         let r = DataStorage.ReadNumber("BackgroundColorR", 0.37);
         let g = DataStorage.ReadNumber("BackgroundColorG", 0.37);

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

@@ -43,8 +43,11 @@ export class LightBlock extends NodeMaterialBlock {
 
         this.registerInput("worldPosition", NodeMaterialBlockConnectionPointTypes.Vector4, false, NodeMaterialBlockTargets.Vertex);
         this.registerInput("worldNormal", NodeMaterialBlockConnectionPointTypes.Vector4, false, NodeMaterialBlockTargets.Fragment);
-
         this.registerInput("cameraPosition", NodeMaterialBlockConnectionPointTypes.Vector3, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("glossiness", NodeMaterialBlockConnectionPointTypes.Float, true, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("diffuseColor", NodeMaterialBlockConnectionPointTypes.Color3, true, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("specularColor", NodeMaterialBlockConnectionPointTypes.Color3, true, NodeMaterialBlockTargets.Fragment);
+
         this.registerOutput("diffuseOutput", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
         this.registerOutput("specularOutput", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
     }
@@ -79,6 +82,27 @@ export class LightBlock extends NodeMaterialBlock {
     }
 
     /**
+    * Gets the glossiness component
+    */
+    public get glossiness(): NodeMaterialConnectionPoint {
+        return this._inputs[3];
+    }
+
+    /**
+    * Gets the diffuse color component
+    */
+    public get diffuseColor(): NodeMaterialConnectionPoint {
+        return this._inputs[4];
+    }
+
+    /**
+    * Gets the specular color component
+    */
+    public get specularColor(): NodeMaterialConnectionPoint {
+        return this._inputs[5];
+    }
+
+    /**
      * Gets the diffuse output component
      */
     public get diffuseOutput(): NodeMaterialConnectionPoint {
@@ -247,7 +271,7 @@ export class LightBlock extends NodeMaterialBlock {
             }
             state.compilationString += `lightingInfo info;\r\n`;
             state.compilationString += `float shadow = 1.;\r\n`;
-            state.compilationString += `float glossiness = 0.;\r\n`;
+            state.compilationString += `float glossiness = ${this.glossiness.isConnected ? this.glossiness.associatedVariableName : "64.0"};\r\n`;
             state.compilationString += `vec3 diffuseBase = vec3(0., 0., 0.);\r\n`;
             state.compilationString += `vec3 specularBase = vec3(0., 0., 0.);\r\n`;
             state.compilationString += `vec3 normalW = ${this.worldNormal.associatedVariableName}.xyz;\r\n`;
@@ -268,9 +292,9 @@ export class LightBlock extends NodeMaterialBlock {
         let diffuseOutput = this.diffuseOutput;
         let specularOutput = this.specularOutput;
 
-        state.compilationString += this._declareOutput(diffuseOutput, state) + ` = diffuseBase;\r\n`;
+        state.compilationString += this._declareOutput(diffuseOutput, state) + ` = diffuseBase${this.diffuseColor.isConnected ? " * " + this.diffuseColor.associatedVariableName : ""};\r\n`;
         if (specularOutput.hasEndpoints) {
-            state.compilationString += this._declareOutput(specularOutput, state) + ` = specularBase;\r\n`;
+            state.compilationString += this._declareOutput(specularOutput, state) + ` = specularBase${this.specularColor.isConnected ? " * " + this.specularColor.associatedVariableName : ""};\r\n`;
         }
 
         return this;