Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into custommaterial-bug2

dist/loaders/babylon.glTF1FileLoader.d.ts

@@ -1,913 +0,0 @@
-
-
-declare module BABYLON {
-    /**
-     * Mode that determines the coordinate system to use.
-     */
-    enum GLTFLoaderCoordinateSystemMode {
-        /**
-         * Automatically convert the glTF right-handed data to the appropriate system based on the current coordinate system mode of the scene.
-         */
-        AUTO = 0,
-        /**
-         * Sets the useRightHandedSystem flag on the scene.
-         */
-        FORCE_RIGHT_HANDED = 1
-    }
-    /**
-     * Mode that determines what animations will start.
-     */
-    enum GLTFLoaderAnimationStartMode {
-        /**
-         * No animation will start.
-         */
-        NONE = 0,
-        /**
-         * The first animation will start.
-         */
-        FIRST = 1,
-        /**
-         * All animations will start.
-         */
-        ALL = 2
-    }
-    /**
-     * Interface that contains the data for the glTF asset.
-     */
-    interface IGLTFLoaderData {
-        /**
-         * Object that represents the glTF JSON.
-         */
-        json: Object;
-        /**
-         * The BIN chunk of a binary glTF.
-         */
-        bin: Nullable<ArrayBufferView>;
-    }
-    /**
-     * Interface for extending the loader.
-     */
-    interface IGLTFLoaderExtension {
-        /**
-         * The name of this extension.
-         */
-        readonly name: string;
-        /**
-         * Defines whether this extension is enabled.
-         */
-        enabled: boolean;
-    }
-    /**
-     * Loader state.
-     */
-    enum GLTFLoaderState {
-        /**
-         * The asset is loading.
-         */
-        LOADING = 0,
-        /**
-         * The asset is ready for rendering.
-         */
-        READY = 1,
-        /**
-         * The asset is completely loaded.
-         */
-        COMPLETE = 2
-    }
-    /** @hidden */
-    interface IGLTFLoader extends IDisposable {
-        readonly state: Nullable<GLTFLoaderState>;
-        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string) => Promise<{
-            meshes: AbstractMesh[];
-            particleSystems: IParticleSystem[];
-            skeletons: Skeleton[];
-            animationGroups: AnimationGroup[];
-        }>;
-        loadAsync: (scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string) => Promise<void>;
-    }
-    /**
-     * File loader for loading glTF files into a scene.
-     */
-    class GLTFFileLoader implements IDisposable, ISceneLoaderPluginAsync, ISceneLoaderPluginFactory {
-        /** @hidden */
-        static _CreateGLTFLoaderV1: (parent: GLTFFileLoader) => IGLTFLoader;
-        /** @hidden */
-        static _CreateGLTFLoaderV2: (parent: GLTFFileLoader) => IGLTFLoader;
-        /**
-         * Raised when the asset has been parsed
-         */
-        onParsedObservable: Observable<IGLTFLoaderData>;
-        private _onParsedObserver;
-        /**
-         * Raised when the asset has been parsed
-         */
-        onParsed: (loaderData: IGLTFLoaderData) => void;
-        /**
-         * Set this property to false to disable incremental loading which delays the loader from calling the success callback until after loading the meshes and shaders.
-         * Textures always loads asynchronously. For example, the success callback can compute the bounding information of the loaded meshes when incremental loading is disabled.
-         * Defaults to true.
-         * @hidden
-         */
-        static IncrementalLoading: boolean;
-        /**
-         * Set this property to true in order to work with homogeneous coordinates, available with some converters and exporters.
-         * Defaults to false. See https://en.wikipedia.org/wiki/Homogeneous_coordinates.
-         * @hidden
-         */
-        static HomogeneousCoordinates: boolean;
-        /**
-         * The coordinate system mode. Defaults to AUTO.
-         */
-        coordinateSystemMode: GLTFLoaderCoordinateSystemMode;
-        /**
-        * The animation start mode. Defaults to FIRST.
-        */
-        animationStartMode: GLTFLoaderAnimationStartMode;
-        /**
-         * Defines if the loader should compile materials before raising the success callback. Defaults to false.
-         */
-        compileMaterials: boolean;
-        /**
-         * Defines if the loader should also compile materials with clip planes. Defaults to false.
-         */
-        useClipPlane: boolean;
-        /**
-         * Defines if the loader should compile shadow generators before raising the success callback. Defaults to false.
-         */
-        compileShadowGenerators: boolean;
-        /**
-         * Defines if the Alpha blended materials are only applied as coverage.
-         * If false, (default) The luminance of each pixel will reduce its opacity to simulate the behaviour of most physical materials.
-         * If true, no extra effects are applied to transparent pixels.
-         */
-        transparencyAsCoverage: boolean;
-        /**
-         * Function called before loading a url referenced by the asset.
-         */
-        preprocessUrlAsync: (url: string) => Promise<string>;
-        /**
-         * Observable raised when the loader creates a mesh after parsing the glTF properties of the mesh.
-         */
-        readonly onMeshLoadedObservable: Observable<AbstractMesh>;
-        private _onMeshLoadedObserver;
-        /**
-         * Callback raised when the loader creates a mesh after parsing the glTF properties of the mesh.
-         */
-        onMeshLoaded: (mesh: AbstractMesh) => void;
-        /**
-         * Observable raised when the loader creates a texture after parsing the glTF properties of the texture.
-         */
-        readonly onTextureLoadedObservable: Observable<BaseTexture>;
-        private _onTextureLoadedObserver;
-        /**
-         * Callback raised when the loader creates a texture after parsing the glTF properties of the texture.
-         */
-        onTextureLoaded: (texture: BaseTexture) => void;
-        /**
-         * Observable raised when the loader creates a material after parsing the glTF properties of the material.
-         */
-        readonly onMaterialLoadedObservable: Observable<Material>;
-        private _onMaterialLoadedObserver;
-        /**
-         * Callback raised when the loader creates a material after parsing the glTF properties of the material.
-         */
-        onMaterialLoaded: (material: Material) => void;
-        /**
-         * Observable raised when the loader creates a camera after parsing the glTF properties of the camera.
-         */
-        readonly onCameraLoadedObservable: Observable<Camera>;
-        private _onCameraLoadedObserver;
-        /**
-         * Callback raised when the loader creates a camera after parsing the glTF properties of the camera.
-         */
-        onCameraLoaded: (camera: Camera) => void;
-        /**
-         * Observable raised when the asset is completely loaded, immediately before the loader is disposed.
-         * For assets with LODs, raised when all of the LODs are complete.
-         * For assets without LODs, raised when the model is complete, immediately after the loader resolves the returned promise.
-         */
-        readonly onCompleteObservable: Observable<void>;
-        private _onCompleteObserver;
-        /**
-         * Callback raised when the asset is completely loaded, immediately before the loader is disposed.
-         * For assets with LODs, raised when all of the LODs are complete.
-         * For assets without LODs, raised when the model is complete, immediately after the loader resolves the returned promise.
-         */
-        onComplete: () => void;
-        /**
-         * Observable raised when an error occurs.
-         */
-        readonly onErrorObservable: Observable<any>;
-        private _onErrorObserver;
-        /**
-         * Callback raised when an error occurs.
-         */
-        onError: (reason: any) => void;
-        /**
-         * Observable raised after the loader is disposed.
-         */
-        readonly onDisposeObservable: Observable<void>;
-        private _onDisposeObserver;
-        /**
-         * Callback raised after the loader is disposed.
-         */
-        onDispose: () => void;
-        /**
-         * Observable raised after a loader extension is created.
-         * Set additional options for a loader extension in this event.
-         */
-        readonly onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
-        private _onExtensionLoadedObserver;
-        /**
-         * Callback raised after a loader extension is created.
-         */
-        onExtensionLoaded: (extension: IGLTFLoaderExtension) => void;
-        /**
-         * Defines if the loader logging is enabled.
-         */
-        loggingEnabled: boolean;
-        /**
-         * Defines if the loader should capture performance counters.
-         */
-        capturePerformanceCounters: boolean;
-        /**
-         * Defines if the loader should validate the asset.
-         */
-        validate: boolean;
-        /**
-         * Observable raised after validation when validate is set to true. The event data is the result of the validation.
-         */
-        readonly onValidatedObservable: Observable<IGLTFValidationResults>;
-        private _onValidatedObserver;
-        /**
-         * Callback raised after a loader extension is created.
-         */
-        onValidated: (results: IGLTFValidationResults) => void;
-        private _loader;
-        /**
-         * Name of the loader ("gltf")
-         */
-        name: string;
-        /**
-         * Supported file extensions of the loader (.gltf, .glb)
-         */
-        extensions: ISceneLoaderPluginExtensions;
-        /**
-         * Disposes the loader, releases resources during load, and cancels any outstanding requests.
-         */
-        dispose(): void;
-        /** @hidden */
-        _clear(): void;
-        /**
-         * Imports one or more meshes from the loaded glTF data and adds them to the scene
-         * @param meshesNames a string or array of strings of the mesh names that should be loaded from the file
-         * @param scene the scene the meshes should be added to
-         * @param data the glTF data to load
-         * @param rootUrl root url to load from
-         * @param onProgress event that fires when loading progress has occured
-         * @param fileName Defines the name of the file to load
-         * @returns a promise containg the loaded meshes, particles, skeletons and animations
-         */
-        importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<{
-            meshes: AbstractMesh[];
-            particleSystems: IParticleSystem[];
-            skeletons: Skeleton[];
-            animationGroups: AnimationGroup[];
-        }>;
-        /**
-         * Imports all objects from the loaded glTF data and adds them to the scene
-         * @param scene the scene the objects should be added to
-         * @param data the glTF data to load
-         * @param rootUrl root url to load from
-         * @param onProgress event that fires when loading progress has occured
-         * @param fileName Defines the name of the file to load
-         * @returns a promise which completes when objects have been loaded to the scene
-         */
-        loadAsync(scene: Scene, data: string | ArrayBuffer, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<void>;
-        /**
-         * Load into an asset container.
-         * @param scene The scene to load into
-         * @param data The data to import
-         * @param rootUrl The root url for scene and resources
-         * @param onProgress The callback when the load progresses
-         * @param fileName Defines the name of the file to load
-         * @returns The loaded asset container
-         */
-        loadAssetContainerAsync(scene: Scene, data: string | ArrayBuffer, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<AssetContainer>;
-        /**
-         * If the data string can be loaded directly.
-         * @param data string contianing the file data
-         * @returns if the data can be loaded directly
-         */
-        canDirectLoad(data: string): boolean;
-        /**
-         * Rewrites a url by combining a root url and response url.
-         */
-        rewriteRootURL: (rootUrl: string, responseURL?: string) => string;
-        /**
-         * Instantiates a glTF file loader plugin.
-         * @returns the created plugin
-         */
-        createPlugin(): ISceneLoaderPlugin | ISceneLoaderPluginAsync;
-        /**
-         * The loader state or null if the loader is not active.
-         */
-        readonly loaderState: Nullable<GLTFLoaderState>;
-        /**
-         * Returns a promise that resolves when the asset is completely loaded.
-         * @returns a promise that resolves when the asset is completely loaded.
-         */
-        whenCompleteAsync(): Promise<void>;
-        private _parseAsync;
-        private _validateAsync;
-        private _getLoader;
-        private _unpackBinary;
-        private _unpackBinaryV1;
-        private _unpackBinaryV2;
-        private static _parseVersion;
-        private static _compareVersion;
-        private static _decodeBufferToText;
-        private static readonly _logSpaces;
-        private _logIndentLevel;
-        private _loggingEnabled;
-        /** @hidden */
-        _log: (message: string) => void;
-        /** @hidden */
-        _logOpen(message: string): void;
-        /** @hidden */
-        _logClose(): void;
-        private _logEnabled;
-        private _logDisabled;
-        private _capturePerformanceCounters;
-        /** @hidden */
-        _startPerformanceCounter: (counterName: string) => void;
-        /** @hidden */
-        _endPerformanceCounter: (counterName: string) => void;
-        private _startPerformanceCounterEnabled;
-        private _startPerformanceCounterDisabled;
-        private _endPerformanceCounterEnabled;
-        private _endPerformanceCounterDisabled;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    /**
-    * Enums
-    */
-    enum EComponentType {
-        BYTE = 5120,
-        UNSIGNED_BYTE = 5121,
-        SHORT = 5122,
-        UNSIGNED_SHORT = 5123,
-        FLOAT = 5126
-    }
-    enum EShaderType {
-        FRAGMENT = 35632,
-        VERTEX = 35633
-    }
-    enum EParameterType {
-        BYTE = 5120,
-        UNSIGNED_BYTE = 5121,
-        SHORT = 5122,
-        UNSIGNED_SHORT = 5123,
-        INT = 5124,
-        UNSIGNED_INT = 5125,
-        FLOAT = 5126,
-        FLOAT_VEC2 = 35664,
-        FLOAT_VEC3 = 35665,
-        FLOAT_VEC4 = 35666,
-        INT_VEC2 = 35667,
-        INT_VEC3 = 35668,
-        INT_VEC4 = 35669,
-        BOOL = 35670,
-        BOOL_VEC2 = 35671,
-        BOOL_VEC3 = 35672,
-        BOOL_VEC4 = 35673,
-        FLOAT_MAT2 = 35674,
-        FLOAT_MAT3 = 35675,
-        FLOAT_MAT4 = 35676,
-        SAMPLER_2D = 35678
-    }
-    enum ETextureWrapMode {
-        CLAMP_TO_EDGE = 33071,
-        MIRRORED_REPEAT = 33648,
-        REPEAT = 10497
-    }
-    enum ETextureFilterType {
-        NEAREST = 9728,
-        LINEAR = 9728,
-        NEAREST_MIPMAP_NEAREST = 9984,
-        LINEAR_MIPMAP_NEAREST = 9985,
-        NEAREST_MIPMAP_LINEAR = 9986,
-        LINEAR_MIPMAP_LINEAR = 9987
-    }
-    enum ETextureFormat {
-        ALPHA = 6406,
-        RGB = 6407,
-        RGBA = 6408,
-        LUMINANCE = 6409,
-        LUMINANCE_ALPHA = 6410
-    }
-    enum ECullingType {
-        FRONT = 1028,
-        BACK = 1029,
-        FRONT_AND_BACK = 1032
-    }
-    enum EBlendingFunction {
-        ZERO = 0,
-        ONE = 1,
-        SRC_COLOR = 768,
-        ONE_MINUS_SRC_COLOR = 769,
-        DST_COLOR = 774,
-        ONE_MINUS_DST_COLOR = 775,
-        SRC_ALPHA = 770,
-        ONE_MINUS_SRC_ALPHA = 771,
-        DST_ALPHA = 772,
-        ONE_MINUS_DST_ALPHA = 773,
-        CONSTANT_COLOR = 32769,
-        ONE_MINUS_CONSTANT_COLOR = 32770,
-        CONSTANT_ALPHA = 32771,
-        ONE_MINUS_CONSTANT_ALPHA = 32772,
-        SRC_ALPHA_SATURATE = 776
-    }
-    /**
-    * Interfaces
-    */
-    interface IGLTFProperty {
-        extensions?: {
-            [key: string]: any;
-        };
-        extras?: Object;
-    }
-    interface IGLTFChildRootProperty extends IGLTFProperty {
-        name?: string;
-    }
-    interface IGLTFAccessor extends IGLTFChildRootProperty {
-        bufferView: string;
-        byteOffset: number;
-        byteStride: number;
-        count: number;
-        type: string;
-        componentType: EComponentType;
-        max?: number[];
-        min?: number[];
-        name?: string;
-    }
-    interface IGLTFBufferView extends IGLTFChildRootProperty {
-        buffer: string;
-        byteOffset: number;
-        byteLength: number;
-        byteStride: number;
-        target?: number;
-    }
-    interface IGLTFBuffer extends IGLTFChildRootProperty {
-        uri: string;
-        byteLength?: number;
-        type?: string;
-    }
-    interface IGLTFShader extends IGLTFChildRootProperty {
-        uri: string;
-        type: EShaderType;
-    }
-    interface IGLTFProgram extends IGLTFChildRootProperty {
-        attributes: string[];
-        fragmentShader: string;
-        vertexShader: string;
-    }
-    interface IGLTFTechniqueParameter {
-        type: number;
-        count?: number;
-        semantic?: string;
-        node?: string;
-        value?: number | boolean | string | Array<any>;
-        source?: string;
-        babylonValue?: any;
-    }
-    interface IGLTFTechniqueCommonProfile {
-        lightingModel: string;
-        texcoordBindings: Object;
-        parameters?: Array<any>;
-    }
-    interface IGLTFTechniqueStatesFunctions {
-        blendColor?: number[];
-        blendEquationSeparate?: number[];
-        blendFuncSeparate?: number[];
-        colorMask: boolean[];
-        cullFace: number[];
-    }
-    interface IGLTFTechniqueStates {
-        enable: number[];
-        functions: IGLTFTechniqueStatesFunctions;
-    }
-    interface IGLTFTechnique extends IGLTFChildRootProperty {
-        parameters: {
-            [key: string]: IGLTFTechniqueParameter;
-        };
-        program: string;
-        attributes: {
-            [key: string]: string;
-        };
-        uniforms: {
-            [key: string]: string;
-        };
-        states: IGLTFTechniqueStates;
-    }
-    interface IGLTFMaterial extends IGLTFChildRootProperty {
-        technique?: string;
-        values: string[];
-    }
-    interface IGLTFMeshPrimitive extends IGLTFProperty {
-        attributes: {
-            [key: string]: string;
-        };
-        indices: string;
-        material: string;
-        mode?: number;
-    }
-    interface IGLTFMesh extends IGLTFChildRootProperty {
-        primitives: IGLTFMeshPrimitive[];
-    }
-    interface IGLTFImage extends IGLTFChildRootProperty {
-        uri: string;
-    }
-    interface IGLTFSampler extends IGLTFChildRootProperty {
-        magFilter?: number;
-        minFilter?: number;
-        wrapS?: number;
-        wrapT?: number;
-    }
-    interface IGLTFTexture extends IGLTFChildRootProperty {
-        sampler: string;
-        source: string;
-        format?: ETextureFormat;
-        internalFormat?: ETextureFormat;
-        target?: number;
-        type?: number;
-        babylonTexture?: Texture;
-    }
-    interface IGLTFAmbienLight {
-        color?: number[];
-    }
-    interface IGLTFDirectionalLight {
-        color?: number[];
-    }
-    interface IGLTFPointLight {
-        color?: number[];
-        constantAttenuation?: number;
-        linearAttenuation?: number;
-        quadraticAttenuation?: number;
-    }
-    interface IGLTFSpotLight {
-        color?: number[];
-        constantAttenuation?: number;
-        fallOfAngle?: number;
-        fallOffExponent?: number;
-        linearAttenuation?: number;
-        quadraticAttenuation?: number;
-    }
-    interface IGLTFLight extends IGLTFChildRootProperty {
-        type: string;
-    }
-    interface IGLTFCameraOrthographic {
-        xmag: number;
-        ymag: number;
-        zfar: number;
-        znear: number;
-    }
-    interface IGLTFCameraPerspective {
-        aspectRatio: number;
-        yfov: number;
-        zfar: number;
-        znear: number;
-    }
-    interface IGLTFCamera extends IGLTFChildRootProperty {
-        type: string;
-    }
-    interface IGLTFAnimationChannelTarget {
-        id: string;
-        path: string;
-    }
-    interface IGLTFAnimationChannel {
-        sampler: string;
-        target: IGLTFAnimationChannelTarget;
-    }
-    interface IGLTFAnimationSampler {
-        input: string;
-        output: string;
-        interpolation?: string;
-    }
-    interface IGLTFAnimation extends IGLTFChildRootProperty {
-        channels?: IGLTFAnimationChannel[];
-        parameters?: {
-            [key: string]: string;
-        };
-        samplers?: {
-            [key: string]: IGLTFAnimationSampler;
-        };
-    }
-    interface IGLTFNodeInstanceSkin {
-        skeletons: string[];
-        skin: string;
-        meshes: string[];
-    }
-    interface IGLTFSkins extends IGLTFChildRootProperty {
-        bindShapeMatrix: number[];
-        inverseBindMatrices: string;
-        jointNames: string[];
-        babylonSkeleton?: Skeleton;
-    }
-    interface IGLTFNode extends IGLTFChildRootProperty {
-        camera?: string;
-        children: string[];
-        skin?: string;
-        jointName?: string;
-        light?: string;
-        matrix: number[];
-        mesh?: string;
-        meshes?: string[];
-        rotation?: number[];
-        scale?: number[];
-        translation?: number[];
-        babylonNode?: Node;
-    }
-    interface IGLTFScene extends IGLTFChildRootProperty {
-        nodes: string[];
-    }
-    /**
-    * Runtime
-    */
-    interface IGLTFRuntime {
-        extensions: {
-            [key: string]: any;
-        };
-        accessors: {
-            [key: string]: IGLTFAccessor;
-        };
-        buffers: {
-            [key: string]: IGLTFBuffer;
-        };
-        bufferViews: {
-            [key: string]: IGLTFBufferView;
-        };
-        meshes: {
-            [key: string]: IGLTFMesh;
-        };
-        lights: {
-            [key: string]: IGLTFLight;
-        };
-        cameras: {
-            [key: string]: IGLTFCamera;
-        };
-        nodes: {
-            [key: string]: IGLTFNode;
-        };
-        images: {
-            [key: string]: IGLTFImage;
-        };
-        textures: {
-            [key: string]: IGLTFTexture;
-        };
-        shaders: {
-            [key: string]: IGLTFShader;
-        };
-        programs: {
-            [key: string]: IGLTFProgram;
-        };
-        samplers: {
-            [key: string]: IGLTFSampler;
-        };
-        techniques: {
-            [key: string]: IGLTFTechnique;
-        };
-        materials: {
-            [key: string]: IGLTFMaterial;
-        };
-        animations: {
-            [key: string]: IGLTFAnimation;
-        };
-        skins: {
-            [key: string]: IGLTFSkins;
-        };
-        currentScene?: Object;
-        scenes: {
-            [key: string]: IGLTFScene;
-        };
-        extensionsUsed: string[];
-        extensionsRequired?: string[];
-        buffersCount: number;
-        shaderscount: number;
-        scene: Scene;
-        rootUrl: string;
-        loadedBufferCount: number;
-        loadedBufferViews: {
-            [name: string]: ArrayBufferView;
-        };
-        loadedShaderCount: number;
-        importOnlyMeshes: boolean;
-        importMeshesNames?: string[];
-        dummyNodes: Node[];
-    }
-    /**
-    * Bones
-    */
-    interface INodeToRoot {
-        bone: Bone;
-        node: IGLTFNode;
-        id: string;
-    }
-    interface IJointNode {
-        node: IGLTFNode;
-        id: string;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    /**
-    * Implementation of the base glTF spec
-    */
-    class GLTFLoaderBase {
-        static CreateRuntime(parsedData: any, scene: Scene, rootUrl: string): IGLTFRuntime;
-        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: (message: string) => void, onProgress?: () => void): void;
-        static LoadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: Nullable<ArrayBufferView>) => void, onError: (message: string) => void): void;
-        static CreateTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: Nullable<ArrayBufferView>, onSuccess: (texture: Texture) => void, onError: (message: string) => void): void;
-        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string | ArrayBuffer) => void, onError?: (message: string) => void): void;
-        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: (message: string) => void): void;
-    }
-    /**
-    * glTF V1 Loader
-    */
-    class GLTFLoader implements IGLTFLoader {
-        static Extensions: {
-            [name: string]: GLTFLoaderExtension;
-        };
-        static RegisterExtension(extension: GLTFLoaderExtension): void;
-        state: Nullable<GLTFLoaderState>;
-        dispose(): void;
-        private _importMeshAsync;
-        /**
-        * Imports one or more meshes from a loaded gltf file and adds them to the scene
-        * @param meshesNames a string or array of strings of the mesh names that should be loaded from the file
-        * @param scene the scene the meshes should be added to
-        * @param data gltf data containing information of the meshes in a loaded file
-        * @param rootUrl root url to load from
-        * @param onProgress event that fires when loading progress has occured
-        * @returns a promise containg the loaded meshes, particles, skeletons and animations
-        */
-        importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
-            meshes: AbstractMesh[];
-            particleSystems: IParticleSystem[];
-            skeletons: Skeleton[];
-            animationGroups: AnimationGroup[];
-        }>;
-        private _loadAsync;
-        /**
-        * Imports all objects from a loaded gltf file and adds them to the scene
-        * @param scene the scene the objects should be added to
-        * @param data gltf data containing information of the meshes in a loaded file
-        * @param rootUrl root url to load from
-        * @param onProgress event that fires when loading progress has occured
-        * @returns a promise which completes when objects have been loaded to the scene
-        */
-        loadAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<void>;
-        private _loadShadersAsync;
-        private _loadBuffersAsync;
-        private _createNodes;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    /**
-    * Utils functions for GLTF
-    */
-    class GLTFUtils {
-        /**
-         * Sets the given "parameter" matrix
-         * @param scene: the Scene object
-         * @param source: the source node where to pick the matrix
-         * @param parameter: the GLTF technique parameter
-         * @param uniformName: the name of the shader's uniform
-         * @param shaderMaterial: the shader material
-         */
-        static SetMatrix(scene: Scene, source: Node, parameter: IGLTFTechniqueParameter, uniformName: string, shaderMaterial: ShaderMaterial | Effect): void;
-        /**
-         * Sets the given "parameter" matrix
-         * @param shaderMaterial: the shader material
-         * @param uniform: the name of the shader's uniform
-         * @param value: the value of the uniform
-         * @param type: the uniform's type (EParameterType FLOAT, VEC2, VEC3 or VEC4)
-         */
-        static SetUniform(shaderMaterial: ShaderMaterial | Effect, uniform: string, value: any, type: number): boolean;
-        /**
-        * Returns the wrap mode of the texture
-        * @param mode: the mode value
-        */
-        static GetWrapMode(mode: number): number;
-        /**
-         * Returns the byte stride giving an accessor
-         * @param accessor: the GLTF accessor objet
-         */
-        static GetByteStrideFromType(accessor: IGLTFAccessor): number;
-        /**
-         * Returns the texture filter mode giving a mode value
-         * @param mode: the filter mode value
-         */
-        static GetTextureFilterMode(mode: number): ETextureFilterType;
-        static GetBufferFromBufferView(gltfRuntime: IGLTFRuntime, bufferView: IGLTFBufferView, byteOffset: number, byteLength: number, componentType: EComponentType): ArrayBufferView;
-        /**
-         * Returns a buffer from its accessor
-         * @param gltfRuntime: the GLTF runtime
-         * @param accessor: the GLTF accessor
-         */
-        static GetBufferFromAccessor(gltfRuntime: IGLTFRuntime, accessor: IGLTFAccessor): any;
-        /**
-         * Decodes a buffer view into a string
-         * @param view: the buffer view
-         */
-        static DecodeBufferToText(view: ArrayBufferView): string;
-        /**
-         * Returns the default material of gltf. Related to
-         * https://github.com/KhronosGroup/glTF/tree/master/specification/1.0#appendix-a-default-material
-         * @param scene: the Babylon.js scene
-         */
-        static GetDefaultMaterial(scene: Scene): ShaderMaterial;
-        private static _DefaultMaterial;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    abstract class GLTFLoaderExtension {
-        private _name;
-        constructor(name: string);
-        readonly name: string;
-        /**
-        * Defines an override for loading the runtime
-        * Return true to stop further extensions from loading the runtime
-        */
-        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess?: (gltfRuntime: IGLTFRuntime) => void, onError?: (message: string) => void): boolean;
-        /**
-         * Defines an onverride for creating gltf runtime
-         * Return true to stop further extensions from creating the runtime
-         */
-        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError?: (message: string) => void): boolean;
-        /**
-        * Defines an override for loading buffers
-        * Return true to stop further extensions from loading this buffer
-        */
-        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: (message: string) => void, onProgress?: () => void): boolean;
-        /**
-        * Defines an override for loading texture buffers
-        * Return true to stop further extensions from loading this texture data
-        */
-        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: (message: string) => void): boolean;
-        /**
-        * Defines an override for creating textures
-        * Return true to stop further extensions from loading this texture
-        */
-        createTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: ArrayBufferView, onSuccess: (texture: Texture) => void, onError: (message: string) => void): boolean;
-        /**
-        * Defines an override for loading shader strings
-        * Return true to stop further extensions from loading this shader data
-        */
-        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: (message: string) => void): boolean;
-        /**
-        * Defines an override for loading materials
-        * Return true to stop further extensions from loading this material
-        */
-        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: (message: string) => void): boolean;
-        static LoadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess?: (gltfRuntime: IGLTFRuntime) => void, onError?: (message: string) => void): void;
-        static LoadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError?: (message: string) => void): void;
-        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (bufferView: ArrayBufferView) => void, onError: (message: string) => void, onProgress?: () => void): void;
-        static LoadTextureAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (texture: Texture) => void, onError: (message: string) => void): void;
-        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderData: string | ArrayBuffer) => void, onError: (message: string) => void): void;
-        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: (message: string) => void): void;
-        private static LoadTextureBufferAsync;
-        private static CreateTextureAsync;
-        private static ApplyExtensions;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    class GLTFBinaryExtension extends GLTFLoaderExtension {
-        private _bin;
-        constructor();
-        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: (message: string) => void): boolean;
-        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: (message: string) => void): boolean;
-        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: (message: string) => void): boolean;
-        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: (message: string) => void): boolean;
-    }
-}
-
-
-declare module BABYLON.GLTF1 {
-    class GLTFMaterialsCommonExtension extends GLTFLoaderExtension {
-        constructor();
-        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: (message: string) => void): boolean;
-        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: (message: string) => void): boolean;
-        private _loadTexture;
-    }
-}

