Webpack Shader Processor Removal

Tools/WebpackShaderLoader/index.js

@@ -1,14 +0,0 @@
-//modified https://github.com/grieve/webpack-glsl-loader/blob/master/index.js
-let parser = require('./parser')
-
-module.exports = function (source) {
-    this.cacheable();
-    var cb = this.async();
-    parser(this, source, this.context, function (err, bld) {
-        if (err) {
-            return cb(err);
-        }
-
-        cb(null, 'module.exports = ' + JSON.stringify(bld));
-    });
-};

Tools/WebpackShaderLoader/parser.js

@@ -1,109 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-
-function parse(loader, source, context, cb) {
-    var imports = [];
-    var importPattern = /@import ([.\/\w_-]+);/gi;
-    var match = importPattern.exec(source);
-    while (match != null) {
-        imports.push({
-            key: match[1],
-            target: match[0],
-            content: ''
-        });
-        match = importPattern.exec(source);
-    }
-    source = uncomment(source);
-    processImports(loader, source, context, imports, cb);
-}
-
-var singleComment = 1;
-var multiComment = 2;
-function uncomment(str) {
-    var currentChar;
-    var nextChar;
-    var insideString = false;
-    var insideComment = 0;
-    var offset = 0;
-    var ret = '';
-     str = str.replace(/\r\n/g, '\n');
-    str = str.replace(/[ \f\t\v]+/g, ' ');
-    str = str.replace(/^\s*\n/gm, '');
-    str = str.replace(/ \+ /g, '+');
-    str = str.replace(/ \- /g, '-');
-    str = str.replace(/ \/ /g, '/');
-    str = str.replace(/ \* /g, '*');
-    str = str.replace(/ > /g, '>');
-    str = str.replace(/ < /g, '<');
-    str = str.replace(/ >= /g, '>=');
-    str = str.replace(/ <= /g, '<=');
-    str = str.replace(/ \+= /g, '+=');
-    str = str.replace(/ \-= /g, '-=');
-    str = str.replace(/ \/= /g, '/=');
-    str = str.replace(/ \*= /g, '*=');
-    str = str.replace(/ = /g, '=');
-    str = str.replace(/, /g, ',');
-    str = str.replace(/\n\n/g, '\n');
-    str = str.replace(/\n /g, '\n');
-     for (var i = 0; i < str.length; i++) {
-        currentChar = str[i];
-        nextChar = str[i + 1];
-        if (!insideComment && currentChar === '"') {
-            var escaped = str[i - 1] === '\\' && str[i - 2] !== '\\';
-            if (!escaped) {
-                insideString = !insideString;
-            }
-        }
-        if (insideString) {
-            continue;
-        }
-        if (!insideComment && currentChar + nextChar === '//') {
-            ret += str.slice(offset, i);
-            offset = i;
-            insideComment = singleComment;
-            i++;
-        } else if (insideComment === singleComment && currentChar === '\n') {
-            insideComment = 0;
-            offset = i;
-        } else if (!insideComment && currentChar + nextChar === '/*') {
-            ret += str.slice(offset, i);
-            offset = i;
-            insideComment = multiComment;
-            i++;
-            continue;
-        } else if (insideComment === multiComment && currentChar + nextChar === '*/') {
-            i++;
-            insideComment = 0;
-            offset = i + 1;
-            continue;
-        }
-    }
-    return ret + (insideComment ? '' : str.substr(offset));
-}
-
-function processImports(loader, source, context, imports, cb) {
-    if (imports.length === 0) {
-        return cb(null, source);
-    }
-    var imp = imports.pop();
-    loader.resolve(context, imp.key + '.fx', function (err, resolved) {
-        if (err) {
-            return cb(err);
-        }
-        loader.addDependency(resolved);
-        fs.readFile(resolved, 'utf-8', function (err, src) {
-            if (err) {
-                return cb(err);
-            }
-            parse(loader, src, path.dirname(resolved), function (err, bld) {
-                if (err) {
-                    return cb(err);
-                }
-                source = source.replace(imp.target, bld);
-                processImports(loader, source, context, imports, cb);
-            });
-        });
-    });
-}
-
-module.exports = parse;

