Merge pull request #3263 from RaananW/viewer-gulp

Adding Viewer to the gulp process

Tools/Gulp/config.json

@@ -1178,7 +1178,8 @@
         "loaders",
         "serializers",
         "inspector",
-        "gui"
+        "gui",
+        "viewer"
     ],
     "materialsLibrary": {
         "libraries": [
@@ -1661,5 +1662,21 @@
             "srcOutputDirectory": "../../inspector/",
             "distOutputDirectory": "/inspector/"
         }
+    },
+    "viewer": {
+        "libraries": [
+            {
+                "files": [],
+                "noBundleInName": true,
+                "output": "babylon.viewer.js",
+                "webpack": "../../Viewer/webpack.gulp.config.js",
+                "bundle": "true",
+                "moduleDeclaration": "BabylonViewer"
+            }
+        ],
+        "build": {
+            "srcOutputDirectory": "../../Viewer/",
+            "distOutputDirectory": "/viewer/"
+        }
     }
-}
+}

Tools/Gulp/gulpfile.js

@@ -49,7 +49,8 @@ var tsConfig = {
     noImplicitThis: true,
     noUnusedLocals: true,
     strictNullChecks: true,
-    strictFunctionTypes: true
+    strictFunctionTypes: true,
+    types: []
 };
 var tsProject = typescript.createProject(tsConfig);
 
@@ -64,7 +65,8 @@ var externalTsConfig = {
     noImplicitReturns: true,
     noImplicitThis: true,
     noUnusedLocals: true,
-    strictNullChecks: true
+    strictNullChecks: true,
+    types: []
 };
 
 var minimist = require("minimist");
@@ -398,9 +400,11 @@ var buildExternalLibrary = function (library, settings, watch) {
 
         if (library.webpack) {
             return waitAll.on("end", function () {
-                webpack(require(library.webpack))
-                    .pipe(rename(library.output.replace(".js", ".bundle.js")))
+                return webpack(require(library.webpack))
+                    .pipe(rename(library.output.replace(".js", library.noBundleInName ? '.js' : ".bundle.js")))
                     .pipe(addModuleExports(library.moduleDeclaration, false, false, true))
+                    .pipe(uglify())
+                    .pipe(optimisejs())
                     .pipe(gulp.dest(outputDirectory))
             });
         }

Tools/Gulp/package.json

@@ -9,9 +9,13 @@
     "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
     "license": "(Apache-2.0)",
     "devDependencies": {
+        "@types/node": "^8.0.53",
+        "base64-image-loader": "^1.2.0",
         "css-loader": "^0.25.0",
+        "deepmerge": "^2.0.1",
         "del": "2.2.2",
-        "exports-loader": "^0.6.3",
+        "es6-promise": "^4.1.1",
+        "exports-loader": "^0.6.4",
         "gulp": "^3.8.11",
         "gulp-changed-in-place": "2.0.3",
         "gulp-clean-ts-extends": "~0.1.1",
@@ -24,20 +28,24 @@
         "gulp-replace": "~0.5.3",
         "gulp-sass": "3.1.0",
         "gulp-sourcemaps": "~1.9.1",
-        "gulp-typescript": "^3.2.2",
+        "gulp-typescript": "^3.2.3",
         "gulp-uglify": "^2.1.2",
         "gulp-util": "~3.0.4",
         "gulp-webserver": "^0.9.1",
-        "imports-loader": "^0.7.0",
+        "handlebars": "^4.0.11",
+        "html-loader": "^0.5.1",
+        "imports-loader": "^0.7.1",
+        "json-loader": "^0.5.7",
         "merge2": "~0.3.5",
         "minimist": "^1.2.0",
         "run-sequence": "~1.1.0",
-        "style-loader": "^0.13.1",
+        "style-loader": "^0.13.2",
         "through2": "~0.6.5",
+        "ts-loader": "^2.3.7",
         "typescript": "~2.6.1",
-        "webpack-stream": "^3.2.0"
+        "webpack-stream": "^4.0.0"
     },
     "scripts": {
         "install": "npm --prefix ../../Playground/ install ../../Playground/ && gulp typescript-compile && gulp typescript-libraries && gulp deployLocalDev"
     }
-}
+}

