Merge remote-tracking branch 'BabylonJS/master' into bug-fixes

Tools/Gulp/config.json

@@ -99,6 +99,7 @@
             "gizmos",
             "morphTargets",
             "octrees",
+            "anaglyph",
             "vr",
             "virtualJoystick",
             "optimizations",
@@ -254,10 +255,10 @@
             "files": [
                 "../../src/Particles/babylon.particle.js",
                 "../../src/Particles/babylon.particleSystem.js",
-                "../../src/Particles/EmitterTypes/babylon.IParticleEmitterType.js",
                 "../../src/Particles/EmitterTypes/babylon.boxParticleEmitter.js",
                 "../../src/Particles/EmitterTypes/babylon.coneParticleEmitter.js",
-                "../../src/Particles/EmitterTypes/babylon.sphereParticleEmitter.js"
+                "../../src/Particles/EmitterTypes/babylon.sphereParticleEmitter.js",
+                "../../src/Particles/babylon.particleSystemComponent.js"
             ],
             "dependUpon": [
                 "core"
@@ -655,7 +656,8 @@
                 "../../src/Gamepad/Controllers/babylon.genericController.js",
                 "../../src/Gamepad/Controllers/babylon.windowsMotionController.js",
                 "../../src/Gamepad/Controllers/babylon.gearVRController.js",
-                "../../src/Gamepad/Controllers/babylon.daydreamController.js"
+                "../../src/Gamepad/Controllers/babylon.daydreamController.js",
+                "../../src/Gamepad/babylon.gamepadSceneComponent.js"
             ],
             "dependUpon": [
                 "core"
@@ -1108,28 +1110,62 @@
                 "core"
             ]
         },