Tools/WebpackShaderLoader/processShaders.js

@@ -1,49 +0,0 @@
-let glob = require('glob');
-let path = require('path');
-let fs = require('fs');
-// Usage - node .\processShaders.js ../../gui/
-let shaderProcessor = require('./parser');
-let shadersPath = process.argv[2] || '../../';
-
-let tsTemplate = `import { Effect } from "babylonjs";
-
-let shader = '';
-let name = '';
-let registerShader = false;
-##PLACEHOLDER##
-if(registerShader && name && shader) {
-    Effect.ShadersStore[name] = shader;
-}
-
-export { shader, name };
-`;
-
-glob(shadersPath + '/**/*.fx', (err, shaderFiles) => {
-    if (err) {
-        console.log('error', err);
-    } else {
-        console.log('processing shaders');
-        shaderFiles.forEach(file => {
-            let filename = path.basename(file);
-            let normalized = path.normalize(file);
-            let directory = path.dirname(normalized);
-            let shaderName = getShaderName(filename);
-            let tsFilename = filename.replace('.fx', '.fx.ts');
-            let shaderContent = fs.readFileSync(file).toString();
-            //TODO - take care of includes!!!
-            shaderProcessor(undefined, shaderContent, undefined, (err, data) => {
-                let tsContent = tsTemplate.replace('##PLACEHOLDER##', `name = '${shaderName}'; shader = \`${data}\`;  `);
-                fs.writeFileSync(directory + '/' + tsFilename, tsContent);
-            });
-        });
-    }
-})
-
-function getShaderName(filename) {
-    let parts = filename.split('.');
-    if (parts[1] !== 'fx') {
-        return parts[0] + (parts[1] === 'fragment' ? 'Pixel' : 'Vertex') + "Shader";
-    } else {
-        return parts[0];
-    }
-}

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

@@ -2858,6 +2858,8 @@ declare module 'babylonjs-gui/src/3D/controls/volumeBasedPanel' {
 
 declare module 'babylonjs-gui/src/3D/materials/fluentMaterial' {
     import { MaterialDefines, PushMaterial, Color3, Color4, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, Matrix, Mesh } from "babylonjs";
+    import "./shaders/fluent.vertex";
+    import "./shaders/fluent.fragment";
     /** @hidden */
     export class FluentMaterialDefines extends MaterialDefines {
             INNERGLOW: boolean;

gui/src/3D/materials/fluentMaterial.ts

@@ -1,9 +1,7 @@
 import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, serializeAsColor4, Color4, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, VertexBuffer, MaterialHelper, EffectCreationOptions, Matrix, Mesh, Tmp, SerializationHelper, serializeAsTexture } from "babylonjs";
 
-import { registerShader } from "./shaders/fluent";
-
-// register shaders
-registerShader();
+import "./shaders/fluent.vertex";
+import "./shaders/fluent.fragment";
 
 /** @hidden */
 export class FluentMaterialDefines extends MaterialDefines {

gui/src/3D/materials/shaders/fluent.ts

@@ -1,12 +0,0 @@
-import { Effect } from "babylonjs";
-
-const fShader = require("./fluent.fragment.fx");
-const vShader = require("./fluent.vertex.fx");
-
-export function registerShader() {
-    // register shaders
-    Effect.ShadersStore["fluentVertexShader"] = vShader;
-    Effect.ShadersStore["fluentPixelShader"] = fShader;
-}
-
-export { fShader, vShader };

gui/webpack.config.js

@@ -40,12 +40,6 @@ module.exports = {
                 configFileName: '../../gui/tsconfig.json',
                 declarationDir: '../../dist/preview release/gui/build'
             }
-        },
-        {
-            test: /\.fx$/,
-            use: [{
-                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
-            }]
         }]
     },
     mode: "production",
