Proc Lib to Modules

Tools/Gulp/config.json

@@ -1543,107 +1543,36 @@
     "proceduralTexturesLibrary": {
         "libraries": [
             {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/wood/babylon.woodProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/wood/woodProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.woodProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/fire/babylon.fireProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/fire/fireProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.fireProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/cloud/babylon.cloudProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.cloudProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/grass/babylon.grassProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/grass/grassProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.grassProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/road/babylon.roadProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/road/roadProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.roadProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/brick/babylon.brickProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/brick/brickProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.brickProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/marble/babylon.marbleProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/marble/marbleProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.marbleProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/starfield/babylon.starfieldProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/starfield/starfieldProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.starfieldProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/normalMap/babylon.normalMapProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/normalMap/normalMapProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.normalMapProceduralTexture.js"
-            },
-            {
-                "files": [
-                    "../../proceduralTexturesLibrary/src/perlinNoise/babylon.perlinNoiseProceduralTexture.ts"
-                ],
-                "shaderFiles": [
-                    "../../proceduralTexturesLibrary/src/perlinNoise/perlinNoiseProceduralTexture.fragment.fx"
-                ],
-                "output": "babylon.perlinNoiseProceduralTexture.js"
+                "files": [],
+                "noBundleInName": true,
+                "output": "babylon.proceduralTextures.min.js",
+                "webpack": "../../proceduralTexturesLibrary/webpack.config.js",
+                "bundle": "true",
+                "babylonIncluded": false,
+                "useOutputForDebugging": true
             }
         ],
         "build": {
-            "srcOutputDirectory": "../../proceduralTexturesLibrary/",
+            "srcOutputDirectory": "../../proceduralTexturesLibrary/src/",
             "distOutputDirectory": "/proceduralTexturesLibrary/",
-            "buildAsModule": true,
-            "moduleName": "babylonjs-procedural-textures",
-            "outputFilename": "babylonjs.proceduralTextures",
-            "moduleDeclaration": {
-                "name": "ProceduralTextures",
-                "module": "babylonjs-procedural-textures"
+            "dtsBundle": {
+                "name": "babylonjs-procedural-textures",
+                "main": "../../dist/preview release/proceduralTexturesLibrary/build/index.d.ts",
+                "out": "../babylon.proceduralTextures.module.d.ts",
+                "baseDir": "../../dist/preview release/proceduralTexturesLibrary/build/",
+                "headerText": "BabylonJS Procedural Textures"
             },
-            "extendsRoot": true
+            "processDeclaration": {
+                "filename": "babylon.proceduralTextures.module.d.ts",
+                "packageName": "babylonjs-procedural-textures",
+                "moduleName": "BABYLON.PROCEDURALTEXTURES",
+                "importsToRemove": [],
+                "classMap": {
+                    "babylonjs": "BABYLON",
+                    "babylonjs-loaders": "BABYLON",
+                    "babylonjs-serializers": "BABYLON"
+                }
+            }
         }
     },
     "loaders": {

gui/package.json

@@ -35,4 +35,4 @@
     "dependencies": {
         "dts-bundle-webpack": "^1.0.0"
     }
-}
+}

proceduralTexturesLibrary/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "babylonjs-procedural-textures",
+    "version": "1.0.0",
+    "description": "The js Procedural Textures library is an extension containing extra procedural textures for babylonjs.",
+    "scripts": {
+        "start:server": "webpack-dev-server",
+        "start:watch": "webpack -w",
+        "build:dev": "webpack",
+        "build:prod": "webpack --mode=production",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "keywords": [
+        "3d",
+        "webgl",
+        "viewer"
+    ],
+    "license": "Apache2",
+    "bugs": {
+        "url": "https://github.com/BabylonJS/Babylon.js/issues"
+    },
+    "homepage": "https://github.com/BabylonJS/Babylon.js#readme",
+    "devDependencies": {
+        "@types/node": "^10.5.2",
+        "clean-webpack-plugin": "^0.1.19",
+        "ts-loader": "^4.0.0",
+        "typescript": "~3.0.1",
+        "webpack": "^4.16.0",
+        "webpack-cli": "^3.0.8",
+        "webpack-dev-server": "^3.1.4"
+    },
+    "dependencies": {
+        "dts-bundle-webpack": "^1.0.0"
+    }
+}

proceduralTexturesLibrary/src/brick/babylon.brickProceduralTexture.ts

