Add new glTF tab to inspector with button to export GLB

Tools/Gulp/config.json

@@ -1700,6 +1700,7 @@
                     "../../inspector/src/tabs/SceneTab.ts",
                     "../../inspector/src/tabs/ConsoleTab.ts",
                     "../../inspector/src/tabs/StatsTab.ts",
+                    "../../inspector/src/tabs/GLTFTab.ts",
                     "../../inspector/src/tabs/TabBar.ts",
                     "../../inspector/src/tools/AbstractTool.ts",
                     "../../inspector/src/tools/PauseScheduleTool.ts",

inspector/sass/main.scss

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

inspector/sass/tabs/_gltfTab.scss

@@ -0,0 +1,45 @@
+.tab-panel {
+    .gltf-actions {
+        overflow-y: auto;
+        padding-left: 5px;
+
+        .gltf-title {
+            font-size     : 1.1em;
+            padding-bottom: 10px;
+            border-bottom : 1px solid $color-bot;
+            margin        : 10px 0 10px 0;
+        }
+
+        .gltf-input {
+            background-color: $background-lighter;
+            border          : none;
+            outline         : none;
+            font-family     : $font;
+            color           : darken($color, 10%);
+            padding         : 5px;
+            margin          : 0px 6px 0px 0;
+
+            &:hover {
+                background-color:$background-lighter2;
+            }
+        }
+
+        .gltf-button {
+            background-color: $background-lighter;
+            border          : none;
+            outline         : none;
+            font-family     : $font;
+            color           : $color;
+            padding         : 5px 10px;
+            margin          : 0px 6px 0px 0;
+
+            &:hover {
+                background-color:$background-lighter2;
+            }
+
+            &:active {
+                background-color:$background-lighter3;
+            }
+        }
+    }
+}

inspector/src/tabs/GLTFTab.ts

@@ -0,0 +1,53 @@
+/// <reference path="../../../dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts"/>
+/// <reference path="../../../dist/preview release/serializers/babylon.glTF2Serializer.d.ts"/>
+
+module INSPECTOR {
+    export class GLTFTab extends Tab {
+        constructor(tabbar: TabBar, inspector: Inspector) {
+            super(tabbar, 'GLTF');
+
+            this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
+            const actions = Helpers.CreateDiv('gltf-actions', this._panel) as HTMLDivElement;
+            this._addExport(inspector, actions);
+        }
+
+        public dispose() {
+            // Nothing to dispose
+        }
+
+        private _addExport(inspector: Inspector, actions: HTMLDivElement) {
+            const title = Helpers.CreateDiv('gltf-title', actions);
+            title.textContent = 'Export';
+
+            const name = Helpers.CreateInput('gltf-input', actions);
+            name.placeholder = "File name...";
+
+            const button = Helpers.CreateElement('button', 'gltf-button', actions) as HTMLButtonElement;
+            button.innerText = 'Export GLB';
+
+            button.addEventListener('click', () => {
+                const data = BABYLON.GLTF2Export.GLB(inspector.scene, name.value || "scene", {
+                    shouldExportMesh: mesh => !GLTFTab._IsSkyBox(mesh)
+                });
+
+                if (data) {
+                    data.downloadFiles();
+                }
+            });
+        }
+
+        private static _IsSkyBox(transformNode: BABYLON.TransformNode): boolean {
+            if (transformNode instanceof BABYLON.Mesh) {
+                if (transformNode.material) {
+                    const material = transformNode.material as BABYLON.PBRMaterial | BABYLON.StandardMaterial;
+                    const reflectionTexture = material.reflectionTexture;
+                    if (reflectionTexture && reflectionTexture.coordinatesMode === BABYLON.Texture.SKYBOX_MODE) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
+        }
+    }
+}

inspector/src/tabs/TabBar.ts

@@ -32,13 +32,15 @@ module INSPECTOR {
             this._tabs.push(this._meshTab);
             this._tabs.push(new LightTab(this, this._inspector));
             this._tabs.push(new MaterialTab(this, this._inspector));
+            if (BABYLON.GLTF2Export) {
+                this._tabs.push(new GLTFTab(this, this._inspector));
+            }
             if (BABYLON.GUI) {
                 this._tabs.push(new GUITab(this, this._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._toolBar = new Toolbar(this._inspector);
 
             this._build();