dist/loaders/babylon.objFileLoader.d.ts

@@ -1,111 +0,0 @@
-
-declare module BABYLON {
-    /**
-     * Class reading and parsing the MTL file bundled with the obj file.
-     */
-    class MTLFileLoader {
-        materials: BABYLON.StandardMaterial[];
-        /**
-         * This function will read the mtl file and create each material described inside
-         * This function could be improve by adding :
-         * -some component missing (Ni, Tf...)
-         * -including the specific options available
-         *
-         * @param scene
-         * @param data
-         * @param rootUrl
-         */
-        parseMTL(scene: BABYLON.Scene, data: string | ArrayBuffer, rootUrl: string): void;
-        /**
-         * Gets the texture for the material.
-         *
-         * If the material is imported from input file,
-         * We sanitize the url to ensure it takes the textre from aside the material.
-         *
-         * @param rootUrl The root url to load from
-         * @param value The value stored in the mtl
-         * @return The Texture
-         */
-        private static _getTexture;
-    }
-    class OBJFileLoader implements ISceneLoaderPluginAsync {
-        static OPTIMIZE_WITH_UV: boolean;
-        static INVERT_Y: boolean;
-        name: string;
-        extensions: string;
-        obj: RegExp;
-        group: RegExp;
-        mtllib: RegExp;
-        usemtl: RegExp;
-        smooth: RegExp;
-        vertexPattern: RegExp;
-        normalPattern: RegExp;
-        uvPattern: RegExp;
-        facePattern1: RegExp;
-        facePattern2: RegExp;
-        facePattern3: RegExp;
-        facePattern4: RegExp;
-        facePattern5: RegExp;
-        /**
-         * Calls synchronously the MTL file attached to this obj.
-         * Load function or importMesh function don't enable to load 2 files in the same time asynchronously.
-         * Without this function materials are not displayed in the first frame (but displayed after).
-         * In consequence it is impossible to get material information in your HTML file
-         *
-         * @param url The URL of the MTL file
-         * @param rootUrl
-         * @param onSuccess Callback function to be called when the MTL file is loaded
-         * @private
-         */
-        private _loadMTL;
-        /**
-         * Imports one or more meshes from the loaded glTF data and adds them to the scene
-         * @param meshesNames a string or array of strings of the mesh names that should be loaded from the file
-         * @param scene the scene the meshes should be added to
-         * @param data the glTF data to load
-         * @param rootUrl root url to load from
-         * @param onProgress event that fires when loading progress has occured
-         * @param fileName Defines the name of the file to load
-         * @returns a promise containg the loaded meshes, particles, skeletons and animations
-         */
-        importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<{
-            meshes: AbstractMesh[];
-            particleSystems: IParticleSystem[];
-            skeletons: Skeleton[];
-            animationGroups: AnimationGroup[];
-        }>;
-        /**
-         * Imports all objects from the loaded glTF data and adds them to the scene
-         * @param scene the scene the objects should be added to
-         * @param data the glTF data to load
-         * @param rootUrl root url to load from
-         * @param onProgress event that fires when loading progress has occured
-         * @param fileName Defines the name of the file to load
-         * @returns a promise which completes when objects have been loaded to the scene
-         */
-        loadAsync(scene: Scene, data: string, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<void>;
-        /**
-         * Load into an asset container.
-         * @param scene The scene to load into
-         * @param data The data to import
-         * @param rootUrl The root url for scene and resources
-         * @param onProgress The callback when the load progresses
-         * @param fileName Defines the name of the file to load
-         * @returns The loaded asset container
-         */
-        loadAssetContainerAsync(scene: Scene, data: string, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void, fileName?: string): Promise<AssetContainer>;
-        /**
-         * Read the OBJ file and create an Array of meshes.
-         * Each mesh contains all information given by the OBJ and the MTL file.
-         * i.e. vertices positions and indices, optional normals values, optional UV values, optional material
-         *
-         * @param meshesNames
-         * @param scene BABYLON.Scene The scene where are displayed the data
-         * @param data String The content of the obj file
-         * @param rootUrl String The path to the folder
-         * @returns Array<AbstractMesh>
-         * @private
-         */
-        private _parseSolid;
-    }
-}

dist/loaders/babylon.stlFileLoader.d.ts

@@ -1,17 +0,0 @@
-
-declare module BABYLON {
-    class STLFileLoader implements ISceneLoaderPlugin {
-        solidPattern: RegExp;
-        facetsPattern: RegExp;
-        normalPattern: RegExp;
-        vertexPattern: RegExp;
-        name: string;
-        extensions: ISceneLoaderPluginExtensions;
-        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<IParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
-        load(scene: Scene, data: any, rootUrl: string): boolean;
-        loadAssetContainer(scene: Scene, data: string, rootUrl: string, onError?: (message: string, exception?: any) => void): AssetContainer;
-        private isBinary;
-        private parseBinary;
-        private parseASCII;
-    }
-}

dist/materialsLibrary/babylon.backgroundMaterial.d.ts

@@ -1,280 +0,0 @@
-
-declare namespace BABYLON {
-    /**
-     * Background material
-     */
-    class BackgroundMaterial extends BABYLON.PushMaterial {
-        /**
-         * Key light Color (multiply against the R channel of the environement texture)
-         */
-        protected _primaryColor: Color3;
-        primaryColor: Color3;
-        /**
-         * Key light Level (allowing HDR output of the background)
-         */
-        protected _primaryLevel: float;
-        primaryLevel: float;
-        /**
-         * Secondary light Color (multiply against the G channel of the environement texture)
-         */
-        protected _secondaryColor: Color3;
-        secondaryColor: Color3;
-        /**
-         * Secondary light Level (allowing HDR output of the background)
-         */
-        protected _secondaryLevel: float;
-        secondaryLevel: float;
-        /**
-         * Tertiary light Color (multiply against the B channel of the environement texture)
-         */
-        protected _tertiaryColor: Color3;
-        tertiaryColor: Color3;
-        /**
-         * Tertiary light Level (allowing HDR output of the background)
-         */
-        protected _tertiaryLevel: float;
-        tertiaryLevel: float;
-        /**
-         * Reflection Texture used in the material.
-         * Should be author in a specific way for the best result (refer to the documentation).
-         */
-        protected _reflectionTexture: Nullable<BaseTexture>;
-        reflectionTexture: Nullable<BaseTexture>;
-        /**
-         * Reflection Texture level of blur.
-         *
-         * Can be use to reuse an existing HDR Texture and target a specific LOD to prevent authoring the
-         * texture twice.
-         */
-        protected _reflectionBlur: float;
-        reflectionBlur: float;
-        /**
-         * Diffuse Texture used in the material.
-         * Should be author in a specific way for the best result (refer to the documentation).
-         */
-        protected _diffuseTexture: Nullable<BaseTexture>;
-        diffuseTexture: Nullable<BaseTexture>;
-        /**
-         * Specify the list of lights casting shadow on the material.
-         * All scene shadow lights will be included if null.
-         */
-        protected _shadowLights: Nullable<IShadowLight[]>;
-        shadowLights: Nullable<IShadowLight[]>;
-        /**
-         * For the lights having a blurred shadow generator, this can add a second blur pass in order to reach
-         * soft lighting on the background.
-         */
-        protected _shadowBlurScale: int;
-        shadowBlurScale: int;
-        /**
-         * Helps adjusting the shadow to a softer level if required.
-         * 0 means black shadows and 1 means no shadows.
-         */
-        protected _shadowLevel: float;
-        shadowLevel: float;
-        /**
-         * In case of opacity Fresnel or reflection falloff, this is use as a scene center.
-         * It is usually zero but might be interesting to modify according to your setup.
-         */
-        protected _sceneCenter: Vector3;
-        sceneCenter: Vector3;
-        /**
-         * This helps specifying that the material is falling off to the sky box at grazing angle.
-         * This helps ensuring a nice transition when the camera goes under the ground.
-         */
-        protected _opacityFresnel: boolean;
-        opacityFresnel: boolean;
-        /**
-         * This helps specifying that the material is falling off from diffuse to the reflection texture at grazing angle.
-         * This helps adding a mirror texture on the ground.
-         */
-        protected _reflectionFresnel: boolean;
-        reflectionFresnel: boolean;
-        /**
-         * This helps specifying the falloff radius off the reflection texture from the sceneCenter.
-         * This helps adding a nice falloff effect to the reflection if used as a mirror for instance.
-         */
-        protected _reflectionFalloffDistance: number;
-        reflectionFalloffDistance: number;
-        /**
-         * This specifies the weight of the reflection against the background in case of reflection Fresnel.
-         */
-        protected _reflectionAmount: number;
-        reflectionAmount: number;
-        /**
-         * This specifies the weight of the reflection at grazing angle.
-         */
-        protected _reflectionReflectance0: number;
-        reflectionReflectance0: number;
-        /**
-         * This specifies the weight of the reflection at a perpendicular point of view.
-         */
-        protected _reflectionReflectance90: number;
-        reflectionReflectance90: number;
-        /**
-         * Helps to directly use the maps channels instead of their level.
-         */
-        protected _useRGBColor: boolean;
-        useRGBColor: boolean;
-        /**
-         * Number of Simultaneous lights allowed on the material.
-         */
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: int;
-        /**
-         * Default configuration related to image processing available in the Background Material.
-         */
-        protected _imageProcessingConfiguration: ImageProcessingConfiguration;
-        /**
-         * Keep track of the image processing observer to allow dispose and replace.
-         */
-        private _imageProcessingObserver;
-        /**
-         * Attaches a new image processing configuration to the PBR Material.
-         * @param configuration (if null the scene configuration will be use)
-         */
-        protected _attachImageProcessingConfiguration(configuration: Nullable<ImageProcessingConfiguration>): void;
-        /**
-         * Gets the image processing configuration used either in this material.
-         */
-        /**
-         * Sets the Default image processing configuration used either in the this material.
-         *
-         * If sets to null, the scene one is in use.
-         */
-        imageProcessingConfiguration: Nullable<ImageProcessingConfiguration>;
-        /**
-         * Gets wether the color curves effect is enabled.
-         */
-        /**
-         * Sets wether the color curves effect is enabled.
-         */
-        cameraColorCurvesEnabled: boolean;
-        /**
-         * Gets wether the color grading effect is enabled.
-         */
-        /**
-         * Gets wether the color grading effect is enabled.
-         */
-        cameraColorGradingEnabled: boolean;
-        /**
-         * Gets wether tonemapping is enabled or not.
-         */
-        /**
-         * Sets wether tonemapping is enabled or not
-         */
-        cameraToneMappingEnabled: boolean;
-        /**
-         * The camera exposure used on this material.
-         * This property is here and not in the camera to allow controlling exposure without full screen post process.
-         * This corresponds to a photographic exposure.
-         */
-        /**
-         * The camera exposure used on this material.
-         * This property is here and not in the camera to allow controlling exposure without full screen post process.
-         * This corresponds to a photographic exposure.
-         */
-        cameraExposure: float;
-        /**
-         * Gets The camera contrast used on this material.
-         */
-        /**
-         * Sets The camera contrast used on this material.
-         */
-        cameraContrast: float;
-        /**
-         * Gets the Color Grading 2D Lookup Texture.
-         */
-        /**
-         * Sets the Color Grading 2D Lookup Texture.
-         */
-        cameraColorGradingTexture: Nullable<BaseTexture>;
-        /**
-         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT).
-         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
-         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image;
-         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
-         */
-        /**
-         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT).
-         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
-         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image;
-         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
-         */
-        cameraColorCurves: Nullable<ColorCurves>;
-        private _renderTargets;
-        private _reflectionControls;
-        /**
-         * constructor
-         * @param name The name of the material
-         * @param scene The scene to add the material to
-         */
-        constructor(name: string, scene: BABYLON.Scene);
-        /**
-         * The entire material has been created in order to prevent overdraw.
-         * @returns false
-         */
-        needAlphaTesting(): boolean;
-        /**
-         * The entire material has been created in order to prevent overdraw.
-         * @returns true if blending is enable
-         */
-        needAlphaBlending(): boolean;
-        /**
-         * Checks wether the material is ready to be rendered for a given mesh.
-         * @param mesh The mesh to render
-         * @param subMesh The submesh to check against
-         * @param useInstances Specify wether or not the material is used with instances
-         */
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        /**
-         * Build the uniform buffer used in the material.
-         */
-        buildUniformLayout(): void;
-        /**
-         * Unbind the material.
-         */
-        unbind(): void;
-        /**
-         * Bind only the world matrix to the material.
-         * @param world The world matrix to bind.
-         */
-        bindOnlyWorldMatrix(world: Matrix): void;
-        /**
-         * Bind the material for a dedicated submeh (every used meshes will be considered opaque).
-         * @param world The world matrix to bind.
-         * @param subMesh The submesh to bind for.
-         */
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        /**
-         * Dispose the material.
-         * @forceDisposeEffect Force disposal of the associated effect.
-         * @forceDisposeTextures Force disposal of the associated textures.
-         */
-        dispose(forceDisposeEffect?: boolean, forceDisposeTextures?: boolean): void;
-        /**
-         * Clones the material.
-         * @name The cloned name.
-         * @returns The cloned material.
-         */
-        clone(name: string): BackgroundMaterial;
-        /**
-         * Serializes the current material to its JSON representation.
-         * @returns The JSON representation.
-         */
-        serialize(): any;
-        /**
-         * Gets the class name of the material
-         * @returns "BackgroundMaterial"
-         */
-        getClassName(): string;
-        /**
-         * Parse a JSON input to create back a background material.
-         * @param source
-         * @param scene
-         * @param rootUrl
-         * @returns the instantiated BackgroundMaterial.
-         */
-        static Parse(source: any, scene: Scene, rootUrl: string): BackgroundMaterial;
-    }
-}

dist/materialsLibrary/babylon.cellMaterial.d.ts

@@ -1,29 +0,0 @@
-
-declare module BABYLON {
-    class CellMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: BaseTexture;
-        diffuseColor: Color3;
-        _computeHighLevel: boolean;
-        computeHighLevel: boolean;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        getClassName(): string;
-        clone(name: string): CellMaterial;
-        serialize(): any;
-        static Parse(source: any, scene: Scene, rootUrl: string): CellMaterial;
-    }
-}

