Mat Lib Shaders

.gitignore

@@ -162,6 +162,8 @@ node_modules
 !dist/**/*.d.ts
 !dist/**/*.js.map
 !lib.d.ts
+*.fragment.ts
+*.vertex.ts
 
 # Split declaration file
 !ISplit.d.ts

.vscode/settings.json

@@ -25,7 +25,8 @@
         "**/*.js": {
             "when": "$(basename).ts"
         },
-        "**/*.fx.ts": false,
+        "**/*.fragment.ts": false,
+        "**/*.vertex.ts": false
     },
     "files.associations": {
         "*.fx": "glsl"
@@ -42,7 +43,8 @@
             "when": "$(basename).ts"
         },
         "**/*.d.ts": true,
-        "**/*.fx.ts": true,
+        "**/*.fragment.ts": true,
+        "**/*.vertex.ts": true,
         "assets": true
     },
     "editor.tabSize": 4,

Tools/Gulp/helpers/gulp-processShaders.js

@@ -37,7 +37,7 @@ function main() {
             let normalized = path.normalize(file.path);
             let directory = path.dirname(normalized);
             let shaderName = getShaderName(filename);
-            let tsFilename = filename.replace('.fx', '.fx.ts');
+            let tsFilename = filename.replace('.fx', '.ts');
             let data = file.contents.toString();
 
             // Trailing whitespace...

Tools/Gulp/tasks/gulpTasks-tsLint.js

@@ -24,7 +24,7 @@ var config = require("../config.json");
  * TsLint all typescript files from the src directory.
  */
 gulp.task("typescript-tsLint", function() {
-    const dtsFilter = filter(['**', '!**/*.d.ts', '!**/*.fx.ts'], { restore: false });
+    const dtsFilter = filter(['**', '!**/*.d.ts', '!**/*.fragment.ts', '!**/*.vertex.ts'], { restore: false });
     return gulp.src(config.typescript)
         .pipe(dtsFilter)
         .pipe(gulpTslint(tsLintConfig))
@@ -35,7 +35,7 @@ gulp.task("typescript-tsLint", function() {
  * TsLint all typescript files from the src directory.
  */
 var tsLintExternalLibrary = function(library, settings, watch) {
-    const fxFilter = filter(['**', '!**/*.fx.ts'], { restore: false });
+    const fxFilter = filter(['**', '!**/*.fragment.ts', '!**/*.vertex.ts'], { restore: false });
     return gulp.src((settings.build.srcDirectory) + "/**/*.ts")
         .pipe(fxFilter)
         .pipe(gulpTslint(tsLintConfig))

dist/preview release/materialsLibrary/babylon.customMaterial.js

@@ -1,192 +1,392 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("babylonjs"));
+	else if(typeof define === 'function' && define.amd)
+		define("babylonjs-materials", ["babylonjs"], factory);
+	else if(typeof exports === 'object')
+		exports["babylonjs-materials"] = factory(require("babylonjs"));
+	else
+		root["MATLIB"] = factory(root["BABYLON"]);
+})(window, function(__WEBPACK_EXTERNAL_MODULE_babylonjs__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./legacy/legacy-custom.ts");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "../node_modules/webpack/buildin/global.js":
+/*!*************************************************!*\
+  !*** ../node_modules/webpack/buildin/global.js ***!
+  \*************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
 })();
-var BABYLON;
-(function (BABYLON) {
-    var CustomShaderStructure = /** @class */ (function () {
-        function CustomShaderStructure() {
-        }
-        return CustomShaderStructure;
-    }());
-    BABYLON.CustomShaderStructure = CustomShaderStructure;
-    var ShaderSpecialParts = /** @class */ (function () {
-        function ShaderSpecialParts() {
-        }
-        return ShaderSpecialParts;
-    }());
-    BABYLON.ShaderSpecialParts = ShaderSpecialParts;
-    var CustomMaterial = /** @class */ (function (_super) {
-        __extends(CustomMaterial, _super);
-        function CustomMaterial(name, scene) {
-            var _this = _super.call(this, name, scene) || this;
-            _this.CustomParts = new ShaderSpecialParts();
-            _this.customShaderNameResolve = _this.Builder;
-            _this.FragmentShader = BABYLON.Effect.ShadersStore["defaultPixelShader"];
-            _this.VertexShader = BABYLON.Effect.ShadersStore["defaultVertexShader"];
-            return _this;
-        }
-        CustomMaterial.prototype.AttachAfterBind = function (mesh, effect) {
-            for (var el in this._newUniformInstances) {
-                var ea = el.toString().split('-');
-                if (ea[0] == 'vec2') {
-                    effect.setVector2(ea[1], this._newUniformInstances[el]);
-                }
-                else if (ea[0] == 'vec3') {
-                    effect.setVector3(ea[1], this._newUniformInstances[el]);
-                }
-                else if (ea[0] == 'vec4') {
-                    effect.setVector4(ea[1], this._newUniformInstances[el]);
-                }
-                else if (ea[0] == 'mat4') {
-                    effect.setMatrix(ea[1], this._newUniformInstances[el]);
-                }
-                else if (ea[0] == 'float') {
-                    effect.setFloat(ea[1], this._newUniformInstances[el]);
-                }
-            }
-            for (var el in this._newSamplerInstances) {
-                var ea = el.toString().split('-');
-                if (ea[0] == 'sampler2D' && this._newSamplerInstances[el].isReady && this._newSamplerInstances[el].isReady()) {
-                    effect.setTexture(ea[1], this._newSamplerInstances[el]);
-                }
-            }
-        };
-        CustomMaterial.prototype.ReviewUniform = function (name, arr) {
-            if (name == "uniform") {
-                for (var ind in this._newUniforms) {
-                    if (this._customUniform[ind].indexOf('sampler') == -1) {
-                        arr.push(this._newUniforms[ind]);
-                    }
-                }
-            }
-            if (name == "sampler") {
-                for (var ind in this._newUniforms) {
-                    if (this._customUniform[ind].indexOf('sampler') != -1) {
-                        arr.push(this._newUniforms[ind]);
-                    }
-                }
-            }
-            return arr;
-        };
-        CustomMaterial.prototype.Builder = function (shaderName, uniforms, uniformBuffers, samplers, defines) {
-            var _this = this;
-            if (this._isCreatedShader) {
-                return this._createdShaderName;
-            }
-            this._isCreatedShader = false;
-            CustomMaterial.ShaderIndexer++;
-            var name = "custom_" + CustomMaterial.ShaderIndexer;
-            this.ReviewUniform("uniform", uniforms);
-            this.ReviewUniform("sampler", samplers);
-            var fn_afterBind = this._afterBind.bind(this);
-            this._afterBind = function (m, e) {
-                if (!e) {
-                    return;
-                }
-                _this.AttachAfterBind(m, e);
-                try {
-                    fn_afterBind(m, e);
-                }
-                catch (e) { }
-            };
-            BABYLON.Effect.ShadersStore[name + "VertexShader"] = this.VertexShader
-                .replace('#define CUSTOM_VERTEX_BEGIN', (this.CustomParts.Vertex_Begin ? this.CustomParts.Vertex_Begin : ""))
-                .replace('#define CUSTOM_VERTEX_DEFINITIONS', (this._customUniform ? this._customUniform.join("\n") : "") + (this.CustomParts.Vertex_Definitions ? this.CustomParts.Vertex_Definitions : ""))
-                .replace('#define CUSTOM_VERTEX_MAIN_BEGIN', (this.CustomParts.Vertex_MainBegin ? this.CustomParts.Vertex_MainBegin : ""))
-                .replace('#define CUSTOM_VERTEX_UPDATE_POSITION', (this.CustomParts.Vertex_Before_PositionUpdated ? this.CustomParts.Vertex_Before_PositionUpdated : ""))
-                .replace('#define CUSTOM_VERTEX_UPDATE_NORMAL', (this.CustomParts.Vertex_Before_NormalUpdated ? this.CustomParts.Vertex_Before_NormalUpdated : ""));
-            // #define CUSTOM_VERTEX_MAIN_END
-            BABYLON.Effect.ShadersStore[name + "PixelShader"] = this.FragmentShader
-                .replace('#define CUSTOM_FRAGMENT_BEGIN', (this.CustomParts.Fragment_Begin ? this.CustomParts.Fragment_Begin : ""))
-                .replace('#define CUSTOM_FRAGMENT_MAIN_BEGIN', (this.CustomParts.Fragment_MainBegin ? this.CustomParts.Fragment_MainBegin : ""))
-                .replace('#define CUSTOM_FRAGMENT_DEFINITIONS', (this._customUniform ? this._customUniform.join("\n") : "") + (this.CustomParts.Fragment_Definitions ? this.CustomParts.Fragment_Definitions : ""))
-                .replace('#define CUSTOM_FRAGMENT_UPDATE_DIFFUSE', (this.CustomParts.Fragment_Custom_Diffuse ? this.CustomParts.Fragment_Custom_Diffuse : ""))
-                .replace('#define CUSTOM_FRAGMENT_UPDATE_ALPHA', (this.CustomParts.Fragment_Custom_Alpha ? this.CustomParts.Fragment_Custom_Alpha : ""))
-                .replace('#define CUSTOM_FRAGMENT_BEFORE_FRAGCOLOR', (this.CustomParts.Fragment_Before_FragColor ? this.CustomParts.Fragment_Before_FragColor : ""));
-            // #define CUSTOM_FRAGMENT_BEFORE_LIGHTS
-            // #define CUSTOM_FRAGMENT_BEFORE_FOG
-            this._isCreatedShader = true;
-            this._createdShaderName = name;
-            return name;
-        };
-        CustomMaterial.prototype.AddUniform = function (name, kind, param) {
-            if (!this._customUniform) {
-                this._customUniform = new Array();
-                this._newUniforms = new Array();
-                this._newSamplerInstances = new Array();
-                this._newUniformInstances = new Array();
-            }
-            if (param) {
-                if (kind.indexOf("sampler") == -1) {
-                    this._newUniformInstances[kind + "-" + name] = param;
-                }
-                else {
-                    this._newUniformInstances[kind + "-" + name] = param;
-                }
-            }
-            this._customUniform.push("uniform " + kind + " " + name + ";");
-            this._newUniforms.push(name);
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_Begin = function (shaderPart) {
-            this.CustomParts.Fragment_Begin = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_Definitions = function (shaderPart) {
-            this.CustomParts.Fragment_Definitions = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_MainBegin = function (shaderPart) {
-            this.CustomParts.Fragment_MainBegin = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_Custom_Diffuse = function (shaderPart) {
-            this.CustomParts.Fragment_Custom_Diffuse = shaderPart.replace("result", "diffuseColor");
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_Custom_Alpha = function (shaderPart) {
-            this.CustomParts.Fragment_Custom_Alpha = shaderPart.replace("result", "alpha");
-            return this;
-        };
-        CustomMaterial.prototype.Fragment_Before_FragColor = function (shaderPart) {
-            this.CustomParts.Fragment_Before_FragColor = shaderPart.replace("result", "color");
-            return this;
-        };
-        CustomMaterial.prototype.Vertex_Begin = function (shaderPart) {
-            this.CustomParts.Vertex_Begin = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Vertex_Definitions = function (shaderPart) {
-            this.CustomParts.Vertex_Definitions = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Vertex_MainBegin = function (shaderPart) {
-            this.CustomParts.Vertex_MainBegin = shaderPart;
-            return this;
-        };
-        CustomMaterial.prototype.Vertex_Before_PositionUpdated = function (shaderPart) {
-            this.CustomParts.Vertex_Before_PositionUpdated = shaderPart.replace("result", "positionUpdated");
-            return this;
-        };
-        CustomMaterial.prototype.Vertex_Before_NormalUpdated = function (shaderPart) {
-            this.CustomParts.Vertex_Before_NormalUpdated = shaderPart.replace("result", "normalUpdated");
-            return this;
-        };
-        CustomMaterial.ShaderIndexer = 1;
-        return CustomMaterial;
-    }(BABYLON.StandardMaterial));
-    BABYLON.CustomMaterial = CustomMaterial;
-})(BABYLON || (BABYLON = {}));
-
-//# sourceMappingURL=babylon.customMaterial.js.map
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1, eval)("this");
+} catch (e) {
+	// This works if the window reference is available
+	if (typeof window === "object") g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
+
+
+/***/ }),
+
+/***/ "./legacy/legacy-custom.ts":
+/*!*********************************!*\
+  !*** ./legacy/legacy-custom.ts ***!
+  \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* WEBPACK VAR INJECTION */(function(global) {
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+var MatLib = __webpack_require__(/*! ../src/custom/index */ "./src/custom/index.ts");
+/**
+ * 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") {
+    for (var key in MatLib) {
+        globalObject.BABYLON[key] = MatLib[key];
+    }
+}
+__export(__webpack_require__(/*! ../src/custom/index */ "./src/custom/index.ts"));
+
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../node_modules/webpack/buildin/global.js */ "../node_modules/webpack/buildin/global.js")))
+
+/***/ }),
+
+/***/ "./src/custom/customMaterial.ts":
+/*!**************************************!*\
+  !*** ./src/custom/customMaterial.ts ***!
+  \**************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var babylonjs_1 = __webpack_require__(/*! babylonjs */ "babylonjs");
+var CustomShaderStructure = /** @class */ (function () {
+    function CustomShaderStructure() {
+    }
+    return CustomShaderStructure;
+}());
+exports.CustomShaderStructure = CustomShaderStructure;
+var ShaderSpecialParts = /** @class */ (function () {
+    function ShaderSpecialParts() {
+    }
+    return ShaderSpecialParts;
+}());
+exports.ShaderSpecialParts = ShaderSpecialParts;
+var CustomMaterial = /** @class */ (function (_super) {
+    __extends(CustomMaterial, _super);
+    function CustomMaterial(name, scene) {
+        var _this = _super.call(this, name, scene) || this;
+        _this.CustomParts = new ShaderSpecialParts();
+        _this.customShaderNameResolve = _this.Builder;
+        _this.FragmentShader = BABYLON.Effect.ShadersStore["defaultPixelShader"];
+        _this.VertexShader = BABYLON.Effect.ShadersStore["defaultVertexShader"];
+        return _this;
+    }
+    CustomMaterial.prototype.AttachAfterBind = function (mesh, effect) {
+        for (var el in this._newUniformInstances) {
+            var ea = el.toString().split('-');
+            if (ea[0] == 'vec2') {
+                effect.setVector2(ea[1], this._newUniformInstances[el]);
+            }
+            else if (ea[0] == 'vec3') {
+                effect.setVector3(ea[1], this._newUniformInstances[el]);
+            }
+            else if (ea[0] == 'vec4') {
+                effect.setVector4(ea[1], this._newUniformInstances[el]);
+            }
+            else if (ea[0] == 'mat4') {
+                effect.setMatrix(ea[1], this._newUniformInstances[el]);
+            }
+            else if (ea[0] == 'float') {
+                effect.setFloat(ea[1], this._newUniformInstances[el]);
+            }
+        }
+        for (var el in this._newSamplerInstances) {
+            var ea = el.toString().split('-');
+            if (ea[0] == 'sampler2D' && this._newSamplerInstances[el].isReady && this._newSamplerInstances[el].isReady()) {
+                effect.setTexture(ea[1], this._newSamplerInstances[el]);
+            }
+        }
+    };
+    CustomMaterial.prototype.ReviewUniform = function (name, arr) {
+        if (name == "uniform") {
+            for (var ind in this._newUniforms) {
+                if (this._customUniform[ind].indexOf('sampler') == -1) {
+                    arr.push(this._newUniforms[ind]);
+                }
+            }
+        }
+        if (name == "sampler") {
+            for (var ind in this._newUniforms) {
+                if (this._customUniform[ind].indexOf('sampler') != -1) {
+                    arr.push(this._newUniforms[ind]);
+                }
+            }
+        }
+        return arr;
+    };
+    CustomMaterial.prototype.Builder = function (shaderName, uniforms, uniformBuffers, samplers, defines) {
+        var _this = this;
+        if (this._isCreatedShader) {
+            return this._createdShaderName;
+        }
+        this._isCreatedShader = false;
+        CustomMaterial.ShaderIndexer++;
+        var name = "custom_" + CustomMaterial.ShaderIndexer;
+        this.ReviewUniform("uniform", uniforms);
+        this.ReviewUniform("sampler", samplers);
+        var fn_afterBind = this._afterBind.bind(this);
+        this._afterBind = function (m, e) {
+            if (!e) {
+                return;
+            }
+            _this.AttachAfterBind(m, e);
+            try {
+                fn_afterBind(m, e);
+            }
+            catch (e) { }
+        };
+        BABYLON.Effect.ShadersStore[name + "VertexShader"] = this.VertexShader
+            .replace('#define CUSTOM_VERTEX_BEGIN', (this.CustomParts.Vertex_Begin ? this.CustomParts.Vertex_Begin : ""))
+            .replace('#define CUSTOM_VERTEX_DEFINITIONS', (this._customUniform ? this._customUniform.join("\n") : "") + (this.CustomParts.Vertex_Definitions ? this.CustomParts.Vertex_Definitions : ""))
+            .replace('#define CUSTOM_VERTEX_MAIN_BEGIN', (this.CustomParts.Vertex_MainBegin ? this.CustomParts.Vertex_MainBegin : ""))
+            .replace('#define CUSTOM_VERTEX_UPDATE_POSITION', (this.CustomParts.Vertex_Before_PositionUpdated ? this.CustomParts.Vertex_Before_PositionUpdated : ""))
+            .replace('#define CUSTOM_VERTEX_UPDATE_NORMAL', (this.CustomParts.Vertex_Before_NormalUpdated ? this.CustomParts.Vertex_Before_NormalUpdated : ""));
+        // #define CUSTOM_VERTEX_MAIN_END
+        BABYLON.Effect.ShadersStore[name + "PixelShader"] = this.FragmentShader
+            .replace('#define CUSTOM_FRAGMENT_BEGIN', (this.CustomParts.Fragment_Begin ? this.CustomParts.Fragment_Begin : ""))
+            .replace('#define CUSTOM_FRAGMENT_MAIN_BEGIN', (this.CustomParts.Fragment_MainBegin ? this.CustomParts.Fragment_MainBegin : ""))
+            .replace('#define CUSTOM_FRAGMENT_DEFINITIONS', (this._customUniform ? this._customUniform.join("\n") : "") + (this.CustomParts.Fragment_Definitions ? this.CustomParts.Fragment_Definitions : ""))
+            .replace('#define CUSTOM_FRAGMENT_UPDATE_DIFFUSE', (this.CustomParts.Fragment_Custom_Diffuse ? this.CustomParts.Fragment_Custom_Diffuse : ""))
+            .replace('#define CUSTOM_FRAGMENT_UPDATE_ALPHA', (this.CustomParts.Fragment_Custom_Alpha ? this.CustomParts.Fragment_Custom_Alpha : ""))
+            .replace('#define CUSTOM_FRAGMENT_BEFORE_FRAGCOLOR', (this.CustomParts.Fragment_Before_FragColor ? this.CustomParts.Fragment_Before_FragColor : ""));
+        // #define CUSTOM_FRAGMENT_BEFORE_LIGHTS
+        // #define CUSTOM_FRAGMENT_BEFORE_FOG
+        this._isCreatedShader = true;
+        this._createdShaderName = name;
+        return name;
+    };
+    CustomMaterial.prototype.AddUniform = function (name, kind, param) {
+        if (!this._customUniform) {
+            this._customUniform = new Array();
+            this._newUniforms = new Array();
+            this._newSamplerInstances = new Array();
+            this._newUniformInstances = new Array();
+        }
+        if (param) {
+            if (kind.indexOf("sampler") == -1) {
+                this._newUniformInstances[kind + "-" + name] = param;
+            }
+            else {
+                this._newUniformInstances[kind + "-" + name] = param;
+            }
+        }
+        this._customUniform.push("uniform " + kind + " " + name + ";");
+        this._newUniforms.push(name);
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_Begin = function (shaderPart) {
+        this.CustomParts.Fragment_Begin = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_Definitions = function (shaderPart) {
+        this.CustomParts.Fragment_Definitions = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_MainBegin = function (shaderPart) {
+        this.CustomParts.Fragment_MainBegin = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_Custom_Diffuse = function (shaderPart) {
+        this.CustomParts.Fragment_Custom_Diffuse = shaderPart.replace("result", "diffuseColor");
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_Custom_Alpha = function (shaderPart) {
+        this.CustomParts.Fragment_Custom_Alpha = shaderPart.replace("result", "alpha");
+        return this;
+    };
+    CustomMaterial.prototype.Fragment_Before_FragColor = function (shaderPart) {
+        this.CustomParts.Fragment_Before_FragColor = shaderPart.replace("result", "color");
+        return this;
+    };
+    CustomMaterial.prototype.Vertex_Begin = function (shaderPart) {
+        this.CustomParts.Vertex_Begin = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Vertex_Definitions = function (shaderPart) {
+        this.CustomParts.Vertex_Definitions = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Vertex_MainBegin = function (shaderPart) {
+        this.CustomParts.Vertex_MainBegin = shaderPart;
+        return this;
+    };
+    CustomMaterial.prototype.Vertex_Before_PositionUpdated = function (shaderPart) {
+        this.CustomParts.Vertex_Before_PositionUpdated = shaderPart.replace("result", "positionUpdated");
+        return this;
+    };
+    CustomMaterial.prototype.Vertex_Before_NormalUpdated = function (shaderPart) {
+        this.CustomParts.Vertex_Before_NormalUpdated = shaderPart.replace("result", "normalUpdated");
+        return this;
+    };
+    CustomMaterial.ShaderIndexer = 1;
+    return CustomMaterial;
+}(babylonjs_1.StandardMaterial));
+exports.CustomMaterial = CustomMaterial;
+
+
+/***/ }),
+
+/***/ "./src/custom/index.ts":
+/*!*****************************!*\
+  !*** ./src/custom/index.ts ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(__webpack_require__(/*! ./customMaterial */ "./src/custom/customMaterial.ts"));
+
+
+/***/ }),
+
+/***/ "babylonjs":
+/*!****************************************************************************************************!*\
+  !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
+  \****************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs__;
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=babylon.customMaterial.js.map

dist/preview release/materialsLibrary/babylon.waterMaterial.js

@@ -175,10 +175,10 @@ __export(__webpack_require__(/*! ./waterMaterial */ "./src/water/waterMaterial.t
 
 /***/ }),
 
