Merge remote-tracking branch 'origin/master' into Environment

Exporters/Blender/src/babylon-js/f_curve_animatable.py

@@ -33,6 +33,7 @@ class FCurveAnimatable:
             frameOffset = 0
 
             currentAction = object.animation_data.action
+            currentFrame = bpy.context.scene.frame_current
             for action in bpy.data.actions:
                 # get the range / assigning the action to the object
                 animationRange = AnimationRange.actionPrep(object, action, False, frameOffset)
@@ -54,6 +55,7 @@ class FCurveAnimatable:
                     frameOffset = animationRange.frame_end
 
             object.animation_data.action = currentAction
+            bpy.context.scene.frame_set(currentFrame)
             #Set Animations
             self.animations = []
             if supportsRotation and len(rotAnimation.frames) > 0:

Playground/js/index.js

@@ -291,6 +291,30 @@
                     return;
                 }
 
+                var showInspector = false;
+                var showDebugLayer = false;
+                var initialTabIndex = 0;
+
+                if(document.getElementsByClassName('insp-wrapper').length > 0){                  
+                    for(let i = 0; i < engine.scenes.length; i++){
+                        if(engine.scenes[i]._debugLayer){
+                            //TODO: once inspector is updated on netlify, use getActiveTabIndex instead of the following loop
+                            //initialTabIndex = engine.scenes[i]._debugLayer._inspector.getActiveTabIndex();
+                            var tabs = engine.scenes[i]._debugLayer._inspector._tabbar._tabs;
+                            for(var j = 0; j < tabs.length; j++){
+                                if(tabs[j].isActive()){
+                                    initialTabIndex = j;
+                                    break;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                    showInspector = true;
+                }else if(document.getElementById('DebugLayer')){
+                    showDebugLayer = true;
+                }
+
                 if (engine) {
                     engine.dispose();
                     engine = null;
@@ -317,6 +341,7 @@
                         scene.render();
                     }
 
+                    fpsLabel.style.right = document.body.clientWidth - (jsEditor.domElement.clientWidth + canvas.clientWidth) + "px";
                     fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
                 });
 
@@ -371,6 +396,17 @@
                     document.getElementById("statusBar").innerHTML = "";
                 });
 
+                if(scene){
+                    if(showInspector){
+                        scene.debugLayer.show({initialTab:initialTabIndex});
+                        scene.executeWhenReady(function(){
+                            scene.debugLayer._inspector.refresh();
+                        })
+                    }else if(showDebugLayer){
+                        scene.debugLayer.show();
+                    }
+                }
+
             } catch (e) {
                 showError(e.message, e);
             }

Tools/Gulp/config.json

@@ -1436,6 +1436,7 @@
                     "../../inspector/src/gui/BasicElement.ts",
                     "../../inspector/src/adapters/Adapter.ts",
                     "../../inspector/src/adapters/CameraAdapter.ts",
+                    "../../inspector/src/adapters/PhysicsImpostorAdapter.ts",
                     "../../inspector/src/adapters/GUIAdapter.ts",
                     "../../inspector/src/adapters/SoundAdapter.ts",
                     "../../inspector/src/adapters/TextureAdapter.ts",

dist/preview release/babylon.max.js

@@ -7343,6 +7343,10 @@ var BABYLON;
             if (!this._glRenderer) {
                 this._glRenderer = "Unknown renderer";
             }
+            // Constants
+            this._gl.HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
+            this._gl.RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
+            this._gl.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.            
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
             this._caps.astc = this._gl.getExtension('WEBGL_compressed_texture_astc') || this._gl.getExtension('WEBKIT_WEBGL_compressed_texture_astc');
@@ -7365,7 +7369,7 @@ var BABYLON;
             this._caps.textureHalfFloat = this._webGLVersion > 1 || this._gl.getExtension('OES_texture_half_float');
             this._caps.textureHalfFloatLinearFiltering = this._webGLVersion > 1 || (this._caps.textureHalfFloat && this._gl.getExtension('OES_texture_half_float_linear'));
             if (this._webGLVersion > 1) {
-                Engine.HALF_FLOAT_OES = 0x140B;
+                this._gl.HALF_FLOAT_OES = 0x140B;
             }
             this._caps.textureHalfFloatRender = this._caps.textureHalfFloat && this._canRenderToHalfFloatFramebuffer();
             this._caps.textureLOD = this._webGLVersion > 1 || this._gl.getExtension('EXT_shader_texture_lod');
@@ -7801,7 +7805,7 @@ var BABYLON;
         });
         Object.defineProperty(Engine, "Version", {
             get: function () {
-                return "3.0-beta";
+                return "3.0-rc";
             },
             enumerable: true,
             configurable: true
@@ -9182,7 +9186,7 @@ var BABYLON;
                         var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
                         var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) === 1);
                         prepareWebGLTexture(texture, _this._gl, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, function () {
-                            BABYLON.Internals.DDSTools.UploadDDSLevels(_this._gl, _this.getCaps().s3tc, data, info, loadMipmap, 1);
+                            BABYLON.Internals.DDSTools.UploadDDSLevels(_this, data, info, loadMipmap, 1);
                         }, samplingMode);
                     };
                 }
@@ -9705,6 +9709,7 @@ var BABYLON;
             texture.references = 1;
             texture.onLoadedCallbacks = [];
             var isKTX = false;
+            var isDDS = false;
             var lastDot = rootUrl.lastIndexOf('.');
             var extension = rootUrl.substring(lastDot).toLowerCase();
             if (this._textureFormatInUse) {
@@ -9712,9 +9717,8 @@ var BABYLON;
                 rootUrl = rootUrl.substring(0, lastDot) + this._textureFormatInUse;
                 isKTX = true;
             }
-            var isDDS = this.getCaps().s3tc && (extension === ".dds");
-            if (isDDS) {
-                BABYLON.Tools.Warn("DDS files deprecated since 3.0, use KTX files");
+            else {
+                isDDS = (extension === ".dds");
             }
             if (isKTX) {
                 BABYLON.Tools.LoadFile(rootUrl, function (data) {
@@ -9739,8 +9743,10 @@ var BABYLON;
                     var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
                     var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap;
                     _this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture);
-                    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
-                    BABYLON.Internals.DDSTools.UploadDDSLevels(_this._gl, _this.getCaps().s3tc, data, info, loadMipmap, 6);
+                    if (info.isCompressed) {
+                        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+                    }
+                    BABYLON.Internals.DDSTools.UploadDDSLevels(_this, data, info, loadMipmap, 6);
                     if (!noMipmap && !info.isFourCC && info.mipmapCount === 1) {
                         gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
                     }
@@ -9753,6 +9759,7 @@ var BABYLON;
                     texture._width = info.width;
                     texture._height = info.height;
                     texture.isReady = true;
+                    texture.type = info.textureType;
                 }, null, null, true, onError);
             }
             else {
@@ -9882,7 +9889,7 @@ var BABYLON;
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
-            else if (textureType === Engine.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
+            else if (textureType === this._gl.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
@@ -10402,21 +10409,22 @@ var BABYLON;
                 this.fps = 1000.0 / (sum / (length - 1));
             }
         };
-        Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex) {
+        Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex, lodIndex) {
             if (faceIndex === void 0) { faceIndex = -1; }
+            if (lodIndex === void 0) { lodIndex = 0; }
             var gl = this._gl;
             if (!this._dummyFramebuffer) {
                 this._dummyFramebuffer = gl.createFramebuffer();
             }
             gl.bindFramebuffer(gl.FRAMEBUFFER, this._dummyFramebuffer);
             if (faceIndex > -1) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, 0);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, lodIndex);
             }
             else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, lodIndex);
             }
             var readFormat = gl.RGBA;
-            var readType = gl.UNSIGNED_BYTE;
+            var readType = (texture.type !== undefined) ? texture.type : gl.UNSIGNED_BYTE;
             var buffer = new Uint8Array(4 * width * height);
             gl.readPixels(0, 0, width, height, readFormat, readType, buffer);
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -10480,7 +10488,7 @@ var BABYLON;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 // Add Half Float Constant.
-                return Engine.HALF_FLOAT_OES;
+                return this._gl.HALF_FLOAT_OES;
             }
             return this._gl.UNSIGNED_BYTE;
         };
@@ -10490,10 +10498,10 @@ var BABYLON;
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                return Engine.RGBA32F;
+                return this._gl.RGBA32F;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                return Engine.RGBA16F;
+                return this._gl.RGBA16F;
             }
             return this._gl.RGBA;
         };
@@ -10549,9 +10557,6 @@ var BABYLON;
     Engine._GREATER = 0x0204; //	Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is greater than the stored value.
     Engine._GEQUAL = 0x0206; //	Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is greater than or equal to the stored value.
     Engine._NOTEQUAL = 0x0205; //  Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is not equal to the stored value.
-    Engine.HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
-    Engine.RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
-    Engine.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.
     // Stencil Actions Constants.
     Engine._KEEP = 0x1E00;
     Engine._REPLACE = 0x1E01;
@@ -19113,17 +19118,28 @@ var BABYLON;
         BaseTexture.prototype.clone = function () {
             return null;
         };
-        BaseTexture.prototype.readPixels = function (faceIndex) {
+        Object.defineProperty(BaseTexture.prototype, "textureType", {
+            get: function () {
+                if (!this._texture) {
+                    return BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+                }
+                return (this._texture.type !== undefined) ? this._texture.type : BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        BaseTexture.prototype.readPixels = function (faceIndex, lodIndex) {
             if (faceIndex === void 0) { faceIndex = 0; }
+            if (lodIndex === void 0) { lodIndex = 0; }
             if (!this._texture) {
                 return null;
             }
             var size = this.getSize();
             var engine = this.getScene().getEngine();
             if (this._texture.isCube) {
-                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex);
+                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex, lodIndex);
             }
-            return engine._readTexturePixels(this._texture, size.width, size.height);
+            return engine._readTexturePixels(this._texture, size.width, size.height, -1, lodIndex);
         };
         BaseTexture.prototype.releaseInternalTexture = function () {
             if (this._texture) {
@@ -23838,6 +23854,7 @@ var BABYLON;
             this._areTexturesDirty = true;
             this._areFresnelDirty = true;
             this._areMiscDirty = true;
+            this._areImageProcessingDirty = true;
             this._normals = false;
             this._uvs = false;
             this._needNormals = false;
@@ -23857,6 +23874,7 @@ var BABYLON;
             this._areFresnelDirty = false;
             this._areLightsDirty = false;
             this._areMiscDirty = false;
+            this._areImageProcessingDirty = false;
         };
         MaterialDefines.prototype.markAsUnprocessed = function () {
             this._isDirty = true;
@@ -23867,6 +23885,11 @@ var BABYLON;
             this._areLightsDirty = true;
             this._areFresnelDirty = true;
             this._areMiscDirty = true;
+            this._areImageProcessingDirty = true;
+            this._isDirty = true;
+        };
+        MaterialDefines.prototype.markAsImageProcessingDirty = function () {
+            this._areImageProcessingDirty = true;
             this._isDirty = true;
         };
         MaterialDefines.prototype.markAsLightDirty = function () {
@@ -24323,6 +24346,9 @@ var BABYLON;
                 }
             }
         };
+        Material.prototype._markAllSubMeshesAsImageProcessingDirty = function () {
+            this._markAllSubMeshesAsDirty(function (defines) { return defines.markAsImageProcessingDirty(); });
+        };
         Material.prototype._markAllSubMeshesAsTexturesDirty = function () {
             this._markAllSubMeshesAsDirty(function (defines) { return defines.markAsTexturesDirty(); });
         };
@@ -28707,7 +28733,7 @@ var BABYLON;
             }
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(function (conf) {
-                _this._markAllSubMeshesAsTexturesDirty();
+                _this._markAllSubMeshesAsImageProcessingDirty();
             });
         };
         Object.defineProperty(StandardMaterial.prototype, "cameraColorCurvesEnabled", {
@@ -29029,15 +29055,17 @@ var BABYLON;
                     defines.BUMP = false;
                     defines.REFRACTION = false;
                 }
-                if (!this.imageProcessingConfiguration.isReady()) {
-                    return false;
-                }
-                this.imageProcessingConfiguration.prepareDefines(defines);
                 defines.ALPHAFROMDIFFUSE = this._shouldUseAlphaFromDiffuseTexture();
                 defines.EMISSIVEASILLUMINATION = this._useEmissiveAsIllumination;
                 defines.LINKEMISSIVEWITHDIFFUSE = this._linkEmissiveWithDiffuse;
                 defines.SPECULAROVERALPHA = this._useSpecularOverAlpha;
             }
+            if (defines._areImageProcessingDirty) {
+                if (!this._imageProcessingConfiguration.isReady()) {
+                    return false;
+                }
+                this._imageProcessingConfiguration.prepareDefines(defines);
+            }
             if (defines._areFresnelDirty) {
                 if (StandardMaterial.FresnelEnabled) {
                     // Fresnel
@@ -30208,7 +30236,7 @@ var BABYLON;
             }
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(function (conf) {
-                _this._markAllSubMeshesAsTexturesDirty();
+                _this._markAllSubMeshesAsImageProcessingDirty();
             });
         };
         Object.defineProperty(PBRBaseMaterial.prototype, "useLogarithmicDepth", {
@@ -30451,6 +30479,8 @@ var BABYLON;
                 defines.PREMULTIPLYALPHA = this._premultiplyAlpha;
                 defines.ALPHABLEND = this.needAlphaBlending();
                 defines.ALPHAFRESNEL = this._useAlphaFresnel;
+            }
+            if (defines._areImageProcessingDirty) {
                 if (!this._imageProcessingConfiguration.isReady()) {
                     return false;
                 }
@@ -31763,6 +31793,10 @@ var BABYLON;
             }
             return activeTextures;
         };
+        PBRMetallicRoughnessMaterial.prototype.clone = function (name) {
+            var _this = this;
+            return BABYLON.SerializationHelper.Clone(function () { return new PBRMetallicRoughnessMaterial(name, _this.getScene()); }, this);
+        };
         /**
          * Serialize the material to a parsable JSON object.
          */
