Merge pull request #1571 from sebavan/Development

Add Webpack for libraries who needs packing

Tools/DevLoader/BabylonLoader.js

@@ -43,6 +43,32 @@ var BABYLONDEVTOOLS;
             babylonJSPath = '';
         }
 
+        Loader.prototype.debugShortcut = function(engine) {
+            // Add inspector shortcut
+            var map = {};
+            var onkey = function(e){
+                e = e || event; // to deal with IE
+                map[e.keyCode] = e.type == 'keydown';
+                if(map[17] && map[16] && map[18] && map[73]) {
+                    if (engine.scenes && engine.scenes.length > 0) {
+                        for (var i = 0; i < engine.scenes.length; i ++) {
+                            if (engine.scenes[0].debugLayer.isVisible()) {
+                                engine.scenes[0].debugLayer.hide();
+                            }
+                            else {
+                                engine.scenes[0].debugLayer.show();
+                            }
+                        }
+                    }
+                    map = {};
+                    return false;
+                }
+            };
+
+            document.addEventListener("keydown", onkey);
+            document.addEventListener("keyup", onkey);
+        }
+
         Loader.prototype.root = function (newBabylonJSPath) {
             babylonJSPath = newBabylonJSPath;
             return this;
@@ -135,13 +161,18 @@ var BABYLONDEVTOOLS;
                 }
             }
             else if (min) {
-                this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.min.js'));
+                if (library.webpack) {
+                    this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.bundle.js'));
+                }
+                else {
+                    this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.min.js'));
+                }
             }
             else {
                 this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output);
             }
 
