Merge pull request #5911 from BabylonJS/TrevorDev-viewerTreeshakeD

Trevor dev viewer treeshake

Tools/Config/config.js

@@ -52,7 +52,7 @@ config.additionalNpmPackages.forEach(package => {
     };
 });
 
-config.modules.map(function(module) {
+config.es6modules.map(function(module) {
     const settings = config[module];
 
     const mainDirectory = path.resolve(rootFolder, settings.build.mainFolder);
@@ -103,11 +103,13 @@ config.modules.map(function(module) {
         const tsGlob = srcDirectory.replace(/\\/g, "/") + "/**/*.ts*";
 
         for (let library of settings.libraries) {
-            const entryPath = path.join(srcDirectory, library.entry);
+            if(library.entry){
+                const entryPath = path.join(srcDirectory, library.entry);
 
-            library.computed = {
-                entryPath
-            };
+                library.computed = {
+                    entryPath
+                };
+            }
         }
 
         settings.computed.srcDirectory = srcDirectory;

Tools/Config/config.json

@@ -47,6 +47,17 @@
         "gui",
         "inspector"
     ],
+    "es6modules": [
+        "core",
+        "materialsLibrary",
+        "postProcessesLibrary",
+        "proceduralTexturesLibrary",
+        "loaders",
+        "serializers",
+        "gui",
+        "inspector",
+        "viewer"
+    ],
     "lintModules": [
         "core",
         "materialsLibrary",
@@ -549,12 +560,11 @@
                 }
             },
             "es6": {
-                "webpackBuild": {
-                    "dependencies": [
-                        "node_modules/re-resizable/lib/index.es5.js",
-                        "Tools/**/*"
-                    ]
-                },
+                "webpackBuild": true,
+                "buildDependencies": [
+                    "node_modules/re-resizable/lib/index.es5.js",
+                    "Tools/**/*"
+                ],
                 "packageName": "@babylonjs/inspector",
                 "readme": "dist/preview release/inspector/readme-es6.md",
                 "packagesFiles": [
@@ -580,6 +590,7 @@
             }
         ],
         "build": {
+            "mainFolder": "./Viewer/",
             "webpack": "../../../Viewer/webpack.gulp.config.js",
             "distOutputDirectory": "/viewer/",
             "dtsBundle": {
@@ -641,7 +652,17 @@
                     ]
                 }
             ],
-            "legacyPackageOutputDirectory": "../../../Viewer/build/src/"
+            "legacyPackageOutputDirectory": "../../../Viewer/build/src/",
+            "es6": {
+                "buildDependencies": [
+                    "node_modules/handlebars/**/*",
+                    "node_modules/@types/**/*"
+                ],
+                "packageName": "@babylonjs/viewer",
+                "readme": "Viewer/README-ES6.md",
+                "skipLibCheck": true,
+                "packageBuildFolder": "src"
+            }
         }
     },
     "viewer-assets": {

Tools/Gulp/tasks/gulpTasks-librariesES6.js

@@ -68,8 +68,8 @@ var dep = function(settings) {
         }
     }
 
-    if (settings.build.es6.webpackBuild && settings.build.es6.webpackBuild.dependencies) {
-        for (let pathName of settings.build.es6.webpackBuild.dependencies) {
+    if (settings.build.es6.buildDependencies) {
+        for (let pathName of settings.build.es6.buildDependencies) {
             const dependencyPath = path.join(config.computed.rootFolder, pathName);
             copyPaths.push(dependencyPath);
         }
@@ -91,7 +91,7 @@ var modifySources = function(settings) {
             pathName = pathName.replace("/*", "");
         }
 
-        for (var moduleName of config.modules) {
+        for (var moduleName of config.es6modules) {
             var module = config[moduleName];
             if (module.build.umd.packageName === pathName) {
                 if (module.build.es6.packageName) {
@@ -127,7 +127,7 @@ var modifyTsConfig = function(settings, cb) {
         }
 
         var mapped = false;
-        for (var moduleName of config.modules) {
+        for (var moduleName of config.es6modules) {
             var module = config[moduleName];
             if (module.build.umd.packageName === pathName) {
                 if (module.build.es6.packageName) {
@@ -187,7 +187,9 @@ var build = function(settings, cb) {
         verbose: true
     };
 
-    let command = `node "${config.computed.tscPath}" --skipLibCheck false --inlineSources --sourceMap true -t es5 -m esNext --outDir "${settings.computed.distES6Directory}"`;
+    var skipLibCheck = settings.build.es6.skipLibCheck ? 'true' : 'false';
+    let command = `node "${config.computed.tscPath}" --skipLibCheck ${skipLibCheck} --inlineSources --sourceMap true -t es5 -m esNext --outDir "${settings.computed.distES6Directory}"`;
+
     shelljs.exec(command, options, function(code, stdout, stderr) {
         if (stderr) {
             console.log(stderr);
@@ -252,11 +254,11 @@ function buildES6Library(settings, module) {
     // Creates the required tasks.
     var tasks = [];
 
-    var cleanTasks = [
-        function cleanES6(cb) { return cleanSourceAndDist(settings, cb); },
-        function cleanES6Shaders() { return cleanShaders(settings); }
-    ];
-    var shaders = function() { return buildShaders(settings); };
+    var cleanAndShaderTasks = [ function cleanES6(cb) { return cleanSourceAndDist(settings, cb); } ];
+    if (settings.computed.shaderTSGlob) {
+        cleanAndShaderTasks.push(function cleanES6Shaders() { return cleanShaders(settings); });
+        cleanAndShaderTasks.push(function() { return buildShaders(settings); });
+    }
     var copySource = function() { return source(settings); };
     var dependencies = function() { return dep(settings); };
     var adaptSourceImportPaths = function() { return modifySources(settings); };
@@ -278,7 +280,7 @@ function buildES6Library(settings, module) {
         ];
     }
 
-    tasks.push(...cleanTasks, shaders, copySource, dependencies, adaptSourceImportPaths, adaptTsConfigImportPaths, ...buildSteps);
+    tasks.push(...cleanAndShaderTasks, copySource, dependencies, adaptSourceImportPaths, adaptTsConfigImportPaths, ...buildSteps);
 
     return gulp.series.apply(this, tasks);
 }
@@ -286,7 +288,7 @@ function buildES6Library(settings, module) {
 /**
  * Dynamic es 6 module creation.
  */
-config.modules.map(function(module) {
+config.es6modules.map(function(module) {
     const settings = config[module];
     gulp.task(module + "-es6", buildES6Library(settings, module));
 });
@@ -294,4 +296,4 @@ config.modules.map(function(module) {
 /**
  * Build all es 6 libs.
  */
-gulp.task("typescript-es6", gulp.series(config.modules.map((module) => module + "-es6")));
+gulp.task("typescript-es6", gulp.series(config.es6modules.map((module) => module + "-es6")));

Tools/Gulp/tasks/gulpTasks-viewerLibraries.js

@@ -10,7 +10,6 @@ var rename = require("gulp-rename");
 // Gulp Helpers
 var processDeclaration = require('../helpers/gulp-processModuleDeclarationToNamespace');
 var addModuleExports = require("../helpers/gulp-addModuleExports");
-
 // Import Build Config
 var config = require("../../Config/config.json");
 

Tools/Publisher/tasks/prepareEs6DevPackages.js

@@ -12,7 +12,7 @@ const config = require("../../Config/config.js");
  * Prepare an es6 Dev folder npm linked for test purpose.
  */
 function prepareEs6DevPackages() {
-    config.modules.forEach(moduleName => {
+    config.es6modules.forEach(moduleName => {
         const module = config[moduleName];
 
         colorConsole.log("Prepare " + "ES6Dev".magenta + " Package: " + moduleName.blue.bold);

Tools/Publisher/tasks/processEs6Packages.js

@@ -16,13 +16,16 @@ const modules = config.modules.concat(config.viewerModules);
  * Process ES6 Packages.
  */
 function processEs6Packages(version) {
-    config.modules.forEach(moduleName => {
+    config.es6modules.forEach(moduleName => {
         let module = config[moduleName];
         let es6Config = module.build.es6;
 
         colorConsole.log("Process " + "ES6".magenta + " Package: " + moduleName.blue.bold);
 
         let distPath = module.computed.distES6Directory;
+        if (es6Config.packageBuildFolder) {
+            distPath = path.join(distPath, es6Config.packageBuildFolder);
+        }
         let packagePath = module.computed.packageES6Directory;
         let umdPackageJson = require(module.computed.packageJSONPath);
 

Tools/WebpackPlugins/viewerResolve.js

@@ -0,0 +1,27 @@
+var path = require('path');
+var assign = require('object-assign');
+var forEachBail = require('enhanced-resolve/lib/forEachBail');
+var basename = require('enhanced-resolve/lib/getPaths').basename;
+
+module.exports = function (modulesToResolveToEs5) {
+  return {
+    apply: doApply.bind(this, modulesToResolveToEs5)
+  };
+};
+
+function doApply(modulesToResolveToEs5, resolver) {
+  // file type taken from: https://github.com/webpack/enhanced-resolve/blob/v4.0.0/test/plugins.js
+  var target = resolver.ensureHook("undescribed-raw-file");
+  //console.log(resolver.hooks);
+  resolver.getHook("resolve")
+    .tapAsync("ViewerResolvePlugin", (request, resolveContext, callback) => {
+        for(var package of modulesToResolveToEs5){
+            if(request.request.indexOf(package+"/") == 0){
+                const newRequest = Object.assign({}, request, { request: package, });
+                return resolver.doResolve(target, newRequest, "viewer resolved", resolveContext, callback);
+            }
+        }
+        
+        return callback();
+    });
+}

Viewer/README-ES6.md

@@ -0,0 +1,35 @@
+# BabylonJS Viewer
+
+This project is a 3d model viewer using babylonjs.
+
+Please note that this is an *initial release*. The API and project structure could (and probably SHOULD) be changed, so please don't rely on this yet in a productive environment.
+
+The viewer is using the latest Babylon from npm (3.1 alpha).
+
+This documentation is also not full. I will slowly add more and more exmplanations.
+
+## Basic usage
+
+See `basicExample.html` in `/dist`.
+
+Basically, all that is needed is an html tag, and the viewer.js, which includes everything needed to render a Scene:
+
+```html
+<babylon model="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF/BoomBox.gltf" default-viewer="true"></babylon>
+<script src="viewer.js"></script>
+``` 
+
+This will create a (default) viewer and will load the model in this URL using the gltf loader.
+
+The `babylon` tag will be automatically initialized. 
+
+## Configuration
+
+Configuration can be provided using html attributes or a JSON (at the moment). A configuration Mapper can be registered to create new configuration readers. 
+
+Before I finish a full documentation, take a look at `configuration.ts`
+
+## Templating
+
+The default templates are integrated in the viewer.js file. The current templates are located in `/assets/templates/default/` . Those templates can be extended and registered using the configuration file.
+

Viewer/dist/renderOnlyViewer.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>BabylonJS Viewer - Basic usage</title>
+        <style>
+            babylon {
+                max-width: 800px;
+                max-height: 500px;
+                width: 100%;
+                height: 600px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <canvas id="babylon-viewer" camera.behaviors.auto-rotate="0" style="max-width: 800px; max-height: 500px; width: 100%; height: 600px;"></canvas>
+        <script src="renderOnlyViewer.js"></script>
+        <script>
+
+            var config = {
+                "Renderer.ClearColorR": 0.2706,
+                "Renderer.ClearColorG": 0.2902,
+                "Renderer.ClearColorB": 0.3137,
+                "Renderer.ClearColorA": 1.0,
+                "Renderer.ClearColorOverride": false,
+                "GroundPlane.BottomVisible": false,
+                "GroundPlane.BottomGridOpacity": 1.0,
+                "Lighting.Light0_Enabled": true,
+                "Lighting.Light0_PositionX": -4.0,
+                "Lighting.Light0_PositionY": 4.5,
+                "Lighting.Light0_PositionZ": -4.0,
+                "Lighting.Light0_TargetX": 0.0,
+                "Lighting.Light0_TargetY": 0.0,
+                "Lighting.Light0_TargetZ": 0.0,
+                "Lighting.Light0_ColorR": 1.0,
+                "Lighting.Light0_ColorG": 1.0,
+                "Lighting.Light0_ColorB": 1.0,
+                "Lighting.Light0_Intensity": 80.0,
+                "Lighting.Light0_IntensityMode": 0,
+                "Lighting.Light0_Type": 0,
+                "Lighting.Light0_Radius": 0.3,
+                "Lighting.Light0_SpotAngle": 60.0,
+                "Lighting.Light0_CameraRelative": false,
+                "Lighting.Light0_ShadowEnabled": true,
+                "Lighting.Light0_ShadowBufferSize": 512.0,
+                "Lighting.Light0_ShadowFrustumSize": 2.0,
+                "Lighting.Light0_ShadowFieldOfView": 15.0,
+                "Lighting.Light0_ShadowNearClip": 1.0,
+                "Lighting.Light0_ShadowFarClip": 10.0,
+                "Lighting.Light0_FrustumEdgeFalloff": 1.0,
+                "Lighting.Light0_CameraOrientationTracking": 0,
+                "Lighting.Light1_Enabled": true,
+                "Lighting.Light1_PositionX": 5.0,
+                "Lighting.Light1_PositionY": 1.3,
+                "Lighting.Light1_PositionZ": 0.26,
+                "Lighting.Light1_TargetX": 0.0,
+                "Lighting.Light1_TargetY": 0.0,
+                "Lighting.Light1_TargetZ": 0.0,
+                "Lighting.Light1_ColorR": 1.0,
+                "Lighting.Light1_ColorG": 1.0,
+                "Lighting.Light1_ColorB": 1.0,
+                "Lighting.Light1_Intensity": 20.0,
+                "Lighting.Light1_IntensityMode": 0,
+                "Lighting.Light1_Type": 0,
+                "Lighting.Light1_Radius": 0.3,
+                "Lighting.Light1_SpotAngle": 35.0,
+                "Lighting.Light1_CameraRelative": false,
+                "Lighting.Light1_ShadowEnabled": false,
+                "Lighting.Light1_ShadowBufferSize": 512.0,
+                "Lighting.Light1_ShadowFrustumSize": 2.0,
+                "Lighting.Light1_ShadowFieldOfView": 15.0,
+                "Lighting.Light1_ShadowNearClip": 0.2,
+                "Lighting.Light1_ShadowFarClip": 10.0,
+                "Lighting.Light1_FrustumEdgeFalloff": 1.0,
+                "Lighting.Light1_CameraOrientationTracking": 0,
+                "Lighting.Light2_Enabled": true,
+                "Lighting.Light2_PositionX": 0.5,
+                "Lighting.Light2_PositionY": 0.0,
+                "Lighting.Light2_PositionZ": 4.5,
+                "Lighting.Light2_TargetX": 0.0,
+                "Lighting.Light2_TargetY": 0.0,
+                "Lighting.Light2_TargetZ": 0.0,
+                "Lighting.Light2_ColorR": 1.0,
+                "Lighting.Light2_ColorG": 1.0,
+                "Lighting.Light2_ColorB": 1.0,
+                "Lighting.Light2_Intensity": 3.0,
+                "Lighting.Light2_IntensityMode": 0,
+                "Lighting.Light2_Type": 0,
+                "Lighting.Light2_Radius": 0.3,
+                "Lighting.Light2_SpotAngle": 42.0,
+                "Lighting.Light2_CameraRelative": false,
+                "Lighting.Light2_ShadowEnabled": false,
+                "Lighting.Light2_ShadowBufferSize": 512.0,
+                "Lighting.Light2_ShadowFrustumSize": 2.0,
+                "Lighting.Light2_ShadowFieldOfView": 15.0,
+                "Lighting.Light2_ShadowNearClip": 0.2,
+                "Lighting.Light2_ShadowFarClip": 10.0,
+                "Lighting.Light2_FrustumEdgeFalloff": 1.0,
+                "Lighting.Light2_CameraOrientationTracking": 0,
+                "Lighting.MasterEnabled": true,
+                "Lighting.DirectEnabled": true,
+                "Lighting.DirectIntensity": 1.0,
+                "Lighting.EmissiveIntensity": 1.0,
+                "Lighting.EnvironmentEnabled": true,
+                "Lighting.EnvironmentIntensity": 1.5,
+                "Lighting.EnvironmentColorR": 1.0,
+                "Lighting.EnvironmentColorG": 1.0,
+                "Lighting.EnvironmentColorB": 1.0,
+                "Lighting.EnvironmentRotation": -30.0,
+                "Lighting.EnvironmentIndex": 0,
+                "Lighting.BackgroundColorR": 1.0,
+                "Lighting.BackgroundColorG": 1.0,
+                "Lighting.BackgroundColorB": 1.0,
+                "Lighting.BackgroundColorAmount": 1.0,
+                "Lighting.BackgroundLighting": 0.75,
+                "Lighting.BackgroundShadowFalloff": 1.0,
+                "Lighting.BackgroundShadowAmount": 0.075,
+                "ImageProcessing.Enabled": true,
+                "ImageProcessing.PlanarReflectionEnabled": true,
+                "ImageProcessing.PlanarReflectionWeight": 0.8,
+                "ImageProcessing.PlanarReflectionQuality": 2,
+                "ImageProcessing.PlanarReflectionBlur": true,
+                "ImageProcessing.PlanarReflectionDirect": false,
+                "ImageProcessing.BloomEnabled": false,
+                "ImageProcessing.BloomWeight": 0.0,
+                "ImageProcessing.BloomQuality": 2,
+                "ImageProcessing.VignetteWeight": 0.0,
+                "ImageProcessing.VignetteCentreX": 0.0,
+                "ImageProcessing.VignetteCentreY": 0.0,
+                "ImageProcessing.VignetteStretch": 0.5,
+                "ImageProcessing.VignetteColorR": 1.0,
+                "ImageProcessing.VignetteColorG": 1.0,
+                "ImageProcessing.VignetteColorB": 1.0,
+                "ImageProcessing.VignetteColorA": 1.0,
+                "ImageProcessing.VignetteBlendMode": 0,
+                "ColorGrading.TransformWeight": 1.0,
+                "ColorGrading.TransformData": "",
+                "ColorGrading.TransformDataFormat": "",
+                "ColorGrading.ColorFilterHueGlobal": 1.0,
+                "ColorGrading.ColorFilterHueShadows": 0.0,
+                "ColorGrading.ColorFilterHueMidtones": 0.0,
+                "ColorGrading.ColorFilterHueHighlights": 0.0,
+                "ColorGrading.ColorFilterDensityGlobal": 1.0,
+                "ColorGrading.ColorFilterDensityShadows": 1.0,
+                "ColorGrading.ColorFilterDensityMidtones": 1.0,
+                "ColorGrading.ColorFilterDensityHighlights": 1.0,
+                "ColorGrading.SaturationGlobal": 1.0,
+                "ColorGrading.SaturationShadows": 1.0,
+                "ColorGrading.SaturationMidtones": 1.0,
+                "ColorGrading.SaturationHighlights": 1.0,
+                "ColorGrading.ExposureShadows": 1.0,
+                "ColorGrading.ExposureMidtones": 1.0,
+                "ColorGrading.ExposureHighlights": 1.0,
+                "Camera.State.Position.X": 0.0,
+                "Camera.State.Position.Y": 0.0,
+                "Camera.State.Position.Z": 0.0,
+                "Camera.State.Rotation.X": 0.0,
+                "Camera.State.Rotation.Y": 0.0,
+                "Camera.State.Rotation.Z": 0.0,
+                "Camera.State.Rotation.W": 1.0,
+                "Camera.ExposureValue": 1.0,
+                "Camera.ExposureValueIsBrightness": false,
+                "Camera.ToneMappingEnabled": false,
+                "Camera.Contrast": 1.0,
+                "Camera.FieldOfView (Degrees)": 45.0,
+                "Camera.ElevationReturnTime (s)": 2.0,
+                "Camera.ElevationReturnWaitTime (s)": 3.0,
+                "Camera.DefaultElevation": 15.0,
+                "Camera.ElevationUpperLimit (degrees)": 80.0,
+                "Camera.ElevationLowerLimit (degrees)": -85.0,
+                "Camera.IdleRotationSpeed (degrees/s)": 0.0,
+                "Camera.IdleRotationWaitTime (s)": 4.0,
+                "Camera.IdleRotationSpinupTime (s)": 2.5,
+                "Camera.FramingPositionY": 0.5,
+                "Camera.FramingRadius": 0.866,
+                "Camera.FramingTime": 0.5,
+                "Camera.FramingRotation": -90.0,
+                "Camera.FramingElevation": 15.0,
+                "Camera.FramingBehaviour": 0,
+                "Camera.FrameOnModelLoad": true,
+                "Camera.ZoomStopsAnimation": false,
+                "Camera.Behaviour": 1,
+                "Camera.MinDistance": 0.5,
+                "Camera.MaxDistance": 5.0,
+                "Model.RelativeModelLoadScale": 1.0,
+                "Model.PositionAlignBase": true,
+                "Model.PositionOffsetX": 0.0,
+                "Model.PositionOffsetY": 0.0,
+                "Model.PositionOffsetZ": 0.0,
+                "Model.RotationOffsetAxisX": 0.0,
+                "Model.RotationOffsetAxisY": 1.0,
+                "Model.RotationOffsetAxisZ": 0.0,
+                "Model.RotationOffsetAngle": 210.0,
+
+                "Environment.RotationAroundY": 0.0,
+                "Environment.BackgroundClearColorFallback": [0.2706, 0.2902, 0.3137],
+                
+                "Environment.Ground_Texture": "Ground_1.0-1024.png",
+                "Environment.Ground_TextureInGamma": false,
+                "Environment.Ground_UseRGBColor": false,
+                "Environment.Ground_Noise": false,
+                "Environment.Ground_PrimaryColor": [1,1,1],
+                "Environment.Ground_SecondaryColor": [0, 0, 0],
+                "Environment.Ground_TertiaryColor": [0, 0, 0],
+                "Environment.Ground_PrimaryLevel": 1.55,
+                "Environment.Ground_SecondaryLevel": 0,
+                "Environment.Ground_TertiaryLevel": 0,
+                
+                "Environment.Ground_OpacityLevel": 0.8,
+                "Environment.Ground_ReflectionLevel": 1,
+                "Environment.Ground_ShadowLevel": 0.8,
+                
+                "Environment.Skybox_Texture": "Skybox_1.0-128.dds",
+                "Environment.Skybox_TextureInGamma": false,
+                "Environment.Skybox_UseRGBColor": false,
+                "Environment.Skybox_Noise": false,
+                "Environment.Skybox_PrimaryColor": [1, 1, 1],
+                "Environment.Skybox_SecondaryColor": [0, 0, 0],
+                "Environment.Skybox_TertiaryColor": [0, 0, 0],
+                "Environment.Skybox_PrimaryLevel": 1.5,
+                "Environment.Skybox_SecondaryLevel": 0,
+                "Environment.Skybox_TertiaryLevel": 0
+            }
+            
+            // Create viewer with a canvas element
+            var viewer = new BabylonViewer.RenderOnlyViewer(document.getElementById("babylon-viewer"), config);
+
+            // Initialize the viewer (this will setup the scene and load a model if its not)
+            viewer.initialize().then(()=>{
+                // Load a model
+                return viewer.loadModel({
+                    title: "Helmet",
+                    subtitle: "BabylonJS",
+                    thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
+                    url: "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
+                });
+            }).then(()=>{
+                // 1st model has been loaded, wait a second and swap to another model
+                setTimeout(() => {
+                    viewer.loadModel({
+                        title: "Helmet",
+                        subtitle: "BabylonJS",
+                        thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
+                        url: "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
+                    });
+                }, 1000);
+            });
+        </script>
+    </body>
+
+</html>

Viewer/package.json

@@ -39,6 +39,8 @@
         "webpack-dev-server": "^3.1.4"
     },
     "dependencies": {
+        "@babylonjs/core": "^4.0.0-alpha.18",
+        "@babylonjs/loaders": "^4.0.0-alpha.18",
         "pepjs": "^0.4.3"
     }
 }

Viewer/src/configuration/configuration.ts

@@ -1,4 +1,4 @@
-import { EngineOptions } from 'babylonjs';
+import { EngineOptions } from 'babylonjs/Engines/engine';
 import { ICameraConfiguration, IDefaultRenderingPipelineConfiguration, IGroundConfiguration, ILightConfiguration, IModelConfiguration, IObserversConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ISkyboxConfiguration, ITemplateConfiguration, IVRConfiguration } from './interfaces';
 import { IEnvironmentMapConfiguration } from './interfaces/environmentMapConfiguration';
 

Viewer/src/configuration/configurationContainer.ts

@@ -1,5 +1,6 @@
 import { ViewerConfiguration } from './configuration';
-import { Color3, Scene } from 'babylonjs';
+import { Color3 } from 'babylonjs/Maths/math';
+import { Scene } from 'babylonjs/scene';
 
 export class ConfigurationContainer {
 

Viewer/src/configuration/globals.ts

@@ -1,4 +1,4 @@
-import { Engine } from "babylonjs";
+import { Engine } from "babylonjs/Engines/engine";
 
 export class ViewerGlobals {
 

Viewer/src/configuration/interfaces/defaultRenderingPipelineConfiguration.ts

@@ -1,4 +1,4 @@
-import { DepthOfFieldEffectBlurLevel } from 'babylonjs';
+import { DepthOfFieldEffectBlurLevel } from "babylonjs/PostProcesses/depthOfFieldEffect";
 
 export interface IDefaultRenderingPipelineConfiguration {
     sharpenEnabled?: boolean;

Viewer/src/configuration/loader.ts

@@ -1,137 +1,8 @@
-import { mapperManager } from './mappers';
-import { ViewerConfiguration } from './configuration';
-import { getConfigurationType } from './types';
-import { processConfigurationCompatibility } from './configurationCompatibility';
+import { RenderOnlyConfigurationLoader } from "./renderOnlyLoader";
+import { getConfigurationType } from "./types";
 
-import { deepmerge } from '../helper/';
-import { Tools, IFileRequest } from 'babylonjs';
-
-/**
- * The configuration loader will load the configuration object from any source and will use the defined mapper to
- * parse the object and return a conform ViewerConfiguration.
- * It is a private member of the scene.
- */
-export class ConfigurationLoader {
-
-    private _configurationCache: { [url: string]: any };
-
-    private _loadRequests: Array<IFileRequest>;
-
-    constructor(private _enableCache: boolean = false) {
-        this._configurationCache = {};
-        this._loadRequests = [];
+export class ConfigurationLoader extends RenderOnlyConfigurationLoader {
+    protected getExtendedConfig(type:string|undefined){
+        return getConfigurationType(type || "extended");
     }
-
-    /**
-     * load a configuration object that is defined in the initial configuration provided.
-     * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
-     *
-     * @param initConfig the initial configuration that has the definitions of further configuration to load.
-     * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
-     * @returns A promise that delivers the extended viewer configuration, when done.
-     */
-    public loadConfiguration(initConfig: ViewerConfiguration = {}, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration> {
-
-        let loadedConfig: ViewerConfiguration = deepmerge({}, initConfig);
-        this._processInitialConfiguration(loadedConfig);
-
-        let extendedConfiguration = getConfigurationType(loadedConfig.extends || "extended");
-
-        if (loadedConfig.configuration) {
-
-            let mapperType = "json";
-            return Promise.resolve().then(() => {
-                if (typeof loadedConfig.configuration === "string" || (loadedConfig.configuration && loadedConfig.configuration.url)) {
-                    // a file to load
-
-                    let url: string = '';
-                    if (typeof loadedConfig.configuration === "string") {
-                        url = loadedConfig.configuration;
-                    }
-
-                    // if configuration is an object
-                    if (typeof loadedConfig.configuration === "object" && loadedConfig.configuration.url) {
-                        url = loadedConfig.configuration.url;
-                        let type = loadedConfig.configuration.mapper;
-                        // empty string?
-                        if (!type) {
-                            // load mapper type from filename / url
-                            type = loadedConfig.configuration.url.split('.').pop();
-                        }
-                        mapperType = type || mapperType;
-                    }
-                    return this._loadFile(url);
-                } else {
-                    if (typeof loadedConfig.configuration === "object") {
-                        mapperType = loadedConfig.configuration.mapper || mapperType;
-                        return loadedConfig.configuration.payload || {};
-                    }
-                    return {};
-
-                }
-            }).then((data: any) => {
-                let mapper = mapperManager.getMapper(mapperType);
-                let parsed = deepmerge(mapper.map(data), loadedConfig);
-                let merged = deepmerge(extendedConfiguration, parsed);
-                processConfigurationCompatibility(merged);
-                if (callback) { callback(merged); }
-                return merged;
-            });
-        } else {
-            loadedConfig = deepmerge(extendedConfiguration, loadedConfig);
-            processConfigurationCompatibility(loadedConfig);
-            if (callback) { callback(loadedConfig); }
-            return Promise.resolve(loadedConfig);
-        }
-    }
-
-    /**
-     * Dispose the configuration loader. This will cancel file requests, if active.
-     */
-    public dispose() {
-        this._loadRequests.forEach((request) => {
-            request.abort();
-        });
-        this._loadRequests.length = 0;
-    }
-
-    /**
-     * This function will process the initial configuration and make needed changes for the viewer to work.
-     * @param config the mutable(!) initial configuration to process
-     */
-    private _processInitialConfiguration(config: ViewerConfiguration) {
-        if (config.model) {
-            if (typeof config.model === "string") {
-                config.model = {
-                    url: config.model
-                };
-            }
-        }
-    }
-
-    private _loadFile(url: string): Promise<any> {
-        let cacheReference = this._configurationCache;
-        if (this._enableCache && cacheReference[url]) {
-            return Promise.resolve(cacheReference[url]);
-        }
-
-        return new Promise((resolve, reject) => {
-            let fileRequest = Tools.LoadFile(url, (result) => {
-                let idx = this._loadRequests.indexOf(fileRequest);
-                if (idx !== -1) {
-                    this._loadRequests.splice(idx, 1);
-                }
-                if (this._enableCache) { cacheReference[url] = result; }
-                resolve(result);
-            }, undefined, undefined, false, (request, error: any) => {
-                let idx = this._loadRequests.indexOf(fileRequest);
-                if (idx !== -1) {
-                    this._loadRequests.splice(idx, 1);
-                }
-                reject(error);
-            });
-            this._loadRequests.push(fileRequest);
-        });
-    }
-
 }

Viewer/src/configuration/mappers.ts

@@ -1,4 +1,4 @@
-import { Tools } from 'babylonjs';
+import { Tools } from 'babylonjs/Misc/tools';
 import { ViewerConfiguration } from './configuration';
 
 import { kebabToCamel } from '../helper/';

Viewer/src/configuration/renderOnlyLoader.ts

@@ -0,0 +1,164 @@
+import { mapperManager } from './mappers';
+import { ViewerConfiguration } from './configuration';
+import { processConfigurationCompatibility } from './configurationCompatibility';
+
+import { deepmerge } from '../helper';
+import { IFileRequest, Tools } from 'babylonjs/Misc/tools';
+import { extendedConfiguration } from './types/extended';
+import { renderOnlyDefaultConfiguration } from './types/renderOnlyDefault';
+
+/**
+ * The configuration loader will load the configuration object from any source and will use the defined mapper to
+ * parse the object and return a conform ViewerConfiguration.
+ * It is a private member of the scene.
+ */
+export class RenderOnlyConfigurationLoader {
+
+    private _configurationCache: { [url: string]: any };
+
+    private _loadRequests: Array<IFileRequest>;
+
+    constructor(private _enableCache: boolean = false) {
+        this._configurationCache = {};
+        this._loadRequests = [];
+    }
+
+    private _getConfigurationTypeExcludeTemplate (types: string): ViewerConfiguration {
+        let config: ViewerConfiguration = {};
+        let typesSeparated = types.split(",");
+        typesSeparated.forEach((type) => {
+            switch (type.trim()) {
+                case 'default':
+                    config = deepmerge(config, renderOnlyDefaultConfiguration);
+                    break;
+                case 'none':
+                    break;
+                case 'extended':
+                default:
+                    config = deepmerge(config, extendedConfiguration);
+                    break;
+            }
+            if (config.extends) {
+                config = deepmerge(config, this._getConfigurationTypeExcludeTemplate(config.extends));
+            }
+        });
+        return config;
+    };
+
+    protected getExtendedConfig(type:string|undefined){
+        return this._getConfigurationTypeExcludeTemplate(type || "extended");
+    }
+
+    /**
+     * load a configuration object that is defined in the initial configuration provided.
+     * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
+     *
+     * @param initConfig the initial configuration that has the definitions of further configuration to load.
+     * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
+     * @returns A promise that delivers the extended viewer configuration, when done.
+     */
+    public loadConfiguration(initConfig: ViewerConfiguration = {}, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration> {
+
+        let loadedConfig: ViewerConfiguration = deepmerge({}, initConfig);
+        this._processInitialConfiguration(loadedConfig);
+        
+        let extendedConfiguration = this.getExtendedConfig(loadedConfig.extends);
+
+        if (loadedConfig.configuration) {
+
+            let mapperType = "json";
+            return Promise.resolve().then(() => {
+                if (typeof loadedConfig.configuration === "string" || (loadedConfig.configuration && loadedConfig.configuration.url)) {
+                    // a file to load
+
+                    let url: string = '';
+                    if (typeof loadedConfig.configuration === "string") {
+                        url = loadedConfig.configuration;
+                    }
+
+                    // if configuration is an object
+                    if (typeof loadedConfig.configuration === "object" && loadedConfig.configuration.url) {
+                        url = loadedConfig.configuration.url;
+                        let type = loadedConfig.configuration.mapper;
+                        // empty string?
+                        if (!type) {
+                            // load mapper type from filename / url
+                            type = loadedConfig.configuration.url.split('.').pop();
+                        }
+                        mapperType = type || mapperType;
+                    }
+                    return this._loadFile(url);
+                } else {
+                    if (typeof loadedConfig.configuration === "object") {
+                        mapperType = loadedConfig.configuration.mapper || mapperType;
+                        return loadedConfig.configuration.payload || {};
+                    }
+                    return {};
+
+                }
+            }).then((data: any) => {
+                let mapper = mapperManager.getMapper(mapperType);
+                let parsed = deepmerge(mapper.map(data), loadedConfig);
+                let merged = deepmerge(extendedConfiguration, parsed);
+                processConfigurationCompatibility(merged);
+                if (callback) { callback(merged); }
+                return merged;
+            });
+        } else {
+            loadedConfig = deepmerge(extendedConfiguration, loadedConfig);
+            processConfigurationCompatibility(loadedConfig);
+            if (callback) { callback(loadedConfig); }
+            return Promise.resolve(loadedConfig);
+        }
+    }
+
+    /**
+     * Dispose the configuration loader. This will cancel file requests, if active.
+     */
+    public dispose() {
+        this._loadRequests.forEach((request) => {
+            request.abort();
+        });
+        this._loadRequests.length = 0;
+    }
+
+    /**
+     * This function will process the initial configuration and make needed changes for the viewer to work.
+     * @param config the mutable(!) initial configuration to process
+     */
+    private _processInitialConfiguration(config: ViewerConfiguration) {
+        if (config.model) {
+            if (typeof config.model === "string") {
+                config.model = {
+                    url: config.model
+                };
+            }
+        }
+    }
+
+    private _loadFile(url: string): Promise<any> {
+        let cacheReference = this._configurationCache;
+        if (this._enableCache && cacheReference[url]) {
+            return Promise.resolve(cacheReference[url]);
+        }
+
+        return new Promise((resolve, reject) => {
+            let fileRequest = Tools.LoadFile(url, (result) => {
+                let idx = this._loadRequests.indexOf(fileRequest);
+                if (idx !== -1) {
+                    this._loadRequests.splice(idx, 1);
+                }
+                if (this._enableCache) { cacheReference[url] = result; }
+                resolve(result);
+            }, undefined, undefined, false, (request, error: any) => {
+                let idx = this._loadRequests.indexOf(fileRequest);
+                if (idx !== -1) {
+                    this._loadRequests.splice(idx, 1);
+                }
+                reject(error);
+            });
+            this._loadRequests.push(fileRequest);
+        });
+    }
+    
+}

Viewer/src/configuration/types/default.ts

@@ -1,13 +1,14 @@
 import { ViewerConfiguration } from '../configuration';
-import { defaultTemplate, fillContainer, loadingScreen, defaultViewer, navbar, overlay, help, share, error } from 'babylonjs-viewer-assets';
-import { babylonFont } from 'babylonjs-viewer-assets';
+import { babylonFont, defaultTemplate, fillContainer, loadingScreen, defaultViewer, navbar, overlay, help, share, error } from 'babylonjs-viewer-assets';
 import * as images from 'babylonjs-viewer-assets';
+import { renderOnlyDefaultConfiguration } from './renderOnlyDefault';
+import { deepmerge } from '../../helper';
 
 /**
  * The default configuration of the viewer, including templates (canvas, overly, loading screen)
  * This configuration doesn't hold specific parameters, and only defines objects that are needed for the viewer to fully work correctly.
  */
-export let defaultConfiguration: ViewerConfiguration = {
+export let defaultConfiguration: ViewerConfiguration = deepmerge(renderOnlyDefaultConfiguration, {
     version: "3.2.0-alpha4",
     templates: {
         main: {
@@ -119,4 +120,4 @@ export let defaultConfiguration: ViewerConfiguration = {
     },
     scene: {
     }
-};
+});

Viewer/src/configuration/types/environmentMap.ts

@@ -7,7 +7,7 @@ export const environmentMapConfiguration: ViewerConfiguration = {
     lab: {
         assetsRootURL: '/assets/environment/',
         environmentMap: {
-            texture: 'EnvMap_2.0-256.env',
+            texture: 'EnvMap_3.0-256.env',
             rotationY: 0,
             tintLevel: 0.4
         }

Viewer/src/configuration/types/extended.ts

@@ -1,5 +1,5 @@
 import { ViewerConfiguration } from './../configuration';
-import { Tools } from 'babylonjs';
+import { Tools } from 'babylonjs/Misc/tools';
 
 /**
  * The viewer's "extended" configuration.

Viewer/src/configuration/types/minimal.ts

@@ -1,6 +1,5 @@
 import { ViewerConfiguration } from './../configuration';
-import { defaultTemplate, fillContainer, loadingScreen, defaultViewer, overlay, error } from 'babylonjs-viewer-assets';
-import { loading, close } from 'babylonjs-viewer-assets';
+import { defaultTemplate, fillContainer, loadingScreen, defaultViewer, overlay, error, loading, close } from 'babylonjs-viewer-assets';
 
 /**
  * The minimal configuration needed to make the viewer work.

Viewer/src/configuration/types/renderOnlyDefault.ts

@@ -0,0 +1,32 @@
+/**
+ * The render only default configuration of the viewer, including templates (canvas, overly, loading screen)
+ * This configuration doesn't hold specific parameters, and only defines objects that are needed for the render only viewer viewer to fully work correctly.
+ */
+export let renderOnlyDefaultConfiguration = {
+    version: "3.2.0-alpha4",
+    camera: {
+        behaviors: {
+            autoRotate: {
+                type: 0
+            },
+            framing: {
+                type: 2,
+                zoomOnBoundingInfo: true,
+                zoomStopsAnimation: false
+            },
+            bouncing: {
+                type: 1
+            }
+        }
+    },
+    skybox: {
+    },
+    ground: {
+        receiveShadows: true
+    },
+    engine: {
+        antialiasing: true
+    },
+    scene: {
+    }
+};

Viewer/src/labs/environmentSerializer.ts

@@ -1,4 +1,5 @@
-import { Vector3, Tools } from "babylonjs";
+import { Vector3 } from 'babylonjs/Maths/math';
+import { Tools } from 'babylonjs/Misc/tools';
 import { TextureCube, PixelFormat, PixelType } from './texture';
 
 /**

Viewer/src/labs/texture.ts

@@ -1,4 +1,9 @@
-import { Scene, CubeTexture, InternalTexture, Scalar, BaseTexture, Texture } from "babylonjs";
+import { Scene } from "babylonjs/scene";
+import { CubeTexture } from "babylonjs/Materials/Textures/cubeTexture";
+import { InternalTexture } from "babylonjs/Materials/Textures/internalTexture";
+import { Scalar } from "babylonjs/Maths/math.scalar";
+import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+import { Texture } from "babylonjs/Materials/Textures/texture";
 
 /**
  * WebGL Pixel Formats

Viewer/src/labs/viewerLabs.ts

@@ -1,8 +1,11 @@
 import { PBREnvironment, EnvironmentDeserializer } from "./environmentSerializer";
-
-import { Tools, Quaternion, ShadowLight, Vector3, Axis, Matrix, SphericalPolynomial, Tmp, Scene } from 'babylonjs';
+import { Scene } from "babylonjs/scene";
+import { Vector3, Quaternion, Axis, Matrix, Tmp } from "babylonjs/Maths/math";
+import { SphericalPolynomial } from "babylonjs/Maths/sphericalPolynomial";
+import { ShadowLight } from "babylonjs/Lights/shadowLight";
 import { TextureUtils } from "./texture";
 
+
 /**
  * The ViewerLabs class will hold functions that are not (!) backwards compatible.
  * The APIs in all labs-related classes and configuration  might change.

Viewer/src/loader/modelLoader.ts

@@ -1,5 +1,8 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoader, Tags, Tools } from 'babylonjs';
-import { GLTFFileLoader, GLTFLoaderAnimationStartMode } from 'babylonjs-loaders';
+import {GLTFFileLoader, GLTFLoaderAnimationStartMode} from "babylonjs-loaders/glTF/glTFFileLoader"
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
+import { Tools } from 'babylonjs/Misc/tools';
+import { SceneLoader } from 'babylonjs/Loading/sceneLoader';
+import { Tags } from 'babylonjs/Misc/tags';
 
 import { ConfigurationContainer } from '../configuration/configurationContainer';
 import { IModelConfiguration } from '../configuration/interfaces/modelConfiguration';
@@ -63,7 +66,7 @@ export class ModelLoader {
      * @param modelConfiguration the modelConfiguration to use to load the model
      */
     public load(modelConfiguration: IModelConfiguration): ViewerModel {
-
+        
         const model = new ViewerModel(this._observablesManager, modelConfiguration, this._configurationContainer);
 
         model.loadId = this._loadId++;

Viewer/src/loader/plugins/applyMaterialConfig.ts

@@ -1,7 +1,7 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material } from 'babylonjs';
-
 import { ViewerModel } from '../../model/viewerModel';
 import { ILoaderPlugin } from './loaderPlugin';
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
+import { Material } from 'babylonjs/Materials/material';
 
 /**
  * Force-apply material configuration right after a material was loaded.

Viewer/src/loader/plugins/extendedMaterialLoaderPlugin.ts

@@ -1,5 +1,6 @@
-import { Engine, Material, PBRMaterial } from 'babylonjs';
-
+import { Material } from 'babylonjs/Materials/material';
+import { PBRMaterial } from 'babylonjs/Materials/PBR/pbrMaterial';
+import { Engine } from 'babylonjs/Engines/engine';
 import { ILoaderPlugin } from './loaderPlugin';
 
 /**

Viewer/src/loader/plugins/index.ts

@@ -3,7 +3,7 @@ import { ILoaderPlugin } from "./loaderPlugin";
 import { MSFTLodLoaderPlugin } from './msftLodLoaderPlugin';
 import { ApplyMaterialConfigPlugin } from './applyMaterialConfig';
 import { ExtendedMaterialLoaderPlugin } from './extendedMaterialLoaderPlugin';
-import { Tools } from "babylonjs";
+import { Tools } from "babylonjs/Misc/tools";
 
 const pluginCache: { [key: string]: ILoaderPlugin } = {};
 

Viewer/src/loader/plugins/loaderPlugin.ts

@@ -1,6 +1,10 @@
 import { ViewerModel } from "../../model/viewerModel";
-import { IGLTFLoaderExtension, IGLTFLoaderData } from "babylonjs-loaders";
-import { AbstractMesh, ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoaderProgressEvent, BaseTexture, Material } from "babylonjs";
+import { IGLTFLoaderExtension, IGLTFLoaderData } from "babylonjs-loaders/glTF/glTFFileLoader";
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
+import { SceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
+import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+import { Material } from "babylonjs/Materials/material";
 
 /**
  * This interface defines the structure of a loader plugin.

Viewer/src/loader/plugins/msftLodLoaderPlugin.ts

@@ -1,6 +1,6 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs';
-import { IGLTFLoaderExtension, GLTF2 } from 'babylonjs-loaders';
-
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
+import { IGLTFLoaderExtension } from 'babylonjs-loaders/glTF/2.0/glTFLoaderExtension';
+import { GLTF2 } from 'babylonjs-loaders/glTF/index';
 import { ViewerModel } from '../../model/viewerModel';
 import { ILoaderPlugin } from './loaderPlugin';
 

Viewer/src/loader/plugins/telemetryLoaderPlugin.ts

@@ -1,7 +1,8 @@
 import { ILoaderPlugin } from "./loaderPlugin";
 import { telemetryManager } from "../../managers/telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, PrecisionDate } from "babylonjs";
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
+import { PrecisionDate } from "babylonjs/Misc/precisionDate";
 
 export class TelemetryLoaderPlugin implements ILoaderPlugin {
 

Viewer/src/managers/observablesManager.ts

@@ -1,4 +1,7 @@
-import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
+import { Observable } from 'babylonjs/Misc/observable';
+import { Scene } from 'babylonjs/scene';
+import { Engine } from 'babylonjs/Engines/engine';
+import { SceneLoaderProgressEvent, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
 
 import { ViewerModel } from '../model/viewerModel';
 

Viewer/src/managers/telemetryManager.ts

@@ -1,4 +1,6 @@
-import { Engine, Observable } from "babylonjs";
+import { Observable } from "babylonjs/Misc/observable";
+import { Engine } from "babylonjs/Engines/engine";
+
 
 /**
  * The data structure of a telemetry event.

Viewer/src/model/modelAnimation.ts

@@ -1,4 +1,5 @@
-import { Animatable, AnimationGroup, Vector3 } from 'babylonjs';
+import { Vector3 } from "babylonjs/Maths/math";
+import { AnimationGroup, Animatable } from "babylonjs/Animations/index";
 
 /**
  * Animation play mode enum - is the animation looping or playing once
@@ -267,10 +268,10 @@ export class GroupModelAnimation implements IModelAnimation {
      */
     restart() {
         if (this.state === AnimationState.PAUSED) {
-            this._animationGroup.restart();
+            this._animationGroup.restart();
         }
         else {
-            this.start();
+            this.start();
         }
     }
 

Viewer/src/model/viewerModel.ts

@@ -1,5 +1,20 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, Animatable, AbstractMesh, Tools, Scene, SceneLoader, Observable, SceneLoaderProgressEvent, Tags, IParticleSystem, Skeleton, IDisposable, Nullable, Animation, Quaternion, Material, Vector3, AnimationPropertiesOverride, QuinticEase, SineEase, CircleEase, BackEase, BounceEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, PBRMaterial, MultiMaterial } from "babylonjs";
-import { GLTFFileLoader } from "babylonjs-loaders";
+import { IDisposable } from "babylonjs/scene";
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
+import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
+import { Skeleton } from "babylonjs/Bones/skeleton";
+import { Observable } from "babylonjs/Misc/observable";
+import { SceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
+import { AnimationGroup } from "babylonjs/Animations/animationGroup";
+import { Animation, Animatable, CircleEase, BackEase, BounceEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase } from "babylonjs/Animations/index";
+import { Nullable } from "babylonjs/types";
+import { Quaternion, Vector3 } from "babylonjs/Maths/math";
+import { Tags } from "babylonjs/Misc/tags";
+import { Material } from "babylonjs/Materials/material";
+import { PBRMaterial } from "babylonjs/Materials/PBR/pbrMaterial";
+import { MultiMaterial } from "babylonjs/Materials/multiMaterial";
+import { Tools } from "babylonjs/Misc/tools";
+import { GLTFFileLoader } from "babylonjs-loaders/glTF/index";
 import { IAsset } from "babylonjs-gltf2interface";
 import { IModelConfiguration } from "../configuration/interfaces/modelConfiguration";
 import { IModelAnimationConfiguration } from "../configuration/interfaces/modelAnimationConfiguration";

Viewer/src/optimizer/custom/extended.ts

@@ -1,4 +1,5 @@
-import { Scalar, DefaultRenderingPipeline, Scene } from 'babylonjs';
+import { DefaultRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
+import { Scalar } from 'babylonjs/Maths/math.scalar';
 import { SceneManager } from '../../managers/sceneManager';
 
 /**

Viewer/src/renderOnlyIndex.ts

@@ -0,0 +1,18 @@
+import { RenderOnlyViewer } from './viewer/renderOnlyViewer';
+
+// Required side effects
+import 'babylonjs-loaders/glTF/2.0';
+import "babylonjs/Lights/Shadows/shadowGeneratorSceneComponent"
+import "babylonjs/Debug/debugLayer";
+import "babylonjs/Meshes/Builders/planeBuilder";
+import "babylonjs/Meshes/Builders/boxBuilder";
+import "babylonjs/Materials/Textures/Loaders/ddsTextureLoader"
+import "babylonjs/Materials/Textures/Loaders/envTextureLoader"
+import "babylonjs/Materials/Textures/Loaders/ktxTextureLoader"
+import "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent";
+
+// Override default material factory to avoid the dependency on standard material
+import { Scene } from 'babylonjs/scene';
+Scene.DefaultMaterialFactory = (scene:Scene)=>{return null as any};
+
+export { RenderOnlyViewer };

Viewer/src/templating/plugins/printButton.ts

@@ -1,7 +1,7 @@
 import { AbstractViewerNavbarButton } from "../viewerTemplatePlugin";
 import { DefaultViewer } from "../../viewer/defaultViewer";
 import { EventCallback } from "../templateManager";
-import { Tools } from "babylonjs";
+import { Tools } from "babylonjs/Misc/tools";
 
 export class PrintButtonPlugin extends AbstractViewerNavbarButton {
 

Viewer/src/templating/templateManager.ts

@@ -1,5 +1,5 @@
-
-import { Observable, IFileRequest, Tools } from 'babylonjs';
+import { Observable } from 'babylonjs/Misc/observable';
+import { IFileRequest, Tools } from 'babylonjs/Misc/tools';
 import { isUrl, camelToKebab, kebabToCamel } from '../helper';
 
 import * as Handlebars from 'handlebars/dist/handlebars';

Viewer/src/viewer/defaultViewer.ts

@@ -1,8 +1,14 @@
 
-import { ViewerConfiguration, IModelConfiguration, ILightConfiguration } from './../configuration';
+import { ViewerConfiguration, IModelConfiguration, ILightConfiguration, ISceneConfiguration } from './../configuration';
 import { Template, EventCallback } from '../templating/templateManager';
-import { AbstractViewer } from './viewer';
-import { SpotLight, Vector3, FilesInput } from 'babylonjs';
+import { FilesInput } from 'babylonjs/Misc/filesInput';
+import { SpotLight } from 'babylonjs/Lights/spotLight';
+import { Vector3 } from 'babylonjs/Maths/math';
+import { TemplateManager } from '../templating/templateManager';
+import { AbstractViewerWithTemplate } from './viewerWithTemplate';
+import { StandardMaterial } from 'babylonjs/Materials/standardMaterial';
+import { PBRMaterial } from 'babylonjs/Materials/PBR/pbrMaterial';
+import { extendClassWithConfig } from '../helper';
 import { ViewerModel } from '../model/viewerModel';
 import { IModelAnimation, AnimationState } from '../model/modelAnimation';
 import { IViewerTemplatePlugin } from '../templating/viewerTemplatePlugin';
@@ -13,7 +19,11 @@ import { PrintButtonPlugin } from '../templating/plugins/printButton';
  * The Default viewer is the default implementation of the AbstractViewer.
  * It uses the templating system to render a new canvas and controls.
  */
-export class DefaultViewer extends AbstractViewer {
+export class DefaultViewer extends AbstractViewerWithTemplate {
+    /**
+     * The corresponsing template manager of this viewer.
+     */
+    public templateManager: TemplateManager;
 
     public fullscreenElement?: Element;
 
@@ -24,7 +34,7 @@ export class DefaultViewer extends AbstractViewer {
      */
     constructor(public containerElement: Element, initialConfiguration: ViewerConfiguration = { extends: 'default' }) {
         super(containerElement, initialConfiguration);
-
+        
         this.onModelLoadedObservable.add(this._onModelLoaded);
         this.onModelRemovedObservable.add(() => {
             this._configureTemplate();
@@ -37,6 +47,22 @@ export class DefaultViewer extends AbstractViewer {
         });
 
         this.onInitDoneObservable.add(() => {
+            this.sceneManager.setDefaultMaterial = function(sceneConfig: ISceneConfiguration){
+                let conf = sceneConfig.defaultMaterial;
+                if(!conf){
+                    return;
+                }
+                if ((conf.materialType === 'standard' && this.scene.defaultMaterial.getClassName() !== 'StandardMaterial') ||
+                    (conf.materialType === 'pbr' && this.scene.defaultMaterial.getClassName() !== 'PBRMaterial')) {
+                    this.scene.defaultMaterial.dispose();
+                    if (conf.materialType === 'standard') {
+                        this.scene.defaultMaterial = new StandardMaterial("defaultMaterial", this.scene);
+                    } else {
+                        this.scene.defaultMaterial = new PBRMaterial("defaultMaterial", this.scene);
+                    }
+                }
+                extendClassWithConfig(this.scene.defaultMaterial, conf);
+            }
             if (!this.sceneManager.models.length) {
                 this.hideLoadingScreen();
             }
@@ -205,7 +231,7 @@ export class DefaultViewer extends AbstractViewer {
                 }
                 var speed = element.dataset["value"];
                 if (speed) {
-                    this._updateAnimationSpeed(speed);
+                    this._updateAnimationSpeed(speed);
                 }
                 break;
             case "progress-wrapper":
@@ -601,6 +627,8 @@ export class DefaultViewer extends AbstractViewer {
 
         super._onConfigurationLoaded(configuration);
 
+        this.templateManager = new TemplateManager(this.containerElement);
+
         // initialize the templates
         let templateConfiguration = this.configuration.templates || {};
 

Viewer/src/viewer/renderOnlyViewer.ts

@@ -0,0 +1,30 @@
+
+import { ViewerConfiguration } from '../configuration';
+import { AbstractViewer } from './viewer';
+
+export class RenderOnlyViewer extends AbstractViewer {
+    constructor(public containerElement: Element, initialConfiguration: ViewerConfiguration = {}) {
+        super(containerElement, initialConfiguration);
+        this._canvas = containerElement as HTMLCanvasElement
+    }
+    public initialize(){
+        let autoLoad = typeof this.configuration.model === 'string' || (this.configuration.model && this.configuration.model.url);
+        return this._initEngine().then((engine) => {
+            return this.onEngineInitObservable.notifyObserversWithPromise(engine);
+        }).then(() => {
+            this._initTelemetryEvents();
+            if (autoLoad) {
+                return this.loadModel(this.configuration.model!).catch(() => { }).then(() => { return this.sceneManager.scene; });
+            } else {
+                return this.sceneManager.scene || this.sceneManager.initScene(this.configuration.scene);
+            }
+        }).then(() => {
+            return this.onInitDoneObservable.notifyObserversWithPromise(this);
+        }).catch((e) => {
+            console.log(e.toString());
+            return this;
+        });
+    }
+    protected _prepareContainerElement() {
+    }
+}

Viewer/src/viewer/viewer.ts

@@ -1,16 +1,24 @@
-import { Effect, Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, RenderingManager, Scene, SceneLoaderProgressEvent, TargetCamera, Tools, Vector3, Observer } from 'babylonjs';
+import { Engine } from 'babylonjs/Engines/engine';
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoaderProgressEvent } from 'babylonjs/Loading/sceneLoader';
+import { Observable } from 'babylonjs/Misc/observable';
+import { Scene } from 'babylonjs/scene';
+import { RenderingManager } from 'babylonjs/Rendering/renderingManager';
+import { Vector3 } from 'babylonjs/Maths/math';
+import { TargetCamera } from 'babylonjs/Cameras/targetCamera';
+import { Tools } from 'babylonjs/Misc/tools';
+import { Effect } from 'babylonjs/Materials/effect';
+import { ConfigurationLoader } from '../configuration/loader';
 import { IModelConfiguration, IObserversConfiguration, ViewerConfiguration } from '../configuration/';
 import { processConfigurationCompatibility } from '../configuration/configurationCompatibility';
 import { ConfigurationContainer } from '../configuration/configurationContainer';
 import { viewerGlobals } from '../configuration/globals';
-import { ConfigurationLoader } from '../configuration/loader';
+import { RenderOnlyConfigurationLoader } from '../configuration/renderOnlyLoader';
 import { deepmerge } from '../helper/';
 import { ModelLoader } from '../loader/modelLoader';
 import { ObservablesManager } from '../managers/observablesManager';
 import { SceneManager } from '../managers/sceneManager';
 import { telemetryManager } from '../managers/telemetryManager';
 import { ViewerModel } from '../model/viewerModel';
-import { TemplateManager } from '../templating/templateManager';
 import { viewerManager } from './viewerManager';
 
 /**
@@ -18,13 +26,6 @@ import { viewerManager } from './viewerManager';
  * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
  */
 export abstract class AbstractViewer {
-
-    /**
-     * The corresponsing template manager of this viewer.
-     */
-    public templateManager: TemplateManager;
-    // TODO get the template manager to the default viewer, if no one is extending the abstract viewer
-
     /**
      * Babylon Engine corresponding with this viewer
      */
@@ -160,7 +161,7 @@ export abstract class AbstractViewer {
     /**
      * The configuration loader of this viewer
      */
-    protected _configurationLoader: ConfigurationLoader;
+    protected _configurationLoader: RenderOnlyConfigurationLoader;
 
     /**
      * Is the viewer already initialized. for internal use.
@@ -173,6 +174,10 @@ export abstract class AbstractViewer {
         return this._configurationContainer;
     }
 
+    protected getConfigurationLoader(){
+        return new RenderOnlyConfigurationLoader();
+    }
+
     constructor(public containerElement: Element, initialConfiguration: ViewerConfiguration = {}) {
         // if exists, use the container id. otherwise, generate a random string.
         if (containerElement.id) {
@@ -192,7 +197,7 @@ export abstract class AbstractViewer {
         RenderingManager.AUTOCLEAR = false;
 
         // extend the configuration
-        this._configurationLoader = new ConfigurationLoader();
+        this._configurationLoader = this.getConfigurationLoader();
         this._configurationLoader.loadConfiguration(initialConfiguration, (configuration) => {
             this._onConfigurationLoaded(configuration);
         });
@@ -417,8 +422,6 @@ export abstract class AbstractViewer {
             }));
         }
 
-        this.templateManager = new TemplateManager(this.containerElement);
-
         this.observablesManager.onViewerInitStartedObservable.notifyObservers(this);
     }
 
@@ -680,7 +683,6 @@ export abstract class AbstractViewer {
      * @returns a ViewerModel object that is not yet fully loaded.
      */
     public initModel(modelConfig: string | File | IModelConfiguration, clearScene: boolean = true): ViewerModel {
-
         let configuration: IModelConfiguration;
         if (typeof modelConfig === 'string') {
             configuration = {
@@ -748,7 +750,7 @@ export abstract class AbstractViewer {
             // We can decide here whether or not to cancel the lst load, but the developer can do that.
             return Promise.reject("another model is curently being loaded.");
         }
-
+        
         return Promise.resolve(this.sceneManager.scene).then((scene) => {
             if (!scene) { return this.sceneManager.initScene(this.configuration.scene, this.configuration.optimizer); }
             return scene;

Viewer/src/viewer/viewerManager.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'babylonjs';
+import { Observable } from 'babylonjs/Misc/observable';
 import { AbstractViewer } from './viewer';
 
 /**

Viewer/src/viewer/viewerWithTemplate.ts

@@ -0,0 +1,12 @@
+import { AbstractViewer } from "./viewer";
+import { ConfigurationLoader } from "../configuration/loader";
+
+/**
+ * The AbstractViewer is the center of Babylon's viewer.
+ * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+ */
+export abstract class AbstractViewerWithTemplate extends AbstractViewer {
+    protected getConfigurationLoader(){
+        return new ConfigurationLoader();
+    }
+}

Viewer/tests/unit/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 
+const ViewerResolve = require('../../../Tools/WebpackPlugins/viewerResolve');
+
 module.exports = {
     context: __dirname,
     entry: {
@@ -17,7 +19,10 @@ module.exports = {
             "babylonjs-materials": __dirname + '/../../../dist/preview release/materialsLibrary/babylonjs.materials.js',
             "babylonjs-loaders": __dirname + '/../../../dist/preview release/loaders/babylonjs.loaders.js',
             "babylonjs-viewer-assets": __dirname + '/../../src/assets/index.ts'
-        }
+        },
+        plugins: [
+            new ViewerResolve(["babylonjs", "babylonjs-loaders"])
+        ]
     },
     mode: "development",
     devtool: 'source-map',

Viewer/tsconfig.json

@@ -22,10 +22,10 @@
         "baseUrl": "./src/",
         "rootDir": "./",
         "paths": {
-            "babylonjs": [
+            "babylonjs/*": [
                 "../../dist/preview release/babylon.module.d.ts"
             ],
-            "babylonjs-loaders": [
+            "babylonjs-loaders/*": [
                 "../../dist/preview release/loaders/babylonjs.loaders.module.d.ts"
             ],
             "babylonjs-gltf2interface": [
@@ -35,7 +35,7 @@
                 "./helper/deepmerge.d.ts"
             ],
             "handlebars": [
-                "./templates/handlebars.d.ts"
+                "./templating/handlebars.d.ts"
             ],
             "babylonjs-viewer-assets": [
                 "./assets/"

Viewer/webpack.config.js

@@ -1,52 +1,13 @@
 const path = require('path');
 const webpack = require('webpack');
 
-module.exports = /*[
-    {
-    entry: {
-        'assets': './src/assets/index.ts'
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js',
-        devtoolModuleFilenameTemplate: '[relative-resource-path]'
-    },
-    plugins: [
-        new webpack.WatchIgnorePlugin([
-            /\.d\.ts$/
-        ])
-    ],
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-    module: {
-        loaders: [{
-            test: /\.tsx?$/,
-            loader: 'ts-loader',
-            exclude: /node_modules/
-        },
-        {
-            test: /\.(html)$/,
-            use: {
-                loader: 'html-loader',
-                options: {
-                    minimize: true
-                }
-            }
-        },
-        {
-            test: /\.(jpe?g|png|ttf|eot|svg?)(\?[a-z0-9=&.]+)?$/,
-            use: 'base64-image-loader?limit=1000&name=[name].[ext]'
-        },
-        {
-            test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-            loader: 'base64-font-loader'
-        }]
-    }
-},*/
+const ViewerResolve = require('../Tools/WebpackPlugins/viewerResolve');
+
+module.exports = 
     {
         entry: {
             'viewer': './src/index.ts',
+            'renderOnlyViewer': './src/renderOnlyIndex.ts',
         },
         output: {
             path: path.resolve(__dirname, 'dist'),
@@ -63,8 +24,12 @@ module.exports = /*[
                 "babylonjs-materials": __dirname + '/../dist/preview release/materialsLibrary/babylonjs.materials.js',
                 "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
                 "babylonjs-viewer-assets": __dirname + '/src/assets/index.ts'
-            }
+            },
+            plugins: [
+                new ViewerResolve(["babylonjs", "babylonjs-loaders"])
+            ]
         },
+        externals: [],
         mode: "development",
         devtool: 'source-map',
         plugins: [
@@ -102,5 +67,4 @@ module.exports = /*[
             //open: true,
             port: 9000
         }
-    }
-//]
+    }

Viewer/webpack.gulp.config.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 
+const ViewerResolve = require('../Tools/WebpackPlugins/viewerResolve');
+
 module.exports = {
     context: __dirname,
     entry: [
@@ -18,7 +20,10 @@ module.exports = {
             "babylonjs-materials": __dirname + '/../dist/preview release/materialsLibrary/babylonjs.materials.js',
             "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
             "babylonjs-viewer-assets": __dirname + '/src/assets/index.ts'
-        }
+        },
+        plugins: [
+            new ViewerResolve(["babylonjs", "babylonjs-loaders"])
+        ]
     },
     mode: "production",
     module: {

dist/preview release/viewer/babylon.viewer.d.ts

@@ -5,8 +5,31 @@ declare module "babylonjs-loaders"{ export=BABYLON;}
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../../../../../Tools/Gulp/babylonjs
+//   ../../../../../Tools/Gulp/babylonjs/Misc/observable
+//   ../../../../../Tools/Gulp/babylonjs/Engines/engine
+//   ../../../../../Tools/Gulp/babylonjs/Loading/sceneLoader
+//   ../../../../../Tools/Gulp/babylonjs/scene
+//   ../../../../../Tools/Gulp/babylonjs/Meshes/abstractMesh
+//   ../../../../../Tools/Gulp/babylonjs/Particles/IParticleSystem
+//   ../../../../../Tools/Gulp/babylonjs/Bones/skeleton
+//   ../../../../../Tools/Gulp/babylonjs/Animations/animationGroup
+//   ../../../../../Tools/Gulp/babylonjs/Animations/index
+//   ../../../../../Tools/Gulp/babylonjs/types
+//   ../../../../../Tools/Gulp/babylonjs/Materials/material
 //   ../../../../../Tools/Gulp/babylonjs-gltf2interface
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../Tools/Gulp/babylonjs/Maths/math
+//   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/glTFFileLoader
+//   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/baseTexture
+//   ../../../../../Tools/Gulp/babylonjs/Misc/sceneOptimizer
+//   ../../../../../Tools/Gulp/babylonjs/Cameras/arcRotateCamera
+//   ../../../../../Tools/Gulp/babylonjs/Lights/light
+//   ../../../../../Tools/Gulp/babylonjs/Helpers/environmentHelper
+//   ../../../../../Tools/Gulp/babylonjs/Cameras/VR/vrExperienceHelper
+//   ../../../../../Tools/Gulp/babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline
+//   ../../../../../Tools/Gulp/babylonjs/Lights/shadowLight
+//   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/2.0/glTFLoaderExtension
+//   ../../../../../Tools/Gulp/babylonjs/PostProcesses/depthOfFieldEffect
+//   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/cubeTexture
 declare module BabylonViewer {
     /**
         * BabylonJS Viewer
@@ -128,8 +151,12 @@ declare module BabylonViewer {
         * The Default viewer is the default implementation of the AbstractViewer.
         * It uses the templating system to render a new canvas and controls.
         */
-    export class DefaultViewer extends AbstractViewer {
+    export class DefaultViewer extends AbstractViewerWithTemplate {
             containerElement: Element;
+            /**
+                * The corresponsing template manager of this viewer.
+                */
+            templateManager: TemplateManager;
             fullscreenElement?: Element;
             /**
                 * Create a new default viewer
@@ -141,7 +168,7 @@ declare module BabylonViewer {
             /**
                 * This will be executed when the templates initialize.
                 */
-            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _onTemplatesLoaded(): Promise<import("./viewer").AbstractViewer>;
             protected _initVR(): void;
             /**
                 * Toggle fullscreen of the entire viewer
@@ -207,10 +234,6 @@ declare module BabylonViewer {
     export abstract class AbstractViewer {
             containerElement: Element;
             /**
-                * The corresponsing template manager of this viewer.
-                */
-            templateManager: TemplateManager;
-            /**
                 * Babylon BABYLON.Engine corresponding with this viewer
                 */
             engine: BABYLON.Engine;
@@ -309,13 +332,14 @@ declare module BabylonViewer {
             /**
                 * The configuration loader of this viewer
                 */
-            protected _configurationLoader: ConfigurationLoader;
+            protected _configurationLoader: RenderOnlyConfigurationLoader;
             /**
                 * Is the viewer already initialized. for internal use.
                 */
             protected _isInit: boolean;
             protected _configurationContainer: ConfigurationContainer;
             readonly configurationContainer: ConfigurationContainer;
+            protected getConfigurationLoader(): RenderOnlyConfigurationLoader;
             constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
             /**
                 * get the baseId of this viewer
@@ -1203,6 +1227,15 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    /**
+      * The AbstractViewer is the center of Babylon's viewer.
+      * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+      */
+    export abstract class AbstractViewerWithTemplate extends AbstractViewer {
+        protected getConfigurationLoader(): ConfigurationLoader;
+    }
+}
+declare module BabylonViewer {
     export class ConfigurationContainer {
         configuration: ViewerConfiguration;
         viewerId: string;
@@ -1217,8 +1250,9 @@ declare module BabylonViewer {
         * parse the object and return a conform ViewerConfiguration.
         * It is a private member of the scene.
         */
-    export class ConfigurationLoader {
+    export class RenderOnlyConfigurationLoader {
             constructor(_enableCache?: boolean);
+            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
             /**
                 * load a configuration object that is defined in the initial configuration provided.
                 * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
@@ -1426,6 +1460,7 @@ declare module BabylonViewer {
             updateConfiguration(newConfiguration: Partial<ViewerConfiguration>): void;
             bloomEnabled: boolean;
             fxaaEnabled: boolean;
+            setDefaultMaterial(sceneConfig: ISceneConfiguration): void;
             /**
                 * internally configure the scene using the provided configuration.
                 * The scene will not be recreated, but just updated.
@@ -1615,6 +1650,11 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    export class ConfigurationLoader extends RenderOnlyConfigurationLoader {
+        protected getExtendedConfig(type: string | undefined): import("./configuration").ViewerConfiguration;
+    }
+}
+declare module BabylonViewer {
     /**
         * The ViewerLabs class will hold functions that are not (!) backwards compatible.
         * The APIs in all labs-related classes and configuration  might change.

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

@@ -1,13 +1,36 @@
-/// <reference path="./babylon.module.d.ts"/>
-/// <reference path="./babylon.glTF2Interface.d.ts"/>
-/// <reference path="./babylonjs.loaders.d.ts"/>
-declare module "babylonjs-loaders"{ export=BABYLON;}
-
+/// <reference path="./babylon.module.d.ts"/>
+/// <reference path="./babylon.glTF2Interface.d.ts"/>
+/// <reference path="./babylonjs.loaders.d.ts"/>
+declare module "babylonjs-loaders"{ export=BABYLON;}
+
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../../../../../Tools/Gulp/babylonjs
+//   ../../../../../Tools/Gulp/babylonjs/Misc/observable
+//   ../../../../../Tools/Gulp/babylonjs/Engines/engine
+//   ../../../../../Tools/Gulp/babylonjs/Loading/sceneLoader
+//   ../../../../../Tools/Gulp/babylonjs/scene
+//   ../../../../../Tools/Gulp/babylonjs/Meshes/abstractMesh
+//   ../../../../../Tools/Gulp/babylonjs/Particles/IParticleSystem
+//   ../../../../../Tools/Gulp/babylonjs/Bones/skeleton
+//   ../../../../../Tools/Gulp/babylonjs/Animations/animationGroup
+//   ../../../../../Tools/Gulp/babylonjs/Animations/index
+//   ../../../../../Tools/Gulp/babylonjs/types
+//   ../../../../../Tools/Gulp/babylonjs/Materials/material
 //   ../../../../../Tools/Gulp/babylonjs-gltf2interface
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../Tools/Gulp/babylonjs/Maths/math
+//   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/glTFFileLoader
+//   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/baseTexture
+//   ../../../../../Tools/Gulp/babylonjs/Misc/sceneOptimizer
+//   ../../../../../Tools/Gulp/babylonjs/Cameras/arcRotateCamera
+//   ../../../../../Tools/Gulp/babylonjs/Lights/light
+//   ../../../../../Tools/Gulp/babylonjs/Helpers/environmentHelper
+//   ../../../../../Tools/Gulp/babylonjs/Cameras/VR/vrExperienceHelper
+//   ../../../../../Tools/Gulp/babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline
+//   ../../../../../Tools/Gulp/babylonjs/Lights/shadowLight
+//   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/2.0/glTFLoaderExtension
+//   ../../../../../Tools/Gulp/babylonjs/PostProcesses/depthOfFieldEffect
+//   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/cubeTexture
 
 declare module 'babylonjs-viewer' {
     import { mapperManager } from 'babylonjs-viewer/configuration/mappers';
@@ -95,7 +118,7 @@ declare module 'babylonjs-viewer/configuration/globals' {
 }
 
 declare module 'babylonjs-viewer/viewer/viewerManager' {
-    import { Observable } from 'babylonjs';
+    import { Observable } from 'babylonjs/Misc/observable';
     import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
     /**
         * The viewer manager is the container for all viewers currently registered on this page.
@@ -153,15 +176,20 @@ declare module 'babylonjs-viewer/viewer/viewerManager' {
 declare module 'babylonjs-viewer/viewer/defaultViewer' {
     import { ViewerConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration';
     import { Template } from 'babylonjs-viewer/templating/templateManager';
-    import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
+    import { TemplateManager } from 'babylonjs-viewer/templating/templateManager';
+    import { AbstractViewerWithTemplate } from 'babylonjs-viewer/viewer/viewerWithTemplate';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { IViewerTemplatePlugin } from 'babylonjs-viewer/templating/viewerTemplatePlugin';
     /**
         * The Default viewer is the default implementation of the AbstractViewer.
         * It uses the templating system to render a new canvas and controls.
         */
-    export class DefaultViewer extends AbstractViewer {
+    export class DefaultViewer extends AbstractViewerWithTemplate {
             containerElement: Element;
+            /**
+                * The corresponsing template manager of this viewer.
+                */
+            templateManager: TemplateManager;
             fullscreenElement?: Element;
             /**
                 * Create a new default viewer
@@ -173,7 +201,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
             /**
                 * This will be executed when the templates initialize.
                 */
-            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _onTemplatesLoaded(): Promise<import("./viewer").AbstractViewer>;
             protected _initVR(): void;
             /**
                 * Toggle fullscreen of the entire viewer
@@ -233,15 +261,17 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
 }
 
 declare module 'babylonjs-viewer/viewer/viewer' {
-    import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
+    import { Engine } from 'babylonjs/Engines/engine';
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoaderProgressEvent } from 'babylonjs/Loading/sceneLoader';
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { Scene } from 'babylonjs/scene';
     import { IModelConfiguration, IObserversConfiguration, ViewerConfiguration } from 'babylonjs-viewer/configuration';
     import { ConfigurationContainer } from 'babylonjs-viewer/configuration/configurationContainer';
-    import { ConfigurationLoader } from 'babylonjs-viewer/configuration/loader';
+    import { RenderOnlyConfigurationLoader } from 'babylonjs-viewer/configuration/renderOnlyLoader';
     import { ModelLoader } from 'babylonjs-viewer/loader/modelLoader';
     import { ObservablesManager } from 'babylonjs-viewer/managers/observablesManager';
     import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
-    import { TemplateManager } from 'babylonjs-viewer/templating/templateManager';
     /**
         * The AbstractViewer is the center of Babylon's viewer.
         * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
@@ -249,10 +279,6 @@ declare module 'babylonjs-viewer/viewer/viewer' {
     export abstract class AbstractViewer {
             containerElement: Element;
             /**
-                * The corresponsing template manager of this viewer.
-                */
-            templateManager: TemplateManager;
-            /**
                 * Babylon Engine corresponding with this viewer
                 */
             engine: Engine;
@@ -351,13 +377,14 @@ declare module 'babylonjs-viewer/viewer/viewer' {
             /**
                 * The configuration loader of this viewer
                 */
-            protected _configurationLoader: ConfigurationLoader;
+            protected _configurationLoader: RenderOnlyConfigurationLoader;
             /**
                 * Is the viewer already initialized. for internal use.
                 */
             protected _isInit: boolean;
             protected _configurationContainer: ConfigurationContainer;
             readonly configurationContainer: ConfigurationContainer;
+            protected getConfigurationLoader(): RenderOnlyConfigurationLoader;
             constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
             /**
                 * get the baseId of this viewer
@@ -567,7 +594,17 @@ declare module 'babylonjs-viewer/loader/modelLoader' {
 }
 
 declare module 'babylonjs-viewer/model/viewerModel' {
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, AbstractMesh, Observable, SceneLoaderProgressEvent, IParticleSystem, Skeleton, IDisposable, Nullable, Animation, Material } from "babylonjs";
+    import { IDisposable } from "babylonjs/scene";
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
+    import { Skeleton } from "babylonjs/Bones/skeleton";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { SceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
+    import { AnimationGroup } from "babylonjs/Animations/animationGroup";
+    import { Animation } from "babylonjs/Animations/index";
+    import { Nullable } from "babylonjs/types";
+    import { Material } from "babylonjs/Materials/material";
     import { IAsset } from "babylonjs-gltf2interface";
     import { IModelConfiguration } from "babylonjs-viewer/configuration/interfaces/modelConfiguration";
     import { IModelAnimation } from "babylonjs-viewer/model/modelAnimation";
@@ -734,7 +771,8 @@ declare module 'babylonjs-viewer/model/viewerModel' {
 }
 
 declare module 'babylonjs-viewer/model/modelAnimation' {
-    import { AnimationGroup, Vector3 } from 'babylonjs';
+    import { Vector3 } from "babylonjs/Maths/math";
+    import { AnimationGroup } from "babylonjs/Animations/index";
     /**
         * Animation play mode enum - is the animation looping or playing once
         */
@@ -941,8 +979,12 @@ declare module 'babylonjs-viewer/model/modelAnimation' {
 
 declare module 'babylonjs-viewer/loader/plugins/loaderPlugin' {
     import { ViewerModel } from "babylonjs-viewer/model/viewerModel";
-    import { IGLTFLoaderExtension, IGLTFLoaderData } from "babylonjs-loaders";
-    import { AbstractMesh, ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoaderProgressEvent, BaseTexture, Material } from "babylonjs";
+    import { IGLTFLoaderExtension, IGLTFLoaderData } from "babylonjs-loaders/glTF/glTFFileLoader";
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
+    import { SceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+    import { Material } from "babylonjs/Materials/material";
     /**
       * This interface defines the structure of a loader plugin.
       * Any of those functions will be called if (!) the loader supports those callbacks.
@@ -1017,7 +1059,7 @@ declare module 'babylonjs-viewer/configuration' {
 }
 
 declare module 'babylonjs-viewer/configuration/configuration' {
-    import { EngineOptions } from 'babylonjs';
+    import { EngineOptions } from 'babylonjs/Engines/engine';
     import { ICameraConfiguration, IDefaultRenderingPipelineConfiguration, IGroundConfiguration, ILightConfiguration, IModelConfiguration, IObserversConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ISkyboxConfiguration, ITemplateConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration/interfaces';
     import { IEnvironmentMapConfiguration } from 'babylonjs-viewer/configuration/interfaces/environmentMapConfiguration';
     export function getConfigurationKey(key: string, configObject: any): any;
@@ -1116,7 +1158,7 @@ declare module 'babylonjs-viewer/configuration/configuration' {
 }
 
 declare module 'babylonjs-viewer/templating/templateManager' {
-    import { Observable } from 'babylonjs';
+    import { Observable } from 'babylonjs/Misc/observable';
     import { EventManager } from 'babylonjs-viewer/templating/eventManager';
     import { ITemplateConfiguration } from 'babylonjs-viewer/configuration/interfaces';
     /**
@@ -1284,9 +1326,22 @@ declare module 'babylonjs-viewer/templating/templateManager' {
     }
 }
 
+declare module 'babylonjs-viewer/viewer/viewerWithTemplate' {
+    import { AbstractViewer } from "babylonjs-viewer/viewer/viewer";
+    import { ConfigurationLoader } from "babylonjs-viewer/configuration/loader";
+    /**
+      * The AbstractViewer is the center of Babylon's viewer.
+      * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+      */
+    export abstract class AbstractViewerWithTemplate extends AbstractViewer {
+        protected getConfigurationLoader(): ConfigurationLoader;
+    }
+}
+
 declare module 'babylonjs-viewer/configuration/configurationContainer' {
     import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
-    import { Color3, Scene } from 'babylonjs';
+    import { Color3 } from 'babylonjs/Maths/math';
+    import { Scene } from 'babylonjs/scene';
     export class ConfigurationContainer {
         configuration: ViewerConfiguration;
         viewerId: string;
@@ -1296,15 +1351,16 @@ declare module 'babylonjs-viewer/configuration/configurationContainer' {
     }
 }
 
-declare module 'babylonjs-viewer/configuration/loader' {
+declare module 'babylonjs-viewer/configuration/renderOnlyLoader' {
     import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
     /**
         * The configuration loader will load the configuration object from any source and will use the defined mapper to
         * parse the object and return a conform ViewerConfiguration.
         * It is a private member of the scene.
         */
-    export class ConfigurationLoader {
+    export class RenderOnlyConfigurationLoader {
             constructor(_enableCache?: boolean);
+            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
             /**
                 * load a configuration object that is defined in the initial configuration provided.
                 * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
@@ -1322,7 +1378,10 @@ declare module 'babylonjs-viewer/configuration/loader' {
 }
 
 declare module 'babylonjs-viewer/managers/observablesManager' {
-    import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { Scene } from 'babylonjs/scene';
+    import { Engine } from 'babylonjs/Engines/engine';
+    import { SceneLoaderProgressEvent, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     export class ObservablesManager {
             /**
@@ -1388,13 +1447,24 @@ declare module 'babylonjs-viewer/managers/observablesManager' {
 }
 
 declare module 'babylonjs-viewer/managers/sceneManager' {
-    import { Scene, ArcRotateCamera, Engine, Light, SceneOptimizer, EnvironmentHelper, Color3, Observable, DefaultRenderingPipeline, Nullable, VRExperienceHelper, IShadowLight } from 'babylonjs';
     import { ILightConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, ViewerConfiguration, IGroundConfiguration, IModelConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { ViewerLabs } from 'babylonjs-viewer/labs/viewerLabs';
     import { ObservablesManager } from 'babylonjs-viewer/managers/observablesManager';
     import { ConfigurationContainer } from 'babylonjs-viewer/configuration/configurationContainer';
     import { IEnvironmentMapConfiguration } from 'babylonjs-viewer/configuration/interfaces/environmentMapConfiguration';
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { SceneOptimizer } from 'babylonjs/Misc/sceneOptimizer';
+    import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
+    import { Light } from 'babylonjs/Lights/light';
+    import { EnvironmentHelper } from 'babylonjs/Helpers/environmentHelper';
+    import { VRExperienceHelper } from 'babylonjs/Cameras/VR/vrExperienceHelper';
+    import { Color3 } from 'babylonjs/Maths/math';
+    import { Nullable } from 'babylonjs/types';
+    import { DefaultRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
+    import { Engine } from 'babylonjs/Engines/engine';
+    import { IShadowLight } from 'babylonjs/Lights/shadowLight';
+    import { Scene } from 'babylonjs/scene';
     /**
         * This interface describes the structure of the variable sent with the configuration observables of the scene manager.
         * O - the type of object we are dealing with (Light, ArcRotateCamera, Scene, etc')
@@ -1523,6 +1593,7 @@ declare module 'babylonjs-viewer/managers/sceneManager' {
             updateConfiguration(newConfiguration: Partial<ViewerConfiguration>): void;
             bloomEnabled: boolean;
             fxaaEnabled: boolean;
+            setDefaultMaterial(sceneConfig: ISceneConfiguration): void;
             /**
                 * internally configure the scene using the provided configuration.
                 * The scene will not be recreated, but just updated.
@@ -1742,9 +1813,18 @@ declare module 'babylonjs-viewer/templating/eventManager' {
     }
 }
 
+declare module 'babylonjs-viewer/configuration/loader' {
+    import { RenderOnlyConfigurationLoader } from "babylonjs-viewer/configuration/renderOnlyLoader";
+    export class ConfigurationLoader extends RenderOnlyConfigurationLoader {
+        protected getExtendedConfig(type: string | undefined): import("./configuration").ViewerConfiguration;
+    }
+}
+
 declare module 'babylonjs-viewer/labs/viewerLabs' {
     import { PBREnvironment } from "babylonjs-viewer/labs/environmentSerializer";
-    import { ShadowLight, Vector3, Scene } from 'babylonjs';
+    import { Scene } from "babylonjs/scene";
+    import { Vector3 } from "babylonjs/Maths/math";
+    import { ShadowLight } from "babylonjs/Lights/shadowLight";
     /**
         * The ViewerLabs class will hold functions that are not (!) backwards compatible.
         * The APIs in all labs-related classes and configuration  might change.
@@ -1825,7 +1905,7 @@ declare module 'babylonjs-viewer/configuration/interfaces/modelAnimationConfigur
 declare module 'babylonjs-viewer/loader/plugins/telemetryLoaderPlugin' {
     import { ILoaderPlugin } from "babylonjs-viewer/loader/plugins/loaderPlugin";
     import { ViewerModel } from "babylonjs-viewer/model/viewerModel";
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
     export class TelemetryLoaderPlugin implements ILoaderPlugin {
         onInit(loader: ISceneLoaderPlugin | ISceneLoaderPluginAsync, model: ViewerModel): void;
         onLoaded(model: ViewerModel): void;
@@ -1835,8 +1915,8 @@ declare module 'babylonjs-viewer/loader/plugins/telemetryLoaderPlugin' {
 }
 
 declare module 'babylonjs-viewer/loader/plugins/msftLodLoaderPlugin' {
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs';
-    import { IGLTFLoaderExtension } from 'babylonjs-loaders';
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
+    import { IGLTFLoaderExtension } from 'babylonjs-loaders/glTF/2.0/glTFLoaderExtension';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { ILoaderPlugin } from 'babylonjs-viewer/loader/plugins/loaderPlugin';
     /**
@@ -1849,9 +1929,10 @@ declare module 'babylonjs-viewer/loader/plugins/msftLodLoaderPlugin' {
 }
 
 declare module 'babylonjs-viewer/loader/plugins/applyMaterialConfig' {
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material } from 'babylonjs';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { ILoaderPlugin } from 'babylonjs-viewer/loader/plugins/loaderPlugin';
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs/Loading/sceneLoader';
+    import { Material } from 'babylonjs/Materials/material';
     /**
       * Force-apply material configuration right after a material was loaded.
       */
@@ -1862,7 +1943,7 @@ declare module 'babylonjs-viewer/loader/plugins/applyMaterialConfig' {
 }
 
 declare module 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin' {
-    import { Material } from 'babylonjs';
+    import { Material } from 'babylonjs/Materials/material';
     import { ILoaderPlugin } from 'babylonjs-viewer/loader/plugins/loaderPlugin';
     /**
       * A (PBR) material will be extended using this function.
@@ -1992,7 +2073,7 @@ declare module 'babylonjs-viewer/configuration/interfaces/colorGradingConfigurat
 }
 
 declare module 'babylonjs-viewer/configuration/interfaces/defaultRenderingPipelineConfiguration' {
-    import { DepthOfFieldEffectBlurLevel } from 'babylonjs';
+    import { DepthOfFieldEffectBlurLevel } from "babylonjs/PostProcesses/depthOfFieldEffect";
     export interface IDefaultRenderingPipelineConfiguration {
         sharpenEnabled?: boolean;
         bloomEnabled?: boolean;
@@ -2351,7 +2432,7 @@ declare module 'babylonjs-viewer/configuration/interfaces/vrConfiguration' {
 }
 
 declare module 'babylonjs-viewer/labs/environmentSerializer' {
-    import { Vector3 } from "babylonjs";
+    import { Vector3 } from 'babylonjs/Maths/math';
     import { TextureCube } from 'babylonjs-viewer/labs/texture';
     /**
         * Spherical polynomial coefficients (counter part to spherical harmonic coefficients used in shader irradiance calculation)
@@ -2460,7 +2541,9 @@ declare module 'babylonjs-viewer/labs/environmentSerializer' {
 }
 
 declare module 'babylonjs-viewer/labs/texture' {
-    import { Scene, CubeTexture, BaseTexture } from "babylonjs";
+    import { Scene } from "babylonjs/scene";
+    import { CubeTexture } from "babylonjs/Materials/Textures/cubeTexture";
+    import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
     /**
         * WebGL Pixel Formats
         */