Step 7 Add Inspector Toolset

Tools/Gulp/config.json

@@ -425,7 +425,9 @@
             ],
             "shaders": [
                 "pbr.vertex",
-                "pbr.fragment"
+                "pbr.fragment",
+                "rgbdEncode.fragment",
+                "rgbdDecode.fragment"
             ],
             "shaderIncludes": [
                 "pbrVertexDeclaration",
@@ -1790,6 +1792,7 @@
                     "../../inspector/src/tabs/ConsoleTab.ts",
                     "../../inspector/src/tabs/StatsTab.ts",
                     "../../inspector/src/tabs/GLTFTab.ts",
+                    "../../inspector/src/tabs/ToolsTab.ts",
                     "../../inspector/src/tabs/TabBar.ts",
                     "../../inspector/src/tools/AbstractTool.ts",
                     "../../inspector/src/tools/PauseScheduleTool.ts",

inspector/sass/main.scss

@@ -94,6 +94,7 @@
   @import "tabs/consoleTab";
   @import "tabs/statsTab";
   @import "tabs/gltfTab";
+  @import "tabs/toolsTab";
 
   @import "tree";
   @import "detailPanel";

inspector/sass/tabs/_toolsTab.scss

@@ -0,0 +1,47 @@
+.tab-panel {
+
+    &.tools-panel {
+        overflow-y      : auto;
+    }
+
+    .tool-title1 {        
+        font-size       : 1.1em;
+        padding         : 10px;
+    }
+
+    .tool-title2 {
+        margin          : 10px 0 10px 0;
+        font-size       : 1.05em; 
+        border-bottom   : 1px solid $color-bot;
+        box-sizing      : border-box;
+    }
+
+    .tool-label {
+        display         : inline-block;
+        width           : 80%;
+        padding         : 2px;
+        background-color: $background-lighter;
+        border-bottom   : 1px solid $background;
+        border-top      : 1px solid $background;
+        height          : 30px;
+        line-height     : 30px;
+        box-sizing      : border-box;
+        
+    }
+    .tool-value {
+        display         : inline-block;
+        width           : 20%;
+        padding         : 2px;
+        background-color: $background-lighter;
+        border-top      : 1px solid $background;
+        border-bottom   : 1px solid $background;
+        height          : 30px;
+        line-height     : 30px;
+        box-sizing      : border-box;
+    }
+
+    .tool-infos {
+        width           : 100%;
+        padding         : 4px;
+    }
+}

inspector/src/tabs/TabBar.ts

@@ -41,6 +41,7 @@ module INSPECTOR {
             this._tabs.push(new PhysicsTab(this, this._inspector));
             this._tabs.push(new CameraTab(this, this._inspector));
             this._tabs.push(new SoundTab(this, this._inspector));
+            this._tabs.push(new ToolsTab(this, this._inspector));
             this._toolBar = new Toolbar(this._inspector);
 
             this._build();

inspector/src/tabs/ToolsTab.ts

@@ -0,0 +1,114 @@
+module INSPECTOR {
+
+    export class ToolsTab extends Tab {
+
+        private _inspector: Inspector;
+
+        private _scene: BABYLON.Scene;
+
+        constructor(tabbar: TabBar, insp: Inspector) {
+            super(tabbar, 'Tools');
+
+            this._inspector = insp;
+
+            this._scene = this._inspector.scene;
+
+            // Build the tools panel: a div that will contains all tools
+            this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
+            this._panel.classList.add("tools-panel")
+
+            let title = Helpers.CreateDiv('tool-title1', this._panel);
+            let versionSpan = Helpers.CreateElement('span');
+            versionSpan.textContent = `Babylon.js v${BABYLON.Engine.Version} - Tools`;
+            title.appendChild(versionSpan);
+
+            // Environment block
+            title = Helpers.CreateDiv('tool-title2', this._panel);
+            title.textContent = "Environment";
+            {
+                this._createToolLabel("Load Environment Texture (.dds, .env)", this._panel);
+
+                let file: BABYLON.Nullable<File> = null;
+
+                let elemValue = Helpers.CreateDiv('tool-value', this._panel);
+                let inputUploadElement = Inspector.DOCUMENT.createElement('input');
+                inputUploadElement.type = "file";
+                inputUploadElement.onchange = (event: any) => {
+                    var files: File[] = event.target.files;
+                    if (files && files.length) {
+                        file = files[0];
+                        
+                    }
+                };
+                elemValue.appendChild(inputUploadElement);
+                
+                let inputElement = Inspector.DOCUMENT.createElement('input');
+                inputElement.value = "Load";
+                inputElement.type = "button";
+                inputElement.onclick = () => {
+                    if (!file) {
+                        return;
+                    }
+
+                    let isFileDDS = file.name.toLowerCase().indexOf(".dds") > 0;
+                    BABYLON.Tools.ReadFile(file, data => {
+                        var blob = new Blob([data], {type: "octet/stream"});
+                        var url = URL.createObjectURL(blob);
+                        if (isFileDDS) {
+                            this._scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(url, this._scene, ".dds");
+                        }
+                        else {
+                            this._scene.environmentTexture = new BABYLON.CubeTexture(url, this._scene, 
+                                undefined, undefined, undefined, undefined, undefined, undefined, undefined,
+                                ".env");
+                        }
+                    }, null, true);
+                };
+                elemValue.appendChild(inputElement);
+
+                this._createToolLabel("Compress to .env", this._panel);
+                elemValue = Helpers.CreateDiv('tool-value', this._panel);
+                inputElement = Inspector.DOCUMENT.createElement('input');
+                inputElement.value = "Save";
+                inputElement.type = "button";
+                inputElement.onclick = () => {
+                    if (this._scene.activeCamera) {
+                        BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(this._scene.environmentTexture).then((buffer) => {
+                            var blob = new Blob([buffer], {type: "octet/stream"});
+                            BABYLON.Tools.Download(blob, "environment.env");
+                        }).catch((error) => {
+                            // TODO. display errors. error.message
+                        });
+                    }
+                };
+                elemValue.appendChild(inputElement);
+            }
+
+            title = Helpers.CreateDiv('tool-title2', this._panel);
+            title.textContent = "Capture";
+            {
+                this._createToolLabel("Screenshot", this._panel);
+                let elemValue = Helpers.CreateDiv('tool-value', this._panel);
+                let inputElement = Inspector.DOCUMENT.createElement('input');
+                inputElement.value = "Capture";
+                inputElement.type = "button";
+                inputElement.onclick = () => {
+                    if (this._scene.activeCamera) {
+                        BABYLON.Tools.CreateScreenshot(this._scene.getEngine(), this._scene.activeCamera, {precision: 0.5});
+                    }
+                };
+                elemValue.appendChild(inputElement);
+            }
+        }
+
+        private _createToolLabel(content: string, parent: HTMLElement): HTMLElement {
+            let elem = Helpers.CreateDiv('tool-label', parent);
+            elem.textContent = content;
+            return elem;
+        }
+
+        public dispose() {
+            // Nothing to dispose
+        }
+    }
+}

src/Materials/Background/babylon.backgroundMaterial.ts

@@ -106,7 +106,7 @@
         public REFLECTIONMAP_OPPOSITEZ = false;
         public LODINREFLECTIONALPHA = false;
         public GAMMAREFLECTION = false;
-        public RGBMREFLECTION = false;
+        public RGBDREFLECTION = false;
         public EQUIRECTANGULAR_RELFECTION_FOV = false;
 
         // Default BJS.
@@ -656,7 +656,7 @@
 
                         defines.REFLECTION = true;
                         defines.GAMMAREFLECTION = reflectionTexture.gammaSpace;
-                        defines.RGBMREFLECTION = reflectionTexture.isRGBM;
+                        defines.RGBDREFLECTION = reflectionTexture.isRGBD;
                         defines.REFLECTIONBLUR = this._reflectionBlur > 0;
                         defines.REFLECTIONMAP_OPPOSITEZ = this.getScene().useRightHandedSystem ? !reflectionTexture.invertZ : reflectionTexture.invertZ;
                         defines.LODINREFLECTIONALPHA = reflectionTexture.lodLevelInAlpha;
@@ -732,7 +732,7 @@
                         defines.REFLECTIONMAP_OPPOSITEZ = false;
                         defines.LODINREFLECTIONALPHA = false;
                         defines.GAMMAREFLECTION = false;
-                        defines.RGBMREFLECTION = false;
+                        defines.RGBDREFLECTION = false;
                     }
                 }
 

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -86,7 +86,7 @@
         public REFLECTIONMAP_OPPOSITEZ = false;
         public LODINREFLECTIONALPHA = false;
         public GAMMAREFLECTION = false;
