Merge pull request #4502 from RaananW/hd-button

New HDButton

Viewer/assets/templates/default/navbar.html

@@ -144,6 +144,16 @@
         content: "\EF4E";
     }
 
+    .hd-icon:after {
+        font-size: 16px;
+        content: "\F765";
+    }
+
+    .sd-icon:after {
+        font-size: 16px;
+        content: "\F766";
+    }
+
     .progress-control {
         display: flex;
         flex: 1;
@@ -483,12 +493,20 @@
     </div>
     {{/unless}}
     <div class="default-control">
-        {{#unless hideHelp}}
-        <button class="help" id="help-button" title="Help">
+        {{#unless hideHdButton}}
+        <button class="hd-button" id="hd-button" title="{{text.hdButton}}">
+            {{#if hdEnabled}}
+            <span class="icon sd-icon"></span>
+            {{else}}
+            <span class="icon hd-icon"></span>
+            {{/if}}
+        </button>
+        {{/unless}} {{#unless hideHelp}}
+        <button class="help" id="help-button" title="{{text.helpButton}}">
             <span class="icon help-icon"></span>
         </button>
         {{/unless}} {{#unless hideFullScreen}}
-        <button class="fullscreen" id="fullscreen-button" title="Fullscreen">
+        <button class="fullscreen" id="fullscreen-button" title="{{text.fullscreenButton}}">
             <span class="icon fullscreen-icon"></span>
         </button>
         {{/unless}}

Viewer/src/configuration/configuration.ts

@@ -54,6 +54,7 @@ export interface ViewerConfiguration {
         disableResize?: boolean;
         engineOptions?: EngineOptions;
         adaptiveQuality?: boolean;
+        hdEnabled?: boolean;
     },
     //templateStructure?: ITemplateStructure,
     templates?: {

Viewer/src/configuration/types/default.ts

@@ -49,7 +49,13 @@ export let defaultConfiguration: ViewerConfiguration = {
                 logoText: 'BabylonJS',
                 logoLink: 'https://babylonjs.com',
                 hideHelp: true,
+                hideHdButton: true,
                 disableOnFullscreen: false,
+                text: {
+                    hdButton: "Toggle HD",
+                    fullscreenButton: "Fullscreen",
+                    helpButton: "Help"
+                }
             },
             events: {
                 pointerdown: {

Viewer/src/viewer/defaultViewer.ts

@@ -157,6 +157,9 @@ export class DefaultViewer extends AbstractViewer {
             case "fullscreen-button":
                 this.toggleFullscreen();
                 break;
+            case "hd-button":
+                this.toggleHD();
+                break;
             default:
                 return;
         }
@@ -264,6 +267,24 @@ export class DefaultViewer extends AbstractViewer {
         this._updateAnimationSpeed("1.0", paramsObject);
     }
 
+    public toggleHD() {
+        super.toggleHD();
+
+        // update UI element
+        let navbar = this.templateManager.getTemplate('navBar');
+        if (!navbar) return;
+
+        if (navbar.configuration.params) {
+            navbar.configuration.params.hdEnabled = this._hdToggled;
+        }
+
+        let span = navbar.parent.querySelector("button.hd-button span");
+        if (span) {
+            span.classList.remove(this._hdToggled ? "hd-icon" : "sd-icon");
+            span.classList.add(!this._hdToggled ? "hd-icon" : "sd-icon")
+        }
+    }
+
     /**
      * Toggle fullscreen of the entire viewer
      */

Viewer/src/viewer/viewer.ts

@@ -250,6 +250,21 @@ export abstract class AbstractViewer {
         this._resize();
     }
 
+    protected _hdToggled: boolean = false;
+
+    public toggleHD() {
+        this._hdToggled = !this._hdToggled;
+
+        let currentLevel = this.engine.getHardwareScalingLevel();
+        const scalingFactor = 2;
+
+        if (this._hdToggled) {
+            this.engine.setHardwareScalingLevel(currentLevel / scalingFactor);
+        } else {
+            this.engine.setHardwareScalingLevel(currentLevel * scalingFactor);
+        }
+    }
+
     /**
      * The resize function that will be registered with the window object
      */
@@ -507,9 +522,14 @@ export abstract class AbstractViewer {
             window.addEventListener('resize', this._resize);
         }
 
-        if (this.configuration.engine && this.configuration.engine.adaptiveQuality) {
-            var scale = Math.max(0.5, 1 / (window.devicePixelRatio || 2));
-            this.engine.setHardwareScalingLevel(scale);
+        if (this.configuration.engine) {
+            if (this.configuration.engine.adaptiveQuality) {
+                var scale = Math.max(0.5, 1 / (window.devicePixelRatio || 2));
+                this.engine.setHardwareScalingLevel(scale);
+            }
+            if (this.configuration.engine.hdEnabled) {
+                this.toggleHD();
+            }
         }
 
         // create a new template manager for this viewer

dist/preview release/what's new.md

@@ -51,6 +51,7 @@
 - Support for model drag and drop onto the canvas ([RaananW](https://github.com/RaananW))
 - New lab feature - global light rotation [#4347](https://github.com/BabylonJS/Babylon.js/issues/4347) ([RaananW](https://github.com/RaananW))
 - New NPM package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
+- A new HD-Toggler button allows setting a better hardware scaling rate ([RaananW](https://github.com/RaananW))
 
 ### Documentation