dist/materialsLibrary/babylon.customMaterial.d.ts

@@ -1,50 +0,0 @@
-
-declare module BABYLON {
-    class CustomShaderStructure {
-        FragmentStore: string;
-        VertexStore: string;
-        constructor();
-    }
-    class ShaderSpecialParts {
-        constructor();
-        Fragment_Begin: string;
-        Fragment_Definitions: string;
-        Fragment_MainBegin: string;
-        Fragment_Custom_Diffuse: string;
-        Fragment_Custom_Alpha: string;
-        Fragment_Before_FragColor: string;
-        Vertex_Begin: string;
-        Vertex_Definitions: string;
-        Vertex_MainBegin: string;
-        Vertex_Before_PositionUpdated: string;
-        Vertex_Before_NormalUpdated: string;
-    }
-    class CustomMaterial extends StandardMaterial {
-        static ShaderIndexer: number;
-        CustomParts: ShaderSpecialParts;
-        _isCreatedShader: boolean;
-        _createdShaderName: string;
-        _customUniform: string[];
-        _newUniforms: string[];
-        _newUniformInstances: any[];
-        _newSamplerInstances: Texture[];
-        FragmentShader: string;
-        VertexShader: string;
-        AttachAfterBind(mesh: Mesh, effect: Effect): void;
-        ReviewUniform(name: string, arr: string[]): string[];
-        Builder(shaderName: string, uniforms: string[], uniformBuffers: string[], samplers: string[], defines: StandardMaterialDefines): string;
-        constructor(name: string, scene: Scene);
-        AddUniform(name: string, kind: string, param: any): CustomMaterial;
-        Fragment_Begin(shaderPart: string): CustomMaterial;
-        Fragment_Definitions(shaderPart: string): CustomMaterial;
-        Fragment_MainBegin(shaderPart: string): CustomMaterial;
-        Fragment_Custom_Diffuse(shaderPart: string): CustomMaterial;
-        Fragment_Custom_Alpha(shaderPart: string): CustomMaterial;
-        Fragment_Before_FragColor(shaderPart: string): CustomMaterial;
-        Vertex_Begin(shaderPart: string): CustomMaterial;
-        Vertex_Definitions(shaderPart: string): CustomMaterial;
-        Vertex_MainBegin(shaderPart: string): CustomMaterial;
-        Vertex_Before_PositionUpdated(shaderPart: string): CustomMaterial;
-        Vertex_Before_NormalUpdated(shaderPart: string): CustomMaterial;
-    }
-}

dist/materialsLibrary/babylon.fireMaterial.d.ts

@@ -1,30 +0,0 @@
-
-declare module BABYLON {
-    class FireMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: Nullable<BaseTexture>;
-        private _distortionTexture;
-        distortionTexture: Nullable<BaseTexture>;
-        private _opacityTexture;
-        opacityTexture: Nullable<BaseTexture>;
-        diffuseColor: Color3;
-        speed: number;
-        private _scaledDiffuse;
-        private _renderId;
-        private _lastTime;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        getClassName(): string;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): FireMaterial;
-        serialize(): any;
-        static Parse(source: any, scene: Scene, rootUrl: string): FireMaterial;
-    }
-}

dist/materialsLibrary/babylon.furMaterial.d.ts

@@ -1,46 +0,0 @@
-
-declare module BABYLON {
-    class FurMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: BaseTexture;
-        private _heightTexture;
-        heightTexture: BaseTexture;
-        diffuseColor: Color3;
-        furLength: number;
-        furAngle: number;
-        furColor: Color3;
-        furOffset: number;
-        furSpacing: number;
-        furGravity: Vector3;
-        furSpeed: number;
-        furDensity: number;
-        furOcclusion: number;
-        furTexture: DynamicTexture;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        highLevelFur: boolean;
-        _meshes: AbstractMesh[];
-        private _renderId;
-        private _furTime;
-        constructor(name: string, scene: Scene);
-        furTime: number;
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        updateFur(): void;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): FurMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): FurMaterial;
-        static GenerateTexture(name: string, scene: Scene): DynamicTexture;
-        static FurifyMesh(sourceMesh: Mesh, quality: number): Mesh[];
-    }
-}

dist/materialsLibrary/babylon.gradientMaterial.d.ts

@@ -1,29 +0,0 @@
-
-declare module BABYLON {
-    class GradientMaterial extends PushMaterial {
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        topColor: Color3;
-        topColorAlpha: number;
-        bottomColor: Color3;
-        bottomColorAlpha: number;
-        offset: number;
-        scale: number;
-        smoothness: number;
-        disableLighting: boolean;
-        private _scaledDiffuse;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): GradientMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): GradientMaterial;
-    }
-}

dist/materialsLibrary/babylon.gridMaterial.d.ts

@@ -1,61 +0,0 @@
-
-declare module BABYLON {
-    /**
-     * The grid materials allows you to wrap any shape with a grid.
-     * Colors are customizable.
-     */
-    class GridMaterial extends BABYLON.PushMaterial {
-        /**
-         * Main color of the grid (e.g. between lines)
-         */
-        mainColor: Color3;
-        /**
-         * Color of the grid lines.
-         */
-        lineColor: Color3;
-        /**
-         * The scale of the grid compared to unit.
-         */
-        gridRatio: number;
-        /**
-         * Allows setting an offset for the grid lines.
-         */
-        gridOffset: Vector3;
-        /**
-         * The frequency of thicker lines.
-         */
-        majorUnitFrequency: number;
-        /**
-         * The visibility of minor units in the grid.
-         */
-        minorUnitVisibility: number;
-        /**
-         * The grid opacity outside of the lines.
-         */
-        opacity: number;
-        /**
-         * Determine RBG output is premultiplied by alpha value.
-         */
-        preMultiplyAlpha: boolean;
-        private _gridControl;
-        private _renderId;
-        /**
-         * constructor
-         * @param name The name given to the material in order to identify it afterwards.
-         * @param scene The scene the material is used in.
-         */
-        constructor(name: string, scene: Scene);
-        /**
-         * Returns wehter or not the grid requires alpha blending.
-         */
-        needAlphaBlending(): boolean;
-        needAlphaBlendingForMesh(mesh: AbstractMesh): boolean;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): GridMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): GridMaterial;
-    }
-}

dist/materialsLibrary/babylon.lavaMaterial.d.ts

@@ -1,37 +0,0 @@
-
-declare module BABYLON {
-    class LavaMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: BaseTexture;
-        noiseTexture: BaseTexture;
-        fogColor: Color3;
-        speed: number;
-        movingSpeed: number;
-        lowFrequencySpeed: number;
-        fogDensity: number;
-        private _lastTime;
-        diffuseColor: Color3;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _unlit;
-        unlit: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _scaledDiffuse;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): LavaMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): LavaMaterial;
-    }
-}

dist/materialsLibrary/babylon.mixMaterial.d.ts

@@ -1,56 +0,0 @@
-
-declare module BABYLON {
-    class MixMaterial extends PushMaterial {
-        /**
-         * Mix textures
-         */
-        private _mixTexture1;
-        mixTexture1: BaseTexture;
-        private _mixTexture2;
-        mixTexture2: BaseTexture;
-        /**
-         * Diffuse textures
-         */
-        private _diffuseTexture1;
-        diffuseTexture1: Texture;
-        private _diffuseTexture2;
-        diffuseTexture2: Texture;
-        private _diffuseTexture3;
-        diffuseTexture3: Texture;
-        private _diffuseTexture4;
-        diffuseTexture4: Texture;
-        private _diffuseTexture5;
-        diffuseTexture5: Texture;
-        private _diffuseTexture6;
-        diffuseTexture6: Texture;
-        private _diffuseTexture7;
-        diffuseTexture7: Texture;
-        private _diffuseTexture8;
-        diffuseTexture8: Texture;
-        /**
-         * Uniforms
-         */
-        diffuseColor: Color3;
-        specularColor: Color3;
-        specularPower: number;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): MixMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): MixMaterial;
-    }
-}

dist/materialsLibrary/babylon.normalMaterial.d.ts

@@ -1,27 +0,0 @@
-
-declare module BABYLON {
-    class NormalMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: BaseTexture;
-        diffuseColor: Color3;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): NormalMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): NormalMaterial;
-    }
-}

dist/materialsLibrary/babylon.shadowOnlyMaterial.d.ts

@@ -1,19 +0,0 @@
-
-declare module BABYLON {
-    class ShadowOnlyMaterial extends PushMaterial {
-        private _renderId;
-        private _activeLight;
-        constructor(name: string, scene: Scene);
-        shadowColor: Color3;
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        activeLight: IShadowLight;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        clone(name: string): ShadowOnlyMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): ShadowOnlyMaterial;
-    }
-}

dist/materialsLibrary/babylon.simpleMaterial.d.ts

@@ -1,27 +0,0 @@
-
-declare module BABYLON {
-    class SimpleMaterial extends PushMaterial {
-        private _diffuseTexture;
-        diffuseTexture: BaseTexture;
-        diffuseColor: Color3;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): SimpleMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): SimpleMaterial;
-    }
-}

dist/materialsLibrary/babylon.skyMaterial.d.ts

@@ -1,29 +0,0 @@
-
-declare module BABYLON {
-    class SkyMaterial extends PushMaterial {
-        luminance: number;
-        turbidity: number;
-        rayleigh: number;
-        mieCoefficient: number;
-        mieDirectionalG: number;
-        distance: number;
-        inclination: number;
-        azimuth: number;
-        sunPosition: Vector3;
-        useSunPosition: boolean;
-        private _cameraPosition;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): SkyMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): SkyMaterial;
-    }
-}

dist/materialsLibrary/babylon.terrainMaterial.d.ts

@@ -1,41 +0,0 @@
-
-declare module BABYLON {
-    class TerrainMaterial extends PushMaterial {
-        private _mixTexture;
-        mixTexture: BaseTexture;
-        private _diffuseTexture1;
-        diffuseTexture1: Texture;
-        private _diffuseTexture2;
-        diffuseTexture2: Texture;
-        private _diffuseTexture3;
-        diffuseTexture3: Texture;
-        private _bumpTexture1;
-        bumpTexture1: Texture;
-        private _bumpTexture2;
-        bumpTexture2: Texture;
-        private _bumpTexture3;
-        bumpTexture3: Texture;
-        diffuseColor: Color3;
-        specularColor: Color3;
-        specularPower: number;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): TerrainMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): TerrainMaterial;
-    }
-}

dist/materialsLibrary/babylon.triPlanarMaterial.d.ts

@@ -1,41 +0,0 @@
-
-declare module BABYLON {
-    class TriPlanarMaterial extends PushMaterial {
-        mixTexture: BaseTexture;
-        private _diffuseTextureX;
-        diffuseTextureX: BaseTexture;
-        private _diffuseTextureY;
-        diffuseTextureY: BaseTexture;
-        private _diffuseTextureZ;
-        diffuseTextureZ: BaseTexture;
-        private _normalTextureX;
-        normalTextureX: BaseTexture;
-        private _normalTextureY;
-        normalTextureY: BaseTexture;
-        private _normalTextureZ;
-        normalTextureZ: BaseTexture;
-        tileSize: number;
-        diffuseColor: Color3;
-        specularColor: Color3;
-        specularPower: number;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        private _renderId;
-        constructor(name: string, scene: Scene);
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): TriPlanarMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): TriPlanarMaterial;
-    }
-}

dist/materialsLibrary/babylon.waterMaterial.d.ts

@@ -1,110 +0,0 @@
-
-declare module BABYLON {
-    class WaterMaterial extends PushMaterial {
-        renderTargetSize: Vector2;
-        private _bumpTexture;
-        bumpTexture: BaseTexture;
-        diffuseColor: Color3;
-        specularColor: Color3;
-        specularPower: number;
-        private _disableLighting;
-        disableLighting: boolean;
-        private _maxSimultaneousLights;
-        maxSimultaneousLights: number;
-        /**
-        * @param {number}: Represents the wind force
-        */
-        windForce: number;
-        /**
-        * @param {Vector2}: The direction of the wind in the plane (X, Z)
-        */
-        windDirection: Vector2;
-        /**
-        * @param {number}: Wave height, represents the height of the waves
-        */
-        waveHeight: number;
-        /**
-        * @param {number}: Bump height, represents the bump height related to the bump map
-        */
-        bumpHeight: number;
-        /**
-         * @param {boolean}: Add a smaller moving bump to less steady waves.
-         */
-        private _bumpSuperimpose;
-        bumpSuperimpose: boolean;
-        /**
-         * @param {boolean}: Color refraction and reflection differently with .waterColor2 and .colorBlendFactor2. Non-linear (physically correct) fresnel.
-         */
-        private _fresnelSeparate;
-        fresnelSeparate: boolean;
-        /**
-         * @param {boolean}: bump Waves modify the reflection.
-         */
-        private _bumpAffectsReflection;
-        bumpAffectsReflection: boolean;
-        /**
-        * @param {number}: The water color blended with the refraction (near)
-        */
-        waterColor: Color3;
-        /**
-        * @param {number}: The blend factor related to the water color
-        */
-        colorBlendFactor: number;
-        /**
-         * @param {number}: The water color blended with the reflection (far)
-         */
-        waterColor2: Color3;
-        /**
-         * @param {number}: The blend factor related to the water color (reflection, far)
-         */
-        colorBlendFactor2: number;
-        /**
-        * @param {number}: Represents the maximum length of a wave
-        */
-        waveLength: number;
-        /**
-        * @param {number}: Defines the waves speed
-        */
-        waveSpeed: number;
-        protected _renderTargets: SmartArray<RenderTargetTexture>;
-        private _mesh;
-        private _refractionRTT;
-        private _reflectionRTT;
-        private _reflectionTransform;
-        private _lastTime;
-        private _lastDeltaTime;
-        private _renderId;
-        private _useLogarithmicDepth;
-        private _waitingRenderList;
-        /**
-         * Gets a boolean indicating that current material needs to register RTT
-         */
-        readonly hasRenderTargetTextures: boolean;
-        /**
-        * Constructor
-        */
-        constructor(name: string, scene: Scene, renderTargetSize?: Vector2);
-        useLogarithmicDepth: boolean;
-        readonly refractionTexture: Nullable<RenderTargetTexture>;
-        readonly reflectionTexture: Nullable<RenderTargetTexture>;
-        addToRenderList(node: any): void;
-        enableRenderTargets(enable: boolean): void;
-        getRenderList(): Nullable<AbstractMesh[]>;
-        readonly renderTargetsEnabled: boolean;
-        needAlphaBlending(): boolean;
-        needAlphaTesting(): boolean;
-        getAlphaTestTexture(): Nullable<BaseTexture>;
-        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
-        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
-        private _createRenderTargets;
-        getAnimatables(): IAnimatable[];
-        getActiveTextures(): BaseTexture[];
-        hasTexture(texture: BaseTexture): boolean;
-        dispose(forceDisposeEffect?: boolean): void;
-        clone(name: string): WaterMaterial;
-        serialize(): any;
-        getClassName(): string;
-        static Parse(source: any, scene: Scene, rootUrl: string): WaterMaterial;
-        static CreateDefaultMesh(name: string, scene: Scene): Mesh;
-    }
-}

dist/postProcessesLibrary/babylon.asciiArtPostProcess.d.ts

@@ -1,102 +0,0 @@
-
-declare module BABYLON {
-    /**
-     * AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
-     *
-     * It basically takes care rendering the font front the given font size to a texture.
-     * This is used later on in the postprocess.
-     */
-    class AsciiArtFontTexture extends BaseTexture {
-        private _font;
-        private _text;
-        private _charSize;
-        /**
-         * Gets the size of one char in the texture (each char fits in size * size space in the texture).
-         */
-        readonly charSize: number;
-        /**
-         * Create a new instance of the Ascii Art FontTexture class
-         * @param name the name of the texture
-         * @param font the font to use, use the W3C CSS notation
-         * @param text the caracter set to use in the rendering.
-         * @param scene the scene that owns the texture
-         */
-        constructor(name: string, font: string, text: string, scene?: Nullable<Scene>);
-        /**
-         * Gets the max char width of a font.
-         * @param font the font to use, use the W3C CSS notation
-         * @return the max char width
-         */
-        private getFontWidth;
-        /**
-         * Gets the max char height of a font.
-         * @param font the font to use, use the W3C CSS notation
-         * @return the max char height
-         */
-        private getFontHeight;
-        /**
-         * Clones the current AsciiArtTexture.
-         * @return the clone of the texture.
-         */
-        clone(): AsciiArtFontTexture;
-        /**
-         * Parses a json object representing the texture and returns an instance of it.
-         * @param source the source JSON representation
-         * @param scene the scene to create the texture for
-         * @return the parsed texture
-         */
-        static Parse(source: any, scene: Scene): AsciiArtFontTexture;
-    }
-    /**
-     * Option available in the Ascii Art Post Process.
-     */
-    interface IAsciiArtPostProcessOptions {
-        /**
-         * The font to use following the w3c font definition.
-         */
-        font?: string;
-        /**
-         * The character set to use in the postprocess.
-         */
-        characterSet?: string;
-        /**
-         * This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
-         * This number is defined between 0 and 1;
-         */
-        mixToTile?: number;
-        /**
-         * This defines the amount you want to mix the normal rendering pass in the ascii art.
-         * This number is defined between 0 and 1;
-         */
-        mixToNormal?: number;
-    }
-    /**
-     * AsciiArtPostProcess helps rendering everithing in Ascii Art.
-     *
-     * Simmply add it to your scene and let the nerd that lives in you have fun.
-     * Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
-     */
-    class AsciiArtPostProcess extends PostProcess {
-        /**
-         * The font texture used to render the char in the post process.
-         */
-        private _asciiArtFontTexture;
-        /**
-         * This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
-         * This number is defined between 0 and 1;
-         */
-        mixToTile: number;
-        /**
-         * This defines the amount you want to mix the normal rendering pass in the ascii art.
-         * This number is defined between 0 and 1;
-         */
-        mixToNormal: number;
-        /**
-         * Instantiates a new Ascii Art Post Process.
-         * @param name the name to give to the postprocess
-         * @camera the camera to apply the post process to.
-         * @param options can either be the font name or an option object following the IAsciiArtPostProcessOptions format
-         */
-        constructor(name: string, camera: Camera, options?: string | IAsciiArtPostProcessOptions);
-    }
-}

dist/postProcessesLibrary/babylon.digitalRainPostProcess.d.ts

