Step 5 Cross Plat

src/Engine/babylon.engine.ts

@@ -5282,6 +5282,28 @@
             this._gl.compressedTexImage2D(target, lod, internalFormat, width, height, 0, <DataView>data);
         }
 
+        // /** @hidden */
+        // public _uploadArrayBufferToTexture(texture: InternalTexture, faceIndex: number, lod: number, data: ArrayBufferView, width = 0, height = 0) {
+        //     var gl = this._gl;
+
+        //     var textureType = this._getWebGLTextureType(texture.type);
+        //     var format = this._getInternalFormat(texture.format);
+        //     var internalFormat = this._getRGBABufferInternalSizedFormat(texture.type, format);
+
+        //     var bindTarget = texture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
+
+        //     this._bindTextureDirectly(bindTarget, texture, true);
+        //     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, texture.invertY ? 1 : 0);
+
+        //     var target = gl.TEXTURE_2D;
+        //     if (texture.isCube) {
+        //         var target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+        //     }
+
+        //     gl.texImage2D(target, lod, internalFormat, width || texture.width, height || texture.height, 0, format, textureType, data);
+        //     this._bindTextureDirectly(bindTarget, null, true);
+        // }
+
         /** @hidden */
         public _uploadImageToTexture(texture: InternalTexture, faceIndex: number, lod: number, image: HTMLImageElement) {
             var gl = this._gl;
@@ -5290,15 +5312,40 @@
             var format = this._getInternalFormat(texture.format);
             var internalFormat = this._getRGBABufferInternalSizedFormat(texture.type, format);
 
-            this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, texture, true);
+            var bindTarget = texture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
+
+            this._bindTextureDirectly(bindTarget, texture, true);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, texture.invertY ? 1 : 0);
 
-            var target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
-            gl.texImage2D(target, lod, internalFormat, format, textureType, image);
+            var target = gl.TEXTURE_2D;
+            if (texture.isCube) {
+                var target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+            }
 
-            this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, null, true);
+            gl.texImage2D(target, lod, internalFormat, format, textureType, image);
+            this._bindTextureDirectly(bindTarget, null, true);
         }
 