@@ -31850,6 +31884,10 @@ var BABYLON;
             }
             return activeTextures;
         };
+        PBRSpecularGlossinessMaterial.prototype.clone = function (name) {
+            var _this = this;
+            return BABYLON.SerializationHelper.Clone(function () { return new PBRSpecularGlossinessMaterial(name, _this.getScene()); }, this);
+        };
         /**
          * Serialize the material to a parsable JSON object.
          */
@@ -35102,7 +35140,10 @@ var BABYLON;
             this.setValue(currentValue);
             // Check events
             for (var index = 0; index < this._events.length; index++) {
-                if (currentFrame >= this._events[index].frame) {
+                // Make sure current frame has passed event frame and that event frame is within the current range
+                // Also, handle both forward and reverse animations
+                if ((range > 0 && currentFrame >= this._events[index].frame && this._events[index].frame >= from) ||
+                    (range < 0 && currentFrame <= this._events[index].frame && this._events[index].frame <= from)) {
                     var event = this._events[index];
                     if (!event.isDone) {
                         // If event should be done only once, remove it.
@@ -50594,8 +50635,8 @@ var BABYLON;
                 effect.setFloat("base", _this.base);
                 effect.setFloat("near", _this._scene.activeCamera.minZ);
                 effect.setFloat("far", _this._scene.activeCamera.maxZ);
-                effect.setFloat("xViewport", Math.tan(_this._scene.activeCamera.fov / 2) * _this._scene.activeCamera.minZ * _this._scene.getEngine().getAspectRatio(_this._scene.activeCamera, true));
-                effect.setFloat("yViewport", Math.tan(_this._scene.activeCamera.fov / 2) * _this._scene.activeCamera.minZ);
+                effect.setFloat("xViewport", Math.tan(_this._scene.activeCamera.fov / 2) * _this._scene.getEngine().getAspectRatio(_this._scene.activeCamera, true));
+                effect.setFloat("yViewport", Math.tan(_this._scene.activeCamera.fov / 2));
                 effect.setMatrix("projection", _this._scene.getProjectionMatrix());
                 effect.setTexture("textureSampler", _this._depthTexture);
                 effect.setTexture("normalSampler", _this._normalTexture);
@@ -55993,7 +56034,7 @@ var BABYLON;
             selects one of the cube map face's 2D mipmap sets based on the largest magnitude coordinate direction
             the major axis direction). The target column in the table below explains how the major axis direction
             maps to the 2D image of a particular cube map target.
-    
+    
             major axis
             direction     target                              sc     tc    ma
             ----------    ---------------------------------   ---    ---   ---
@@ -56003,7 +56044,7 @@ var BABYLON;
             -ry          GL_TEXTURE_CUBE_MAP_NEGATIVE_Y_EXT   +rx    -rz   ry
             +rz          GL_TEXTURE_CUBE_MAP_POSITIVE_Z_EXT   +rx    -ry   rz
             -rz          GL_TEXTURE_CUBE_MAP_NEGATIVE_Z_EXT   -rx    -ry   rz
-    
+    
             Using the sc, tc, and ma determined by the major axis direction as specified in the table above,
             an updated (s,t) is calculated as follows
             s   =   ( sc/|ma| + 1 ) / 2
@@ -60735,6 +60776,10 @@ var BABYLON;
         var FOURCC_DXT1 = FourCCToInt32("DXT1");
         var FOURCC_DXT3 = FourCCToInt32("DXT3");
         var FOURCC_DXT5 = FourCCToInt32("DXT5");
+        var FOURCC_DX10 = FourCCToInt32("DX10");
+        var FOURCC_D3DFMT_R16G16B16A16F = 113;
+        var FOURCC_D3DFMT_R32G32B32A32F = 116;
+        var DXGI_FORMAT_R16G16B16A16_FLOAT = 10;
         var headerLengthInt = 31; // The header length in 32 bit ints
         // Offsets into the header array
         var off_magic = 0;
@@ -60752,16 +60797,36 @@ var BABYLON;
         var off_AMask = 26;
         var off_caps1 = 27;
         var off_caps2 = 28;
+        var off_caps3 = 29;
+        var off_caps4 = 30;
+        var off_dxgiFormat = 32;
         ;
         var DDSTools = (function () {
             function DDSTools() {
             }
             DDSTools.GetDDSInfo = function (arrayBuffer) {
                 var header = new Int32Array(arrayBuffer, 0, headerLengthInt);
+                var extendedHeader = new Int32Array(arrayBuffer, 0, headerLengthInt + 4);
                 var mipmapCount = 1;
                 if (header[off_flags] & DDSD_MIPMAPCOUNT) {
                     mipmapCount = Math.max(1, header[off_mipmapCount]);
                 }
+                var fourCC = header[off_pfFourCC];
+                var dxgiFormat = (fourCC === FOURCC_DX10) ? extendedHeader[off_dxgiFormat] : 0;
+                var textureType = BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+                switch (fourCC) {
+                    case FOURCC_D3DFMT_R16G16B16A16F:
+                        textureType = BABYLON.Engine.TEXTURETYPE_HALF_FLOAT;
+                        break;
+                    case FOURCC_D3DFMT_R32G32B32A32F:
+                        textureType = BABYLON.Engine.TEXTURETYPE_FLOAT;
+                        break;
+                    case FOURCC_DX10:
+                        if (dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                            textureType = BABYLON.Engine.TEXTURETYPE_HALF_FLOAT;
+                            break;
+                        }
+                }
                 return {
                     width: header[off_width],
                     height: header[off_height],
@@ -60769,19 +60834,28 @@ var BABYLON;
                     isFourCC: (header[off_pfFlags] & DDPF_FOURCC) === DDPF_FOURCC,
                     isRGB: (header[off_pfFlags] & DDPF_RGB) === DDPF_RGB,
                     isLuminance: (header[off_pfFlags] & DDPF_LUMINANCE) === DDPF_LUMINANCE,
-                    isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP
+                    isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP,
+                    isCompressed: (fourCC === FOURCC_DXT1 || fourCC === FOURCC_DXT3 || FOURCC_DXT1 === FOURCC_DXT5),
+                    dxgiFormat: dxgiFormat,
+                    textureType: textureType
                 };
             };
+            DDSTools.GetHalfFloatRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
+                return new Uint16Array(arrayBuffer, dataOffset, dataLength);
+            };
+            DDSTools.GetFloatRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
+                return new Float32Array(arrayBuffer, dataOffset, dataLength);
+            };
             DDSTools.GetRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width) * 4;
-                        byteArray[index + 2] = srcData[srcPos];
-                        byteArray[index + 1] = srcData[srcPos + 1];
                         byteArray[index] = srcData[srcPos + 2];
+                        byteArray[index + 1] = srcData[srcPos + 1];
+                        byteArray[index + 2] = srcData[srcPos];
                         byteArray[index + 3] = srcData[srcPos + 3];
                         index += 4;
                     }
@@ -60792,12 +60866,12 @@ var BABYLON;
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width) * 3;
-                        byteArray[index + 2] = srcData[srcPos];
-                        byteArray[index + 1] = srcData[srcPos + 1];
                         byteArray[index] = srcData[srcPos + 2];
+                        byteArray[index + 1] = srcData[srcPos + 1];
+                        byteArray[index + 2] = srcData[srcPos];
                         index += 3;
                     }
                 }
@@ -60807,7 +60881,7 @@ var BABYLON;
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width);
                         byteArray[index] = srcData[srcPos];
@@ -60816,8 +60890,10 @@ var BABYLON;
                 }
                 return byteArray;
             };