-/***/ "./src/water/water.fragment.fx.ts":
-/*!****************************************!*\
-  !*** ./src/water/water.fragment.fx.ts ***!
-  \****************************************/
+/***/ "./src/water/water.fragment.ts":
+/*!*************************************!*\
+  !*** ./src/water/water.fragment.ts ***!
+  \*************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -195,10 +195,10 @@ babylonjs_1.Effect.ShadersStore[name] = shader;
 
 /***/ }),
 
-/***/ "./src/water/water.vertex.fx.ts":
-/*!**************************************!*\
-  !*** ./src/water/water.vertex.fx.ts ***!
-  \**************************************/
+/***/ "./src/water/water.vertex.ts":
+/*!***********************************!*\
+  !*** ./src/water/water.vertex.ts ***!
+  \***********************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -245,8 +245,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var babylonjs_1 = __webpack_require__(/*! babylonjs */ "babylonjs");
-__webpack_require__(/*! ./water.fragment.fx */ "./src/water/water.fragment.fx.ts");
-__webpack_require__(/*! ./water.vertex.fx */ "./src/water/water.vertex.fx.ts");
+__webpack_require__(/*! ./water.fragment */ "./src/water/water.fragment.ts");
+__webpack_require__(/*! ./water.vertex */ "./src/water/water.vertex.ts");
 var WaterMaterialDefines = /** @class */ (function (_super) {
     __extends(WaterMaterialDefines, _super);
     function WaterMaterialDefines() {

dist/preview release/materialsLibrary/babylon.waterMaterial.min.js

@@ -175,10 +175,10 @@ __export(__webpack_require__(/*! ./waterMaterial */ "./src/water/waterMaterial.t
 
 /***/ }),
 
-/***/ "./src/water/water.fragment.fx.ts":
-/*!****************************************!*\
-  !*** ./src/water/water.fragment.fx.ts ***!
-  \****************************************/
+/***/ "./src/water/water.fragment.ts":
+/*!*************************************!*\
+  !*** ./src/water/water.fragment.ts ***!
+  \*************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -195,10 +195,10 @@ babylonjs_1.Effect.ShadersStore[name] = shader;
 
 /***/ }),
 
-/***/ "./src/water/water.vertex.fx.ts":
-/*!**************************************!*\
-  !*** ./src/water/water.vertex.fx.ts ***!
-  \**************************************/
+/***/ "./src/water/water.vertex.ts":
+/*!***********************************!*\
+  !*** ./src/water/water.vertex.ts ***!
+  \***********************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -245,8 +245,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var babylonjs_1 = __webpack_require__(/*! babylonjs */ "babylonjs");
-__webpack_require__(/*! ./water.fragment.fx */ "./src/water/water.fragment.fx.ts");
-__webpack_require__(/*! ./water.vertex.fx */ "./src/water/water.vertex.fx.ts");
+__webpack_require__(/*! ./water.fragment */ "./src/water/water.fragment.ts");
+__webpack_require__(/*! ./water.vertex */ "./src/water/water.vertex.ts");
 var WaterMaterialDefines = /** @class */ (function (_super) {
     __extends(WaterMaterialDefines, _super);
     function WaterMaterialDefines() {

materialsLibrary/src/cell/cellMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, expandToProperty, BaseTexture, serializeAsColor3, Scene, Color3, serialize, AbstractMesh, Nullable, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./cell.fragment.fx";
-import "./cell.vertex.fx";
+import "./cell.fragment";
+import "./cell.vertex";
 
 class CellMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/fire/fireMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, Nullable, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, Scene, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, Matrix, Mesh, IAnimatable, SerializationHelper, Tags, Texture, } from "babylonjs";
 
-import "./fire.fragment.fx";
-import "./fire.vertex.fx";
+import "./fire.fragment";
+import "./fire.vertex";
 
 class FireMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/fur/furMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, serializeAsVector3, Vector3, DynamicTexture, AbstractMesh, Scene, Nullable, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper, Texture, Tags } from "babylonjs";
 
-import "./fur.fragment.fx";
-import "./fur.vertex.fx";
+import "./fur.fragment";
+import "./fur.vertex";
 
 class FurMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/gradient/gradientMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./gradient.fragment.fx";
-import "./gradient.vertex.fx";
+import "./gradient.fragment";
+import "./gradient.vertex";
 
 class GradientMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/grid/gridMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, serializeAsColor3, Color3, serialize, Vector3, Vector4, Scene, AbstractMesh, SubMesh, MaterialHelper, VertexBuffer, Matrix, Mesh, SerializationHelper } from "babylonjs";
 