@@ -60,17 +54,10 @@ module.exports = {
             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$/
+            /\.d\.ts$/,
+            /\.fx$/
         ])
     ],
     watchOptions: {

postProcessLibrary/src/asciiArt/asciiArtPostProcess.ts

@@ -1,6 +1,6 @@
 import { BaseTexture, serialize, Nullable, Scene, Texture, SerializationHelper, PostProcess, Camera, Effect } from "babylonjs";
 
-Effect.ShadersStore["asciiartPixelShader"] = require("./asciiart.fragment.fx");
+import "./asciiart.fragment";
 
 /**
  * AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.

postProcessLibrary/src/digitalRain/digitalRainPostProcess.ts

@@ -1,6 +1,6 @@
 import { BaseTexture, serialize, Nullable, Scene, Texture, SerializationHelper, PostProcess, Camera, Matrix, Effect } from "babylonjs";
 
-Effect.ShadersStore["digitalrainPixelShader"] = require("./digitalrain.fragment.fx");
+import "./digitalrain.fragment";
 
 /**
  * DigitalRainFontTexture is the helper class used to easily create your digital rain font texture.

postProcessLibrary/webpack.config.js

@@ -39,12 +39,6 @@ module.exports = {
                 configFileName: '../../postProcessLibrary/tsconfig.json',
                 declarationDir: '../../dist/preview release/postProcessesLibrary/build'
             }
-        },
-        {
-            test: /\.fx$/,
-            use: [{
-                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
-            }]
         }]
     },
     mode: "production",
@@ -61,7 +55,8 @@ module.exports = {
         ]),
         new webpack.WatchIgnorePlugin([
             /\.js$/,
-            /\.d\.ts$/
+            /\.d\.ts$/,
+            /\.fx$/
         ])
     ],
     watchOptions: {

proceduralTexturesLibrary/src/brick/brickProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["brickProceduralTexturePixelShader"] = require("./brickProceduralTexture.fragment.fx");
+import "./brickProceduralTexture.fragment";
 
 export class BrickProceduralTexture extends ProceduralTexture {
     private _numberOfBricksHeight: number = 15;

proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color4, Scene, Texture, serializeAsColor4, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color4, Scene, Texture, serializeAsColor4, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["cloudProceduralTexturePixelShader"] = require("./cloudProceduralTexture.fragment.fx");
+import "./cloudProceduralTexture.fragment";
 
 export class CloudProceduralTexture extends ProceduralTexture {
     private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);

proceduralTexturesLibrary/src/fire/fireProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Vector2, Color3, Scene, Texture, serialize, serializeAsVector2, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Vector2, Color3, Scene, Texture, serialize, serializeAsVector2, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["fireProceduralTexturePixelShader"] = require("./fireProceduralTexture.fragment.fx");
+import "./fireProceduralTexture.fragment";
 
 export class FireProceduralTexture extends ProceduralTexture {
     private _time: number = 0.0;

proceduralTexturesLibrary/src/grass/grassProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["grassProceduralTexturePixelShader"] = require("./grassProceduralTexture.fragment.fx");
+import "./grassProceduralTexture.fragment";
 
 export class GrassProceduralTexture extends ProceduralTexture {
     private _grassColors: Color3[];

proceduralTexturesLibrary/src/marble/marbleProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color3, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["marbleProceduralTexturePixelShader"] = require("./marbleProceduralTexture.fragment.fx");
+import "./marbleProceduralTexture.fragment";
 
 export class MarbleProceduralTexture extends ProceduralTexture {
     private _numberOfTilesHeight: number = 3;

proceduralTexturesLibrary/src/normalMap/normalMapProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Texture, Scene, serializeAsTexture, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Texture, Scene, serializeAsTexture, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["normalMapProceduralTexturePixelShader"] = require("./normalMapProceduralTexture.fragment.fx");
+import "./normalMapProceduralTexture.fragment";
 
 export class NormalMapProceduralTexture extends ProceduralTexture {
     private _baseTexture: Texture;

proceduralTexturesLibrary/src/perlinNoise/perlinNoiseProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, serialize, Scene, Texture, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, serialize, Scene, Texture, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["perlinNoiseProceduralTexturePixelShader"] = require("./perlinNoiseProceduralTexture.fragment.fx");
+import "./perlinNoiseProceduralTexture.fragment";
 
 export class PerlinNoiseProceduralTexture extends ProceduralTexture {
     @serialize()

proceduralTexturesLibrary/src/road/roadProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color3, Scene, Texture, serializeAsColor3, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["roadProceduralTexturePixelShader"] = require("./roadProceduralTexture.fragment.fx");
+import "./roadProceduralTexture.fragment";
 
 export class RoadProceduralTexture extends ProceduralTexture {
     private _roadColor = new Color3(0.53, 0.53, 0.53);

proceduralTexturesLibrary/src/starfield/starfieldProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Scene, Texture, serialize, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["starfieldProceduralTexturePixelShader"] = require("./starfieldProceduralTexture.fragment.fx");
+import "./starfieldProceduralTexture.fragment";
 
 export class StarfieldProceduralTexture extends ProceduralTexture {
     private _time = 1;

proceduralTexturesLibrary/src/wood/woodProceduralTexture.ts

@@ -1,6 +1,6 @@
-import { Effect, ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
+import { ProceduralTexture, Color3, Scene, Texture, serialize, serializeAsColor3, SerializationHelper } from "babylonjs";
 
-Effect.ShadersStore["woodProceduralTexturePixelShader"] = require("./woodProceduralTexture.fragment.fx");
+import "./woodProceduralTexture.fragment";
 
 export class WoodProceduralTexture extends ProceduralTexture {
     private _ampScale: number = 100.0;

proceduralTexturesLibrary/webpack.config.js

@@ -40,12 +40,6 @@ module.exports = {
                 configFileName: '../../proceduralTexturesLibrary/tsconfig.json',
                 declarationDir: '../../dist/preview release/proceduralTexturesLibrary/build'
             }
-        },
-        {
-            test: /\.fx$/,
-            use: [{
-                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
-            }]
         }]
     },
     mode: "production",
@@ -70,7 +64,8 @@ module.exports = {
         }),*/
         new webpack.WatchIgnorePlugin([
             /\.js$/,
-            /\.d\.ts$/
+            /\.d\.ts$/,
+            /\.fx$/
         ])
     ],
     watchOptions: {

serializers/src/glTF/2.0/Extensions/KHR_texture_transform.ts

@@ -1,11 +1,11 @@
-import { Effect, Texture, Nullable, Vector2, Scene, BaseTexture, ProceduralTexture, Tools } from "babylonjs";
+import { Texture, Nullable, Vector2, Scene, BaseTexture, ProceduralTexture, Tools } from "babylonjs";
 import { ImageMimeType } from "babylonjs-gltf2interface";
 import { IGLTFExporterExtensionV2 } from "../glTFExporterExtension";
 import { _Exporter } from "../glTFExporter";
 
 const NAME = "KHR_texture_transform";
 
-Effect.ShadersStore["textureTransformPixelShader"] = require("../shaders/textureTransform.fragment.fx");
+import "../shaders/textureTransform.fragment";
 
 /**
  * Interface for handling KHR texture transform

serializers/webpack.config.js

@@ -43,12 +43,6 @@ module.exports = {
                     declarationDir: '../../dist/preview release/serializers/build'
                 }
             }]
-        },
-        {
-            test: /\.fx$/,
-            use: [{
-                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
-            }]
         }]
     },
     mode: "production",
@@ -65,7 +59,8 @@ module.exports = {
         ]),
         new webpack.WatchIgnorePlugin([
             /\.js$/,
-            /\.d\.ts$/
+            /\.d\.ts$/,
+            /\.fx$/
         ])
     ],
     watchOptions: {