Allow HdrTExture in gamma space and not full float

materialsLibrary/dist/babylon.pbrMaterial.js

@@ -350,7 +350,7 @@ var BABYLON;
                                     this._defines.REFLECTIONMAP_EQUIRECTANGULAR = true;
                                     break;
                             }
-                            if (this.reflectionTexture instanceof BABYLON.HDRCubeTexture) {
+                            if (this.reflectionTexture instanceof BABYLON.HDRCubeTexture && this.reflectionTexture) {
                                 this._defines.USESPHERICALFROMREFLECTIONMAP = true;
                                 needNormals = true;
                             }

materialsLibrary/materials/pbr/babylon.pbrMaterial.ts

@@ -422,7 +422,7 @@ module BABYLON {
                                     break;
                             }
 
-                            if (this.reflectionTexture instanceof HDRCubeTexture) {
+                            if (this.reflectionTexture instanceof HDRCubeTexture && (<HDRCubeTexture>this.reflectionTexture)) {
                                 this._defines.USESPHERICALFROMREFLECTIONMAP = true;
                                 needNormals = true;
                             }

src/Materials/Textures/babylon.hdrCubeTexture.js

@@ -7,15 +7,21 @@ var BABYLON;
 (function (BABYLON) {
     var HDRCubeTexture = (function (_super) {
         __extends(HDRCubeTexture, _super);
-        function HDRCubeTexture(url, scene, size, noMipmap) {
+        function HDRCubeTexture(url, scene, size, noMipmap, generateHarmonics, useInGammaSpace) {
+            if (noMipmap === void 0) { noMipmap = false; }
+            if (generateHarmonics === void 0) { generateHarmonics = true; }
+            if (useInGammaSpace === void 0) { useInGammaSpace = false; }
             _super.call(this, scene);
             this.coordinatesMode = BABYLON.Texture.CUBIC_MODE;
+            this._useInGammaSpace = false;
+            this._generateHarmonics = true;
             this.sphericalPolynomial = null;
             this.name = url;
             this.url = url;
             this._noMipmap = noMipmap;
             this.hasAlpha = false;
             this._size = size;
+            this._useInGammaSpace = useInGammaSpace;
             if (!url) {
                 return;
             }
@@ -34,30 +40,46 @@ var BABYLON;
         HDRCubeTexture.prototype.loadTexture = function () {
             var _this = this;
             var callback = function (buffer) {
+                // Extract the raw linear data.
                 var data = BABYLON.Internals.HDRTools.GetCubeMapTextureData(buffer, _this._size);
-                _this.sphericalPolynomial = BABYLON.Internals.CubeMapToSphericalPolynomialTools.ConvertCubeMapToSphericalPolynomial(data);
-                var mapping = [
-                    "left",
-                    "down",
-                    "front",
-                    "right",
-                    "up",
-                    "back"
-                ];
+                // Generate harmonics if needed.
+                if (_this._generateHarmonics) {
+                    _this.sphericalPolynomial = BABYLON.Internals.CubeMapToSphericalPolynomialTools.ConvertCubeMapToSphericalPolynomial(data);
+                }
                 var results = [];
+                var byteArray = null;
+                // Create uintarray fallback.
+                if (!_this.getScene().getEngine().getCaps().textureFloat) {
+                    // 3 channels of 1 bytes per pixel in bytes.
+                    var byteBuffer = new ArrayBuffer(_this._size * _this._size * 3);
+                    byteArray = new Uint8Array(byteBuffer);
+                }
+                // Push each faces.
                 for (var j = 0; j < 6; j++) {
-                    var dataFace = data[mapping[j]];
-                    // TODO. Support Int Textures...
-                    //                     // 3 channels of 1 bytes per pixel in bytes.
-                    //                     var byteBuffer = new ArrayBuffer(this._size * this._size * 3);
-                    //                     var byteArray = new Uint8Array(byteBuffer);
-                    // 
-                    //                     /* now convert data from buffer into bytes */
-                    //                     for(var i = 0; i < this._size * this._size; i++) {
-                    //                         byteArray[(i * 3) + 0] = dataFace[(i * 3) + 0] * 255;
-                    //                         byteArray[(i * 3) + 1] = dataFace[(i * 3) + 1] * 255;
-                    //                         byteArray[(i * 3) + 2] = dataFace[(i * 3) + 2] * 255;
-                    //                     }
+                    var dataFace = data[HDRCubeTexture._facesMapping[j]];
+                    // If special cases.
+                    if (_this._useInGammaSpace || byteArray) {
+                        for (var i = 0; i < _this._size * _this._size; i++) {
+                            // Put in gamma space if requested.
+                            if (_this._useInGammaSpace) {
+                                dataFace[(i * 3) + 0] = Math.pow(dataFace[(i * 3) + 0], BABYLON.ToGammaSpace);
+                                dataFace[(i * 3) + 1] = Math.pow(dataFace[(i * 3) + 1], BABYLON.ToGammaSpace);
+                                dataFace[(i * 3) + 2] = Math.pow(dataFace[(i * 3) + 2], BABYLON.ToGammaSpace);
+                            }
+                            // Convert to int texture for fallback.
+                            if (byteArray) {
+                                // R
+                                byteArray[(i * 3) + 0] = dataFace[(i * 3) + 0] * 255;
+                                byteArray[(i * 3) + 0] = Math.min(255, byteArray[(i * 3) + 0]);
+                                // G
+                                byteArray[(i * 3) + 1] = dataFace[(i * 3) + 1] * 255;
+                                byteArray[(i * 3) + 1] = Math.min(255, byteArray[(i * 3) + 1]);
+                                // B
+                                byteArray[(i * 3) + 2] = dataFace[(i * 3) + 2] * 255;
+                                byteArray[(i * 3) + 2] = Math.min(255, byteArray[(i * 3) + 2]);
+                            }
+                        }
+                    }
                     results.push(dataFace);
                 }
                 return results;
@@ -65,7 +87,7 @@ var BABYLON;
             this._texture = this.getScene().getEngine().createRawCubeTexture(this.url, this.getScene(), this._size, BABYLON.Engine.TEXTUREFORMAT_RGB, BABYLON.Engine.TEXTURETYPE_FLOAT, this._noMipmap, callback);
         };
         HDRCubeTexture.prototype.clone = function () {
-            var newTexture = new HDRCubeTexture(this.url, this.getScene(), this._size, this._noMipmap);
+            var newTexture = new HDRCubeTexture(this.url, this.getScene(), this._size, this._noMipmap, this._generateHarmonics, this._useInGammaSpace);
             // Base texture
             newTexture.level = this.level;
             newTexture.wrapU = this.wrapU;
@@ -91,7 +113,7 @@ var BABYLON;
         HDRCubeTexture.Parse = function (parsedTexture, scene, rootUrl) {
             var texture = null;
             if (parsedTexture.name && !parsedTexture.isRenderTarget) {
-                texture = new BABYLON.HDRCubeTexture(rootUrl + parsedTexture.name, scene, parsedTexture.size);
+                texture = new BABYLON.HDRCubeTexture(rootUrl + parsedTexture.name, scene, parsedTexture.size, texture.generateHarmonics, texture.useInGammaSpace);
                 texture.name = parsedTexture.name;
                 texture.hasAlpha = parsedTexture.hasAlpha;
                 texture.level = parsedTexture.level;
@@ -110,8 +132,18 @@ var BABYLON;
             serializationObject.level = this.level;
             serializationObject.size = this._size;
             serializationObject.coordinatesMode = this.coordinatesMode;
+            serializationObject.useInGammaSpace = this._useInGammaSpace;
+            serializationObject.generateHarmonics = this._generateHarmonics;
             return serializationObject;
         };
+        HDRCubeTexture._facesMapping = [
+            "left",
+            "down",
+            "front",
+            "right",
+            "up",
+            "back"
+        ];
         return HDRCubeTexture;
     })(BABYLON.BaseTexture);
     BABYLON.HDRCubeTexture = HDRCubeTexture;

src/Materials/Textures/babylon.hdrcubetexture.ts

@@ -2,15 +2,26 @@ module BABYLON {
     export class HDRCubeTexture extends BaseTexture {
         public url: string;
         public coordinatesMode = Texture.CUBIC_MODE;
-
+        
+        private _useInGammaSpace = false;
+        private _generateHarmonics = true;
         private _noMipmap: boolean;
         private _extensions: string[];
         private _textureMatrix: Matrix;
         private _size: number;
+        
+        private static _facesMapping = [
+            "left",
+            "down",
+            "front",
+            "right",
+            "up",
+            "back"
+        ]; 
 
         public sphericalPolynomial: SphericalPolynomial = null;
-
-        constructor(url: string, scene: Scene, size:number, noMipmap?: boolean) {
+        
+        constructor(url: string, scene: Scene, size:number, noMipmap = false, generateHarmonics = true, useInGammaSpace = false) {
             super(scene);
 
             this.name = url;
@@ -18,6 +29,7 @@ module BABYLON {
             this._noMipmap = noMipmap;
             this.hasAlpha = false;
             this._size = size;
+            this._useInGammaSpace = useInGammaSpace;
 
             if (!url) {
                 return;
@@ -40,32 +52,53 @@ module BABYLON {
         
         private loadTexture() {
             var callback = (buffer: ArrayBuffer) => {
+                // Extract the raw linear data.
                 var data = BABYLON.Internals.HDRTools.GetCubeMapTextureData(buffer, this._size);
-                this.sphericalPolynomial = BABYLON.Internals.CubeMapToSphericalPolynomialTools.ConvertCubeMapToSphericalPolynomial(data);
-
-                var mapping = [
-                    "left",
-                    "down",
-                    "front",
-                    "right",
-                    "up",
-                    "back"
-                ];
-
+                
+                // Generate harmonics if needed.
+                if (this._generateHarmonics) {
+                    this.sphericalPolynomial = BABYLON.Internals.CubeMapToSphericalPolynomialTools.ConvertCubeMapToSphericalPolynomial(data);
+                }
+                
                 var results = [];
+                var byteArray: Uint8Array = null;
+                
+                // Create uintarray fallback.
+                if (!this.getScene().getEngine().getCaps().textureFloat) {
+                    // 3 channels of 1 bytes per pixel in bytes.
+                    var byteBuffer = new ArrayBuffer(this._size * this._size * 3);
+                    byteArray = new Uint8Array(byteBuffer);
+                }
+                
+                // Push each faces.
                 for (var j = 0; j < 6; j++) {
-                    var dataFace = <Float32Array>data[mapping[j]];
-// TODO. Support Int Textures...
-//                     // 3 channels of 1 bytes per pixel in bytes.
-//                     var byteBuffer = new ArrayBuffer(this._size * this._size * 3);
-//                     var byteArray = new Uint8Array(byteBuffer);
-// 
-//                     /* now convert data from buffer into bytes */
-//                     for(var i = 0; i < this._size * this._size; i++) {
-//                         byteArray[(i * 3) + 0] = dataFace[(i * 3) + 0] * 255;
-//                         byteArray[(i * 3) + 1] = dataFace[(i * 3) + 1] * 255;
-//                         byteArray[(i * 3) + 2] = dataFace[(i * 3) + 2] * 255;
-//                     }
+                    var dataFace = <Float32Array>data[HDRCubeTexture._facesMapping[j]];
+                    
+                    // If special cases.
+                    if (this._useInGammaSpace || byteArray) {
+                        for(var i = 0; i < this._size * this._size; i++) {
+                             
+                             // Put in gamma space if requested.
+                             if (this._useInGammaSpace) {
+                                dataFace[(i * 3) + 0] = Math.pow(dataFace[(i * 3) + 0], BABYLON.ToGammaSpace);
+                                dataFace[(i * 3) + 1] = Math.pow(dataFace[(i * 3) + 1], BABYLON.ToGammaSpace);
+                                dataFace[(i * 3) + 2] = Math.pow(dataFace[(i * 3) + 2], BABYLON.ToGammaSpace);
+                             }
+                             
+                             // Convert to int texture for fallback.
+                             if (byteArray) {
+                                 // R
+                                 byteArray[(i * 3) + 0] = dataFace[(i * 3) + 0] * 255;
+                                 byteArray[(i * 3) + 0] = Math.min(255, byteArray[(i * 3) + 0]);
+                                 // G
+                                 byteArray[(i * 3) + 1] = dataFace[(i * 3) + 1] * 255;
+                                 byteArray[(i * 3) + 1] = Math.min(255, byteArray[(i * 3) + 1]);
+                                 // B
+                                 byteArray[(i * 3) + 2] = dataFace[(i * 3) + 2] * 255;
+                                 byteArray[(i * 3) + 2] = Math.min(255, byteArray[(i * 3) + 2]);
+                             }
+                         }
+                    }
 
                     results.push(dataFace);
                 }
@@ -76,7 +109,8 @@ module BABYLON {
         }
 
         public clone(): HDRCubeTexture {
-            var newTexture = new HDRCubeTexture(this.url, this.getScene(), this._size, this._noMipmap);
+            var newTexture = new HDRCubeTexture(this.url, this.getScene(), this._size, this._noMipmap,
+                this._generateHarmonics, this._useInGammaSpace);
 
             // Base texture
             newTexture.level = this.level;
@@ -84,7 +118,7 @@ module BABYLON {
             newTexture.wrapV = this.wrapV;
             newTexture.coordinatesIndex = this.coordinatesIndex;
             newTexture.coordinatesMode = this.coordinatesMode;
-
+            
             return newTexture;
         }
 
@@ -109,7 +143,8 @@ module BABYLON {
         public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): HDRCubeTexture {
             var texture = null;
             if (parsedTexture.name && !parsedTexture.isRenderTarget) {
-                texture = new BABYLON.HDRCubeTexture(rootUrl + parsedTexture.name, scene, parsedTexture.size);
+                texture = new BABYLON.HDRCubeTexture(rootUrl + parsedTexture.name, scene, parsedTexture.size,
+                    texture.generateHarmonics, texture.useInGammaSpace);
                 texture.name = parsedTexture.name;
                 texture.hasAlpha = parsedTexture.hasAlpha;
                 texture.level = parsedTexture.level;
@@ -130,6 +165,8 @@ module BABYLON {
             serializationObject.level = this.level;
             serializationObject.size = this._size;
             serializationObject.coordinatesMode = this.coordinatesMode;
+            serializationObject.useInGammaSpace = this._useInGammaSpace;
+            serializationObject.generateHarmonics = this._generateHarmonics;
 
             return serializationObject;
         }

src/Math/babylon.math.js

@@ -1,7 +1,7 @@
 var BABYLON;
 (function (BABYLON) {
-    var ToGammaSpace = 1 / 2.2;
-    var ToLinearSpace = 2.2;
+    BABYLON.ToGammaSpace = 1 / 2.2;
+    BABYLON.ToLinearSpace = 2.2;
     var Color3 = (function () {
         function Color3(r, g, b) {
             if (r === void 0) { r = 0; }
@@ -105,9 +105,9 @@ var BABYLON;
             return convertedColor;
         };
         Color3.prototype.toLinearSpaceToRef = function (convertedColor) {
-            convertedColor.r = Math.pow(this.r, ToLinearSpace);
-            convertedColor.g = Math.pow(this.g, ToLinearSpace);
-            convertedColor.b = Math.pow(this.b, ToLinearSpace);
+            convertedColor.r = Math.pow(this.r, BABYLON.ToLinearSpace);
+            convertedColor.g = Math.pow(this.g, BABYLON.ToLinearSpace);
+            convertedColor.b = Math.pow(this.b, BABYLON.ToLinearSpace);
             return this;
         };
         Color3.prototype.toGammaSpace = function () {
@@ -116,9 +116,9 @@ var BABYLON;
             return convertedColor;
         };
         Color3.prototype.toGammaSpaceToRef = function (convertedColor) {
-            convertedColor.r = Math.pow(this.r, ToGammaSpace);
-            convertedColor.g = Math.pow(this.g, ToGammaSpace);
-            convertedColor.b = Math.pow(this.b, ToGammaSpace);
+            convertedColor.r = Math.pow(this.r, BABYLON.ToGammaSpace);
+            convertedColor.g = Math.pow(this.g, BABYLON.ToGammaSpace);
+            convertedColor.b = Math.pow(this.b, BABYLON.ToGammaSpace);
             return this;
         };
         // Statics

src/Math/babylon.math.ts

@@ -2,8 +2,8 @@
 
     declare var SIMD;
 
-    const ToGammaSpace = 1 / 2.2;
-    const ToLinearSpace = 2.2;
+    export const ToGammaSpace = 1 / 2.2;
+    export const ToLinearSpace = 2.2;
 
     export class Color3 {
         constructor(public r: number = 0, public g: number = 0, public b: number = 0) {