-import "./grid.fragment.fx";
-import "./grid.vertex.fx";
+import "./grid.fragment";
+import "./grid.vertex";
 
 class GridMaterialDefines extends MaterialDefines {
     public TRANSPARENT = false;

materialsLibrary/src/lava/lavaMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./lava.fragment.fx";
-import "./lava.vertex.fx";
+import "./lava.fragment";
+import "./lava.vertex";
 
 class LavaMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/mix/mixMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, Texture, serializeAsColor3, Color3, serialize, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./mix.fragment.fx";
-import "./mix.vertex.fx";
+import "./mix.fragment";
+import "./mix.vertex";
 
 class MixMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/normal/normalMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./normal.fragment.fx";
-import "./normal.vertex.fx";
+import "./normal.fragment";
+import "./normal.vertex";
 
 class NormalMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/shadowOnly/shadowOnlyMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, IShadowLight, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, SerializationHelper } from "babylonjs";
 
-import "./shadowOnly.fragment.fx";
-import "./shadowOnly.vertex.fx";
+import "./shadowOnly.fragment";
+import "./shadowOnly.vertex";
 
 class ShadowOnlyMaterialDefines extends MaterialDefines {
     public CLIPPLANE = false;

materialsLibrary/src/simple/simpleMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./simple.fragment.fx";
-import "./simple.vertex.fx";
+import "./simple.fragment";
+import "./simple.vertex";
 
 class SimpleMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/sky/skyMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serialize, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, MaterialHelper, EffectFallbacks, VertexBuffer, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./sky.fragment.fx";
-import "./sky.vertex.fx";
+import "./sky.fragment";
+import "./sky.vertex";
 
 class SkyMaterialDefines extends MaterialDefines {
     public CLIPPLANE = false;

materialsLibrary/src/terrain/terrainMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, Texture, serializeAsColor3, Color3, serialize, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./terrain.fragment.fx";
-import "./terrain.vertex.fx";
+import "./terrain.fragment";
+import "./terrain.vertex";
 
 class TerrainMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/triPlanar/triPlanarMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serialize, serializeAsColor3, Color3, Scene, Nullable, AbstractMesh, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Matrix, Mesh, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./triplanar.fragment.fx";
-import "./triplanar.vertex.fx";
+import "./triplanar.fragment";
+import "./triplanar.vertex";
 
 class TriPlanarMaterialDefines extends MaterialDefines {
     public DIFFUSEX = false;

materialsLibrary/src/water/waterMaterial.ts

@@ -1,7 +1,7 @@
 import { MaterialDefines, PushMaterial, serializeAsTexture, BaseTexture, expandToProperty, serializeAsColor3, Color3, serialize, serializeAsVector2, Vector2, SmartArray, RenderTargetTexture, Nullable, AbstractMesh, Matrix, Scene, SubMesh, StandardMaterial, MaterialHelper, EffectFallbacks, VertexBuffer, EffectCreationOptions, Mesh, Plane, Vector3, Camera, IAnimatable, SerializationHelper } from "babylonjs";
 
-import "./water.fragment.fx";
-import "./water.vertex.fx";
+import "./water.fragment";
+import "./water.vertex";
 
 class WaterMaterialDefines extends MaterialDefines {
     public BUMP = false;