Viewer/assets/deepmerge.min.js

@@ -0,0 +1,97 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.deepmerge = factory());
+}(this, (function () { 'use strict';
+
+var isMergeableObject = function isMergeableObject(value) {
+	return isNonNullObject(value)
+		&& !isSpecial(value)
+};
+
+function isNonNullObject(value) {
+	return !!value && typeof value === 'object'
+}
+
+function isSpecial(value) {
+	var stringValue = Object.prototype.toString.call(value);
+
+	return stringValue === '[object RegExp]'
+		|| stringValue === '[object Date]'
+		|| isReactElement(value)
+}
+
+// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
+var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
+
+function isReactElement(value) {
+	return value.$$typeof === REACT_ELEMENT_TYPE
+}
+
+function emptyTarget(val) {
+	return Array.isArray(val) ? [] : {}
+}
+
+function cloneUnlessOtherwiseSpecified(value, optionsArgument) {
+	var clone = !optionsArgument || optionsArgument.clone !== false;
+
+	return (clone && isMergeableObject(value))
+		? deepmerge(emptyTarget(value), value, optionsArgument)
+		: value
+}
+
+function defaultArrayMerge(target, source, optionsArgument) {
+	return target.concat(source).map(function(element) {
+		return cloneUnlessOtherwiseSpecified(element, optionsArgument)
+	})
+}
+
+function mergeObject(target, source, optionsArgument) {
+	var destination = {};
+	if (isMergeableObject(target)) {
+		Object.keys(target).forEach(function(key) {
+			destination[key] = cloneUnlessOtherwiseSpecified(target[key], optionsArgument);
+		});
+	}
+	Object.keys(source).forEach(function(key) {
+		if (!isMergeableObject(source[key]) || !target[key]) {
+			destination[key] = cloneUnlessOtherwiseSpecified(source[key], optionsArgument);
+		} else {
+			destination[key] = deepmerge(target[key], source[key], optionsArgument);
+		}
+	});
+	return destination
+}
+
+function deepmerge(target, source, optionsArgument) {
+	var sourceIsArray = Array.isArray(source);
+	var targetIsArray = Array.isArray(target);
+	var options = optionsArgument || { arrayMerge: defaultArrayMerge };
+	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+
+	if (!sourceAndTargetTypesMatch) {
+		return cloneUnlessOtherwiseSpecified(source, optionsArgument)
+	} else if (sourceIsArray) {
+		var arrayMerge = options.arrayMerge || defaultArrayMerge;
+		return arrayMerge(target, source, optionsArgument)
+	} else {
+		return mergeObject(target, source, optionsArgument)
+	}
+}
+
+deepmerge.all = function deepmergeAll(array, optionsArgument) {
+	if (!Array.isArray(array)) {
+		throw new Error('first argument should be an array')
+	}
+
+	return array.reduce(function(prev, next) {
+		return deepmerge(prev, next, optionsArgument)
+	}, {})
+};
+
+var deepmerge_1 = deepmerge;
+
+return deepmerge_1;
+
+})));

Viewer/package.json