@@ -1,98 +0,0 @@
-
-declare module BABYLON {
-    /**
-     * DigitalRainFontTexture is the helper class used to easily create your digital rain font texture.
-     *
-     * It basically takes care rendering the font front the given font size to a texture.
-     * This is used later on in the postprocess.
-     */
-    class DigitalRainFontTexture extends BaseTexture {
-        private _font;
-        private _text;
-        private _charSize;
-        /**
-         * Gets the size of one char in the texture (each char fits in size * size space in the texture).
-         */
-        readonly charSize: number;
-        /**
-         * Create a new instance of the Digital Rain FontTexture class
-         * @param name the name of the texture
-         * @param font the font to use, use the W3C CSS notation
-         * @param text the caracter set to use in the rendering.
-         * @param scene the scene that owns the texture
-         */
-        constructor(name: string, font: string, text: string, scene?: Nullable<Scene>);
-        /**
-         * Gets the max char width of a font.
-         * @param font the font to use, use the W3C CSS notation
-         * @return the max char width
-         */
-        private getFontWidth;
-        /**
-         * Gets the max char height of a font.
-         * @param font the font to use, use the W3C CSS notation
-         * @return the max char height
-         */
-        private getFontHeight;
-        /**
-         * Clones the current DigitalRainFontTexture.
-         * @return the clone of the texture.
-         */
-        clone(): DigitalRainFontTexture;
-        /**
-         * Parses a json object representing the texture and returns an instance of it.
-         * @param source the source JSON representation
-         * @param scene the scene to create the texture for
-         * @return the parsed texture
-         */
-        static Parse(source: any, scene: Scene): DigitalRainFontTexture;
-    }
-    /**
-     * Option available in the Digital Rain Post Process.
-     */
-    interface IDigitalRainPostProcessOptions {
-        /**
-         * The font to use following the w3c font definition.
-         */
-        font?: string;
-        /**
-         * This defines the amount you want to mix the "tile" or caracter space colored in the digital rain.
-         * This number is defined between 0 and 1;
-         */
-        mixToTile?: number;
-        /**
-         * This defines the amount you want to mix the normal rendering pass in the digital rain.
-         * This number is defined between 0 and 1;
-         */
-        mixToNormal?: number;
-    }
-    /**
-     * DigitalRainPostProcess helps rendering everithing in digital rain.
-     *
-     * Simmply add it to your scene and let the nerd that lives in you have fun.
-     * Example usage: var pp = new DigitalRainPostProcess("digitalRain", "20px Monospace", camera);
-     */
-    class DigitalRainPostProcess extends PostProcess {
-        /**
-         * The font texture used to render the char in the post process.
-         */
-        private _digitalRainFontTexture;
-        /**
-         * This defines the amount you want to mix the "tile" or caracter space colored in the digital rain.
-         * This number is defined between 0 and 1;
-         */
-        mixToTile: number;
-        /**
-         * This defines the amount you want to mix the normal rendering pass in the digital rain.
-         * This number is defined between 0 and 1;
-         */
-        mixToNormal: number;
-        /**
-         * Instantiates a new Digital Rain Post Process.
-         * @param name the name to give to the postprocess
-         * @camera the camera to apply the post process to.
-         * @param options can either be the font name or an option object following the IDigitalRainPostProcessOptions format
-         */
-        constructor(name: string, camera: Camera, options?: string | IDigitalRainPostProcessOptions);
-    }
-}

dist/preview release/babylon.d.ts

