remove DPR cap (#4896)

elalish · web-flow · commit 5604ec8caab6 · 2024-09-23T15:45:08.000-07:00
diff --git a/packages/model-viewer/src/test/three-components/Renderer-spec.ts b/packages/model-viewer/src/test/three-components/Renderer-spec.ts
@@ -21,7 +21,7 @@ import {$intersectionObserver, $isElementInViewport, $onResize, $renderer, $scen
 import {ModelViewerElement} from '../../model-viewer.js';
 import {ModelScene} from '../../three-components/ModelScene.js';
 import {Renderer} from '../../three-components/Renderer.js';
-import {resolveDpr, waitForEvent} from '../../utilities.js';
+import {waitForEvent} from '../../utilities.js';
 import {assetPath} from '../helpers.js';
 
 let externalCamera: Camera;
@@ -148,7 +148,7 @@ suite('Renderer with two scenes', () => {
       const height = 400;
       externalElement[$onResize]({width, height});
 
-      const dpr = resolveDpr();
+      const dpr = window.devicePixelRatio;
       expect(externalWidth).to.be.eq(width * dpr);
       expect(externalHeight).to.be.eq(height * dpr);
     });
diff --git a/packages/model-viewer/src/test/utilities-spec.ts b/packages/model-viewer/src/test/utilities-spec.ts
@@ -15,7 +15,7 @@
 
 import {expect} from '@esm-bundle/chai';
 
-import {clamp, deserializeUrl, resolveDpr, step} from '../utilities.js';
+import {clamp, deserializeUrl, step} from '../utilities.js';
 
 suite('utils', () => {
   suite('deserializeUrl', () => {
@@ -34,31 +34,6 @@ suite('utils', () => {
     });
   });
 
-  suite('resolveDpr', () => {
-    suite('when <meta name="viewport"> is present', () => {
-      test('resolves the device pixel ratio', () => {
-        const resolvedDpr = resolveDpr();
-        // NOTE(cdata): The main test frame is assumed to have a
-        // <meta name="viewport">. If this changes, it is probably by
-        // accident.
-        const actualDpr = self.devicePixelRatio;
-
-        expect(resolvedDpr).to.be.equal(actualDpr);
-      });
-    });
-
-    suite('when <meta name="viewport"> is not present', () => {
-      test.skip(
-          'caps the device pixel ratio to 1',
-          () => {
-              // There is not a good way to test this given the current
-              // factoring and bundling constraints
-              // TODO:
-              // https://github.com/google/model-viewer/issues/262
-          });
-    });
-  });
-
   suite('step', () => {
     test('returns 0 for values below edge', () => {
       expect(step(0.5, 0.1)).to.be.equal(0);
diff --git a/packages/model-viewer/src/three-components/ModelScene.ts b/packages/model-viewer/src/three-components/ModelScene.ts
@@ -23,7 +23,6 @@ import ModelViewerElementBase, {$renderer, EffectComposerInterface, RendererInte
 import {ModelViewerElement} from '../model-viewer.js';
 import {normalizeUnit} from '../styles/conversions.js';
 import {NumberNode, parseExpressions} from '../styles/parsers.js';
-import {resolveDpr} from '../utilities.js';
 
 import {Damper, SETTLING_TIME} from './Damper.js';
 import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js';
@@ -340,7 +339,7 @@ export class ModelScene extends Scene {
     this.aspect = this.width / this.height;
 
     if (this.externalRenderer != null) {
-      const dpr = resolveDpr();
+      const dpr = window.devicePixelRatio;
       this.externalRenderer.resize(width * dpr, height * dpr);
     }
 
diff --git a/packages/model-viewer/src/three-components/Renderer.ts b/packages/model-viewer/src/three-components/Renderer.ts
@@ -18,7 +18,7 @@ import {ACESFilmicToneMapping, Event, EventDispatcher, NeutralToneMapping, Vecto
 import {$updateEnvironment} from '../features/environment.js';
 import {ModelViewerGlobalConfig} from '../features/loading.js';
 import ModelViewerElementBase, {$canvas, $tick, $updateSize} from '../model-viewer-base.js';
-import {clamp, isDebugMode, resolveDpr} from '../utilities.js';
+import {clamp, isDebugMode} from '../utilities.js';
 
 import {ARRenderer} from './ARRenderer.js';
 import {CachingGLTFLoader} from './CachingGLTFLoader.js';
@@ -65,9 +65,9 @@ export class Renderer extends
   static get singleton() {
     if (!this._singleton) {
       this._singleton = new Renderer({
-        powerPreference:
-            (((self as any).ModelViewerElement || {}) as ModelViewerGlobalConfig)
-                .powerPreference ||
+        powerPreference: (((self as any).ModelViewerElement || {}) as
+                          ModelViewerGlobalConfig)
+                             .powerPreference ||
             DEFAULT_POWER_PREFERENCE,
         debug: isDebugMode()
       });
@@ -134,7 +134,7 @@ export class Renderer extends
   constructor(options: RendererOptions) {
     super();
 
-    this.dpr = resolveDpr();
+    this.dpr = window.devicePixelRatio;
 
     this.canvas3D = document.createElement('canvas');
     this.canvas3D.id = 'webgl-canvas';
@@ -248,7 +248,7 @@ export class Renderer extends
    * device pixel ratio.
    */
   private updateRendererSize() {
-    const dpr = resolveDpr();
+    const dpr = window.devicePixelRatio;
     if (dpr !== this.dpr) {
       // If the device pixel ratio has changed due to page zoom, elements
       // specified by % width do not fire a resize event even though their CSS
diff --git a/packages/model-viewer/src/utilities.ts b/packages/model-viewer/src/utilities.ts
@@ -125,74 +125,6 @@ export const clamp =
     (value: number, lowerLimit: number, upperLimit: number): number =>
         Math.max(lowerLimit, Math.min(upperLimit, value));
 
-
-// The DPR we use for a "capped" scenario (see resolveDpr below):
-export const CAPPED_DEVICE_PIXEL_RATIO = 1;
-
-
-/**
- * This helper analyzes the layout of the current page to decide if we should
- * use the natural device pixel ratio, or a capped value.
- *
- * We cap DPR if there is no meta viewport (suggesting that user is not
- * consciously specifying how to scale the viewport relative to the device
- * screen size).
- *
- * The rationale is that this condition typically leads to a pathological
- * outcome on mobile devices. When the window dimensions are scaled up on a
- * device with a high DPR, we create a canvas that is much larger than
- * appropriate to accommodate for the pixel density if we naively use the
- * reported DPR.
- *
- * This value needs to be measured in real time, as device pixel ratio can
- * change over time (e.g., when a user zooms the page). Also, in some cases
- * (such as Firefox on Android), the window's innerWidth is initially reported
- * as the same as the screen's availWidth but changes later.
- *
- * A user who specifies a meta viewport, thereby consciously creating scaling
- * conditions where <model-viewer> is slow, will be encouraged to live their
- * best life.
- */
-export const resolveDpr: () => number = (() => {
-  // If true, implies that the user is conscious of the viewport scaling
-  // relative to the device screen size.
-  const HAS_META_VIEWPORT_TAG = (() => {
-    // Search result pages sometimes do not include a meta viewport tag even
-    // though they are certainly modern and work properly with devicePixelRatio.
-    if (document.documentElement.getAttribute('itemtype')
-            ?.includes('schema.org/SearchResultsPage')) {
-      return true;
-    }
-
-    if (window.self !== window.top) {
-      // iframes can't detect the meta viewport tag, so assume the top-level
-      // page has one.
-      return true;
-    }
-
-    const metas = document.head != null ?
-        Array.from(document.head.querySelectorAll('meta')) :
-        [];
-
-    for (const meta of metas) {
-      if (meta.name === 'viewport') {
-        return true;
-      }
-    }
-
-    return false;
-  })();
-
-  if (!HAS_META_VIEWPORT_TAG) {
-    console.warn(
-        'No <meta name="viewport"> detected; <model-viewer> will cap pixel density at 1.');
-  }
-
-  return () => HAS_META_VIEWPORT_TAG ? window.devicePixelRatio :
-                                       CAPPED_DEVICE_PIXEL_RATIO;
-})();
-
-
 /**
  * Debug mode is enabled when one of the two following conditions is true:
  *