-            DDSTools.UploadDDSLevels = function (gl, ext, arrayBuffer, info, loadMipmaps, faces) {
-                var header = new Int32Array(arrayBuffer, 0, headerLengthInt), fourCC, blockBytes, internalFormat, width, height, dataLength, dataOffset, byteArray, mipmapCount, i;
+            DDSTools.UploadDDSLevels = function (engine, arrayBuffer, info, loadMipmaps, faces) {
+                var gl = engine._gl;
+                var ext = engine.getCaps().s3tc;
+                var header = new Int32Array(arrayBuffer, 0, headerLengthInt), fourCC, blockBytes, internalFormat, format, width, height, dataLength, dataOffset, byteArray, mipmapCount, i;
                 if (header[off_magic] != DDS_MAGIC) {
                     BABYLON.Tools.Error("Invalid magic number in DDS header");
                     return;
@@ -60826,6 +60902,13 @@ var BABYLON;
                     BABYLON.Tools.Error("Unsupported format, must contain a FourCC, RGB or LUMINANCE code");
                     return;
                 }
+                if (info.isCompressed && !ext) {
+                    BABYLON.Tools.Error("Compressed textures are not supported on this platform.");
+                    return;
+                }
+                var bpp = header[off_RGBbpp];
+                dataOffset = header[off_size] + 4;
+                var computeFormats = false;
                 if (info.isFourCC) {
                     fourCC = header[off_pfFourCC];
                     switch (fourCC) {
@@ -60841,23 +60924,49 @@ var BABYLON;
                             blockBytes = 16;
                             internalFormat = ext.COMPRESSED_RGBA_S3TC_DXT5_EXT;
                             break;
+                        case FOURCC_D3DFMT_R16G16B16A16F:
+                            computeFormats = true;
+                            break;
+                        case FOURCC_D3DFMT_R32G32B32A32F:
+                            computeFormats = true;
+                            break;
+                        case FOURCC_DX10:
+                            // There is an additionnal header so dataOffset need to be changed
+                            dataOffset += 5 * 4; // 5 uints
+                            if (info.dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                                computeFormats = true;
+                                break;
+                            }
                         default:
                             console.error("Unsupported FourCC code:", Int32ToFourCC(fourCC));
                             return;
                     }
                 }
+                if (computeFormats) {
+                    format = engine._getWebGLTextureType(info.textureType);
+                    internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
+                }
                 mipmapCount = 1;
                 if (header[off_flags] & DDSD_MIPMAPCOUNT && loadMipmaps !== false) {
                     mipmapCount = Math.max(1, header[off_mipmapCount]);
                 }
-                var bpp = header[off_RGBbpp];
                 for (var face = 0; face < faces; face++) {
                     var sampler = faces === 1 ? gl.TEXTURE_2D : (gl.TEXTURE_CUBE_MAP_POSITIVE_X + face);
                     width = header[off_width];
                     height = header[off_height];
-                    dataOffset = header[off_size] + 4;
                     for (i = 0; i < mipmapCount; ++i) {
-                        if (info.isRGB) {
+                        if (!info.isCompressed && info.isFourCC) {
+                            dataLength = width * height * 4;
+                            var floatArray;
+                            if (bpp === 128) {
+                                floatArray = DDSTools.GetFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
+                            }
+                            else {
+                                floatArray = DDSTools.GetHalfFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
+                            }
+                            gl.texImage2D(sampler, i, internalFormat, width, height, 0, gl.RGBA, format, floatArray);
+                        }
+                        else if (info.isRGB) {
                             if (bpp === 24) {
                                 dataLength = width * height * 3;
                                 byteArray = DDSTools.GetRGBArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
@@ -60882,7 +60991,7 @@ var BABYLON;
                             byteArray = new Uint8Array(arrayBuffer, dataOffset, dataLength);
                             gl.compressedTexImage2D(sampler, i, internalFormat, width, height, 0, byteArray);
                         }
-                        dataOffset += dataLength;
+                        dataOffset += width * height * (bpp / 8);
                         width *= 0.5;
                         height *= 0.5;
                         width = Math.max(1.0, width);
@@ -67346,10 +67455,7 @@ var BABYLON;
             this._colorGradingEnabled = false;
             this._colorGradingWithGreenDepth = false;
             this._colorGradingBGR = false;
-            /**
-             * Exposure used in the effect.
-             */
-            this.exposure = 1.0;
+            this._exposure = 1.0;
             this._toneMappingEnabled = false;
             this._contrast = 1.0;
             /**
@@ -67466,6 +67572,26 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ImageProcessingConfiguration.prototype, "exposure", {
+            /**
+             * Gets the Exposure used in the effect.
+             */
+            get: function () {
+                return this._exposure;
+            },
+            /**
+             * Sets the Exposure used in the effect.
+             */
+            set: function (value) {
+                if (this._exposure === value) {
+                    return;
+                }
+                this._exposure = value;
+                this._updateParameters();
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(ImageProcessingConfiguration.prototype, "toneMappingEnabled", {
             /**
              * Gets wether the tone mapping effect is enabled.
@@ -67737,7 +67863,7 @@ var BABYLON;
     ], ImageProcessingConfiguration.prototype, "_colorGradingBGR", void 0);
     __decorate([
         BABYLON.serialize()
-    ], ImageProcessingConfiguration.prototype, "exposure", void 0);
+    ], ImageProcessingConfiguration.prototype, "_exposure", void 0);
     __decorate([
         BABYLON.serialize()
     ], ImageProcessingConfiguration.prototype, "_toneMappingEnabled", void 0);

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

@@ -7343,6 +7343,10 @@ var BABYLON;
             if (!this._glRenderer) {
                 this._glRenderer = "Unknown renderer";
             }
+            // Constants
+            this._gl.HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
+            this._gl.RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
+            this._gl.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.            
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
             this._caps.astc = this._gl.getExtension('WEBGL_compressed_texture_astc') || this._gl.getExtension('WEBKIT_WEBGL_compressed_texture_astc');
@@ -7365,7 +7369,7 @@ var BABYLON;
             this._caps.textureHalfFloat = this._webGLVersion > 1 || this._gl.getExtension('OES_texture_half_float');
             this._caps.textureHalfFloatLinearFiltering = this._webGLVersion > 1 || (this._caps.textureHalfFloat && this._gl.getExtension('OES_texture_half_float_linear'));
             if (this._webGLVersion > 1) {
-                Engine.HALF_FLOAT_OES = 0x140B;
+                this._gl.HALF_FLOAT_OES = 0x140B;
             }
             this._caps.textureHalfFloatRender = this._caps.textureHalfFloat && this._canRenderToHalfFloatFramebuffer();
             this._caps.textureLOD = this._webGLVersion > 1 || this._gl.getExtension('EXT_shader_texture_lod');
@@ -7801,7 +7805,7 @@ var BABYLON;
         });
         Object.defineProperty(Engine, "Version", {
             get: function () {
-                return "3.0-beta";
+                return "3.0-rc";
             },
             enumerable: true,
             configurable: true
@@ -9182,7 +9186,7 @@ var BABYLON;
                         var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
                         var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) === 1);
                         prepareWebGLTexture(texture, _this._gl, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, function () {
-                            BABYLON.Internals.DDSTools.UploadDDSLevels(_this._gl, _this.getCaps().s3tc, data, info, loadMipmap, 1);
+                            BABYLON.Internals.DDSTools.UploadDDSLevels(_this, data, info, loadMipmap, 1);
                         }, samplingMode);
                     };
                 }
@@ -9705,6 +9709,7 @@ var BABYLON;
             texture.references = 1;
             texture.onLoadedCallbacks = [];
             var isKTX = false;
+            var isDDS = false;
             var lastDot = rootUrl.lastIndexOf('.');
             var extension = rootUrl.substring(lastDot).toLowerCase();
             if (this._textureFormatInUse) {
@@ -9712,9 +9717,8 @@ var BABYLON;
                 rootUrl = rootUrl.substring(0, lastDot) + this._textureFormatInUse;
                 isKTX = true;
             }
-            var isDDS = this.getCaps().s3tc && (extension === ".dds");
-            if (isDDS) {
-                BABYLON.Tools.Warn("DDS files deprecated since 3.0, use KTX files");
+            else {
+                isDDS = (extension === ".dds");
             }
             if (isKTX) {
                 BABYLON.Tools.LoadFile(rootUrl, function (data) {
@@ -9739,8 +9743,10 @@ var BABYLON;
                     var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
                     var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap;
                     _this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture);
-                    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
-                    BABYLON.Internals.DDSTools.UploadDDSLevels(_this._gl, _this.getCaps().s3tc, data, info, loadMipmap, 6);
+                    if (info.isCompressed) {
+                        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+                    }
+                    BABYLON.Internals.DDSTools.UploadDDSLevels(_this, data, info, loadMipmap, 6);
                     if (!noMipmap && !info.isFourCC && info.mipmapCount === 1) {
                         gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
                     }
@@ -9753,6 +9759,7 @@ var BABYLON;
                     texture._width = info.width;
                     texture._height = info.height;
                     texture.isReady = true;
+                    texture.type = info.textureType;
                 }, null, null, true, onError);
             }
             else {
@@ -9882,7 +9889,7 @@ var BABYLON;
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
-            else if (textureType === Engine.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
+            else if (textureType === this._gl.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
@@ -10402,21 +10409,22 @@ var BABYLON;
                 this.fps = 1000.0 / (sum / (length - 1));
             }
         };
-        Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex) {
+        Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex, lodIndex) {
             if (faceIndex === void 0) { faceIndex = -1; }
+            if (lodIndex === void 0) { lodIndex = 0; }
             var gl = this._gl;
             if (!this._dummyFramebuffer) {
                 this._dummyFramebuffer = gl.createFramebuffer();
             }
             gl.bindFramebuffer(gl.FRAMEBUFFER, this._dummyFramebuffer);
             if (faceIndex > -1) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, 0);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, lodIndex);
             }
             else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, lodIndex);
             }
             var readFormat = gl.RGBA;
-            var readType = gl.UNSIGNED_BYTE;
+            var readType = (texture.type !== undefined) ? texture.type : gl.UNSIGNED_BYTE;
             var buffer = new Uint8Array(4 * width * height);
             gl.readPixels(0, 0, width, height, readFormat, readType, buffer);
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -10480,7 +10488,7 @@ var BABYLON;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 // Add Half Float Constant.
-                return Engine.HALF_FLOAT_OES;
+                return this._gl.HALF_FLOAT_OES;
             }
             return this._gl.UNSIGNED_BYTE;
         };
@@ -10490,10 +10498,10 @@ var BABYLON;
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                return Engine.RGBA32F;
+                return this._gl.RGBA32F;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                return Engine.RGBA16F;
+                return this._gl.RGBA16F;
             }
             return this._gl.RGBA;
         };
@@ -10549,9 +10557,6 @@ var BABYLON;
     Engine._GREATER = 0x0204; //	Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is greater than the stored value.
     Engine._GEQUAL = 0x0206; //	Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is greater than or equal to the stored value.
     Engine._NOTEQUAL = 0x0205; //  Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is not equal to the stored value.
-    Engine.HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
-    Engine.RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
-    Engine.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.
     // Stencil Actions Constants.
     Engine._KEEP = 0x1E00;
     Engine._REPLACE = 0x1E01;
@@ -19113,17 +19118,28 @@ var BABYLON;
         BaseTexture.prototype.clone = function () {
             return null;
         };
-        BaseTexture.prototype.readPixels = function (faceIndex) {
+        Object.defineProperty(BaseTexture.prototype, "textureType", {
+            get: function () {
+                if (!this._texture) {
+                    return BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+                }
+                return (this._texture.type !== undefined) ? this._texture.type : BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        BaseTexture.prototype.readPixels = function (faceIndex, lodIndex) {
             if (faceIndex === void 0) { faceIndex = 0; }
+            if (lodIndex === void 0) { lodIndex = 0; }
             if (!this._texture) {
                 return null;
             }
             var size = this.getSize();
             var engine = this.getScene().getEngine();
             if (this._texture.isCube) {
-                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex);
+                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex, lodIndex);
             }
-            return engine._readTexturePixels(this._texture, size.width, size.height);
+            return engine._readTexturePixels(this._texture, size.width, size.height, -1, lodIndex);
         };
         BaseTexture.prototype.releaseInternalTexture = function () {
             if (this._texture) {
@@ -23838,6 +23854,7 @@ var BABYLON;
             this._areTexturesDirty = true;
             this._areFresnelDirty = true;
             this._areMiscDirty = true;
+            this._areImageProcessingDirty = true;
             this._normals = false;
             this._uvs = false;
             this._needNormals = false;
@@ -23857,6 +23874,7 @@ var BABYLON;
             this._areFresnelDirty = false;
             this._areLightsDirty = false;
             this._areMiscDirty = false;
+            this._areImageProcessingDirty = false;
         };
         MaterialDefines.prototype.markAsUnprocessed = function () {
             this._isDirty = true;
@@ -23867,6 +23885,11 @@ var BABYLON;
             this._areLightsDirty = true;
             this._areFresnelDirty = true;
             this._areMiscDirty = true;
+            this._areImageProcessingDirty = true;
+            this._isDirty = true;
+        };
+        MaterialDefines.prototype.markAsImageProcessingDirty = function () {
+            this._areImageProcessingDirty = true;
             this._isDirty = true;
         };
         MaterialDefines.prototype.markAsLightDirty = function () {
@@ -24323,6 +24346,9 @@ var BABYLON;
                 }
             }
         };
+        Material.prototype._markAllSubMeshesAsImageProcessingDirty = function () {
+            this._markAllSubMeshesAsDirty(function (defines) { return defines.markAsImageProcessingDirty(); });
+        };
         Material.prototype._markAllSubMeshesAsTexturesDirty = function () {
             this._markAllSubMeshesAsDirty(function (defines) { return defines.markAsTexturesDirty(); });
         };
@@ -32626,6 +32652,10 @@ var BABYLON;
         var FOURCC_DXT1 = FourCCToInt32("DXT1");
         var FOURCC_DXT3 = FourCCToInt32("DXT3");
         var FOURCC_DXT5 = FourCCToInt32("DXT5");
+        var FOURCC_DX10 = FourCCToInt32("DX10");
+        var FOURCC_D3DFMT_R16G16B16A16F = 113;
+        var FOURCC_D3DFMT_R32G32B32A32F = 116;
+        var DXGI_FORMAT_R16G16B16A16_FLOAT = 10;
         var headerLengthInt = 31; // The header length in 32 bit ints
         // Offsets into the header array
         var off_magic = 0;
@@ -32643,16 +32673,36 @@ var BABYLON;
         var off_AMask = 26;
         var off_caps1 = 27;
         var off_caps2 = 28;
+        var off_caps3 = 29;
+        var off_caps4 = 30;
+        var off_dxgiFormat = 32;
         ;
         var DDSTools = (function () {
             function DDSTools() {
             }
             DDSTools.GetDDSInfo = function (arrayBuffer) {
                 var header = new Int32Array(arrayBuffer, 0, headerLengthInt);
+                var extendedHeader = new Int32Array(arrayBuffer, 0, headerLengthInt + 4);
                 var mipmapCount = 1;
                 if (header[off_flags] & DDSD_MIPMAPCOUNT) {
                     mipmapCount = Math.max(1, header[off_mipmapCount]);
                 }
+                var fourCC = header[off_pfFourCC];
+                var dxgiFormat = (fourCC === FOURCC_DX10) ? extendedHeader[off_dxgiFormat] : 0;
+                var textureType = BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
+                switch (fourCC) {
+                    case FOURCC_D3DFMT_R16G16B16A16F:
+                        textureType = BABYLON.Engine.TEXTURETYPE_HALF_FLOAT;
+                        break;
+                    case FOURCC_D3DFMT_R32G32B32A32F:
+                        textureType = BABYLON.Engine.TEXTURETYPE_FLOAT;
+                        break;
+                    case FOURCC_DX10:
+                        if (dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                            textureType = BABYLON.Engine.TEXTURETYPE_HALF_FLOAT;
+                            break;
+                        }
+                }
                 return {
                     width: header[off_width],
                     height: header[off_height],
@@ -32660,19 +32710,28 @@ var BABYLON;
                     isFourCC: (header[off_pfFlags] & DDPF_FOURCC) === DDPF_FOURCC,
                     isRGB: (header[off_pfFlags] & DDPF_RGB) === DDPF_RGB,
                     isLuminance: (header[off_pfFlags] & DDPF_LUMINANCE) === DDPF_LUMINANCE,
-                    isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP
+                    isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP,
+                    isCompressed: (fourCC === FOURCC_DXT1 || fourCC === FOURCC_DXT3 || FOURCC_DXT1 === FOURCC_DXT5),
+                    dxgiFormat: dxgiFormat,
+                    textureType: textureType
                 };
             };
+            DDSTools.GetHalfFloatRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
+                return new Uint16Array(arrayBuffer, dataOffset, dataLength);
+            };
+            DDSTools.GetFloatRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
+                return new Float32Array(arrayBuffer, dataOffset, dataLength);
+            };
             DDSTools.GetRGBAArrayBuffer = function (width, height, dataOffset, dataLength, arrayBuffer) {
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width) * 4;
-                        byteArray[index + 2] = srcData[srcPos];
-                        byteArray[index + 1] = srcData[srcPos + 1];
                         byteArray[index] = srcData[srcPos + 2];
+                        byteArray[index + 1] = srcData[srcPos + 1];
+                        byteArray[index + 2] = srcData[srcPos];
                         byteArray[index + 3] = srcData[srcPos + 3];
                         index += 4;
                     }
@@ -32683,12 +32742,12 @@ var BABYLON;
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width) * 3;
-                        byteArray[index + 2] = srcData[srcPos];
-                        byteArray[index + 1] = srcData[srcPos + 1];
                         byteArray[index] = srcData[srcPos + 2];
+                        byteArray[index + 1] = srcData[srcPos + 1];
+                        byteArray[index + 2] = srcData[srcPos];
                         index += 3;
                     }
                 }
@@ -32698,7 +32757,7 @@ var BABYLON;
                 var byteArray = new Uint8Array(dataLength);
                 var srcData = new Uint8Array(arrayBuffer);
                 var index = 0;
-                for (var y = height - 1; y >= 0; y--) {
+                for (var y = 0; y < height; y++) {
                     for (var x = 0; x < width; x++) {
                         var srcPos = dataOffset + (x + y * width);
                         byteArray[index] = srcData[srcPos];
@@ -32707,8 +32766,10 @@ var BABYLON;
                 }
                 return byteArray;
             };
-            DDSTools.UploadDDSLevels = function (gl, ext, arrayBuffer, info, loadMipmaps, faces) {
-                var header = new Int32Array(arrayBuffer, 0, headerLengthInt), fourCC, blockBytes, internalFormat, width, height, dataLength, dataOffset, byteArray, mipmapCount, i;
+            DDSTools.UploadDDSLevels = function (engine, arrayBuffer, info, loadMipmaps, faces) {
+                var gl = engine._gl;
+                var ext = engine.getCaps().s3tc;
+                var header = new Int32Array(arrayBuffer, 0, headerLengthInt), fourCC, blockBytes, internalFormat, format, width, height, dataLength, dataOffset, byteArray, mipmapCount, i;
                 if (header[off_magic] != DDS_MAGIC) {
                     BABYLON.Tools.Error("Invalid magic number in DDS header");
                     return;
@@ -32717,6 +32778,13 @@ var BABYLON;
                     BABYLON.Tools.Error("Unsupported format, must contain a FourCC, RGB or LUMINANCE code");
                     return;
                 }
+                if (info.isCompressed && !ext) {
+                    BABYLON.Tools.Error("Compressed textures are not supported on this platform.");
+                    return;
+                }
+                var bpp = header[off_RGBbpp];
+                dataOffset = header[off_size] + 4;
+                var computeFormats = false;
                 if (info.isFourCC) {
                     fourCC = header[off_pfFourCC];
                     switch (fourCC) {
@@ -32732,23 +32800,49 @@ var BABYLON;
                             blockBytes = 16;
                             internalFormat = ext.COMPRESSED_RGBA_S3TC_DXT5_EXT;
                             break;
+                        case FOURCC_D3DFMT_R16G16B16A16F:
+                            computeFormats = true;
+                            break;
+                        case FOURCC_D3DFMT_R32G32B32A32F:
+                            computeFormats = true;
+                            break;
+                        case FOURCC_DX10:
+                            // There is an additionnal header so dataOffset need to be changed
+                            dataOffset += 5 * 4; // 5 uints
+                            if (info.dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                                computeFormats = true;
+                                break;
+                            }
                         default:
                             console.error("Unsupported FourCC code:", Int32ToFourCC(fourCC));
                             return;
                     }
                 }
+                if (computeFormats) {
+                    format = engine._getWebGLTextureType(info.textureType);
+                    internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
+                }
                 mipmapCount = 1;
                 if (header[off_flags] & DDSD_MIPMAPCOUNT && loadMipmaps !== false) {
                     mipmapCount = Math.max(1, header[off_mipmapCount]);
                 }
-                var bpp = header[off_RGBbpp];
                 for (var face = 0; face < faces; face++) {
                     var sampler = faces === 1 ? gl.TEXTURE_2D : (gl.TEXTURE_CUBE_MAP_POSITIVE_X + face);
                     width = header[off_width];
                     height = header[off_height];
-                    dataOffset = header[off_size] + 4;
                     for (i = 0; i < mipmapCount; ++i) {
-                        if (info.isRGB) {
+                        if (!info.isCompressed && info.isFourCC) {
+                            dataLength = width * height * 4;
+                            var floatArray;
+                            if (bpp === 128) {
+                                floatArray = DDSTools.GetFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
+                            }
+                            else {
+                                floatArray = DDSTools.GetHalfFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
+                            }
+                            gl.texImage2D(sampler, i, internalFormat, width, height, 0, gl.RGBA, format, floatArray);
+                        }
+                        else if (info.isRGB) {
                             if (bpp === 24) {
                                 dataLength = width * height * 3;
                                 byteArray = DDSTools.GetRGBArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
@@ -32773,7 +32867,7 @@ var BABYLON;
                             byteArray = new Uint8Array(arrayBuffer, dataOffset, dataLength);
                             gl.compressedTexImage2D(sampler, i, internalFormat, width, height, 0, byteArray);
                         }
-                        dataOffset += dataLength;
+                        dataOffset += width * height * (bpp / 8);
                         width *= 0.5;
                         height *= 0.5;
                         width = Math.max(1.0, width);
@@ -35084,7 +35178,7 @@ var BABYLON;
             }
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(function (conf) {
-                _this._markAllSubMeshesAsTexturesDirty();
+                _this._markAllSubMeshesAsImageProcessingDirty();
             });
         };
         Object.defineProperty(PBRBaseMaterial.prototype, "useLogarithmicDepth", {
@@ -35327,6 +35421,8 @@ var BABYLON;
                 defines.PREMULTIPLYALPHA = this._premultiplyAlpha;
                 defines.ALPHABLEND = this.needAlphaBlending();
                 defines.ALPHAFRESNEL = this._useAlphaFresnel;
+            }
+            if (defines._areImageProcessingDirty) {
                 if (!this._imageProcessingConfiguration.isReady()) {
                     return false;
                 }
@@ -36639,6 +36735,10 @@ var BABYLON;
             }
             return activeTextures;
         };
+        PBRMetallicRoughnessMaterial.prototype.clone = function (name) {
+            var _this = this;
+            return BABYLON.SerializationHelper.Clone(function () { return new PBRMetallicRoughnessMaterial(name, _this.getScene()); }, this);
+        };
         /**
          * Serialize the material to a parsable JSON object.
          */
@@ -36726,6 +36826,10 @@ var BABYLON;
             }
             return activeTextures;
         };
+        PBRSpecularGlossinessMaterial.prototype.clone = function (name) {
+            var _this = this;
+            return BABYLON.SerializationHelper.Clone(function () { return new PBRSpecularGlossinessMaterial(name, _this.getScene()); }, this);
+        };
         /**
          * Serialize the material to a parsable JSON object.
          */
@@ -40618,10 +40722,7 @@ var BABYLON;
             this._colorGradingEnabled = false;
             this._colorGradingWithGreenDepth = false;
             this._colorGradingBGR = false;
-            /**
-             * Exposure used in the effect.
-             */
-            this.exposure = 1.0;
+            this._exposure = 1.0;
             this._toneMappingEnabled = false;
             this._contrast = 1.0;
             /**
@@ -40738,6 +40839,26 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ImageProcessingConfiguration.prototype, "exposure", {
+            /**
+             * Gets the Exposure used in the effect.
+             */
+            get: function () {
+                return this._exposure;
+            },
+            /**
+             * Sets the Exposure used in the effect.
+             */
+            set: function (value) {
+                if (this._exposure === value) {
+                    return;
+                }
+                this._exposure = value;
+                this._updateParameters();
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(ImageProcessingConfiguration.prototype, "toneMappingEnabled", {
             /**
              * Gets wether the tone mapping effect is enabled.
@@ -41009,7 +41130,7 @@ var BABYLON;
     ], ImageProcessingConfiguration.prototype, "_colorGradingBGR", void 0);
     __decorate([
         BABYLON.serialize()
-    ], ImageProcessingConfiguration.prototype, "exposure", void 0);
+    ], ImageProcessingConfiguration.prototype, "_exposure", void 0);
     __decorate([
         BABYLON.serialize()
     ], ImageProcessingConfiguration.prototype, "_toneMappingEnabled", void 0);
@@ -41882,7 +42003,7 @@ var BABYLON;
             }
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(function (conf) {
-                _this._markAllSubMeshesAsTexturesDirty();
+                _this._markAllSubMeshesAsImageProcessingDirty();
             });
         };
         Object.defineProperty(StandardMaterial.prototype, "cameraColorCurvesEnabled", {
@@ -42204,15 +42325,17 @@ var BABYLON;
                     defines.BUMP = false;
                     defines.REFRACTION = false;
                 }
-                if (!this.imageProcessingConfiguration.isReady()) {
-                    return false;
-                }
-                this.imageProcessingConfiguration.prepareDefines(defines);
                 defines.ALPHAFROMDIFFUSE = this._shouldUseAlphaFromDiffuseTexture();
                 defines.EMISSIVEASILLUMINATION = this._useEmissiveAsIllumination;
                 defines.LINKEMISSIVEWITHDIFFUSE = this._linkEmissiveWithDiffuse;
                 defines.SPECULAROVERALPHA = this._useSpecularOverAlpha;
             }
+            if (defines._areImageProcessingDirty) {
+                if (!this._imageProcessingConfiguration.isReady()) {
+                    return false;
+                }
+                this._imageProcessingConfiguration.prepareDefines(defines);
+            }
             if (defines._areFresnelDirty) {
                 if (StandardMaterial.FresnelEnabled) {
                     // Fresnel

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

@@ -61,6 +61,7 @@ declare module INSPECTOR {
          * Set 'firstTime' to true if there is no inspector created beforehands
          */
         openPopup(firstTime?: boolean): void;
+        getActiveTabIndex(): number;
     }
 }
 
@@ -337,6 +338,23 @@ declare module INSPECTOR {
 }
 
 declare module INSPECTOR {
+    class PhysicsImpostorAdapter extends Adapter implements IToolVisible {
+        private _viewer;
+        private _isVisible;
+        constructor(obj: BABYLON.PhysicsImpostor, viewer: BABYLON.Debug.PhysicsViewer);
+        /** Returns the name displayed in the tree */
+        id(): string;
+        /** Returns the type of this object - displayed in the tree */
+        type(): string;
+        /** Returns the list of properties to be displayed for this adapter */
+        getProperties(): Array<PropertyLine>;
+        getTools(): Array<AbstractTreeTool>;
+        setVisible(b: boolean): void;
+        isVisible(): boolean;
+    }
+}
+
+declare module INSPECTOR {
     class GUIAdapter extends Adapter implements IToolVisible {
         constructor(obj: BABYLON.GUI.Control);
         /** Returns the name displayed in the tree */
@@ -444,23 +462,6 @@ declare module INSPECTOR {
 }
 
 declare module INSPECTOR {
-    class PhysicsImpostorAdapter extends Adapter implements IToolVisible {
-        private _viewer;
-        private _isVisible;
-        constructor(obj: BABYLON.PhysicsImpostor, viewer: BABYLON.Debug.PhysicsViewer);
-        /** Returns the name displayed in the tree */
-        id(): string;
-        /** Returns the type of this object - displayed in the tree */
-        type(): string;
-        /** Returns the list of properties to be displayed for this adapter */
-        getProperties(): Array<PropertyLine>;
-        getTools(): Array<AbstractTreeTool>;
-        setVisible(b: boolean): void;
-        isVisible(): boolean;
-    }
-}
-
-declare module INSPECTOR {
     interface SortDirection {
         [property: string]: number;
     }
@@ -1031,6 +1032,7 @@ declare module INSPECTOR {
         switchMeshTab(mesh?: BABYLON.AbstractMesh): void;
         /** Returns the active tab */
         getActiveTab(): Tab;
+        getActiveTabIndex(): number;
         readonly inspector: Inspector;
         /**
          * Returns the total width in pixel of the tabbar,
@@ -1102,22 +1104,16 @@ declare module INSPECTOR {
     class LabelTool extends AbstractTool {
         /** True if label are displayed, false otherwise */
         private _isDisplayed;
-        private _canvas;
+        private _advancedTexture;
         private _labelInitialized;
         private _scene;
-        private _canvas2DLoaded;
-        private _newMeshObserver;
-        private _removedMeshObserver;
-        private _newLightObserver;
-        private _removedLightObserver;
-        private _newCameraObserver;
-        private _removedCameraObserver;
+        private _guiLoaded;
         constructor(parent: HTMLElement, inspector: Inspector);
         dispose(): void;
-        private _checkC2DLoaded();
+        private _checkGUILoaded();
         private _initializeLabels();
-        private _createLabel(node);
-        private _removeLabel(node);
+        private _createLabel(mesh);
+        private _removeLabel(mesh);
         action(): void;
     }
 }

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

@@ -320,6 +320,9 @@ var INSPECTOR;
                 });
             }
         };
+        Inspector.prototype.getActiveTabIndex = function () {
+            return this._tabbar.getActiveTabIndex();
+        };
         return Inspector;
     }());
     INSPECTOR.Inspector = Inspector;
@@ -1002,6 +1005,73 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var INSPECTOR;
 (function (INSPECTOR) {
+    var PhysicsImpostorAdapter = (function (_super) {
+        __extends(PhysicsImpostorAdapter, _super);
+        function PhysicsImpostorAdapter(obj, viewer) {
+            var _this = _super.call(this, obj) || this;
+            _this._isVisible = false;
+            _this._viewer = viewer;
+            return _this;
+        }
+        /** Returns the name displayed in the tree */
+        PhysicsImpostorAdapter.prototype.id = function () {
+            var str = '';
+            var physicsImposter = this._obj;
+            if (physicsImposter && physicsImposter.object) {
+                str = physicsImposter.object.name;
+            } // otherwise nothing displayed        
+            return str;
+        };
+        /** Returns the type of this object - displayed in the tree */
+        PhysicsImpostorAdapter.prototype.type = function () {
+            return INSPECTOR.Helpers.GET_TYPE(this._obj);
+        };
+        /** Returns the list of properties to be displayed for this adapter */
+        PhysicsImpostorAdapter.prototype.getProperties = function () {
+            var propertiesLines = [];
+            for (var _i = 0, _a = INSPECTOR.PROPERTIES['PhysicsImpostor'].properties; _i < _a.length; _i++) {
+                var dirty = _a[_i];
+                var infos = new INSPECTOR.Property(dirty, this._obj);
+                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
+            }
+            return propertiesLines;
+        };
+        PhysicsImpostorAdapter.prototype.getTools = function () {
+            var tools = [];
+            tools.push(new INSPECTOR.Checkbox(this));
+            return tools;
+        };
+        PhysicsImpostorAdapter.prototype.setVisible = function (b) {
+            this._isVisible = b;
+            if (b) {
+                this._viewer.showImpostor(this._obj);
+            }
+            else {
+                this._viewer.hideImpostor(this._obj);
+            }
+        };
+        PhysicsImpostorAdapter.prototype.isVisible = function () {
+            return this._isVisible;
+        };
+        return PhysicsImpostorAdapter;
+    }(INSPECTOR.Adapter));
+    INSPECTOR.PhysicsImpostorAdapter = PhysicsImpostorAdapter;
+})(INSPECTOR || (INSPECTOR = {}));
+
+//# sourceMappingURL=PhysicsImpostorAdapter.js.map
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var INSPECTOR;
+(function (INSPECTOR) {
     var GUIAdapter = (function (_super) {
         __extends(GUIAdapter, _super);
         function GUIAdapter(obj) {
@@ -1482,9 +1552,9 @@ var INSPECTOR;
             this._obj.computeWorldMatrix();
             var m = this._obj.getWorldMatrix();
             // Axis
-            var x = new BABYLON.Vector3(8, 0, 0);
-            var y = new BABYLON.Vector3(0, 8, 0);
-            var z = new BABYLON.Vector3(0, 0, 8);
+            var x = new BABYLON.Vector3(8 / this._obj.scaling.x, 0, 0);
+            var y = new BABYLON.Vector3(0, 8 / this._obj.scaling.y, 0);
+            var z = new BABYLON.Vector3(0, 0, 8 / this._obj.scaling.z);
             // Draw an axis of the given color
             var _drawAxis = function (color, start, end) {
                 var axis = BABYLON.Mesh.CreateLines("###axis###", [
@@ -1527,73 +1597,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var INSPECTOR;
 (function (INSPECTOR) {
-    var PhysicsImpostorAdapter = (function (_super) {
-        __extends(PhysicsImpostorAdapter, _super);
-        function PhysicsImpostorAdapter(obj, viewer) {
-            var _this = _super.call(this, obj) || this;
-            _this._isVisible = false;
-            _this._viewer = viewer;
-            return _this;
-        }
-        /** Returns the name displayed in the tree */
-        PhysicsImpostorAdapter.prototype.id = function () {
-            var str = '';
-            var physicsImposter = this._obj;
-            if (physicsImposter && physicsImposter.object) {
-                str = physicsImposter.object.name;
-            } // otherwise nothing displayed        
-            return str;
-        };
-        /** Returns the type of this object - displayed in the tree */
-        PhysicsImpostorAdapter.prototype.type = function () {
-            return INSPECTOR.Helpers.GET_TYPE(this._obj);
-        };
-        /** Returns the list of properties to be displayed for this adapter */
-        PhysicsImpostorAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            for (var _i = 0, _a = INSPECTOR.PROPERTIES['PhysicsImpostor'].properties; _i < _a.length; _i++) {
-                var dirty = _a[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
-        };
-        PhysicsImpostorAdapter.prototype.getTools = function () {
-            var tools = [];
-            tools.push(new INSPECTOR.Checkbox(this));
-            return tools;
-        };
-        PhysicsImpostorAdapter.prototype.setVisible = function (b) {
-            this._isVisible = b;
-            if (b) {
-                this._viewer.showImpostor(this._obj);
-            }
-            else {
-                this._viewer.hideImpostor(this._obj);
-            }
-        };
-        PhysicsImpostorAdapter.prototype.isVisible = function () {
-            return this._isVisible;
-        };
-        return PhysicsImpostorAdapter;
-    }(INSPECTOR.Adapter));
-    INSPECTOR.PhysicsImpostorAdapter = PhysicsImpostorAdapter;
-})(INSPECTOR || (INSPECTOR = {}));
-
-//# sourceMappingURL=PhysicsImpostorAdapter.js.map
-
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var INSPECTOR;
-(function (INSPECTOR) {
     var DetailPanel = (function (_super) {
         __extends(DetailPanel, _super);
         function DetailPanel(dr) {
@@ -4171,6 +4174,14 @@ var INSPECTOR;
                 }
             }
         };
+        TabBar.prototype.getActiveTabIndex = function () {
+            for (var i = 0; i < this._tabs.length; i++) {
+                if (this._tabs[i].isActive()) {
+                    return i;
+                }
+            }
+            return 0;
+        };
         Object.defineProperty(TabBar.prototype, "inspector", {
             get: function () {
                 return this._inspector;
@@ -4439,40 +4450,26 @@ var INSPECTOR;
             var _this = _super.call(this, 'fa-tags', parent, inspector, 'Display mesh names on the canvas') || this;
             /** True if label are displayed, false otherwise */
             _this._isDisplayed = false;
-            _this._canvas = null;
+            _this._advancedTexture = null;
             _this._labelInitialized = false;
             _this._scene = null;
-            _this._canvas2DLoaded = false;
-            _this._newMeshObserver = null;
-            _this._removedMeshObserver = null;
-            _this._newLightObserver = null;
-            _this._removedLightObserver = null;
-            _this._newCameraObserver = null;
-            _this._removedCameraObserver = null;
+            _this._guiLoaded = false;
             _this._scene = inspector.scene;
             return _this;
         }
         LabelTool.prototype.dispose = function () {
-            if (this._newMeshObserver) {
-                this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
-                this._scene.onMeshRemovedObservable.remove(this._removedMeshObserver);
-                this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
-                this._scene.onLightRemovedObservable.remove(this._removedLightObserver);
-                this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
-                this._scene.onCameraRemovedObservable.remove(this._removedCameraObserver);
-                this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
-            }
-            this._canvas.dispose();
-            this._canvas = null;
-        };
-        LabelTool.prototype._checkC2DLoaded = function () {
-            if (this._canvas2DLoaded === true) {
+            if (this._advancedTexture) {
+                this._advancedTexture.dispose();
+            }
+        };
+        LabelTool.prototype._checkGUILoaded = function () {
+            if (this._guiLoaded === true) {
                 return true;
             }
-            if (BABYLON.Canvas2D) {
-                this._canvas2DLoaded = true;
+            if (BABYLON.GUI) {
+                this._guiLoaded = true;
             }
-            return this._canvas2DLoaded;
+            return this._guiLoaded;
         };
         LabelTool.prototype._initializeLabels = function () {
             var _this = this;
@@ -4480,74 +4477,52 @@ var INSPECTOR;
             if (this._labelInitialized) {
                 return;
             }
-            // Can't initialize them if the Canvas2D lib is not loaded yet
-            if (!this._checkC2DLoaded()) {
+            // Can't initialize them if the GUI lib is not loaded yet
+            if (!this._checkGUILoaded()) {
                 return;
             }
             // Create the canvas that will be used to display the labels
-            this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, { id: "###Label Canvas###" /*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/ });
+            this._advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
             // Create label for all the Meshes, Lights and Cameras
             // Those that will be created/removed after this method is called will be taken care by the event handlers added below
             for (var _i = 0, _a = this._scene.meshes; _i < _a.length; _i++) {
                 var m = _a[_i];
                 this._createLabel(m);
             }
-            for (var _b = 0, _c = this._scene.lights; _b < _c.length; _b++) {
-                var l = _c[_b];
-                this._createLabel(l);
-            }
-            for (var _d = 0, _e = this._scene.cameras; _d < _e.length; _d++) {
-                var c = _e[_d];
-                this._createLabel(c);
-            }
-            // Add handlers for new/removed meshes, camera and lights
-            this._newMeshObserver = this._scene.onNewMeshAddedObservable.add(function (e, s) {
-                _this._createLabel(e);
-            });
-            this._removedMeshObserver = this._scene.onMeshRemovedObservable.add(function (e, s) {
-                _this._removeLabel(e);
+            this._scene.onNewMeshAddedObservable.add(function (m, s) {
+                _this._createLabel(m);
             });
-            this._newLightObserver = this._scene.onNewLightAddedObservable.add(function (e, s) {
-                _this._createLabel(e);
-            });
-            this._removedLightObserver = this._scene.onLightRemovedObservable.add(function (e, s) {
-                _this._removeLabel(e);
-            });
-            this._newCameraObserver = this._scene.onNewCameraAddedObservable.add(function (e, s) {
-                _this._createLabel(e);
-            });
-            this._removedCameraObserver = this._scene.onCameraRemovedObservable.add(function (e, s) {
-                _this._removeLabel(e);
+            this._scene.onMeshRemovedObservable.add(function (m, s) {
+                _this._removeLabel(m);
             });
             this._labelInitialized = true;
         };
-        LabelTool.prototype._createLabel = function (node) {
+        LabelTool.prototype._createLabel = function (mesh) {
             // Don't create label for "system nodes" (starting and ending with ###)
-            var name = node.name;
+            var name = mesh.name;
             if (INSPECTOR.Helpers.IsSystemName(name)) {
                 return;
             }
-            var labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: "Label of " + node.name, trackNode: node, origin: BABYLON.Vector2.Zero(),
-                children: [
-                    new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
-                            new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
-                        ]
-                    })
-                ] });
-            var r = labelGroup.children[0];
-            var t = r.children[0];
-            var ts = t.textSize.width;
-            r.width = ts + 20;
-            r.height = t.textSize.height + 12;
-            labelGroup.addExternalData("owner", node);
-            return labelGroup;
-        };
-        LabelTool.prototype._removeLabel = function (node) {
-            for (var _i = 0, _a = this._canvas.children; _i < _a.length; _i++) {
+            if (mesh) {
+                var rect1 = new BABYLON.GUI.Rectangle();
+                rect1.width = 4 + 10 * name.length + "px";
+                rect1.height = "22px";
+                rect1.background = "rgba(0,0,0,0.6)";
+                rect1.color = "black";
+                this._advancedTexture.addControl(rect1);
+                var label = new BABYLON.GUI.TextBlock();
+                label.text = name;
+                label.fontSize = 12;
+                rect1.addControl(label);
+                rect1.linkWithMesh(mesh);
+            }
+        };
+        LabelTool.prototype._removeLabel = function (mesh) {
+            for (var _i = 0, _a = this._advancedTexture._rootContainer.children; _i < _a.length; _i++) {
                 var g = _a[_i];
-                var ed = g.getExternalData("owner");
-                if (ed === node) {
-                    g.dispose();
+                var ed = g._linkedMesh;
+                if (ed === mesh) {
+                    this._advancedTexture.removeControl(g);
                     break;
                 }
             }
@@ -4555,7 +4530,7 @@ var INSPECTOR;
         // Action : Display/hide mesh names on the canvas
         LabelTool.prototype.action = function () {
             // Don't toggle if the script is not loaded
-            if (!this._checkC2DLoaded()) {
+            if (!this._checkGUILoaded()) {
                 return;
             }
             // Toggle the label display state
@@ -4563,10 +4538,10 @@ var INSPECTOR;
             // Check if we have to display the labels
             if (this._isDisplayed) {
                 this._initializeLabels();
-                this._canvas.levelVisible = true;
+                this._advancedTexture._rootContainer.isVisible = true;
             }
             else {
-                this._canvas.levelVisible = false;
+                this._advancedTexture._rootContainer.isVisible = false;
             }
         };
         return LabelTool;

dist/preview release/materialsLibrary/babylon.customMaterial.js

@@ -105,14 +105,9 @@ varying vec3 vDirectionW;\n\
 #endif\n\
 #include<reflectionFunction>\n\
 #endif\n\
-#ifdef CAMERACOLORGRADING\n\
-#include<colorGradingDefinition> \n\
-#include<colorGrading>\n\
-#endif\n\
-#ifdef CAMERACOLORCURVES\n\
-#include<colorCurvesDefinition>\n\
-#include<colorCurves>\n\
-#endif\n\
+#include<imageProcessingDeclaration>\n\
+#include<imageProcessingFunctions>\n\
+\n\
 #include<bumpFragmentFunctions>\n\
 #include<clipPlaneFragmentDeclaration>\n\
 #include<logDepthDeclaration>\n\
@@ -317,12 +312,18 @@ color.rgb+=lightmapColor;\n\
 #endif\n\
 #include<logDepthFragment>\n\
 #include<fogFragment>\n\
-#ifdef CAMERACOLORGRADING\n\
-color=colorGrades(color);\n\
-#endif\n\
-#ifdef CAMERACOLORCURVES\n\
-color.rgb=applyColorCurves(color.rgb);\n\
+\n\
+// Apply image processing if relevant. As this applies in linear space, \n\
+// We first move from gamma to linear.\n\
+#ifdef IMAGEPROCESSINGPOSTPROCESS\n\
+	color.rgb = toLinearSpace(color.rgb);\n\
+#else\n\
+	#ifdef IMAGEPROCESSING\n\
+		color.rgb = toLinearSpace(color.rgb);\n\
+		color = applyImageProcessing(color);\n\
+	#endif\n\
 #endif\n\
+\n\
 #[Fragment_Before_FragColor]\n\
 gl_FragColor=color;\n\
 }";

dist/preview release/what's new.md

@@ -23,7 +23,8 @@
  - New `Cell Shading` material added into `Materials Library` [Demo](http://www.babylonjs.com/Demos/CellShading/) ([Julien Moreau-Mathis](https://github.com/julien-moreau))
  - New kernel based blur. [Demo](https://www.babylonjs-playground.com/#FBH4J7#1) ([deltakosh](https://github.com/deltakosh))
  - New highlights postprocess ([deltakosh](https://github.com/deltakosh))
- - New DefaultRenderingPipeline to enable image processing effect. [Demo](https://www.babylonjs-playground.com/#Y3C0HQ) ([deltakosh](https://github.com/deltakosh))
+ - New DefaultRenderingPipeline to enable image processing effect. [Demo](https://www.babylonjs-playground.com/#5XB8YT#1) ([deltakosh](https://github.com/deltakosh))
+ - New image processing postprocess. [Doc here](http://doc.babylonjs.com/tutorials/how_to_use_postprocesses#imageprocessing) ([deltakosh](https://github.com/deltakosh))
  - Spector.js New WebGL debugger: [more info here](http://spector.babylonjs.com) ([Sebastien Vandenberghe](https://github.com/sebavan))
  - New blur mode for mirrors. [Demo](https://www.babylonjs-playground.com/#9I6NX1) ([deltakosh](https://github.com/deltakosh)) 
 

gui/src/controls/textBlock.ts

@@ -46,7 +46,7 @@ module BABYLON.GUI {
 
             this._textHorizontalAlignment = value;
             this._markAsDirty();
-        } 
+        }
 
         public get textVerticalAlignment(): number {
             return this._textVerticalAlignment;
@@ -59,7 +59,7 @@ module BABYLON.GUI {
 
             this._textVerticalAlignment = value;
             this._markAsDirty();
-        } 
+        }
 
         constructor(public name?: string, text: string = "") {
             super(name);
@@ -69,7 +69,7 @@ module BABYLON.GUI {
 
         protected _getTypeName(): string {
             return "TextBlock";
-        }              
+        }
 
         private _drawText(text: string, textWidth: number, y: number, context: CanvasRenderingContext2D): void {
             var width = this._currentMeasure.width;
@@ -87,14 +87,14 @@ module BABYLON.GUI {
             }
 
             context.fillText(text, this._currentMeasure.left + x, y);
-        }      
+        }
 
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             context.save();
 
             this._applyStates(context);
 
-            if (this._processMeasures(parentMeasure, context)) {            
+            if (this._processMeasures(parentMeasure, context)) {
                 // Render lines
                 this._renderLines(context);
             }
@@ -103,38 +103,50 @@ module BABYLON.GUI {
 
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             this._lines = [];
+            var _lines = this.text.split("\n");
 
             if (this._textWrapping) {
-                var words = this.text.split(' ');
-                var line = '';
-
-                var width = this._currentMeasure.width;
-                var lineWidth = 0;
-
-                for(var n = 0; n < words.length; n++) {
-                    var testLine = n > 0 ? line + " " + words[n] : words[0];
-                    var metrics = context.measureText(testLine);
-                    var testWidth = metrics.width;
-                    if (testWidth > width && n > 0) {
-                        this._lines.push({text: line, width: lineWidth});
-                        line = words[n];
-                        lineWidth = context.measureText(line).width;
-                    }
-                    else {
-                        lineWidth = testWidth;
-                        line = testLine;
-                    }
+                for(var _line of _lines) {
+                    this._lines.push(this._parseLineWithTextWrapping(_line, context));
                 }
-                this._lines.push({text: line, width: lineWidth});
             } else {
-                this._lines.push({text: this.text, width: context.measureText(this.text).width});
+                for(var _line of _lines) {
+                    this._lines.push(this._parseLine(_line, context));
+                }
             }
         }
 
+        protected _parseLine(line: string='', context: CanvasRenderingContext2D): object {
+          return {text: line, width: context.measureText(line).width};
+        }
+
+        protected _parseLineWithTextWrapping(line: string='', context: CanvasRenderingContext2D): object {
+          var words = line.split(' ');
+          var width = this._currentMeasure.width;
+          var lineWidth = 0;
+
+          for(var n = 0; n < words.length; n++) {
+              var testLine = n > 0 ? line + " " + words[n] : words[0];
+              var metrics = context.measureText(testLine);
+              var testWidth = metrics.width;
+              if (testWidth > width && n > 0) {
+                  this._lines.push({text: line, width: lineWidth});
+                  line = words[n];
+                  lineWidth = context.measureText(line).width;
+              }
+              else {
+                  lineWidth = testWidth;
+                  line = testLine;
+              }
+          }
+
+          return {text: line, width: lineWidth};
+        }
+
         protected _renderLines(context: CanvasRenderingContext2D): void {
             var width = this._currentMeasure.width;
             var height = this._currentMeasure.height;
-            
+
             if (!this._fontOffset) {
                 this._fontOffset = Control._GetFontOffset(context.font);
             }
@@ -156,7 +168,7 @@ module BABYLON.GUI {
             for (var line of this._lines) {
                 this._drawText(line.text, line.width, rootY, context);
                 rootY += this._fontOffset.height;
-            }       
+            }
         }
-    }    
-}
+    }
+}

inspector/src/Inspector.ts

@@ -390,5 +390,9 @@ module INSPECTOR {
                 });
             }
         }
+
+        public getActiveTabIndex():number {
+           return this._tabbar.getActiveTabIndex();
+        }
     }
 }

inspector/src/adapters/MeshAdapter.ts

@@ -92,9 +92,9 @@ module INSPECTOR {
             var m = this._obj.getWorldMatrix();
 
             // Axis
-            var x = new BABYLON.Vector3(8, 0, 0);
-            var y = new BABYLON.Vector3(0, 8, 0);
-            var z = new BABYLON.Vector3(0, 0, 8);
+            var x = new BABYLON.Vector3(8 / (this._obj as BABYLON.AbstractMesh).scaling.x, 0, 0);
+            var y = new BABYLON.Vector3(0, 8 / (this._obj as BABYLON.AbstractMesh).scaling.y, 0);
+            var z = new BABYLON.Vector3(0, 0, 8 / (this._obj as BABYLON.AbstractMesh).scaling.z);
             
             // Draw an axis of the given color
             let _drawAxis = (color, start, end): BABYLON.LinesMesh => {

inspector/src/tabs/TabBar.ts

@@ -145,6 +145,15 @@ module INSPECTOR {
             }
         }
 
+        public getActiveTabIndex(): number {
+            for (let i = 0; i < this._tabs.length; i++) {
+                if(this._tabs[i].isActive()){
+                    return i;
+                }
+            }
+            return 0;
+        }
+
         public get inspector(): Inspector {
             return this._inspector;
         }

inspector/src/tools/LabelTool.ts

@@ -4,17 +4,10 @@ module INSPECTOR {
 
         /** True if label are displayed, false otherwise */
         private _isDisplayed         : boolean            = false;
-        private _canvas              : BABYLON.ScreenSpaceCanvas2D = null;
+        private _advancedTexture     : BABYLON.GUI.AdvancedDynamicTexture = null;
         private _labelInitialized    : boolean = false;
         private _scene               : BABYLON.Scene = null;
-        private _canvas2DLoaded      : boolean = false;
-
-        private _newMeshObserver       : BABYLON.Observer<BABYLON.AbstractMesh> = null;
-        private _removedMeshObserver   : BABYLON.Observer<BABYLON.AbstractMesh> = null;
-        private _newLightObserver      : BABYLON.Observer<BABYLON.Light> = null;
-        private _removedLightObserver  : BABYLON.Observer<BABYLON.Light> = null;
-        private _newCameraObserver     : BABYLON.Observer<BABYLON.Camera> = null;
-        private _removedCameraObserver : BABYLON.Observer<BABYLON.Camera> = null;
+        private _guiLoaded      : boolean = false;
         
         constructor(parent:HTMLElement, inspector:Inspector) {
             super('fa-tags', parent, inspector, 'Display mesh names on the canvas');
@@ -23,31 +16,20 @@ module INSPECTOR {
         }
 
         public dispose() {
-            if (this._newMeshObserver) {
-                this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
-                this._scene.onMeshRemovedObservable.remove (this._removedMeshObserver);
 
-                this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
-                this._scene.onLightRemovedObservable.remove (this._removedLightObserver);
-
-                this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
-                this._scene.onCameraRemovedObservable.remove (this._removedCameraObserver);
-    
-                this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
+            if(this._advancedTexture){
+                this._advancedTexture.dispose();
             }
-
-            this._canvas.dispose();
-            this._canvas = null;
         }
 
-        private _checkC2DLoaded(): boolean {
-            if (this._canvas2DLoaded === true) {
+        private _checkGUILoaded(): boolean {
+            if (this._guiLoaded === true) {
                 return true;
             }
-            if (BABYLON.Canvas2D) {
-                this._canvas2DLoaded = true;
+            if (BABYLON.GUI) {
+                this._guiLoaded = true;
             }
-            return this._canvas2DLoaded;
+            return this._guiLoaded;
         }
 
         private _initializeLabels() {
@@ -56,13 +38,13 @@ module INSPECTOR {
                 return;
             }
 
-            // Can't initialize them if the Canvas2D lib is not loaded yet
-            if (!this._checkC2DLoaded()) {
+            // Can't initialize them if the GUI lib is not loaded yet
+            if (!this._checkGUILoaded()) {
                 return;
             }
 
             // Create the canvas that will be used to display the labels
-            this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, {id: "###Label Canvas###"/*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/});
+            this._advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
 
             // Create label for all the Meshes, Lights and Cameras
             // Those that will be created/removed after this method is called will be taken care by the event handlers added below
@@ -70,77 +52,48 @@ module INSPECTOR {
             for (let m of this._scene.meshes) {
                 this._createLabel(m);
             }
-
-            for (let l of this._scene.lights) {
-                this._createLabel(l);
-            }
-
-            for (let c of this._scene.cameras) {
-                this._createLabel(c);
-            }
-
-            // Add handlers for new/removed meshes, camera and lights
-
-            this._newMeshObserver = this._scene.onNewMeshAddedObservable.add((e, s) => {
-                this._createLabel(e);
-            });
-
-            this._removedMeshObserver = this._scene.onMeshRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
-            });
-
-            this._newLightObserver = this._scene.onNewLightAddedObservable.add((e, s) => {
-                this._createLabel(e);
-            });
-
-            this._removedLightObserver = this._scene.onLightRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
+            
+            this._scene.onNewMeshAddedObservable.add((m, s) => {
+                this._createLabel(m);
             });
 
-            this._newCameraObserver = this._scene.onNewCameraAddedObservable.add((e, s) => {
-                this._createLabel(e);
+            this._scene.onMeshRemovedObservable.add((m, s) => {
+                this._removeLabel(m);
             });
 
-            this._removedCameraObserver = this._scene.onCameraRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
-            });
-            
             this._labelInitialized = true;
         }
 
-        private _createLabel(node: BABYLON.Node): BABYLON.Group2D {
+        private _createLabel(mesh: BABYLON.AbstractMesh){
             // Don't create label for "system nodes" (starting and ending with ###)
-            let name = node.name;
+            let name = mesh.name;
 
             if (Helpers.IsSystemName(name)) {
                 return;
             }
 
-            let labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: `Label of ${node.name}`, trackNode: node, origin: BABYLON.Vector2.Zero(), 
-            children: [
-                    new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
-                            new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
-                        ]
-                    })
-                ]}
-            );
+            if(mesh){
+                let rect1 = new BABYLON.GUI.Rectangle();
+                rect1.width = 4 + 10 * name.length + "px";
+                rect1.height = "22px";
+                rect1.background = "rgba(0,0,0,0.6)";
+                rect1.color = "black";
+                this._advancedTexture.addControl(rect1);
 
-            let r = labelGroup.children[0] as BABYLON.Rectangle2D;
-            let t = r.children[0] as BABYLON.Text2D;
-            let ts = t.textSize.width;
-            r.width = ts + 20;
-            r.height = t.textSize.height + 12;
+                let label = new BABYLON.GUI.TextBlock();
+                label.text = name;
+                label.fontSize = 12;
+                rect1.addControl(label);
 
-            labelGroup.addExternalData("owner", node);
-
-            return labelGroup;
+                rect1.linkWithMesh(mesh); 
+            }
         }
 
-        private _removeLabel(node: BABYLON.Node) {
-            for (let g of this._canvas.children) {
-                let ed = g.getExternalData("owner");
-                if (ed === node) {
-                    g.dispose();
+        private _removeLabel(mesh: BABYLON.AbstractMesh) {
+            for (let g of this._advancedTexture._rootContainer.children) {
+                let ed = g._linkedMesh;
+                if (ed === mesh) {
+                    this._advancedTexture.removeControl(g);
                     break;
                 }
             }
@@ -149,7 +102,7 @@ module INSPECTOR {
         // Action : Display/hide mesh names on the canvas
         public action() {
             // Don't toggle if the script is not loaded
-            if (!this._checkC2DLoaded()) {
+            if (!this._checkGUILoaded()) {
                 return;
             }
 
@@ -159,12 +112,12 @@ module INSPECTOR {
             // Check if we have to display the labels
             if (this._isDisplayed) {
                 this._initializeLabels();
-                this._canvas.levelVisible = true;
+                this._advancedTexture._rootContainer.isVisible = true;
             } 
             
             // Or to hide them
             else {
-                this._canvas.levelVisible = false;
+                this._advancedTexture._rootContainer.isVisible = false;
             }
         }
     }

inspector/test/index.js

@@ -213,6 +213,8 @@ var Test = (function () {
             cubes.push(b);
         }
 
+        scene.getMeshByName("Box #6").scaling.x = 2;
+
         //Other meshes
         var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 1}, scene);
 
@@ -228,6 +230,13 @@ var Test = (function () {
         box4.position.x = 1.5;
         box4.parent = box3;
 
+        window.addEventListener("keydown", function (evt) {
+            sphere1.dispose();
+            var sphere7 = BABYLON.Mesh.CreateSphere("Sphere7", 10.0, 9.0, scene);
+            sphere7.position.x = 40;
+        });
+
+
         // gui
         var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
 

materialsLibrary/src/custom/babylon.customMaterial.ts

@@ -124,14 +124,9 @@ varying vec3 vDirectionW;\n\
 #endif\n\
 #include<reflectionFunction>\n\
 #endif\n\
-#ifdef CAMERACOLORGRADING\n\
-#include<colorGradingDefinition> \n\
-#include<colorGrading>\n\
-#endif\n\
-#ifdef CAMERACOLORCURVES\n\
-#include<colorCurvesDefinition>\n\
-#include<colorCurves>\n\
-#endif\n\
+#include<imageProcessingDeclaration>\n\
+#include<imageProcessingFunctions>\n\
+\n\
 #include<bumpFragmentFunctions>\n\
 #include<clipPlaneFragmentDeclaration>\n\
 #include<logDepthDeclaration>\n\
@@ -336,12 +331,18 @@ color.rgb+=lightmapColor;\n\
 #endif\n\
 #include<logDepthFragment>\n\
 #include<fogFragment>\n\
-#ifdef CAMERACOLORGRADING\n\
-color=colorGrades(color);\n\
-#endif\n\
-#ifdef CAMERACOLORCURVES\n\
-color.rgb=applyColorCurves(color.rgb);\n\
+\n\
+// Apply image processing if relevant. As this applies in linear space, \n\
+// We first move from gamma to linear.\n\
+#ifdef IMAGEPROCESSINGPOSTPROCESS\n\
+	color.rgb = toLinearSpace(color.rgb);\n\
+#else\n\
+	#ifdef IMAGEPROCESSING\n\
+		color.rgb = toLinearSpace(color.rgb);\n\
+		color = applyImageProcessing(color);\n\
+	#endif\n\
 #endif\n\
+\n\
 #[Fragment_Before_FragColor]\n\
 gl_FragColor=color;\n\
 }";

src/Animations/babylon.animation.ts

@@ -653,7 +653,12 @@
             this.setValue(currentValue);
             // Check events
             for (var index = 0; index < this._events.length; index++) {
-                if (currentFrame >= this._events[index].frame) {
+                // Make sure current frame has passed event frame and that event frame is within the current range
+                // Also, handle both forward and reverse animations
+                if (
+                    (range > 0 && currentFrame >= this._events[index].frame && this._events[index].frame >= from) ||
+                    (range < 0 && currentFrame <= this._events[index].frame && this._events[index].frame <= from)
+                ){
                     var event = this._events[index];
                     if (!event.isDone) {
                         // If event should be done only once, remove it.

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -398,7 +398,7 @@
 
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(conf => {
-                this._markAllSubMeshesAsTexturesDirty();
+                this._markAllSubMeshesAsImageProcessingDirty();
             });
         }
 
@@ -729,7 +729,9 @@
                 defines.PREMULTIPLYALPHA = this._premultiplyAlpha;
                 defines.ALPHABLEND = this.needAlphaBlending();
                 defines.ALPHAFRESNEL = this._useAlphaFresnel;
+            }
 
+            if (defines._areImageProcessingDirty) {
                 if (!this._imageProcessingConfiguration.isReady()) {
                     return false;
                 }

src/Materials/PBR/babylon.pbrMetallicRoughnessMaterial.ts

@@ -85,6 +85,10 @@
             return activeTextures;
         }
 
+        public clone(name: string): PBRMetallicRoughnessMaterial {
+            return SerializationHelper.Clone(() => new PBRMetallicRoughnessMaterial(name, this.getScene()), this);
+        }
+
         /**
          * Serialize the material to a parsable JSON object.
          */

src/Materials/PBR/babylon.pbrSpecularGlossinessMaterial.ts

@@ -78,6 +78,10 @@
             return activeTextures;
         }
 
+        public clone(name: string): PBRSpecularGlossinessMaterial {
+            return SerializationHelper.Clone(() => new PBRSpecularGlossinessMaterial(name, this.getScene()), this);
+        }
+
         /**
          * Serialize the material to a parsable JSON object.
          */

src/Materials/Textures/babylon.baseTexture.ts

@@ -213,7 +213,15 @@
             return null;
         }
 
-        public readPixels(faceIndex = 0): Uint8Array {
+        public get textureType(): number {
+            if (!this._texture) {
+                return Engine.TEXTURETYPE_UNSIGNED_INT;
+            }
+
+            return (this._texture.type !== undefined) ? this._texture.type : Engine.TEXTURETYPE_UNSIGNED_INT;
+        }
+
+        public readPixels(faceIndex = 0, lodIndex = 0): ArrayBufferView {
             if (!this._texture) {
                 return null;
             }
@@ -222,10 +230,10 @@
             var engine = this.getScene().getEngine();
 
             if (this._texture.isCube) {
-                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex);
+                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex, lodIndex);
             }
 
-            return engine._readTexturePixels(this._texture, size.width, size.height);
+            return engine._readTexturePixels(this._texture, size.width, size.height, -1, lodIndex);
         }
 
         public releaseInternalTexture(): void {

src/Materials/babylon.material.ts

@@ -9,6 +9,7 @@
         public _areTexturesDirty = true;
         public _areFresnelDirty = true;
         public _areMiscDirty = true;    
+        public _areImageProcessingDirty = true;  
 
         public _normals = false;
         public _uvs = false;
@@ -27,6 +28,7 @@
             this._areFresnelDirty = false;
             this._areLightsDirty = false;
             this._areMiscDirty = false;
+            this._areImageProcessingDirty = false;
         }
 
         public markAsUnprocessed() {
@@ -39,9 +41,15 @@
             this._areLightsDirty = true;
             this._areFresnelDirty = true;
             this._areMiscDirty = true;
+            this._areImageProcessingDirty = true;
             this._isDirty = true;
         }
 
+        public markAsImageProcessingDirty() {
+            this._areImageProcessingDirty = true;
+            this._isDirty = true;
+        }        
+
         public markAsLightDirty() {
             this._areLightsDirty = true;
             this._isDirty = true;
@@ -575,6 +583,10 @@
             }
         }
 
+        protected _markAllSubMeshesAsImageProcessingDirty() {
+            this._markAllSubMeshesAsDirty(defines => defines.markAsImageProcessingDirty());
+        }        
+
         protected _markAllSubMeshesAsTexturesDirty() {
             this._markAllSubMeshesAsDirty(defines => defines.markAsTexturesDirty());
         }

src/Materials/babylon.standardMaterial.ts

@@ -334,7 +334,7 @@ module BABYLON {
 
             // Attaches observer.
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(conf => {
-                this._markAllSubMeshesAsTexturesDirty();
+                this._markAllSubMeshesAsImageProcessingDirty();
             });
         }
 
@@ -671,12 +671,6 @@ module BABYLON {
                     defines.REFRACTION = false;
                 }
 
-                if (!this.imageProcessingConfiguration.isReady()) {
-                    return false;
-                }
-
-                this.imageProcessingConfiguration.prepareDefines(defines);
-
                 defines.ALPHAFROMDIFFUSE = this._shouldUseAlphaFromDiffuseTexture();
 
                 defines.EMISSIVEASILLUMINATION = this._useEmissiveAsIllumination;
@@ -686,6 +680,14 @@ module BABYLON {
                 defines.SPECULAROVERALPHA = this._useSpecularOverAlpha;
             }
 
+            if (defines._areImageProcessingDirty) {
+                if (!this._imageProcessingConfiguration.isReady()) {
+                    return false;
+                }
+
+                this._imageProcessingConfiguration.prepareDefines(defines);
+            }
+
             if (defines._areFresnelDirty) {
                 if (StandardMaterial.FresnelEnabled) {
                     // Fresnel

src/PostProcess/RenderPipeline/Pipelines/babylon.ssao2RenderingPipeline.ts

@@ -315,8 +315,8 @@
                 effect.setFloat("base", this.base);
                 effect.setFloat("near", this._scene.activeCamera.minZ);
                 effect.setFloat("far", this._scene.activeCamera.maxZ);
-                effect.setFloat("xViewport", Math.tan(this._scene.activeCamera.fov / 2) * this._scene.activeCamera.minZ * this._scene.getEngine().getAspectRatio(this._scene.activeCamera, true));
-                effect.setFloat("yViewport", Math.tan(this._scene.activeCamera.fov / 2) * this._scene.activeCamera.minZ );
+                effect.setFloat("xViewport", Math.tan(this._scene.activeCamera.fov / 2) * this._scene.getEngine().getAspectRatio(this._scene.activeCamera, true));
+                effect.setFloat("yViewport", Math.tan(this._scene.activeCamera.fov / 2) );
                 effect.setMatrix("projection", this._scene.getProjectionMatrix());
 
                 effect.setTexture("textureSampler", this._depthTexture);

src/Tools/babylon.dds.ts

@@ -52,6 +52,11 @@
     var FOURCC_DXT1 = FourCCToInt32("DXT1");
     var FOURCC_DXT3 = FourCCToInt32("DXT3");
     var FOURCC_DXT5 = FourCCToInt32("DXT5");
+    var FOURCC_DX10 = FourCCToInt32("DX10");
+    var FOURCC_D3DFMT_R16G16B16A16F = 113;
+    var FOURCC_D3DFMT_R32G32B32A32F = 116;
+
+    var DXGI_FORMAT_R16G16B16A16_FLOAT = 10;
 
     var headerLengthInt = 31; // The header length in 32 bit ints
 
@@ -74,6 +79,9 @@
     var off_AMask = 26;
     var off_caps1 = 27;
     var off_caps2 = 28;
+    var off_caps3 = 29;
+    var off_caps4 = 30;
+    var off_dxgiFormat = 32
 
     export interface DDSInfo {
         width: number;
@@ -82,18 +90,42 @@
         isFourCC: boolean;
         isRGB: boolean;
         isLuminance: boolean;
-        isCube: boolean
+        isCube: boolean;
+        isCompressed: boolean;
+        dxgiFormat: number;
+        textureType: number;
     };
 
     export class DDSTools {
+        public static StoreLODInAlphaChannel = false;
+
         public static GetDDSInfo(arrayBuffer: any): DDSInfo {
             var header = new Int32Array(arrayBuffer, 0, headerLengthInt);
+            var extendedHeader = new Int32Array(arrayBuffer, 0, headerLengthInt + 4);
 
             var mipmapCount = 1;
             if (header[off_flags] & DDSD_MIPMAPCOUNT) {
                 mipmapCount = Math.max(1, header[off_mipmapCount]);
             }
 
+            var fourCC = header[off_pfFourCC];
+            var dxgiFormat = (fourCC === FOURCC_DX10) ? extendedHeader[off_dxgiFormat] : 0;
+            var textureType = Engine.TEXTURETYPE_UNSIGNED_INT;
+
+            switch (fourCC) {
+                case FOURCC_D3DFMT_R16G16B16A16F:  
+                    textureType = Engine.TEXTURETYPE_HALF_FLOAT;                           
+                    break;
+                case FOURCC_D3DFMT_R32G32B32A32F:
+                    textureType = Engine.TEXTURETYPE_FLOAT;
+                    break;                    
+                case FOURCC_DX10:
+                    if (dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                        textureType = Engine.TEXTURETYPE_HALF_FLOAT;
+                        break;
+                    }
+            }
+  
             return {
                 width: header[off_width],
                 height: header[off_height],
@@ -101,20 +133,111 @@
                 isFourCC: (header[off_pfFlags] & DDPF_FOURCC) === DDPF_FOURCC,
                 isRGB: (header[off_pfFlags] & DDPF_RGB) === DDPF_RGB,
                 isLuminance: (header[off_pfFlags] & DDPF_LUMINANCE) === DDPF_LUMINANCE,
-                isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP
+                isCube: (header[off_caps2] & DDSCAPS2_CUBEMAP) === DDSCAPS2_CUBEMAP,
+                isCompressed: (fourCC === FOURCC_DXT1 || fourCC === FOURCC_DXT3 || FOURCC_DXT1 === FOURCC_DXT5),
+                dxgiFormat: dxgiFormat,
+                textureType: textureType
             };
         }
 
+        // ref: http://stackoverflow.com/questions/32633585/how-do-you-convert-to-half-floats-in-javascript
+        private static _FloatView: Float32Array;
+        private static _Int32View: Int32Array;
+        private static _ToHalfFloat(value: number): number {
+            if (!DDSTools._FloatView) {
+                DDSTools._FloatView = new Float32Array(1);
+                DDSTools._Int32View = new Int32Array(DDSTools._FloatView.buffer);
+            }
+            
+            DDSTools._FloatView[0] = value;
+            var x = DDSTools._Int32View[0];
+
+            var bits = (x >> 16) & 0x8000; /* Get the sign */
+            var m = (x >> 12) & 0x07ff; /* Keep one extra bit for rounding */
+            var e = (x >> 23) & 0xff; /* Using int is faster here */
+
+            /* If zero, or denormal, or exponent underflows too much for a denormal
+            * half, return signed zero. */
+            if (e < 103) {
+                return bits;
+            }
+
+            /* If NaN, return NaN. If Inf or exponent overflow, return Inf. */
+            if (e > 142) {
+                bits |= 0x7c00;
+                /* If exponent was 0xff and one mantissa bit was set, it means NaN,
+                * not Inf, so make sure we set one mantissa bit too. */
+                bits |= ((e == 255) ? 0 : 1) && (x & 0x007fffff);
+                return bits;
+            }
+
+            /* If exponent underflows but not too much, return a denormal */
+            if (e < 113) {
+                m |= 0x0800;
+                /* Extra rounding may overflow and set mantissa to 0 and exponent
+                * to 1, which is OK. */
+                bits |= (m >> (114 - e)) + ((m >> (113 - e)) & 1);
+                return bits;
+            }
+
+            bits |= ((e - 112) << 10) | (m >> 1);
+            bits += m & 1;
+            return bits;
+        }
+    
+        private static GetHalfFloatRGBAArrayBuffer(width: number, height: number, dataOffset: number, dataLength: number, arrayBuffer: ArrayBuffer, lod: number): Uint16Array {   
+            if (DDSTools.StoreLODInAlphaChannel) {
+                var destArray = new Uint16Array(dataLength);
+                var srcData = new Uint16Array(arrayBuffer, dataOffset);
+                var index = 0;
+                for (var y = 0; y < height; y++) {
+                    for (var x = 0; x < width; x++) {
+                        var srcPos = (x + y * width) * 4;
+                        destArray[index] = srcData[srcPos];
+                        destArray[index + 1] = srcData[srcPos + 1];
+                        destArray[index + 2] = srcData[srcPos + 2];
+                        destArray[index + 3] = DDSTools._ToHalfFloat(lod)
+                        index += 4;
+                    }
+                }
+
+                return destArray;
+            }
+
+            return new Uint16Array(arrayBuffer, dataOffset, dataLength);
+        }           
+
+        private static GetFloatRGBAArrayBuffer(width: number, height: number, dataOffset: number, dataLength: number, arrayBuffer: ArrayBuffer, lod: number): Float32Array {
+            if (DDSTools.StoreLODInAlphaChannel) {
+                var destArray = new Float32Array(dataLength);
+                var srcData = new Float32Array(arrayBuffer, dataOffset);
+                var index = 0;
+                for (var y = 0; y < height; y++) {
+                    for (var x = 0; x < width; x++) {
+                        var srcPos = (x + y * width) * 4;
+                        destArray[index] = srcData[srcPos];
+                        destArray[index + 1] = srcData[srcPos + 1];
+                        destArray[index + 2] = srcData[srcPos + 2];
+                        destArray[index + 3] = lod;
+                        index += 4;
+                    }
+                }
+
+                return destArray;
+            }            
+            return new Float32Array(arrayBuffer, dataOffset, dataLength);
+        }        
+
         private static GetRGBAArrayBuffer(width: number, height: number, dataOffset: number, dataLength: number, arrayBuffer: ArrayBuffer): Uint8Array {
             var byteArray = new Uint8Array(dataLength);
-            var srcData = new Uint8Array(arrayBuffer);
+            var srcData = new Uint8Array(arrayBuffer, dataOffset);
             var index = 0;
-            for (var y = height - 1; y >= 0; y--) {
+            for (var y = 0; y < height; y++) {
                 for (var x = 0; x < width; x++) {
-                    var srcPos = dataOffset + (x + y * width) * 4;
-                    byteArray[index + 2] = srcData[srcPos];
-                    byteArray[index + 1] = srcData[srcPos + 1];
+                    var srcPos = (x + y * width) * 4;
                     byteArray[index] = srcData[srcPos + 2];
+                    byteArray[index + 1] = srcData[srcPos + 1];
+                    byteArray[index + 2] = srcData[srcPos];
                     byteArray[index + 3] = srcData[srcPos + 3];
                     index += 4;
                 }
@@ -125,14 +248,14 @@
 
         private static GetRGBArrayBuffer(width: number, height: number, dataOffset:number, dataLength: number, arrayBuffer: ArrayBuffer): Uint8Array {            
             var byteArray = new Uint8Array(dataLength);
-            var srcData = new Uint8Array(arrayBuffer);
+            var srcData = new Uint8Array(arrayBuffer, dataOffset);
             var index = 0;
-            for (var y = height - 1; y >= 0; y--) {
+            for (var y = 0; y < height; y++) {
                 for (var x = 0; x < width; x++) {
-                    var srcPos = dataOffset + (x + y * width) * 3;
-                    byteArray[index + 2] = srcData[srcPos];
-                    byteArray[index + 1] = srcData[srcPos + 1];
+                    var srcPos = (x + y * width) * 3;
                     byteArray[index] = srcData[srcPos + 2];
+                    byteArray[index + 1] = srcData[srcPos + 1];
+                    byteArray[index + 2] = srcData[srcPos];
                     index += 3;
                 }
             }
@@ -142,11 +265,11 @@
 
         private static GetLuminanceArrayBuffer(width: number, height: number, dataOffset: number, dataLength: number, arrayBuffer: ArrayBuffer): Uint8Array {
             var byteArray = new Uint8Array(dataLength);
-            var srcData = new Uint8Array(arrayBuffer);
+            var srcData = new Uint8Array(arrayBuffer, dataOffset);
             var index = 0;
-            for (var y = height - 1; y >= 0; y--) {
+            for (var y = 0; y < height; y++) {
                 for (var x = 0; x < width; x++) {
-                    var srcPos = dataOffset + (x + y * width);
+                    var srcPos = (x + y * width);
                     byteArray[index] = srcData[srcPos];
                     index++;
                 }
@@ -155,9 +278,12 @@
             return byteArray;
         }
 
-        public static UploadDDSLevels(gl: WebGLRenderingContext, ext: any, arrayBuffer: any, info: DDSInfo, loadMipmaps: boolean, faces: number): void {
+        public static UploadDDSLevels(engine: Engine, arrayBuffer: any, info: DDSInfo, loadMipmaps: boolean, faces: number): void {
+            var gl = engine._gl;
+            var ext = engine.getCaps().s3tc;
+
             var header = new Int32Array(arrayBuffer, 0, headerLengthInt),
-                fourCC, blockBytes, internalFormat,
+                fourCC, blockBytes, internalFormat, format,
                 width, height, dataLength, dataOffset,
                 byteArray, mipmapCount, i;
 
@@ -171,6 +297,16 @@
                 return;
             }
 
+            if (info.isCompressed && !ext) {
+                Tools.Error("Compressed textures are not supported on this platform.");
+                return;
+            }
+
+            var bpp = header[off_RGBbpp];
+            dataOffset = header[off_size] + 4;
+
+            let computeFormats = false;
+
             if (info.isFourCC) {
                 fourCC = header[off_pfFourCC];
                 switch (fourCC) {
@@ -186,36 +322,62 @@
                     blockBytes = 16;
                     internalFormat = ext.COMPRESSED_RGBA_S3TC_DXT5_EXT;
                     break;
+                case FOURCC_D3DFMT_R16G16B16A16F:  
+                    computeFormats = true;
+                    break;
+                case FOURCC_D3DFMT_R32G32B32A32F:
+                    computeFormats = true;
+                    break;                    
+                case FOURCC_DX10:
+                    // There is an additionnal header so dataOffset need to be changed
+                    dataOffset += 5 * 4; // 5 uints
+
+                    if (info.dxgiFormat === DXGI_FORMAT_R16G16B16A16_FLOAT) {
+                        computeFormats = true;
+                        break;
+                    }
                 default:
                     console.error("Unsupported FourCC code:", Int32ToFourCC(fourCC));
                     return;
                 }
             }
 
+            if (computeFormats) {
+                format = engine._getWebGLTextureType(info.textureType);    
+                internalFormat = engine._getRGBABufferInternalSizedFormat(info.textureType);
+            }
+
             mipmapCount = 1;
             if (header[off_flags] & DDSD_MIPMAPCOUNT && loadMipmaps !== false) {
                 mipmapCount = Math.max(1, header[off_mipmapCount]);
             }
             
-            var bpp = header[off_RGBbpp];
-
             for (var face = 0; face < faces; face++) {
                 var sampler = faces === 1 ? gl.TEXTURE_2D : (gl.TEXTURE_CUBE_MAP_POSITIVE_X + face);
 
                 width = header[off_width];
                 height = header[off_height];
-                dataOffset = header[off_size] + 4;
 
                 for (i = 0; i < mipmapCount; ++i) {
-                    if (info.isRGB) {
+                    if (!info.isCompressed && info.isFourCC) {
+                        dataLength = width * height * 4;
+                        var floatArray: ArrayBufferView;
+                        if (bpp === 128) {
+                            floatArray = DDSTools.GetFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i);
+                        } else { // 64
+                            floatArray = DDSTools.GetHalfFloatRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer, i);
+                        }
+
+                        engine._uploadDataToTexture(sampler, i, internalFormat, width, height, gl.RGBA, format, floatArray);
+                    } else if (info.isRGB) {
                         if (bpp === 24) {
                             dataLength = width * height * 3;
                             byteArray = DDSTools.GetRGBArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
-                            gl.texImage2D(sampler, i, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, byteArray);
+                            engine._uploadDataToTexture(sampler, i, gl.RGB, width, height, gl.RGB, gl.UNSIGNED_BYTE, byteArray);
                         } else { // 32
                             dataLength = width * height * 4;
                             byteArray = DDSTools.GetRGBAArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
-                            gl.texImage2D(sampler, i, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, byteArray);
+                            engine._uploadDataToTexture(sampler, i, gl.RGBA, width, height, gl.RGBA, gl.UNSIGNED_BYTE, byteArray);
                         }
                     } else if (info.isLuminance) {
                         var unpackAlignment = gl.getParameter(gl.UNPACK_ALIGNMENT);
@@ -224,13 +386,13 @@
                         dataLength = paddedRowSize * (height - 1) + unpaddedRowSize;
 
                         byteArray = DDSTools.GetLuminanceArrayBuffer(width, height, dataOffset, dataLength, arrayBuffer);
-                        gl.texImage2D(sampler, i, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, byteArray);
+                        engine._uploadDataToTexture(sampler, i, gl.LUMINANCE, width, height, gl.LUMINANCE, gl.UNSIGNED_BYTE, byteArray);
                     } else {
                         dataLength = Math.max(4, width) / 4 * Math.max(4, height) / 4 * blockBytes;
                         byteArray = new Uint8Array(arrayBuffer, dataOffset, dataLength);
-                        gl.compressedTexImage2D(sampler, i, internalFormat, width, height, 0, byteArray);
+                        engine._uploadCompressedDataToTexture(sampler, i, internalFormat, width, height, byteArray);
                     }
-                    dataOffset += dataLength;
+                    dataOffset += width * height * (bpp / 8);
                     width *= 0.5;
                     height *= 0.5;
 

src/babylon.engine.ts

@@ -274,10 +274,6 @@
         private static _GEQUAL = 0x0206; //	Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is greater than or equal to the stored value.
         private static _NOTEQUAL = 0x0205; //  Passed to depthFunction or stencilFunction to specify depth or stencil tests will pass if the new depth value is not equal to the stored value.
 
-        private static HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
-        private static RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
-        private static RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.
-
         public static get NEVER(): number {
             return Engine._NEVER;
         }
@@ -458,7 +454,7 @@
         }           
 
         public static get Version(): string {
-            return "3.0-beta";
+            return "3.0-rc";
         }
 
         // Updatable statics so stick with vars here
@@ -722,6 +718,11 @@
                 this._glRenderer = "Unknown renderer";
             }
 
+            // Constants
+            this._gl.HALF_FLOAT_OES = 0x8D61; // Half floating-point type (16-bit).
+            this._gl.RGBA16F = 0x881A; // RGBA 16-bit floating-point color-renderable internal sized format.
+            this._gl.RGBA32F = 0x8814; // RGBA 32-bit floating-point color-renderable internal sized format.            
+
             // Extensions
             this._caps.standardDerivatives = this._webGLVersion > 1 || (this._gl.getExtension('OES_standard_derivatives') !== null);
 
@@ -749,7 +750,7 @@
             this._caps.textureHalfFloat = this._webGLVersion > 1 || this._gl.getExtension('OES_texture_half_float');
             this._caps.textureHalfFloatLinearFiltering = this._webGLVersion > 1 || (this._caps.textureHalfFloat && this._gl.getExtension('OES_texture_half_float_linear'));
             if (this._webGLVersion > 1) {
-                Engine.HALF_FLOAT_OES = 0x140B;
+                this._gl.HALF_FLOAT_OES = 0x140B;
             }
             this._caps.textureHalfFloatRender = this._caps.textureHalfFloat && this._canRenderToHalfFloatFramebuffer();
 
@@ -2465,7 +2466,7 @@
                         var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) === 1);
                         prepareWebGLTexture(texture, this._gl, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, () => {
 
-                            Internals.DDSTools.UploadDDSLevels(this._gl, this.getCaps().s3tc, data, info, loadMipmap, 1);
+                            Internals.DDSTools.UploadDDSLevels(this, data, info, loadMipmap, 1);
                         }, samplingMode);
                     };
                 }
@@ -3041,6 +3042,14 @@
             return samples;
         }
 
+        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 _uploadCompressedDataToTexture(target: number, lod: number, internalFormat: number, width: number, height: number, data: ArrayBufferView) {
+            this._gl.compressedTexImage2D(target, lod, internalFormat, width, height, 0, data);
+        }
+
         public createRenderTargetCubeTexture(size: number, options?: any): WebGLTexture {
             var gl = this._gl;
 
@@ -3120,16 +3129,15 @@
             texture.onLoadedCallbacks = [];
 
             var isKTX = false;
+            var isDDS = false;
             var lastDot = rootUrl.lastIndexOf('.');
             var extension = rootUrl.substring(lastDot).toLowerCase();
             if (this._textureFormatInUse) {
                 extension = this._textureFormatInUse;
                 rootUrl = rootUrl.substring(0, lastDot) + this._textureFormatInUse;
                 isKTX = true;
-            }
-            var isDDS = this.getCaps().s3tc && (extension === ".dds");
-            if (isDDS) {
-                BABYLON.Tools.Warn("DDS files deprecated since 3.0, use KTX files");
+            } else {
+                isDDS = (extension === ".dds");
             }
 
             if (isKTX) {
@@ -3163,9 +3171,11 @@
                     var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap;
 
                     this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture);
-                    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+                    if (info.isCompressed) {
+                        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+                    }
 
-                    Internals.DDSTools.UploadDDSLevels(this._gl, this.getCaps().s3tc, data, info, loadMipmap, 6);
+                    Internals.DDSTools.UploadDDSLevels(this, data, info, loadMipmap, 6);
 
                     if (!noMipmap && !info.isFourCC && info.mipmapCount === 1) {
                         gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
@@ -3183,6 +3193,7 @@
                     texture._width = info.width;
                     texture._height = info.height;
                     texture.isReady = true;
+                    texture.type = info.textureType;
                 }, null, null, true, onError);
             } else {
                 cascadeLoad(rootUrl, scene, imgs => {
@@ -3340,7 +3351,7 @@
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
-            else if (textureType === Engine.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
+            else if (textureType === this._gl.HALF_FLOAT_OES && !this._caps.textureHalfFloatLinearFiltering) {
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
             }
@@ -3962,7 +3973,7 @@
             }
         }
 
-        public _readTexturePixels(texture: WebGLTexture, width: number, height: number, faceIndex = -1): Uint8Array {
+        public _readTexturePixels(texture: WebGLTexture, width: number, height: number, faceIndex = -1, lodIndex = 0): ArrayBufferView {
             let gl = this._gl;
             if (!this._dummyFramebuffer) {
                 this._dummyFramebuffer = gl.createFramebuffer();
@@ -3970,13 +3981,13 @@
             gl.bindFramebuffer(gl.FRAMEBUFFER, this._dummyFramebuffer);
 
             if (faceIndex > -1) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, 0);            
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, lodIndex);            
             } else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, lodIndex);
             }
 
             let readFormat = gl.RGBA;
-            let readType = gl.UNSIGNED_BYTE;
+            let readType = (texture.type !== undefined) ? texture.type : gl.UNSIGNED_BYTE;
             let buffer = new Uint8Array(4 * width * height);
             gl.readPixels(0, 0, width, height, readFormat, readType, buffer);
             
@@ -4050,28 +4061,28 @@
             return successful;
         }
 
-        private _getWebGLTextureType(type: number): number {
+        public _getWebGLTextureType(type: number): number {
             if (type === Engine.TEXTURETYPE_FLOAT) {
                 return this._gl.FLOAT;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 // Add Half Float Constant.
-                return Engine.HALF_FLOAT_OES;
+                return this._gl.HALF_FLOAT_OES;
             }
 
             return this._gl.UNSIGNED_BYTE;
         };
 
-        private _getRGBABufferInternalSizedFormat(type: number): number {
+        public _getRGBABufferInternalSizedFormat(type: number): number {
             if (this._webGLVersion === 1) {
                 return this._gl.RGBA;
             }
 
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                return Engine.RGBA32F;
+                return this._gl.RGBA32F;
             }
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                return Engine.RGBA16F;
+                return this._gl.RGBA16F;
             }
 
             return this._gl.RGBA;

src/babylon.mixins.ts

@@ -50,6 +50,10 @@ interface WebGLRenderingContext {
     DRAW_FRAMEBUFFER: number;
     UNIFORM_BUFFER: number;
 
+    HALF_FLOAT_OES: number;
+    RGBA16F: number;
+    RGBA32F: number;
+    
     /* Multiple Render Targets */
     drawBuffers(buffers: number[]): void;
     readBuffer(src: number): void;