@@ -23,22 +23,22 @@
     },
     "homepage": "https://github.com/BabylonJS/Babylon.js#readme",
     "devDependencies": {
-        "@types/node": "^8.0.52",
+        "@types/node": "^8.0.53",
         "base64-image-loader": "^1.2.0",
         "html-loader": "^0.5.1",
         "json-loader": "^0.5.7",
         "ts-loader": "^2.3.7",
-        "typescript": "^2.6.1",
-        "uglifyjs-webpack-plugin": "^1.0.1",
+        "typescript": "^2.6.2",
+        "uglifyjs-webpack-plugin": "^1.1.1",
         "webpack": "^3.8.1",
-        "webpack-dev-server": "^2.9.4"
+        "webpack-dev-server": "^2.9.5"
     },
     "dependencies": {
-        "babylonjs": "^3.1.0-beta3",
-        "babylonjs-loaders": "^3.1.0-beta3",
-        "babylonjs-materials": "^3.1.0-beta3",
-        "babylonjs-post-process": "^3.1.0-beta3",
-        "babylonjs-procedural-textures": "^3.1.0-beta3",
+        "babylonjs": "^3.1.0-beta6",
+        "babylonjs-loaders": "^3.1.0-beta6",
+        "babylonjs-materials": "^3.1.0-beta6",
+        "babylonjs-post-process": "^3.1.0-beta6",
+        "babylonjs-procedural-textures": "^3.1.0-beta6",
         "deepmerge": "^2.0.1",
         "es6-promise": "^4.1.1",
         "handlebars": "^4.0.11"

Viewer/src/configuration/loader.ts

@@ -2,7 +2,7 @@ import { mapperManager } from './mappers';
 import { ViewerConfiguration } from './configuration';
 import { getConfigurationType } from './types';
 
-import deepmerge from 'deepmerge';
+import * as deepmerge from '../../assets/deepmerge.min.js';
 
 export class ConfigurationLoader {
 

Viewer/src/index.ts

@@ -22,8 +22,7 @@ import { InitTags } from './initializer';
 global.Promise = Promise || require('es6-promise').Promise;
 
 export let disableInit: boolean = false;
-
-setTimeout(() => {
+document.addEventListener("DOMContentLoaded", function (event) {
     if (disableInit) return;
     InitTags();
 });

Viewer/src/templateManager.ts

@@ -143,7 +143,7 @@ export class TemplateManager {
 }
 
 
-import * as Handlebars from 'handlebars/dist/handlebars.min.js';
+import * as Handlebars from '../assets/handlebars.min.js';
 // register a new helper. modified https://stackoverflow.com/questions/9838925/is-there-any-method-to-iterate-a-map-with-handlebars-js
 Handlebars.registerHelper('eachInMap', function (map, block) {
     var out = '';

Viewer/src/util/promiseObservable.ts

@@ -1,4 +1,4 @@
-import { Observable, Nullable, Observer } from "babylonjs";
+import { Observable } from 'babylonjs';
 
 export class PromiseObservable<T> extends Observable<T> {
 

Viewer/src/viewer/defaultViewer.ts

@@ -1,12 +1,12 @@
+
+
 import { ViewerConfiguration } from './../configuration/configuration';
 import { Template } from './../templateManager';
 import { AbstractViewer } from './viewer';
-import { Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ShadowOnlyMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
+import { ShadowGenerator, Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
 import { CameraBehavior } from '../interfaces';
 
-// A small hack for the inspector. to be removed!
-import * as BABYLON from 'babylonjs';
-window['BABYLON'] = BABYLON;
+import { ShadowOnlyMaterial } from 'babylonjs-materials';
 
 export class DefaultViewer extends AbstractViewer {
 
@@ -107,7 +107,7 @@ export class DefaultViewer extends AbstractViewer {
                                     let requestFullScreen = viewerElement.requestFullscreen || viewerElement.webkitRequestFullscreen || (<any>viewerElement).msRequestFullscreen || (<any>viewerElement).mozRequestFullScreen;
                                     requestFullScreen.call(viewerElement);
                                 } else {
-                                    let exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || (<any>document).msExitFullscreen || document.mozCancelFullScreen
+                                    let exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || (<any>document).msExitFullscreen || (<any>document).mozCancelFullScreen
                                     exitFullscreen.call(document);
                                 }
 
@@ -230,7 +230,8 @@ export class DefaultViewer extends AbstractViewer {
             //default configuration
             if (this.configuration.ground === true) {
                 ground.receiveShadows = true;
-                ground.material.alpha = 0.4;
+                if (ground.material)
+                    ground.material.alpha = 0.4;
             }
 
 
@@ -354,7 +355,7 @@ export class DefaultViewer extends AbstractViewer {
                 //position. Some lights don't support shadows
                 if (light instanceof ShadowLight) {
                     if (lightConfig.shadowEnabled) {
-                        var shadowGenerator = new BABYLON.ShadowGenerator(512, light);
+                        var shadowGenerator = new ShadowGenerator(512, light);
                         this.extendClassWithConfig(shadowGenerator, lightConfig.shadowConfig || {});
                         // add the focues meshes to the shadow list
                         let shadownMap = shadowGenerator.getShadowMap();

Viewer/src/viewer/viewerManager.ts

@@ -1,3 +1,5 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
 import { Observable } from 'babylonjs';
 import { AbstractViewer } from './viewer';
 

Viewer/tsconfig-gulp.json

@@ -0,0 +1,35 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "noResolve": false,
+        "noImplicitAny": false, //mainly due to usage of external libs without typings.
+        "strictNullChecks": true,
+        "removeComments": true,
+        "preserveConstEnums": true,
+        "sourceMap": false,
+        "experimentalDecorators": true,
+        "isolatedModules": false,
+        "declaration": false,
+        "lib": [
+            "dom",
+            "es2015.promise",
+            "es5"
+        ],
+        "types": [
+            "node"
+        ],
+        "baseUrl": ".",
+        "paths": {
+            "babylonjs": [
+                "../dist/preview release/babylon.max.js"
+            ],
+            "babylonjs-materials": [
+                "../dist/preview release/materialsLibrary/babylonjs.materials.js"
+            ],
+            "babylonjs-loaders": [
+                "../dist/preview release/loaders/babylonjs.loaders.js"
+            ]
+        }
+    }
+}

Viewer/webpack.gulp.config.js

@@ -0,0 +1,51 @@
+module.exports = {
+    //context: __dirname,
+    entry: [
+        __dirname + '/src/index.ts'
+    ]
+    ,
+    output: {
+        libraryTarget: 'var',
+        library: 'BabylonViewer',
+        umdNamedDefine: true
+    },
+    externals: {
+        cannon: true,
+        vertx: true
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+        alias: {
+            "babylonjs": __dirname + '/../dist/preview release/babylon.max.js',
+            "babylonjs-materials": __dirname + '/../dist/preview release/materialsLibrary/babylonjs.materials.js',
+            "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
+            "es6-promise": __dirname + '/assets/es6-promise.min.js',
+            "deepmerge": __dirname + '/assets/deepmerge.min.js',
+        }
+    },
+    module: {
+        loaders: [{
+            test: /\.tsx?$/,
+            use: {
+                loader: 'ts-loader',
+                options: {
+                    configFile: 'tsconfig-gulp.json'
+                }
+            },
+            exclude: /node_modules/
+        },
+        {
+            test: /\.(html)$/,
+            use: {
+                loader: 'html-loader',
+                options: {
+                    minimize: true
+                }
+            }
+        },
+        {
+            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+            use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        }]
+    }
+}

inspector/webpack.config.js

@@ -1,7 +1,7 @@
 module.exports = {
     entry: [
         "../../dist/preview release/inspector/babylon.inspector.css",
-        "../../dist/preview release/inspector/babylon.inspector.min.js"
+        "../../dist/preview release/inspector/babylon.inspector.js"
     ],
     output: {
         libraryTarget: "var",
@@ -15,8 +15,12 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.css$/, loader: "style!css" },
-            { test: /babylon.inspector.min.js$/, loader: "imports?Split=split!exports?INSPECTOR" }
+            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+            {
+                test: /babylon.inspector.js/, use: [
+                    "imports-loader?Split=split", "exports-loader?INSPECTOR"]
+
+            }
         ]
     }
 }