Merge 35a0d7e into 3dfa00e

visgl · Nov 18, 2019 · 187ee9b · 187ee9b
2 parents 3dfa00e + 35a0d7e
commit 187ee9b
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 29 deletions.
diff --git a/modules/webgl/src/context/context.js b/modules/webgl/src/context/context.js
@@ -204,10 +204,16 @@ function getVersion(gl) {
 // use devicePixelRatio to set canvas width and height
 function setDevicePixelRatio(gl, devicePixelRatio, options) {
   // NOTE: if options.width and options.height not used remove in v8
-  const clientWidth =
-    'width' in options ? options.width : gl.canvas.clientWidth || gl.canvas.width || 1;
-  const clientHeight =
-    'height' in options ? options.height : gl.canvas.clientHeight || gl.canvas.height || 1;
+  let clientWidth = 'width' in options ? options.width : gl.canvas.clientWidth;
+  let clientHeight = 'height' in options ? options.height : gl.canvas.clientHeight;
+
+  if (!clientWidth || !clientHeight) {
+    log.log(1, 'Canvas clientWidth/clientHeight is 0')();
+    // by forcing devicePixel ratio to 1, we do not scale gl.canvas.width and height in each frame.
+    devicePixelRatio = 1;
+    clientWidth = gl.canvas.width || 1;
+    clientHeight = gl.canvas.height || 1;
+  }
 
   gl.luma = gl.luma || {};
   gl.luma.canvasSizeInfo = gl.luma.canvasSizeInfo || {};

diff --git a/modules/webgl/src/utils/device-pixels.js b/modules/webgl/src/utils/device-pixels.js
@@ -2,8 +2,11 @@
 
 // multiplier need to convert CSS size to Device size
 export function cssToDeviceRatio(gl) {
-  if (gl.canvas) {
-    return gl.drawingBufferWidth / (gl.canvas.clientWidth || gl.canvas.width || 1);
+  if (gl.canvas && gl.luma) {
+    // For headless gl we might have used custom width and height
+    // hence use cached clientWidth
+    const {clientWidth} = gl.luma.canvasSizeInfo;
+    return clientWidth ? gl.drawingBufferWidth / clientWidth : 1;
   }
   // use default device pixel ratio
   return 1;

diff --git a/modules/webgl/test/context/context.spec.js b/modules/webgl/test/context/context.spec.js
@@ -51,29 +51,91 @@ test('WebGL#isWebGL2', t => {
 
 test('WebGL#resizeGLContext', t => {
   const glContext = {
-    canvas: {width: 10, height: 20}
+    canvas: {clientWidth: 10, clientHeight: 20}
   };
 
+  // Using default pixel ratio of 1
   // update drawing buffer size to simulate gl context
-  glContext.drawingBufferWidth = glContext.canvas.width;
-  glContext.drawingBufferHeight = glContext.canvas.height;
+  glContext.drawingBufferWidth = glContext.canvas.clientWidth;
+  glContext.drawingBufferHeight = glContext.canvas.clientHeight;
   resizeGLContext(glContext);
-
   t.deepEqual(
     glContext.luma.canvasSizeInfo,
     {clientWidth: 10, clientHeight: 20, devicePixelRatio: 1},
     'Canvas size info should be cached'
   );
 
+  // Using custom device pixel ratio
+  let DPR = 12.5;
   // update drawing buffer size to simulate gl context
-  glContext.drawingBufferWidth = Math.floor(glContext.canvas.width * 12.5);
-  glContext.drawingBufferHeight = Math.floor(glContext.canvas.height * 12.5);
-  resizeGLContext(glContext, {useDevicePixels: 12.5});
+  glContext.drawingBufferWidth = Math.floor(glContext.canvas.clientWidth * DPR);
+  glContext.drawingBufferHeight = Math.floor(glContext.canvas.clientHeight * DPR);
+  resizeGLContext(glContext, {useDevicePixels: DPR});
+  t.deepEqual(
+    glContext.luma.canvasSizeInfo,
+    {clientWidth: 10, clientHeight: 20, devicePixelRatio: DPR},
+    'Cached canvas size info should be updated'
+  );
 
+  // trigger again without any changes
+  resizeGLContext(glContext, {useDevicePixels: 12.5});
   t.deepEqual(
     glContext.luma.canvasSizeInfo,
     {clientWidth: 10, clientHeight: 20, devicePixelRatio: 12.5},
-    'Canvas size info should be updated'
+    'Cached canvas size should remain same'
+  );
+
+  // update device pixel ratio
+  DPR = 5;
+  // update drawing buffer size to simulate gl context
+  glContext.drawingBufferWidth = Math.floor(glContext.canvas.clientWidth * DPR);
+  glContext.drawingBufferHeight = Math.floor(glContext.canvas.clientHeight * DPR);
+  resizeGLContext(glContext, {useDevicePixels: DPR});
+  t.deepEqual(
+    glContext.luma.canvasSizeInfo,
+    {clientWidth: 10, clientHeight: 20, devicePixelRatio: DPR},
+    'Cached canvas size info should be updated'
+  );
+
+  // update clientWidth and clientHeight
+  Object.assign(glContext, {canvas: {clientWidth: 5, clientHeight: 2}});
+  // update drawing buffer size to simulate gl context
+  glContext.drawingBufferWidth = Math.floor(glContext.canvas.clientWidth * DPR);
+  glContext.drawingBufferHeight = Math.floor(glContext.canvas.clientHeight * DPR);
+  resizeGLContext(glContext, {useDevicePixels: DPR});
+  t.deepEqual(
+    glContext.luma.canvasSizeInfo,
+    {clientWidth: 5, clientHeight: 2, devicePixelRatio: DPR},
+    'Cached canvas size info should be updated'
+  );
+
+  // update clientWidth and clientHeight to undefiend, should use canvas.width and height
+  // and use 1.0 as devicePixelRatio
+  Object.assign(glContext.canvas, {clientWidth: undefined, clientHeight: undefined});
+  // update drawing buffer size to simulate gl context
+  glContext.drawingBufferWidth = Math.floor(glContext.canvas.width); // DPR is 1
+  glContext.drawingBufferHeight = Math.floor(glContext.canvas.height); // DPR is 1
+  resizeGLContext(glContext, {useDevicePixels: DPR});
+  t.deepEqual(
+    glContext.luma.canvasSizeInfo,
+    {
+      clientWidth: glContext.canvas.width,
+      clientHeight: glContext.canvas.height,
+      devicePixelRatio: 1.0
+    },
+    'Should fallback to canvas size clientWidth/clientHeight are not availbe'
+  );
+
+  // trigger resize again
+  resizeGLContext(glContext, {useDevicePixels: DPR});
+  t.deepEqual(
+    glContext.luma.canvasSizeInfo,
+    {
+      clientWidth: glContext.canvas.width,
+      clientHeight: glContext.canvas.height,
+      devicePixelRatio: 1.0
+    },
+    'Cached canvas size info should remain same'
   );
 
   t.end();

diff --git a/modules/webgl/test/utils/device-pixels.spec.js b/modules/webgl/test/utils/device-pixels.spec.js
@@ -10,9 +10,12 @@ const MAP_TEST_CASES = [
     gl: {
       drawingBufferWidth: 10,
       drawingBufferHeight: 10,
-      canvas: {
-        clientWidth: 10,
-        clientHeight: 10
+      canvas: {}, // To emulate real context
+      luma: {
+        canvasSizeInfo: {
+          clientWidth: 10,
+          clientHeight: 10
+        }
       }
     },
     ratio: 1,
@@ -63,9 +66,12 @@ const MAP_TEST_CASES = [
     gl: {
       drawingBufferWidth: 1,
       drawingBufferHeight: 1,
-      canvas: {
-        clientWidth: 1,
-        clientHeight: 1
+      canvas: {},
+      luma: {
+        canvasSizeInfo: {
+          clientWidth: 1,
+          clientHeight: 1
+        }
       }
     },
     ratio: 1,
@@ -92,9 +98,12 @@ const MAP_TEST_CASES = [
     gl: {
       drawingBufferWidth: 10 * HIGH_DPR,
       drawingBufferHeight: 10 * HIGH_DPR,
-      canvas: {
-        clientWidth: 10,
-        clientHeight: 10
+      canvas: {},
+      luma: {
+        canvasSizeInfo: {
+          clientWidth: 10,
+          clientHeight: 10
+        }
       }
     },
     ratio: HIGH_DPR,
@@ -148,9 +157,12 @@ const MAP_TEST_CASES = [
     gl: {
       drawingBufferWidth: 10 * HIGH_DPR_FRACTION,
       drawingBufferHeight: 10 * HIGH_DPR_FRACTION,
-      canvas: {
-        clientWidth: 10,
-        clientHeight: 10
+      canvas: {},
+      luma: {
+        canvasSizeInfo: {
+          clientWidth: 10,
+          clientHeight: 10
+        }
       }
     },
     ratio: HIGH_DPR_FRACTION,
@@ -208,9 +220,12 @@ const MAP_TEST_CASES = [
     gl: {
       drawingBufferWidth: 10 * LOW_DPR,
       drawingBufferHeight: 10 * LOW_DPR,
-      canvas: {
-        clientWidth: 10,
-        clientHeight: 10
+      canvas: {},
+      luma: {
+        canvasSizeInfo: {
+          clientWidth: 10,
+          clientHeight: 10
+        }
       }
     },
     ratio: LOW_DPR,