@@ -11888,6 +11888,9 @@ declare module BABYLON {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -12004,12 +12007,13 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -13247,14 +13251,17 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -53971,6 +53978,11 @@ declare module BABYLON {
          */
         protected _shouldRenderMesh(mesh: Mesh): boolean;
         /**
+         * Adds specific effects defines.
+         * @param defines The defines to add specifics to.
+         */
+        protected _addCustomEffectDefines(defines: string[]): void;
+        /**
          * Sets the required values for both the emissive texture and and the main color.
          */
         protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void;
@@ -55750,7 +55762,6 @@ declare module BABYLON {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -60685,17 +60696,15 @@ declare module BABYLON {
         indices?: number[];
     }
     /**
-     * Helper class to render one or more effects
+     * Helper class to render one or more effects.
+     * You can access the previous rendering in your shader by declaring a sampler named textureSampler
      */
     export class EffectRenderer {
         private engine;
         private static _DefaultOptions;
         private _vertexBuffers;
         private _indexBuffer;
-        private _ringBufferIndex;
-        private _ringScreenBuffer;
         private _fullscreenViewport;
-        private _getNextFrameBuffer;
         /**
          * Creates an effect renderer
          * @param engine the engine to use for rendering
@@ -60723,12 +60732,13 @@ declare module BABYLON {
          * Draws a full screen quad.
          */
         draw(): void;
+        private isRenderTargetTexture;
         /**
          * renders one or more effects to a specified texture
-         * @param effectWrappers list of effects to renderer
-         * @param outputTexture texture to draw to, if null it will render to the screen
+         * @param effectWrapper the effect to renderer
+         * @param outputTexture texture to draw to, if null it will render to the screen.
          */
-        render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture?: Nullable<Texture>): void;
+        render(effectWrapper: EffectWrapper, outputTexture?: Nullable<InternalTexture | RenderTargetTexture>): void;
         /**
          * Disposes of the effect renderer
          */
@@ -63245,7 +63255,7 @@ declare module BABYLON {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -63477,10 +63487,11 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -63533,9 +63544,10 @@ declare module BABYLON {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set

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

@@ -12148,6 +12148,9 @@ declare module "babylonjs/Particles/particleSystem" {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -12264,12 +12267,13 @@ declare module "babylonjs/Particles/particleSystem" {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -13574,14 +13578,17 @@ declare module "babylonjs/Particles/IParticleSystem" {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -56324,6 +56331,11 @@ declare module "babylonjs/Layers/highlightLayer" {
          */
         protected _shouldRenderMesh(mesh: Mesh): boolean;
         /**
+         * Adds specific effects defines.
+         * @param defines The defines to add specifics to.
+         */
+        protected _addCustomEffectDefines(defines: string[]): void;
+        /**
          * Sets the required values for both the emissive texture and and the main color.
          */
         protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void;
@@ -58255,7 +58267,6 @@ declare module "babylonjs/Physics/Plugins/ammoJSPlugin" {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -63715,12 +63726,12 @@ declare module "babylonjs/Materials/Node/index" {
 }
 declare module "babylonjs/Materials/effectRenderer" {
     import { Nullable } from "babylonjs/types";
-    import { Texture } from "babylonjs/Materials/Textures/texture";
+    import { InternalTexture } from "babylonjs/Materials/Textures/internalTexture";
+    import { RenderTargetTexture } from "babylonjs/Materials/Textures/renderTargetTexture";
     import { ThinEngine } from "babylonjs/Engines/thinEngine";
     import { Viewport } from "babylonjs/Maths/math.viewport";
     import { Observable } from "babylonjs/Misc/observable";
     import { Effect } from "babylonjs/Materials/effect";
-    import "babylonjs/Engines/Extensions/engine.renderTarget";
     import "babylonjs/Shaders/postprocess.vertex";
     /**
      * Effect Render Options
@@ -63736,17 +63747,15 @@ declare module "babylonjs/Materials/effectRenderer" {
         indices?: number[];
     }
     /**
-     * Helper class to render one or more effects
+     * Helper class to render one or more effects.
+     * You can access the previous rendering in your shader by declaring a sampler named textureSampler
      */
     export class EffectRenderer {
         private engine;
         private static _DefaultOptions;
         private _vertexBuffers;
         private _indexBuffer;
-        private _ringBufferIndex;
-        private _ringScreenBuffer;
         private _fullscreenViewport;
-        private _getNextFrameBuffer;
         /**
          * Creates an effect renderer
          * @param engine the engine to use for rendering
@@ -63774,12 +63783,13 @@ declare module "babylonjs/Materials/effectRenderer" {
          * Draws a full screen quad.
          */
         draw(): void;
+        private isRenderTargetTexture;
         /**
          * renders one or more effects to a specified texture
-         * @param effectWrappers list of effects to renderer
-         * @param outputTexture texture to draw to, if null it will render to the screen
+         * @param effectWrapper the effect to renderer
+         * @param outputTexture texture to draw to, if null it will render to the screen.
          */
-        render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture?: Nullable<Texture>): void;
+        render(effectWrapper: EffectWrapper, outputTexture?: Nullable<InternalTexture | RenderTargetTexture>): void;
         /**
          * Disposes of the effect renderer
          */
@@ -66480,7 +66490,7 @@ declare module "babylonjs/Particles/gpuParticleSystem" {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -66712,10 +66722,11 @@ declare module "babylonjs/Particles/gpuParticleSystem" {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -66774,9 +66785,10 @@ declare module "babylonjs/Particles/particleSystemSet" {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set
@@ -86176,6 +86188,9 @@ declare module BABYLON {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -86292,12 +86307,13 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -87535,14 +87551,17 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -128259,6 +128278,11 @@ declare module BABYLON {
          */
         protected _shouldRenderMesh(mesh: Mesh): boolean;
         /**
+         * Adds specific effects defines.
+         * @param defines The defines to add specifics to.
+         */
+        protected _addCustomEffectDefines(defines: string[]): void;
+        /**
          * Sets the required values for both the emissive texture and and the main color.
          */
         protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void;
@@ -130038,7 +130062,6 @@ declare module BABYLON {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -134973,17 +134996,15 @@ declare module BABYLON {
         indices?: number[];
     }
     /**
-     * Helper class to render one or more effects
+     * Helper class to render one or more effects.
+     * You can access the previous rendering in your shader by declaring a sampler named textureSampler
      */
     export class EffectRenderer {
         private engine;
         private static _DefaultOptions;
         private _vertexBuffers;
         private _indexBuffer;
-        private _ringBufferIndex;
-        private _ringScreenBuffer;
         private _fullscreenViewport;
-        private _getNextFrameBuffer;
         /**
          * Creates an effect renderer
          * @param engine the engine to use for rendering
@@ -135011,12 +135032,13 @@ declare module BABYLON {
          * Draws a full screen quad.
          */
         draw(): void;
+        private isRenderTargetTexture;
         /**
          * renders one or more effects to a specified texture
-         * @param effectWrappers list of effects to renderer
-         * @param outputTexture texture to draw to, if null it will render to the screen
+         * @param effectWrapper the effect to renderer
+         * @param outputTexture texture to draw to, if null it will render to the screen.
          */
-        render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture?: Nullable<Texture>): void;
+        render(effectWrapper: EffectWrapper, outputTexture?: Nullable<InternalTexture | RenderTargetTexture>): void;
         /**
          * Disposes of the effect renderer
          */
@@ -137533,7 +137555,7 @@ declare module BABYLON {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -137765,10 +137787,11 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -137821,9 +137844,10 @@ declare module BABYLON {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set

dist/preview release/documentation.d.ts

@@ -11888,6 +11888,9 @@ declare module BABYLON {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -12004,12 +12007,13 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -13247,14 +13251,17 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -55750,7 +55757,6 @@ declare module BABYLON {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -63245,7 +63251,7 @@ declare module BABYLON {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -63477,10 +63483,11 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -63533,9 +63540,10 @@ declare module BABYLON {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set

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

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

@@ -1524,10 +1524,17 @@ declare module INSPECTOR {
     }
     export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {
         gradient: number;
+        factor1: string;
+        factor2?: string;
     }> {
         constructor(props: IFactorGradientStepGridComponent);
-        updateFactor1(factor: number): void;
-        updateFactor2(factor: number): void;
+        shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {
+            gradient: number;
+            factor1: string;
+            factor2?: string;
+        }): boolean;
+        updateFactor1(valueString: string): void;
+        updateFactor2(valueString: string): void;
         updateGradient(gradient: number): void;
         onPointerUp(): void;
         lock(): void;

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

@@ -1979,10 +1979,17 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/par
     }
     export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {
         gradient: number;
+        factor1: string;
+        factor2?: string;
     }> {
         constructor(props: IFactorGradientStepGridComponent);
-        updateFactor1(factor: number): void;
-        updateFactor2(factor: number): void;
+        shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {
+            gradient: number;
+            factor1: string;
+            factor2?: string;
+        }): boolean;
+        updateFactor1(valueString: string): void;
+        updateFactor2(valueString: string): void;
         updateGradient(gradient: number): void;
         onPointerUp(): void;
         lock(): void;
@@ -4284,10 +4291,17 @@ declare module INSPECTOR {
     }
     export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {
         gradient: number;
+        factor1: string;
+        factor2?: string;
     }> {
         constructor(props: IFactorGradientStepGridComponent);
-        updateFactor1(factor: number): void;
-        updateFactor2(factor: number): void;
+        shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {
+            gradient: number;
+            factor1: string;
+            factor2?: string;
+        }): boolean;
+        updateFactor1(valueString: string): void;
+        updateFactor2(valueString: string): void;
         updateGradient(gradient: number): void;
         onPointerUp(): void;
         lock(): void;

dist/preview release/inspector/package.json

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

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

@@ -46,31 +46,6 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    export class NodePort {
-        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
-        node: GraphNode;
-        private _element;
-        private _img;
-        private _globalState;
-        private _onCandidateLinkMovedObserver;
-        private _portLabel;
-        private _frameId;
-        private _isInput;
-        private _framePortId;
-        delegatedPort: BABYLON.Nullable<NodePort>;
-        get element(): HTMLDivElement;
-        get frameId(): BABYLON.Nullable<number>;
-        get isInput(): boolean;
-        get portLabel(): string;
-        get framePortId(): BABYLON.Nullable<number>;
-        set portLabel(newLabel: string);
-        refresh(): void;
-        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, frameId: BABYLON.Nullable<number>, framePortId: number | undefined);
-        dispose(): void;
-        static CreatePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, frameId: number | null | undefined, framePortId: number | undefined): NodePort;
-    }
-}
-declare module NODEEDITOR {
     export interface INodeLocationInfo {
         blockId: number;
         x: number;
@@ -122,6 +97,35 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class FrameNodePort extends NodePort {
+        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
+        node: GraphNode;
+        private _onFramePortMoveUpObservable;
+        private _onFramePortMoveDownObservable;
+        private _onFramePortPositionChangedObservable;
+        private _portLabel;
+        private _isInput;
+        private _framePortPosition;
+        private _framePortId;
+        get onFramePortMoveUpObservable(): BABYLON.Observable<FrameNodePort>;
+        get onFramePortMoveDownObservable(): BABYLON.Observable<FrameNodePort>;
+        get onFramePortPositionChangedObservable(): BABYLON.Observable<FramePortPosition>;
+        get isInput(): boolean;
+        get portLabel(): string;
+        get framePortId(): BABYLON.Nullable<number>;
+        set portLabel(newLabel: string);
+        get framePortPosition(): FramePortPosition;
+        set framePortPosition(position: FramePortPosition);
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
+        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+    }
+}
+declare module NODEEDITOR {
+    export enum FramePortPosition {
+        Top = 0,
+        Middle = 1,
+        Bottom = 2
+    }
     export class GraphFrame {
         private readonly CollapsedWidth;
         private static _FrameCounter;
@@ -149,8 +153,10 @@ declare module NODEEDITOR {
         private _mouseStartPointX;
         private _mouseStartPointY;
         private _onSelectionChangedObserver;
+        private _onGraphNodeRemovalObserver;
         private _isCollapsed;
-        private _ports;
+        private _frameInPorts;
+        private _frameOutPorts;
         private _controlledPorts;
         private _id;
         private _comments;
@@ -168,7 +174,7 @@ declare module NODEEDITOR {
         private _createInputPort;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
-        get ports(): NodePort[];
+        get ports(): FrameNodePort[];
         get name(): string;
         set name(value: string);
         get color(): BABYLON.Color3;
@@ -194,10 +200,10 @@ declare module NODEEDITOR {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        moveFramePortUp(nodePort: NodePort): void;
-        private _moveFramePortUp;
-        moveFramePortDown(nodePort: NodePort): void;
-        private _moveFramePortDown;
+        private moveFramePortUp;
+        private _movePortUp;
+        private moveFramePortDown;
+        private _movePortDown;
         private initResizing;
         private cleanUpResizing;
         private updateMinHeightWithComments;
@@ -250,6 +256,23 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class NodePort {
+        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
+        node: GraphNode;
+        protected _element: HTMLDivElement;
+        protected _img: HTMLImageElement;
+        protected _globalState: GlobalState;
+        protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
+        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        delegatedPort: BABYLON.Nullable<FrameNodePort>;
+        get element(): HTMLDivElement;
+        refresh(): void;
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
+        dispose(): void;
+        static CreatePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState): NodePort;
+    }
+}
+declare module NODEEDITOR {
     export class NodeLink {
         private _graphCanvas;
         private _portA;
@@ -263,8 +286,8 @@ declare module NODEEDITOR {
         onDisposedObservable: BABYLON.Observable<NodeLink>;
         get isVisible(): boolean;
         set isVisible(value: boolean);
-        get portA(): NodePort;
-        get portB(): NodePort | undefined;
+        get portA(): FrameNodePort | NodePort;
+        get portB(): FrameNodePort | NodePort | undefined;
         get nodeA(): GraphNode;
         get nodeB(): GraphNode | undefined;
         update(endX?: number, endY?: number, straight?: boolean): void;
@@ -1161,7 +1184,7 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<NodePort | GraphNode | GraphFrame | NodeLink>>;
+        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
         onRebuildRequiredObservable: BABYLON.Observable<void>;
         onBuiltObservable: BABYLON.Observable<void>;
         onResetRequiredObservable: BABYLON.Observable<void>;
@@ -1179,10 +1202,9 @@ declare module NODEEDITOR {
         onAnimationCommandActivated: BABYLON.Observable<void>;
         onCandidateLinkMoved: BABYLON.Observable<BABYLON.Nullable<BABYLON.Vector2>>;
         onSelectionBoxMoved: BABYLON.Observable<DOMRect | ClientRect>;
-        onFrameCreated: BABYLON.Observable<GraphFrame>;
-        onCandidatePortSelected: BABYLON.Observable<BABYLON.Nullable<NodePort>>;
-        onFramePortMoveUpObserver: BABYLON.Observable<NodePort>;
-        onFramePortMoveDownObserver: BABYLON.Observable<NodePort>;
+        onFrameCreatedObservable: BABYLON.Observable<GraphFrame>;
+        onCandidatePortSelectedObservable: BABYLON.Observable<BABYLON.Nullable<FrameNodePort | NodePort>>;
+        onGraphNodeRemovalObservable: BABYLON.Observable<GraphNode>;
         onGetNodeFromBlock: (block: BABYLON.NodeMaterialBlock) => GraphNode;
         onGridSizeChanged: BABYLON.Observable<void>;
         previewMeshType: PreviewMeshType;
@@ -1241,12 +1263,16 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    export interface INodePortPropertyTabComponentProps {
+    export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
-        nodePort: NodePort;
+        frameNodePort: FrameNodePort;
     }
-    export class NodePortPropertyTabComponent extends React.Component<INodePortPropertyTabComponentProps> {
-        constructor(props: INodePortPropertyTabComponentProps);
+    export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
+        framePortPosition: FramePortPosition;
+    }> {
+        private _onFramePortPositionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
         render(): JSX.Element;
     }
 }
@@ -1257,7 +1283,7 @@ declare module NODEEDITOR {
     export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
         currentNode: BABYLON.Nullable<GraphNode>;
         currentFrame: BABYLON.Nullable<GraphFrame>;
-        currentNodePort: BABYLON.Nullable<NodePort>;
+        currentFrameNodePort: BABYLON.Nullable<FrameNodePort>;
     }> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);

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

@@ -110,36 +110,6 @@ declare module "babylonjs-node-editor/diagram/display/displayManager" {
         getHeaderText(block: NodeMaterialBlock): string;
     }
 }
-declare module "babylonjs-node-editor/diagram/nodePort" {
-    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { Nullable } from 'babylonjs/types';
-    import { IDisplayManager } from "babylonjs-node-editor/diagram/display/displayManager";
-    import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
-    export class NodePort {
-        connectionPoint: NodeMaterialConnectionPoint;
-        node: GraphNode;
-        private _element;
-        private _img;
-        private _globalState;
-        private _onCandidateLinkMovedObserver;
-        private _portLabel;
-        private _frameId;
-        private _isInput;
-        private _framePortId;
-        delegatedPort: Nullable<NodePort>;
-        get element(): HTMLDivElement;
-        get frameId(): Nullable<number>;
-        get isInput(): boolean;
-        get portLabel(): string;
-        get framePortId(): Nullable<number>;
-        set portLabel(newLabel: string);
-        refresh(): void;
-        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, frameId: Nullable<number>, framePortId: number | undefined);
-        dispose(): void;
-        static CreatePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, frameId: number | null | undefined, framePortId: number | undefined): NodePort;
-    }
-}
 declare module "babylonjs-node-editor/nodeLocationInfo" {
     export interface INodeLocationInfo {
         blockId: number;
@@ -195,6 +165,38 @@ declare module "babylonjs-node-editor/stringTools" {
         static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
     }
 }
+declare module "babylonjs-node-editor/diagram/frameNodePort" {
+    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
+    import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
+    import { FramePortPosition } from "babylonjs-node-editor/diagram/graphFrame";
+    import { GlobalState } from "babylonjs-node-editor/globalState";
+    import { IDisplayManager } from "babylonjs-node-editor/diagram/display/displayManager";
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { Nullable } from 'babylonjs/types';
+    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    export class FrameNodePort extends NodePort {
+        connectionPoint: NodeMaterialConnectionPoint;
+        node: GraphNode;
+        private _onFramePortMoveUpObservable;
+        private _onFramePortMoveDownObservable;
+        private _onFramePortPositionChangedObservable;
+        private _portLabel;
+        private _isInput;
+        private _framePortPosition;
+        private _framePortId;
+        get onFramePortMoveUpObservable(): Observable<FrameNodePort>;
+        get onFramePortMoveDownObservable(): Observable<FrameNodePort>;
+        get onFramePortPositionChangedObservable(): Observable<FramePortPosition>;
+        get isInput(): boolean;
+        get portLabel(): string;
+        get framePortId(): Nullable<number>;
+        set portLabel(newLabel: string);
+        get framePortPosition(): FramePortPosition;
+        set framePortPosition(position: FramePortPosition);
+        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
+        static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+    }
+}
 declare module "babylonjs-node-editor/diagram/graphFrame" {
     import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
     import { GraphCanvasComponent } from "babylonjs-node-editor/diagram/graphCanvas";
@@ -202,7 +204,12 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
     import { Observable } from 'babylonjs/Misc/observable';
     import { IFrameData } from "babylonjs-node-editor/nodeLocationInfo";
     import { Color3 } from 'babylonjs/Maths/math.color';
-    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    export enum FramePortPosition {
+        Top = 0,
+        Middle = 1,
+        Bottom = 2
+    }
     export class GraphFrame {
         private readonly CollapsedWidth;
         private static _FrameCounter;
@@ -230,8 +237,10 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _mouseStartPointX;
         private _mouseStartPointY;
         private _onSelectionChangedObserver;
+        private _onGraphNodeRemovalObserver;
         private _isCollapsed;
-        private _ports;
+        private _frameInPorts;
+        private _frameOutPorts;
         private _controlledPorts;
         private _id;
         private _comments;
@@ -249,7 +258,7 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _createInputPort;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
-        get ports(): NodePort[];
+        get ports(): FrameNodePort[];
         get name(): string;
         set name(value: string);
         get color(): Color3;
@@ -275,10 +284,10 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        moveFramePortUp(nodePort: NodePort): void;
-        private _moveFramePortUp;
-        moveFramePortDown(nodePort: NodePort): void;
-        private _moveFramePortDown;
+        private moveFramePortUp;
+        private _movePortUp;
+        private moveFramePortDown;
+        private _movePortDown;
         private initResizing;
         private cleanUpResizing;
         private updateMinHeightWithComments;
@@ -330,11 +339,39 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         }): GraphFrame;
     }
 }
+declare module "babylonjs-node-editor/diagram/nodePort" {
+    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { GlobalState } from "babylonjs-node-editor/globalState";
+    import { Nullable } from 'babylonjs/types';
+    import { Observer } from 'babylonjs/Misc/observable';
+    import { Vector2 } from 'babylonjs/Maths/math.vector';
+    import { IDisplayManager } from "babylonjs-node-editor/diagram/display/displayManager";
+    import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
+    import { NodeLink } from "babylonjs-node-editor/diagram/nodeLink";
+    import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    export class NodePort {
+        connectionPoint: NodeMaterialConnectionPoint;
+        node: GraphNode;
+        protected _element: HTMLDivElement;
+        protected _img: HTMLImageElement;
+        protected _globalState: GlobalState;
+        protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
+        protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        delegatedPort: Nullable<FrameNodePort>;
+        get element(): HTMLDivElement;
+        refresh(): void;
+        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
+        dispose(): void;
+        static CreatePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState): NodePort;
+    }
+}
 declare module "babylonjs-node-editor/diagram/nodeLink" {
     import { GraphCanvasComponent } from "babylonjs-node-editor/diagram/graphCanvas";
     import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
     import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
     import { Observable } from 'babylonjs/Misc/observable';
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
     export class NodeLink {
         private _graphCanvas;
         private _portA;
@@ -348,8 +385,8 @@ declare module "babylonjs-node-editor/diagram/nodeLink" {
         onDisposedObservable: Observable<NodeLink>;
         get isVisible(): boolean;
         set isVisible(value: boolean);
-        get portA(): NodePort;
-        get portB(): NodePort | undefined;
+        get portA(): FrameNodePort | NodePort;
+        get portB(): FrameNodePort | NodePort | undefined;
         get nodeA(): GraphNode;
         get nodeB(): GraphNode | undefined;
         update(endX?: number, endY?: number, straight?: boolean): void;
@@ -1400,12 +1437,13 @@ declare module "babylonjs-node-editor/globalState" {
     import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
     import { NodeLink } from "babylonjs-node-editor/diagram/nodeLink";
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
     export class GlobalState {
         nodeMaterial: NodeMaterial;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: Observable<Nullable<NodePort | GraphNode | GraphFrame | NodeLink>>;
+        onSelectionChangedObservable: Observable<Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
         onRebuildRequiredObservable: Observable<void>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
@@ -1423,10 +1461,9 @@ declare module "babylonjs-node-editor/globalState" {
         onAnimationCommandActivated: Observable<void>;
         onCandidateLinkMoved: Observable<Nullable<Vector2>>;
         onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
-        onFrameCreated: Observable<GraphFrame>;
-        onCandidatePortSelected: Observable<Nullable<NodePort>>;
-        onFramePortMoveUpObserver: Observable<NodePort>;
-        onFramePortMoveDownObserver: Observable<NodePort>;
+        onFrameCreatedObservable: Observable<GraphFrame>;
+        onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
+        onGraphNodeRemovalObservable: Observable<GraphNode>;
         onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
         onGridSizeChanged: Observable<void>;
         previewMeshType: PreviewMeshType;
@@ -1490,16 +1527,21 @@ declare module "babylonjs-node-editor/diagram/properties/framePropertyComponent"
         render(): JSX.Element;
     }
 }
-declare module "babylonjs-node-editor/diagram/properties/nodePortPropertyComponent" {
+declare module "babylonjs-node-editor/diagram/properties/frameNodePortPropertyComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
-    export interface INodePortPropertyTabComponentProps {
+    import { FramePortPosition } from "babylonjs-node-editor/diagram/graphFrame";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
-        nodePort: NodePort;
+        frameNodePort: FrameNodePort;
     }
-    export class NodePortPropertyTabComponent extends React.Component<INodePortPropertyTabComponentProps> {
-        constructor(props: INodePortPropertyTabComponentProps);
+    export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
+        framePortPosition: FramePortPosition;
+    }> {
+        private _onFramePortPositionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
         render(): JSX.Element;
     }
 }
@@ -1510,14 +1552,14 @@ declare module "babylonjs-node-editor/components/propertyTab/propertyTabComponen
     import { GraphNode } from "babylonjs-node-editor/diagram/graphNode";
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-    import { NodePort } from "babylonjs-node-editor/diagram/nodePort";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
     interface IPropertyTabComponentProps {
         globalState: GlobalState;
     }
     export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
         currentNode: Nullable<GraphNode>;
         currentFrame: Nullable<GraphFrame>;
-        currentNodePort: Nullable<NodePort>;
+        currentFrameNodePort: Nullable<FrameNodePort>;
     }> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
@@ -1787,31 +1829,6 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    export class NodePort {
-        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
-        node: GraphNode;
-        private _element;
-        private _img;
-        private _globalState;
-        private _onCandidateLinkMovedObserver;
-        private _portLabel;
-        private _frameId;
-        private _isInput;
-        private _framePortId;
-        delegatedPort: BABYLON.Nullable<NodePort>;
-        get element(): HTMLDivElement;
-        get frameId(): BABYLON.Nullable<number>;
-        get isInput(): boolean;
-        get portLabel(): string;
-        get framePortId(): BABYLON.Nullable<number>;
-        set portLabel(newLabel: string);
-        refresh(): void;
-        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, frameId: BABYLON.Nullable<number>, framePortId: number | undefined);
-        dispose(): void;
-        static CreatePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, frameId: number | null | undefined, framePortId: number | undefined): NodePort;
-    }
-}
-declare module NODEEDITOR {
     export interface INodeLocationInfo {
         blockId: number;
         x: number;
@@ -1863,6 +1880,35 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class FrameNodePort extends NodePort {
+        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
+        node: GraphNode;
+        private _onFramePortMoveUpObservable;
+        private _onFramePortMoveDownObservable;
+        private _onFramePortPositionChangedObservable;
+        private _portLabel;
+        private _isInput;
+        private _framePortPosition;
+        private _framePortId;
+        get onFramePortMoveUpObservable(): BABYLON.Observable<FrameNodePort>;
+        get onFramePortMoveDownObservable(): BABYLON.Observable<FrameNodePort>;
+        get onFramePortPositionChangedObservable(): BABYLON.Observable<FramePortPosition>;
+        get isInput(): boolean;
+        get portLabel(): string;
+        get framePortId(): BABYLON.Nullable<number>;
+        set portLabel(newLabel: string);
+        get framePortPosition(): FramePortPosition;
+        set framePortPosition(position: FramePortPosition);
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
+        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+    }
+}
+declare module NODEEDITOR {
+    export enum FramePortPosition {
+        Top = 0,
+        Middle = 1,
+        Bottom = 2
+    }
     export class GraphFrame {
         private readonly CollapsedWidth;
         private static _FrameCounter;
@@ -1890,8 +1936,10 @@ declare module NODEEDITOR {
         private _mouseStartPointX;
         private _mouseStartPointY;
         private _onSelectionChangedObserver;
+        private _onGraphNodeRemovalObserver;
         private _isCollapsed;
-        private _ports;
+        private _frameInPorts;
+        private _frameOutPorts;
         private _controlledPorts;
         private _id;
         private _comments;
@@ -1909,7 +1957,7 @@ declare module NODEEDITOR {
         private _createInputPort;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
-        get ports(): NodePort[];
+        get ports(): FrameNodePort[];
         get name(): string;
         set name(value: string);
         get color(): BABYLON.Color3;
@@ -1935,10 +1983,10 @@ declare module NODEEDITOR {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        moveFramePortUp(nodePort: NodePort): void;
-        private _moveFramePortUp;
-        moveFramePortDown(nodePort: NodePort): void;
-        private _moveFramePortDown;
+        private moveFramePortUp;
+        private _movePortUp;
+        private moveFramePortDown;
+        private _movePortDown;
         private initResizing;
         private cleanUpResizing;
         private updateMinHeightWithComments;
@@ -1991,6 +2039,23 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class NodePort {
+        connectionPoint: BABYLON.NodeMaterialConnectionPoint;
+        node: GraphNode;
+        protected _element: HTMLDivElement;
+        protected _img: HTMLImageElement;
+        protected _globalState: GlobalState;
+        protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
+        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        delegatedPort: BABYLON.Nullable<FrameNodePort>;
+        get element(): HTMLDivElement;
+        refresh(): void;
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
+        dispose(): void;
+        static CreatePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState): NodePort;
+    }
+}
+declare module NODEEDITOR {
     export class NodeLink {
         private _graphCanvas;
         private _portA;
@@ -2004,8 +2069,8 @@ declare module NODEEDITOR {
         onDisposedObservable: BABYLON.Observable<NodeLink>;
         get isVisible(): boolean;
         set isVisible(value: boolean);
-        get portA(): NodePort;
-        get portB(): NodePort | undefined;
+        get portA(): FrameNodePort | NodePort;
+        get portB(): FrameNodePort | NodePort | undefined;
         get nodeA(): GraphNode;
         get nodeB(): GraphNode | undefined;
         update(endX?: number, endY?: number, straight?: boolean): void;
@@ -2902,7 +2967,7 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<NodePort | GraphNode | GraphFrame | NodeLink>>;
+        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
         onRebuildRequiredObservable: BABYLON.Observable<void>;
         onBuiltObservable: BABYLON.Observable<void>;
         onResetRequiredObservable: BABYLON.Observable<void>;
@@ -2920,10 +2985,9 @@ declare module NODEEDITOR {
         onAnimationCommandActivated: BABYLON.Observable<void>;
         onCandidateLinkMoved: BABYLON.Observable<BABYLON.Nullable<BABYLON.Vector2>>;
         onSelectionBoxMoved: BABYLON.Observable<DOMRect | ClientRect>;
-        onFrameCreated: BABYLON.Observable<GraphFrame>;
-        onCandidatePortSelected: BABYLON.Observable<BABYLON.Nullable<NodePort>>;
-        onFramePortMoveUpObserver: BABYLON.Observable<NodePort>;
-        onFramePortMoveDownObserver: BABYLON.Observable<NodePort>;
+        onFrameCreatedObservable: BABYLON.Observable<GraphFrame>;
+        onCandidatePortSelectedObservable: BABYLON.Observable<BABYLON.Nullable<FrameNodePort | NodePort>>;
+        onGraphNodeRemovalObservable: BABYLON.Observable<GraphNode>;
         onGetNodeFromBlock: (block: BABYLON.NodeMaterialBlock) => GraphNode;
         onGridSizeChanged: BABYLON.Observable<void>;
         previewMeshType: PreviewMeshType;
@@ -2982,12 +3046,16 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
-    export interface INodePortPropertyTabComponentProps {
+    export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
-        nodePort: NodePort;
+        frameNodePort: FrameNodePort;
     }
-    export class NodePortPropertyTabComponent extends React.Component<INodePortPropertyTabComponentProps> {
-        constructor(props: INodePortPropertyTabComponentProps);
+    export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
+        framePortPosition: FramePortPosition;
+    }> {
+        private _onFramePortPositionChangedObserver;
+        constructor(props: IFrameNodePortPropertyTabComponentProps);
+        componentWillUnmount(): void;
         render(): JSX.Element;
     }
 }
@@ -2998,7 +3066,7 @@ declare module NODEEDITOR {
     export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, {
         currentNode: BABYLON.Nullable<GraphNode>;
         currentFrame: BABYLON.Nullable<GraphFrame>;
-        currentNodePort: BABYLON.Nullable<NodePort>;
+        currentFrameNodePort: BABYLON.Nullable<FrameNodePort>;
     }> {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);

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

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":114615,"engineOnly":151244,"sceneOnly":508634,"minGridMaterial":640495,"minStandardMaterial":781566}
+{"thinEngineOnly":114619,"engineOnly":151248,"sceneOnly":508638,"minGridMaterial":640499,"minStandardMaterial":781674}

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

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

@@ -12148,6 +12148,9 @@ declare module "babylonjs/Particles/particleSystem" {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -12264,12 +12267,13 @@ declare module "babylonjs/Particles/particleSystem" {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -13574,14 +13578,17 @@ declare module "babylonjs/Particles/IParticleSystem" {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -56324,6 +56331,11 @@ declare module "babylonjs/Layers/highlightLayer" {
          */
         protected _shouldRenderMesh(mesh: Mesh): boolean;
         /**
+         * Adds specific effects defines.
+         * @param defines The defines to add specifics to.
+         */
+        protected _addCustomEffectDefines(defines: string[]): void;
+        /**
          * Sets the required values for both the emissive texture and and the main color.
          */
         protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void;
@@ -58255,7 +58267,6 @@ declare module "babylonjs/Physics/Plugins/ammoJSPlugin" {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -63715,12 +63726,12 @@ declare module "babylonjs/Materials/Node/index" {
 }
 declare module "babylonjs/Materials/effectRenderer" {
     import { Nullable } from "babylonjs/types";
-    import { Texture } from "babylonjs/Materials/Textures/texture";
+    import { InternalTexture } from "babylonjs/Materials/Textures/internalTexture";
+    import { RenderTargetTexture } from "babylonjs/Materials/Textures/renderTargetTexture";
     import { ThinEngine } from "babylonjs/Engines/thinEngine";
     import { Viewport } from "babylonjs/Maths/math.viewport";
     import { Observable } from "babylonjs/Misc/observable";
     import { Effect } from "babylonjs/Materials/effect";
-    import "babylonjs/Engines/Extensions/engine.renderTarget";
     import "babylonjs/Shaders/postprocess.vertex";
     /**
      * Effect Render Options
@@ -63736,17 +63747,15 @@ declare module "babylonjs/Materials/effectRenderer" {
         indices?: number[];
     }
     /**
-     * Helper class to render one or more effects
+     * Helper class to render one or more effects.
+     * You can access the previous rendering in your shader by declaring a sampler named textureSampler
      */
     export class EffectRenderer {
         private engine;
         private static _DefaultOptions;
         private _vertexBuffers;
         private _indexBuffer;
-        private _ringBufferIndex;
-        private _ringScreenBuffer;
         private _fullscreenViewport;
-        private _getNextFrameBuffer;
         /**
          * Creates an effect renderer
          * @param engine the engine to use for rendering
@@ -63774,12 +63783,13 @@ declare module "babylonjs/Materials/effectRenderer" {
          * Draws a full screen quad.
          */
         draw(): void;
+        private isRenderTargetTexture;
         /**
          * renders one or more effects to a specified texture
-         * @param effectWrappers list of effects to renderer
-         * @param outputTexture texture to draw to, if null it will render to the screen
+         * @param effectWrapper the effect to renderer
+         * @param outputTexture texture to draw to, if null it will render to the screen.
          */
-        render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture?: Nullable<Texture>): void;
+        render(effectWrapper: EffectWrapper, outputTexture?: Nullable<InternalTexture | RenderTargetTexture>): void;
         /**
          * Disposes of the effect renderer
          */
@@ -66480,7 +66490,7 @@ declare module "babylonjs/Particles/gpuParticleSystem" {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -66712,10 +66722,11 @@ declare module "babylonjs/Particles/gpuParticleSystem" {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -66774,9 +66785,10 @@ declare module "babylonjs/Particles/particleSystemSet" {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set
@@ -86176,6 +86188,9 @@ declare module BABYLON {
          * @returns the list of ramp gradients
          */
         getRampGradients(): Nullable<Array<Color3Gradient>>;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
+        private _syncRampGradientTexture;
         /**
          * Adds a new ramp gradient used to remap particle colors
          * @param gradient defines the gradient to use (between 0 and 1)
@@ -86292,12 +86307,13 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): ParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /** @hidden */
-        static _Serialize(serializationObject: any, particleSystem: IParticleSystem): void;
+        static _Serialize(serializationObject: any, particleSystem: IParticleSystem, serializeTexture: boolean): void;
         /** @hidden */
         static _Parse(parsedParticleSystem: any, particleSystem: IParticleSystem, scene: Scene, rootUrl: string): void;
         /**
@@ -87535,14 +87551,17 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): Nullable<IParticleSystem>;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture: boolean): any;
         /**
          * Rebuild the particle system
          */
         rebuild(): void;
+        /** Force the system to rebuild all gradients that need to be resync */
+        forceRefreshGradients(): void;
         /**
          * Starts the particle system and begins to emit
          * @param delay defines the delay in milliseconds before starting the system (0 by default)
@@ -128259,6 +128278,11 @@ declare module BABYLON {
          */
         protected _shouldRenderMesh(mesh: Mesh): boolean;
         /**
+         * Adds specific effects defines.
+         * @param defines The defines to add specifics to.
+         */
+        protected _addCustomEffectDefines(defines: string[]): void;
+        /**
          * Sets the required values for both the emissive texture and and the main color.
          */
         protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void;
@@ -130038,7 +130062,6 @@ declare module BABYLON {
          * @param impostor imposter to match
          */
         private _softbodyOrClothStep;
-        private _tmpVector;
         private _tmpMatrix;
         /**
          * Applies an impulse on the imposter
@@ -134973,17 +134996,15 @@ declare module BABYLON {
         indices?: number[];
     }
     /**
-     * Helper class to render one or more effects
+     * Helper class to render one or more effects.
+     * You can access the previous rendering in your shader by declaring a sampler named textureSampler
      */
     export class EffectRenderer {
         private engine;
         private static _DefaultOptions;
         private _vertexBuffers;
         private _indexBuffer;
-        private _ringBufferIndex;
-        private _ringScreenBuffer;
         private _fullscreenViewport;
-        private _getNextFrameBuffer;
         /**
          * Creates an effect renderer
          * @param engine the engine to use for rendering
@@ -135011,12 +135032,13 @@ declare module BABYLON {
          * Draws a full screen quad.
          */
         draw(): void;
+        private isRenderTargetTexture;
         /**
          * renders one or more effects to a specified texture
-         * @param effectWrappers list of effects to renderer
-         * @param outputTexture texture to draw to, if null it will render to the screen
+         * @param effectWrapper the effect to renderer
+         * @param outputTexture texture to draw to, if null it will render to the screen.
          */
-        render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture?: Nullable<Texture>): void;
+        render(effectWrapper: EffectWrapper, outputTexture?: Nullable<InternalTexture | RenderTargetTexture>): void;
         /**
          * Disposes of the effect renderer
          */
@@ -137533,7 +137555,7 @@ declare module BABYLON {
          */
         addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem;
         private _refreshColorGradient;
-        /** Force the system to rebuild all gradients */
+        /** Force the system to rebuild all gradients that need to be resync */
         forceRefreshGradients(): void;
         /**
          * Remove a specific color gradient
@@ -137765,10 +137787,11 @@ declare module BABYLON {
          */
         clone(name: string, newEmitter: any): GPUParticleSystem;
         /**
-         * Serializes the particle system to a JSON object.
+         * Serializes the particle system to a JSON object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns the JSON object
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parses a JSON object to create a GPU particle system.
          * @param parsedParticleSystem The JSON object to parse
@@ -137821,9 +137844,10 @@ declare module BABYLON {
         dispose(): void;
         /**
          * Serialize the set into a JSON compatible object
+         * @param serializeTexture defines if the texture must be serialized as well
          * @returns a JSON compatible representation of the set
          */
-        serialize(): any;
+        serialize(serializeTexture?: boolean): any;
         /**
          * Parse a new ParticleSystemSet from a serialized source
          * @param data defines a JSON compatible representation of the set

dist/preview release/what's new.md

@@ -89,6 +89,7 @@
 - Fix bug in `Plane.transform` when matrix passed in is not a pure rotation ([Popov72](https://github.com/Popov72)
 - Fix bug in PBR when anisotropy is enabled and no bump texture is provided ([Popov72](https://github.com/Popov72)
 - Fix horizon occlusion in PBR materials ([Popov72](https://github.com/Popov72)
+- Fix wrong relative position in applyImpulse/applyForce for ammojs plugin ([cedricguillemet](https://github.com/cedricguillemet))
 - Fixed delay calculation in Animatable.goToFrame when speedRatio != 1 ([Reimund Järnfors](https://github.com/reimund)
 - Fix bug in PBR when translucency is enabled and an irradiance texture is provided ([Popov72](https://github.com/Popov72)
 - Fix bug in PBR with translucency when irradiance texture is 2D ([Popov72](https://github.com/Popov72)
@@ -99,5 +100,8 @@
 
 - Fix submesh recreation when it should not ([Popov72](https://github.com/Popov72)
 - Fix `CustomMaterial` and `PBRCustomMaterial` not setting uniforms / samplers / attributes ([Popov72](https://github.com/Popov72)
+- Fix bug in NME where deleting a node from a frame would not remove its ports on the outside of a frame
 
 ## Breaking changes
+
+- `EffectRenderer.render` now takes a `RenderTargetTexture` or an `InternalTexture` as the output texture and only a single `EffectWrapper` for its first argument ([Popov72](https://github.com/Popov72))

dist/proceduralTexturesLibrary/babylon.brickProceduralTexture.d.ts

@@ -1,28 +0,0 @@
-
-declare module BABYLON {
-    class BrickProceduralTexture extends ProceduralTexture {
-        private _numberOfBricksHeight;
-        private _numberOfBricksWidth;
-        private _jointColor;
-        private _brickColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        numberOfBricksHeight: number;
-        numberOfBricksWidth: number;
-        jointColor: Color3;
-        brickColor: Color3;
-        /**
-         * Serializes this brick procedural texture
-         * @returns a serialized brick procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Brick Procedural Texture from parsed brick procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing brick procedural texture information
-         * @returns a parsed Brick Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.cloudProceduralTexture.d.ts

@@ -1,24 +0,0 @@
-
-declare module BABYLON {
-    class CloudProceduralTexture extends ProceduralTexture {
-        private _skyColor;
-        private _cloudColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        skyColor: Color4;
-        cloudColor: Color4;
-        /**
-         * Serializes this cloud procedural texture
-         * @returns a serialized cloud procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing cloud procedural texture information
-         * @returns a parsed Cloud Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.fireProceduralTexture.d.ts

@@ -1,35 +0,0 @@
-
-declare module BABYLON {
-    class FireProceduralTexture extends ProceduralTexture {
-        private _time;
-        private _speed;
-        private _autoGenerateTime;
-        private _fireColors;
-        private _alphaThreshold;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        render(useCameraPostProcess?: boolean): void;
-        static readonly PurpleFireColors: Color3[];
-        static readonly GreenFireColors: Color3[];
-        static readonly RedFireColors: Color3[];
-        static readonly BlueFireColors: Color3[];
-        autoGenerateTime: boolean;
-        fireColors: Color3[];
-        time: number;
-        speed: Vector2;
-        alphaThreshold: number;
-        /**
-         * Serializes this fire procedural texture
-         * @returns a serialized fire procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Fire Procedural Texture from parsed fire procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing fire procedural texture information
-         * @returns a parsed Fire Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.grassProceduralTexture.d.ts

@@ -1,24 +0,0 @@
-
-declare module BABYLON {
-    class GrassProceduralTexture extends ProceduralTexture {
-        private _grassColors;
-        private _groundColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        grassColors: Color3[];
-        groundColor: Color3;
-        /**
-         * Serializes this grass procedural texture
-         * @returns a serialized grass procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Grass Procedural Texture from parsed grass procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing grass procedural texture information
-         * @returns a parsed Grass Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.marbleProceduralTexture.d.ts

@@ -1,28 +0,0 @@
-
-declare module BABYLON {
-    class MarbleProceduralTexture extends ProceduralTexture {
-        private _numberOfTilesHeight;
-        private _numberOfTilesWidth;
-        private _amplitude;
-        private _jointColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        numberOfTilesHeight: number;
-        amplitude: number;
-        numberOfTilesWidth: number;
-        jointColor: Color3;
-        /**
-         * Serializes this marble procedural texture
-         * @returns a serialized marble procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Marble Procedural Texture from parsed marble procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing marble procedural texture information
-         * @returns a parsed Marble Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.d.ts

@@ -1,24 +0,0 @@
-
-declare module BABYLON {
-    class NormalMapProceduralTexture extends ProceduralTexture {
-        private _baseTexture;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        render(useCameraPostProcess?: boolean): void;
-        resize(size: any, generateMipMaps: any): void;
-        baseTexture: Texture;
-        /**
-         * Serializes this normal map procedural texture
-         * @returns a serialized normal map procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing normal map procedural texture information
-         * @returns a parsed Normal Map Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.d.ts

@@ -1,26 +0,0 @@
-
-declare module BABYLON {
-    class PerlinNoiseProceduralTexture extends ProceduralTexture {
-        time: number;
-        timeScale: number;
-        translationSpeed: number;
-        private _currentTranslation;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        render(useCameraPostProcess?: boolean): void;
-        resize(size: any, generateMipMaps: any): void;
-        /**
-         * Serializes this perlin noise procedural texture
-         * @returns a serialized perlin noise procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing perlin noise procedural texture information
-         * @returns a parsed Perlin Noise Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.roadProceduralTexture.d.ts

@@ -1,22 +0,0 @@
-
-declare module BABYLON {
-    class RoadProceduralTexture extends ProceduralTexture {
-        private _roadColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        roadColor: Color3;
-        /**
-         * Serializes this road procedural texture
-         * @returns a serialized road procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Road Procedural Texture from parsed road procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing road procedural texture information
-         * @returns a parsed Road Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.d.ts

@@ -1,42 +0,0 @@
-
-declare module BABYLON {
-    class StarfieldProceduralTexture extends ProceduralTexture {
-        private _time;
-        private _alpha;
-        private _beta;
-        private _zoom;
-        private _formuparam;
-        private _stepsize;
-        private _tile;
-        private _brightness;
-        private _darkmatter;
-        private _distfading;
-        private _saturation;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        time: number;
-        alpha: number;
-        beta: number;
-        formuparam: number;
-        stepsize: number;
-        zoom: number;
-        tile: number;
-        brightness: number;
-        darkmatter: number;
-        distfading: number;
-        saturation: number;
-        /**
-         * Serializes this starfield procedural texture
-         * @returns a serialized starfield procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing startfield procedural texture information
-         * @returns a parsed Starfield Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
-    }
-}

dist/proceduralTexturesLibrary/babylon.waterProceduralTexture.d.ts

@@ -1,8 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
-declare module BABYLON {
-    class WaterProceduralTexture extends ProceduralTexture {
-        private _time;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        render(useCameraPostProcess?: boolean): void;
-    }
-}

dist/proceduralTexturesLibrary/babylon.woodProceduralTexture.d.ts

@@ -1,24 +0,0 @@
-
-declare module BABYLON {
-    class WoodProceduralTexture extends ProceduralTexture {
-        private _ampScale;
-        private _woodColor;
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
-        updateShaderUniforms(): void;
-        ampScale: number;
-        woodColor: Color3;
-        /**
-         * Serializes this wood procedural texture
-         * @returns a serialized wood procedural texture object
-         */
-        serialize(): any;
-        /**
-         * Creates a Wood Procedural Texture from parsed wood procedural texture data
-         * @param parsedTexture defines parsed texture data
-         * @param scene defines the current scene
-         * @param rootUrl defines the root URL containing wood procedural texture information
-         * @returns a parsed Wood Procedural Texture
-         */
-        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
-    }
-}

dist/serializers/babylon.objSerializer.d.ts

@@ -1,7 +0,0 @@
-
-declare module BABYLON {
-    class OBJExport {
-        static OBJ(mesh: Mesh[], materials?: boolean, matlibname?: string, globalposition?: boolean): string;
-        static MTL(mesh: Mesh): string;
-    }
-}

inspector/src/components/actionTabs/actionTabs.scss

@@ -231,10 +231,10 @@ $line-padding-left: 2px;
                         right: 0px;
                         bottom: 0px;
                         left: 0px;
+                        z-index: 100;
                     }
 
                     .color-picker-float {
-                        z-index: 2;
                         position: absolute;  
                     }                
                 }

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

@@ -57,7 +57,19 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
     }
 
     shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {
-        return nextProps.value.toHexString() !== this.props.value.toHexString() 
+        let diffProps = nextProps.value.toHexString() !== this.props.value.toHexString();
+
+        if (diffProps) {
+            nextState.color =  {
+                r: nextProps.value.r * 255,
+                g: nextProps.value.g * 255,
+                b: nextProps.value.b * 255,
+                a: nextProps instanceof Color4 ? nextProps.a * 100 : 100,
+            };
+            nextState.hex = nextProps.value.toHexString();
+        }
+
+        return diffProps
             || nextProps.disableAlpha !== this.props.disableAlpha 
             || nextState.hex !== this.state.hex
             || nextState.pickerEnabled !== this.state.pickerEnabled;
@@ -84,7 +96,12 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
                 {
                     this.state.pickerEnabled &&
                     <>
-                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}>
+                        <div className="color-picker-cover" onClick={(evt) => {
+                                if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(".color-picker-cover")) {
+                                    return;
+                                }
+                                this.setState({pickerEnabled: false});
+                            }}>
                             <div className="color-picker-float" ref={this._floatRef}>
                                 <SketchPicker color={color} 
                                     disableAlpha={this.props.disableAlpha}

inspector/src/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent.tsx

@@ -68,20 +68,25 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
         const texture = this.props.texture;
         Tools.ReadFile(file, (data) => {
             var blob = new Blob([data], { type: "octet/stream" });
-            var url = URL.createObjectURL(blob);
-
-            if (texture.isCube) {
-                let extension: string | undefined = undefined;
-                if (file.name.toLowerCase().indexOf(".dds") > 0) {
-                    extension = ".dds";
-                } else if (file.name.toLowerCase().indexOf(".env") > 0) {
-                    extension = ".env";
-                }
 
-                (texture as CubeTexture).updateURL(url, extension, () => this.foreceRefresh());
-            } else {
-                (texture as Texture).updateURL(url, null, () => this.foreceRefresh());
-            }
+            var reader = new FileReader();
+            reader.readAsDataURL(blob); 
+            reader.onloadend = () => {
+                let base64data = reader.result as string;     
+
+                if (texture.isCube) {
+                    let extension: string | undefined = undefined;
+                    if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                        extension = ".dds";
+                    } else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                        extension = ".env";
+                    }
+
+                    (texture as CubeTexture).updateURL(base64data, extension, () => this.foreceRefresh());
+                } else {
+                    (texture as Texture).updateURL(base64data, null, () => this.foreceRefresh());
+                }
+            };
 
         }, undefined, true);
     }    
@@ -115,20 +120,17 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
 
         let extension = "";
         let url = (texture as Texture).url;
+        let textureUrl = (!url || url.substring(0, 4) === "data" || url.substring(0, 4) === "blob") ? "" : url;
 
-        if (url) {
-            for (var index = url.length - 1; index >= 0; index--) {
-                if (url[index] === ".") {
+        if (textureUrl) {
+            for (var index = textureUrl.length - 1; index >= 0; index--) {
+                if (textureUrl[index] === ".") {
                     break;
                 }
-                extension = url[index] + extension;
+                extension = textureUrl[index] + extension;
             }
-        } else {
-            url = "";
         }
 
-        let textureUrl = (url.substring(0, 4) === "data" || url.substring(0, 4) === "blob") ? "" : url;
-
         return (
             <div className="pane">
                 <LineContainerComponent globalState={this.props.globalState} title="PREVIEW">

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

@@ -19,32 +19,66 @@ interface IFactorGradientStepGridComponent {
     codeRecorderPropertyName: string,
 }
 
-export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {gradient: number}> {
+export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {gradient: number, factor1: string, factor2?: string}> {
 
     constructor(props: IFactorGradientStepGridComponent) {
         super(props);
 
-        this.state={gradient: props.gradient.gradient};
+        this.state={gradient: props.gradient.gradient, factor1: this.props.gradient.factor1.toString(), factor2: this.props.gradient.factor2?.toString()};
     }
 
-    updateFactor1(factor: number) {
-        this.props.gradient.factor1 = factor;
+    shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {gradient: number, factor1: string, factor2?: string}) {
+        if (nextProps.gradient !== this.props.gradient) {
+            nextState.gradient = nextProps.gradient.gradient;
+            nextState.factor1 = nextProps.gradient.factor1.toString();
+            nextState.factor2 = nextProps.gradient.factor2?.toString();
+        }
+
+        return true;
+    }
+
+    updateFactor1(valueString: string) {
+        if (/[^0-9\.\-]/g.test(valueString)) {
+            return;
+        }
+
+        let valueAsNumber = parseFloat(valueString);
+
+        this.setState({factor1: valueString});
+
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+
+        this.props.gradient.factor1 = valueAsNumber;
 
         this.props.globalState.onCodeChangedObservable.notifyObservers({
             object: this.props.host,
-            code: `TARGET.${this.props.codeRecorderPropertyName}.factor1 = ${factor};`
+            code: `TARGET.${this.props.codeRecorderPropertyName}.factor1 = ${valueAsNumber};`
         });                 
 
         this.props.onUpdateGradient();
         this.forceUpdate();
     }    
 
-    updateFactor2(factor: number) {
-        this.props.gradient.factor2 = factor;
+    updateFactor2(valueString: string) {
+        if (/[^0-9\.\-]/g.test(valueString)) {
+            return;
+        }
+
+        let valueAsNumber = parseFloat(valueString);
+
+        this.setState({factor2: valueString});
+
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+
+        this.props.gradient.factor2 = valueAsNumber;
 
         this.props.globalState.onCodeChangedObservable.notifyObservers({
             object: this.props.host,
-            code: `TARGET.${this.props.codeRecorderPropertyName}.factor2 = ${factor};`
+            code: `TARGET.${this.props.codeRecorderPropertyName}.factor2 = ${valueAsNumber};`
         });         
 
         this.props.onUpdateGradient();
@@ -89,14 +123,14 @@ export class FactorGradientStepGridComponent extends React.Component<IFactorGrad
                     {`#${this.props.lineIndex}`}
                 </div>
                 <div className="factor1">
-                    <input type="number" step={"0.01"} className="numeric-input" value={gradient.factor1} onBlur={() => this.unlock()} onFocus={() => this.lock()}
-                        onChange={evt => this.updateFactor1(parseFloat(evt.target.value))} />
+                    <input type="number" step={"0.01"} className="numeric-input" value={this.state.factor1} onBlur={() => this.unlock()} onFocus={() => this.lock()}
+                        onChange={evt => this.updateFactor1(evt.target.value)} />
                 </div>
                 {
                     this.props.host instanceof ParticleSystem &&
                     <div className="factor2">
-                        <input type="number" step={"0.01"} className={"numeric-input" + ((gradient.factor1 === gradient.factor2 || gradient.factor2 === undefined) ? " grayed" : "")} value={gradient.factor2} onBlur={() => this.unlock()} onFocus={() => this.lock()} 
-                            onChange={evt => this.updateFactor2(parseFloat(evt.target.value))} />
+                        <input type="number" step={"0.01"} className={"numeric-input" + ((this.state.factor1 === this.state.factor2 || gradient.factor2 === undefined) ? " grayed" : "")} value={this.state.factor2} onBlur={() => this.unlock()} onFocus={() => this.lock()} 
+                            onChange={evt => this.updateFactor2(evt.target.value)} />
                     </div>
                 }
                 <div className="step-value">

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

@@ -157,7 +157,7 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
 
     saveToFile() {        
         const system = this.props.system;
-        let content = JSON.stringify(system.serialize());
+        let content = JSON.stringify(system.serialize(true));
 
         Tools.Download(new Blob([content]), "particleSystem.json");
     }
@@ -202,7 +202,7 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
 
     saveToSnippet() {
         const system = this.props.system;
-        let content = JSON.stringify(system.serialize());
+        let content = JSON.stringify(system.serialize(true));
 
         var xmlHttp = new XMLHttpRequest();
         xmlHttp.onreadystatechange = () => {
@@ -306,7 +306,7 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     <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} />
+                    <SliderLineComponent label="Update speed" target={system} propertyName="updateSpeed" minimum={0} maximum={0.1} decimalCount={3} step={0.001} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>                      
                 <LineContainerComponent globalState={this.props.globalState} title="COMMANDS">
                     {this.renderControls()}
@@ -605,55 +605,60 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     {
                         system instanceof ParticleSystem && 
                         <>
-                            <CheckBoxLineComponent label="Use ramp grandients" target={system} propertyName="useRampGradients"/>
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getRampGradients()!} 
-                                label="Ramp gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addRampGradient(0, Color3.White());
-                                    system.addRampGradient(1, Color3.Black());
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addRampGradient(0, BABYLON.Color3.White());`
-                                    });          
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addRampGradient(1, BABYLON.Color3.Black());`
-                                    });                          
-                                }}
-                                mode={GradientGridMode.Color3}      
-                                host={system}    
-                                codeRecorderPropertyName="getRampGradients()"                                                   
-                                lockObject={this.props.lockObject}/>                    
-                                                                    
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorRemapGradients()!} 
-                                label="Color remap gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addColorRemapGradient(0, 1, 1);
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addColorRemapGradient(0, 1, 1);`
-                                    });
-                                }}
-                                host={system}    
-                                codeRecorderPropertyName="getColorRemapGradients()"      
-                                mode={GradientGridMode.Factor}                        
-                                lockObject={this.props.lockObject}/>                    
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getAlphaRemapGradients()!} 
-                                label="Alpha remap gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addAlphaRemapGradient(0, 1, 1);
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addAlphaRemapGradient(0, 1, 1);`
-                                    });                            
-                                }}
-                                host={system}    
-                                codeRecorderPropertyName="getAlphaRemapGradients()"                             
-                                mode={GradientGridMode.Factor}                        
-                                lockObject={this.props.lockObject}/>
+                            <CheckBoxLineComponent label="Enable ramp grandients" target={system} propertyName="useRampGradients"/>
+                            {
+                                system.useRampGradients &&
+                                <>
+                                    <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getRampGradients()!} 
+                                    label="Ramp gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addRampGradient(0, Color3.White());
+                                        system.addRampGradient(1, Color3.Black());
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addRampGradient(0, BABYLON.Color3.White());`
+                                        });          
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addRampGradient(1, BABYLON.Color3.Black());`
+                                        });                          
+                                    }}
+                                    mode={GradientGridMode.Color3}      
+                                    host={system}    
+                                    codeRecorderPropertyName="getRampGradients()"                                                   
+                                    lockObject={this.props.lockObject}/>                    
+                                                                        
+                                <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorRemapGradients()!} 
+                                    label="Color remap gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addColorRemapGradient(0, 1, 1);
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addColorRemapGradient(0, 1, 1);`
+                                        });
+                                    }}
+                                    host={system}    
+                                    codeRecorderPropertyName="getColorRemapGradients()"      
+                                    mode={GradientGridMode.Factor}                        
+                                    lockObject={this.props.lockObject}/>                    
+                                <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getAlphaRemapGradients()!} 
+                                    label="Alpha remap gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addAlphaRemapGradient(0, 1, 1);
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addAlphaRemapGradient(0, 1, 1);`
+                                        });                            
+                                    }}
+                                    host={system}    
+                                    codeRecorderPropertyName="getAlphaRemapGradients()"                             
+                                    mode={GradientGridMode.Factor}                        
+                                    lockObject={this.props.lockObject}/>
+                                </>
+                            }                           
                         </>
                     }                                   
                 </LineContainerComponent>                     

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

@@ -9,7 +9,6 @@ import { ColorGradientStepGridComponent } from './colorGradientStepGridComponent
 import { Color4, Color3 } from 'babylonjs/Maths/math.color';
 import { LinkButtonComponent } from '../../../lines/linkButtonComponent';
 import { IParticleSystem } from 'babylonjs/Particles/IParticleSystem';
-import { GPUParticleSystem } from 'babylonjs/Particles/gpuParticleSystem';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 export enum GradientGridMode {
@@ -43,11 +42,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
 
         if (index > -1) {
             gradients.splice(index, 1);
-            this.forceUpdate();
-
-            if (this.props.host instanceof GPUParticleSystem) {
-                this.props.host.forceRefreshGradients();
-            }
+            this.updateAndSync();
 
             this.props.globalState.onCodeChangedObservable.notifyObservers({
                 object: this.props.host,
@@ -86,9 +81,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                 break;              
         }
 
-        if (this.props.host instanceof GPUParticleSystem) {
-            this.props.host.forceRefreshGradients();
-        }
+        this.props.host.forceRefreshGradients();
 
         this.forceUpdate();
     }
@@ -126,9 +119,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
     }
 
     updateAndSync() {
-        if (this.props.host instanceof GPUParticleSystem) {
-            this.props.host.forceRefreshGradients();
-        }
+        this.props.host.forceRefreshGradients();
         
         this.forceUpdate();         
     }
@@ -145,11 +136,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                             icon={faTrash}
                             onIconClick={() => {
                                 gradients!.length = 0;
-                                this.forceUpdate();
-
-                                if (this.props.host instanceof GPUParticleSystem) {
-                                    this.props.host.forceRefreshGradients();
-                                }
+                                this.updateAndSync();
                     
                                 this.props.globalState.onCodeChangedObservable.notifyObservers({
                                     object: this.props.host,

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -16,7 +16,7 @@ import { GraphFrame } from '../../diagram/graphFrame';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
 import { FramePropertyTabComponent } from '../../diagram/properties/framePropertyComponent';
-import { NodePortPropertyTabComponent } from '../../diagram/properties/nodePortPropertyComponent';
+import { FrameNodePortPropertyTabComponent } from '../../diagram/properties/frameNodePortPropertyComponent';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
@@ -26,7 +26,7 @@ import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponen
 import { Vector3LineComponent } from '../../sharedComponents/vector3LineComponent';
 import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponent';
 import { Observer } from 'babylonjs/Misc/observable';
-import { NodePort } from '../../diagram/nodePort';
+import { FrameNodePort } from '../../diagram/frameNodePort';
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 require("./propertyTab.scss");
 
@@ -34,25 +34,25 @@ interface IPropertyTabComponentProps {
     globalState: GlobalState;
 }
 
-export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, { currentNode: Nullable<GraphNode>, currentFrame: Nullable<GraphFrame>, currentNodePort: Nullable<NodePort> }> {
+export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, { currentNode: Nullable<GraphNode>, currentFrame: Nullable<GraphFrame>, currentFrameNodePort: Nullable<FrameNodePort> }> {
     private _onBuiltObserver: Nullable<Observer<void>>;
 
     constructor(props: IPropertyTabComponentProps) {
         super(props)
 
-        this.state = { currentNode: null, currentFrame: null, currentNodePort: null };
+        this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null };
     }
 
     componentDidMount() {
         this.props.globalState.onSelectionChangedObservable.add(selection => {
             if (selection instanceof GraphNode) {
-                this.setState({ currentNode: selection, currentFrame: null, currentNodePort: null });
+                this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null });
             } else if (selection instanceof GraphFrame) {
-                this.setState({ currentNode: null, currentFrame: selection, currentNodePort: null });
-            } else if(selection instanceof NodePort) {
-                this.setState({ currentNode: null, currentFrame: null, currentNodePort: selection });
+                this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null });
+            } else if(selection instanceof FrameNodePort) {
+                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: selection });
             } else {
-                this.setState({ currentNode: null, currentFrame: null, currentNodePort: null });
+                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null });
             }
         });
 
@@ -250,9 +250,9 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             );
         }
 
-        if (this.state.currentNodePort) {
+        if (this.state.currentFrameNodePort) {
             return (
-                <NodePortPropertyTabComponent globalState={this.props.globalState} nodePort={this.state.currentNodePort}/>
+                <FrameNodePortPropertyTabComponent globalState={this.props.globalState} frameNodePort={this.state.currentFrameNodePort}/>
             );
         }
 

nodeEditor/src/diagram/frameNodePort.ts

@@ -0,0 +1,96 @@
+import { NodePort } from "./nodePort";
+import { GraphNode } from './graphNode';
+import { FramePortPosition } from './graphFrame';
+import { GlobalState } from '../globalState';
+import { IDisplayManager } from './display/displayManager';
+import { Observable } from 'babylonjs/Misc/observable';
+import { Nullable } from 'babylonjs/types';
+import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+
+export class FrameNodePort extends NodePort {
+    private _onFramePortMoveUpObservable = new Observable<FrameNodePort>();
+    private _onFramePortMoveDownObservable = new Observable<FrameNodePort>();
+    private _onFramePortPositionChangedObservable = new Observable<FramePortPosition>();
+    private _portLabel: Element;
+    private _isInput: boolean;
+    private _framePortPosition: FramePortPosition
+    private _framePortId: Nullable<number>;
+
+    public get onFramePortMoveUpObservable() {
+        return this._onFramePortMoveUpObservable;
+    }
+
+    public get onFramePortMoveDownObservable() {
+        return this._onFramePortMoveDownObservable;
+    }
+
+    public get onFramePortPositionChangedObservable() {
+        return this._onFramePortPositionChangedObservable;
+    }
+
+    public get isInput() {
+        return this._isInput;
+    }
+
+    public get portLabel() {
+        return this._portLabel.innerHTML;
+    }
+
+    public get framePortId() {
+        return this._framePortId;
+    }
+
+    public set portLabel(newLabel: string) {
+        this._portLabel.innerHTML = newLabel;
+    }
+
+    public get framePortPosition() {
+        return this._framePortPosition;
+    }
+
+    public set framePortPosition(position: FramePortPosition) {
+        this._framePortPosition = position;
+        this.onFramePortPositionChangedObservable.notifyObservers(position);
+    }
+
+    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number) {
+        super(portContainer, connectionPoint,node, globalState);
+
+        this._portLabel = portContainer.children[0];
+        this._isInput = isInput;
+        this._framePortId = framePortId;
+
+        this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add((selection) => {
+            if (selection === this) {
+                this._img.classList.add("selected");
+            } else {
+                this._img.classList.remove("selected");
+            }
+        });
+
+        this.refresh();
+    }
+
+    public static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, 
+        displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number) {
+        let portContainer = root.ownerDocument!.createElement("div");
+        let block = connectionPoint.ownerBlock;
+
+        portContainer.classList.add("portLine");
+        if(framePortId !== null) {
+            portContainer.dataset.framePortId = `${framePortId}`;
+        }
+        root.appendChild(portContainer);
+
+        if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
+            let portLabel = root.ownerDocument!.createElement("div");
+            portLabel.classList.add("port-label");
+            portLabel.innerHTML = connectionPoint.name;        
+            portContainer.appendChild(portLabel);
+        }
+
+        return new FrameNodePort(portContainer, connectionPoint, node, globalState, isInput, framePortId);
+    }
+
+} 
+

nodeEditor/src/diagram/graphCanvas.scss

@@ -30,7 +30,13 @@
         
         .img {
             width: 100%;
-        }     
+        }
+
+        img.selected {
+            margin: 3px 1px 0 4px;
+            box-shadow: 0 0 0 4px;
+            border-radius: 50%;
+        }
         
         &:hover, &.selected {
             filter: brightness(2);

nodeEditor/src/diagram/graphCanvas.tsx

@@ -14,6 +14,7 @@ import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { GraphFrame } from './graphFrame';
 import { IEditorData } from '../nodeLocationInfo';
+import { FrameNodePort } from './frameNodePort';
 
 require("./graphCanvas.scss");
 
@@ -47,7 +48,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _selectedLink: Nullable<NodeLink> = null;
     private _selectedPort: Nullable<NodePort> = null;
     private _candidateLink: Nullable<NodeLink> = null;
-    private _candidatePort: Nullable<NodePort> = null;
+    private _candidatePort: Nullable<NodePort | FrameNodePort> = null;
     private _gridSize = 20;
     private _selectionBox: Nullable<HTMLDivElement> = null;   
     private _selectedFrame: Nullable<GraphFrame> = null;   
@@ -195,20 +196,10 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             }
         });
 
-        props.globalState.onCandidatePortSelected.add(port => {
+        props.globalState.onCandidatePortSelectedObservable.add(port => {
             this._candidatePort = port;
         });
 
-        props.globalState.onFramePortMoveUpObserver.add((nodePort: NodePort) => {
-            const frame = this._frames.find(frame => frame.id === nodePort.frameId);
-            frame?.moveFramePortUp(nodePort);
-        });
-
-        props.globalState.onFramePortMoveDownObserver.add((nodePort: NodePort) => {
-            const frame = this._frames.find(frame => frame.id === nodePort.frameId);
-            frame?.moveFramePortDown(nodePort);
-        })
-
         props.globalState.onGridSizeChanged.add(() => {
             this.gridSize = DataStorage.ReadNumber("GridSize", 20);
         });
@@ -608,7 +599,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 this.processCandidatePort();          
                 this.props.globalState.onCandidateLinkMoved.notifyObservers(null);
             } else { // is a click event on NodePort
-                if(this._candidateLink.portA.frameId !== null) { //only on Frame Ports
+                if(this._candidateLink.portA instanceof FrameNodePort) { //only on Frame Ports
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA);
                 }
             }

nodeEditor/src/diagram/graphFrame.ts

@@ -8,6 +8,7 @@ import { Color3 } from 'babylonjs/Maths/math.color';
 import { NodePort } from './nodePort';
 import { SerializationTools } from '../serializationTools';
 import { StringTools } from '../stringTools';
+import { FrameNodePort } from './frameNodePort';
 
 enum ResizingDirection {
         Right,
@@ -20,6 +21,10 @@ enum ResizingDirection {
         BottomLeft
 }
 
+export enum FramePortPosition {
+    Top, Middle, Bottom
+};
+
 export class GraphFrame {
     private readonly CollapsedWidth = 200;
     private static _FrameCounter = 0;
@@ -47,8 +52,10 @@ export class GraphFrame {
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null;
     private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>>;
+    private _onGraphNodeRemovalObserver: Nullable<Observer<GraphNode>>; 
     private _isCollapsed = false;
-    private _ports: NodePort[] = []; // Ports on Outside of Frame
+    private _frameInPorts: FrameNodePort[] = [];
+    private _frameOutPorts: FrameNodePort[] = [];
     private _controlledPorts: NodePort[] = []; // Ports on Nodes that are shown on outside of frame
     private _id: number;
     private _comments: string;
@@ -73,11 +80,18 @@ export class GraphFrame {
     }
 
     private _createInputPort(port: NodePort, node: GraphNode) {
-        let localPort = NodePort.CreatePortElement(port.connectionPoint, node, this._inputPortContainer, null, this._ownerCanvas.globalState, true, this.id, GraphFrame._FramePortCounter++)
-        this._ports.push(localPort);
+        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._inputPortContainer, null, this._ownerCanvas.globalState, true, GraphFrame._FramePortCounter++)
+        this._frameInPorts.push(localPort);
 
         port.delegatedPort = localPort;
         this._controlledPorts.push(port);
+        localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
+                this.moveFramePortUp(nodePort);
+        });
+
+        localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
+                this.moveFramePortDown(nodePort);
+        })
     }
 
     public set isCollapsed(value: boolean) {
@@ -102,14 +116,22 @@ export class GraphFrame {
 
                         for (var link of node.links) {
                             if (link.portA === port && this.nodes.indexOf(link.nodeB!) === -1) {
-                                let localPort: NodePort;
+                                let localPort: FrameNodePort;
 
                                 if (!portAdded) {
                                     portAdded = true;
-                                    localPort = NodePort.CreatePortElement(port.connectionPoint, link.nodeB!, this._outputPortContainer, null, this._ownerCanvas.globalState, false, this.id, GraphFrame._FramePortCounter++);
-                                    this._ports.push(localPort);
+                                    localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, link.nodeB!, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++);
+                                    this._frameOutPorts.push(localPort);
+
+                                    localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
+                                            this.moveFramePortUp(nodePort);
+                                    });
+                            
+                                    localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
+                                            this.moveFramePortDown(nodePort);
+                                    })
                                 } else {
-                                    localPort = this._ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
+                                    localPort = this.ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
                                 }
 
                                 port.delegatedPort = localPort;
@@ -118,10 +140,18 @@ export class GraphFrame {
                             }
                         }
                     } else {
-                        let localPort = NodePort.CreatePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, this.id, GraphFrame._FramePortCounter++)
-                        this._ports.push(localPort);
+                        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++)
+                        this._frameOutPorts.push(localPort);
                         port.delegatedPort = localPort;
                         this._controlledPorts.push(port);
+
+                        localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
+                                this.moveFramePortUp(nodePort);
+                        });
+                
+                        localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
+                                this.moveFramePortDown(nodePort);
+                        });
                     }
                 }
 
@@ -138,12 +168,39 @@ export class GraphFrame {
                     }
                 }
             }