-        "vr": {
+        "anaglyph": {
             "files": [
-                "../../src/PostProcess/babylon.vrDistortionCorrectionPostProcess.js",
                 "../../src/PostProcess/babylon.anaglyphPostProcess.js",
+                "../../src/Cameras/Stereoscopic/babylon.anaglyphArcRotateCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.anaglyphFreeCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.anaglyphGamepadCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.anaglyphUniversalCamera.js"
+            ],
+            "dependUpon": [
+                "core",
+                "postProcesses",
+                "freeCamera",
+                "gamepad"
+            ],
+            "shaders": [
+                "anaglyph.fragment"
+            ]
+        },       
+        "stereoscopic": {
+            "files": [
                 "../../src/PostProcess/babylon.stereoscopicInterlacePostProcess.js",
+                "../../src/Cameras/Stereoscopic/babylon.stereoscopicArcRotateCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.stereoscopicFreeCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.stereoscopicGamepadCamera.js",
+                "../../src/Cameras/Stereoscopic/babylon.stereoscopicUniversalCamera.js"
+            ],
+            "dependUpon": [
+                "core",
+                "postProcesses",
+                "freeCamera",
+                "gamepad"
+            ],
+            "shaders": [
+                "stereoscopicInterlace.fragment"
+            ]
+        },           
+        "vr": {
+            "files": [
+                "../../src/PostProcess/babylon.vrDistortionCorrectionPostProcess.js",
                 "../../src/Cameras/Inputs/babylon.freeCameraDeviceOrientationInput.js",
                 "../../src/Cameras/Inputs/babylon.arcRotateCameraVRDeviceOrientationInput.js",
                 "../../src/Cameras/VR/babylon.vrCameraMetrics.js",
                 "../../src/Cameras/VR/babylon.webVRCamera.js",
                 "../../src/Cameras/babylon.deviceOrientationCamera.js",
-                "../../src/Cameras/VR/babylon.vrDeviceOrientationCamera.js",
-                "../../src/Cameras/babylon.stereoscopicCameras.js",
+                "../../src/Cameras/VR/babylon.vrDeviceOrientationFreeCamera.js",
+                "../../src/Cameras/VR/babylon.vrDeviceOrientationArcRotateCamera.js",
+                "../../src/Cameras/VR/babylon.vrDeviceOrientationGamepadCamera.js",
                 "../../src/Cameras/VR/babylon.vrExperienceHelper.js"
             ],
             "dependUpon": [
                 "core",
                 "postProcesses",
-                "freeCamera"
+                "freeCamera",
+                "gamepad"
             ],
             "shaders": [
-                "anaglyph.fragment",
-                "stereoscopicInterlace.fragment",
                 "vrDistortionCorrection.fragment"
             ]
         },

Viewer/src/configuration/configurationCompatibility.ts

@@ -7,8 +7,6 @@ import { ViewerConfiguration, getConfigurationKey } from './configuration'
  */
 export function processConfigurationCompatibility(configuration: ViewerConfiguration) {
 
-
-
     if (configuration.camera) {
         // camera contrast -> image processing contrast
         if (configuration.camera.contrast !== undefined) {
@@ -31,6 +29,13 @@ export function processConfigurationCompatibility(configuration: ViewerConfigura
             }
         }
     }
+
+    if (configuration.model && typeof configuration.model === 'object') {
+        // castShadows === castShadow
+        if ((<any>configuration.model).castShadows !== undefined && configuration.model.castShadow === undefined) {
+            configuration.model.castShadow = (<any>configuration.model).castShadows;
+        }
+    }
 }
 
 function setKeyInObject(object: any, keys: string, value: any, shouldOverwrite?: boolean) {

Viewer/src/loader/modelLoader.ts

@@ -22,6 +22,12 @@ export class ModelLoader {
 
     private _plugins: Array<ILoaderPlugin>;
 
+    private _baseUrl: string;
+
+    public get baseUrl(): string {
+        return this._baseUrl;
+    }
+
     /**
      * Create a new Model loader
      * @param _viewer the viewer using this model loader
@@ -62,19 +68,17 @@ export class ModelLoader {
 
         model.loadId = this._loadId++;
 
-        let base: string = "";
-
         let filename: any;
         if (modelConfiguration.file) {
-            base = "file:";
+            this._baseUrl = "file:";
             filename = modelConfiguration.file;
         }
         else if (modelConfiguration.url) {
             filename = Tools.GetFilename(modelConfiguration.url) || modelConfiguration.url;
-            base = modelConfiguration.root || Tools.GetFolderPath(modelConfiguration.url);
+            this._baseUrl = modelConfiguration.root || Tools.GetFolderPath(modelConfiguration.url);
         }
 
-        if (!filename || !base) {
+        if (!filename || !this._baseUrl) {
             model.state = ModelState.ERROR;
             Tools.Error("No URL provided");
             return model;
@@ -85,7 +89,7 @@ export class ModelLoader {
 
         let scene = model.rootMesh.getScene();
 
-        model.loader = SceneLoader.ImportMesh(undefined, base, filename, scene, (meshes, particleSystems, skeletons, animationGroups) => {
+        model.loader = SceneLoader.ImportMesh(undefined, this._baseUrl, filename, scene, (meshes, particleSystems, skeletons, animationGroups) => {
             meshes.forEach(mesh => {
                 Tags.AddTagsTo(mesh, "viewerMesh");
                 model.addMesh(mesh);

Viewer/src/model/viewerModel.ts

@@ -1,4 +1,4 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, Animatable, AbstractMesh, Tools, Scene, SceneLoader, Observable, SceneLoaderProgressEvent, Tags, ParticleSystem, Skeleton, IDisposable, Nullable, Animation, Quaternion, Material, Vector3, AnimationPropertiesOverride, QuinticEase, SineEase, CircleEase, BackEase, BounceEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, PBRMaterial, MultiMaterial } from "babylonjs";
+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, GLTF2 } from "babylonjs-loaders";
 import { IModelConfiguration } from "../configuration/interfaces/modelConfiguration";
 import { IModelAnimationConfiguration } from "../configuration/interfaces/modelAnimationConfiguration";
@@ -48,7 +48,7 @@ export class ViewerModel implements IDisposable {
     /**
      * ParticleSystems connected to this model
      */
-    public particleSystems: Array<ParticleSystem> = [];
+    public particleSystems: Array<IParticleSystem> = [];
     /**
      * Skeletons defined in this model
      */

Viewer/src/viewer/viewer.ts

@@ -1,17 +1,18 @@
-import { viewerManager } from './viewerManager';
-import { SceneManager } from '../managers/sceneManager';
-import { ConfigurationLoader } from '../configuration/loader';
-import { Effect, Observable, Engine, Scene, Database, SceneLoaderProgressEvent, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Tools, RenderingManager, TargetCamera, WebVRFreeCamera, Vector3 } from 'babylonjs';
-import { ViewerConfiguration, IObserversConfiguration, IModelConfiguration } from '../configuration/';
-
-import { ViewerModel } from '../model/viewerModel';
-import { ModelLoader } from '../loader/modelLoader';
+import { Database, Effect, Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, RenderingManager, Scene, SceneLoaderProgressEvent, TargetCamera, Tools, Vector3 } from 'babylonjs';
+import { IModelConfiguration, IObserversConfiguration, ViewerConfiguration } from '../configuration/';
+import { processConfigurationCompatibility } from '../configuration/configurationCompatibility';
+import { ConfigurationContainer } from '../configuration/configurationContainer';
 import { viewerGlobals } from '../configuration/globals';
-import { telemetryManager } from '../managers/telemetryManager';
+import { ConfigurationLoader } from '../configuration/loader';
 import { deepmerge } from '../helper/';
+import { ModelLoader } from '../loader/modelLoader';
 import { ObservablesManager } from '../managers/observablesManager';
-import { ConfigurationContainer } from '../configuration/configurationContainer';
+import { SceneManager } from '../managers/sceneManager';
+import { telemetryManager } from '../managers/telemetryManager';
+import { ViewerModel } from '../model/viewerModel';
 import { TemplateManager } from '../templating/templateManager';
+import { viewerManager } from './viewerManager';
+
 
 /**
  * The AbstractViewr is the center of Babylon's viewer.
@@ -460,6 +461,8 @@ export abstract class AbstractViewer {
                 console.log("Error parsing file " + newConfiguration, error);
             });
         } else {
+            //backcompat
+            processConfigurationCompatibility(newConfiguration);
             // update this.configuration with the new data
             this._configurationContainer.configuration = deepmerge(this.configuration || {}, newConfiguration);
 

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/babylon.inspector.js

@@ -5344,7 +5344,7 @@ var INSPECTOR;
         function BoundingBox(obj) {
             var _this = _super.call(this) || this;
             _this._obj = obj;
-            _this._elem.classList.add('fa-square-o');
+            _this._elem.classList.add('fa-cube');
             _this._on = _this._obj.isBoxVisible();
             _this._check();
             return _this;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/loaders/babylon.glTF1FileLoader.d.ts

@@ -78,7 +78,7 @@ declare module BABYLON {
         readonly state: Nullable<GLTFLoaderState>;
         importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -255,7 +255,7 @@ declare module BABYLON {
          */
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -730,7 +730,7 @@ declare module BABYLON.GLTF1 {
         */
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/babylon.glTF2FileLoader.d.ts

@@ -78,7 +78,7 @@ declare module BABYLON {
         readonly state: Nullable<GLTFLoaderState>;
         importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -255,7 +255,7 @@ declare module BABYLON {
          */
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -471,7 +471,7 @@ declare module BABYLON.GLTF2 {
         dispose(): void;
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/babylon.glTFFileLoader.d.ts

@@ -78,7 +78,7 @@ declare module BABYLON {
         readonly state: Nullable<GLTFLoaderState>;
         importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -255,7 +255,7 @@ declare module BABYLON {
          */
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -730,7 +730,7 @@ declare module BABYLON.GLTF1 {
         */
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -1033,7 +1033,7 @@ declare module BABYLON.GLTF2 {
         dispose(): void;
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/babylon.objFileLoader.d.ts

@@ -59,7 +59,7 @@ declare module BABYLON {
         private _loadMTL(url, rootUrl, onSuccess);
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/babylon.stlFileLoader.d.ts

@@ -7,7 +7,7 @@ declare module BABYLON {
         vertexPattern: RegExp;
         name: string;
         extensions: ISceneLoaderPluginExtensions;
-        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<ParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
+        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<IParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
         load(scene: Scene, data: any, rootUrl: string): boolean;
         loadAssetContainer(scene: Scene, data: string, rootUrl: string, onError?: (message: string, exception?: any) => void): AssetContainer;
         private isBinary(data);

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -7,7 +7,7 @@ declare module BABYLON {
         vertexPattern: RegExp;
         name: string;
         extensions: ISceneLoaderPluginExtensions;
-        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<ParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
+        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<IParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
         load(scene: Scene, data: any, rootUrl: string): boolean;
         loadAssetContainer(scene: Scene, data: string, rootUrl: string, onError?: (message: string, exception?: any) => void): AssetContainer;
         private isBinary(data);
@@ -77,7 +77,7 @@ declare module BABYLON {
         private _loadMTL(url, rootUrl, onSuccess);
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -179,7 +179,7 @@ declare module BABYLON {
         readonly state: Nullable<GLTFLoaderState>;
         importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -356,7 +356,7 @@ declare module BABYLON {
          */
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -831,7 +831,7 @@ declare module BABYLON.GLTF1 {
         */
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -1134,7 +1134,7 @@ declare module BABYLON.GLTF2 {
         dispose(): void;
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/babylonjs.loaders.module.d.ts

@@ -14,7 +14,7 @@ declare module BABYLON {
         vertexPattern: RegExp;
         name: string;
         extensions: ISceneLoaderPluginExtensions;
-        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<ParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
+        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<IParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean;
         load(scene: Scene, data: any, rootUrl: string): boolean;
         loadAssetContainer(scene: Scene, data: string, rootUrl: string, onError?: (message: string, exception?: any) => void): AssetContainer;
         private isBinary(data);
@@ -84,7 +84,7 @@ declare module BABYLON {
         private _loadMTL(url, rootUrl, onSuccess);
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -186,7 +186,7 @@ declare module BABYLON {
         readonly state: Nullable<GLTFLoaderState>;
         importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -363,7 +363,7 @@ declare module BABYLON {
          */
         importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -838,7 +838,7 @@ declare module BABYLON.GLTF1 {
         */
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;
@@ -1141,7 +1141,7 @@ declare module BABYLON.GLTF2 {
         dispose(): void;
         importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{
             meshes: AbstractMesh[];
-            particleSystems: ParticleSystem[];
+            particleSystems: IParticleSystem[];
             skeletons: Skeleton[];
             animationGroups: AnimationGroup[];
         }>;

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.9"
+        "babylonjs-gltf2interface": "3.3.0-alpha.11"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.9"
+        "babylonjs-gltf2interface": "3.3.0-alpha.11"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/typedocValidationBaseline.json

@@ -1,7 +1,16 @@
 {
-  "errors": 4234,
+  "errors": 4225,
   "babylon.typedoc.json": {
-    "errors": 4234,
+    "errors": 4225,
+    "AbstractMesh": {
+      "Property": {
+        "showBoundingBox": {
+          "Naming": {
+            "NotPascalCase": true
+          }
+        }
+      }
+    },
     "AbstractScene": {
       "Property": {
         "effectLayers": {
@@ -580,11 +589,6 @@
         }
       },
       "Method": {
-        "addGamepad": {
-          "Comments": {
-            "MissingText": true
-          }
-        },
         "addKeyboard": {
           "Comments": {
             "MissingText": true
@@ -604,6 +608,14 @@
           "Comments": {
             "MissingText": true
           }
+        },
+        "addGamepad": {
+          "Naming": {
+            "NotPascalCase": true
+          },
+          "Comments": {
+            "MissingText": true
+          }
         }
       }
     },
@@ -4694,53 +4706,6 @@
               }
             }
           }
-        },
-        "UploadDDSLevels": {
-          "Comments": {
-            "MissingText": true
-          },
-          "Parameter": {
-            "engine": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "gl": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "arrayBuffer": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "info": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "loadMipmaps": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "faces": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "lodIndex": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "currentFace": {
-              "Comments": {
-                "MissingText": true
-              }
-            }
-          }
         }
       }
     },
@@ -5218,6 +5183,15 @@
         }
       }
     },
+    "Engine": {
+      "Method": {
+        "createEffectForParticles": {
+          "Naming": {
+            "NotPascalCase": true
+          }
+        }
+      }
+    },
     "EngineInstrumentation": {
       "Constructor": {
         "new EngineInstrumentation": {
@@ -5731,11 +5705,6 @@
             "MissingText": true
           }
         },
-        "addGamepad": {
-          "Comments": {
-            "MissingText": true
-          }
-        },
         "addKeyboard": {
           "Comments": {
             "MissingText": true
@@ -5762,6 +5731,14 @@
           "Comments": {
             "MissingText": true
           }
+        },
+        "addGamepad": {
+          "Naming": {
+            "NotPascalCase": true
+          },
+          "Comments": {
+            "MissingText": true
+          }
         }
       }
     },
@@ -7213,20 +7190,6 @@
               }
             }
           }
-        },
-        "uploadLevels": {
-          "Parameter": {
-            "gl": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "loadMipmaps": {
-              "Comments": {
-                "MissingText": true
-              }
-            }
-          }
         }
       }
     },
@@ -15181,6 +15144,11 @@
           "Naming": {
             "NotPascalCase": true
           }
+        },
+        "gamepadManager": {
+          "Naming": {
+            "NotPascalCase": true
+          }
         }
       },
       "Method": {
@@ -18084,23 +18052,6 @@
             }
           }
         },
-        "UploadContent": {
-          "Comments": {
-            "MissingText": true
-          },
-          "Parameter": {
-            "gl": {
-              "Comments": {
-                "MissingText": true
-              }
-            },
-            "data": {
-              "Comments": {
-                "MissingText": true
-              }
-            }
-          }
-        },
         "_getImageData16bits": {
           "Comments": {
             "MissingText": true

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

@@ -529,6 +529,7 @@ declare module BabylonViewer {
         * A Model loader is unique per (Abstract)Viewer. It is being generated by the viewer
         */
     export class ModelLoader {
+            readonly baseUrl: string;
             /**
                 * Create a new Model loader
                 * @param _viewer the viewer using this model loader
@@ -590,7 +591,7 @@ declare module BabylonViewer {
             /**
                 * ParticleSystems connected to this model
                 */
-            particleSystems: Array<BABYLON.ParticleSystem>;
+            particleSystems: Array<BABYLON.IParticleSystem>;
             /**
                 * Skeletons defined in this model
                 */
@@ -1267,6 +1268,101 @@ declare module BabylonViewer {
 declare module BabylonViewer {
     
     
+    export class ConfigurationContainer {
+        configuration: ViewerConfiguration;
+        viewerId: string;
+        mainColor: BABYLON.Color3;
+        reflectionColor: BABYLON.Color3;
+        scene?: BABYLON.Scene;
+    }
+}
+
+declare module BabylonViewer {
+    
+    /**
+        * 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 {
+            constructor(_enableCache?: boolean);
+            /**
+                * 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.
+                */
+            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
+            /**
+                * Dispose the configuration loader. This will cancel file requests, if active.
+                */
+            dispose(): void;
+    }
+}
+
+declare module BabylonViewer {
+    
+    
+    export class ObservablesManager {
+            /**
+                * Will notify when the scene was initialized
+                */
+            onSceneInitObservable: BABYLON.Observable<BABYLON.Scene>;
+            /**
+                * will notify when the engine was initialized
+                */
+            onEngineInitObservable: BABYLON.Observable<BABYLON.Engine>;
+            /**
+                * Will notify when a new model was added to the scene.
+                * Note that added does not neccessarily mean loaded!
+                */
+            onModelAddedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify after every model load
+                */
+            onModelLoadedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify when any model notify of progress
+                */
+            onModelLoadProgressObservable: BABYLON.Observable<BABYLON.SceneLoaderProgressEvent>;
+            /**
+                * will notify when any model load failed.
+                */
+            onModelLoadErrorObservable: BABYLON.Observable<{
+                    message: string;
+                    exception: any;
+            }>;
+            /**
+                * Will notify when a model was removed from the scene;
+                */
+            onModelRemovedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify when a new loader was initialized.
+                * Used mainly to know when a model starts loading.
+                */
+            onLoaderInitObservable: BABYLON.Observable<BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync>;
+            /**
+                * Observers registered here will be executed when the entire load process has finished.
+                */
+            onViewerInitDoneObservable: BABYLON.Observable<any>;
+            /**
+                * Will notify when the viewer init started (after configuration was loaded)
+                */
+            onViewerInitStartedObservable: BABYLON.Observable<any>;
+            /**
+                * Functions added to this observable will be executed on each frame rendered.
+                */
+            onFrameRenderedObservable: BABYLON.Observable<any>;
+            constructor();
+            dispose(): void;
+    }
+}
+
+declare module BabylonViewer {
+    
+    
     
     
     
@@ -1453,101 +1549,6 @@ declare module BabylonViewer {
 
 declare module BabylonViewer {
     
-    /**
-        * 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 {
-            constructor(_enableCache?: boolean);
-            /**
-                * 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.
-                */
-            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
-            /**
-                * Dispose the configuration loader. This will cancel file requests, if active.
-                */
-            dispose(): void;
-    }
-}
-
-declare module BabylonViewer {
-    
-    
-    export class ObservablesManager {
-            /**
-                * Will notify when the scene was initialized
-                */
-            onSceneInitObservable: BABYLON.Observable<BABYLON.Scene>;
-            /**
-                * will notify when the engine was initialized
-                */
-            onEngineInitObservable: BABYLON.Observable<BABYLON.Engine>;
-            /**
-                * Will notify when a new model was added to the scene.
-                * Note that added does not neccessarily mean loaded!
-                */
-            onModelAddedObservable: BABYLON.Observable<ViewerModel>;
-            /**
-                * will notify after every model load
-                */
-            onModelLoadedObservable: BABYLON.Observable<ViewerModel>;
-            /**
-                * will notify when any model notify of progress
-                */
-            onModelLoadProgressObservable: BABYLON.Observable<BABYLON.SceneLoaderProgressEvent>;
-            /**
-                * will notify when any model load failed.
-                */
-            onModelLoadErrorObservable: BABYLON.Observable<{
-                    message: string;
-                    exception: any;
-            }>;
-            /**
-                * Will notify when a model was removed from the scene;
-                */
-            onModelRemovedObservable: BABYLON.Observable<ViewerModel>;
-            /**
-                * will notify when a new loader was initialized.
-                * Used mainly to know when a model starts loading.
-                */
-            onLoaderInitObservable: BABYLON.Observable<BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync>;
-            /**
-                * Observers registered here will be executed when the entire load process has finished.
-                */
-            onViewerInitDoneObservable: BABYLON.Observable<any>;
-            /**
-                * Will notify when the viewer init started (after configuration was loaded)
-                */
-            onViewerInitStartedObservable: BABYLON.Observable<any>;
-            /**
-                * Functions added to this observable will be executed on each frame rendered.
-                */
-            onFrameRenderedObservable: BABYLON.Observable<any>;
-            constructor();
-            dispose(): void;
-    }
-}
-
-declare module BabylonViewer {
-    
-    
-    export class ConfigurationContainer {
-        configuration: ViewerConfiguration;
-        viewerId: string;
-        mainColor: BABYLON.Color3;
-        reflectionColor: BABYLON.Color3;
-        scene?: BABYLON.Scene;
-    }
-}
-
-declare module BabylonViewer {
-    
     export interface IModelConfiguration {
             id?: string;
             url?: string;

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

@@ -232,14 +232,14 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
 }
 
 declare module 'babylonjs-viewer/viewer/viewer' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
+    import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
+    import { IModelConfiguration, IObserversConfiguration, ViewerConfiguration } from 'babylonjs-viewer/configuration';
+    import { ConfigurationContainer } from 'babylonjs-viewer/configuration/configurationContainer';
     import { ConfigurationLoader } from 'babylonjs-viewer/configuration/loader';
-    import { Observable, Engine, Scene, SceneLoaderProgressEvent, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from 'babylonjs';
-    import { ViewerConfiguration, IObserversConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration';
-    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { ModelLoader } from 'babylonjs-viewer/loader/modelLoader';
     import { ObservablesManager } from 'babylonjs-viewer/managers/observablesManager';
-    import { ConfigurationContainer } from 'babylonjs-viewer/configuration/configurationContainer';
+    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
+    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
     import { TemplateManager } from 'babylonjs-viewer/templating/templateManager';
     /**
         * The AbstractViewr is the center of Babylon's viewer.
@@ -529,6 +529,7 @@ declare module 'babylonjs-viewer/loader/modelLoader' {
         * A Model loader is unique per (Abstract)Viewer. It is being generated by the viewer
         */
     export class ModelLoader {
+            readonly baseUrl: string;
             /**
                 * Create a new Model loader
                 * @param _viewer the viewer using this model loader
@@ -555,7 +556,7 @@ declare module 'babylonjs-viewer/loader/modelLoader' {
 }
 
 declare module 'babylonjs-viewer/model/viewerModel' {
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, AbstractMesh, Observable, SceneLoaderProgressEvent, ParticleSystem, Skeleton, IDisposable, Nullable, Animation, Material } from "babylonjs";
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, AbstractMesh, Observable, SceneLoaderProgressEvent, IParticleSystem, Skeleton, IDisposable, Nullable, Animation, Material } from "babylonjs";
     import { GLTF2 } from "babylonjs-loaders";
     import { IModelConfiguration } from "babylonjs-viewer/configuration/interfaces/modelConfiguration";
     import { IModelAnimation } from "babylonjs-viewer/model/modelAnimation";
@@ -590,7 +591,7 @@ declare module 'babylonjs-viewer/model/viewerModel' {
             /**
                 * ParticleSystems connected to this model
                 */
-            particleSystems: Array<ParticleSystem>;
+            particleSystems: Array<IParticleSystem>;
             /**
                 * Skeletons defined in this model
                 */
@@ -1264,6 +1265,101 @@ declare module 'babylonjs-viewer/templating/templateManager' {
     }
 }
 
+declare module 'babylonjs-viewer/configuration/configurationContainer' {
+    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
+    import { Color3, Scene } from 'babylonjs';
+    export class ConfigurationContainer {
+        configuration: ViewerConfiguration;
+        viewerId: string;
+        mainColor: Color3;
+        reflectionColor: Color3;
+        scene?: Scene;
+    }
+}
+
+declare module 'babylonjs-viewer/configuration/loader' {
+    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 {
+            constructor(_enableCache?: boolean);
+            /**
+                * 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.
+                */
+            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
+            /**
+                * Dispose the configuration loader. This will cancel file requests, if active.
+                */
+            dispose(): void;
+    }
+}
+
+declare module 'babylonjs-viewer/managers/observablesManager' {
+    import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
+    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
+    export class ObservablesManager {
+            /**
+                * Will notify when the scene was initialized
+                */
+            onSceneInitObservable: Observable<Scene>;
+            /**
+                * will notify when the engine was initialized
+                */
+            onEngineInitObservable: Observable<Engine>;
+            /**
+                * Will notify when a new model was added to the scene.
+                * Note that added does not neccessarily mean loaded!
+                */
+            onModelAddedObservable: Observable<ViewerModel>;
+            /**
+                * will notify after every model load
+                */
+            onModelLoadedObservable: Observable<ViewerModel>;
+            /**
+                * will notify when any model notify of progress
+                */
+            onModelLoadProgressObservable: Observable<SceneLoaderProgressEvent>;
+            /**
+                * will notify when any model load failed.
+                */
+            onModelLoadErrorObservable: Observable<{
+                    message: string;
+                    exception: any;
+            }>;
+            /**
+                * Will notify when a model was removed from the scene;
+                */
+            onModelRemovedObservable: Observable<ViewerModel>;
+            /**
+                * will notify when a new loader was initialized.
+                * Used mainly to know when a model starts loading.
+                */
+            onLoaderInitObservable: Observable<ISceneLoaderPlugin | ISceneLoaderPluginAsync>;
+            /**
+                * Observers registered here will be executed when the entire load process has finished.
+                */
+            onViewerInitDoneObservable: Observable<any>;
+            /**
+                * Will notify when the viewer init started (after configuration was loaded)
+                */
+            onViewerInitStartedObservable: Observable<any>;
+            /**
+                * Functions added to this observable will be executed on each frame rendered.
+                */
+            onFrameRenderedObservable: Observable<any>;
+            constructor();
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-viewer/managers/sceneManager' {
     import { Scene, ArcRotateCamera, Engine, Light, SceneOptimizer, EnvironmentHelper, Color3, Observable, DefaultRenderingPipeline, Nullable, VRExperienceHelper } from 'babylonjs';
     import { ILightConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, ViewerConfiguration, IGroundConfiguration, IModelConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration';
@@ -1451,101 +1547,6 @@ declare module 'babylonjs-viewer/managers/sceneManager' {
     }
 }
 
-declare module 'babylonjs-viewer/configuration/loader' {
-    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 {
-            constructor(_enableCache?: boolean);
-            /**
-                * 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.
-                */
-            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
-            /**
-                * Dispose the configuration loader. This will cancel file requests, if active.
-                */
-            dispose(): void;
-    }
-}
-
-declare module 'babylonjs-viewer/managers/observablesManager' {
-    import { Engine, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observable, Scene, SceneLoaderProgressEvent } from 'babylonjs';
-    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
-    export class ObservablesManager {
-            /**
-                * Will notify when the scene was initialized
-                */
-            onSceneInitObservable: Observable<Scene>;
-            /**
-                * will notify when the engine was initialized
-                */
-            onEngineInitObservable: Observable<Engine>;
-            /**
-                * Will notify when a new model was added to the scene.
-                * Note that added does not neccessarily mean loaded!
-                */
-            onModelAddedObservable: Observable<ViewerModel>;
-            /**
-                * will notify after every model load
-                */
-            onModelLoadedObservable: Observable<ViewerModel>;
-            /**
-                * will notify when any model notify of progress
-                */
-            onModelLoadProgressObservable: Observable<SceneLoaderProgressEvent>;
-            /**
-                * will notify when any model load failed.
-                */
-            onModelLoadErrorObservable: Observable<{
-                    message: string;
-                    exception: any;
-            }>;
-            /**
-                * Will notify when a model was removed from the scene;
-                */
-            onModelRemovedObservable: Observable<ViewerModel>;
-            /**
-                * will notify when a new loader was initialized.
-                * Used mainly to know when a model starts loading.
-                */
-            onLoaderInitObservable: Observable<ISceneLoaderPlugin | ISceneLoaderPluginAsync>;
-            /**
-                * Observers registered here will be executed when the entire load process has finished.
-                */
-            onViewerInitDoneObservable: Observable<any>;
-            /**
-                * Will notify when the viewer init started (after configuration was loaded)
-                */
-            onViewerInitStartedObservable: Observable<any>;
-            /**
-                * Functions added to this observable will be executed on each frame rendered.
-                */
-            onFrameRenderedObservable: Observable<any>;
-            constructor();
-            dispose(): void;
-    }
-}
-
-declare module 'babylonjs-viewer/configuration/configurationContainer' {
-    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
-    import { Color3, Scene } from 'babylonjs';
-    export class ConfigurationContainer {
-        configuration: ViewerConfiguration;
-        viewerId: string;
-        mainColor: Color3;
-        reflectionColor: Color3;
-        scene?: Scene;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/modelConfiguration' {
     import { IModelAnimationConfiguration } from "babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration";
     export interface IModelConfiguration {

dist/preview release/what's new.md

@@ -64,6 +64,7 @@
 - Added canvas toBlob polyfill in tools ([sebavan](http://www.github.com/sebavan))
 - Added `RawCubeTexture` class with RGBD and mipmap support ([bghgary](http://www.github.com/bghgary))
 - Added effect layer per rendering group addressing [Issue 4463](https://github.com/BabylonJS/Babylon.js/issues/4463) ([sebavan](http://www.github.com/sebavan))
+- Added predicate function `targetMask` argument to `scene.beginWeightedAnimation`, `scene.beginAnimation`, `scene.stopAnimation`, and `animatable.stop` to allow for selective application of animations.  ([fmmoret](http://github.com/fmmoret))
 
 ### glTF Loader
 
@@ -105,6 +106,7 @@
 - Avoid firing button events multiple times when calling vrController.attachMesh() ([TrevorDev](https://github.com/TrevorDev))
 - Parse geometry when load binary mesh ([SinhNQ](https://github.com/quocsinh))
 - Removing observers during observable notify should not skip over valid observers ([TrevorDev](https://github.com/TrevorDev))
+- Initializing gamepadManager should register the gamepad update events ([TrevorDev](https://github.com/TrevorDev))
 
 ### Core Engine
 

inspector/src/treetools/BoundingBox.ts

@@ -17,7 +17,7 @@ module INSPECTOR{
         constructor(obj:IToolBoundingBox) {
             super (); 
             this._obj = obj;
-            this._elem.classList.add('fa-square-o');
+            this._elem.classList.add('fa-cube');
             this._on = this._obj.isBoxVisible();
             this._check();
         }

loaders/src/OBJ/babylon.objFileLoader.ts

@@ -252,7 +252,7 @@ module BABYLON {
                 () => { console.warn("Error - Unable to load " + pathOfFile); });
         }
 
-        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
+        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
             //get the meshes from OBJ file
             return this._parseSolid(meshesNames, scene, data, rootUrl).then(meshes => {
                 return {

loaders/src/STL/babylon.stlFileLoader.ts

@@ -18,7 +18,7 @@ module BABYLON {
             ".stl": { isBinary: true },
         };
 
-        public importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<ParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean {
+        public importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: Nullable<AbstractMesh[]>, particleSystems: Nullable<IParticleSystem[]>, skeletons: Nullable<Skeleton[]>): boolean {
             var matches;
 
             if (typeof data !== "string") {

loaders/src/glTF/1.0/babylon.glTFLoader.ts

@@ -1640,7 +1640,7 @@ module BABYLON.GLTF1 {
         * @param onProgress event that fires when loading progress has occured
         * @returns a promise containg the loaded meshes, particles, skeletons and animations
         */
-        public importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
+        public importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
             return new Promise((resolve, reject) => {
                 this._importMeshAsync(meshesNames, scene, data, rootUrl, (meshes, skeletons) => {
                     resolve({

loaders/src/glTF/2.0/babylon.glTFLoader.ts

@@ -95,7 +95,7 @@ module BABYLON.GLTF2 {
             this._parent._clear();
         }
 
-        public importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
+        public importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
             return Promise.resolve().then(() => {
                 this._babylonScene = scene;
                 this._rootUrl = rootUrl;

loaders/src/glTF/babylon.glTFFileLoader.ts

@@ -89,7 +89,7 @@ module BABYLON {
     /** @hidden */
     export interface IGLTFLoader extends IDisposable {
         readonly state: Nullable<GLTFLoaderState>;
-        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{ meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }>;
+        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<{ meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }>;
         loadAsync: (scene: Scene, data: IGLTFLoaderData, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void) => Promise<void>;
     }
 
@@ -425,7 +425,7 @@ module BABYLON {
          * @param onProgress event that fires when loading progress has occured
          * @returns a promise containg the loaded meshes, particles, skeletons and animations
          */
-        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
+        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: SceneLoaderProgressEvent) => void): Promise<{ meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[] }> {
             return Promise.resolve().then(() => {
                 const loaderData = this._parse(data);
                 this._loader = this._getLoader(loaderData);

package.json

@@ -9,7 +9,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "3.3.0-alpha.9",
+    "version": "3.3.0-alpha.11",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

src/Animations/babylon.animatable.ts

@@ -282,9 +282,10 @@
         /**
          * Stop and delete the current animation
          * @param animationName defines a string used to only stop some of the runtime animations instead of all
+         * @param targetMask - a function that determines if the animation should be stopped based on its target (all animations will be stopped if both this and animationName are empty)
          */
-        public stop(animationName?: string): void {
-            if (animationName) {
+        public stop(animationName?: string, targetMask?: (target: any) => boolean): void {
+            if (animationName || targetMask) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
 
                 if (idx > -1) {
@@ -292,11 +293,15 @@
                     var runtimeAnimations = this._runtimeAnimations;
 
                     for (var index = runtimeAnimations.length - 1; index >= 0; index--) {
-                        if (typeof animationName === "string" && runtimeAnimations[index].animation.name != animationName) {
+                        const runtimeAnimation = runtimeAnimations[index];
+                        if (animationName && runtimeAnimation.animation.name != animationName) {
+                            continue;
+                        }
+                        if (targetMask && !targetMask(runtimeAnimation.target)) {
                             continue;
                         }
 
-                        runtimeAnimations[index].dispose();
+                        runtimeAnimation.dispose();
                         runtimeAnimations.splice(index, 1);
                     }
 

src/Cameras/Stereoscopic/babylon.anaglyphArcRotateCamera.ts

@@ -0,0 +1,35 @@
+module BABYLON {
+    Node.AddNodeConstructor("AnaglyphArcRotateCamera", (name, scene, options) => {
+        return () => new AnaglyphArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), options.interaxial_distance, scene);
+    });
+
+    /**
+     * Camera used to simulate anaglyphic rendering (based on ArcRotateCamera)
+     */    
+    export class AnaglyphArcRotateCamera extends ArcRotateCamera {
+
+        /**
+         * Creates a new AnaglyphArcRotateCamera
+         * @param name defines camera name
+         * @param alpha defines alpha angle (in radians)
+         * @param beta defines beta angle (in radians)
+         * @param radius defines radius
+         * @param target defines camera target 
+         * @param interaxialDistance defines distance between each color axis
+         * @param scene defines the hosting scene
+         */
+        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, interaxialDistance: number, scene: Scene) {
+            super(name, alpha, beta, radius, target, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns AnaglyphArcRotateCamera
+         */        
+        public getClassName(): string {
+            return "AnaglyphArcRotateCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.anaglyphFreeCamera.ts

@@ -0,0 +1,31 @@
+module BABYLON {
+    Node.AddNodeConstructor("AnaglyphFreeCamera", (name, scene, options) => {
+        return () => new AnaglyphFreeCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
+    });
+
+    /**
+     * Camera used to simulate anaglyphic rendering (based on FreeCamera)
+     */
+    export class AnaglyphFreeCamera extends FreeCamera {
+        /**
+         * Creates a new AnaglyphFreeCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param scene defines the hosting scene
+         */
+        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns AnaglyphFreeCamera
+         */
+        public getClassName(): string {
+            return "AnaglyphFreeCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.anaglyphGamepadCamera.ts

@@ -0,0 +1,31 @@
+module BABYLON {
+    Node.AddNodeConstructor("AnaglyphGamepadCamera", (name, scene, options) => {
+        return () => new AnaglyphGamepadCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
+    });
+
+    /**
+     * Camera used to simulate anaglyphic rendering (based on GamepadCamera)
+     */       
+    export class AnaglyphGamepadCamera extends GamepadCamera {
+        /**
+         * Creates a new AnaglyphGamepadCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param scene defines the hosting scene
+         */
+        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns AnaglyphGamepadCamera
+         */   
+        public getClassName(): string {
+            return "AnaglyphGamepadCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.anaglyphUniversalCamera.ts

@@ -0,0 +1,31 @@
+module BABYLON {
+    Node.AddNodeConstructor("AnaglyphUniversalCamera", (name, scene, options) => {
+        return () => new AnaglyphUniversalCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
+    });
+
+    /**
+     * Camera used to simulate anaglyphic rendering (based on UniversalCamera)
+     */        
+    export class AnaglyphUniversalCamera extends UniversalCamera {
+        /**
+         * Creates a new AnaglyphUniversalCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param scene defines the hosting scene
+         */
+        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns AnaglyphUniversalCamera
+         */           
+        public getClassName(): string {
+            return "AnaglyphUniversalCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.stereoscopicArcRotateCamera.ts

@@ -0,0 +1,36 @@
+module BABYLON {
+    Node.AddNodeConstructor("StereoscopicArcRotateCamera", (name, scene, options) => {
+        return () => new StereoscopicArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
+    });
+
+    /**
+     * Camera used to simulate stereoscopic rendering (based on ArcRotateCamera)
+     */      
+    export class StereoscopicArcRotateCamera extends ArcRotateCamera {
+        /**
+         * Creates a new StereoscopicArcRotateCamera
+         * @param name defines camera name
+         * @param alpha defines alpha angle (in radians)
+         * @param beta defines beta angle (in radians)
+         * @param radius defines radius
+         * @param target defines camera target 
+         * @param interaxialDistance defines distance between each color axis
+         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
+         * @param scene defines the hosting scene
+         */        
+        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
+            super(name, alpha, beta, radius, target, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
+            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns StereoscopicArcRotateCamera
+         */              
+        public getClassName(): string {
+            return "StereoscopicArcRotateCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.stereoscopicFreeCamera.ts

@@ -0,0 +1,33 @@
+module BABYLON {
+    Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
+        return () => new StereoscopicFreeCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
+    });
+
+    /**
+     * Camera used to simulate stereoscopic rendering (based on FreeCamera)
+     */    
+    export class StereoscopicFreeCamera extends FreeCamera {
+        /**
+         * Creates a new StereoscopicFreeCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
+         * @param scene defines the hosting scene
+         */
+        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
+            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns StereoscopicFreeCamera
+         */            
+        public getClassName(): string {
+            return "StereoscopicFreeCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.stereoscopicGamepadCamera.ts

@@ -0,0 +1,33 @@
+module BABYLON {
+    Node.AddNodeConstructor("StereoscopicGamepadCamera", (name, scene, options) => {
+        return () => new StereoscopicGamepadCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
+    });
+
+    /**
+     * Camera used to simulate stereoscopic rendering (based on GamepadCamera)
+     */      
+    export class StereoscopicGamepadCamera extends GamepadCamera {
+        /**
+         * Creates a new StereoscopicGamepadCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
+         * @param scene defines the hosting scene
+         */        
+        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
+            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns StereoscopicGamepadCamera
+         */              
+        public getClassName(): string {
+            return "StereoscopicGamepadCamera";
+        }
+    }
+}

src/Cameras/Stereoscopic/babylon.stereoscopicUniversalCamera.ts

@@ -0,0 +1,32 @@
+module BABYLON {
+    Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
+        return () => new StereoscopicUniversalCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
+    });    
+    /**
+     * Camera used to simulate stereoscopic rendering (based on UniversalCamera)
+     */      
+    export class StereoscopicUniversalCamera extends UniversalCamera {
+        /**
+         * Creates a new StereoscopicUniversalCamera
+         * @param name defines camera name
+         * @param position defines initial position
+         * @param interaxialDistance defines distance between each color axis
+         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
+         * @param scene defines the hosting scene
+         */        
+        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
+            super(name, position, scene);
+            this.interaxialDistance = interaxialDistance;
+            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
+            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
+        }
+
+        /**
+         * Gets camera class name
+         * @returns StereoscopicUniversalCamera
+         */              
+        public getClassName(): string {
+            return "StereoscopicUniversalCamera";
+        }
+    }
+} 

src/Cameras/VR/babylon.vrDeviceOrientationArcRotateCamera.ts

@@ -0,0 +1,21 @@
+module BABYLON {
+    Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
+        return () => new VRDeviceOrientationArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), scene);
+    });
+
+    export class VRDeviceOrientationArcRotateCamera extends ArcRotateCamera {
+
+        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
+            super(name, alpha, beta, radius, target, scene);
+
+            vrCameraMetrics.compensateDistortion = compensateDistortion;
+            this.setCameraRigMode(Camera.RIG_MODE_VR, { vrCameraMetrics: vrCameraMetrics });
+
+            this.inputs.addVRDeviceOrientation();
+        }
+
+        public getClassName(): string {
+            return "VRDeviceOrientationArcRotateCamera";
+        }
+    }
+}

src/Cameras/VR/babylon.vrDeviceOrientationCamera.ts

@@ -1,45 +0,0 @@
-module BABYLON {
-    export class VRDeviceOrientationFreeCamera extends DeviceOrientationCamera {
-
-        constructor(name: string, position: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
-            super(name, position, scene);
-
-            vrCameraMetrics.compensateDistortion = compensateDistortion;
-            this.setCameraRigMode(Camera.RIG_MODE_VR, { vrCameraMetrics: vrCameraMetrics });
-        }
-
-
-        public getClassName(): string {
-            return "VRDeviceOrientationFreeCamera";
-        }
-    }
-
-    export class VRDeviceOrientationGamepadCamera extends VRDeviceOrientationFreeCamera {
-
-        constructor(name: string, position: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
-            super(name, position, scene, compensateDistortion, vrCameraMetrics);
-            
-            this.inputs.addGamepad();
-        }
-
-        public getClassName(): string {
-            return "VRDeviceOrientationGamepadCamera";
-        }
-    }
-
-    export class VRDeviceOrientationArcRotateCamera extends ArcRotateCamera {
-
-        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
-            super(name, alpha, beta, radius, target, scene);
-
-            vrCameraMetrics.compensateDistortion = compensateDistortion;
-            this.setCameraRigMode(Camera.RIG_MODE_VR, { vrCameraMetrics: vrCameraMetrics });
-
-            this.inputs.addVRDeviceOrientation();
-        }
-
-        public getClassName(): string {
-            return "VRDeviceOrientationArcRotateCamera";
-        }
-    }
-}

src/Cameras/VR/babylon.vrDeviceOrientationFreeCamera.ts

@@ -0,0 +1,20 @@
+module BABYLON {
+    Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
+        return () => new VRDeviceOrientationFreeCamera(name, Vector3.Zero(), scene);
+    });
+
+    export class VRDeviceOrientationFreeCamera extends DeviceOrientationCamera {
+
+        constructor(name: string, position: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
+            super(name, position, scene);
+
+            vrCameraMetrics.compensateDistortion = compensateDistortion;
+            this.setCameraRigMode(Camera.RIG_MODE_VR, { vrCameraMetrics: vrCameraMetrics });
+        }
+
+
+        public getClassName(): string {
+            return "VRDeviceOrientationFreeCamera";
+        }
+    }
+}

src/Cameras/VR/babylon.vrDeviceOrientationGamepadCamera.ts

@@ -0,0 +1,18 @@
+module BABYLON {
+    Node.AddNodeConstructor("VRDeviceOrientationGamepadCamera", (name, scene) => {
+        return () => new VRDeviceOrientationGamepadCamera(name, Vector3.Zero(), scene);
+    });
+
+    export class VRDeviceOrientationGamepadCamera extends VRDeviceOrientationFreeCamera {
+
+        constructor(name: string, position: Vector3, scene: Scene, compensateDistortion = true, vrCameraMetrics: VRCameraMetrics = VRCameraMetrics.GetDefault()) {
+            super(name, position, scene, compensateDistortion, vrCameraMetrics);
+            
+            this.inputs.addGamepad();
+        }
+
+        public getClassName(): string {
+            return "VRDeviceOrientationGamepadCamera";
+        }
+    }
+}

src/Cameras/VR/babylon.vrExperienceHelper.ts

@@ -906,7 +906,7 @@ module BABYLON {
         }
 
         /**
-         * Enables controllers and user interactions suck as selecting and object or clicking on an object.
+         * Enables controllers and user interactions such as selecting and object or clicking on an object.
          */
         public enableInteractions() {
             if (!this._interactionsEnabled) {

src/Cameras/VR/babylon.webVRCamera.ts

@@ -1,4 +1,12 @@
 module BABYLON {
+    Node.AddNodeConstructor("WebVRFreeCamera", (name, scene) => {
+        return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
+    });
+
+    Node.AddNodeConstructor("WebVRGamepadCamera", (name, scene) => {
+        return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
+    });
+
     /**
      * This is a copy of VRPose. See https://developer.mozilla.org/en-US/docs/Web/API/VRPose
      * IMPORTANT!! The data is right-hand data.

src/Cameras/babylon.arcRotateCamera.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("ArcRotateCamera", (name, scene) => {
+        return () => new ArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), scene);
+    });
+
     export class ArcRotateCamera extends TargetCamera {
         @serialize()
         public alpha: number;

src/Cameras/babylon.arcRotateCameraInputsManager.ts

@@ -19,11 +19,6 @@ module BABYLON {
             return this;
         }
 
-        public addGamepad(): ArcRotateCameraInputsManager {
-            this.add(new ArcRotateCameraGamepadInput());
-            return this;
-        }
-
         public addVRDeviceOrientation(): ArcRotateCameraInputsManager {
             this.add(new ArcRotateCameraVRDeviceOrientationInput());
             return this;

src/Cameras/babylon.camera.ts

@@ -909,50 +909,17 @@
         }
 
         static GetConstructorFromName(type: string, name: string, scene: Scene, interaxial_distance: number = 0, isStereoscopicSideBySide: boolean = true): () => Camera {
-            switch (type) {
-                case "ArcRotateCamera":
-                    return () => new ArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), scene);
-                case "DeviceOrientationCamera":
-                    return () => new DeviceOrientationCamera(name, Vector3.Zero(), scene);
-                case "FollowCamera":
-                    return () => new FollowCamera(name, Vector3.Zero(), scene);
-                case "ArcFollowCamera":
-                    return () => new ArcFollowCamera(name, 0, 0, 1.0, null, scene);
-                case "GamepadCamera":
-                    return () => new GamepadCamera(name, Vector3.Zero(), scene);
-                case "TouchCamera":
-                    return () => new TouchCamera(name, Vector3.Zero(), scene);
-                case "VirtualJoysticksCamera":
-                    return () => new VirtualJoysticksCamera(name, Vector3.Zero(), scene);
-                case "WebVRFreeCamera":
-                    return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
-                case "WebVRGamepadCamera":
-                    return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
-                case "VRDeviceOrientationFreeCamera":
-                    return () => new VRDeviceOrientationFreeCamera(name, Vector3.Zero(), scene);
-                case "VRDeviceOrientationGamepadCamera":
-                    return () => new VRDeviceOrientationGamepadCamera(name, Vector3.Zero(), scene);
-                case "AnaglyphArcRotateCamera":
-                    return () => new AnaglyphArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), interaxial_distance, scene);
-                case "AnaglyphFreeCamera":
-                    return () => new AnaglyphFreeCamera(name, Vector3.Zero(), interaxial_distance, scene);
-                case "AnaglyphGamepadCamera":
-                    return () => new AnaglyphGamepadCamera(name, Vector3.Zero(), interaxial_distance, scene);
-                case "AnaglyphUniversalCamera":
-                    return () => new AnaglyphUniversalCamera(name, Vector3.Zero(), interaxial_distance, scene);
-                case "StereoscopicArcRotateCamera":
-                    return () => new StereoscopicArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), interaxial_distance, isStereoscopicSideBySide, scene);
-                case "StereoscopicFreeCamera":
-                    return () => new StereoscopicFreeCamera(name, Vector3.Zero(), interaxial_distance, isStereoscopicSideBySide, scene);
-                case "StereoscopicGamepadCamera":
-                    return () => new StereoscopicGamepadCamera(name, Vector3.Zero(), interaxial_distance, isStereoscopicSideBySide, scene);
-                case "StereoscopicUniversalCamera":
-                    return () => new StereoscopicUniversalCamera(name, Vector3.Zero(), interaxial_distance, isStereoscopicSideBySide, scene);
-                case "FreeCamera": // Forcing Universal here
-                    return () => new UniversalCamera(name, Vector3.Zero(), scene);
-                default: // Universal Camera is the default value
-                    return () => new UniversalCamera(name, Vector3.Zero(), scene);
+            let constructorFunc = Node.Construct(type, name, scene, {
+                interaxial_distance: interaxial_distance,
+                isStereoscopicSideBySide: isStereoscopicSideBySide
+            });
+
+            if (constructorFunc) {
+                return <() => Camera>constructorFunc;
             }
+
+            // Default to universal camera
+            return () => new UniversalCamera(name, Vector3.Zero(), scene);
         }
 
         public computeWorldMatrix(): Matrix {

src/Cameras/babylon.cameraInputsManager.ts

@@ -29,9 +29,8 @@ module BABYLON {
         }
 
         /**
-         * Add an input method to a camera.
-         * builtin inputs example: camera.inputs.addGamepad();
-         * custom inputs example: camera.inputs.add(new BABYLON.FreeCameraGamepadInput());
+         * Add an input method to a camera
+         * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
          * @param input camera input method
          */
         public add(input: ICameraInput<TCamera>) {

src/Cameras/babylon.deviceOrientationCamera.ts

@@ -1,4 +1,9 @@
 module BABYLON {
+
+    Node.AddNodeConstructor("DeviceOrientationCamera", (name, scene) => {
+        return () => new DeviceOrientationCamera(name, Vector3.Zero(), scene);
+    });
+
     // We're mainly based on the logic defined into the FreeCamera code
     /**
      * This is a camera specifically designed to react to device orientation events such as a modern mobile device

src/Cameras/babylon.followCamera.ts

@@ -1,4 +1,12 @@
 module BABYLON {
+    Node.AddNodeConstructor("FollowCamera", (name, scene) => {
+        return () => new FollowCamera(name, Vector3.Zero(), scene);
+    });
+
+    Node.AddNodeConstructor("ArcFollowCamera", (name, scene) => {
+        return () => new ArcFollowCamera(name, 0, 0, 1.0, null, scene);
+    });    
+
     export class FollowCamera extends TargetCamera {
         @serialize()
         public radius: number = 12;

src/Cameras/babylon.freeCamera.ts

@@ -1,4 +1,9 @@
 module BABYLON {
+    Node.AddNodeConstructor("FreeCamera", (name, scene) => {
+        // Forcing to use the Universal camera
+        return () => new UniversalCamera(name, Vector3.Zero(), scene);   
+    });
+
     export class FreeCamera extends TargetCamera {
         @serializeAsVector3()
         public ellipsoid = new Vector3(0.5, 1, 0.5);

src/Cameras/babylon.freeCameraInputsManager.ts

@@ -14,11 +14,6 @@ module BABYLON {
             return this;
         }
 
-        addGamepad(): FreeCameraInputsManager {
-            this.add(new FreeCameraGamepadInput());
-            return this;
-        }
-
         addDeviceOrientation(): FreeCameraInputsManager {
             this.add(new FreeCameraDeviceOrientationInput());
             return this;

src/Cameras/babylon.gamepadCamera.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("GamepadCamera", (name, scene) => {
+        return () => new GamepadCamera(name, Vector3.Zero(), scene);
+    });
+
     // We're mainly based on the logic defined into the FreeCamera code
     export class GamepadCamera extends UniversalCamera {
         //-- Begin properties for backward compatibility for inputs

src/Cameras/babylon.stereoscopicCameras.ts

@@ -1,224 +0,0 @@
-module BABYLON {
-    /**
-     * Camera used to simulate anaglyphic rendering (based on FreeCamera)
-     */
-    export class AnaglyphFreeCamera extends FreeCamera {
-        /**
-         * Creates a new AnaglyphFreeCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param scene defines the hosting scene
-         */
-        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns AnaglyphFreeCamera
-         */
-        public getClassName(): string {
-            return "AnaglyphFreeCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate anaglyphic rendering (based on ArcRotateCamera)
-     */    
-    export class AnaglyphArcRotateCamera extends ArcRotateCamera {
-
-        /**
-         * Creates a new AnaglyphArcRotateCamera
-         * @param name defines camera name
-         * @param alpha defines alpha angle (in radians)
-         * @param beta defines beta angle (in radians)
-         * @param radius defines radius
-         * @param target defines camera target 
-         * @param interaxialDistance defines distance between each color axis
-         * @param scene defines the hosting scene
-         */
-        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, interaxialDistance: number, scene: Scene) {
-            super(name, alpha, beta, radius, target, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns AnaglyphArcRotateCamera
-         */        
-        public getClassName(): string {
-            return "AnaglyphArcRotateCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate anaglyphic rendering (based on GamepadCamera)
-     */       
-    export class AnaglyphGamepadCamera extends GamepadCamera {
-        /**
-         * Creates a new AnaglyphGamepadCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param scene defines the hosting scene
-         */
-        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns AnaglyphGamepadCamera
-         */   
-        public getClassName(): string {
-            return "AnaglyphGamepadCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate anaglyphic rendering (based on UniversalCamera)
-     */        
-    export class AnaglyphUniversalCamera extends UniversalCamera {
-        /**
-         * Creates a new AnaglyphUniversalCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param scene defines the hosting scene
-         */
-        constructor(name: string, position: Vector3, interaxialDistance: number, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.setCameraRigMode(Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns AnaglyphUniversalCamera
-         */           
-        public getClassName(): string {
-            return "AnaglyphUniversalCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate stereoscopic rendering (based on FreeCamera)
-     */    
-    export class StereoscopicFreeCamera extends FreeCamera {
-        /**
-         * Creates a new StereoscopicFreeCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
-         * @param scene defines the hosting scene
-         */
-        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
-            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns StereoscopicFreeCamera
-         */            
-        public getClassName(): string {
-            return "StereoscopicFreeCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate stereoscopic rendering (based on ArcRotateCamera)
-     */      
-    export class StereoscopicArcRotateCamera extends ArcRotateCamera {
-        /**
-         * Creates a new StereoscopicArcRotateCamera
-         * @param name defines camera name
-         * @param alpha defines alpha angle (in radians)
-         * @param beta defines beta angle (in radians)
-         * @param radius defines radius
-         * @param target defines camera target 
-         * @param interaxialDistance defines distance between each color axis
-         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
-         * @param scene defines the hosting scene
-         */        
-        constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
-            super(name, alpha, beta, radius, target, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
-            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns StereoscopicArcRotateCamera
-         */              
-        public getClassName(): string {
-            return "StereoscopicArcRotateCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate stereoscopic rendering (based on GamepadCamera)
-     */      
-    export class StereoscopicGamepadCamera extends GamepadCamera {
-        /**
-         * Creates a new StereoscopicGamepadCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
-         * @param scene defines the hosting scene
-         */        
-        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
-            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns StereoscopicGamepadCamera
-         */              
-        public getClassName(): string {
-            return "StereoscopicGamepadCamera";
-        }
-    }
-
-    /**
-     * Camera used to simulate stereoscopic rendering (based on UniversalCamera)
-     */      
-    export class StereoscopicUniversalCamera extends UniversalCamera {
-        /**
-         * Creates a new StereoscopicUniversalCamera
-         * @param name defines camera name
-         * @param position defines initial position
-         * @param interaxialDistance defines distance between each color axis
-         * @param isStereoscopicSideBySide defines is stereoscopic is done side by side or over under
-         * @param scene defines the hosting scene
-         */        
-        constructor(name: string, position: Vector3, interaxialDistance: number, isStereoscopicSideBySide: boolean, scene: Scene) {
-            super(name, position, scene);
-            this.interaxialDistance = interaxialDistance;
-            this.isStereoscopicSideBySide = isStereoscopicSideBySide;
-            this.setCameraRigMode(isStereoscopicSideBySide ? Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL : Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER, { interaxialDistance: interaxialDistance });
-        }
-
-        /**
-         * Gets camera class name
-         * @returns StereoscopicUniversalCamera
-         */              
-        public getClassName(): string {
-            return "StereoscopicUniversalCamera";
-        }
-    }
-} 

src/Cameras/babylon.touchCamera.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("TouchCamera", (name, scene) => {
+        return () => new TouchCamera(name, Vector3.Zero(), scene);
+    });
+
     // We're mainly based on the logic defined into the FreeCamera code
     export class TouchCamera extends FreeCamera {
         //-- Begin properties for backward compatibility for inputs

src/Cameras/babylon.virtualJoysticksCamera.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("VirtualJoysticksCamera", (name, scene) => {
+        return () => new VirtualJoysticksCamera(name, Vector3.Zero(), scene);
+    });
+
     // We're mainly based on the logic defined into the FreeCamera code
     export class VirtualJoysticksCamera extends FreeCamera {
         

src/Debug/babylon.debugLayer.ts

@@ -12,11 +12,10 @@ module BABYLON {
 
         private BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
 
-        public onPropertyChangedObservable: BABYLON.Observable<{ object: any, property: string, value: any, initialValue: any }>;
+        public onPropertyChangedObservable = new BABYLON.Observable<{ object: any, property: string, value: any, initialValue: any }>();
 
         constructor(scene: Scene) {
             this._scene = scene;
-            // load inspector using require, if it doesn't exist on the global namespace.
         }
 
         /** Creates the inspector window. */
@@ -40,8 +39,8 @@ module BABYLON {
             if (!this._inspector) {
                 this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
 
-                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
-            } // else nothing to do,; instance is already existing
+                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);               
+            } // else nothing to do as instance is already created
         }
 
         public isVisible(): boolean {
@@ -105,7 +104,6 @@ module BABYLON {
             } else {
                 // Otherwise creates the inspector
                 this._createInspector(config);
-                this.onPropertyChangedObservable = new BABYLON.Observable<{ object: any, property: string, value: any, initialValue: any }>();
             }
         }
 

src/Engine/babylon.engine.ts

@@ -1,166 +1,7 @@
 module BABYLON {
-    var compileShader = (gl: WebGLRenderingContext, source: string, type: string, defines: Nullable<string>, shaderVersion: string): WebGLShader => {
-        return compileRawShader(gl, shaderVersion + (defines ? defines + "\n" : "") + source, type);
-    };
-
-    var compileRawShader = (gl: WebGLRenderingContext, source: string, type: string): WebGLShader => {
-        var shader = gl.createShader(type === "vertex" ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
-
-        gl.shaderSource(shader, source);
-        gl.compileShader(shader);
-
-        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-            let log = gl.getShaderInfoLog(shader);
-            if (log) {
-                throw new Error(log);
-            }
-        }
-
-        if (!shader) {
-            throw new Error("Something went wrong while compile the shader.");
-        }
-
-        return shader;
-    };
-
-    var getSamplingParameters = (samplingMode: number, generateMipMaps: boolean, gl: WebGLRenderingContext): { min: number; mag: number } => {
-        var magFilter = gl.NEAREST;
-        var minFilter = gl.NEAREST;
-
-        switch (samplingMode) {
-            case Engine.TEXTURE_BILINEAR_SAMPLINGMODE:
-                magFilter = gl.LINEAR;
-                if (generateMipMaps) {
-                    minFilter = gl.LINEAR_MIPMAP_NEAREST;
-                } else {
-                    minFilter = gl.LINEAR;
-                }
-                break;
-            case Engine.TEXTURE_TRILINEAR_SAMPLINGMODE:
-                magFilter = gl.LINEAR;
-                if (generateMipMaps) {
-                    minFilter = gl.LINEAR_MIPMAP_LINEAR;
-                } else {
-                    minFilter = gl.LINEAR;
-                }
-                break;
-            case Engine.TEXTURE_NEAREST_SAMPLINGMODE:
-                magFilter = gl.NEAREST;
-                if (generateMipMaps) {
-                    minFilter = gl.NEAREST_MIPMAP_LINEAR;
-                } else {
-                    minFilter = gl.NEAREST;
-                }
-                break;
-            case Engine.TEXTURE_NEAREST_NEAREST_MIPNEAREST:
-                magFilter = gl.NEAREST;
-                if (generateMipMaps) {
-                    minFilter = gl.NEAREST_MIPMAP_NEAREST;
-                } else {
-                    minFilter = gl.NEAREST;
-                }
-                break;
-            case Engine.TEXTURE_NEAREST_LINEAR_MIPNEAREST:
-                magFilter = gl.NEAREST;
-                if (generateMipMaps) {
-                    minFilter = gl.LINEAR_MIPMAP_NEAREST;
-                } else {
-                    minFilter = gl.LINEAR;
-                }
-                break;
-            case Engine.TEXTURE_NEAREST_LINEAR_MIPLINEAR:
-                magFilter = gl.NEAREST;
-                if (generateMipMaps) {
-                    minFilter = gl.LINEAR_MIPMAP_LINEAR;
-                } else {
-                    minFilter = gl.LINEAR;
-                }
-                break;
-            case Engine.TEXTURE_NEAREST_LINEAR:
-                magFilter = gl.NEAREST;
-                minFilter = gl.LINEAR;
-                break;
-            case Engine.TEXTURE_NEAREST_NEAREST:
-                magFilter = gl.NEAREST;
-                minFilter = gl.NEAREST;
-                break;
-            case Engine.TEXTURE_LINEAR_NEAREST_MIPNEAREST:
-                magFilter = gl.LINEAR;
-                if (generateMipMaps) {
-                    minFilter = gl.NEAREST_MIPMAP_NEAREST;
-                } else {
-                    minFilter = gl.NEAREST;
-                }
-                break;
-            case Engine.TEXTURE_LINEAR_NEAREST_MIPLINEAR:
-                magFilter = gl.LINEAR;
-                if (generateMipMaps) {
-                    minFilter = gl.NEAREST_MIPMAP_LINEAR;
-                } else {
-                    minFilter = gl.NEAREST;
-                }
-                break;
-            case Engine.TEXTURE_LINEAR_LINEAR:
-                magFilter = gl.LINEAR;
-                minFilter = gl.LINEAR;
-                break;
-            case Engine.TEXTURE_LINEAR_NEAREST:
-                magFilter = gl.LINEAR;
-                minFilter = gl.NEAREST;
-                break;
-        }
-
-        return {
-            min: minFilter,
-            mag: magFilter
-        }
-    }
-
-    var partialLoadImg = (url: string, index: number, loadedImages: HTMLImageElement[], scene: Nullable<Scene>,
-        onfinish: (images: HTMLImageElement[]) => void, onErrorCallBack: Nullable<(message?: string, exception?: any) => void> = null) => {
-
-        var img: HTMLImageElement;
-
-        var onload = () => {
-            loadedImages[index] = img;
-            (<any>loadedImages)._internalCount++;
-
-            if (scene) {
-                scene._removePendingData(img);
-            }
-
-            if ((<any>loadedImages)._internalCount === 6) {
-                onfinish(loadedImages);
-            }
-        };
-
-        var onerror = (message?: string, exception?: any) => {
-            if (scene) {
-                scene._removePendingData(img);
-            }
-
-            if (onErrorCallBack) {
-                onErrorCallBack(message, exception);
-            }
-        };
-
-        img = Tools.LoadImage(url, onload, onerror, scene ? scene.database : null);
-        if (scene) {
-            scene._addPendingData(img);
-        }
-    }
-
-    var cascadeLoadImgs = (rootUrl: string, scene: Nullable<Scene>,
-        onfinish: (images: HTMLImageElement[]) => void, files: string[], onError: Nullable<(message?: string, exception?: any) => void> = null) => {
-
-        var loadedImages: HTMLImageElement[] = [];
-        (<any>loadedImages)._internalCount = 0;
-
-        for (let index = 0; index < 6; index++) {
-            partialLoadImg(files[index], index, loadedImages, scene, onfinish, onError);
-        }
-    };
-
+    /**
+     * Keeps track of all the buffer info used in engine.
+     */
     class BufferPointer {
         public active: boolean;
         public index: number;
@@ -589,7 +430,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-alpha.9";
+            return "3.3.0-alpha.11";
         }
 
         // Updatable statics so stick with vars here
@@ -3314,41 +3155,30 @@
             return effect;
         }
 
-        /**
-         * Create an effect to use with particle systems.
-         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
-         * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
-         * @param uniformsNames defines a list of attribute names 
-         * @param samplers defines an array of string used to represent textures
-         * @param defines defines the string containing the defines to use to compile the shaders
-         * @param fallbacks defines the list of potential fallbacks to use if shader conmpilation fails
-         * @param onCompiled defines a function to call when the effect creation is successful
-         * @param onError defines a function to call when the effect creation has failed
-         * @returns the new Effect
-         */
-        public createEffectForParticles(fragmentName: string, uniformsNames: string[] = [], samplers: string[] = [], defines = "", fallbacks?: EffectFallbacks,
-            onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void): Effect {
-
-            var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions();
-            var effectCreationOption = ParticleSystem._GetEffectCreationOptions();
-
-            if (defines.indexOf(" BILLBOARD") === -1) {
-                defines += "\n#define BILLBOARD\n";
+        private _compileShader(source: string, type: string, defines: Nullable<string>, shaderVersion: string): WebGLShader {
+            return this._compileRawShader(shaderVersion + (defines ? defines + "\n" : "") + source, type);
+        };
+    
+        private _compileRawShader(source: string, type: string): WebGLShader {
+            var gl = this._gl;
+            var shader = gl.createShader(type === "vertex" ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
+    
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+    
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                let log = gl.getShaderInfoLog(shader);
+                if (log) {
+                    throw new Error(log);
+                }
             }
-
-            if (samplers.indexOf("diffuseSampler") === -1) {
-                samplers.push("diffuseSampler");
+    
+            if (!shader) {
+                throw new Error("Something went wrong while compile the shader.");
             }
-
-            return this.createEffect(
-                {
-                    vertex: "particles",
-                    fragmentElement: fragmentName
-                },
-                attributesNamesOrOptions,
-                effectCreationOption.concat(uniformsNames),
-                samplers, defines, fallbacks, onCompiled, onError);
-        }
+    
+            return shader;
+        };
 
         /**
          * Directly creates a webGL program
@@ -3361,8 +3191,8 @@
         public createRawShaderProgram(vertexCode: string, fragmentCode: string, context?: WebGLRenderingContext, transformFeedbackVaryings: Nullable<string[]> = null): WebGLProgram {
             context = context || this._gl;
 
-            var vertexShader = compileRawShader(context, vertexCode, "vertex");
-            var fragmentShader = compileRawShader(context, fragmentCode, "fragment");
+            var vertexShader = this._compileRawShader(vertexCode, "vertex");
+            var fragmentShader = this._compileRawShader(fragmentCode, "fragment");
 
             return this._createShaderProgram(vertexShader, fragmentShader, context, transformFeedbackVaryings);
         }
@@ -3382,8 +3212,8 @@
             this.onBeforeShaderCompilationObservable.notifyObservers(this);
 
             var shaderVersion = (this._webGLVersion > 1) ? "#version 300 es\n#define WEBGL2 \n" : "";
-            var vertexShader = compileShader(context, vertexCode, "vertex", defines, shaderVersion);
-            var fragmentShader = compileShader(context, fragmentCode, "fragment", defines, shaderVersion);
+            var vertexShader = this._compileShader(vertexCode, "vertex", defines, shaderVersion);
+            var fragmentShader = this._compileShader(fragmentCode, "fragment", defines, shaderVersion);
 
             let program = this._createShaderProgram(vertexShader, fragmentShader, context, transformFeedbackVaryings);
 
@@ -4052,6 +3882,145 @@
             return null;
         }
 
+        private _getSamplingParameters(samplingMode: number, generateMipMaps: boolean): { min: number; mag: number } {
+            var gl = this._gl;
+            var magFilter = gl.NEAREST;
+            var minFilter = gl.NEAREST;
+    
+            switch (samplingMode) {
+                case Engine.TEXTURE_BILINEAR_SAMPLINGMODE:
+                    magFilter = gl.LINEAR;
+                    if (generateMipMaps) {
+                        minFilter = gl.LINEAR_MIPMAP_NEAREST;
+                    } else {
+                        minFilter = gl.LINEAR;
+                    }
+                    break;
+                case Engine.TEXTURE_TRILINEAR_SAMPLINGMODE:
+                    magFilter = gl.LINEAR;
+                    if (generateMipMaps) {
+                        minFilter = gl.LINEAR_MIPMAP_LINEAR;
+                    } else {
+                        minFilter = gl.LINEAR;
+                    }
+                    break;
+                case Engine.TEXTURE_NEAREST_SAMPLINGMODE:
+                    magFilter = gl.NEAREST;
+                    if (generateMipMaps) {
+                        minFilter = gl.NEAREST_MIPMAP_LINEAR;
+                    } else {
+                        minFilter = gl.NEAREST;
+                    }
+                    break;
+                case Engine.TEXTURE_NEAREST_NEAREST_MIPNEAREST:
+                    magFilter = gl.NEAREST;
+                    if (generateMipMaps) {
+                        minFilter = gl.NEAREST_MIPMAP_NEAREST;
+                    } else {
+                        minFilter = gl.NEAREST;
+                    }
+                    break;
+                case Engine.TEXTURE_NEAREST_LINEAR_MIPNEAREST:
+                    magFilter = gl.NEAREST;
+                    if (generateMipMaps) {
+                        minFilter = gl.LINEAR_MIPMAP_NEAREST;
+                    } else {
+                        minFilter = gl.LINEAR;
+                    }
+                    break;
+                case Engine.TEXTURE_NEAREST_LINEAR_MIPLINEAR:
+                    magFilter = gl.NEAREST;
+                    if (generateMipMaps) {
+                        minFilter = gl.LINEAR_MIPMAP_LINEAR;
+                    } else {
+                        minFilter = gl.LINEAR;
+                    }
+                    break;
+                case Engine.TEXTURE_NEAREST_LINEAR:
+                    magFilter = gl.NEAREST;
+                    minFilter = gl.LINEAR;
+                    break;
+                case Engine.TEXTURE_NEAREST_NEAREST:
+                    magFilter = gl.NEAREST;
+                    minFilter = gl.NEAREST;
+                    break;
+                case Engine.TEXTURE_LINEAR_NEAREST_MIPNEAREST:
+                    magFilter = gl.LINEAR;
+                    if (generateMipMaps) {
+                        minFilter = gl.NEAREST_MIPMAP_NEAREST;
+                    } else {
+                        minFilter = gl.NEAREST;
+                    }
+                    break;
+                case Engine.TEXTURE_LINEAR_NEAREST_MIPLINEAR:
+                    magFilter = gl.LINEAR;
+                    if (generateMipMaps) {
+                        minFilter = gl.NEAREST_MIPMAP_LINEAR;
+                    } else {
+                        minFilter = gl.NEAREST;
+                    }
+                    break;
+                case Engine.TEXTURE_LINEAR_LINEAR:
+                    magFilter = gl.LINEAR;
+                    minFilter = gl.LINEAR;
+                    break;
+                case Engine.TEXTURE_LINEAR_NEAREST:
+                    magFilter = gl.LINEAR;
+                    minFilter = gl.NEAREST;
+                    break;
+            }
+    
+            return {
+                min: minFilter,
+                mag: magFilter
+            }
+        }
+    
+        private _partialLoadImg(url: string, index: number, loadedImages: HTMLImageElement[], scene: Nullable<Scene>,
+            onfinish: (images: HTMLImageElement[]) => void, onErrorCallBack: Nullable<(message?: string, exception?: any) => void> = null) {
+    
+            var img: HTMLImageElement;
+    
+            var onload = () => {
+                loadedImages[index] = img;
+                (<any>loadedImages)._internalCount++;
+    
+                if (scene) {
+                    scene._removePendingData(img);
+                }
+    
+                if ((<any>loadedImages)._internalCount === 6) {
+                    onfinish(loadedImages);
+                }
+            };
+    
+            var onerror = (message?: string, exception?: any) => {
+                if (scene) {
+                    scene._removePendingData(img);
+                }
+    
+                if (onErrorCallBack) {
+                    onErrorCallBack(message, exception);
+                }
+            };
+    
+            img = Tools.LoadImage(url, onload, onerror, scene ? scene.database : null);
+            if (scene) {
+                scene._addPendingData(img);
+            }
+        }
+
+        private _cascadeLoadImgs(rootUrl: string, scene: Nullable<Scene>,
+            onfinish: (images: HTMLImageElement[]) => void, files: string[], onError: Nullable<(message?: string, exception?: any) => void> = null) {
+    
+            var loadedImages: HTMLImageElement[] = [];
+            (<any>loadedImages)._internalCount = 0;
+    
+            for (let index = 0; index < 6; index++) {
+                this._partialLoadImg(files[index], index, loadedImages, scene, onfinish, onError);
+            }
+        };
+
         /** @hidden */
         public _createTexture(): WebGLTexture {
             let texture = this._gl.createTexture();
@@ -4155,7 +4124,7 @@
                         var ktx = new KhronosTextureContainer(data, 1);
 
                         this._prepareWebGLTexture(texture, scene, ktx.pixelWidth, ktx.pixelHeight, invertY, false, true, () => {
-                            ktx.uploadLevels(this._gl, !noMipmap);
+                            ktx.uploadLevels(texture, !noMipmap);
                             return false;
                         }, samplingMode);
                     };
@@ -4166,7 +4135,7 @@
                         var header = TGATools.GetTGAHeader(data);
 
                         this._prepareWebGLTexture(texture, scene, header.width, header.height, invertY, noMipmap, false, () => {
-                            TGATools.UploadContent(this._gl, data);
+                            TGATools.UploadContent(texture, data);
                             return false;
                         }, samplingMode);
                     };
@@ -4177,7 +4146,7 @@
 
                         var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) === 1);
                         this._prepareWebGLTexture(texture, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, () => {
-                            DDSTools.UploadDDSLevels(this, this._gl, data, info, loadMipmap, 1);
+                            DDSTools.UploadDDSLevels(this, texture, data, info, loadMipmap, 1);
                             return false;
                         }, samplingMode);
                     };
@@ -4395,7 +4364,7 @@
             this._bindTextureDirectly(this._gl.TEXTURE_2D, texture, true);
 
             // Filters
-            var filters = getSamplingParameters(samplingMode, generateMipMaps, this._gl);
+            var filters = this._getSamplingParameters(samplingMode, generateMipMaps);
 
             this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, filters.mag);
             this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, filters.min);
@@ -4421,6 +4390,11 @@
             }
         }
 
+        /** @hidden */
+        public _getUnpackAlignement(): number {
+            return this._gl.getParameter(this._gl.UNPACK_ALIGNMENT);
+        }
+
         /**
          * Creates a dynamic texture
          * @param width defines the width of the texture
@@ -4459,7 +4433,7 @@
          * @param texture defines the texture to update
          */
         public updateTextureSamplingMode(samplingMode: number, texture: InternalTexture): void {
-            var filters = getSamplingParameters(samplingMode, texture.generateMipMaps, this._gl);
+            var filters = this._getSamplingParameters(samplingMode, texture.generateMipMaps);
 
             if (texture.isCube) {
                 this._setTextureParameterInteger(this._gl.TEXTURE_CUBE_MAP, this._gl.TEXTURE_MAG_FILTER, filters.mag, texture);
@@ -4637,7 +4611,7 @@
             
             var gl = this._gl;
             var target = internalTexture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
-            var samplingParameters = getSamplingParameters(internalTexture.samplingMode, false, gl);
+            var samplingParameters = this._getSamplingParameters(internalTexture.samplingMode, false);
             gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, samplingParameters.mag);
             gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, samplingParameters.min);
             gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -4837,7 +4811,7 @@
             var width = (<{ width: number, height: number }>size).width || <number>size;
             var height = (<{ width: number, height: number }>size).height || <number>size;
 
-            var filters = getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps ? true : false, gl);
+            var filters = this._getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps ? true : false);
 
             if (fullOptions.type === Engine.TEXTURETYPE_FLOAT && !this._caps.textureFloat) {
                 fullOptions.type = Engine.TEXTURETYPE_UNSIGNED_INT;
@@ -4949,7 +4923,7 @@
                     samplingMode = Engine.TEXTURE_NEAREST_SAMPLINGMODE;
                 }
 
-                var filters = getSamplingParameters(samplingMode, generateMipMaps, gl);
+                var filters = this._getSamplingParameters(samplingMode, generateMipMaps);
                 if (type === Engine.TEXTURETYPE_FLOAT && !this._caps.textureFloat) {
                     type = Engine.TEXTURETYPE_UNSIGNED_INT;
                     Tools.Warn("Float textures are not supported. Render target forced to TEXTURETYPE_UNSIGNED_BYTE type");
@@ -5241,17 +5215,49 @@
         }
 
         /** @hidden */
-        public _uploadDataToTexture(target: number, lod: number, internalFormat: number, width: number, height: number, format: number, type: number, data: ArrayBufferView) {
-            this._gl.texImage2D(target, lod, internalFormat, width, height, 0, format, type, data);
+        public _uploadCompressedDataToTextureDirectly(texture: InternalTexture, internalFormat: number, width: number, height: number, data: ArrayBufferView, faceIndex: number = 0, lod: number = 0) {
+            var gl = this._gl;
+
+            var target = gl.TEXTURE_2D;
+            if (texture.isCube) {
+                target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+            }
+
+            this._gl.compressedTexImage2D(target, lod, internalFormat, width, height, 0, <DataView>data);
+        }
+
+        /** @hidden */
+        public _uploadDataToTextureDirectly(texture: InternalTexture, width: number, height: number, imageData: ArrayBufferView, faceIndex: number = 0, lod: number = 0): void {
+            var gl = this._gl;
+
+            var textureType = this._getWebGLTextureType(texture.type);
+            var format = this._getInternalFormat(texture.format);
+            var internalFormat = this._getRGBABufferInternalSizedFormat(texture.type, format);
+
+            this._unpackFlipY(texture.invertY);
+
+            var target = gl.TEXTURE_2D;
+            if (texture.isCube) {
+                target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+            }
+
+            gl.texImage2D(target, lod, internalFormat, width, height, 0, format, textureType, imageData);
         }
 
         /** @hidden */
-        public _uploadCompressedDataToTexture(target: number, lod: number, internalFormat: number, width: number, height: number, data: ArrayBufferView) {
-            this._gl.compressedTexImage2D(target, lod, internalFormat, width, height, 0, <DataView>data);
+        public _uploadArrayBufferViewToTexture(texture: InternalTexture, imageData: ArrayBufferView, faceIndex: number = 0, lod: number = 0): void {
+            var gl = this._gl;
+            var bindTarget = texture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
+
+            this._bindTextureDirectly(bindTarget, texture, true);
+
+            this._uploadDataToTextureDirectly(texture, texture.width, texture.height, imageData, faceIndex, lod);
+
+            this._bindTextureDirectly(bindTarget, null, true);
         }
 
         /** @hidden */
-        public _uploadImageToTexture(texture: InternalTexture, faceIndex: number, lod: number, image: HTMLImageElement) {
+        public _uploadImageToTexture(texture: InternalTexture, image: HTMLImageElement, faceIndex: number = 0, lod: number = 0) {
             var gl = this._gl;
 
             var textureType = this._getWebGLTextureType(texture.type);
@@ -5265,7 +5271,7 @@
 
             var target = gl.TEXTURE_2D;
             if (texture.isCube) {
-                var target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+                target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
             }
 
             gl.texImage2D(target, lod, internalFormat, format, textureType, image);
@@ -5303,7 +5309,7 @@
             var texture = new InternalTexture(this, InternalTexture.DATASOURCE_RENDERTARGET);
             this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture, true);
 
-            var filters = getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps, gl);
+            var filters = this._getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps);
 
             if (fullOptions.type === Engine.TEXTURETYPE_FLOAT && !this._caps.textureFloat) {
               fullOptions.type = Engine.TEXTURETYPE_UNSIGNED_INT;
@@ -5428,7 +5434,7 @@
                         var data: any = loadData.data;
                         this._unpackFlipY(info.isCompressed);
 
-                        DDSTools.UploadDDSLevels(this, this._gl, data, info, true, 6, mipmapIndex);
+                        DDSTools.UploadDDSLevels(this, texture, data, info, true, 6, mipmapIndex);
                     }
                     else {
                         Tools.Warn("DDS is the only prefiltered cube map supported so far.")
@@ -5521,7 +5527,7 @@
                     this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture, true);
                     this._unpackFlipY(true);
 
-                    ktx.uploadLevels(this._gl, !noMipmap);
+                    ktx.uploadLevels(texture, !noMipmap);
 
                     this.setCubeMapTextureParams(gl, loadMipmap);
 
@@ -5568,7 +5574,7 @@
                                 this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture, true);
                                 this._unpackFlipY(info.isCompressed);
 
-                                DDSTools.UploadDDSLevels(this, this._gl, data, info, loadMipmap, 6, -1, index);
+                                DDSTools.UploadDDSLevels(this, texture, data, info, loadMipmap, 6, -1, index);
 
                                 if (!noMipmap && !info.isFourCC && info.mipmapCount === 1) {
                                     gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
@@ -5603,7 +5609,7 @@
                             this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture, true);
                             this._unpackFlipY(info.isCompressed);
 
-                            DDSTools.UploadDDSLevels(this, this._gl, data, info, loadMipmap, 6);
+                            DDSTools.UploadDDSLevels(this, texture, data, info, loadMipmap, 6);
 
                             if (!noMipmap && !info.isFourCC && info.mipmapCount === 1) {
                                 gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
@@ -5630,7 +5636,7 @@
                     throw new Error("Cannot load cubemap because files were not defined");
                 }
 
-                cascadeLoadImgs(rootUrl, scene, imgs => {
+                this._cascadeLoadImgs(rootUrl, scene, imgs => {
                     var width = this.needPOTTextures ? Tools.GetExponentOfTwo(imgs[0].width, this._caps.maxCubemapTextureSize) : imgs[0].width;
                     var height = width;
 
@@ -5818,7 +5824,7 @@
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
             else {
-                var filters = getSamplingParameters(samplingMode, generateMipMaps, gl);
+                var filters = this._getSamplingParameters(samplingMode, generateMipMaps);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, filters.mag);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, filters.min);
             }
@@ -6003,7 +6009,7 @@
             this._bindTextureDirectly(this._gl.TEXTURE_3D, texture, true);
 
             // Filters
-            var filters = getSamplingParameters(samplingMode, generateMipMaps, this._gl);
+            var filters = this._getSamplingParameters(samplingMode, generateMipMaps);
 
             this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MAG_FILTER, filters.mag);
             this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MIN_FILTER, filters.min);
@@ -6025,7 +6031,7 @@
                 return;
             }
 
-            var filters = getSamplingParameters(samplingMode, !noMipmap, gl);
+            var filters = this._getSamplingParameters(samplingMode, !noMipmap);
 
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filters.mag);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filters.min);

src/Engine/babylon.nullEngine.ts

@@ -410,6 +410,15 @@
             return 0;
         }
 
+        /** @hidden */
+        public _getUnpackAlignement(): number {
+            return 1;
+        }
+
+        /** @hidden */
+        public _unpackFlipY(value: boolean) {
+        }
+
         public updateDynamicIndexBuffer(indexBuffer: WebGLBuffer, indices: IndicesArray, offset: number = 0): void {
         }
 
@@ -457,5 +466,21 @@
 
         public hideLoadingUI(): void {
         }
+
+        /** @hidden */
+        public _uploadCompressedDataToTextureDirectly(texture: InternalTexture, internalFormat: number, width: number, height: number, data: ArrayBufferView, faceIndex: number = 0, lod: number = 0) {
+        }
+
+        /** @hidden */
+        public _uploadDataToTextureDirectly(texture: InternalTexture, width: number, height: number, imageData: ArrayBufferView, faceIndex: number = 0, lod: number = 0): void {
+        }
+
+        /** @hidden */
+        public _uploadArrayBufferViewToTexture(texture: InternalTexture, imageData: ArrayBufferView, faceIndex: number = 0, lod: number = 0): void {
+        }
+
+        /** @hidden */
+        public _uploadImageToTexture(texture: InternalTexture, image: HTMLImageElement, faceIndex: number = 0, lod: number = 0) {
+        }
     }
 }

src/Gamepad/babylon.gamepadSceneComponent.ts

@@ -0,0 +1,104 @@
+module BABYLON {
+    export interface Scene {
+        /** @hidden */
+        _gamepadManager: Nullable<GamepadManager>;
+
+        /**
+         * Gets the gamepad manager associated with the scene
+         * @see http://doc.babylonjs.com/how_to/how_to_use_gamepads
+         */
+        gamepadManager: GamepadManager;
+    }
+
+    Object.defineProperty(Scene.prototype, "gamepadManager", {
+        get: function (this:Scene) {
+            if (!this._gamepadManager) {
+                this._gamepadManager = new GamepadManager(this);
+                let component = this._getComponent(SceneComponentConstants.NAME_GAMEPAD) as GamepadSystemSceneComponent;
+                if (!component) {
+                    component = new GamepadSystemSceneComponent(this);
+                    this._addComponent(component);
+                }
+            }
+
+            return this._gamepadManager;
+        },
+        enumerable: true,
+        configurable: true
+    });
+
+    export interface FreeCameraInputsManager {
+        addGamepad(): FreeCameraInputsManager;
+    }
+    
+    FreeCameraInputsManager.prototype.addGamepad = function(): FreeCameraInputsManager {
+        this.add(new FreeCameraGamepadInput());
+        return this;
+    }
+
+    export interface ArcRotateCameraInputsManager {
+        addGamepad(): ArcRotateCameraInputsManager;
+    }
+    
+    ArcRotateCameraInputsManager.prototype.addGamepad = function(): ArcRotateCameraInputsManager {
+        this.add(new ArcRotateCameraGamepadInput());
+        return this;
+    }  
+
+   /**
+     * Defines the gamepad scene component responsible to manage gamepads in a given scene
+     */
+    export class GamepadSystemSceneComponent implements ISceneComponent {
+        /**
+         * The component name helpfull to identify the component in the list of scene components.
+         */
+        public readonly name = SceneComponentConstants.NAME_GAMEPAD;
+
+        /**
+         * The scene the component belongs to.
+         */
+        public scene: Scene;
+
+        /**
+         * Creates a new instance of the component for the given scene
+         * @param scene Defines the scene to register the component in
+         */
+        constructor(scene: Scene) {
+            this.scene = scene;
+        }
+
+        /**
+         * Registers the component in a given scene
+         */
+        public register(): void {
+            this.scene._beforeCameraUpdateStage.registerStep(SceneComponentConstants.STEP_BEFORECAMERAUPDATE_GAMEPAD, this, this._beforeCameraUpdate);
+        }
+
+        /**
+         * Rebuilds the elements related to this component in case of
+         * context lost for instance.
+         */
+        public rebuild(): void {
+            // Nothing to do for gamepads
+        }
+
+        /**
+         * Disposes the component and the associated ressources
+         */
+        public dispose(): void {
+            let gamepadManager = this.scene._gamepadManager;
+            if (gamepadManager) {
+                gamepadManager.dispose();
+                this.scene._gamepadManager = null;
+            }
+        }
+
+        private _beforeCameraUpdate(): void {            
+            let gamepadManager = this.scene._gamepadManager;
+
+            if (gamepadManager && gamepadManager._isMonitoring) {
+                gamepadManager._checkGamepadsStatus();
+            }
+        }
+    }    
+}

src/Layer/babylon.effectLayerSceneComponent.ts

@@ -60,8 +60,6 @@
         public scene: Scene
 
         private _engine: Engine;
-        private _effectLayers: Array<EffectLayer>;
-
         private _renderEffects = false;
         private _needStencil = false;
         private _previousStencilState = false;
@@ -73,7 +71,7 @@
         constructor(scene: Scene) {
             this.scene = scene;
             this._engine = scene.getEngine();
-            this._effectLayers = scene.effectLayers = new Array<EffectLayer>();
+            scene.effectLayers = new Array<EffectLayer>();
         }
 
         /**
@@ -97,7 +95,8 @@
          * context lost for instance.
          */
         public rebuild(): void {
-            for (let effectLayer of this._effectLayers) {
+            let layers = this.scene.effectLayers;
+            for (let effectLayer of layers) {
                 effectLayer._rebuild();
             }
         }
@@ -110,7 +109,8 @@
             // Effect layers
             serializationObject.effectLayers = [];
 
-            for (let effectLayer of this._effectLayers) {
+            let layers = this.scene.effectLayers;
+            for (let effectLayer of layers) {
                 if (effectLayer.serialize) {
                     serializationObject.effectLayers.push(effectLayer.serialize());
                 }
@@ -146,14 +146,16 @@
         /**
          * Disposes the component and the associated ressources.
          */
-        public dispose(): void {
-            while (this._effectLayers.length) {
-                this._effectLayers[0].dispose();
+        public dispose(): void {            
+            let layers = this.scene.effectLayers;
+            while (layers.length) {
+                layers[0].dispose();
             }
         }
 
-        private _isReadyForMesh(mesh: AbstractMesh, hardwareInstancedRendering: boolean): boolean {
-            for (let layer of this._effectLayers) {
+        private _isReadyForMesh(mesh: AbstractMesh, hardwareInstancedRendering: boolean): boolean {            
+            let layers = this.scene.effectLayers;
+            for (let layer of layers) {
                 if (!layer.hasMesh(mesh)) {
                     continue;
                 }
@@ -171,9 +173,10 @@
             this._renderEffects = false;
             this._needStencil = false;
 
-            if (this._effectLayers && this._effectLayers.length > 0) {
+            let layers = this.scene.effectLayers;
+            if (layers && layers.length > 0) {
                 this._previousStencilState = this._engine.getStencilBuffer();
-                for (let effectLayer of this._effectLayers) {
+                for (let effectLayer of layers) {
                     if (effectLayer.shouldRender() &&
                         (!effectLayer.camera ||
                             (effectLayer.camera.cameraRigMode === Camera.RIG_MODE_NONE && camera === effectLayer.camera) ||
@@ -211,8 +214,10 @@
         private _draw(renderingGroupId: number): void {
             if (this._renderEffects) {
                 this._engine.setDepthBuffer(false);
-                for (let i = 0; i < this._effectLayers.length; i++) {
-                    const effectLayer = this._effectLayers[i];
+                
+                let layers = this.scene.effectLayers;
+                for (let i = 0; i < layers.length; i++) {
+                    const effectLayer = layers[i];
                     if (effectLayer.renderingGroupId === renderingGroupId) {
                         if (effectLayer.shouldRender()) {
                             effectLayer.render();

src/Layer/babylon.layerSceneComponent.ts

@@ -22,7 +22,6 @@
         public scene: Scene;
 
         private _engine: Engine;
-        private _layers: Array<Layer>;
 
         /**
          * Creates a new instance of the component for the given scene
@@ -31,7 +30,7 @@
         constructor(scene: Scene) {
             this.scene = scene;
             this._engine = scene.getEngine();
-            this._layers = scene.layers = new Array<Layer>();
+            scene.layers = new Array<Layer>();
         }
 
         /**
@@ -47,7 +46,9 @@
          * context lost for instance.
          */
         public rebuild(): void {
-            for (let layer of this._layers) {
+            let layers = this.scene.layers;
+
+            for (let layer of layers) {
                 layer._rebuild();
             }
         }
@@ -56,16 +57,20 @@
          * Disposes the component and the associated ressources.
          */
         public dispose(): void {
-            while (this._layers.length) {
-                this._layers[0].dispose();
+            let layers = this.scene.layers;
+
+            while (layers.length) {
+                layers[0].dispose();
             }
         }
 
-        private _draw(camera: Camera, isBackground: boolean): void {
-            if (this._layers.length) {
+        private _draw(camera: Camera, isBackground: boolean): void {            
+            let layers = this.scene.layers;
+
+            if (layers.length) {
                 this._engine.setDepthBuffer(false);
                 const cameraLayerMask = camera.layerMask;
-                for (let layer of this._layers) {
+                for (let layer of layers) {
                     if (layer.isBackground === isBackground && ((layer.layerMask & cameraLayerMask) !== 0)) {
                         layer.render();
                     }

src/LensFlare/babylon.lensFlareSystemSceneComponent.ts

@@ -17,6 +17,7 @@
          * @see http://doc.babylonjs.com/how_to/how_to_use_lens_flares
          */         
         lensFlareSystems: Array<LensFlareSystem>;
+
         /**
          * Removes the given lens flare system from this scene.
          * @param toRemove The lens flare system to remove
@@ -78,7 +79,7 @@
     }
 
     /**
-     * Defines the layer scene component responsible to manage any layers
+     * Defines the lens flare scene component responsible to manage any lens flares
      * in a given scene.
      */
     export class LensFlareSystemSceneComponent implements ISceneSerializableComponent {
@@ -92,8 +93,6 @@
          */
         public scene: Scene;
 
-        private _lensFlareSystems: Array<LensFlareSystem>;
-
         /**
          * Creates a new instance of the component for the given scene
          * @param scene Defines the scene to register the component in
@@ -101,7 +100,7 @@
         constructor(scene: Scene) {
             this.scene = scene;
 
-            this._lensFlareSystems = scene.lensFlareSystems = new Array<LensFlareSystem>();
+            scene.lensFlareSystems = new Array<LensFlareSystem>();
         }
 
         /**
@@ -152,7 +151,8 @@
         public serialize(serializationObject: any): void {
             // Lens flares
             serializationObject.lensFlareSystems = [];
-            for (let lensFlareSystem of this._lensFlareSystems) {
+            let lensFlareSystems = this.scene.lensFlareSystems;
+            for (let lensFlareSystem of lensFlareSystems) {
                 serializationObject.lensFlareSystems.push(lensFlareSystem.serialize());
             }
         }
@@ -161,21 +161,23 @@
          * Disposes the component and the associated ressources.
          */
         public dispose(): void {
-            while (this._lensFlareSystems.length) {
-                this._lensFlareSystems[0].dispose();
+            let lensFlareSystems = this.scene.lensFlareSystems;
+            while (lensFlareSystems.length) {
+                lensFlareSystems[0].dispose();
             }
         }
 
         private _draw(camera: Camera): void {
             // Lens flares
-            if (this.scene.lensFlaresEnabled) {
-                Tools.StartPerformanceCounter("Lens flares", this._lensFlareSystems.length > 0);
-                for (let lensFlareSystem of this._lensFlareSystems) {
+            if (this.scene.lensFlaresEnabled) {                
+                let lensFlareSystems = this.scene.lensFlareSystems;
+                Tools.StartPerformanceCounter("Lens flares", lensFlareSystems.length > 0);
+                for (let lensFlareSystem of lensFlareSystems) {
                     if ((camera.layerMask & lensFlareSystem.layerMask) !== 0) {
                         lensFlareSystem.render();
                     }
                 }
-                Tools.EndPerformanceCounter("Lens flares", this._lensFlareSystems.length > 0);
+                Tools.EndPerformanceCounter("Lens flares", lensFlareSystems.length > 0);
             }
         }
     }

src/Lights/Shadows/babylon.shadowGenerator.ts

@@ -1403,8 +1403,7 @@
          * @returns The parsed shadow generator
          */
         public static Parse(parsedShadowGenerator: any, scene: Scene): ShadowGenerator {
-            //casting to point light, as light is missing the position attr and typescript complains.
-            var light = <PointLight>scene.getLightByID(parsedShadowGenerator.lightId);
+            var light = <IShadowLight>scene.getLightByID(parsedShadowGenerator.lightId);
             var shadowGenerator = new ShadowGenerator(parsedShadowGenerator.mapSize, light);
             var shadowMap = shadowGenerator.getShadowMap();
 

src/Lights/babylon.directionalLight.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("Light_Type_1", (name, scene) => {
+        return () => new DirectionalLight(name, Vector3.Zero(), scene);
+    });
+
     /**
      * A directional light is defined by a direction (what a surprise!). 
      * The light is emitted from everywhere in the specified direction, and has an infinite range. 
@@ -216,5 +220,14 @@
         public getDepthMaxZ(activeCamera: Camera): number {
             return 1;
         }
+
+        /**
+         * Prepares the list of defines specific to the light type.
+         * @param defines the list of defines
+         * @param lightIndex defines the index of the light for the effect
+         */
+        public prepareLightSpecificDefines(defines: any, lightIndex: number): void {
+            defines["DIRLIGHT" + lightIndex] = true;
+        }
     }
 }  

src/Lights/babylon.hemisphericLight.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("Light_Type_3", (name, scene) => {
+        return () => new HemisphericLight(name, Vector3.Zero(), scene);
+    });
+
     /**
      * The HemisphericLight simulates the ambient environment light,
      * so the passed direction is the light reflection direction, not the incoming direction.
@@ -105,5 +109,14 @@
         public getTypeID(): number {
             return Light.LIGHTTYPEID_HEMISPHERICLIGHT;
         }
+
+        /**
+         * Prepares the list of defines specific to the light type.
+         * @param defines the list of defines
+         * @param lightIndex defines the index of the light for the effect
+         */
+        public prepareLightSpecificDefines(defines: any, lightIndex: number): void {
+            defines["HEMILIGHT" + lightIndex] = true;
+        }
     }
 } 

src/Lights/babylon.light.ts

@@ -7,115 +7,67 @@ module BABYLON {
     export abstract class Light extends Node {
 
         //lightmapMode Consts
-        private static _LIGHTMAP_DEFAULT = 0;
-        private static _LIGHTMAP_SPECULAR = 1;
-        private static _LIGHTMAP_SHADOWSONLY = 2;
-
         /**
          * If every light affecting the material is in this lightmapMode,
          * material.lightmapTexture adds or multiplies
          * (depends on material.useLightmapAsShadowmap)
          * after every other light calculations.
          */
-        public static get LIGHTMAP_DEFAULT(): number {
-            return Light._LIGHTMAP_DEFAULT;
-        }
-
+        public static readonly LIGHTMAP_DEFAULT = 0;
         /**
          * material.lightmapTexture as only diffuse lighting from this light
          * adds only specular lighting from this light
          * adds dynamic shadows
          */
-        public static get LIGHTMAP_SPECULAR(): number {
-            return Light._LIGHTMAP_SPECULAR;
-        }
-
+        public static readonly LIGHTMAP_SPECULAR = 1;
         /**
          * material.lightmapTexture as only lighting
          * no light calculation from this light
          * only adds dynamic shadows from this light
          */
-        public static get LIGHTMAP_SHADOWSONLY(): number {
-            return Light._LIGHTMAP_SHADOWSONLY;
-        }
+        public static readonly LIGHTMAP_SHADOWSONLY = 2;
 
         // Intensity Mode Consts
-        private static _INTENSITYMODE_AUTOMATIC = 0;
-        private static _INTENSITYMODE_LUMINOUSPOWER = 1;
-        private static _INTENSITYMODE_LUMINOUSINTENSITY = 2;
-        private static _INTENSITYMODE_ILLUMINANCE = 3;
-        private static _INTENSITYMODE_LUMINANCE = 4;
-
         /**
          * Each light type uses the default quantity according to its type:
          *      point/spot lights use luminous intensity
          *      directional lights use illuminance
          */
-        public static get INTENSITYMODE_AUTOMATIC(): number {
-            return Light._INTENSITYMODE_AUTOMATIC;
-        }
-
+        public static readonly INTENSITYMODE_AUTOMATIC = 0;
         /**
          * lumen (lm)
          */
-        public static get INTENSITYMODE_LUMINOUSPOWER(): number {
-            return Light._INTENSITYMODE_LUMINOUSPOWER;
-        }
-
+        public static readonly INTENSITYMODE_LUMINOUSPOWER = 1;
         /**
          * candela (lm/sr)
          */
-        public static get INTENSITYMODE_LUMINOUSINTENSITY(): number {
-            return Light._INTENSITYMODE_LUMINOUSINTENSITY;
-        }
-
+        public static readonly INTENSITYMODE_LUMINOUSINTENSITY = 2;
         /**
          * lux (lm/m^2)
          */
-        public static get INTENSITYMODE_ILLUMINANCE(): number {
-            return Light._INTENSITYMODE_ILLUMINANCE;
-        }
-
+        public static readonly INTENSITYMODE_ILLUMINANCE = 3;
         /**
          * nit (cd/m^2)
          */
-        public static get INTENSITYMODE_LUMINANCE(): number {
-            return Light._INTENSITYMODE_LUMINANCE;
-        }
+        public static readonly INTENSITYMODE_LUMINANCE = 4;
 
         // Light types ids const.
-        private static _LIGHTTYPEID_POINTLIGHT = 0;
-        private static _LIGHTTYPEID_DIRECTIONALLIGHT = 1;
-        private static _LIGHTTYPEID_SPOTLIGHT = 2;
-        private static _LIGHTTYPEID_HEMISPHERICLIGHT = 3;
-
         /**
          * Light type const id of the point light.
          */
-        public static get LIGHTTYPEID_POINTLIGHT(): number {
-            return Light._LIGHTTYPEID_POINTLIGHT;
-        }
-
+        public static readonly LIGHTTYPEID_POINTLIGHT = 0;
         /**
          * Light type const id of the directional light.
          */
-        public static get LIGHTTYPEID_DIRECTIONALLIGHT(): number {
-            return Light._LIGHTTYPEID_DIRECTIONALLIGHT;
-        }
-
+        public static readonly LIGHTTYPEID_DIRECTIONALLIGHT = 1;
         /**
          * Light type const id of the spot light.
          */
-        public static get LIGHTTYPEID_SPOTLIGHT(): number {
-            return Light._LIGHTTYPEID_SPOTLIGHT;
-        }
-
+        public static readonly LIGHTTYPEID_SPOTLIGHT = 2;
         /**
          * Light type const id of the hemispheric light.
          */
-        public static get LIGHTTYPEID_HEMISPHERICLIGHT(): number {
-            return Light._LIGHTTYPEID_HEMISPHERICLIGHT;
-        }
+        public static readonly LIGHTTYPEID_HEMISPHERICLIGHT = 3;
 
         /**
          * Diffuse gives the basic color to an object.
@@ -581,18 +533,14 @@ module BABYLON {
          * @param scene The scene the new light will belong to
          * @returns the constructor function
          */
-        public static GetConstructorFromName(type: number, name: string, scene: Scene): Nullable<() => Light> {
-            switch (type) {
-                case 0:
-                    return () => new PointLight(name, Vector3.Zero(), scene);
-                case 1:
-                    return () => new DirectionalLight(name, Vector3.Zero(), scene);
-                case 2:
-                    return () => new SpotLight(name, Vector3.Zero(), Vector3.Zero(), 0, 0, scene);
-                case 3:
-                    return () => new HemisphericLight(name, Vector3.Zero(), scene);
+        static GetConstructorFromName(type: number, name: string, scene: Scene): Nullable<() => Light> {
+            let constructorFunc = Node.Construct("Light_Type_" + type, name, scene);
+
+            if (constructorFunc) {
+                return <() => Light>constructorFunc;
             }
 
+            // Default to no light for none present once.
             return null;
         }
 
@@ -788,5 +736,12 @@ module BABYLON {
             }
             this.getScene().sortLightsByPriority();
         }
+
+        /**
+         * Prepares the list of defines specific to the light type.
+         * @param defines the list of defines
+         * @param lightIndex defines the index of the light for the effect
+         */
+        public abstract prepareLightSpecificDefines(defines: any, lightIndex: number): void;
     }
 }

src/Lights/babylon.pointLight.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("Light_Type_0", (name, scene) => {
+        return () => new PointLight(name, Vector3.Zero(), scene);
+    });
+
     /**
      * A point light is a light defined by an unique point in world space. 
      * The light is emitted in every direction from this point.
@@ -166,5 +170,14 @@
             this._uniformBuffer.updateFloat4("vLightData", this.position.x, this.position.y, this.position.z, 0, lightIndex);
             return this;
         }
+
+        /**
+         * Prepares the list of defines specific to the light type.
+         * @param defines the list of defines
+         * @param lightIndex defines the index of the light for the effect
+         */
+        public prepareLightSpecificDefines(defines: any, lightIndex: number): void {
+            defines["POINTLIGHT" + lightIndex] = true;
+        }
     }
 } 

src/Lights/babylon.spotLight.ts

@@ -1,4 +1,8 @@
 module BABYLON {
+    Node.AddNodeConstructor("Light_Type_2", (name, scene) => {
+        return () => new SpotLight(name, Vector3.Zero(), Vector3.Zero(), 0, 0, scene);
+    });
+
     /**
      * A spot light is defined by a position, a direction, an angle, and an exponent. 
      * These values define a cone of light starting from the position, emitting toward the direction.
@@ -323,5 +327,15 @@
                 this._projectionTexture.dispose();
             }
         }
+
+        /**
+         * Prepares the list of defines specific to the light type.
+         * @param defines the list of defines
+         * @param lightIndex defines the index of the light for the effect
+         */
+        public prepareLightSpecificDefines(defines: any, lightIndex: number): void {
+            defines["SPOTLIGHT" + lightIndex] = true;
+            defines["PROJECTEDLIGHTTEXTURE" + lightIndex] = this.projectionTexture ? true : false;
+        }
     }
 }

src/Loading/Plugins/babylon.babylonFileLoader.ts

@@ -293,21 +293,6 @@
                 }
             }
 
-            // Particles Systems
-            if (parsedData.particleSystems !== undefined && parsedData.particleSystems !== null) {
-                for (index = 0, cache = parsedData.particleSystems.length; index < cache; index++) {
-                    var parsedParticleSystem = parsedData.particleSystems[index];
-
-                    if (parsedParticleSystem.activeParticleCount) {
-                        let ps = GPUParticleSystem.Parse(parsedParticleSystem, scene, rootUrl);
-                        container.particleSystems.push(ps);
-                    } else {
-                        let ps = ParticleSystem.Parse(parsedParticleSystem, scene, rootUrl);
-                        container.particleSystems.push(ps);
-                    }
-                }
-            }
-
             // Shadows
             if (parsedData.shadowGenerators !== undefined && parsedData.shadowGenerators !== null) {
                 for (index = 0, cache = parsedData.shadowGenerators.length; index < cache; index++) {
@@ -384,7 +369,7 @@
 
             return false;
         },
-        importMesh: (meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[], onError?: (message: string, exception?: any) => void): boolean => {
+        importMesh: (meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], onError?: (message: string, exception?: any) => void): boolean => {
             // Entire method running in try block, so ALWAYS logs as far as it got, only actually writes details
             // when SceneLoader.debugLogging = true (default), or exception encountered.
             // Everything stored in var log instead of writing separate lines to support only writing in exception,
@@ -555,10 +540,13 @@
 
                 // Particles
                 if (parsedData.particleSystems !== undefined && parsedData.particleSystems !== null) {
-                    for (index = 0, cache = parsedData.particleSystems.length; index < cache; index++) {
-                        var parsedParticleSystem = parsedData.particleSystems[index];
-                        if (hierarchyIds.indexOf(parsedParticleSystem.emitterId) !== -1) {
-                            particleSystems.push(ParticleSystem.Parse(parsedParticleSystem, scene, rootUrl));
+                    let parser = AbstractScene.GetIndividualParser(SceneComponentConstants.NAME_PARTICLESYSTEM);
+                    if (parser) {
+                        for (index = 0, cache = parsedData.particleSystems.length; index < cache; index++) {
+                            var parsedParticleSystem = parsedData.particleSystems[index];
+                            if (hierarchyIds.indexOf(parsedParticleSystem.emitterId) !== -1) {
+                                particleSystems.push(parser(parsedParticleSystem, scene, rootUrl));
+                            }
                         }
                     }
                 }

src/Materials/babylon.effect.ts

@@ -533,7 +533,8 @@
             this._engine._loadFile(fragmentShaderUrl + ".fragment.fx", callback);
         }
 
-        private _dumpShadersSource(vertexCode: string, fragmentCode: string, defines: string): void {
+        /** @hidden */
+        public _dumpShadersSource(vertexCode: string, fragmentCode: string, defines: string): void {
             // Rebuild shaders source code
             var shaderVersion = (this._engine.webGLVersion > 1) ? "#version 300 es\n#define WEBGL2 \n" : "";
             var prefix = shaderVersion + (defines ? defines + "\n" : "");
@@ -818,7 +819,6 @@
                 Tools.Error("Attributes: " + attributesNames.map(function (attribute) {
                     return " " + attribute;
                 }));
-                this._dumpShadersSource(this._vertexSourceCode, this._fragmentSourceCode, defines);
                 Tools.Error("Error: " + this._compilationError);
                 if (previousProgram) {
                     this._program = previousProgram;

src/Materials/babylon.materialHelper.ts

@@ -216,20 +216,7 @@ module BABYLON {
                     defines["POINTLIGHT" + lightIndex] = false;
                     defines["DIRLIGHT" + lightIndex] = false;
 
-                    var type;
-                    if (light.getTypeID() === Light.LIGHTTYPEID_SPOTLIGHT) {
-                        type = "SPOTLIGHT" + lightIndex;
-                        let spotLight = light as SpotLight;
-                        defines["PROJECTEDLIGHTTEXTURE" + lightIndex] = spotLight.projectionTexture ? true : false;
-                    } else if (light.getTypeID() === Light.LIGHTTYPEID_HEMISPHERICLIGHT) {
-                        type = "HEMILIGHT" + lightIndex;
-                    } else if (light.getTypeID() === Light.LIGHTTYPEID_POINTLIGHT) {
-                        type = "POINTLIGHT" + lightIndex;
-                    } else {
-                        type = "DIRLIGHT" + lightIndex;
-                    }
-
-                    defines[type] = true;
+                    light.prepareLightSpecificDefines(defines, lightIndex);
 
                     // Specular
                     if (specularSupported && !light.specular.equalsFloats(0, 0, 0)) {

src/Mesh/babylon.abstractMesh.ts

@@ -269,11 +269,6 @@
          */
         public isPickable = true;
 
-        /**
-         * Gets or sets a boolean indicating if the bounding box must be rendered as well (false by default)
-         */
-        public showBoundingBox = false;
-
         /** Gets or sets a boolean indicating that bounding boxes of subMeshes must be rendered as well (false by default) */
         public showSubMeshesBoundingBox = false;
 

src/Mesh/babylon.mesh.ts

@@ -1426,7 +1426,7 @@
         }
 
         /**
-         * Returns an array populated with ParticleSystem objects whose the mesh is the emitter. 
+         * Returns an array populated with IParticleSystem objects whose the mesh is the emitter. 
          */
         public getEmittedParticleSystems(): IParticleSystem[] {
             var results = new Array<IParticleSystem>();
@@ -1440,7 +1440,7 @@
         }
 
         /**
-         * Returns an array populated with ParticleSystem objects whose the mesh or its children are the emitter.
+         * Returns an array populated with IParticleSystem objects whose the mesh or its children are the emitter.
          */
         public getHierarchyEmittedParticleSystems(): IParticleSystem[] {
             var results = new Array<IParticleSystem>();

src/Particles/babylon.IParticleSystem.ts

@@ -1,6 +1,6 @@
 module BABYLON {
     /**
-     * Interface representing a particle system in Babylon.
+     * Interface representing a particle system in Babylon.js.
      * This groups the common functionalities that needs to be implemented in order to create a particle system.
      * A particle system represents a way to manage particles from their emission to their animation and rendering.
      */

src/Particles/babylon.particleHelper.ts

@@ -48,7 +48,7 @@ module BABYLON {
          * Please note that the emitter shape is not exported
          * @param system defines the particle systems to export
          */
-        public static ExportSet(systems: ParticleSystem[]): ParticleSystemSet {
+        public static ExportSet(systems: IParticleSystem[]): ParticleSystemSet {
             var set = new ParticleSystemSet();
 
             for (var system of systems) {

src/Particles/babylon.particleSystemComponent.ts

@@ -0,0 +1,70 @@
+module BABYLON {
+    // Adds the parsers to the scene parsers.
+    AbstractScene.AddParser(SceneComponentConstants.NAME_PARTICLESYSTEM, (parsedData: any, scene: Scene, container: AssetContainer, rootUrl: string) => {
+
+        let individualParser = AbstractScene.GetIndividualParser(SceneComponentConstants.NAME_PARTICLESYSTEM); 
+
+        if (!individualParser) {
+            return;
+        }
+
+        // Particles Systems
+        if (parsedData.particleSystems !== undefined && parsedData.particleSystems !== null) {
+            for (var index = 0, cache = parsedData.particleSystems.length; index < cache; index++) {
+                var parsedParticleSystem = parsedData.particleSystems[index];
+                container.particleSystems.push(individualParser(parsedParticleSystem, scene, rootUrl));
+            }
+        }
+    });
+
+    AbstractScene.AddIndividualParser(SceneComponentConstants.NAME_PARTICLESYSTEM, (parsedParticleSystem: any, scene: Scene, rootUrl: string) => {
+        if (parsedParticleSystem.activeParticleCount) {
+            let ps = GPUParticleSystem.Parse(parsedParticleSystem, scene, rootUrl);
+            return ps;
+        } else {
+            let ps = ParticleSystem.Parse(parsedParticleSystem, scene, rootUrl);
+            return ps;
+        }
+    });
+
+    export interface Engine {
+        /**
+         * Create an effect to use with particle systems.
+         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
+         * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
+         * @param uniformsNames defines a list of attribute names 
+         * @param samplers defines an array of string used to represent textures
+         * @param defines defines the string containing the defines to use to compile the shaders
+         * @param fallbacks defines the list of potential fallbacks to use if shader conmpilation fails
+         * @param onCompiled defines a function to call when the effect creation is successful
+         * @param onError defines a function to call when the effect creation has failed
+         * @returns the new Effect
+         */
+        createEffectForParticles(fragmentName: string, uniformsNames: string[], samplers: string[], defines: string, fallbacks?: EffectFallbacks,
+            onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void): Effect
+    }
+
+    Engine.prototype.createEffectForParticles = function(fragmentName: string, uniformsNames: string[] = [], samplers: string[] = [], defines = "", fallbacks?: EffectFallbacks,
+        onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void): Effect {
+
+        var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions();
+        var effectCreationOption = ParticleSystem._GetEffectCreationOptions();
+
+        if (defines.indexOf(" BILLBOARD") === -1) {
+            defines += "\n#define BILLBOARD\n";
+        }
+
+        if (samplers.indexOf("diffuseSampler") === -1) {
+            samplers.push("diffuseSampler");
+        }
+
+        return this.createEffect(
+            {
+                vertex: "particles",
+                fragmentElement: fragmentName
+            },
+            attributesNamesOrOptions,
+            effectCreationOption.concat(uniformsNames),
+            samplers, defines, fallbacks, onCompiled, onError);
+    }
+} 

src/Rendering/babylon.boundingBoxRenderer.ts

@@ -42,6 +42,31 @@
         return this._boundingBoxRenderer;
     }
 
+    export interface AbstractMesh {
+        /** @hidden (Backing field) */
+        _showBoundingBox: boolean;
+
+        /**
+         * Gets or sets a boolean indicating if the bounding box must be rendered as well (false by default)
+         */
+        showBoundingBox: boolean;
+    }
+
+    Object.defineProperty(AbstractMesh.prototype, "showBoundingBox", {
+        get: function (this: AbstractMesh) {
+            return this._showBoundingBox || false;
+        },
+        set: function (this: AbstractMesh, value: boolean) {
+            this._showBoundingBox = value;
+            // Lazyly creates a BB renderer if needed.
+            if (value) {
+                this.getScene().getBoundingBoxRenderer();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+
     export class BoundingBoxRenderer implements ISceneComponent {
         /**
          * The component name helpfull to identify the component in the list of scene components.

src/Tools/babylon.assetsManager.ts

@@ -210,7 +210,7 @@ module BABYLON {
         /**
          * Gets the list of loaded particle systems
          */
-        public loadedParticleSystems: Array<ParticleSystem>;
+        public loadedParticleSystems: Array<IParticleSystem>;
         /**
          * Gets the list of loaded skeletons
          */
@@ -261,7 +261,7 @@ module BABYLON {
          */
         public runTask(scene: Scene, onSuccess: () => void, onError: (message?: string, exception?: any) => void) {
             SceneLoader.ImportMesh(this.meshesNames, this.rootUrl, this.sceneFilename, scene,
-                (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => {
+                (meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[]) => {
                     this.loadedMeshes = meshes;
                     this.loadedParticleSystems = particleSystems;
                     this.loadedSkeletons = skeletons;

src/Tools/babylon.database.ts

@@ -494,7 +494,7 @@ module BABYLON {
 
             var saveAndLoadFile = () => {
                 // the scene is not yet in the DB, let's try to save it
-                this._saveFileIntoDBAsync(completeUrl, sceneLoaded, progressCallBack);
+                this._saveFileIntoDBAsync(completeUrl, sceneLoaded, progressCallBack, useArrayBuffer, errorCallback);
             };
 
             this._checkVersionFromDB(completeUrl, version => {
@@ -503,7 +503,7 @@ module BABYLON {
                         this._loadFileFromDBAsync(completeUrl, sceneLoaded, saveAndLoadFile, useArrayBuffer);
                     }
                     else {
-                        this._saveFileIntoDBAsync(completeUrl, sceneLoaded, progressCallBack, useArrayBuffer);
+                        this._saveFileIntoDBAsync(completeUrl, sceneLoaded, progressCallBack, useArrayBuffer, errorCallback);
                     }
                 }
                 else {
@@ -557,7 +557,7 @@ module BABYLON {
             }
         }
 
-        private _saveFileIntoDBAsync(url: string, callback: (data?: any) => void, progressCallback?: (this: XMLHttpRequestEventTarget, ev: ProgressEvent) => any, useArrayBuffer?: boolean) {
+        private _saveFileIntoDBAsync(url: string, callback: (data?: any) => void, progressCallback?: (this: XMLHttpRequestEventTarget, ev: ProgressEvent) => any, useArrayBuffer?: boolean, errorCallback?: (data?: any) => void) {
             if (this.isSupported) {
                 var targetStore: string;
                 if (url.indexOf(".babylon") !== -1) {
@@ -581,7 +581,7 @@ module BABYLON {
                 }
 
                 xhr.addEventListener("load", () => {
-                    if (xhr.status === 200 || Tools.ValidateXHRData(xhr, !useArrayBuffer ? 1 : 6)) {
+                    if (xhr.status === 200 || (xhr.status < 400 && Tools.ValidateXHRData(xhr, !useArrayBuffer ? 1 : 6))) {
                         // Blob as response (XHR2)
                         //fileData = xhr.responseText;
                         fileData = !useArrayBuffer ? xhr.responseText : xhr.response;
@@ -633,7 +633,11 @@ module BABYLON {
                         }
                     }
                     else {
-                        callback();
+                        if(xhr.status >= 400 && errorCallback){
+                            errorCallback(xhr);
+                        }else{
+                            callback();
+                        }
                     }
                 }, false);
 

src/Tools/babylon.dds.ts

@@ -373,7 +373,11 @@
             return byteArray;
         }
 
-        public static UploadDDSLevels(engine: Engine, gl: WebGLRenderingContext, arrayBuffer: any, info: DDSInfo, loadMipmaps: boolean, faces: number, lodIndex = -1, currentFace?: number) {
+        /**
+         * Uploads DDS Levels to a Babylon Texture
+         * @hidden
+         */
+        public static UploadDDSLevels(engine: Engine, texture: InternalTexture, arrayBuffer: any, info: DDSInfo, loadMipmaps: boolean, faces: number, lodIndex = -1, currentFace?: number) {
             var sphericalPolynomialFaces: Nullable<Array<ArrayBufferView>> = null;
             if (info.sphericalPolynomial) {
                 sphericalPolynomialFaces = new Array<ArrayBufferView>();
@@ -383,8 +387,7 @@
             var header = new Int32Array(arrayBuffer, 0, headerLengthInt);
             var fourCC: number, width: number, height: number, dataLength: number = 0, dataOffset: number;
             var byteArray: Uint8Array, mipmapCount: number, mip: number;
-            let internalFormat = 0;
-            let format = 0;
+            let internalCompressedFormat = 0;
             let blockBytes = 1;
 
             if (header[off_magic] !== DDS_MAGIC) {
@@ -412,15 +415,15 @@
                 switch (fourCC) {
                     case FOURCC_DXT1:
                         blockBytes = 8;
-                        internalFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT1_EXT;
+                        internalCompressedFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT1_EXT;
                         break;
                     case FOURCC_DXT3:
                         blockBytes = 16;
-                        internalFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT3_EXT;
+                        internalCompressedFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT3_EXT;
                         break;
                     case FOURCC_DXT5:
                         blockBytes = 16;
-                        internalFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT5_EXT;
+                        internalCompressedFormat = (<WEBGL_compressed_texture_s3tc>ext).COMPRESSED_RGBA_S3TC_DXT5_EXT;
                         break;
                     case FOURCC_D3DFMT_R16G16B16A16F:
                         computeFormats = true;
@@ -461,8 +464,7 @@
             let aOffset = DDSTools._ExtractLongWordOrder(header[off_AMask]);
 
             if (computeFormats) {
-                format = engine._getWebGLTextureType(info.textureType);
-                internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
+                internalCompressedFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
             }
 
             mipmapCount = 1;
@@ -471,8 +473,6 @@
             }
 
             for (var face = 0; face < faces; face++) {
-                var sampler = faces === 1 ? gl.TEXTURE_2D : (gl.TEXTURE_CUBE_MAP_POSITIVE_X + face + (currentFace ? currentFace : 0));
-
                 width = header[off_width];
                 height = header[off_height];
 
@@ -482,6 +482,7 @@
                         const i = (lodIndex === -1) ? mip : 0;
 
                         if (!info.isCompressed && info.isFourCC) {
+                            texture.format = Engine.TEXTUREFORMAT_RGBA;
                             dataLength = width * height * 4;
                             var floatArray: Nullable<ArrayBufferView> = null;
 
@@ -499,26 +500,23 @@
                                     }
                                 }
 
-                                info.textureType = Engine.TEXTURETYPE_UNSIGNED_INT;
-                                format = engine._getWebGLTextureType(info.textureType);
-                                internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
+                                texture.type = Engine.TEXTURETYPE_UNSIGNED_INT;
                             }
                             else {
                                 if (bpp === 128) {
+                                    texture.type = Engine.TEXTURETYPE_FLOAT;
                                     floatArray = DDSTools._GetFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i);
                                     if (sphericalPolynomialFaces && i == 0) {
                                         sphericalPolynomialFaces.push(floatArray);
                                     }
                                 } else if (bpp === 64 && !engine.getCaps().textureHalfFloat) {
+                                    texture.type = Engine.TEXTURETYPE_FLOAT;
                                     floatArray = DDSTools._GetHalfFloatAsFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i);
                                     if (sphericalPolynomialFaces && i == 0) {
                                         sphericalPolynomialFaces.push(floatArray);
                                     }
-
-                                    info.textureType = Engine.TEXTURETYPE_FLOAT;
-                                    format = engine._getWebGLTextureType(info.textureType);
-                                    internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
                                 } else { // 64
+                                    texture.type = Engine.TEXTURETYPE_HALF_FLOAT;
                                     floatArray = DDSTools._GetHalfFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i);
                                     if (sphericalPolynomialFaces && i == 0) {
                                         sphericalPolynomialFaces.push(DDSTools._GetHalfFloatAsFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i));
@@ -527,30 +525,38 @@
                             }
 
                             if (floatArray) {
-                                engine._uploadDataToTexture(sampler, i, internalFormat, width, height, gl.RGBA, format, floatArray);
+                                engine._uploadDataToTextureDirectly(texture, width, height, floatArray, face, i);
                             }
                         } else if (info.isRGB) {
+                            texture.type = Engine.TEXTURETYPE_UNSIGNED_INT;
                             if (bpp === 24) {
+                                texture.format = Engine.TEXTUREFORMAT_RGB;
                                 dataLength = width * height * 3;
                                 byteArray = DDSTools._GetRGBArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, rOffset, gOffset, bOffset);
-                                engine._uploadDataToTexture(sampler, i, gl.RGB, width, height, gl.RGB, gl.UNSIGNED_BYTE, byteArray);
+                                engine._uploadDataToTextureDirectly(texture, width, height, byteArray, face, i);
                             } else { // 32
+                                texture.format = Engine.TEXTUREFORMAT_RGBA;
                                 dataLength = width * height * 4;
                                 byteArray = DDSTools._GetRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, rOffset, gOffset, bOffset, aOffset);
-                                engine._uploadDataToTexture(sampler, i, gl.RGBA, width, height, gl.RGBA, gl.UNSIGNED_BYTE, byteArray);
+                                engine._uploadDataToTextureDirectly(texture, width, height, byteArray, face, i);
                             }
                         } else if (info.isLuminance) {
-                            var unpackAlignment = gl.getParameter(gl.UNPACK_ALIGNMENT);
+                            var unpackAlignment = engine._getUnpackAlignement();
                             var unpaddedRowSize = width;
                             var paddedRowSize = Math.floor((width + unpackAlignment - 1) / unpackAlignment) * unpackAlignment;
                             dataLength = paddedRowSize * (height - 1) + unpaddedRowSize;
 
                             byteArray = DDSTools._GetLuminanceArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
-                            engine._uploadDataToTexture(sampler, i, gl.LUMINANCE, width, height, gl.LUMINANCE, gl.UNSIGNED_BYTE, byteArray);
+                            texture.format = Engine.TEXTUREFORMAT_LUMINANCE;
+                            texture.type = Engine.TEXTURETYPE_UNSIGNED_INT;
+
+                            engine._uploadDataToTextureDirectly(texture, width, height, byteArray, face, i);
                         } else {
                             dataLength = Math.max(4, width) / 4 * Math.max(4, height) / 4 * blockBytes;
                             byteArray = new Uint8Array(arrayBuffer, dataOffset, dataLength);
-                            engine._uploadCompressedDataToTexture(sampler, i, internalFormat, width, height, byteArray);
+
+                            texture.type = Engine.TEXTURETYPE_UNSIGNED_INT;
+                            engine._uploadCompressedDataToTextureDirectly(texture, internalCompressedFormat, width, height, byteArray, face, i);
                         }
                     }
                     dataOffset += bpp ? (width * height * (bpp / 8)) : dataLength;

src/Tools/babylon.environmentTextureTools.ts

@@ -477,13 +477,13 @@ module BABYLON {
                                 });
                             }
                             else {
-                                engine._uploadImageToTexture(texture, face, i, image);
+                                engine._uploadImageToTexture(texture, image, face, i);
 
                                 // Upload the face to the none lod texture support
                                 if (generateNonLODTextures) {
                                     let lodTexture = lodTextures![i];
                                     if (lodTexture) {
-                                        engine._uploadImageToTexture(lodTexture._texture!, face, 0, image);
+                                        engine._uploadImageToTexture(lodTexture._texture!, image, face, 0);
                                     }
                                 }
                                 resolve();

src/Tools/babylon.khronosTextureContainer.ts

@@ -102,12 +102,14 @@ module BABYLON {
         }
 
         /**
+         * Uploads KTX content to a Babylon Texture.
          * It is assumed that the texture has already been created & is currently bound
+         * @hidden
          */
-        public uploadLevels(gl: WebGLRenderingContext, loadMipmaps: boolean): void {
+        public uploadLevels(texture: InternalTexture, loadMipmaps: boolean): void {
             switch (this.loadType) {
                 case KhronosTextureContainer.COMPRESSED_2D:
-                    this._upload2DCompressedLevels(gl, loadMipmaps);
+                    this._upload2DCompressedLevels(texture, loadMipmaps);
                     break;
 
                 case KhronosTextureContainer.TEX_2D:
@@ -116,7 +118,7 @@ module BABYLON {
             }
         }
 
-        private _upload2DCompressedLevels(gl: WebGLRenderingContext, loadMipmaps: boolean): void {
+        private _upload2DCompressedLevels(texture: InternalTexture, loadMipmaps: boolean): void {
             // initialize width & height for level 1
             var dataOffset = KhronosTextureContainer.HEADER_LEN + this.bytesOfKeyValueData;
             var width = this.pixelWidth;
@@ -127,9 +129,10 @@ module BABYLON {
                 var imageSize = new Int32Array(this.arrayBuffer, dataOffset, 1)[0]; // size per face, since not supporting array cubemaps
                 dataOffset += 4;//image data starts from next multiple of 4 offset. Each face refers to same imagesize field above.
                 for (var face = 0; face < this.numberOfFaces; face++) {
-                    var sampler = this.numberOfFaces === 1 ? gl.TEXTURE_2D : (gl.TEXTURE_CUBE_MAP_POSITIVE_X + face);
                     var byteArray = new Uint8Array(this.arrayBuffer, dataOffset, imageSize);
-                    gl.compressedTexImage2D(sampler, level, this.glInternalFormat, width, height, 0, byteArray);
+
+                    const engine = texture.getEngine();
+                    engine._uploadCompressedDataToTextureDirectly(texture, this.glInternalFormat, width, height, byteArray, face, level);
 
                     dataOffset += imageSize; // add size of the image for the next face/mipmap
                     dataOffset += 3 - ((imageSize + 3) % 4); // add padding for odd sized image

src/Tools/babylon.tga.ts

@@ -43,7 +43,11 @@
             return header;
         }
 
-        public static UploadContent(gl: WebGLRenderingContext, data: Uint8Array): void {
+        /**
+         * Uploads TGA content to a Babylon Texture
+         * @hidden
+         */
+        public static UploadContent(texture: InternalTexture, data: Uint8Array): void {
             // Not enough data to contain header ?
             if (data.length < 19) {
                 Tools.Error("Unable to load TGA file - Not enough data to contain header");
@@ -191,8 +195,8 @@
             var func = '_getImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
             var imageData = (<any>TGATools)[func](header, palettes, pixel_data, y_start, y_step, y_end, x_start, x_step, x_end);
 
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, header.width, header.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
-
+            const engine = texture.getEngine();
+            engine._uploadArrayBufferViewToTexture(texture, imageData);
         }
 
         static _getImageData8bits(header: any, palettes: Uint8Array, pixel_data: Uint8Array, y_start: number, y_step: number, y_end: number, x_start: number, x_step: number, x_end: number): Uint8Array {