Env Texture Sandbox Style

dist/preview release/babylon.max.js

@@ -72985,17 +72985,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        WindowsMotionController.prototype._updateTrackpad = function () {
+            if (this.browserGamepad.axes && (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y)) {
+                this.trackpad.x = this.browserGamepad["axes"][2];
+                this.trackpad.y = this.browserGamepad["axes"][3];
+                this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
+            }
+        };
         /**
          * Called once per frame by the engine.
          */
         WindowsMotionController.prototype.update = function () {
             _super.prototype.update.call(this);
             if (this.browserGamepad.axes) {
-                if (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y) {
-                    this.trackpad.x = this.browserGamepad["axes"][2];
-                    this.trackpad.y = this.browserGamepad["axes"][3];
-                    this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
-                }
+                this._updateTrackpad();
                 // Only need to animate axes if there is a loaded mesh
                 if (this._loadedMeshInfo) {
                     for (var axis = 0; axis < this._mapping.axisMeshNames.length; axis++) {
@@ -73015,6 +73018,8 @@ var BABYLON;
             if (!buttonName) {
                 return;
             }
+            // Update the trackpad to ensure trackpad.x/y are accurate during button events between frames
+            this._updateTrackpad();
             // Only emit events for buttons that we know how to map from index to name
             var observable = this[(this._mapping.buttonObservableNames)[buttonName]];
             if (observable) {
@@ -81672,7 +81677,7 @@ var BABYLON;
             }
             var engine = internalTexture.getEngine();
             if (engine && engine.premultipliedAlpha) {
-                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option.");
+                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option set to false.");
             }
             var canvas = engine.getRenderingCanvas();
             if (!canvas) {

dist/preview release/babylon.no-module.max.js

@@ -72952,17 +72952,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        WindowsMotionController.prototype._updateTrackpad = function () {
+            if (this.browserGamepad.axes && (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y)) {
+                this.trackpad.x = this.browserGamepad["axes"][2];
+                this.trackpad.y = this.browserGamepad["axes"][3];
+                this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
+            }
+        };
         /**
          * Called once per frame by the engine.
          */
         WindowsMotionController.prototype.update = function () {
             _super.prototype.update.call(this);
             if (this.browserGamepad.axes) {
-                if (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y) {
-                    this.trackpad.x = this.browserGamepad["axes"][2];
-                    this.trackpad.y = this.browserGamepad["axes"][3];
-                    this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
-                }
+                this._updateTrackpad();
                 // Only need to animate axes if there is a loaded mesh
                 if (this._loadedMeshInfo) {
                     for (var axis = 0; axis < this._mapping.axisMeshNames.length; axis++) {
@@ -72982,6 +72985,8 @@ var BABYLON;
             if (!buttonName) {
                 return;
             }
+            // Update the trackpad to ensure trackpad.x/y are accurate during button events between frames
+            this._updateTrackpad();
             // Only emit events for buttons that we know how to map from index to name
             var observable = this[(this._mapping.buttonObservableNames)[buttonName]];
             if (observable) {
@@ -81639,7 +81644,7 @@ var BABYLON;
             }
             var engine = internalTexture.getEngine();
             if (engine && engine.premultipliedAlpha) {
-                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option.");
+                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option set to false.");
             }
             var canvas = engine.getRenderingCanvas();
             if (!canvas) {

dist/preview release/es6.js

@@ -72952,17 +72952,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        WindowsMotionController.prototype._updateTrackpad = function () {
+            if (this.browserGamepad.axes && (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y)) {
+                this.trackpad.x = this.browserGamepad["axes"][2];
+                this.trackpad.y = this.browserGamepad["axes"][3];
+                this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
+            }
+        };
         /**
          * Called once per frame by the engine.
          */
         WindowsMotionController.prototype.update = function () {
             _super.prototype.update.call(this);
             if (this.browserGamepad.axes) {
-                if (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y) {
-                    this.trackpad.x = this.browserGamepad["axes"][2];
-                    this.trackpad.y = this.browserGamepad["axes"][3];
-                    this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
-                }
+                this._updateTrackpad();
                 // Only need to animate axes if there is a loaded mesh
                 if (this._loadedMeshInfo) {
                     for (var axis = 0; axis < this._mapping.axisMeshNames.length; axis++) {
@@ -72982,6 +72985,8 @@ var BABYLON;
             if (!buttonName) {
                 return;
             }
+            // Update the trackpad to ensure trackpad.x/y are accurate during button events between frames
+            this._updateTrackpad();
             // Only emit events for buttons that we know how to map from index to name
             var observable = this[(this._mapping.buttonObservableNames)[buttonName]];
             if (observable) {
@@ -81639,7 +81644,7 @@ var BABYLON;
             }
             var engine = internalTexture.getEngine();
             if (engine && engine.premultipliedAlpha) {
-                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option.");
+                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option set to false.");
             }
             var canvas = engine.getRenderingCanvas();
             if (!canvas) {

dist/preview release/inspector/babylon.inspector.css

@@ -308,15 +308,13 @@
     border-bottom: 1px solid #5db0d7;
     box-sizing: border-box; }
   .insp-wrapper .tab-panel .tool-label, .insp-wrapper .tab-panel .tool-label-line, .insp-wrapper .tab-panel .tool-label-error {
-    display: inline-block;
-    width: 75%;
-    padding: 2px;
     background-color: #2c2c2c;
-    border-bottom: 1px solid #242424;
-    border-top: 1px solid #242424;
-    height: 30px;
-    line-height: 30px;
-    box-sizing: border-box; }
+    border: none;
+    outline: none;
+    font-family: "Inconsolata", sans-serif;
+    color: #b3b3b3;
+    padding: 5px;
+    margin: 0px 6px 0px 0; }
   .insp-wrapper .tab-panel .tool-label-line {
     width: 100%; }
   .insp-wrapper .tab-panel .tool-label-error {
@@ -336,6 +334,23 @@
   .insp-wrapper .tab-panel .tool-infos {
     width: 100%;
     padding: 4px; }
+  .insp-wrapper .tab-panel .tool-input {
+    background-color: #2c2c2c;
+    border: none;
+    outline: none;
+    font-family: "Inconsolata", sans-serif;
+    color: #ccc;
+    padding: 5px 10px;
+    margin: 0px 6px 0px 0;
+    width: 100%;
+    border-top: 1px solid #242424;
+    border-bottom: 1px solid #242424;
+    text-align: left; }
+    .insp-wrapper .tab-panel .tool-input:hover {
+      background-color: #383838;
+      cursor: pointer; }
+    .insp-wrapper .tab-panel .tool-input:active {
+      background-color: #454545; }
   .insp-wrapper .property-type {
     color: #5db0d7; }
   .insp-wrapper .property-name, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {

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

@@ -1056,7 +1056,6 @@ declare module INSPECTOR {
         private _inspector;
         private _scene;
         constructor(tabbar: TabBar, insp: Inspector);
-        private _createToolLabel(content, parent);
         dispose(): void;
     }
 }

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

@@ -4268,16 +4268,16 @@ var INSPECTOR;
             title.appendChild(versionSpan);
             // Environment block
             title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
-            title.textContent = "Environment";
+            title.textContent = "Environment Texture (.dds, .env)";
             {
-                var elemLabel = _this._createToolLabel("Load Environment Texture (.dds, .env) ", _this._panel);
-                elemLabel.className = "tool-label-line";
                 var errorElemm_1 = INSPECTOR.Inspector.DOCUMENT.createElement('div');
                 errorElemm_1.className = "tool-label-error";
                 errorElemm_1.style.display = "none";
+                var elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
                 var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.className = "tool-label-line";
+                inputElement.className = "tool-input";
                 inputElement.type = "file";
+                inputElement.accept = ".dds, .env";
                 inputElement.onchange = function (event) {
                     var files = event.target.files;
                     var file = null;
@@ -4315,11 +4315,11 @@ var INSPECTOR;
                         }
                     }, undefined, true);
                 };
-                _this._panel.appendChild(inputElement);
-                _this._createToolLabel("Compress to .env", _this._panel);
-                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
+                elemValue.appendChild(inputElement);
+                elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
                 inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Save";
+                inputElement.value = "Compress current texture to .env";
+                inputElement.className = "tool-input";
                 inputElement.type = "button";
                 inputElement.onclick = function () {
                     if (!_this._scene.environmentTexture) {
@@ -4350,11 +4350,11 @@ var INSPECTOR;
             title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
             title.textContent = "Capture";
             {
-                _this._createToolLabel("Screenshot", _this._panel);
-                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
+                var elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
                 var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Capture";
+                inputElement.value = "Take Screenshot";
                 inputElement.type = "button";
+                inputElement.className = "tool-input";
                 inputElement.onclick = function () {
                     if (_this._scene.activeCamera) {
                         BABYLON.Tools.CreateScreenshot(_this._scene.getEngine(), _this._scene.activeCamera, { precision: 0.5 });
@@ -4364,11 +4364,6 @@ var INSPECTOR;
             }
             return _this;
         }
-        ToolsTab.prototype._createToolLabel = function (content, parent) {
-            var elem = INSPECTOR.Helpers.CreateDiv('tool-label', parent);
-            elem.textContent = content;
-            return elem;
-        };
         ToolsTab.prototype.dispose = function () {
             // Nothing to dispose
         };

dist/preview release/viewer/babylon.viewer.max.js

@@ -73073,17 +73073,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        WindowsMotionController.prototype._updateTrackpad = function () {
+            if (this.browserGamepad.axes && (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y)) {
+                this.trackpad.x = this.browserGamepad["axes"][2];
+                this.trackpad.y = this.browserGamepad["axes"][3];
+                this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
+            }
+        };
         /**
          * Called once per frame by the engine.
          */
         WindowsMotionController.prototype.update = function () {
             _super.prototype.update.call(this);
             if (this.browserGamepad.axes) {
-                if (this.browserGamepad.axes[2] != this.trackpad.x || this.browserGamepad.axes[3] != this.trackpad.y) {
-                    this.trackpad.x = this.browserGamepad["axes"][2];
-                    this.trackpad.y = this.browserGamepad["axes"][3];
-                    this.onTrackpadValuesChangedObservable.notifyObservers(this.trackpad);
-                }
+                this._updateTrackpad();
                 // Only need to animate axes if there is a loaded mesh
                 if (this._loadedMeshInfo) {
                     for (var axis = 0; axis < this._mapping.axisMeshNames.length; axis++) {
@@ -73103,6 +73106,8 @@ var BABYLON;
             if (!buttonName) {
                 return;
             }
+            // Update the trackpad to ensure trackpad.x/y are accurate during button events between frames
+            this._updateTrackpad();
             // Only emit events for buttons that we know how to map from index to name
             var observable = this[(this._mapping.buttonObservableNames)[buttonName]];
             if (observable) {
@@ -81760,7 +81765,7 @@ var BABYLON;
             }
             var engine = internalTexture.getEngine();
             if (engine && engine.premultipliedAlpha) {
-                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option.");
+                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option set to false.");
             }
             var canvas = engine.getRenderingCanvas();
             if (!canvas) {

inspector/sass/tabs/_toolsTab.scss

@@ -17,15 +17,13 @@
     }
 
     .tool-label {
-        display         : inline-block;
-        width           : 75%;
-        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;
+        border          : none;
+        outline         : none;
+        font-family     : $font;
+        color           : darken($color, 10%);
+        padding         : 5px;
+        margin          : 0px 6px 0px 0;
     }
 
     .tool-label-line {
@@ -56,4 +54,27 @@
         width           : 100%;
         padding         : 4px;
     }
+
+    .tool-input {
+        background-color: $background-lighter;
+        border          : none;
+        outline         : none;
+        font-family     : $font;
+        color           : $color;
+        padding         : 5px 10px;
+        margin          : 0px 6px 0px 0;
+        width           : 100%;
+        border-top      : 1px solid $background;
+        border-bottom   : 1px solid $background;
+        text-align: left;
+
+        &:hover {
+            background-color:$background-lighter2;
+            cursor: pointer;
+        }
+
+        &:active {
+            background-color:$background-lighter3;
+        }
+    }
 }

inspector/src/tabs/ToolsTab.ts

@@ -24,18 +24,18 @@ module INSPECTOR {
 
             // Environment block
             title = Helpers.CreateDiv('tool-title2', this._panel);
-            title.textContent = "Environment";
+            title.textContent = "Environment Texture (.dds, .env)";
             {
-                let elemLabel = this._createToolLabel("Load Environment Texture (.dds, .env) ", this._panel);
-                elemLabel.className = "tool-label-line";
-
                 let errorElemm = Inspector.DOCUMENT.createElement('div');
                 errorElemm.className = "tool-label-error";
                 errorElemm.style.display = "none";
 
+                let elemValue = Helpers.CreateDiv(null, this._panel);
+
                 let inputElement = Inspector.DOCUMENT.createElement('input');
-                inputElement.className = "tool-label-line";
+                inputElement.className = "tool-input";
                 inputElement.type = "file";
+                inputElement.accept =".dds, .env";
                 inputElement.onchange = (event: any) => {
                     var files: File[] = event.target.files;
                     let file: BABYLON.Nullable<File> = null;
@@ -81,12 +81,13 @@ module INSPECTOR {
                         }
                     }, undefined, true);
                 };
-                this._panel.appendChild(inputElement);
+                elemValue.appendChild(inputElement);
+
+                elemValue = Helpers.CreateDiv(null, this._panel);
 
-                this._createToolLabel("Compress to .env", this._panel);
-                let elemValue = Helpers.CreateDiv('tool-value', this._panel);
                 inputElement = Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Save";
+                inputElement.value = "Compress current texture to .env";
+                inputElement.className = "tool-input";
                 inputElement.type = "button";
                 inputElement.onclick = () => {
                     if (!this._scene.environmentTexture) {
@@ -119,11 +120,12 @@ module INSPECTOR {
             title = Helpers.CreateDiv('tool-title2', this._panel);
             title.textContent = "Capture";
             {
-                this._createToolLabel("Screenshot", this._panel);
-                let elemValue = Helpers.CreateDiv('tool-value', this._panel);
+                let elemValue = Helpers.CreateDiv(null, this._panel);
+
                 let inputElement = Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Capture";
+                inputElement.value = "Take Screenshot";
                 inputElement.type = "button";
+                inputElement.className = "tool-input";
                 inputElement.onclick = () => {
                     if (this._scene.activeCamera) {
                         BABYLON.Tools.CreateScreenshot(this._scene.getEngine(), this._scene.activeCamera, {precision: 0.5});
@@ -133,12 +135,6 @@ module INSPECTOR {
             }
         }
 
-        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/Tools/babylon.environmentTextureTools.ts

@@ -146,7 +146,7 @@ module BABYLON {
 
             let engine = internalTexture.getEngine();
             if (engine && engine.premultipliedAlpha) {
-                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option.");
+                return Promise.reject("Env texture can only be created when the engine is created with the premultipliedAlpha option set to false.");
             }
 
             let canvas = engine.getRenderingCanvas();