Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

dist/preview release/babylon.d.ts

@@ -20453,6 +20453,10 @@ declare module BABYLON {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -21564,7 +21568,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */

dist/preview release/babylon.max.js

@@ -38657,7 +38657,7 @@ var ThinEngine = /** @class */ (function () {
          */
         // Not mixed with Version for tooling purpose.
         get: function () {
-            return "babylonjs@4.2.0-alpha.17";
+            return "babylonjs@4.2.0-alpha.18";
         },
         enumerable: true,
         configurable: true
@@ -38667,7 +38667,7 @@ var ThinEngine = /** @class */ (function () {
          * Returns the current version of the framework
          */
         get: function () {
-            return "4.2.0-alpha.17";
+            return "4.2.0-alpha.18";
         },
         enumerable: true,
         configurable: true
@@ -80077,9 +80077,9 @@ var NodeMaterialBlock = /** @class */ (function () {
     NodeMaterialBlock.prototype._deserialize = function (serializationObject, scene, rootUrl) {
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
-        this._deserializePortDisplayNames(serializationObject);
+        this._deserializePortDisplayNamesAndExposedOnFrame(serializationObject);
     };
-    NodeMaterialBlock.prototype._deserializePortDisplayNames = function (serializationObject) {
+    NodeMaterialBlock.prototype._deserializePortDisplayNamesAndExposedOnFrame = function (serializationObject) {
         var _this = this;
         var serializedInputs = serializationObject.inputs;
         var serializedOutputs = serializationObject.outputs;
@@ -80088,6 +80088,9 @@ var NodeMaterialBlock = /** @class */ (function () {
                 if (port.displayName) {
                     _this.inputs[i].displayName = port.displayName;
                 }
+                if (port.isExposedOnFrame) {
+                    _this.inputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                }
             });
         }
         if (serializedOutputs) {
@@ -80095,6 +80098,9 @@ var NodeMaterialBlock = /** @class */ (function () {
                 if (port.displayName) {
                     _this.outputs[i].displayName = port.displayName;
                 }
+                if (port.isExposedOnFrame) {
+                    _this.outputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                }
             });
         }
     };
@@ -80193,6 +80199,10 @@ var NodeMaterialConnectionPoint = /** @class */ (function () {
          * Observable triggered when this point is connected
          */
         this.onConnectionObservable = new _Misc_observable__WEBPACK_IMPORTED_MODULE_2__["Observable"]();
+        /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        this.isExposedOnFrame = false;
         /** @hidden */
         this._prioritizeVertex = false;
         this._target = _Enums_nodeMaterialBlockTargets__WEBPACK_IMPORTED_MODULE_1__["NodeMaterialBlockTargets"].VertexAndFragment;
@@ -80559,6 +80569,9 @@ var NodeMaterialConnectionPoint = /** @class */ (function () {
             serializationObject.targetBlockId = this.connectedPoint.ownerBlock.uniqueId;
             serializationObject.targetConnectionName = this.connectedPoint.name;
         }
+        if (this.isExposedOnFrame) {
+            serializationObject.isExposedOnFrame = this.isExposedOnFrame;
+        }
         return serializationObject;
     };
     /**
@@ -81674,7 +81687,7 @@ var PBRMaterialDefines = /** @class */ (function (_super) {
     function PBRMaterialDefines() {
         var _this = _super.call(this) || this;
         _this.PBR = true;
-        _this.NUM_SAMPLES = "0u";
+        _this.NUM_SAMPLES = "0";
         _this.REALTIME_FILTERING = false;
         _this.MAINUV1 = false;
         _this.MAINUV2 = false;
@@ -98583,30 +98596,16 @@ var Material = /** @class */ (function () {
                 var allDone = true, lastError = null;
                 if (mesh.subMeshes) {
                     var tempSubMesh = new _Meshes_subMesh__WEBPACK_IMPORTED_MODULE_5__["SubMesh"](0, 0, 0, 0, 0, mesh, undefined, false, false);
-                    if (_this._storeEffectOnSubMeshes) {
-                        if (tempSubMesh._materialDefines) {
-                            tempSubMesh._materialDefines._renderId = -1;
-                        }
-                        if (!_this.isReadyForSubMesh(mesh, tempSubMesh, localOptions.useInstances)) {
-                            if (tempSubMesh.effect && tempSubMesh.effect.getCompilationError() && tempSubMesh.effect.allFallbacksProcessed()) {
-                                lastError = tempSubMesh.effect.getCompilationError();
-                            }
-                            else {
-                                allDone = false;
-                                setTimeout(checkReady, 16);
-                            }
-                        }
+                    if (tempSubMesh._materialDefines) {
+                        tempSubMesh._materialDefines._renderId = -1;
                     }
-                    else {
-                        tempSubMesh._renderId = -1;
-                        if (!_this.isReady(mesh, localOptions.useInstances)) {
-                            if (_this.getEffect() && _this.getEffect().getCompilationError() && _this.getEffect().allFallbacksProcessed()) {
-                                lastError = _this.getEffect().getCompilationError();
-                            }
-                            else {
-                                allDone = false;
-                                setTimeout(checkReady, 16);
-                            }
+                    if (!_this.isReadyForSubMesh(mesh, tempSubMesh, localOptions.useInstances)) {
+                        if (tempSubMesh.effect && tempSubMesh.effect.getCompilationError() && tempSubMesh.effect.allFallbacksProcessed()) {
+                            lastError = tempSubMesh.effect.getCompilationError();
+                        }
+                        else {
+                            allDone = false;
+                            setTimeout(checkReady, 16);
                         }
                     }
                 }

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

@@ -21082,6 +21082,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -22273,7 +22277,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */
@@ -97988,6 +97992,10 @@ declare module BABYLON {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -99099,7 +99107,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */

dist/preview release/documentation.d.ts

@@ -20453,6 +20453,10 @@ declare module BABYLON {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -21564,7 +21568,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */

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.17",
+    "version": "4.2.0-alpha.18",
     "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.17",
+    "version": "4.2.0-alpha.18",
     "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.17"
+        "babylonjs": "4.2.0-alpha.18"
     },
     "engines": {
         "node": "*"

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

@@ -647,6 +647,17 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export interface IIconButtonLineComponentProps {
+        icon: string;
+        onClick: () => void;
+        tooltip: string;
+    }
+    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+        constructor(props: IIconButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface IGraphActionsBarProps {
         addKeyframe: () => void;
         removeKeyframe: () => void;
@@ -659,6 +670,9 @@ declare module INSPECTOR {
         lerpMode: boolean;
         currentValue: number;
         currentFrame: number;
+        title: string;
+        close: (event: any) => void;
+        enabled: boolean;
     }
     export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
         constructor(props: IGraphActionsBarProps);
@@ -669,7 +683,6 @@ declare module INSPECTOR {
     interface IAnimationCurveEditorComponentProps {
         close: (event: any) => void;
         playOrPause?: () => void;
-        title: string;
         scene: BABYLON.Scene;
         entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
     }
@@ -769,7 +782,7 @@ declare module INSPECTOR {
         };
         linearInterpolation(keyframes: BABYLON.IAnimationKey[], data: string, middle: number): string;
         setKeyframePointLinear(point: BABYLON.Vector2, index: number): void;
-        getPathData(animation: BABYLON.Animation): string;
+        getPathData(animation: BABYLON.Animation | null): string;
         getAnimationData(animation: BABYLON.Animation): {
             loopMode: number | undefined;
             name: string;

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

@@ -726,6 +726,18 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/lines/iconButtonLineComponent" {
+    import * as React from "react";
+    export interface IIconButtonLineComponentProps {
+        icon: string;
+        onClick: () => void;
+        tooltip: string;
+    }
+    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+        constructor(props: IIconButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/animations/graphActionsBar" {
     import * as React from "react";
     interface IGraphActionsBarProps {
@@ -740,6 +752,9 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         lerpMode: boolean;
         currentValue: number;
         currentFrame: number;
+        title: string;
+        close: (event: any) => void;
+        enabled: boolean;
     }
     export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
         constructor(props: IGraphActionsBarProps);
@@ -759,7 +774,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
     interface IAnimationCurveEditorComponentProps {
         close: (event: any) => void;
         playOrPause?: () => void;
-        title: string;
         scene: Scene;
         entity: IAnimatable | TargetedAnimation;
     }
@@ -859,7 +873,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         };
         linearInterpolation(keyframes: IAnimationKey[], data: string, middle: number): string;
         setKeyframePointLinear(point: Vector2, index: number): void;
-        getPathData(animation: Animation): string;
+        getPathData(animation: Animation | null): string;
         getAnimationData(animation: Animation): {
             loopMode: number | undefined;
             name: string;
@@ -3942,6 +3956,17 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export interface IIconButtonLineComponentProps {
+        icon: string;
+        onClick: () => void;
+        tooltip: string;
+    }
+    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+        constructor(props: IIconButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface IGraphActionsBarProps {
         addKeyframe: () => void;
         removeKeyframe: () => void;
@@ -3954,6 +3979,9 @@ declare module INSPECTOR {
         lerpMode: boolean;
         currentValue: number;
         currentFrame: number;
+        title: string;
+        close: (event: any) => void;
+        enabled: boolean;
     }
     export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
         constructor(props: IGraphActionsBarProps);
@@ -3964,7 +3992,6 @@ declare module INSPECTOR {
     interface IAnimationCurveEditorComponentProps {
         close: (event: any) => void;
         playOrPause?: () => void;
-        title: string;
         scene: BABYLON.Scene;
         entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
     }
@@ -4064,7 +4091,7 @@ declare module INSPECTOR {
         };
         linearInterpolation(keyframes: BABYLON.IAnimationKey[], data: string, middle: number): string;
         setKeyframePointLinear(point: BABYLON.Vector2, index: number): void;
-        getPathData(animation: BABYLON.Animation): string;
+        getPathData(animation: BABYLON.Animation | null): string;
         getAnimationData(animation: BABYLON.Animation): {
             loopMode: number | undefined;
             name: string;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.2.0-alpha.17",
+    "version": "4.2.0-alpha.18",
     "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.17",
-        "babylonjs-gui": "4.2.0-alpha.17",
-        "babylonjs-loaders": "4.2.0-alpha.17",
-        "babylonjs-materials": "4.2.0-alpha.17",
-        "babylonjs-serializers": "4.2.0-alpha.17",
-        "babylonjs-gltf2interface": "4.2.0-alpha.17"
+        "babylonjs": "4.2.0-alpha.18",
+        "babylonjs-gui": "4.2.0-alpha.18",
+        "babylonjs-loaders": "4.2.0-alpha.18",
+        "babylonjs-materials": "4.2.0-alpha.18",
+        "babylonjs-serializers": "4.2.0-alpha.18",
+        "babylonjs-gltf2interface": "4.2.0-alpha.18"
     },
     "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.17",
+    "version": "4.2.0-alpha.18",
     "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.17",
-        "babylonjs": "4.2.0-alpha.17"
+        "babylonjs-gltf2interface": "4.2.0-alpha.18",
+        "babylonjs": "4.2.0-alpha.18"
     },
     "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.17",
+    "version": "4.2.0-alpha.18",
     "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.17"
+        "babylonjs": "4.2.0-alpha.18"
     },
     "engines": {
         "node": "*"

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

@@ -65204,7 +65204,7 @@ var NodePort = /** @class */ (function () {
     };
     Object.defineProperty(NodePort.prototype, "exposedOnFrame", {
         get: function () {
-            if (!!this._exposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
+            if (!!this.connectionPoint.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
                 return true;
             }
             return false;
@@ -65213,7 +65213,7 @@ var NodePort = /** @class */ (function () {
             if (this.disabled) {
                 return;
             }
-            this._exposedOnFrame = value;
+            this.connectionPoint.isExposedOnFrame = value;
         },
         enumerable: true,
         configurable: true

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.17",
+    "version": "4.2.0-alpha.18",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-alpha.17"
+        "babylonjs": "4.2.0-alpha.18"
     },
     "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.17",
+    "version": "4.2.0-alpha.18",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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.17",
+    "version": "4.2.0-alpha.18",
     "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.17"
+        "babylonjs": "4.2.0-alpha.18"
     },
     "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.17",
+    "version": "4.2.0-alpha.18",
     "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.17"
+        "babylonjs": "4.2.0-alpha.18"
     },
     "engines": {
         "node": "*"

dist/preview release/readme.md

@@ -111,7 +111,7 @@ If you want to contribute, please read our [contribution guidelines](https://git
 - [Examples](https://doc.babylonjs.com/examples)
 
 ## Contributing
-Please see the [Contributing Guidelines](./contributing.md)
+Please see the [Contributing Guidelines](./contributing.md).
 
 ## Useful links
 

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.17",
+    "version": "4.2.0-alpha.18",
     "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.17",
-        "babylonjs-gltf2interface": "4.2.0-alpha.17"
+        "babylonjs": "4.2.0-alpha.18",
+        "babylonjs-gltf2interface": "4.2.0-alpha.18"
     },
     "engines": {
         "node": "*"

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

@@ -21082,6 +21082,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -22273,7 +22277,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */
@@ -97988,6 +97992,10 @@ declare module BABYLON {
          */
         isOptional: boolean;
         /**
+         * Gets or sets a boolean indicating that this connection point is exposed on a frame
+         */
+        isExposedOnFrame: boolean;
+        /**
          * Gets or sets a string indicating that this uniform must be defined under a #ifdef
          */
         define: string;
@@ -99099,7 +99107,7 @@ declare module BABYLON {
         serialize(): any;
         /** @hidden */
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
-        private _deserializePortDisplayNames;
+        private _deserializePortDisplayNamesAndExposedOnFrame;
         /**
          * Release resources
          */

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - Added HDR texture filtering tools to the sandbox ([Sebavan](https://github.com/sebavan/))
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage entity's animations and edit animation within animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 
@@ -47,6 +47,7 @@
 - Fix bug where long comments on collapsed frames broke port alignment ([belfortk](https://github.com/belfortk))
 - Add the `FragCoord` and `ScreenSize` blocks ([Popov72](https://github.com/Popov72))
 - Particle systems: add the `ParticlePositionWorld` block ([Popov72](https://github.com/Popov72))
+- Add isExposedOnFrame property to connection points ([belfortk](https://github.com/belfortk))
 
 ### Inspector
 

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface IIconButtonLineComponentProps {
+    icon: string;
+    onClick: () => void;
+    tooltip: string;
+}
+
+export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+    constructor(props: IIconButtonLineComponentProps) {
+        super(props);
+    }
+
+    render() {
+
+        return (
+            <div title={this.props.tooltip} className={`icon ${this.props.icon}`} onClick={() => this.props.onClick()} />
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { Animation } from 'babylonjs/Animations/animation';
 import { Vector2, Vector3, Quaternion } from 'babylonjs/Maths/math.vector';
 import { Size } from 'babylonjs/Maths/math.size';
@@ -24,7 +22,6 @@ require("./curveEditor.scss");
 interface IAnimationCurveEditorComponentProps {
     close: (event: any) => void;
     playOrPause?: () => void;
-    title: string;
     scene: Scene;
     entity: IAnimatable | TargetedAnimation;
 }
@@ -87,13 +84,18 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         if (this.props.entity instanceof TargetedAnimation) {
             this._isTargetedAnimation = true;
             initialSelection = this.props.entity.animation;
-            initialLerpMode = this.analizeAnimation(this.props.entity.animation);
-            initialPathData = this.getPathData(this.props.entity.animation);
+            initialLerpMode = initialSelection !== undefined ? this.analizeAnimation(initialSelection) : false;
+            initialPathData = initialSelection !== undefined ? this.getPathData(initialSelection) : "";
         } else {
             this._isTargetedAnimation = false;
-            initialLerpMode = this.analizeAnimation(this.props.entity.animations && this.props.entity.animations[0]);
-            initialSelection = this.props.entity.animations !== null ? this.props.entity.animations[0] : null;
-            initialPathData = this.props.entity.animations !== null ? this.getPathData(this.props.entity.animations[0]) : "";
+
+            let hasAnimations = this.props.entity.animations !== undefined || this.props.entity.animations !== null ? this.props.entity.animations : false;
+            initialSelection = hasAnimations !== false ? hasAnimations && hasAnimations[0] : null;
+
+
+            initialLerpMode = initialSelection !== undefined ? this.analizeAnimation(this.props.entity.animations && initialSelection) : false;
+            initialPathData = initialSelection && this.getPathData(initialSelection);
+            initialPathData = initialPathData === null || initialPathData === undefined ? "" : initialPathData;
         }
 
         // will update this until we have a top scroll/zoom feature
@@ -780,7 +782,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         this._svgKeyframes.push(svgKeyframe);
     }
 
-    getPathData(animation: Animation) {
+    getPathData(animation: Animation | null) {
+
+        if (animation === null){
+            return "";
+        }
 
         // Check if Tangent mode is active and broken mode is active. (Only one tangent moves)
         let keyframes = animation.getKeys();
@@ -847,7 +853,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         }
 
         return data;
-
+        
     }
 
     getAnimationData(animation: Animation) {
@@ -1258,14 +1264,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
                 <Notification message={this.state.notification} open={this.state.notification !== "" ? true : false} close={() => this.clearNotification()} />
 
-                <div className="header">
-                    <div className="title">{this.props.title}</div>
-                    <div className="close" onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => this.props.close(event)}>
-                        <FontAwesomeIcon icon={faTimes} />
-                    </div>
-                </div>
-
-                <GraphActionsBar currentValue={this.state.currentValue}
+                <GraphActionsBar
+                    enabled={this.state.selected === null || this.state.selected === undefined ? false : true}
+                    title={this._entityName}
+                    close={this.props.close}
+                    currentValue={this.state.currentValue}
                     currentFrame={this.state.currentFrame}
                     handleFrameChange={(e) => this.handleFrameChange(e)}
                     handleValueChange={(e) => this.handleValueChange(e)}
@@ -1276,7 +1279,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                     lerpMode={this.state.lerpMode}
                     setLerpMode={() => this.setLerpMode()}
                     flatTangent={() => this.setFlatTangent()} />
-
+                    
                 <div className="content">
                     <div className="row">
                         <div className="animation-list">
@@ -1305,7 +1308,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                             </div>
 
                             <div className="object-tree">
-                                <h2>{this._entityName}</h2>
                                 <ul>
                                     {
 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationPropertyGridComponent.tsx

@@ -199,12 +199,11 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                                 this._isCurveEditorOpen && <PopupComponent
                                     id="curve-editor"
                                     title="Curve Animation Editor"
-                                    size={{ width: 950, height: 540 }}
+                                    size={{ width: 1024, height: 490 }}
                                     onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                                     onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 
                                     <AnimationCurveEditorComponent 
-                                        title="Animations Curve Editor" 
                                         scene={this.props.scene} 
                                         entity={animatableAsAny} 
                                         close={(event) => this.onCloseAnimationCurveEditor(event.view)} 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/addAnimationIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="30" height="30"/><path class="cls-2" d="M23,14.5v1H15.5V23h-1V15.5H7v-1h7.5V7h1v7.5Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationBulletIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:#888;}.cls-2{fill:none;}</style></defs><g id="UI"><circle class="cls-1" cx="5" cy="5" r="2.89"/><rect class="cls-2" width="10" height="10"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationDeleteIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="20" height="20"/><path class="cls-2" d="M10.71,10,15,14.29l-.71.71L10,10.71,5.71,15,5,14.29,9.29,10,5,5.71,5.71,5,10,9.29,14.29,5l.71.71Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationEndIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><path class="cls-2" d="M10.29,23,3.5,28.05V17.9Zm.21-5.07V28.05L17.29,23Zm9-.9h-2V29h2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationNextKeyHoverIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ccc;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="14.93 22.86 4.79 28.71 4.79 17 14.93 22.86"/><rect class="cls-3" x="15.21" y="17" width="3" height="12"/><rect class="cls-2" x="16.21" y="14" width="1" height="3"/><rect class="cls-2" x="16.21" y="29" width="1" height="3"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationNextKeyIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="14.93 22.86 4.79 28.71 4.79 17 14.93 22.86"/><rect class="cls-3" x="15.21" y="17" width="3" height="12"/><rect class="cls-2" x="16.21" y="14" width="1" height="3"/><rect class="cls-2" x="16.21" y="29" width="1" height="3"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationPlayFwdIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="18.19 23.39 4.81 31.12 4.81 15.66 18.19 23.39"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationPlayRevIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="4.81 23.39 18.19 31.12 18.19 15.66 4.81 23.39"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationStartIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><path class="cls-2" d="M19.5,17.9V28.05L12.71,23ZM5.71,23l6.79,5.08V17.9ZM3.5,29h2V17h-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationStopIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#8c2f2f;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><rect class="cls-2" x="5" y="16.61" width="13" height="13"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationTriangleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:#888;}.cls-2{fill:none;}</style></defs><g id="UI"><polygon class="cls-1" points="5 7.81 8.25 2.19 1.75 2.19 5 7.81"/><rect class="cls-2" width="10" height="10"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/autoTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M28,18.79a1.51,1.51,0,0,0-1.41,1H22l-1-3.86H19.9L19,19.79H13.41a1.5,1.5,0,1,0,0,1h5.32l-.79,3.28h.88l.6-2.58h2.11l.6,2.58h1l-.81-3.28h4.31a1.5,1.5,0,1,0,1.41-2Zm-8.41,1.9c.41-1.75.73-3.21.85-3.92h0c.1.65.42,1.92.88,3.92Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/breakTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M26.25,13.2a1.5,1.5,0,0,0-1.89,2.27L20.27,24A1.55,1.55,0,0,0,20,24l-.23,0-4.09-8.55a1.5,1.5,0,1,0-2.44-.22,1.51,1.51,0,0,0,1.57.72l4.08,8.53a1.5,1.5,0,1,0,2.27.05L25.23,16a1.5,1.5,0,0,0,1-2.77Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/closeWindowIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M21.13,20,28,26.87,26.87,28,20,21.13,13.13,28,12,26.87,18.87,20,12,13.13,13.13,12,20,18.87,26.87,12,28,13.13Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/flatTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M28,18.5a1.51,1.51,0,0,0-1.41,1H13.41a1.5,1.5,0,1,0,0,1H26.59a1.5,1.5,0,1,0,1.41-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/frameIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M25,19V17H23V16h3v3ZM15,17v2H14V16h3v1Zm11,4v3H23V23h2V21Zm-9,2v1H14V21h1v2Zm-5-9H28V26H12ZM27,25V15H13V25Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keyActiveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#111;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.67" y="2.67" width="4.66" height="4.66" transform="translate(-2.07 5) rotate(-45)"/><path class="cls-3" d="M5,2.41,7.59,5,5,7.59,2.41,5,5,2.41M5,1,1,5,5,9,9,5,5,1Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keyInactiveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#111;}.cls-3{fill:#aaa;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.67" y="2.67" width="4.66" height="4.66" transform="translate(-2.07 5) rotate(-45)"/><path class="cls-3" d="M5,2.41,7.59,5,5,7.59,2.41,5,5,2.41M5,1,1,5,5,9,9,5,5,1Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keySelectedIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.17" y="2.17" width="5.66" height="5.66" transform="translate(-2.07 5) rotate(-45)"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/linearTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M26.41,14.3l-.71-.71-10,10a1.5,1.5,0,1,0,.71.71Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/moveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="40" height="40"/><path class="cls-2" d="M14.41,20.5,16,22.1l-.71.71L12.5,20l2.81-2.81.71.71-1.61,1.6H17.5v1ZM27.5,20l-2.78,2.77-.7-.7,1.57-1.57H22.5v-1h3.09L24,17.9l.71-.71Zm-9.57-4-.7-.7L20,12.5l2.81,2.81L22.1,16l-1.6-1.61V17.5h-1V14.41Zm4.17,8,.71.71L20,27.5l-2.81-2.81L17.9,24l1.6,1.61V22.5h1v3.09Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/newKeyIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M20,15.41,24.59,20,20,24.59,15.41,20,20,15.41M20,14l-6,6,6,6,6-6-6-6Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/scaleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M16,13H13.71l2.64,2.65-.7.7L13,13.71V16H12V12h4Zm8-1h4v4H27V13.71l-2.65,2.64-.7-.7L26.29,13H24ZM15.65,23.65l.7.7L13.71,27H16v1H12V24h1v2.29ZM27,26.29V24h1v4H24V27h2.29l-2.64-2.65.7-.7ZM17,23V17h6v6Zm1-5v4h4V18Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/scrollbarHandleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><defs><style>.cls-1{fill:#333;}.cls-2{fill:none;}</style></defs><g id="UI"><rect class="cls-1" x="5" y="3" width="2" height="15"/><rect class="cls-1" x="9" y="3" width="2" height="15"/><rect class="cls-1" x="13" y="3" width="2" height="15"/><rect class="cls-2" width="20" height="21"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/tangentHandleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><circle class="cls-2" cx="5" cy="5" r="4"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/unifyTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -1,6 +1,258 @@
 
 #animation-curve-editor {
 
+    font-family: acumin-pro-condensed;
+
+    .icon {
+        width: 40px;
+        height: 40px;
+        &.babylon-logo {
+            background-image: url('./assets/babylonLogo.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+        }
+
+        &.close {
+            background-image: url('./assets/closeWindowIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.auto-tangent {
+            background-image: url('./assets/autoTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.break-tangent {
+            background-image: url('./assets/breakTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.flat-tangent {
+            background-image: url('./assets/flatTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.frame {
+            background-image: url('./assets/frameIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.linear-tangent {
+            background-image: url('./assets/linearTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.unify-tangent {
+            background-image: url('./assets/unifyTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.add-animation {
+            background-image: url('./assets/addAnimationIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.animation-bullet {
+            background-image: url('./assets/animationBulletIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-delete {
+            background-image: url('./assets/animationDeleteIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-end {
+            background-image: url('./assets/animationEndIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-lastkey {
+            background-image: url('./assets/animationLastKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+
+            &:hover{
+                background-image: url('./assets/animationLastKeyHoverIcon.svg');
+            }
+        }
+
+        &.animation-nextkey {
+            background-image: url('./assets/animationNextKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+
+            &:hover{
+                background-image: url('./assets/animationNextKeyHoverIcon.svg');
+            }
+        }
+
+        &.animation-options {
+            background-image: url('./assets/animationOptionsIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-playfwd {
+            background-image: url('./assets/animationPlayFwdIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-playrev {
+            background-image: url('./assets/animationPlayRevIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-start {
+            background-image: url('./assets/animationStartIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-stop {
+            background-image: url('./assets/animationStopIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-triangle {
+            background-image: url('./assets/animationTriangleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-active {
+            background-image: url('./assets/keyActiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-inactive {
+            background-image: url('./assets/keyInactiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-selected {
+            background-image: url('./assets/keySelectedIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.loop-active {
+            background-image: url('./assets/loopActiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.loop-inactive {
+            background-image: url('./assets/loopInactiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.move {
+            background-image: url('./assets/moveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.new-key {
+            background-image: url('./assets/newKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.scale {
+            background-image: url('./assets/scaleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.scrollbar-handle {
+            background-image: url('./assets/scrollbarHandleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+    }
+
     .notification-area{
         position: absolute;
         width: auto;
@@ -32,7 +284,7 @@
     .header{
         display: flex;
         padding: 9px;
-        background: black;
+        background: #333333;
         color: white;
         height: 1.3em;
         justify-content: space-between;
@@ -53,19 +305,46 @@
     .actions-wrapper {
         display: flex;
         flex-direction: row;
-        justify-content: flex-end;
-        align-items: flex-end;
-        padding: 6px;
+        justify-content: flex-start;
+        align-items: center;
+        background: #333333;
+
+        .close {
+            position: absolute;
+            right: 1px;
+        }
+
+        .title-container {
+            display: flex;
+            justify-content: stretch;
+            align-items: center;
+            color: white;
+            width: 220px;
+
+            .title {
+                font-size: 15pt;
+            }
+        }
+
+        .buttons-container{
+            display: flex;
+        }
 
         .action-input{
             display: flex;
             justify-content: center;
             flex-direction: row;
             align-items: center;
-            label { margin-right: 0.5em }
+            margin-right: 8px;
             input {
-                width: 4em;
-                height: 2em;
+                width: 75px;
+                height: 24px;
+                color: white;
+                font-size: 12px;
+                background: none;
+                border: none;
+                background-color: black;
+                padding: 6px;
             }
         }
     }
@@ -82,11 +361,11 @@
             justify-content: flex-start;
             flex-direction: row;
             width: 100vw;
-            height: 78.5vh;
+            height: 84vh;
 
             .timeline{
                 width: 100vw;
-                background: gray;
+                background: #333333;
                 display: flex;
                 align-items: center;
                 justify-content: stretch;
@@ -137,7 +416,7 @@
 
         .animation-list{
             padding: 1.5rem;
-            background: rgb(87, 86, 86);
+            background: #333333;
             color: white;
             ul {
                 list-style:none;
@@ -178,7 +457,7 @@
             }
 
             .object-tree{
-                background-color: rgba(0, 0, 0, 0.3);
+                background-color:#111111;
                 padding: 10px;
                 margin-top: 19px;
                 height: 11em;
@@ -208,7 +487,7 @@
             padding-left: 32px;
             overflow-y: scroll;
             scroll-behavior: smooth;
-            background-color: #444444;
+            background-color: #111111;
             height: 100%;
 
             .linear{

inspector/src/components/actionTabs/tabs/propertyGrids/animations/graphActionsBar.tsx

@@ -1,6 +1,6 @@
 
 import * as React from "react";
-import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { IconButtonLineComponent } from '../../../lines/iconButtonLineComponent';
 
 interface IGraphActionsBarProps {
    addKeyframe: () => void;
@@ -14,6 +14,9 @@ interface IGraphActionsBarProps {
    lerpMode: boolean;
    currentValue: number;
    currentFrame: number;
+   title: string;
+   close: (event: any) => void;
+   enabled: boolean;
 }
 
 export class GraphActionsBar extends React.Component<IGraphActionsBarProps>{ 
@@ -24,19 +27,25 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps>{
     render() { 
        return (
            <div className="actions-wrapper">
+               <div className="title-container">
+               <div className="icon babylon-logo"></div>
+               <div className="title">{this.props.title}</div>
+               </div>
+               <div className="buttons-container" style={{display: this.props.enabled ? 'flex' : 'none'}}>
                <div className="action-input">
-               <label>Frame</label>
                <input type="number" value={this.props.currentFrame} onChange={this.props.handleFrameChange} step="1"/>
                </div>
                <div className="action-input">
-               <label>Value</label>
                <input type="number" value={this.props.currentValue.toFixed(3)} onChange={this.props.handleValueChange} step="0.001"/>
                </div>
-              <ButtonLineComponent label={"Add Keyframe"} onClick={this.props.addKeyframe} />
-              <ButtonLineComponent label={"Remove Keyframe"} onClick={this.props.removeKeyframe} />
-              <ButtonLineComponent label={"Flat Tangents"} onClick={this.props.flatTangent} />
-              <ButtonLineComponent label={this.props.brokenMode ? "Broken Mode On" : "Broken Mode Off" } onClick={this.props.brokeTangents} />
-              <ButtonLineComponent label={this.props.lerpMode ? "Lerp On" : "lerp Off" } onClick={this.props.setLerpMode} />
+              <IconButtonLineComponent tooltip={"Add Keyframe"} icon="new-key" onClick={this.props.addKeyframe} />
+              <IconButtonLineComponent tooltip={"Remove Keyframe"} icon="frame" onClick={this.props.removeKeyframe} />
+              <IconButtonLineComponent tooltip={"Flat Tangents"} icon="flat-tangent" onClick={this.props.flatTangent} />
+              <IconButtonLineComponent tooltip={this.props.brokenMode ? "Broken Mode On" : "Broken Mode Off" } icon={this.props.brokenMode ? "break-tangent" : "unify-tangent" } onClick={this.props.brokeTangents} />
+              <IconButtonLineComponent tooltip={this.props.lerpMode ? "Lerp On" : "lerp Off" } icon="linear-tangent" onClick={this.props.setLerpMode} />
+              </div>
+              <div className="icon close" onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => this.props.close(event)}>
+              </div>
            </div>
         )
     }

inspector/src/components/actionTabs/tabs/propertyGrids/animations/targetedAnimationPropertyGridComponent.tsx

@@ -93,12 +93,11 @@ export class TargetedAnimationGridComponent extends React.Component<ITargetedAni
                         this._isCurveEditorOpen && <PopupComponent
                             id="curve-editor"
                             title="Curve Animation Editor"
-                            size={{ width: 950, height: 540 }}
+                            size={{ width: 1024, height: 512 }}
                             onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                             onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 
-                            <AnimationCurveEditorComponent 
-                                title="Animations Curve Editor" 
+                            <AnimationCurveEditorComponent
                                 scene={this.props.scene} 
                                 entity={targetedAnimation as any} 
                                 playOrPause={() => this.playOrPause()}

nodeEditor/src/diagram/nodePort.ts

@@ -67,7 +67,7 @@ export class NodePort {
     }
 
     public get exposedOnFrame() {
-        if(!!this._exposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
+        if(!!this.connectionPoint.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
             return true
         } return false;
     }
@@ -76,7 +76,7 @@ export class NodePort {
         if(this.disabled){
             return;
         }
-        this._exposedOnFrame = value;
+        this.connectionPoint.isExposedOnFrame = value;
     }
     
     

package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.2.0-alpha.17",
+    "version": "4.2.0-alpha.18",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -110,4 +110,4 @@
         "xhr2": "^0.1.4",
         "xmlbuilder": "8.2.2"
     }
-}
+}

src/Engines/thinEngine.ts

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

src/Materials/Node/nodeMaterialBlock.ts

@@ -678,10 +678,10 @@ export class NodeMaterialBlock {
     public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
-        this._deserializePortDisplayNames(serializationObject);
+        this._deserializePortDisplayNamesAndExposedOnFrame(serializationObject);
     }
 
-    private _deserializePortDisplayNames(serializationObject: any) {
+    private _deserializePortDisplayNamesAndExposedOnFrame(serializationObject: any) {
         const serializedInputs = serializationObject.inputs;
         const serializedOutputs = serializationObject.outputs;
         if (serializedInputs) {
@@ -689,6 +689,9 @@ export class NodeMaterialBlock {
                 if (port.displayName) {
                     this.inputs[i].displayName = port.displayName;
                 }
+                if (port.isExposedOnFrame) {
+                    this.inputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                }
             });
         }
         if (serializedOutputs) {
@@ -696,6 +699,9 @@ export class NodeMaterialBlock {
                 if (port.displayName) {
                     this.outputs[i].displayName = port.displayName;
                 }
+                if (port.isExposedOnFrame) {
+                    this.outputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                }
             });
         }
     }

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -147,6 +147,11 @@ export class NodeMaterialConnectionPoint {
     public isOptional: boolean;
 
     /**
+     * Gets or sets a boolean indicating that this connection point is exposed on a frame
+     */
+    public isExposedOnFrame: boolean =  false;
+
+    /**
      * Gets or sets a string indicating that this uniform must be defined under a #ifdef
      */
     public define: string;
@@ -458,6 +463,10 @@ export class NodeMaterialConnectionPoint {
             serializationObject.targetConnectionName = this.connectedPoint.name;
         }
 
+        if (this.isExposedOnFrame) {
+            serializationObject.isExposedOnFrame = this.isExposedOnFrame;
+        }
+
         return serializationObject;
     }
 

src/Materials/material.ts

@@ -1070,27 +1070,15 @@ export class Material implements IAnimatable {
                 var allDone = true, lastError = null;
                 if (mesh.subMeshes) {
                     let tempSubMesh = new SubMesh(0, 0, 0, 0, 0, mesh, undefined, false, false);
-                    if (this._storeEffectOnSubMeshes) {
-                        if (tempSubMesh._materialDefines) {
-                            tempSubMesh._materialDefines._renderId = -1;
-                        }
-                        if (!this.isReadyForSubMesh(mesh, tempSubMesh, localOptions.useInstances)) {
-                            if (tempSubMesh.effect && tempSubMesh.effect.getCompilationError() && tempSubMesh.effect.allFallbacksProcessed()) {
-                                lastError = tempSubMesh.effect.getCompilationError();
-                            } else {
-                                allDone = false;
-                                setTimeout(checkReady, 16);
-                            }
-                        }
-                    } else {
-                        tempSubMesh._renderId = -1;
-                        if (!this.isReady(mesh, localOptions.useInstances)) {
-                            if (this.getEffect() && this.getEffect()!.getCompilationError() && this.getEffect()!.allFallbacksProcessed()) {
-                                lastError = this.getEffect()!.getCompilationError();
-                            } else {
-                                allDone = false;
-                                setTimeout(checkReady, 16);
-                            }
+                    if (tempSubMesh._materialDefines) {
+                        tempSubMesh._materialDefines._renderId = -1;
+                    }
+                    if (!this.isReadyForSubMesh(mesh, tempSubMesh, localOptions.useInstances)) {
+                        if (tempSubMesh.effect && tempSubMesh.effect.getCompilationError() && tempSubMesh.effect.allFallbacksProcessed()) {
+                            lastError = tempSubMesh.effect.getCompilationError();
+                        } else {
+                            allDone = false;
+                            setTimeout(checkReady, 16);
                         }
                     }
                 }