Remove gl resize (playcanvas#3151)

yaustar · steveny-sc · Steven Yau · web-flow · commit 6b881eb8befa · 2021-05-20T10:06:52.000+01:00
* Revert "Revert "Remove gl canvas dependency resize (playcanvas#3124)" (playcanvas#3146)" This reverts commit ebcdfc3. * Refactor gl.canvas to use clientWidth/Height instead of relying on external calls to resizeCanvas Fixes playcanvas#3114 * Renamed updateGlCanvas to updateCanvas * Made updateCanvasSize public to be called by the document page JS Planning a little ahead here. This function will need to be called when the resize and orientation events are fired for some older projects to works as they depend on the canvas resolution being correct after a resize event. * Got rid of return statement Co-authored-by: Steven Yau <syau@snapchat.com> Co-authored-by: Steven Yau <social@stevenyau.co.uk>
diff --git a/src/framework/application.js b/src/framework/application.js
@@ -106,6 +106,7 @@ import { ApplicationStats } from './stats.js';
 import { Entity } from './entity.js';
 import { SceneRegistry } from './scene-registry.js';
 import { SceneDepth } from './scene-depth.js';
+import { XRTYPE_VR } from "../xr/constants";
 
 import {
     FILLMODE_FILL_WINDOW, FILLMODE_KEEP_ASPECT,
@@ -1394,10 +1395,7 @@ class Application extends EventHandler {
         this.graphicsDevice.canvas.style.width = width + 'px';
         this.graphicsDevice.canvas.style.height = height + 'px';
 
-        // In AUTO mode the resolution is changed to match the canvas size
-        if (this._resolutionMode === RESOLUTION_AUTO) {
-            this.setCanvasResolution(RESOLUTION_AUTO);
-        }
+        this.updateCanvasSize();
 
         // return the final values calculated for width and height
         return {
@@ -1406,6 +1404,27 @@ class Application extends EventHandler {
         };
     }
 
+    /**
+     * @function
+     * @name Application#updateCanvasSize
+     * @description Updates the {@link GraphicsDevice} canvas size to match the canvas size on the document page.
+     * It is recommended to call this function when the canvas size changes (e.g on window resize and orientation change
+     * events) so that the canvas resolution is immediately updated.
+     */
+    updateCanvasSize() {
+        // Don't update if we are in VR
+        if ((this.vr && this.vr.display) || (this.xr.active && this.xr.type === XRTYPE_VR)) {
+            return;
+        }
+
+        // In AUTO mode the resolution is changed to match the canvas size
+        if (this._resolutionMode === RESOLUTION_AUTO) {
+            // Check if the canvas DOM has changed size
+            const canvas = this.graphicsDevice.canvas;
+            this.graphicsDevice.resizeCanvas(canvas.clientWidth, canvas.clientHeight);
+        }
+    }
+
     /**
      * @private
      * @name Application#onLibrariesLoaded
@@ -2152,6 +2171,7 @@ var makeTick = function (_app) {
         application.fire("framerender");
 
         if (application.autoRender || application.renderNextFrame) {
+            application.updateCanvasSize();
             application.render();
             application.renderNextFrame = false;
         }
diff --git a/src/graphics/graphics-device.js b/src/graphics/graphics-device.js
@@ -3475,6 +3475,7 @@ class GraphicsDevice extends EventHandler {
     }
 
     /**
+     * @private
      * @function
      * @name GraphicsDevice#resizeCanvas
      * @description Sets the width and height of the canvas, then fires the 'resizecanvas' event.
@@ -3488,16 +3489,15 @@ class GraphicsDevice extends EventHandler {
         this._width = width;
         this._height = height;
 
-        const ratio = Math.min(this._maxPixelRatio, window.devicePixelRatio);
-        width *= ratio;
-        height *= ratio;
-
-        if (this.canvas.width === width && this.canvas.height === height)
-            return;
+        var ratio = Math.min(this._maxPixelRatio, window.devicePixelRatio);
+        width = Math.floor(width * ratio);
+        height = Math.floor(height * ratio);
 
-        this.canvas.width = width;
-        this.canvas.height = height;
-        this.fire(EVENT_RESIZE, width, height);
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.fire(EVENT_RESIZE, width, height);
+        }
     }
 
     setResolution(width, height) {