+
+            for(let i = 0; i < this._frameInPorts.length; i++) {
+                const port = this._frameInPorts[i];
+                if(i === 0){
+                    port.framePortPosition = FramePortPosition.Top;
+                } else if(i === this._frameInPorts.length -1){
+                    port.framePortPosition = FramePortPosition.Bottom;
+                } else {
+                    port.framePortPosition = FramePortPosition.Middle;
+                }
+            }
+
+            for(let i = 0; i < this._frameOutPorts.length; i++) {
+                const port = this._frameInPorts[i];
+                if(i === 0){
+                    port.framePortPosition = FramePortPosition.Top
+                } else if(i === this._frameInPorts.length -1){
+                    port.framePortPosition = FramePortPosition.Bottom
+                } else {
+                    port.framePortPosition = FramePortPosition.Middle
+                }
+            }
+
         } else {
             this.element.classList.remove("collapsed");
             this._outputPortContainer.innerHTML = "";
             this._inputPortContainer.innerHTML = "";
 
-            this._ports.forEach(p => {
+            this._frameInPorts.forEach(p => {
+                p.dispose();
+            });
+
+            this._frameOutPorts.forEach(p => {
                 p.dispose();
             });
 
@@ -152,7 +209,8 @@ export class GraphFrame {
                 port.refresh();
             })
 
-            this._ports = [];
+            this._frameInPorts = [];
+            this._frameOutPorts = [];
             this._controlledPorts = [];
 
             for (var node of this._nodes) {
@@ -182,7 +240,7 @@ export class GraphFrame {
     }
 
     public get ports(){
-        return this._ports;
+        return this._frameInPorts.concat(this._frameOutPorts);
     }
 
     public get name() {
@@ -425,7 +483,17 @@ export class GraphFrame {
             } else {
                 this.element.classList.remove("selected");
             }
-        }); 
+        });
+
+        this._onGraphNodeRemovalObserver = canvas.globalState.onGraphNodeRemovalObservable.add((node: GraphNode) => {
+            // remove node from this._nodes
+            const index = this._nodes.indexOf(node);
+            if (index === -1) {
+                return;
+            } else {
+                this._nodes.splice(index, 1);
+            }
+        });
 
         this._commentsElement = document.createElement('div');
         this._commentsElement.className = 'frame-comments';