-            if (library.sassFiles && library.sassFiles.length > 0) {
+            if (!min && library.sassFiles && library.sassFiles.length > 0) {
                 var cssFile = library.output.replace('.js', '.css');
                 cssFile = babylonJSPath + '/dist/preview release' +  module.build.distOutputDirectory + cssFile;
                 this.loadCss(cssFile);
@@ -179,7 +210,10 @@ var BABYLONDEVTOOLS;
             }
             getJson('/Tools/Gulp/config.json',
                 function(data) {
-                    self.loadScript('/dist/split.js');
+                    if (!min) {
+                        self.loadScript('/dist/preview release/split.js');
+                    }
+
                     self.loadBJSScripts(data);
                     if (dependencies) {
                         self.loadScripts(dependencies);

Tools/Gulp/config.json

@@ -313,7 +313,7 @@
         "output": "babylon.skyMaterial.js"
       },
       {
-        "files": ["../../materialsLibrary/src/grid/babylon.gridMaterial.ts"],
+        "files": ["../../materialsLibrary/src/grid/babylon.gridmaterial.ts"],
         "shaderFiles": [
           "../../materialsLibrary/src/grid/grid.vertex.fx",
           "../../materialsLibrary/src/grid/grid.fragment.fx",
@@ -551,7 +551,8 @@
       "sassFiles": [
         "../../inspector/sass/**/*.scss"
       ],
-      "output": "babylon.inspector.js"
+      "output": "babylon.inspector.js",
+      "webpack": "../../inspector/webpack.config.js" 
     }],
     "build": {
       "srcOutputDirectory": "../../inspector/",      

Tools/Gulp/gulpfile.js

@@ -19,6 +19,7 @@ var optimisejs = require('gulp-optimize-js');
 var webserver = require('gulp-webserver');
 var path = require('path');
 var sass = require('gulp-sass');
+var webpack = require('webpack-stream');
 
 var config = require("./config.json");
 var customConfig = require("./custom.config.json");
@@ -264,9 +265,7 @@ var buildExternalLibrary= function(library, settings, watch) {
         return merge2([shader, dev, css]);    
     }
     else {
-        
-        var dist = merge2([dev, css], [
-            merge2([tsProcess.js, shader])
+        var code = merge2([tsProcess.js, shader])
                 .pipe(concat(library.output))
                 .pipe(gulp.dest(outputDirectory))
                 .pipe(cleants())
@@ -275,14 +274,25 @@ var buildExternalLibrary= function(library, settings, watch) {
                 .pipe(rename({extname: ".min.js"}))
                 .pipe(uglify())
                 .pipe(optimisejs())
-                .pipe(gulp.dest(outputDirectory)), 
-            tsProcess.dts
+                .pipe(gulp.dest(outputDirectory));
+        
+        var dts = tsProcess.dts
                 .pipe(concat(library.output))
                 .pipe(rename({extname: ".d.ts"}))
-                .pipe(gulp.dest(outputDirectory)) 
-        ]);
+                .pipe(gulp.dest(outputDirectory));
+
+        var waitAll =  merge2([dev, code, css, dts]);
 
-        return dist;   
+        if (library.webpack) {
+            return waitAll.on('end', function() {
+                webpack(require(library.webpack))
+                    .pipe(rename(library.output.replace(".js", ".bundle.js")))
+                    .pipe(gulp.dest(outputDirectory))
+            });
+        }
+        else {
+            return waitAll;
+        }
     }
 }
 

Tools/Gulp/package.json

@@ -26,7 +26,12 @@
     "gulp-optimize-js": "^1.0.2",
     "gulp-webserver": "^0.9.1",
     "gulp-debug": "^3.0.0",
-    "gulp-sass": "2.3.2"
+    "gulp-sass": "2.3.2",
+    "webpack-stream": "^3.2.0",
+    "css-loader": "^0.25.0",
+    "style-loader": "^0.13.1",
+    "exports-loader": "^0.6.3",
+    "imports-loader": "^0.7.0"
   },
   "scripts": {
     "install": "npm --prefix ../../Playground/ install ../../Playground/ && gulp typescript-compile && gulp typescript-libraries && gulp deployLocalDev"

dist/preview release/babylon.max.js

@@ -22387,6 +22387,7 @@ var BABYLON;
         MeshBuilder.CreateBox = function (name, options, scene) {
             var box = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            box.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateBox(options);
             vertexData.applyToMesh(box, options.updatable);
             return box;
@@ -22406,6 +22407,7 @@ var BABYLON;
         MeshBuilder.CreateSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            sphere.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateSphere(options);
             vertexData.applyToMesh(sphere, options.updatable);
             return sphere;
@@ -22423,6 +22425,7 @@ var BABYLON;
         MeshBuilder.CreateDisc = function (name, options, scene) {
             var disc = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            disc.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateDisc(options);
             vertexData.applyToMesh(disc, options.updatable);
             return disc;
@@ -22441,6 +22444,7 @@ var BABYLON;
         MeshBuilder.CreateIcoSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            sphere.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateIcoSphere(options);
             vertexData.applyToMesh(sphere, options.updatable);
             return sphere;
@@ -22590,6 +22594,7 @@ var BABYLON;
         MeshBuilder.CreateCylinder = function (name, options, scene) {
             var cylinder = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            cylinder.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateCylinder(options);
             vertexData.applyToMesh(cylinder, options.updatable);
             return cylinder;
@@ -22607,6 +22612,7 @@ var BABYLON;
         MeshBuilder.CreateTorus = function (name, options, scene) {
             var torus = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            torus.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateTorus(options);
             vertexData.applyToMesh(torus, options.updatable);
             return torus;
@@ -22625,6 +22631,7 @@ var BABYLON;
         MeshBuilder.CreateTorusKnot = function (name, options, scene) {
             var torusKnot = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            torusKnot.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreateTorusKnot(options);
             vertexData.applyToMesh(torusKnot, options.updatable);
             return torusKnot;
@@ -22900,6 +22907,7 @@ var BABYLON;
         MeshBuilder.CreatePlane = function (name, options, scene) {
             var plane = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            plane.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreatePlane(options);
             vertexData.applyToMesh(plane, options.updatable);
             if (options.sourcePlane) {
@@ -23152,6 +23160,7 @@ var BABYLON;
         MeshBuilder.CreatePolyhedron = function (name, options, scene) {
             var polyhedron = new BABYLON.Mesh(name, scene);
             options.sideOrientation = this.updateSideOrientation(options.sideOrientation, scene);
+            polyhedron.sideOrientation = options.sideOrientation;
             var vertexData = BABYLON.VertexData.CreatePolyhedron(options);
             vertexData.applyToMesh(polyhedron, options.updatable);
             return polyhedron;
@@ -25246,10 +25255,10 @@ var BABYLON;
             return this._compilationError;
         };
         Effect.prototype.getVertexShaderSource = function () {
-            return this._engine.getVertexShaderSource(this._program);
+            return this._evaluateDefinesOnString(this._engine.getVertexShaderSource(this._program));
         };
         Effect.prototype.getFragmentShaderSource = function () {
-            return this._engine.getFragmentShaderSource(this._program);
+            return this._evaluateDefinesOnString(this._engine.getFragmentShaderSource(this._program));
         };
         // Methods
         Effect.prototype._loadVertexShader = function (vertex, callback) {
@@ -25691,6 +25700,98 @@ var BABYLON;
             }
             return this;
         };
+        Effect.prototype._recombineShader = function (node) {
+            if (node.define) {
+                if (node.condition) {
+                }
+                else if (node.ndef) {
+                    if (this.defines.indexOf("#define " + node.define) !== -1) {
+                        return null;
+                    }
+                }
+                else if (this.defines.indexOf("#define " + node.define) === -1) {
+                    return null;
+                }
+            }
+            var result = "";
+            for (var index = 0; index < node.children.length; index++) {
+                var line = node.children[index];
+                if (line.children) {
+                    var combined = this._recombineShader(line) + "\r\n";
+                    if (combined !== null) {
+                        result += combined + "\r\n";
+                    }
+                    continue;
+                }
+                result += line + "\r\n";
+            }
+            return result;
+        };
+        Effect.prototype._evaluateDefinesOnString = function (shaderString) {
+            var root = {
+                children: []
+            };
+            var currentNode = root;
+            var lines = shaderString.split("\n");
+            for (var index = 0; index < lines.length; index++) {
+                var line = lines[index].trim();
+                // #ifdef
+                var pos = line.indexOf("#ifdef ");
+                if (pos !== -1) {
+                    var define = line.substr(pos + 7);
+                    var newNode = {
+                        condition: null,
+                        ndef: false,
+                        define: define,
+                        children: [],
+                        parent: currentNode
+                    };
+                    currentNode.children.push(newNode);
+                    currentNode = newNode;
+                    continue;
+                }
+                // #ifndef
+                var pos = line.indexOf("#ifndef ");
+                if (pos !== -1) {
+                    var define = line.substr(pos + 8);
+                    newNode = {
+                        condition: null,
+                        define: define,
+                        ndef: true,
+                        children: [],
+                        parent: currentNode
+                    };
+                    currentNode.children.push(newNode);
+                    currentNode = newNode;
+                    continue;
+                }
+                // #if
+                var pos = line.indexOf("#if ");
+                if (pos !== -1) {
+                    var define = line.substr(pos + 4).trim();
+                    var conditionPos = define.indexOf(" ");
+                    newNode = {
+                        condition: define.substr(conditionPos + 1),
+                        define: define.substr(0, conditionPos),
+                        ndef: false,
+                        children: [],
+                        parent: currentNode
+                    };
+                    currentNode.children.push(newNode);
+                    currentNode = newNode;
+                    continue;
+                }
+                // #endif
+                pos = line.indexOf("#endif");
+                if (pos !== -1) {
+                    currentNode = currentNode.parent;
+                    continue;
+                }
+                currentNode.children.push(line);
+            }
+            // Recombine
+            return this._recombineShader(root);
+        };
         // Statics
         Effect.ShadersStore = {};
         Effect.IncludesShadersStore = {};
@@ -54736,7 +54837,7 @@ var BABYLON;
             new INSPECTOR.Inspector(this._scene);
         };
         DebugLayer.prototype.isVisible = function () {
-            return true;
+            return false;
         };
         DebugLayer.prototype.hide = function () {
             console.warn('');

inspector/test/index.js

@@ -5,7 +5,8 @@ var Test = (function () {
     function Test(canvasId) {
         var _this = this;
         var canvas = document.getElementById(canvasId);
-        this.engine = new BABYLON.Engine(canvas, true);
+        this.engine = new BABYLON.Engine(canvas, true);					
+		BABYLONDEVTOOLS.Loader.debugShortcut(engine);
         this.scene = null;
         window.addEventListener("resize", function () {
             _this.engine.resize();

inspector/webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    entry: [
+        "../../dist/preview release/inspector/babylon.inspector.css",
+        "../../dist/preview release/inspector/babylon.inspector.min.js"
+    ],
+    output: {
+        libraryTarget: "var",
+        library: "INSPECTOR",
+        umdNamedDefine: true
+    },
+    resolve: {
+        alias: {
+            split: '../split.js'
+        }
+    },
+    module: {        
+        loaders: [
+            { test: /\.css$/, loader: "style!css" },
+            { test: /babylon.inspector.min.js$/, loader: "imports?Split=split!exports?INSPECTOR" }
+        ]
+    }
+}

localDev/index.html

@@ -59,7 +59,8 @@
 			.require(indexjs)
 			.load(function() {
 				if (BABYLON.Engine.isSupported()) {
-					engine = new BABYLON.Engine(canvas, true, { stencil: true });				
+					engine = new BABYLON.Engine(canvas, true, { stencil: true });					
+					BABYLONDEVTOOLS.Loader.debugShortcut(engine);			
 
 					// call the scene creation from the js.
 					var scene = createScene();

materialsLibrary/index.html

@@ -55,6 +55,8 @@
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
 			var engine = new BABYLON.Engine(canvas, true);
+			BABYLONDEVTOOLS.Loader.debugShortcut(engine);
+
 			var divFps = document.getElementById("fps");
 
 			scene = new BABYLON.Scene(engine);

postProcessLibrary/index.html

@@ -44,7 +44,8 @@
 	BABYLONDEVTOOLS.Loader.load(function() {
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
-			var engine = new BABYLON.Engine(canvas, true);
+			var engine = new BABYLON.Engine(canvas, true);					
+			BABYLONDEVTOOLS.Loader.debugShortcut(engine);	
 			var divFps = document.getElementById("fps");
 
 			var scene = new BABYLON.Scene(engine);

proceduralTexturesLibrary/index.html

@@ -53,7 +53,8 @@
 		BABYLONDEVTOOLS.Loader.load(function() {
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
-			var engine = new BABYLON.Engine(canvas, true);
+			var engine = new BABYLON.Engine(canvas, true);					
+			BABYLONDEVTOOLS.Loader.debugShortcut(engine);
 			var divFps = document.getElementById("fps");
 
 			scene = new BABYLON.Scene(engine);

src/Debug/babylon.debugLayer.ts

@@ -15,10 +15,9 @@ module BABYLON {
         private _createInspector() {
             new INSPECTOR.Inspector(this._scene);
         }
-
         
         public isVisible(): boolean {
-            return true;
+            return false;
         }
 
         public hide() {