@@ -1,86 +0,0 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class BrickProceduralTexture extends ProceduralTexture {
-        private _numberOfBricksHeight: number = 15;
-        private _numberOfBricksWidth: number = 5;
-        private _jointColor = new Color3(0.72, 0.72, 0.72);
-        private _brickColor = new Color3(0.77, 0.47, 0.40);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "brickProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("numberOfBricksHeight", this._numberOfBricksHeight);
-            this.setFloat("numberOfBricksWidth", this._numberOfBricksWidth);
-            this.setColor3("brickColor", this._brickColor);
-            this.setColor3("jointColor", this._jointColor);
-        }
-
-        @serialize()
-        public get numberOfBricksHeight(): number {
-            return this._numberOfBricksHeight;
-        }
-
-        public set numberOfBricksHeight(value: number) {
-            this._numberOfBricksHeight = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get numberOfBricksWidth(): number {
-            return this._numberOfBricksWidth;
-        }
-
-        public set numberOfBricksWidth(value: number) {
-            this._numberOfBricksWidth = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsColor3()
-        public get jointColor(): Color3 {
-            return this._jointColor;
-        }
-
-        public set jointColor(value: Color3) {
-            this._jointColor = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsColor3()
-        public get brickColor(): Color3 {
-            return this._brickColor;
-        }
-
-        public set brickColor(value: Color3) {
-            this._brickColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this brick procedural texture
-         * @returns a serialized brick procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.BrickProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new BrickProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/brick/brickProceduralTexture.ts

@@ -0,0 +1,86 @@
+import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["brickProceduralTexturePixelShader"] = require("./brickProceduralTexture.fragment.fx");
+
+export class BrickProceduralTexture extends ProceduralTexture {
+    private _numberOfBricksHeight: number = 15;
+    private _numberOfBricksWidth: number = 5;
+    private _jointColor = new Color3(0.72, 0.72, 0.72);
+    private _brickColor = new Color3(0.77, 0.47, 0.40);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "brickProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("numberOfBricksHeight", this._numberOfBricksHeight);
+        this.setFloat("numberOfBricksWidth", this._numberOfBricksWidth);
+        this.setColor3("brickColor", this._brickColor);
+        this.setColor3("jointColor", this._jointColor);
+    }
+
+    @serialize()
+    public get numberOfBricksHeight(): number {
+        return this._numberOfBricksHeight;
+    }
+
+    public set numberOfBricksHeight(value: number) {
+        this._numberOfBricksHeight = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get numberOfBricksWidth(): number {
+        return this._numberOfBricksWidth;
+    }
+
+    public set numberOfBricksWidth(value: number) {
+        this._numberOfBricksWidth = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsColor3()
+    public get jointColor(): Color3 {
+        return this._jointColor;
+    }
+
+    public set jointColor(value: Color3) {
+        this._jointColor = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsColor3()
+    public get brickColor(): Color3 {
+        return this._brickColor;
+    }
+
+    public set brickColor(value: Color3) {
+        this._brickColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this brick procedural texture
+     * @returns a serialized brick procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.BrickProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new BrickProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/brick/index.ts

@@ -0,0 +1 @@
+export * from "./brickProceduralTexture";

proceduralTexturesLibrary/src/cloud/babylon.cloudProceduralTexture.ts

@@ -1,62 +0,0 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class CloudProceduralTexture extends ProceduralTexture {
-        private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
-        private _cloudColor = new Color4(1, 1, 1, 1.0);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setColor4("skyColor", this._skyColor);
-            this.setColor4("cloudColor", this._cloudColor);
-        }
-
-        @serializeAsColor4()
-        public get skyColor(): Color4 {
-            return this._skyColor;
-        }
-
-        public set skyColor(value: Color4) {
-            this._skyColor = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsColor4()
-        public get cloudColor(): Color4 {
-            return this._cloudColor;
-        }
-
-        public set cloudColor(value: Color4) {
-            this._cloudColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this cloud procedural texture
-         * @returns a serialized cloud procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.CloudProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.ts

@@ -0,0 +1,62 @@
+import { Effect, ProceduralTexture, Color4, Scene, Texture, serializeAsColor4, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["cloudProceduralTexturePixelShader"] = require("./cloudProceduralTexture.fragment.fx");
+
+export class CloudProceduralTexture extends ProceduralTexture {
+    private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
+    private _cloudColor = new Color4(1, 1, 1, 1.0);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setColor4("skyColor", this._skyColor);
+        this.setColor4("cloudColor", this._cloudColor);
+    }
+
+    @serializeAsColor4()
+    public get skyColor(): Color4 {
+        return this._skyColor;
+    }
+
+    public set skyColor(value: Color4) {
+        this._skyColor = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsColor4()
+    public get cloudColor(): Color4 {
+        return this._cloudColor;
+    }
+
+    public set cloudColor(value: Color4) {
+        this._cloudColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this cloud procedural texture
+     * @returns a serialized cloud procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.CloudProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/cloud/index.ts

@@ -0,0 +1 @@
+export * from "./cloudProceduralTexture";

proceduralTexturesLibrary/src/fire/babylon.fireProceduralTexture.ts

@@ -1,166 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
- export class FireProceduralTexture extends ProceduralTexture {
-        private _time: number = 0.0;
-        private _speed = new Vector2(0.5, 0.3);
-        private _autoGenerateTime: boolean = true;
-        private _fireColors: Color3[];
-        private _alphaThreshold: number = 0.5;
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "fireProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this._fireColors = FireProceduralTexture.RedFireColors;
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("time", this._time);
-            this.setVector2("speed", this._speed);
-            this.setColor3("c1", this._fireColors[0]);
-            this.setColor3("c2", this._fireColors[1]);
-            this.setColor3("c3", this._fireColors[2]);
-            this.setColor3("c4", this._fireColors[3]);
-            this.setColor3("c5", this._fireColors[4]);
-            this.setColor3("c6", this._fireColors[5]);
-            this.setFloat("alphaThreshold", this._alphaThreshold);
-        }
-
-        public render(useCameraPostProcess?: boolean) {
-            let scene = this.getScene();
-            if (this._autoGenerateTime && scene) {
-                this._time += scene.getAnimationRatio() * 0.03;
-                this.updateShaderUniforms();
-            }
-            super.render(useCameraPostProcess);
-        }
-
-        public static get PurpleFireColors(): Color3[] {
-            return [
-                new Color3(0.5, 0.0, 1.0),
-                new Color3(0.9, 0.0, 1.0),
-                new Color3(0.2, 0.0, 1.0),
-                new Color3(1.0, 0.9, 1.0),
-                new Color3(0.1, 0.1, 1.0),
-                new Color3(0.9, 0.9, 1.0)
-            ];
-        }
-
-        public static get GreenFireColors(): Color3[] {
-            return [
-                new Color3(0.5, 1.0, 0.0),
-                new Color3(0.5, 1.0, 0.0),
-                new Color3(0.3, 0.4, 0.0),
-                new Color3(0.5, 1.0, 0.0),
-                new Color3(0.2, 0.0, 0.0),
-                new Color3(0.5, 1.0, 0.0)
-            ];
-        }
-
-        public static get RedFireColors(): Color3[] {
-            return [
-                new Color3(0.5, 0.0, 0.1),
-                new Color3(0.9, 0.0, 0.0),
-                new Color3(0.2, 0.0, 0.0),
-                new Color3(1.0, 0.9, 0.0),
-                new Color3(0.1, 0.1, 0.1),
-                new Color3(0.9, 0.9, 0.9)
-            ];
-        }
-
-        public static get BlueFireColors(): Color3[] {
-            return [
-                new Color3(0.1, 0.0, 0.5),
-                new Color3(0.0, 0.0, 0.5),
-                new Color3(0.1, 0.0, 0.2),
-                new Color3(0.0, 0.0, 1.0),
-                new Color3(0.1, 0.2, 0.3),
-                new Color3(0.0, 0.2, 0.9)
-            ];
-        }
-
-        @serialize()
-        public get autoGenerateTime(): boolean {
-            return this._autoGenerateTime;
-        }
-
-        public set autoGenerateTime(value: boolean) {
-            this._autoGenerateTime = value;
-        }
-
-        public get fireColors(): Color3[] {
-            return this._fireColors;
-        }
-
-        public set fireColors(value: Color3[]) {
-            this._fireColors = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get time(): number {
-            return this._time;
-        }
-
-        public set time(value: number) {
-            this._time = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsVector2()
-        public get speed(): Vector2 {
-            return this._speed;
-        }
-
-        public set speed(value: Vector2) {
-            this._speed = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get alphaThreshold(): number {
-            return this._alphaThreshold;
-        }
-
-        public set alphaThreshold(value: number) {
-            this._alphaThreshold = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this fire procedural texture
-         * @returns a serialized fire procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.FireProceduralTexture";
-
-            serializationObject.fireColors = [];
-            for (var i = 0; i < this._fireColors.length; i++) {
-                serializationObject.fireColors.push(this._fireColors[i].asArray());
-            }
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            var colors: Color3[] = [];
-            for (var i = 0; i < parsedTexture.fireColors.length; i++) {
-                colors.push(Color3.FromArray(parsedTexture.fireColors[i]));
-            }
-
-            texture.fireColors = colors;
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/fire/fireProceduralTexture.ts

@@ -0,0 +1,166 @@
+import { Effect, ProceduralTexture, Vector2, Color3, Scene, Texture, serialize, serializeAsVector2, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["fireProceduralTexturePixelShader"] = require("./fireProceduralTexture.fragment.fx");
+
+export class FireProceduralTexture extends ProceduralTexture {
+    private _time: number = 0.0;
+    private _speed = new Vector2(0.5, 0.3);
+    private _autoGenerateTime: boolean = true;
+    private _fireColors: Color3[];
+    private _alphaThreshold: number = 0.5;
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "fireProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this._fireColors = FireProceduralTexture.RedFireColors;
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("time", this._time);
+        this.setVector2("speed", this._speed);
+        this.setColor3("c1", this._fireColors[0]);
+        this.setColor3("c2", this._fireColors[1]);
+        this.setColor3("c3", this._fireColors[2]);
+        this.setColor3("c4", this._fireColors[3]);
+        this.setColor3("c5", this._fireColors[4]);
+        this.setColor3("c6", this._fireColors[5]);
+        this.setFloat("alphaThreshold", this._alphaThreshold);
+    }
+
+    public render(useCameraPostProcess?: boolean) {
+        let scene = this.getScene();
+        if (this._autoGenerateTime && scene) {
+            this._time += scene.getAnimationRatio() * 0.03;
+            this.updateShaderUniforms();
+        }
+        super.render(useCameraPostProcess);
+    }
+
+    public static get PurpleFireColors(): Color3[] {
+        return [
+            new Color3(0.5, 0.0, 1.0),
+            new Color3(0.9, 0.0, 1.0),
+            new Color3(0.2, 0.0, 1.0),
+            new Color3(1.0, 0.9, 1.0),
+            new Color3(0.1, 0.1, 1.0),
+            new Color3(0.9, 0.9, 1.0)
+        ];
+    }
+
+    public static get GreenFireColors(): Color3[] {
+        return [
+            new Color3(0.5, 1.0, 0.0),
+            new Color3(0.5, 1.0, 0.0),
+            new Color3(0.3, 0.4, 0.0),
+            new Color3(0.5, 1.0, 0.0),
+            new Color3(0.2, 0.0, 0.0),
+            new Color3(0.5, 1.0, 0.0)
+        ];
+    }
+
+    public static get RedFireColors(): Color3[] {
+        return [
+            new Color3(0.5, 0.0, 0.1),
+            new Color3(0.9, 0.0, 0.0),
+            new Color3(0.2, 0.0, 0.0),
+            new Color3(1.0, 0.9, 0.0),
+            new Color3(0.1, 0.1, 0.1),
+            new Color3(0.9, 0.9, 0.9)
+        ];
+    }
+
+    public static get BlueFireColors(): Color3[] {
+        return [
+            new Color3(0.1, 0.0, 0.5),
+            new Color3(0.0, 0.0, 0.5),
+            new Color3(0.1, 0.0, 0.2),
+            new Color3(0.0, 0.0, 1.0),
+            new Color3(0.1, 0.2, 0.3),
+            new Color3(0.0, 0.2, 0.9)
+        ];
+    }
+
+    @serialize()
+    public get autoGenerateTime(): boolean {
+        return this._autoGenerateTime;
+    }
+
+    public set autoGenerateTime(value: boolean) {
+        this._autoGenerateTime = value;
+    }
+
+    public get fireColors(): Color3[] {
+        return this._fireColors;
+    }
+
+    public set fireColors(value: Color3[]) {
+        this._fireColors = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get time(): number {
+        return this._time;
+    }
+
+    public set time(value: number) {
+        this._time = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsVector2()
+    public get speed(): Vector2 {
+        return this._speed;
+    }
+
+    public set speed(value: Vector2) {
+        this._speed = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get alphaThreshold(): number {
+        return this._alphaThreshold;
+    }
+
+    public set alphaThreshold(value: number) {
+        this._alphaThreshold = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this fire procedural texture
+     * @returns a serialized fire procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.FireProceduralTexture";
+
+        serializationObject.fireColors = [];
+        for (var i = 0; i < this._fireColors.length; i++) {
+            serializationObject.fireColors.push(this._fireColors[i].asArray());
+        }
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        var colors: Color3[] = [];
+        for (var i = 0; i < parsedTexture.fireColors.length; i++) {
+            colors.push(Color3.FromArray(parsedTexture.fireColors[i]));
+        }
+
+        texture.fireColors = colors;
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/fire/index.ts

@@ -0,0 +1 @@
+export * from "./fireProceduralTexture";

proceduralTexturesLibrary/src/grass/babylon.grassProceduralTexture.ts

@@ -1,82 +0,0 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class GrassProceduralTexture extends ProceduralTexture {
-        private _grassColors: Color3[];
-        private _groundColor = new Color3(1, 1, 1);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
-
-            this._grassColors = [
-                new Color3(0.29, 0.38, 0.02),
-                new Color3(0.36, 0.49, 0.09),
-                new Color3(0.51, 0.6, 0.28)
-            ];
-
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setColor3("herb1Color", this._grassColors[0]);
-            this.setColor3("herb2Color", this._grassColors[1]);
-            this.setColor3("herb3Color", this._grassColors[2]);
-            this.setColor3("groundColor", this._groundColor);
-        }
-
-        public get grassColors(): Color3[] {
-            return this._grassColors;
-        }
-
-        public set grassColors(value: Color3[]) {
-            this._grassColors = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsColor3()
-        public get groundColor(): Color3 {
-            return this._groundColor;
-        }
-
-        public set groundColor(value: Color3) {
-            this._groundColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this grass procedural texture
-         * @returns a serialized grass procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.GrassProceduralTexture";
-
-            serializationObject.grassColors = [];
-            for (var i = 0; i < this._grassColors.length; i++) {
-                serializationObject.grassColors.push(this._grassColors[i].asArray());
-            }
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            var colors: Color3[] = [];
-            for (var i = 0; i < parsedTexture.grassColors.length; i++) {
-                colors.push(Color3.FromArray(parsedTexture.grassColors[i]));
-            }
-
-            texture.grassColors = colors;
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/grass/grassProceduralTexture.ts

@@ -0,0 +1,82 @@
+import { Effect, ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["grassProceduralTexturePixelShader"] = require("./grassProceduralTexture.fragment.fx");
+
+export class GrassProceduralTexture extends ProceduralTexture {
+    private _grassColors: Color3[];
+    private _groundColor = new Color3(1, 1, 1);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
+
+        this._grassColors = [
+            new Color3(0.29, 0.38, 0.02),
+            new Color3(0.36, 0.49, 0.09),
+            new Color3(0.51, 0.6, 0.28)
+        ];
+
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setColor3("herb1Color", this._grassColors[0]);
+        this.setColor3("herb2Color", this._grassColors[1]);
+        this.setColor3("herb3Color", this._grassColors[2]);
+        this.setColor3("groundColor", this._groundColor);
+    }
+
+    public get grassColors(): Color3[] {
+        return this._grassColors;
+    }
+
+    public set grassColors(value: Color3[]) {
+        this._grassColors = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsColor3()
+    public get groundColor(): Color3 {
+        return this._groundColor;
+    }
+
+    public set groundColor(value: Color3) {
+        this._groundColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this grass procedural texture
+     * @returns a serialized grass procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.GrassProceduralTexture";
+
+        serializationObject.grassColors = [];
+        for (var i = 0; i < this._grassColors.length; i++) {
+            serializationObject.grassColors.push(this._grassColors[i].asArray());
+        }
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        var colors: Color3[] = [];
+        for (var i = 0; i < parsedTexture.grassColors.length; i++) {
+            colors.push(Color3.FromArray(parsedTexture.grassColors[i]));
+        }
+
+        texture.grassColors = colors;
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/grass/index.ts

@@ -0,0 +1 @@
+export * from "./grassProceduralTexture";

proceduralTexturesLibrary/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./brick";
+export * from "./cloud";
+export * from "./fire";
+export * from "./grass";
+export * from "./marble";
+export * from "./normalMap";
+export * from "./perlinNoise";
+export * from "./road";
+export * from "./starfield";
+export * from "./wood";

proceduralTexturesLibrary/src/legacy.ts

@@ -0,0 +1,19 @@
+import * as ProceduralTexturesLib from "./index";
+
+/**
+ * Legacy support, defining window.BABYLON.GridMaterial... (global variable).
+ *
+ * This is the entry point for the UMD module.
+ * The entry point for a future ESM package should be index.ts
+ */
+var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
+if (typeof globalObject !== "undefined") {
+    (<any>globalObject).BABYLON = (<any>globalObject).BABYLON || {};
+    for (var mat in ProceduralTexturesLib) {
+        if (ProceduralTexturesLib.hasOwnProperty(mat)) {
+            (<any>globalObject).BABYLON[mat] = (<any>ProceduralTexturesLib)[mat];
+        }
+    }
+}
+
+export * from "./index";

proceduralTexturesLibrary/src/marble/babylon.marbleProceduralTexture.ts

@@ -1,86 +0,0 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class MarbleProceduralTexture extends ProceduralTexture {
-        private _numberOfTilesHeight: number = 3;
-        private _numberOfTilesWidth: number = 3;
-        private _amplitude: number = 9.0;
-        private _jointColor = new Color3(0.72, 0.72, 0.72);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
-            this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
-            this.setFloat("amplitude", this._amplitude);
-            this.setColor3("jointColor", this._jointColor);
-        }
-
-        @serialize()
-        public get numberOfTilesHeight(): number {
-            return this._numberOfTilesHeight;
-        }
-
-        public set numberOfTilesHeight(value: number) {
-            this._numberOfTilesHeight = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get amplitude(): number {
-            return this._amplitude;
-        }
-
-        public set amplitude(value: number) {
-            this._amplitude = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get numberOfTilesWidth(): number {
-            return this._numberOfTilesWidth;
-        }
-
-        public set numberOfTilesWidth(value: number) {
-            this._numberOfTilesWidth = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get jointColor(): Color3 {
-            return this._jointColor;
-        }
-
-        public set jointColor(value: Color3) {
-            this._jointColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this marble procedural texture
-         * @returns a serialized marble procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/marble/index.ts

@@ -0,0 +1 @@
+export * from "./marbleProceduralTexture";

proceduralTexturesLibrary/src/marble/marbleProceduralTexture.ts

@@ -0,0 +1,86 @@
+import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["marbleProceduralTexturePixelShader"] = require("./marbleProceduralTexture.fragment.fx");
+
+export class MarbleProceduralTexture extends ProceduralTexture {
+    private _numberOfTilesHeight: number = 3;
+    private _numberOfTilesWidth: number = 3;
+    private _amplitude: number = 9.0;
+    private _jointColor = new Color3(0.72, 0.72, 0.72);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
+        this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
+        this.setFloat("amplitude", this._amplitude);
+        this.setColor3("jointColor", this._jointColor);
+    }
+
+    @serialize()
+    public get numberOfTilesHeight(): number {
+        return this._numberOfTilesHeight;
+    }
+
+    public set numberOfTilesHeight(value: number) {
+        this._numberOfTilesHeight = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get amplitude(): number {
+        return this._amplitude;
+    }
+
+    public set amplitude(value: number) {
+        this._amplitude = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get numberOfTilesWidth(): number {
+        return this._numberOfTilesWidth;
+    }
+
+    public set numberOfTilesWidth(value: number) {
+        this._numberOfTilesWidth = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get jointColor(): Color3 {
+        return this._jointColor;
+    }
+
+    public set jointColor(value: Color3) {
+        this._jointColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this marble procedural texture
+     * @returns a serialized marble procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/normalMap/babylon.normalMapProceduralTexture.ts

@@ -1,62 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class NormalMapProceduralTexture extends ProceduralTexture {
-        private _baseTexture: Texture;
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "normalMapProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setTexture("baseSampler", this._baseTexture);
-            this.setFloat("size", this.getRenderSize());
-        }
-
-        public render(useCameraPostProcess?: boolean) {
-            super.render(useCameraPostProcess);
-        }
-
-        public resize(size: any, generateMipMaps: any): void {
-            super.resize(size, generateMipMaps);
-
-            // We need to update the "size" uniform
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsTexture()
-        public get baseTexture(): Texture {
-            return this._baseTexture;
-        }
-
-        public set baseTexture(texture: Texture) {
-            this._baseTexture = texture;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this normal map procedural texture
-         * @returns a serialized normal map procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/normalMap/index.ts

@@ -0,0 +1 @@
+export * from "./normalMapProceduralTexture";

proceduralTexturesLibrary/src/normalMap/normalMapProceduralTexture.ts

@@ -0,0 +1,62 @@
+import { Effect, ProceduralTexture, Texture, Scene, serializeAsTexture, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["normalMapProceduralTexturePixelShader"] = require("./normalMapProceduralTexture.fragment.fx");
+
+export class NormalMapProceduralTexture extends ProceduralTexture {
+    private _baseTexture: Texture;
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "normalMapProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setTexture("baseSampler", this._baseTexture);
+        this.setFloat("size", this.getRenderSize());
+    }
+
+    public render(useCameraPostProcess?: boolean) {
+        super.render(useCameraPostProcess);
+    }
+
+    public resize(size: any, generateMipMaps: any): void {
+        super.resize(size, generateMipMaps);
+
+        // We need to update the "size" uniform
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsTexture()
+    public get baseTexture(): Texture {
+        return this._baseTexture;
+    }
+
+    public set baseTexture(texture: Texture) {
+        this._baseTexture = texture;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this normal map procedural texture
+     * @returns a serialized normal map procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/perlinNoise/babylon.perlinNoiseProceduralTexture.ts

@@ -1,71 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class PerlinNoiseProceduralTexture extends ProceduralTexture {
-        @serialize()
-        public time: number = 0.0;
-
-        @serialize()
-        public timeScale: number = 1.0;
-
-        @serialize()
-        public translationSpeed: number = 1.0;
-
-        private _currentTranslation: number = 0;
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "perlinNoiseProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("size", this.getRenderSize());
-
-            let scene = this.getScene();
-
-            if (!scene) {
-                return;
-            }
-            var deltaTime = scene.getEngine().getDeltaTime();
-
-            this.time += deltaTime;
-            this.setFloat("time", this.time * this.timeScale / 1000);
-
-            this._currentTranslation += deltaTime * this.translationSpeed / 1000.0;
-            this.setFloat("translationSpeed", this._currentTranslation);
-        }
-
-        public render(useCameraPostProcess?: boolean) {
-            this.updateShaderUniforms();
-            super.render(useCameraPostProcess);
-        }
-
-        public resize(size: any, generateMipMaps: any): void {
-            super.resize(size, generateMipMaps);
-        }
-
-        /**
-         * Serializes this perlin noise procedural texture
-         * @returns a serialized perlin noise procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/perlinNoise/index.ts

@@ -0,0 +1 @@
+export * from "./perlinNoiseProceduralTexture";

proceduralTexturesLibrary/src/perlinNoise/perlinNoiseProceduralTexture.ts

@@ -0,0 +1,71 @@
+import { Effect, ProceduralTexture, serialize, Scene, Texture, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["perlinNoiseProceduralTexturePixelShader"] = require("./perlinNoiseProceduralTexture.fragment.fx");
+
+export class PerlinNoiseProceduralTexture extends ProceduralTexture {
+    @serialize()
+    public time: number = 0.0;
+
+    @serialize()
+    public timeScale: number = 1.0;
+
+    @serialize()
+    public translationSpeed: number = 1.0;
+
+    private _currentTranslation: number = 0;
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "perlinNoiseProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("size", this.getRenderSize());
+
+        let scene = this.getScene();
+
+        if (!scene) {
+            return;
+        }
+        var deltaTime = scene.getEngine().getDeltaTime();
+
+        this.time += deltaTime;
+        this.setFloat("time", this.time * this.timeScale / 1000);
+
+        this._currentTranslation += deltaTime * this.translationSpeed / 1000.0;
+        this.setFloat("translationSpeed", this._currentTranslation);
+    }
+
+    public render(useCameraPostProcess?: boolean) {
+        this.updateShaderUniforms();
+        super.render(useCameraPostProcess);
+    }
+
+    public resize(size: any, generateMipMaps: any): void {
+        super.resize(size, generateMipMaps);
+    }
+
+    /**
+     * Serializes this perlin noise procedural texture
+     * @returns a serialized perlin noise procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/road/babylon.roadProceduralTexture.ts

@@ -1,50 +0,0 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class RoadProceduralTexture extends ProceduralTexture {
-        private _roadColor = new Color3(0.53, 0.53, 0.53);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setColor3("roadColor", this._roadColor);
-        }
-
-        @serializeAsColor3()
-        public get roadColor(): Color3 {
-            return this._roadColor;
-        }
-
-        public set roadColor(value: Color3) {
-            this._roadColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this road procedural texture
-         * @returns a serialized road procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.RoadProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/road/index.ts

@@ -0,0 +1 @@
+export * from "./roadProceduralTexture";

proceduralTexturesLibrary/src/road/roadProceduralTexture.ts

@@ -0,0 +1,50 @@
+import { Effect, ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["roadProceduralTexturePixelShader"] = require("./roadProceduralTexture.fragment.fx");
+
+export class RoadProceduralTexture extends ProceduralTexture {
+    private _roadColor = new Color3(0.53, 0.53, 0.53);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setColor3("roadColor", this._roadColor);
+    }
+
+    @serializeAsColor3()
+    public get roadColor(): Color3 {
+        return this._roadColor;
+    }
+
+    public set roadColor(value: Color3) {
+        this._roadColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this road procedural texture
+     * @returns a serialized road procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.RoadProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/starfield/babylon.starfieldProceduralTexture.ts

@@ -1,170 +0,0 @@
-  /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
- export class StarfieldProceduralTexture extends ProceduralTexture {
-        private _time = 1;
-        private _alpha = 0.5;
-        private _beta = 0.8;
-        private _zoom = 0.8;
-        private _formuparam = 0.53;
-        private _stepsize = 0.1;
-        private _tile = 0.850;
-        private _brightness = 0.0015;
-        private _darkmatter = 0.400;
-        private _distfading = 0.730;
-        private _saturation = 0.850;
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "starfieldProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("time", this._time);
-            this.setFloat("alpha", this._alpha);
-            this.setFloat("beta", this._beta);
-            this.setFloat("zoom", this._zoom);
-            this.setFloat("formuparam", this._formuparam);
-            this.setFloat("stepsize", this._stepsize);
-            this.setFloat("tile", this._tile);
-            this.setFloat("brightness", this._brightness);
-            this.setFloat("darkmatter", this._darkmatter);
-            this.setFloat("distfading", this._distfading);
-            this.setFloat("saturation", this._saturation);
-        }
-
-        @serialize()
-        public get time(): number {
-            return this._time;
-        }
-
-        public set time(value: number) {
-            this._time = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get alpha(): number {
-            return this._alpha;
-        }
-
-        public set alpha(value: number) {
-            this._alpha = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get beta(): number {
-            return this._beta;
-        }
-
-        public set beta(value: number) {
-            this._beta = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get formuparam(): number {
-            return this._formuparam;
-        }
-
-        public set formuparam(value: number) {
-            this._formuparam = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get stepsize(): number {
-            return this._stepsize;
-        }
-
-        public set stepsize(value: number) {
-            this._stepsize = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get zoom(): number {
-            return this._zoom;
-        }
-
-        public set zoom(value: number) {
-            this._zoom = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get tile(): number {
-            return this._tile;
-        }
-
-        public set tile(value: number) {
-            this._tile = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get brightness(): number {
-            return this._brightness;
-        }
-
-        public set brightness(value: number) {
-            this._brightness = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get darkmatter(): number {
-            return this._darkmatter;
-        }
-
-        public set darkmatter(value: number) {
-            this._darkmatter = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get distfading(): number {
-            return this._distfading;
-        }
-
-        public set distfading(value: number) {
-            this._distfading = value;
-            this.updateShaderUniforms();
-        }
-
-        @serialize()
-        public get saturation(): number {
-            return this._saturation;
-        }
-
-        public set saturation(value: number) {
-            this._saturation = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this starfield procedural texture
-         * @returns a serialized starfield procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/starfield/index.ts

@@ -0,0 +1 @@
+export * from "./starfieldProceduralTexture";

proceduralTexturesLibrary/src/starfield/starfieldProceduralTexture.ts

@@ -0,0 +1,170 @@
+import { Effect, ProceduralTexture, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["starfieldProceduralTexturePixelShader"] = require("./starfieldProceduralTexture.fragment.fx");
+
+export class StarfieldProceduralTexture extends ProceduralTexture {
+    private _time = 1;
+    private _alpha = 0.5;
+    private _beta = 0.8;
+    private _zoom = 0.8;
+    private _formuparam = 0.53;
+    private _stepsize = 0.1;
+    private _tile = 0.850;
+    private _brightness = 0.0015;
+    private _darkmatter = 0.400;
+    private _distfading = 0.730;
+    private _saturation = 0.850;
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "starfieldProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("time", this._time);
+        this.setFloat("alpha", this._alpha);
+        this.setFloat("beta", this._beta);
+        this.setFloat("zoom", this._zoom);
+        this.setFloat("formuparam", this._formuparam);
+        this.setFloat("stepsize", this._stepsize);
+        this.setFloat("tile", this._tile);
+        this.setFloat("brightness", this._brightness);
+        this.setFloat("darkmatter", this._darkmatter);
+        this.setFloat("distfading", this._distfading);
+        this.setFloat("saturation", this._saturation);
+    }
+
+    @serialize()
+    public get time(): number {
+        return this._time;
+    }
+
+    public set time(value: number) {
+        this._time = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get alpha(): number {
+        return this._alpha;
+    }
+
+    public set alpha(value: number) {
+        this._alpha = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get beta(): number {
+        return this._beta;
+    }
+
+    public set beta(value: number) {
+        this._beta = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get formuparam(): number {
+        return this._formuparam;
+    }
+
+    public set formuparam(value: number) {
+        this._formuparam = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get stepsize(): number {
+        return this._stepsize;
+    }
+
+    public set stepsize(value: number) {
+        this._stepsize = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get zoom(): number {
+        return this._zoom;
+    }
+
+    public set zoom(value: number) {
+        this._zoom = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get tile(): number {
+        return this._tile;
+    }
+
+    public set tile(value: number) {
+        this._tile = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get brightness(): number {
+        return this._brightness;
+    }
+
+    public set brightness(value: number) {
+        this._brightness = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get darkmatter(): number {
+        return this._darkmatter;
+    }
+
+    public set darkmatter(value: number) {
+        this._darkmatter = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get distfading(): number {
+        return this._distfading;
+    }
+
+    public set distfading(value: number) {
+        this._distfading = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get saturation(): number {
+        return this._saturation;
+    }
+
+    public set saturation(value: number) {
+        this._saturation = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this starfield procedural texture
+     * @returns a serialized starfield procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/src/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "module": "commonjs",
-    "target": "es5",
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,    
-    "strictNullChecks": true
-  }
-}

proceduralTexturesLibrary/src/wood/babylon.woodProceduralTexture.ts

@@ -1,62 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class WoodProceduralTexture extends ProceduralTexture {
-        private _ampScale: number = 100.0;
-        private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("ampScale", this._ampScale);
-            this.setColor3("woodColor", this._woodColor);
-        }
-
-        @serialize()
-        public get ampScale(): number {
-            return this._ampScale;
-        }
-
-        public set ampScale(value: number) {
-            this._ampScale = value;
-            this.updateShaderUniforms();
-        }
-
-        @serializeAsColor3()
-        public get woodColor(): Color3 {
-            return this._woodColor;
-        }
-
-        public set woodColor(value: Color3) {
-            this._woodColor = value;
-            this.updateShaderUniforms();
-        }
-
-        /**
-         * Serializes this wood procedural texture
-         * @returns a serialized wood procedural texture object
-         */
-        public serialize(): any {
-            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
-            serializationObject.customType = "BABYLON.WoodProceduralTexture";
-
-            return serializationObject;
-        }
-
-        /**
-         * 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
-         */
-        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture {
-            var texture = SerializationHelper.Parse(() => new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
-
-            return texture;
-        }
-    }
-}

proceduralTexturesLibrary/src/wood/index.ts

@@ -0,0 +1 @@
+export * from "./woodProceduralTexture";

proceduralTexturesLibrary/src/wood/woodProceduralTexture.ts

@@ -0,0 +1,62 @@
+import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
+
+Effect.ShadersStore["woodProceduralTexturePixelShader"] = require("./woodProceduralTexture.fragment.fx");
+
+export class WoodProceduralTexture extends ProceduralTexture {
+    private _ampScale: number = 100.0;
+    private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
+
+    constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+        super(name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
+        this.updateShaderUniforms();
+    }
+
+    public updateShaderUniforms() {
+        this.setFloat("ampScale", this._ampScale);
+        this.setColor3("woodColor", this._woodColor);
+    }
+
+    @serialize()
+    public get ampScale(): number {
+        return this._ampScale;
+    }
+
+    public set ampScale(value: number) {
+        this._ampScale = value;
+        this.updateShaderUniforms();
+    }
+
+    @serializeAsColor3()
+    public get woodColor(): Color3 {
+        return this._woodColor;
+    }
+
+    public set woodColor(value: Color3) {
+        this._woodColor = value;
+        this.updateShaderUniforms();
+    }
+
+    /**
+     * Serializes this wood procedural texture
+     * @returns a serialized wood procedural texture object
+     */
+    public serialize(): any {
+        var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+        serializationObject.customType = "BABYLON.WoodProceduralTexture";
+
+        return serializationObject;
+    }
+
+    /**
+     * 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
+     */
+    public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture {
+        var texture = SerializationHelper.Parse(() => new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+        return texture;
+    }
+}

proceduralTexturesLibrary/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+      "experimentalDecorators": true,
+      "module": "commonjs",
+      "target": "es5",
+      "noImplicitAny": true,
+      "noImplicitReturns": true,
+      "noImplicitThis": true,
+      "noUnusedLocals": true,
+      "strictNullChecks": true,
+      "declaration": true,
+      "sourceMap": true,
+      "lib": [
+          "es5",
+          "dom",
+          "es2015.promise",
+          "es2015.collection",
+          "es2015.iterable"
+      ],
+      "skipDefaultLibCheck": true,
+      "skipLibCheck": true,
+      "baseUrl": "./src/",
+      "rootDir": "./src/",
+      "paths": {
+          "babylonjs": [
+              "../../dist/preview release/babylon.d.ts"
+          ]
+      },
+      "outDir": "./build"
+  }
+}

proceduralTexturesLibrary/webpack.config.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const webpack = require('webpack');
+const DtsBundleWebpack = require('dts-bundle-webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = {
+    context: __dirname,
+    entry: {
+        'babylonjs-procedural-textures': path.resolve(__dirname, './src/legacy.ts'),
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist/preview release/gui'),
+        filename: 'babylon.proceduralTextures.min.js',
+        libraryTarget: 'umd',
+        library: {
+            root: ["PROCEDURALTEXTURESLIB"],
+            amd: "babylonjs-procedural-textures",
+            commonjs: "babylonjs-procedural-textures"
+        },
+        umdNamedDefine: true,
+        //devtoolModuleFilenameTemplate: "[absolute-resource-path]"
+    },
+    resolve: {
+        extensions: [".js", '.ts']
+    },
+    externals: {
+        babylonjs: {
+            root: "BABYLON",
+            commonjs: "babylonjs",
+            commonjs2: "babylonjs",
+            amd: "babylonjs"
+        }
+    },
+    devtool: "source-map",
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            loader: "ts-loader",
+            exclude: /node_modules/
+        },
+        {
+            test: /\.fx$/,
+            use: [{
+                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
+            }]
+        }]
+    },
+    mode: "production",
+    devServer: {
+        contentBase: path.join(__dirname, "dist"),
+        compress: false,
+        //open: true,
+        port: 9000
+    },
+    plugins: [
+        new CleanWebpackPlugin([
+            path.resolve(__dirname, './src/**/*.js'),
+            path.resolve(__dirname, './src/**/*.map')
+        ]),
+        // moved out of here due to the way gulp works...
+        /*new DtsBundleWebpack({
+            name: "babylonjs-gui",
+            main: path.resolve(__dirname, '../dist/preview release/gui/build/index.d.ts'),
+            out: path.resolve(__dirname, '../dist/preview release/gui/babylon.gui.module.d.ts'),
+            baseDir: path.resolve(__dirname, '../dist/preview release/gui/build/'),
+            headerText: "BabylonJS GUI"
+        }),*/
+        new webpack.WatchIgnorePlugin([
+            /\.js$/,
+            /\.d\.ts$/
+        ])
+    ],
+    watchOptions: {
+        ignored: [path.resolve(__dirname, './dist/**/*.*'), 'node_modules']
+    }
+}