-        public RGBMREFLECTION = false;
+        public RGBDREFLECTION = false;
         public RADIANCEOCCLUSION = false;
         public HORIZONOCCLUSION = false;
 
@@ -95,7 +95,7 @@
         public REFRACTIONMAP_OPPOSITEZ = false;
         public LODINREFRACTIONALPHA = false;
         public GAMMAREFRACTION = false;
-        public RGBMREFRACTION = false;
+        public RGBDREFRACTION = false;
         public LINKREFRACTIONTOTRANSPARENCY = false;
 
         public INSTANCES = false;
@@ -1049,7 +1049,7 @@
                     if (reflectionTexture && StandardMaterial.ReflectionTextureEnabled) {
                         defines.REFLECTION = true;
                         defines.GAMMAREFLECTION = reflectionTexture.gammaSpace;
-                        defines.RGBMREFLECTION = reflectionTexture.isRGBM;
+                        defines.RGBDREFLECTION = reflectionTexture.isRGBD;
                         defines.REFLECTIONMAP_OPPOSITEZ = this.getScene().useRightHandedSystem ? !reflectionTexture.invertZ : reflectionTexture.invertZ;
                         defines.LODINREFLECTIONALPHA = reflectionTexture.lodLevelInAlpha;
 
@@ -1122,7 +1122,7 @@
                         defines.REFLECTIONMAP_OPPOSITEZ = false;
                         defines.LODINREFLECTIONALPHA = false;
                         defines.GAMMAREFLECTION = false;
-                        defines.RGBMREFLECTION = false;
+                        defines.RGBDREFLECTION = false;
                     }
 
                     if (this._lightmapTexture && StandardMaterial.LightmapTextureEnabled) {
@@ -1186,7 +1186,7 @@
                         defines.REFRACTION = true;
                         defines.REFRACTIONMAP_3D = refractionTexture.isCube;
                         defines.GAMMAREFRACTION = refractionTexture.gammaSpace;
-                        defines.RGBMREFRACTION = refractionTexture.isRGBM;
+                        defines.RGBDREFRACTION = refractionTexture.isRGBD;
                         defines.REFRACTIONMAP_OPPOSITEZ = refractionTexture.invertZ;
                         defines.LODINREFRACTIONALPHA = refractionTexture.lodLevelInAlpha;
 

src/Materials/Textures/babylon.baseTexture.ts

@@ -104,10 +104,10 @@
         public gammaSpace = true;
 
         /**
-         * Gets whether or not the texture contains RGBM data.
+         * Gets whether or not the texture contains RGBD data.
          */
-        public get isRGBM(): boolean {
-            return this._texture != null && this._texture._isRGBM;
+        public get isRGBD(): boolean {
+            return this._texture != null && this._texture._isRGBD;
         }
 
         @serialize()

src/Materials/Textures/babylon.internalTexture.ts

@@ -202,7 +202,7 @@ module BABYLON {
         /** @hidden */
         public _lodTextureLow: BaseTexture;
         /** @hidden */
-        public _isRGBM: boolean = false;
+        public _isRGBD: boolean = false;
 
         /** @hidden */
         public _webGLTexture: Nullable<WebGLTexture>;

src/Shaders/ShadersInclude/helperFunctions.fx

@@ -88,6 +88,7 @@ vec4 toRGBD(vec3 color) {
     
     // Helps with png quantization.
     rgb = toGammaSpace(rgb);
+
     return vec4(rgb, D * 0.8 + 0.2); 
 }
 

src/Shaders/background.fragment.fx

@@ -186,7 +186,7 @@ vec4 reflectionColor = vec4(1., 1., 1., 1.);
         reflectionColor = reflectionSample;
     #endif
 
-    #ifdef RGBMREFLECTION
+    #ifdef RGBDREFLECTION
         reflectionColor.rgb = fromRGBD(reflectionColor);
     #endif
 

src/Shaders/pbr.fragment.fx

@@ -512,7 +512,7 @@ void main(void) {
             environmentRefraction.rgb = fromRGBD(environmentRefraction);
         #endif
 
-        #ifdef RGBMREFRACTION
+        #ifdef RGBDREFRACTION
             environmentRefraction.rgb = toLinearSpace(environmentRefraction.rgb);
         #endif
 
@@ -589,7 +589,7 @@ void main(void) {
             }
         #endif
 
-        #ifdef RGBMREFLECTION
+        #ifdef RGBDREFLECTION
             environmentRadiance.rgb = fromRGBD(environmentRadiance);
         #endif
 

src/Tools/babylon.environmentTextureTools.ts

@@ -179,11 +179,11 @@ module BABYLON {
 
                     // Creates a temp texture with the face data.
                     let tempTexture = engine.createRawTexture(data, faceWidth, faceWidth, Engine.TEXTUREFORMAT_RGBA, false, false, Texture.NEAREST_SAMPLINGMODE, null, textureType);
-                    // And rgbmEncode them. 
+                    // And rgbdEncode them. 
                     let promise = new Promise<void>((resolve, reject) => {
-                        let rgbmPostProcess = new PostProcess("rgbmEncode", "rgbmEncode", null, null, 1, null, Texture.NEAREST_SAMPLINGMODE, engine, false, undefined, Engine.TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
-                        rgbmPostProcess.getEffect().executeWhenCompiled(() => {
-                            rgbmPostProcess.onApply = (effect) => {
+                        let rgbdPostProcess = new PostProcess("rgbdEncode", "rgbdEncode", null, null, 1, null, Texture.NEAREST_SAMPLINGMODE, engine, false, undefined, Engine.TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
+                        rgbdPostProcess.getEffect().executeWhenCompiled(() => {
+                            rgbdPostProcess.onApply = (effect) => {
                                 effect._bindTexture("textureSampler", tempTexture);
                             }
             
@@ -193,7 +193,7 @@ module BABYLON {
 
                             // Set the desired size for the texture
                             engine.setSize(faceWidth, faceWidth);
-                            hostingScene.postProcessManager.directRender([rgbmPostProcess], null);
+                            hostingScene.postProcessManager.directRender([rgbdPostProcess], null);
 
                             // Reading datas from WebGL
                             canvas!.toBlob((blob) => {
@@ -214,7 +214,7 @@ module BABYLON {
                 }
             }
 
-            // Once all the textures haves been collected as RGBM stored in PNGs
+            // Once all the textures haves been collected as RGBD stored in PNGs
             return Promise.all(promises).then(() => {
                 // We can delete the hosting scene keeping track of all the creation objects
                 hostingScene.dispose();
@@ -339,7 +339,7 @@ module BABYLON {
             let engine = texture.getEngine();
             let expandTexture = false;
             let generateNonLODTextures = false;
-            let rgbmPostProcess: Nullable<PostProcess> = null;
+            let rgbdPostProcess: Nullable<PostProcess> = null;
             let cubeRtt: Nullable<InternalTexture> = null;
             let lodTextures: Nullable<{ [lod: number]: BaseTexture}> = null;
             let caps = engine.getCaps();
@@ -372,9 +372,9 @@ module BABYLON {
             // Expand the texture if possible
             if (expandTexture) {
                 // Simply run through the decode PP
-                rgbmPostProcess = new PostProcess("rgbmDecode", "rgbmDecode", null, null, 1, null, Texture.TRILINEAR_SAMPLINGMODE, engine, false, undefined, texture.type, undefined, null, false);
+                rgbdPostProcess = new PostProcess("rgbdDecode", "rgbdDecode", null, null, 1, null, Texture.TRILINEAR_SAMPLINGMODE, engine, false, undefined, texture.type, undefined, null, false);
                 
-                texture._isRGBM = false;
+                texture._isRGBD = false;
                 texture.invertY = false;
                 cubeRtt = engine.createRenderTargetCubeTexture(texture.width, {
                     generateDepthBuffer: false,
@@ -386,7 +386,7 @@ module BABYLON {
                 });
             }
             else {
-                texture._isRGBM = true;
+                texture._isRGBD = true;
                 texture.invertY = true;
 
                 // In case of missing support, applies the same patch than DDS files.
@@ -458,14 +458,14 @@ module BABYLON {
                                 },
                                 image);
 
-                                rgbmPostProcess!.getEffect().executeWhenCompiled(() => {
+                                rgbdPostProcess!.getEffect().executeWhenCompiled(() => {
                                     // Uncompress the data to a RTT
-                                    rgbmPostProcess!.onApply = (effect) => {
+                                    rgbdPostProcess!.onApply = (effect) => {
                                         effect._bindTexture("textureSampler", tempTexture);
                                         effect.setFloat2("scale", 1, 1);
                                     }
                                     
-                                    engine.scenes[0].postProcessManager.directRender([rgbmPostProcess!], cubeRtt, true, face, i);
+                                    engine.scenes[0].postProcessManager.directRender([rgbdPostProcess!], cubeRtt, true, face, i);
 
                                     // Cleanup
                                     engine.restoreDefaultFramebuffer();
@@ -503,8 +503,8 @@ module BABYLON {
                     cubeRtt._swapAndDie(texture);
                 }
                 // Relase temp Post Process.
-                if (rgbmPostProcess) {
-                    rgbmPostProcess.dispose();
+                if (rgbdPostProcess) {
+                    rgbdPostProcess.dispose();
                 }
                 // Flag internal texture as ready in case they are in use.
                 if (generateNonLODTextures) {

src/Tools/babylon.tools.ts

@@ -996,28 +996,18 @@
                     }
                 }
                 screenshotCanvas.toBlob(function (blob) {
-                    var url = URL.createObjectURL(blob);
                     //Creating a link if the browser have the download attribute on the a tag, to automatically start download generated image.
                     if (("download" in document.createElement("a"))) {
-                        var a = window.document.createElement("a");
-                        a.href = url;
-                        if (fileName) {
-                            a.setAttribute("download", fileName);
-                        }
-                        else {
+                        if (!fileName) {
                             var date = new Date();
-                            var stringDate = (date.getFullYear() + "-" + (date.getMonth() + 1)).slice(-2) + "-" + date.getDate() + "_" + date.getHours() + "-" + ('0' + date.getMinutes()).slice(-2);
-                            a.setAttribute("download", "screenshot_" + stringDate + ".png");
+                            var stringDate = (date.getFullYear() + "-" + (date.getMonth() + 1)).slice(2) + "-" + date.getDate() + "_" + date.getHours() + "-" + ('0' + date.getMinutes()).slice(-2);
+                            fileName = "screenshot_" + stringDate + ".png";
                         }
-                        window.document.body.appendChild(a);
-                        a.addEventListener("click", () => {
-                            if (a.parentElement) {
-                                a.parentElement.removeChild(a);
-                            }
-                        });
-                        a.click();
+                        Tools.Download(blob!, fileName);
                     }
                     else {
+                        var url = URL.createObjectURL(blob);
+                    
                         var newWindow = window.open("");
                         if (!newWindow) return;
                         var img = newWindow.document.createElement("img");
@@ -1033,6 +1023,27 @@
             }
         }
 
+        /**
+         * Downloads a blob in the browser
+         * @param blob defines the blob to download
+         * @param fileName defines the name of the downloaded file
+         */
+        public static Download(blob: Blob, fileName: string): void {
+            var url = window.URL.createObjectURL(blob);
+            var a = document.createElement("a");
+            document.body.appendChild(a);
+            a.style.display = "none";
+            a.href = url;
+            a.download = fileName;
+            a.addEventListener("click", () => {
+                if (a.parentElement) {
+                    a.parentElement.removeChild(a);
+                }
+            });
+            a.click();
+            window.URL.revokeObjectURL(url);
+        }
+
         public static CreateScreenshot(engine: Engine, camera: Camera, size: any, successCallback?: (data: string) => void, mimeType: string = "image/png"): void {
             var width: number;
             var height: number;