@@ -442,7 +510,7 @@ export class GraphFrame {
 
     public refresh() {
         this._nodes = [];
-        this._ownerCanvas.globalState.onFrameCreated.notifyObservers(this);
+        this._ownerCanvas.globalState.onFrameCreatedObservable.notifyObservers(this);
     }
 
     public addNode(node: GraphNode) {
@@ -549,57 +617,82 @@ export class GraphFrame {
         evt.stopPropagation();
     }
 
-    public moveFramePortUp(nodePort: NodePort){
+    private moveFramePortUp(nodePort: FrameNodePort){
         if(nodePort.isInput) {
             if(this._inputPortContainer.children.length < 2) {
                 return;
             }
             const elementsArray = Array.from(this._inputPortContainer.childNodes);
-            this._moveFramePortUp(elementsArray, nodePort);
+            this._movePortUp(elementsArray, nodePort);
         } else {
             if(this._outputPortContainer.children.length < 2) {
                 return;
             }
             const elementsArray = Array.from(this._outputPortContainer.childNodes);
-            this._moveFramePortUp(elementsArray, nodePort);
+            this._movePortUp(elementsArray, nodePort);
         }
 
     }
 
-    private _moveFramePortUp(elementsArray: ChildNode[], nodePort: NodePort) {
-        const indexInContainer = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
-        if(indexInContainer === 0){
+    private _movePortUp(elementsArray: ChildNode[], nodePort: FrameNodePort) {
+        // update UI
+        const indexInElementArray = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
+        if(indexInElementArray === 0){
             return;
         }
-        const secondPort = elementsArray[indexInContainer];
-        const firstPort =  elementsArray[indexInContainer -1];
-        firstPort.parentElement?.insertBefore(secondPort, firstPort);
+        const secondPortElement = elementsArray[indexInElementArray];
+        const firstPortElement =  elementsArray[indexInElementArray -1];
+        firstPortElement.parentElement?.insertBefore(secondPortElement, firstPortElement);
+
+        // update Frame Port Container
+        const indexInContainer = this._frameInPorts.findIndex(framePort => framePort === nodePort);
+        [this._frameInPorts[indexInContainer -1], this._frameInPorts[indexInContainer]] = [this._frameInPorts[indexInContainer], this._frameInPorts[indexInContainer -1]]; // swap idicies
+        
+        // notify nodePort if it is now at Top (indexInElementArray === 1)
+        if (indexInElementArray === 1) {
+            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Top);
+        } else {
+            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Middle);
+        }
     }
     
-    public moveFramePortDown(nodePort: NodePort){
+    private moveFramePortDown(nodePort: FrameNodePort){
         if(nodePort.isInput) {
             if(this._inputPortContainer.children.length < 2) {
                 return;
             }
             const elementsArray = Array.from(this._inputPortContainer.childNodes);
-            this._moveFramePortDown(elementsArray, nodePort);
+            this._movePortDown(elementsArray, nodePort);
         } else {
             if(this._outputPortContainer.children.length < 2) {
                 return;
             }
             const elementsArray = Array.from(this._outputPortContainer.childNodes);
-            this._moveFramePortDown(elementsArray, nodePort);
+            this._movePortDown(elementsArray, nodePort);
         }
     }
 
-    private _moveFramePortDown(elementsArray: ChildNode[], nodePort: NodePort) {
-        const indexInContainer = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
-        if(indexInContainer === elementsArray.length -1){
+    private _movePortDown(elementsArray: ChildNode[], nodePort: FrameNodePort) {
+        // update UI
+        const indexInElementArray = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
+        if(indexInElementArray === elementsArray.length -1){
             return;
         }
-        const firstPort = elementsArray[indexInContainer];
-        const secondPort =  elementsArray[indexInContainer + 1];
+        const firstPort = elementsArray[indexInElementArray];
+        const secondPort =  elementsArray[indexInElementArray + 1];
         firstPort.parentElement?.insertBefore(secondPort, firstPort);
+
+        // update Frame Port Container
+        const indexInContainer = this._frameInPorts.findIndex(framePort => framePort === nodePort);
+        [this._frameInPorts[indexInContainer], this._frameInPorts[indexInContainer + 1]] = [this._frameInPorts[indexInContainer + 1], this._frameInPorts[indexInContainer]]; // swap idicies
+
+        // notify nodePort if it is now at bottom (indexInContainer === elementsArray.length-2)
+        if(indexInContainer === elementsArray.length-2) {
+            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Bottom);
+        } else {
+            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Middle);
+        }
+
     }
 
     private initResizing = (evt: PointerEvent) => {
@@ -1104,6 +1197,10 @@ export class GraphFrame {
             this._ownerCanvas.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
         }
 
+        if(this._onGraphNodeRemovalObserver) {
+            this._ownerCanvas.globalState.onGraphNodeRemovalObservable.remove(this._onGraphNodeRemovalObserver);
+        }
+
         this.element.parentElement!.removeChild(this.element);
 
         this._ownerCanvas.frames.splice(this._ownerCanvas.frames.indexOf(this), 1);

nodeEditor/src/diagram/graphNode.ts

@@ -33,7 +33,7 @@ export class GraphNode {
     private _globalState: GlobalState;
     private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>>;   
     private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;  
-    private _onFrameCreatedObserver: Nullable<Observer<GraphFrame>>;  
+    private _onFrameCreatedObserver: Nullable<Observer<GraphFrame>>; 
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
     private _ownerCanvas: GraphCanvasComponent; 
     private _isSelected: boolean;
@@ -183,7 +183,7 @@ export class GraphNode {
             this.isSelected = overlap;
         });
 
-        this._onFrameCreatedObserver = this._globalState.onFrameCreated.add(frame => {      
+        this._onFrameCreatedObserver = this._globalState.onFrameCreatedObservable.add(frame => {      
             if (this._ownerCanvas.frames.some(f => f.nodes.indexOf(this) !== -1)) {
                 return;
             }
@@ -407,17 +407,20 @@ export class GraphNode {
 
         // Connections
         for (var input of this.block.inputs) {
-            this._inputPorts.push(NodePort.CreatePortElement(input,  this, this._inputsContainer, this._displayManager, this._globalState, true, null, undefined));
+            this._inputPorts.push(NodePort.CreatePortElement(input,  this, this._inputsContainer, this._displayManager, this._globalState));
         }
 
         for (var output of this.block.outputs) {
-            this._outputPorts.push(NodePort.CreatePortElement(output,  this, this._outputsContainer, this._displayManager, this._globalState, false, null, undefined));
+            this._outputPorts.push(NodePort.CreatePortElement(output,  this, this._outputsContainer, this._displayManager, this._globalState));
         }
 
         this.refresh();
     }
 
     public dispose() {
+        // notify frame observers that this node is being deleted
+        this._globalState.onGraphNodeRemovalObservable.notifyObservers(this);
+
         if (this._onSelectionChangedObserver) {
             this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
         }
@@ -435,7 +438,7 @@ export class GraphNode {
         }
 
         if (this._onFrameCreatedObserver) {
-            this._globalState.onFrameCreated.remove(this._onFrameCreatedObserver);
+            this._globalState.onFrameCreatedObservable.remove(this._onFrameCreatedObserver);
         }
 
         for (var port of this._inputPorts) {

nodeEditor/src/diagram/nodeLink.ts

@@ -4,11 +4,12 @@ import { NodePort } from './nodePort';
 import { Nullable } from 'babylonjs/types';
 import { Observer, Observable } from 'babylonjs/Misc/observable';
 import { GraphFrame } from './graphFrame';
+import { FrameNodePort } from './frameNodePort';
 
 export class NodeLink {
     private _graphCanvas: GraphCanvasComponent;
-    private _portA: NodePort;
-    private _portB?: NodePort;
+    private _portA: NodePort | FrameNodePort;
+    private _portB?: NodePort | FrameNodePort;
     private _nodeA: GraphNode;
     private _nodeB?: GraphNode;
     private _path: SVGPathElement;

nodeEditor/src/diagram/nodePort.ts

@@ -7,18 +7,18 @@ import { Observer } from 'babylonjs/Misc/observable';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { IDisplayManager } from './display/displayManager';
 import { GraphNode } from './graphNode';
+import { NodeLink } from './nodeLink';
+import { GraphFrame } from './graphFrame';
+import { FrameNodePort } from './frameNodePort';
 
 export class NodePort {
-    private _element: HTMLDivElement;
-    private _img: HTMLImageElement;
-    private _globalState: GlobalState;
-    private _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
-    private _portLabel: Element;
-    private _frameId: Nullable<number>
-    private _isInput: boolean;
-    private _framePortId: Nullable<number>;
-
-    public delegatedPort: Nullable<NodePort> = null;
+    protected _element: HTMLDivElement;
+    protected _img: HTMLImageElement;
+    protected _globalState: GlobalState;
+    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
+    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;  
+    
+    public delegatedPort: Nullable<FrameNodePort> = null;
 
     public get element(): HTMLDivElement {
         if (this.delegatedPort) {
@@ -28,26 +28,6 @@ export class NodePort {
         return this._element;
     }
 
-    public get frameId() {
-        return this._frameId;
-    }
-
-    public get isInput() {
-        return this._isInput;
-    }
-
-    public get portLabel() {
-        return this._portLabel.innerHTML;
-    }
-
-    public get framePortId() {
-        return this._framePortId;
-    }
-
-    public set portLabel(newLabel: string) {
-        this._portLabel.innerHTML = newLabel;
-    }
-
     public refresh() {
         this._element.style.background = BlockTools.GetColorFromConnectionNodeType(this.connectionPoint.type);
         switch (this.connectionPoint.type) {
@@ -72,19 +52,12 @@ export class NodePort {
         }
     }
 
-    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState, isInput: boolean, frameId: Nullable<number>, framePortId: number | undefined) {
+    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState) {
         this._element = portContainer.ownerDocument!.createElement("div");
         this._element.classList.add("port");
         portContainer.appendChild(this._element);
         this._globalState = globalState;
 
-        this._portLabel = portContainer.children[0];
-        this._frameId = frameId
-        this._isInput = isInput;
-        if(framePortId !== undefined) {
-            this._framePortId = framePortId;
-        }
-
         this._img = portContainer.ownerDocument!.createElement("img");
         this._element.appendChild(this._img );
 
@@ -102,7 +75,7 @@ export class NodePort {
             }
 
             this._element.classList.add("selected"); 
-            this._globalState.onCandidatePortSelected.notifyObservers(this);
+            this._globalState.onCandidatePortSelectedObservable.notifyObservers(this);
         });
 
         this.refresh();
@@ -110,17 +83,19 @@ export class NodePort {
 
     public dispose() {
         this._globalState.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
+
+        if (this._onSelectionChangedObserver) {
+            this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        }
     }
 
     public static CreatePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, 
-            displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean,  frameId: Nullable<number> = null, framePortId: number | undefined) {
+            displayManager: Nullable<IDisplayManager>, globalState: GlobalState) {
         let portContainer = root.ownerDocument!.createElement("div");
         let block = connectionPoint.ownerBlock;
 
         portContainer.classList.add("portLine");
-        if(framePortId !== null) {
-            portContainer.dataset.framePortId = `${framePortId}`;
-        }
+
         root.appendChild(portContainer);
 
         if (!displayManager || displayManager.shouldDisplayPortLabels(block)) {
@@ -130,6 +105,6 @@ export class NodePort {
             portContainer.appendChild(portLabel);
         }
     
-        return new NodePort(portContainer, connectionPoint, node, globalState, isInput, frameId, framePortId);
+        return new NodePort(portContainer, connectionPoint, node, globalState);
     }
 }

nodeEditor/src/diagram/properties/frameNodePortPropertyComponent.tsx

@@ -0,0 +1,59 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { GlobalState } from '../../globalState';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
+import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
+import { FramePortPosition } from '../graphFrame';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
+import { FrameNodePort } from '../frameNodePort';
+
+export interface IFrameNodePortPropertyTabComponentProps {
+    globalState: GlobalState
+    frameNodePort: FrameNodePort;
+}
+
+export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {framePortPosition: FramePortPosition}> {    
+    private _onFramePortPositionChangedObserver: Nullable<Observer<FramePortPosition>>;
+
+    constructor(props: IFrameNodePortPropertyTabComponentProps) {
+        super(props);
+        this.state = {
+            framePortPosition: this.props.frameNodePort.framePortPosition
+        };
+
+        this._onFramePortPositionChangedObserver = this.props.frameNodePort.onFramePortPositionChangedObservable.add((position) => {
+            this.setState({framePortPosition: position})
+        });
+    }
+
+    componentWillUnmount() {
+        this.props.frameNodePort.onFramePortPositionChangedObservable.remove(this._onFramePortPositionChangedObserver)
+    }
+
+    render() {      
+        return (
+            <div id="propertyTab">
+            <div id="header">
+                <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                <div id="title">
+                    NODE MATERIAL EDITOR
+                </div>
+            </div>
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={this.props.frameNodePort}/>
+                     {this.state.framePortPosition !== FramePortPosition.Top && <ButtonLineComponent label="Move Node Up" onClick={() => {
+                                this.props.frameNodePort.onFramePortMoveUpObservable.notifyObservers(this.props.frameNodePort);
+                            }} />}
+
+                    {this.state.framePortPosition !== FramePortPosition.Bottom && <ButtonLineComponent label="Move Node Down" onClick={() => {
+                                this.props.frameNodePort.onFramePortMoveDownObservable.notifyObservers(this.props.frameNodePort);
+                            }} />}
+                </LineContainerComponent>
+            </div>
+        </div>
+        );
+    }
+}

nodeEditor/src/diagram/properties/nodePortPropertyComponent.tsx

@@ -1,44 +0,0 @@
-
-import * as React from "react";
-import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { GlobalState } from '../../globalState';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
-import { NodePort } from '../nodePort';
-
-export interface INodePortPropertyTabComponentProps {
-    globalState: GlobalState
-    nodePort: NodePort;
-}
-
-export class NodePortPropertyTabComponent extends React.Component<INodePortPropertyTabComponentProps> {
-
-    constructor(props: INodePortPropertyTabComponentProps) {
-        super(props)
-    }
-
-    render() {      
-        return (
-            <div id="propertyTab">
-            <div id="header">
-                <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
-                <div id="title">
-                    NODE MATERIAL EDITOR
-                </div>
-            </div>
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={this.props.nodePort}/>
-                    <ButtonLineComponent label="Move Node Up" onClick={() => {
-                                this.props.globalState.onFramePortMoveUpObserver.notifyObservers(this.props.nodePort);
-                            }} />
-
-                    <ButtonLineComponent label="Move Node Down" onClick={() => {
-                                this.props.globalState.onFramePortMoveDownObserver.notifyObservers(this.props.nodePort);
-                            }} />
-                </LineContainerComponent>
-            </div>
-        </div>
-        );
-    }
-}

nodeEditor/src/globalState.ts

@@ -11,6 +11,7 @@ import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { NodePort } from './diagram/nodePort';
 import { NodeLink } from './diagram/nodeLink';
 import { GraphFrame } from './diagram/graphFrame';
+import { FrameNodePort } from './diagram/frameNodePort';
 
 export class GlobalState {
     nodeMaterial: NodeMaterial;
@@ -35,10 +36,9 @@ export class GlobalState {
     onAnimationCommandActivated = new Observable<void>();
     onCandidateLinkMoved = new Observable<Nullable<Vector2>>();
     onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();
-    onFrameCreated = new Observable<GraphFrame>();
-    onCandidatePortSelected = new Observable<Nullable<NodePort>>();
-    onFramePortMoveUpObserver = new Observable<NodePort>();
-    onFramePortMoveDownObserver = new Observable<NodePort>();
+    onFrameCreatedObservable = new Observable<GraphFrame>();
+    onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();
+    onGraphNodeRemovalObservable = new Observable<GraphNode>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
     onGridSizeChanged = new Observable<void>();
     previewMeshType: PreviewMeshType;

package.json

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

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.5";
+        return "babylonjs@4.2.0-alpha.8";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.2.0-alpha.5";
+        return "4.2.0-alpha.8";
     }
 
     /**
@@ -4298,7 +4298,10 @@ export class ThinEngine {
             requester = window;
         }
 
-        if (requester.requestAnimationFrame) {
+        if (requester.requestPostAnimationFrame) {
+            return requester.requestPostAnimationFrame(func);
+        }
+        else if (requester.requestAnimationFrame) {
             return requester.requestAnimationFrame(func);
         }
         else if (requester.msRequestAnimationFrame) {

src/Layers/highlightLayer.ts

@@ -512,6 +512,14 @@ export class HighlightLayer extends EffectLayer {
     }
 
     /**
+     * Adds specific effects defines.
+     * @param defines The defines to add specifics to.
+     */
+    protected _addCustomEffectDefines(defines: string[]): void {
+        defines.push("#define HIGHLIGHT");
+    }
+
+    /**
      * Sets the required values for both the emissive texture and and the main color.
      */
     protected _setEmissiveTextureAndColor(mesh: Mesh, subMesh: SubMesh, material: Material): void {

src/Materials/Textures/texture.ts

@@ -592,12 +592,17 @@ export class Texture extends BaseTexture {
      */
     public serialize(): any {
         let savedName = this.name;
+
         if (!Texture.SerializeBuffers) {
             if (StringTools.StartsWith(this.name, "data:")) {
                 this.name = "";
             }
         }
 
+        if (StringTools.StartsWith(this.name, "data:") && this.url === this.name) {
+            this.url = "";
+        }
+
         var serializationObject = super.serialize();
 
         if (!serializationObject) {
@@ -705,7 +710,7 @@ export class Texture extends BaseTexture {
                 } else {
                     let url = rootUrl + parsedTexture.name;
 
-                    if (Texture.UseSerializedUrlIfAny && parsedTexture.url) {
+                    if (StringTools.StartsWith(parsedTexture.url, "data:") || (Texture.UseSerializedUrlIfAny && parsedTexture.url)) {
                         url = parsedTexture.url;
                     }
                     texture = new Texture(url, scene, !generateMipMaps, parsedTexture.invertY);

src/Materials/effectRenderer.ts

@@ -1,5 +1,6 @@
 import { Nullable } from '../types';
-import { Texture } from '../Materials/Textures/texture';
+import { InternalTexture } from './Textures/internalTexture';
+import { RenderTargetTexture } from './Textures/renderTargetTexture';
 import { ThinEngine } from '../Engines/thinEngine';
 import { VertexBuffer } from '../Meshes/buffer';
 import { Viewport } from '../Maths/math.viewport';
@@ -8,8 +9,6 @@ import { Observable } from '../Misc/observable';
 import { Effect } from './effect';
 import { DataBuffer } from '../Meshes/dataBuffer';
 
-import "../Engines/Extensions/engine.renderTarget";
-
 // Prevents ES6 Crash if not imported.
 import "../Shaders/postprocess.vertex";
 
@@ -28,50 +27,21 @@ export interface IEffectRendererOptions {
 }
 
 /**
- * Helper class to render one or more effects
+ * Helper class to render one or more effects.
+ * You can access the previous rendering in your shader by declaring a sampler named textureSampler
  */
 export class EffectRenderer {
     // Fullscreen quad buffers by default.
     private static _DefaultOptions: IEffectRendererOptions = {
         positions: [1, 1, -1, 1, -1, -1, 1, -1],
-        indices: [0, 1, 2, 0, 2, 3]
+        indices: [0, 1, 2, 0, 2, 3],
     };
 
     private _vertexBuffers: {[key: string]: VertexBuffer};
     private _indexBuffer: DataBuffer;
 
-    private _ringBufferIndex = 0;
-    private _ringScreenBuffer: Nullable<Array<Texture>> = null;
     private _fullscreenViewport = new Viewport(0, 0, 1, 1);
 
-    private _getNextFrameBuffer(incrementIndex = true) {
-        if (!this._ringScreenBuffer) {
-            this._ringScreenBuffer = [];
-            for (var i = 0; i < 2; i++) {
-                var internalTexture = this.engine.createRenderTargetTexture(
-                    {
-                        width: this.engine.getRenderWidth(true),
-                        height: this.engine.getRenderHeight(true),
-                    },
-                    {
-                        generateDepthBuffer: false,
-                        generateStencilBuffer: false,
-                        generateMipMaps: false,
-                        samplingMode: Constants.TEXTURE_NEAREST_NEAREST,
-                    },
-                );
-                var texture = new Texture("", null);
-                texture._texture = internalTexture;
-                this._ringScreenBuffer.push(texture);
-            }
-        }
-        var ret = this._ringScreenBuffer[this._ringBufferIndex];
-        if (incrementIndex) {
-            this._ringBufferIndex = (this._ringBufferIndex + 1) % 2;
-        }
-        return ret;
-    }
-
     /**
      * Creates an effect renderer
      * @param engine the engine to use for rendering
@@ -87,10 +57,6 @@ export class EffectRenderer {
             [VertexBuffer.PositionKind]: new VertexBuffer(engine, options.positions!, VertexBuffer.PositionKind, false, false, 2),
         };
         this._indexBuffer = engine.createIndexBuffer(options.indices!);
-
-        // No need here for full screen render.
-        engine.depthCullingState.depthTest = false;
-        engine.stencilState.stencilTest = false;
     }
 
     /**
@@ -116,6 +82,8 @@ export class EffectRenderer {
      * @param effectWrapper Defines the effect to draw with
      */
     public applyEffectWrapper(effectWrapper: EffectWrapper): void {
+        this.engine.depthCullingState.depthTest = false;
+        this.engine.stencilState.stencilTest = false;
         this.engine.enableEffect(effectWrapper.effect);
         this.bindBuffers(effectWrapper.effect);
         effectWrapper.onApplyObservable.notifyObservers({});
@@ -128,68 +96,43 @@ export class EffectRenderer {
         this.engine.drawElementsType(Constants.MATERIAL_TriangleFillMode, 0, 6);
     }
 
+    private isRenderTargetTexture(texture: InternalTexture | RenderTargetTexture): texture is RenderTargetTexture  {
+        return (texture as RenderTargetTexture).renderList !== undefined;
+    }
+
     /**
      * renders one or more effects to a specified texture
-     * @param effectWrappers list of effects to renderer
-     * @param outputTexture texture to draw to, if null it will render to the screen
+     * @param effectWrapper the effect to renderer
+     * @param outputTexture texture to draw to, if null it will render to the screen.
      */
-    public render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture: Nullable<Texture> = null) {
-        if (!Array.isArray(effectWrappers)) {
-            effectWrappers = [effectWrappers];
+    public render(effectWrapper: EffectWrapper, outputTexture: Nullable<InternalTexture | RenderTargetTexture> = null) {
+        // Ensure effect is ready
+        if (!effectWrapper.effect.isReady()) {
+            return ;
         }
 
-        // Ensure all effects are ready
-        for (var wrapper of effectWrappers) {
-            if (!wrapper.effect.isReady()) {
-                return;
-            }
-        }
+        // Reset state
+        this.setViewport();
 
-        effectWrappers.forEach((effectWrapper, i) => {
-            var renderTo = outputTexture;
+        const out = outputTexture === null ? null : this.isRenderTargetTexture(outputTexture) ? outputTexture.getInternalTexture()! : outputTexture;
 
-            // for any next effect make it's input the output of the previous effect
-            if (i !== 0) {
-                effectWrapper.effect.onBindObservable.addOnce(() => {
-                    effectWrapper.effect.setTexture("textureSampler", this._getNextFrameBuffer(false));
-                });
-            }
-
-            // Set the output to the next screenbuffer
-            if ((effectWrappers as Array<EffectWrapper>).length > 1 && i != (effectWrappers as Array<EffectWrapper>).length - 1) {
-                renderTo = this._getNextFrameBuffer();
-            } else {
-                renderTo = outputTexture;
-            }
-
-            // Reset state
-            this.setViewport();
-
-            if (renderTo) {
-                this.engine.bindFramebuffer(renderTo.getInternalTexture()!);
-            }
+        if (out) {
+            this.engine.bindFramebuffer(out);
+        }
 
-            this.applyEffectWrapper(effectWrapper);
+        this.applyEffectWrapper(effectWrapper);
 
-            this.draw();
+        this.draw();
 
-            if (renderTo) {
-                this.engine.unBindFramebuffer(renderTo.getInternalTexture()!);
-            }
-        });
+        if (out) {
+            this.engine.unBindFramebuffer(out);
+        }
     }
 
     /**
      * Disposes of the effect renderer
      */
     dispose() {
-        if (this._ringScreenBuffer) {
-            this._ringScreenBuffer.forEach((b) => {
-                b.dispose();
-            });
-            this._ringScreenBuffer = null;
-        }
-
         var vertexBuffer = this._vertexBuffers[VertexBuffer.PositionKind];
         if (vertexBuffer) {
             vertexBuffer.dispose();

src/Misc/gradients.ts

@@ -113,6 +113,13 @@ export class GradientHelper {
      * @param updateFunc defines the callback function used to get the final value from the selected gradients
      */
     public static GetCurrentGradient(ratio: number, gradients: IValueGradient[], updateFunc: (current: IValueGradient, next: IValueGradient, scale: number) => void) {
+
+        // Use last index if over
+        if (gradients[0].gradient > ratio) {
+            updateFunc(gradients[0], gradients[0], 1.0);
+            return;
+        }
+
         for (var gradientIndex = 0; gradientIndex < gradients.length - 1; gradientIndex++) {
             let currentGradient = gradients[gradientIndex];
             let nextGradient = gradients[gradientIndex + 1];

src/Misc/sceneSerializer.ts

@@ -293,7 +293,7 @@ export class SceneSerializer {
         // Particles Systems
         serializationObject.particleSystems = [];
         for (index = 0; index < scene.particleSystems.length; index++) {
-            serializationObject.particleSystems.push(scene.particleSystems[index].serialize());
+            serializationObject.particleSystems.push(scene.particleSystems[index].serialize(false));
         }
 
         // Action Manager

src/Misc/stringTools.ts

@@ -19,6 +19,9 @@ export class StringTools {
      * @returns Boolean indicating whether the suffix was found (true) or not (false)
      */
     public static StartsWith(str: string, suffix: string): boolean {
+        if (!str) {
+            return false;
+        }
         return str.indexOf(suffix) === 0;
     }