fix backbuffer/drawingbuffer size calc

Author: greggman

src/utils.js

@@ -97,22 +97,29 @@ export function glTypeToTypedArray(type) {
 
 export function getDrawingbufferInfo(gl) {
   return {
-    samples: gl.getParameter(gl.SAMPLES),
+    samples: gl.getParameter(gl.SAMPLES) || 1,
     depthBits: gl.getParameter(gl.DEPTH_BITS),
+    stencilBits: gl.getParameter(gl.STENCIL_BITS),
     contextAttributes: gl.getContextAttributes(),
   };
 }
+
+function computeDepthStencilSize(drawingBufferInfo) {
+  const {depthBits, stencilBits} = drawingBufferInfo
+  const depthSize = (depthBits + stencilBits + 7) / 8 | 0;
+  return depthSize === 3 ? 4 : depthSize;
+}
+
 export function computeDrawingbufferSize(gl, drawingBufferInfo) {
-  // this will need to change for hi-color support
   if (gl.isContextLost()) {
     return 0;
   }
-  const {samples, depthBits, contextAttributes} = drawingBufferInfo;
-  const size = gl.drawingBufferWidth * gl.drawingBufferHeight * 4 || 0;
-  const depth = contextAttributes.depth ? 1 : 0;
-  const stencil = contextAttributes.stencil ? 1 : 0;
-  const depthSize = Math.min(stencil + depthBits > 16 ? 4 : 2, 4);
-  return size + size * samples + size * depth * depthSize;
+  const {samples} = drawingBufferInfo;
+  // this will need to change for hi-color support
+  const colorSize = 4;
+  const size = gl.drawingBufferWidth * gl.drawingBufferHeight;
+  const depthStencilSize = computeDepthStencilSize(drawingBufferInfo);
+  return size * colorSize + size * samples * colorSize + size * depthStencilSize;
 }
 
 // I know this is not a full check

test/tests/info-tests.js

@@ -5,9 +5,22 @@ import {createContext, createContext2} from '../webgl.js';
 
 describe('info tests', () => {
   it('test base state webgl1', () => {
-    const {ext, drawingbufferSize} = createContext();
+    const {gl, ext, drawingbufferSize} = createContext();
     assertTruthy(ext, 'got extension');
 
+    // compute this size ourselves so we can compare
+    const size = gl.drawingBufferWidth * gl.drawingBufferHeight;
+    const colorSize = 4;
+    const samples = gl.getParameter(gl.SAMPLES) || 1;
+    const depthStencilBytes = (gl.getParameter(gl.DEPTH_BITS) + gl.getParameter(gl.STENCIL_BITS) + 7) / 8 | 0;
+    const depthStencilSize = depthStencilBytes === 3 ? 4 : depthStencilBytes;
+    const canvasSize =
+       size * colorSize +            // display buffer
+       size * colorSize * samples +  // drawing buffer
+       size * depthStencilSize;      // depth + stencil buffer
+
+    assertEqual(drawingbufferSize, canvasSize);
+
     const info = ext.getMemoryInfo();
     const {memory, resources} = info;