new constructor option for engine

dist/preview release/babylon.max.js

@@ -7137,11 +7137,11 @@ var BABYLON;
     var Engine = (function () {
         /**
          * @constructor
-         * @param {HTMLCanvasElement} canvas - the canvas to be used for rendering
+         * @param {HTMLCanvasElement | WebGLRenderingContext} canvasOrContext - the canvas or the webgl context to be used for rendering
          * @param {boolean} [antialias] - enable antialias
          * @param options - further options to be sent to the getContext function
          */
-        function Engine(canvas, antialias, options, adaptToDeviceRatio) {
+        function Engine(canvasOrContext, antialias, options, adaptToDeviceRatio) {
             if (adaptToDeviceRatio === void 0) { adaptToDeviceRatio = false; }
             var _this = this;
             // Public members
@@ -7214,59 +7214,71 @@ var BABYLON;
                     _this._vrDisplayEnabled = undefined;
                 }
             };
-            this._renderingCanvas = canvas;
+            var canvas;
             Engine.Instances.push(this);
             options = options || {};
-            if (antialias != null) {
-                options.antialias = antialias;
-            }
-            if (options.preserveDrawingBuffer === undefined) {
-                options.preserveDrawingBuffer = false;
-            }
-            if (options.audioEngine === undefined) {
-                options.audioEngine = true;
-            }
-            if (options.stencil === undefined) {
-                options.stencil = true;
-            }
-            // GL
-            if (!options.disableWebGL2Support) {
-                try {
-                    this._gl = (canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
-                    if (this._gl) {
-                        this._webGLVersion = 2.0;
-                    }
+            if (canvasOrContext.getContext) {
+                canvas = canvasOrContext;
+                this._renderingCanvas = canvas;
+                if (antialias != null) {
+                    options.antialias = antialias;
                 }
-                catch (e) {
-                    // Do nothing
+                if (options.preserveDrawingBuffer === undefined) {
+                    options.preserveDrawingBuffer = false;
                 }
-            }
-            if (!this._gl) {
-                if (!canvas) {
-                    throw new Error("The provided canvas is null or undefined.");
+                if (options.audioEngine === undefined) {
+                    options.audioEngine = true;
                 }
-                try {
-                    this._gl = (canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
+                if (options.stencil === undefined) {
+                    options.stencil = true;
                 }
-                catch (e) {
+                // GL
+                if (!options.disableWebGL2Support) {
+                    try {
+                        this._gl = (canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
+                        if (this._gl) {
+                            this._webGLVersion = 2.0;
+                        }
+                    }
+                    catch (e) {
+                        // Do nothing
+                    }
+                }
+                if (!this._gl) {
+                    if (!canvas) {
+                        throw new Error("The provided canvas is null or undefined.");
+                    }
+                    try {
+                        this._gl = (canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
+                    }
+                    catch (e) {
+                        throw new Error("WebGL not supported");
+                    }
+                }
+                if (!this._gl) {
                     throw new Error("WebGL not supported");
                 }
+                this._onBlur = function () {
+                    _this._windowIsBackground = true;
+                };
+                this._onFocus = function () {
+                    _this._windowIsBackground = false;
+                };
+                this._onCanvasBlur = function () {
+                    _this.onCanvasBlurObservable.notifyObservers(_this);
+                };
+                window.addEventListener("blur", this._onBlur);
+                window.addEventListener("focus", this._onFocus);
+                canvas.addEventListener("pointerout", this._onCanvasBlur);
             }
-            if (!this._gl) {
-                throw new Error("WebGL not supported");
+            else {
+                this._gl = canvasOrContext;
+                this._renderingCanvas = this._gl.canvas;
+                if (this._gl.renderbufferStorageMultisample) {
+                    this._webGLVersion = 2.0;
+                }
+                options.stencil = this._gl.getContextAttributes().stencil;
             }
-            this._onBlur = function () {
-                _this._windowIsBackground = true;
-            };
-            this._onFocus = function () {
-                _this._windowIsBackground = false;
-            };
-            this._onCanvasBlur = function () {
-                _this.onCanvasBlurObservable.notifyObservers(_this);
-            };
-            window.addEventListener("blur", this._onBlur);
-            window.addEventListener("focus", this._onFocus);
-            canvas.addEventListener("pointerout", this._onCanvasBlur);
             // Viewport
             var limitDeviceRatio = options.limitDeviceRatio || window.devicePixelRatio || 1.0;
             this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, window.devicePixelRatio || 1.0) : 1.0;
@@ -7382,46 +7394,48 @@ var BABYLON;
             this.setDepthBuffer(true);
             this.setDepthFunctionToLessOrEqual();
             this.setDepthWrite(true);
-            // Fullscreen
-            this._onFullscreenChange = function () {
-                if (document.fullscreen !== undefined) {
-                    _this.isFullscreen = document.fullscreen;
-                }
-                else if (document.mozFullScreen !== undefined) {
-                    _this.isFullscreen = document.mozFullScreen;
-                }
-                else if (document.webkitIsFullScreen !== undefined) {
-                    _this.isFullscreen = document.webkitIsFullScreen;
-                }
-                else if (document.msIsFullScreen !== undefined) {
-                    _this.isFullscreen = document.msIsFullScreen;
-                }
-                // Pointer lock
-                if (_this.isFullscreen && _this._pointerLockRequested) {
-                    canvas.requestPointerLock = canvas.requestPointerLock ||
-                        canvas.msRequestPointerLock ||
-                        canvas.mozRequestPointerLock ||
-                        canvas.webkitRequestPointerLock;
-                    if (canvas.requestPointerLock) {
-                        canvas.requestPointerLock();
+            if (canvas) {
+                // Fullscreen
+                this._onFullscreenChange = function () {
+                    if (document.fullscreen !== undefined) {
+                        _this.isFullscreen = document.fullscreen;
+                    }
+                    else if (document.mozFullScreen !== undefined) {
+                        _this.isFullscreen = document.mozFullScreen;
+                    }
+                    else if (document.webkitIsFullScreen !== undefined) {
+                        _this.isFullscreen = document.webkitIsFullScreen;
+                    }
+                    else if (document.msIsFullScreen !== undefined) {
+                        _this.isFullscreen = document.msIsFullScreen;
+                    }
+                    // Pointer lock
+                    if (_this.isFullscreen && _this._pointerLockRequested) {
+                        canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.msRequestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+                        if (canvas.requestPointerLock) {
+                            canvas.requestPointerLock();
+                        }
                     }
-                }
-            };
-            document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
-            // Pointer lock
-            this._onPointerLockChange = function () {
-                _this.isPointerLock = (document.mozPointerLockElement === canvas ||
-                    document.webkitPointerLockElement === canvas ||
-                    document.msPointerLockElement === canvas ||
-                    document.pointerLockElement === canvas);
-            };
-            document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+                };
+                document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
+                // Pointer lock
+                this._onPointerLockChange = function () {
+                    _this.isPointerLock = (document.mozPointerLockElement === canvas ||
+                        document.webkitPointerLockElement === canvas ||
+                        document.msPointerLockElement === canvas ||
+                        document.pointerLockElement === canvas);
+                };
+                document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+            }
             if (options.audioEngine && BABYLON.AudioEngine && !Engine.audioEngine) {
                 Engine.audioEngine = new BABYLON.AudioEngine();
             }
@@ -7868,14 +7882,14 @@ var BABYLON;
             if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._width;
             }
-            return this._renderingCanvas.width;
+            return this._gl.drawingBufferWidth;
         };
         Engine.prototype.getRenderHeight = function (useScreen) {
             if (useScreen === void 0) { useScreen = false; }
             if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._height;
             }
-            return this._renderingCanvas.height;
+            return this._gl.drawingBufferHeight;
         };
         Engine.prototype.getRenderingCanvas = function () {
             return this._renderingCanvas;
@@ -19575,6 +19589,10 @@ var BABYLON;
                 this._cachedTextureMatrix = BABYLON.Matrix.Zero();
                 this._projectionModeMatrix = BABYLON.Matrix.Zero();
             }
+            this._cachedUOffset = this.uOffset;
+            this._cachedVOffset = this.vOffset;
+            this._cachedUScale = this.uScale;
+            this._cachedVScale = this.vScale;
             this._cachedCoordinatesMode = this.coordinatesMode;
             switch (this.coordinatesMode) {
                 case Texture.PLANAR_MODE:
@@ -31396,6 +31414,25 @@ var BABYLON;
                 return this._shouldUseAlphaFromAlbedoTexture() &&
                     this._transparencyMode === BABYLON.PBRMaterial.PBRMATERIAL_ALPHATEST;
             };
+            /**
+             * Return the active textures of the material.
+             */
+            PBRBaseSimpleMaterial.prototype.getActiveTextures = function () {
+                var activeTextures = _super.prototype.getActiveTextures.call(this);
+                if (this.environmentTexture) {
+                    activeTextures.push(this.environmentTexture);
+                }
+                if (this.normalTexture) {
+                    activeTextures.push(this.normalTexture);
+                }
+                if (this.emissiveTexture) {
+                    activeTextures.push(this.emissiveTexture);
+                }
+                if (this.occlusionTexture) {
+                    activeTextures.push(this.occlusionTexture);
+                }
+                return activeTextures;
+            };
             return PBRBaseSimpleMaterial;
         }(BABYLON.PBRBaseMaterial));
         __decorate([

dist/preview release/customConfigurations/minimalViewer/babylon.max.js

@@ -7137,11 +7137,11 @@ var BABYLON;
     var Engine = (function () {
         /**
          * @constructor
-         * @param {HTMLCanvasElement} canvas - the canvas to be used for rendering
+         * @param {HTMLCanvasElement | WebGLRenderingContext} canvasOrContext - the canvas or the webgl context to be used for rendering
          * @param {boolean} [antialias] - enable antialias
          * @param options - further options to be sent to the getContext function
          */
-        function Engine(canvas, antialias, options, adaptToDeviceRatio) {
+        function Engine(canvasOrContext, antialias, options, adaptToDeviceRatio) {
             if (adaptToDeviceRatio === void 0) { adaptToDeviceRatio = false; }
             var _this = this;
             // Public members
@@ -7214,59 +7214,71 @@ var BABYLON;
                     _this._vrDisplayEnabled = undefined;
                 }
             };
-            this._renderingCanvas = canvas;
+            var canvas;
             Engine.Instances.push(this);
             options = options || {};
-            if (antialias != null) {
-                options.antialias = antialias;
-            }
-            if (options.preserveDrawingBuffer === undefined) {
-                options.preserveDrawingBuffer = false;
-            }
-            if (options.audioEngine === undefined) {
-                options.audioEngine = true;
-            }
-            if (options.stencil === undefined) {
-                options.stencil = true;
-            }
-            // GL
-            if (!options.disableWebGL2Support) {
-                try {
-                    this._gl = (canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
-                    if (this._gl) {
-                        this._webGLVersion = 2.0;
-                    }
+            if (canvasOrContext.getContext) {
+                canvas = canvasOrContext;
+                this._renderingCanvas = canvas;
+                if (antialias != null) {
+                    options.antialias = antialias;
                 }
-                catch (e) {
-                    // Do nothing
+                if (options.preserveDrawingBuffer === undefined) {
+                    options.preserveDrawingBuffer = false;
                 }
-            }
-            if (!this._gl) {
-                if (!canvas) {
-                    throw new Error("The provided canvas is null or undefined.");
+                if (options.audioEngine === undefined) {
+                    options.audioEngine = true;
                 }
-                try {
-                    this._gl = (canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
+                if (options.stencil === undefined) {
+                    options.stencil = true;
                 }
-                catch (e) {
+                // GL
+                if (!options.disableWebGL2Support) {
+                    try {
+                        this._gl = (canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
+                        if (this._gl) {
+                            this._webGLVersion = 2.0;
+                        }
+                    }
+                    catch (e) {
+                        // Do nothing
+                    }
+                }
+                if (!this._gl) {
+                    if (!canvas) {
+                        throw new Error("The provided canvas is null or undefined.");
+                    }
+                    try {
+                        this._gl = (canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
+                    }
+                    catch (e) {
+                        throw new Error("WebGL not supported");
+                    }
+                }
+                if (!this._gl) {
                     throw new Error("WebGL not supported");
                 }
+                this._onBlur = function () {
+                    _this._windowIsBackground = true;
+                };
+                this._onFocus = function () {
+                    _this._windowIsBackground = false;
+                };
+                this._onCanvasBlur = function () {
+                    _this.onCanvasBlurObservable.notifyObservers(_this);
+                };
+                window.addEventListener("blur", this._onBlur);
+                window.addEventListener("focus", this._onFocus);
+                canvas.addEventListener("pointerout", this._onCanvasBlur);
             }
-            if (!this._gl) {
-                throw new Error("WebGL not supported");
+            else {
+                this._gl = canvasOrContext;
+                this._renderingCanvas = this._gl.canvas;
+                if (this._gl.renderbufferStorageMultisample) {
+                    this._webGLVersion = 2.0;
+                }
+                options.stencil = this._gl.getContextAttributes().stencil;
             }
-            this._onBlur = function () {
-                _this._windowIsBackground = true;
-            };
-            this._onFocus = function () {
-                _this._windowIsBackground = false;
-            };
-            this._onCanvasBlur = function () {
-                _this.onCanvasBlurObservable.notifyObservers(_this);
-            };
-            window.addEventListener("blur", this._onBlur);
-            window.addEventListener("focus", this._onFocus);
-            canvas.addEventListener("pointerout", this._onCanvasBlur);
             // Viewport
             var limitDeviceRatio = options.limitDeviceRatio || window.devicePixelRatio || 1.0;
             this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, window.devicePixelRatio || 1.0) : 1.0;
@@ -7382,46 +7394,48 @@ var BABYLON;
             this.setDepthBuffer(true);
             this.setDepthFunctionToLessOrEqual();
             this.setDepthWrite(true);
-            // Fullscreen
-            this._onFullscreenChange = function () {
-                if (document.fullscreen !== undefined) {
-                    _this.isFullscreen = document.fullscreen;
-                }
-                else if (document.mozFullScreen !== undefined) {
-                    _this.isFullscreen = document.mozFullScreen;
-                }
-                else if (document.webkitIsFullScreen !== undefined) {
-                    _this.isFullscreen = document.webkitIsFullScreen;
-                }
-                else if (document.msIsFullScreen !== undefined) {
-                    _this.isFullscreen = document.msIsFullScreen;
-                }
-                // Pointer lock
-                if (_this.isFullscreen && _this._pointerLockRequested) {
-                    canvas.requestPointerLock = canvas.requestPointerLock ||
-                        canvas.msRequestPointerLock ||
-                        canvas.mozRequestPointerLock ||
-                        canvas.webkitRequestPointerLock;
-                    if (canvas.requestPointerLock) {
-                        canvas.requestPointerLock();
+            if (canvas) {
+                // Fullscreen
+                this._onFullscreenChange = function () {
+                    if (document.fullscreen !== undefined) {
+                        _this.isFullscreen = document.fullscreen;
+                    }
+                    else if (document.mozFullScreen !== undefined) {
+                        _this.isFullscreen = document.mozFullScreen;
+                    }
+                    else if (document.webkitIsFullScreen !== undefined) {
+                        _this.isFullscreen = document.webkitIsFullScreen;
+                    }
+                    else if (document.msIsFullScreen !== undefined) {
+                        _this.isFullscreen = document.msIsFullScreen;
+                    }
+                    // Pointer lock
+                    if (_this.isFullscreen && _this._pointerLockRequested) {
+                        canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.msRequestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+                        if (canvas.requestPointerLock) {
+                            canvas.requestPointerLock();
+                        }
                     }
-                }
-            };
-            document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
-            // Pointer lock
-            this._onPointerLockChange = function () {
-                _this.isPointerLock = (document.mozPointerLockElement === canvas ||
-                    document.webkitPointerLockElement === canvas ||
-                    document.msPointerLockElement === canvas ||
-                    document.pointerLockElement === canvas);
-            };
-            document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+                };
+                document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
+                // Pointer lock
+                this._onPointerLockChange = function () {
+                    _this.isPointerLock = (document.mozPointerLockElement === canvas ||
+                        document.webkitPointerLockElement === canvas ||
+                        document.msPointerLockElement === canvas ||
+                        document.pointerLockElement === canvas);
+                };
+                document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+            }
             if (options.audioEngine && BABYLON.AudioEngine && !Engine.audioEngine) {
                 Engine.audioEngine = new BABYLON.AudioEngine();
             }
@@ -7868,14 +7882,14 @@ var BABYLON;
             if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._width;
             }
-            return this._renderingCanvas.width;
+            return this._gl.drawingBufferWidth;
         };
         Engine.prototype.getRenderHeight = function (useScreen) {
             if (useScreen === void 0) { useScreen = false; }
             if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._height;
             }
-            return this._renderingCanvas.height;
+            return this._gl.drawingBufferHeight;
         };
         Engine.prototype.getRenderingCanvas = function () {
             return this._renderingCanvas;
@@ -19575,6 +19589,10 @@ var BABYLON;
                 this._cachedTextureMatrix = BABYLON.Matrix.Zero();
                 this._projectionModeMatrix = BABYLON.Matrix.Zero();
             }
+            this._cachedUOffset = this.uOffset;
+            this._cachedVOffset = this.vOffset;
+            this._cachedUScale = this.uScale;
+            this._cachedVScale = this.vScale;
             this._cachedCoordinatesMode = this.coordinatesMode;
             switch (this.coordinatesMode) {
                 case Texture.PLANAR_MODE:
@@ -36506,6 +36524,25 @@ var BABYLON;
                 return this._shouldUseAlphaFromAlbedoTexture() &&
                     this._transparencyMode === BABYLON.PBRMaterial.PBRMATERIAL_ALPHATEST;
             };
+            /**
+             * Return the active textures of the material.
+             */
+            PBRBaseSimpleMaterial.prototype.getActiveTextures = function () {
+                var activeTextures = _super.prototype.getActiveTextures.call(this);
+                if (this.environmentTexture) {
+                    activeTextures.push(this.environmentTexture);
+                }
+                if (this.normalTexture) {
+                    activeTextures.push(this.normalTexture);
+                }
+                if (this.emissiveTexture) {
+                    activeTextures.push(this.emissiveTexture);
+                }
+                if (this.occlusionTexture) {
+                    activeTextures.push(this.occlusionTexture);
+                }
+                return activeTextures;
+            };
             return PBRBaseSimpleMaterial;
         }(BABYLON.PBRBaseMaterial));
         __decorate([

dist/preview release/what's new.md

@@ -2,6 +2,7 @@
 
 ## Major updates
 - Added support for non-pow2 textures when in WebGL2 mode ([deltakosh](https://github.com/deltakosh))
+- Engine can now be initialized with an existing webgl context ([deltakosh](https://github.com/deltakosh))
 
 ## Updates
 - Normals are generated automatically by StandardMaterial if meshes do not have normals ([deltakosh](https://github.com/deltakosh))

package.json

@@ -8,7 +8,7 @@
   ],
   "name": "babylonjs",
   "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-  "version": "3.0.7",
+  "version": "3.1.0-alpha0",
   "repository": {
     "type": "git",
     "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -20,12 +20,43 @@
     "dist/preview release/babylon.js",
     "dist/preview release/babylon.max.js",
     "dist/preview release/babylon.worker.js",
+
     "dist/preview release/gui/babylon.gui.js",
     "dist/preview release/gui/babylon.gui.min.js",
     "dist/preview release/gui/babylon.gui.d.ts",
+
     "dist/preview release/loaders/babylon.glTFFileLoader.min.js",
     "dist/preview release/loaders/babylon.objFileLoader.min.js",
     "dist/preview release/loaders/babylon.stlFileLoader.min.js",
+
+    "dist/preview release/inspector/babylon.inspector.bundle.js",
+
+    "dist/preview release/materialsLibrary/babylon.fireMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.waterMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.lavaMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.normalMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.skyMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.triPlanarMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.terrainMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.gradientMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.furMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.gridMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.customMaterial.min.js",
+    "dist/preview release/materialsLibrary/babylon.cellMaterial.min.js",
+
+    "dist/preview release/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js",
+    "dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js",
+
+    "dist/preview release/postProcessesLibrary/babylon.asciiArtPostProcess.min.js",
+    "dist/preview release/postProcessesLibrary/babylon.digitalRainPostProcess.min.js",    
+    
     "dist/preview release/Oimo.js",
     "package.json"
   ],
@@ -43,6 +74,6 @@
   },
   "readme": "Babylon.js is a 3D engine based on webgl and javascript",
   "readmeFilename": "README.md",
-  "_id": "babylonjs@3.0.7",
+  "_id": "babylonjs@3.1.0-alpha0",
   "_from": "babylonjs@"
 }

src/babylon.engine.ts

@@ -626,76 +626,88 @@
 
         /**
          * @constructor
-         * @param {HTMLCanvasElement} canvas - the canvas to be used for rendering
+         * @param {HTMLCanvasElement | WebGLRenderingContext} canvasOrContext - the canvas or the webgl context to be used for rendering
          * @param {boolean} [antialias] - enable antialias
          * @param options - further options to be sent to the getContext function
          */
-        constructor(canvas: HTMLCanvasElement, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio = false) {
-            this._renderingCanvas = canvas;
-
+        constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio = false) {
+            var canvas: HTMLCanvasElement;
             Engine.Instances.push(this);            
-
             options = options || {};
 
-            if (antialias != null) {
-                options.antialias = antialias;
-            }
+            if ((<HTMLCanvasElement>canvasOrContext).getContext) {
+                canvas = <HTMLCanvasElement>canvasOrContext;
+                this._renderingCanvas = canvas;
 
-            if (options.preserveDrawingBuffer === undefined) {
-                options.preserveDrawingBuffer = false;
-            }
+                if (antialias != null) {
+                    options.antialias = antialias;
+                }
 
-            if (options.audioEngine === undefined) {
-                options.audioEngine = true;
-            }
+                if (options.preserveDrawingBuffer === undefined) {
+                    options.preserveDrawingBuffer = false;
+                }
 
-            if (options.stencil === undefined) {
-                options.stencil = true;
-            }
+                if (options.audioEngine === undefined) {
+                    options.audioEngine = true;
+                }
 
-            // GL
-            if (!options.disableWebGL2Support) {
-                try {
-                    this._gl = <any>(canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
-                    if (this._gl) {
-                        this._webGLVersion = 2.0;
+                if (options.stencil === undefined) {
+                    options.stencil = true;
+                }
+
+                // GL
+                if (!options.disableWebGL2Support) {
+                    try {
+                        this._gl = <any>(canvas.getContext("webgl2", options) || canvas.getContext("experimental-webgl2", options));
+                        if (this._gl) {
+                            this._webGLVersion = 2.0;
+                        }
+                    } catch (e) {
+                        // Do nothing
                     }
-                } catch (e) {
-                    // Do nothing
                 }
-            }
 
-            if (!this._gl) {
-                if (!canvas) {
-                    throw new Error("The provided canvas is null or undefined.");
+                if (!this._gl) {
+                    if (!canvas) {
+                        throw new Error("The provided canvas is null or undefined.");
+                    }
+                    try {
+                        this._gl = <WebGLRenderingContext>(canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
+                    } catch (e) {
+                        throw new Error("WebGL not supported");
+                    }
                 }
-                try {
-                    this._gl = <WebGLRenderingContext>(canvas.getContext("webgl", options) || canvas.getContext("experimental-webgl", options));
-                } catch (e) {
+
+                if (!this._gl) {
                     throw new Error("WebGL not supported");
                 }
-            }
 
-            if (!this._gl) {
-                throw new Error("WebGL not supported");
-            }
+                this._onBlur = () => {
+                    this._windowIsBackground = true;
+                };
 
-            this._onBlur = () => {
-                this._windowIsBackground = true;
-            };
+                this._onFocus = () => {
+                    this._windowIsBackground = false;
+                };
 
-            this._onFocus = () => {
-                this._windowIsBackground = false;
-            };
+                this._onCanvasBlur = () => {
+                    this.onCanvasBlurObservable.notifyObservers(this);
+                };
 
-            this._onCanvasBlur = () => {
-                this.onCanvasBlurObservable.notifyObservers(this);
-            };
+                window.addEventListener("blur", this._onBlur);
+                window.addEventListener("focus", this._onFocus);
+
+                canvas.addEventListener("pointerout", this._onCanvasBlur);
+            } else {
+                this._gl = <WebGLRenderingContext>canvasOrContext;
+                this._renderingCanvas = this._gl.canvas
 
-            window.addEventListener("blur", this._onBlur);
-            window.addEventListener("focus", this._onFocus);
+                if (this._gl.renderbufferStorageMultisample) {
+                    this._webGLVersion = 2.0;
+                }
 
-            canvas.addEventListener("pointerout", this._onCanvasBlur);
+                options.stencil = this._gl.getContextAttributes().stencil;
+            }
 
             // Viewport
             var limitDeviceRatio = options.limitDeviceRatio || window.devicePixelRatio || 1.0;
@@ -823,49 +835,51 @@
             this.setDepthFunctionToLessOrEqual();
             this.setDepthWrite(true);
 
-            // Fullscreen
-            this._onFullscreenChange = () => {
-                if (document.fullscreen !== undefined) {
-                    this.isFullscreen = document.fullscreen;
-                } else if (document.mozFullScreen !== undefined) {
-                    this.isFullscreen = document.mozFullScreen;
-                } else if (document.webkitIsFullScreen !== undefined) {
-                    this.isFullscreen = document.webkitIsFullScreen;
-                } else if (document.msIsFullScreen !== undefined) {
-                    this.isFullscreen = document.msIsFullScreen;
-                }
+            if (canvas) {
+                // Fullscreen
+                this._onFullscreenChange = () => {
+                    if (document.fullscreen !== undefined) {
+                        this.isFullscreen = document.fullscreen;
+                    } else if (document.mozFullScreen !== undefined) {
+                        this.isFullscreen = document.mozFullScreen;
+                    } else if (document.webkitIsFullScreen !== undefined) {
+                        this.isFullscreen = document.webkitIsFullScreen;
+                    } else if (document.msIsFullScreen !== undefined) {
+                        this.isFullscreen = document.msIsFullScreen;
+                    }
 
-                // Pointer lock
-                if (this.isFullscreen && this._pointerLockRequested) {
-                    canvas.requestPointerLock = canvas.requestPointerLock ||
-                        canvas.msRequestPointerLock ||
-                        canvas.mozRequestPointerLock ||
-                        canvas.webkitRequestPointerLock;
-
-                    if (canvas.requestPointerLock) {
-                        canvas.requestPointerLock();
+                    // Pointer lock
+                    if (this.isFullscreen && this._pointerLockRequested) {
+                        canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.msRequestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+                        if (canvas.requestPointerLock) {
+                            canvas.requestPointerLock();
+                        }
                     }
-                }
-            };
+                };
 
-            document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
-            document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
-
-            // Pointer lock
-            this._onPointerLockChange = () => {
-                this.isPointerLock = (document.mozPointerLockElement === canvas ||
-                    document.webkitPointerLockElement === canvas ||
-                    document.msPointerLockElement === canvas ||
-                    document.pointerLockElement === canvas
-                );
-            };
+                document.addEventListener("fullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("mozfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("webkitfullscreenchange", this._onFullscreenChange, false);
+                document.addEventListener("msfullscreenchange", this._onFullscreenChange, false);
 
-            document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
-            document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+                // Pointer lock
+                this._onPointerLockChange = () => {
+                    this.isPointerLock = (document.mozPointerLockElement === canvas ||
+                        document.webkitPointerLockElement === canvas ||
+                        document.msPointerLockElement === canvas ||
+                        document.pointerLockElement === canvas
+                    );
+                };
+
+                document.addEventListener("pointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
+                document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
+            }
 
             if (options.audioEngine && AudioEngine && !Engine.audioEngine) {
                 Engine.audioEngine = new AudioEngine();
@@ -929,7 +943,7 @@
                 return this._currentRenderTarget._width;
             }
 
-            return this._renderingCanvas.width;
+            return this._gl.drawingBufferWidth;
         }
 
         public getRenderHeight(useScreen = false): number {
@@ -937,7 +951,7 @@
                 return this._currentRenderTarget._height;
             }
 
-            return this._renderingCanvas.height;
+            return this._gl.drawingBufferHeight;
         }
 
         public getRenderingCanvas(): HTMLCanvasElement {