Add Hi DPI Support for GLFW

src/library_browser.js

@@ -27,6 +27,7 @@ var LibraryBrowser = {
 #endif
     Module["requestAnimationFrame"] = (func) => Browser.requestAnimationFrame(func);
     Module["setCanvasSize"] = (width, height, noUpdates) => Browser.setCanvasSize(width, height, noUpdates);
+    Module["setHiDPIAware"] = (isHiDPIAware) => Browser.setHiDPIAware(isHiDPIAware);
     Module["pauseMainLoop"] = () => Browser.mainLoop.pause();
     Module["resumeMainLoop"] = () => Browser.mainLoop.resume();
     Module["getUserMedia"] = () => Browser.getUserMedia();
@@ -99,6 +100,7 @@ var LibraryBrowser = {
       }
     },
     isFullscreen: false,
+    isHiDPIAware: false,
     pointerLock: false,
     moduleContextCreatedCallbacks: [],
     workers: [],
@@ -331,7 +333,7 @@ var LibraryBrowser = {
           if (Browser.resizeCanvas) {
             Browser.setFullscreenCanvasSize();
           } else {
-            Browser.updateCanvasDimensions(canvas);
+            Browser.setCanvasSize(canvas);
           }
         } else {
           // remove the full screen specific parent of the canvas again to restore the HTML structure from before going full screen
@@ -341,7 +343,7 @@ var LibraryBrowser = {
           if (Browser.resizeCanvas) {
             Browser.setWindowedCanvasSize();
           } else {
-            Browser.updateCanvasDimensions(canvas);
+            Browser.setCanvasSize(canvas);
           }
         }
         if (Module['onFullScreen']) Module['onFullScreen'](Browser.isFullscreen);
@@ -563,6 +565,12 @@ var LibraryBrowser = {
         var cw = Module["canvas"].width;
         var ch = Module["canvas"].height;
 
+        if (Browser.isHiDPIAware) {
+          const scale = Browser.getHiDPIScale();
+          cw /= scale;
+          ch /= scale;
+        }
+
         // Neither .scrollX or .pageXOffset are defined in a spec, but
         // we prefer .scrollX because it is currently in a spec draft.
         // (see: http://www.w3.org/TR/2013/WD-cssom-view-20131217/)
@@ -620,7 +628,11 @@ var LibraryBrowser = {
 
     updateResizeListeners() {
       var canvas = Module['canvas'];
-      Browser.resizeListeners.forEach((listener) => listener(canvas.width, canvas.height));
+      if (Browser.isHiDPIAware) {
+        Browser.resizeListeners.forEach((listener) => listener(canvas.clientWidth, canvas.clientHeight, canvas.width, canvas.height));
+      } else {
+        Browser.resizeListeners.forEach((listener) => listener(canvas.width, canvas.height, canvas.width, canvas.height));
+      }
     },
 
     setCanvasSize(width, height, noUpdates) {
@@ -654,6 +666,8 @@ var LibraryBrowser = {
     },
 
     updateCanvasDimensions(canvas, wNative, hNative) {
+      const scale = Browser.getHiDPIScale();
+
       if (wNative && hNative) {
         canvas.widthNative = wNative;
         canvas.heightNative = hNative;
@@ -678,24 +692,39 @@ var LibraryBrowser = {
          h = Math.round(h * factor);
       }
       if (Browser.resizeCanvas) {
-        if (canvas.width  != w) canvas.width  = w;
-        if (canvas.height != h) canvas.height = h;
-        if (typeof canvas.style != 'undefined') {
+        wNative = w;
+        hNative = h;
+      }
+      const wNativeScaled = Math.floor(wNative * scale);
+      const hNativeScaled = Math.floor(hNative * scale);
+      if (canvas.width  != wNativeScaled) canvas.width  = wNativeScaled;
+      if (canvas.height != hNativeScaled) canvas.height = hNativeScaled;
+      if (typeof canvas.style != 'undefined') {
+        if (wNativeScaled != wNative || hNativeScaled != hNative) {
+          canvas.style.setProperty( "width", wNative + "px", "important");
+          canvas.style.setProperty("height", hNative + "px", "important");
+        } else {
           canvas.style.removeProperty( "width");
           canvas.style.removeProperty("height");
         }
-      } else {
-        if (canvas.width  != wNative) canvas.width  = wNative;
-        if (canvas.height != hNative) canvas.height = hNative;
-        if (typeof canvas.style != 'undefined') {
-          if (w != wNative || h != hNative) {
-            canvas.style.setProperty( "width", w + "px", "important");
-            canvas.style.setProperty("height", h + "px", "important");
-          } else {
-            canvas.style.removeProperty( "width");
-            canvas.style.removeProperty("height");
-          }
-        }
+      }
+    },
+
+    getDevicePixelRatio() {
+      return (typeof devicePixelRatio == 'number' && devicePixelRatio) || 1.0;
+    },
+
+    getHiDPIScale() {
+      return Browser.isHiDPIAware ? Browser.getDevicePixelRatio() : 1.0;
+    },
+
+    setHiDPIAware(isHiDPIAware) {
+      isHiDPIAware = !!isHiDPIAware; // coerce to boolean
+      if (Browser.isHiDPIAware != isHiDPIAware) {
+        Browser.isHiDPIAware = isHiDPIAware;
+        const canvas = Module['canvas'];
+        Browser.updateCanvasDimensions(canvas, canvas.clientWidth, canvas.clientHeight);
+        Browser.updateResizeListeners();
       }
     },
   },

src/library_glfw.js

@@ -37,7 +37,7 @@
 
 var LibraryGLFW = {
   $GLFW_Window__docs: '/** @constructor */',
-  $GLFW_Window: function(id, width, height, title, monitor, share) {
+  $GLFW_Window: function(id, width, height, framebufferWidth, framebufferHeight, title, monitor, share) {
       this.id = id;
       this.x = 0;
       this.y = 0;
@@ -46,6 +46,8 @@ var LibraryGLFW = {
       this.storedY = 0; // Used to store Y before fullscreen
       this.width = width;
       this.height = height;
+      this.framebufferWidth = framebufferWidth;
+      this.framebufferHeight = framebufferHeight;
       this.storedWidth = width; // Used to store width before fullscreen
       this.storedHeight = height; // Used to store height before fullscreen
       this.title = title;
@@ -550,44 +552,46 @@ var LibraryGLFW = {
       event.preventDefault();
     },
 
-    onCanvasResize: (width, height) => {
+    onCanvasResize: (width, height, framebufferWidth, framebufferHeight) => {
       if (!GLFW.active) return;
 
-      var resizeNeeded = true;
+      var resizeNeeded = false;
 
       // If the client is requesting fullscreen mode
       if (document["fullscreen"] || document["fullScreen"] || document["mozFullScreen"] || document["webkitIsFullScreen"]) {
-        GLFW.active.storedX = GLFW.active.x;
-        GLFW.active.storedY = GLFW.active.y;
-        GLFW.active.storedWidth = GLFW.active.width;
-        GLFW.active.storedHeight = GLFW.active.height;
-        GLFW.active.x = GLFW.active.y = 0;
-        GLFW.active.width = screen.width;
-        GLFW.active.height = screen.height;
-        GLFW.active.fullscreen = true;
-
+        if (!GLFW.active.fullscreen) {
+          resizeNeeded = width != screen.width || height != screen.height;
+          GLFW.active.storedX = GLFW.active.x;
+          GLFW.active.storedY = GLFW.active.y;
+          GLFW.active.storedWidth = GLFW.active.width;
+          GLFW.active.storedHeight = GLFW.active.height;
+          GLFW.active.x = GLFW.active.y = 0;
+          GLFW.active.width = screen.width;
+          GLFW.active.height = screen.height;
+          GLFW.active.fullscreen = true;
+        }
       // If the client is reverting from fullscreen mode
       } else if (GLFW.active.fullscreen == true) {
+        resizeNeeded = width != GLFW.active.storedWidth || height != GLFW.active.storedHeight;
         GLFW.active.x = GLFW.active.storedX;
         GLFW.active.y = GLFW.active.storedY;
         GLFW.active.width = GLFW.active.storedWidth;
         GLFW.active.height = GLFW.active.storedHeight;
         GLFW.active.fullscreen = false;
-
-      // If the width/height values do not match current active window sizes
-      } else if (GLFW.active.width != width || GLFW.active.height != height) {
-          GLFW.active.width = width;
-          GLFW.active.height = height;
-      } else {
-        resizeNeeded = false;
       }
 
-      // If any of the above conditions were true, we need to resize the canvas
       if (resizeNeeded) {
-        // resets the canvas size to counter the aspect preservation of Browser.updateCanvasDimensions
-        Browser.setCanvasSize(GLFW.active.width, GLFW.active.height, true);
-        // TODO: Client dimensions (clientWidth/clientHeight) vs pixel dimensions (width/height) of
-        // the canvas should drive window and framebuffer size respectfully.
+        // width or height is changed (fullscreen / exit fullscreen) which will call this listener back
+        // with proper framebufferWidth/framebufferHeight
+        Browser.setCanvasSize(GLFW.active.width, GLFW.active.height);
+      } else if (GLFW.active.width != width ||
+                 GLFW.active.height != height ||
+                 GLFW.active.framebufferWidth != framebufferWidth ||
+                 GLFW.active.framebufferHeight != framebufferHeight) {
+        GLFW.active.width = width;
+        GLFW.active.height = height;
+        GLFW.active.framebufferWidth = framebufferWidth;
+        GLFW.active.framebufferHeight = framebufferHeight;
         GLFW.onWindowSizeChanged();
         GLFW.onFramebufferSizeChanged();
       }
@@ -611,7 +615,7 @@ var LibraryGLFW = {
 
 #if USE_GLFW == 3
       if (GLFW.active.framebufferSizeFunc) {
-        {{{ makeDynCall('viii', 'GLFW.active.framebufferSizeFunc') }}}(GLFW.active.id, GLFW.active.width, GLFW.active.height);
+        {{{ makeDynCall('viii', 'GLFW.active.framebufferSizeFunc') }}}(GLFW.active.id, GLFW.active.framebufferWidth, GLFW.active.framebufferHeight);
       }
 #endif
     },
@@ -1045,7 +1049,8 @@ var LibraryGLFW = {
       if (!Module.ctx && useWebGL) return 0;
 
       // Get non alive id
-      var win = new GLFW_Window(id, width, height, title, monitor, share);
+      const canvas = Module['canvas'];
+      var win = new GLFW_Window(id, canvas.clientWidth, canvas.clientHeight, canvas.width, canvas.height, title, monitor, share);
 
       // Set window to array
       if (id - 1 == GLFW.windows.length) {
@@ -1160,9 +1165,10 @@ var LibraryGLFW = {
     Module["canvas"].addEventListener('drop', GLFW.onDrop, true);
     Module["canvas"].addEventListener('dragover', GLFW.onDragover, true);
 
-    Browser.resizeListeners.push((width, height) => {
-       GLFW.onCanvasResize(width, height);
+    Browser.resizeListeners.push((width, height, framebufferWidth, framebufferHeight) => {
+      GLFW.onCanvasResize(width, height, framebufferWidth, framebufferHeight);
     });
+
     return 1; // GL_TRUE
   },
 
@@ -1369,8 +1375,8 @@ var LibraryGLFW = {
 
     var win = GLFW.WindowFromId(winid);
     if (win) {
-      ww = win.width;
-      wh = win.height;
+      ww = win.framebufferWidth;
+      wh = win.framebufferHeight;
     }
 
     if (width) {