+        // /** @hidden */
+        // public _copyCurrentFrameBufferToTexture(texture: InternalTexture, x: number, y: number, width: number, height: number, faceIndex: number = 0, level: number = 0) {
+        //     var gl = this._gl;
+
+        //     var format = this._getInternalFormat(texture.format);
+
+        //     var bindTarget = texture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
+
+        //     this._bindTextureDirectly(bindTarget, texture, true);
+
+        //     var target = gl.TEXTURE_2D;
+        //     if (texture.isCube) {
+        //         var target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;
+        //     }
+
+        //     gl.copyTexImage2D(target, level, format, x, y, width, height, 0);
+
+        //     this._bindTextureDirectly(bindTarget, null, true);
+        // }
+
         /**
          * Creates a new render target cube texture
          * @param size defines the size of the texture

src/Tools/babylon.environmentTextureTools.ts

@@ -293,6 +293,50 @@ module BABYLON {
             });
         }
 
+        // private static _FloatView: Float32Array;
+        // private static _Int32View: Int32Array;
+        // private static _ToHalfFloat(value: number): number {
+        //     if (!this._FloatView) {
+        //         this._FloatView = new Float32Array(1);
+        //         this._Int32View = new Int32Array(this._FloatView.buffer);
+        //     }
+
+        //     this._FloatView[0] = value;
+        //     var x = this._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;
+        // }
+
         /**
          * Creates a JSON representation of the spherical data.
          * @param texture defines the texture containing the polynomials
@@ -352,6 +396,7 @@ module BABYLON {
             let generateNonLODTextures = false;
             let rgbmPostProcess: Nullable<PostProcess> = null;
             let cubeRtt: Nullable<InternalTexture> = null;
+            // let wegl1DestinationTexture: Nullable<InternalTexture> = null;
             let lodTextures: Nullable<{ [lod: number]: BaseTexture}> = null;
             let caps = engine.getCaps();
 
@@ -364,13 +409,17 @@ module BABYLON {
                 lodTextures = { };
                 generateNonLODTextures = true;
             }
+            // in webgl 1 there are no ways to either render or copy lod level information for float textures.
+            else if (engine.webGLVersion < 2) {
+                expandTexture = false;
+            }
             // If half float available we can uncompress the texture
-            else if (caps.textureHalfFloatRender) {
+            else if (caps.textureHalfFloatRender && caps.textureHalfFloatLinearFiltering) {
                 expandTexture = true;
                 texture.type = Engine.TEXTURETYPE_HALF_FLOAT;
             }
             // If full float available we can uncompress the texture
-            else if (caps.textureFloatRender) {
+            else if (caps.textureFloatRender && caps.textureFloatLinearFiltering) {
                 expandTexture = true;
                 texture.type = Engine.TEXTURETYPE_FLOAT;
             }
@@ -389,7 +438,17 @@ module BABYLON {
                     samplingMode: Texture.TRILINEAR_SAMPLINGMODE,
                     type: texture.type,
                     format: Engine.TEXTUREFORMAT_RGBA
-                })
+                });
+
+                // if (engine.webGLVersion < 2) {
+                //     wegl1DestinationTexture = engine.createRawCubeTexture(null, 
+                //         texture.width, 
+                //         Engine.TEXTUREFORMAT_RGBA,
+                //         texture.type,
+                //         true,
+                //         false,
+                //         Texture.TRILINEAR_SAMPLINGMODE);
+                // }
             }
             else {
                 texture._isRGBM = true;
@@ -442,6 +501,7 @@ module BABYLON {
             let promises: Promise<void>[] = [];
             // All mipmaps
             for (let i = 0; i < mipmapsCount; i++) {
+                // let faceWidth = info.width / (Math.pow(2, i));
                 // All faces
                 for (let face = 0; face < 6; face++) {
                     // Retrieves the face data
@@ -454,6 +514,14 @@ module BABYLON {
                     let image = new Image();
                     image.src = url;
 
+                    // let a: any = document.createElement("a");
+                    // document.body.appendChild(a);
+                    // a.style = "display: none";
+                    // a.href = url;
+                    // a.download = "env_" + i + "_" + face + ".png";
+                    // a.click();
+                    // window.URL.revokeObjectURL(url);
+
                     // Enqueue promise to upload to the texture.
                     let promise = new Promise<void>((resolve, reject) => {;
                         image.onload = () => {
@@ -470,7 +538,23 @@ module BABYLON {
                                         effect._bindTexture("textureSampler", tempTexture);
                                         effect.setFloat2("scale", 1, 1);
                                     }
-                                    engine.scenes[0].postProcessManager.directRender([rgbmPostProcess!], cubeRtt, true, face, i);
+
+                                    // if (wegl1DestinationTexture) {
+                                    //     engine.scenes[0].postProcessManager.directRender([rgbmPostProcess!], cubeRtt, true, face, i);
+                                        
+                                    //     //var data = engine._readTexturePixels(cubeRtt!, faceWidth, faceWidth, face, 0);
+                                    //     // var floatData = data as Float32Array;
+                                    //     // var halfFloatData = new Uint16Array(floatData.length);
+                                    //     // for (let i = 0; i < floatData.length; i++) {
+                                    //     //     halfFloatData[i] = this._ToHalfFloat(floatData[i]);
+                                    //     // }
+                                    //     // engine._uploadArrayBufferToTexture(wegl1DestinationTexture, face, i, halfFloatData, faceWidth, faceWidth);
+
+                                    //     engine._copyCurrentFrameBufferToTexture(wegl1DestinationTexture, 0, 0, faceWidth, faceWidth, face, i);
+                                    // }
+                                    // else {
+                                        engine.scenes[0].postProcessManager.directRender([rgbmPostProcess!], cubeRtt, true, face, i);
+                                    // }
 
                                     // Cleanup
                                     engine.restoreDefaultFramebuffer();
@@ -502,7 +586,14 @@ module BABYLON {
 
             // Once all done, finishes the cleanup and return
             return Promise.all(promises).then(() => {
-                // Relase temp Cube Texture resources.
+                // if (wegl1DestinationTexture) {
+                //     wegl1DestinationTexture._swapAndDie(texture);
+                //     if (cubeRtt) {
+                //         cubeRtt.dispose();
+                //     }
+                // }
+                // // Relase temp Cube Texture resources.
+                // else 
                 if (cubeRtt) {
                     engine._releaseFramebufferObjects(cubeRtt);
                     cubeRtt._swapAndDie(texture);