@luma.gl/webgl 8.6.0-alpha.5 → 9.0.0-alpha.11

package/src/classes/vertex-array.ts

@@ -1,484 +0,0 @@
-import {log, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import Accessor from './accessor';
-import Buffer from './webgl-buffer';
-import Program from './program'; 
-import type {AttributeBinding} from '../helpers/program-bindings'
-import ProgramConfiguration from './program-configuration';
-import VertexArrayObject, {VertexArrayObjectProps} from './vertex-array-object';
-
-const ERR_ATTRIBUTE_TYPE =
-  'VertexArray: attributes must be Buffers or constants (i.e. typed array)';
-
-// This is done to support mat type attributes.
-// See section "Notes about setting mat type attributes"
-// in vertex-array.md
-const MULTI_LOCATION_ATTRIBUTE_REGEXP = /^(.+)__LOCATION_([0-9]+)$/;
-
-export type VertexArrayProps = {
-  id?: string;
-  program?: Program;
-  configuration?: ProgramConfiguration;
-  attributes?: Record<string, any>;
-  elements?: any;
-  bindOnUse?: boolean;
-};
-
-export type DrawParams = {
-  elementCount: number;
-  indexType: Uint16ArrayConstructor | Uint32ArrayConstructor;
-  indexOffset: number;
-  isIndexed: boolean;
-  isInstanced: boolean;
-  indexCount: number;
-  vertexCount: number;
-  instanceCount: number;
-};
-
-export default class VertexArray {
-  id: string;
-  gl: WebGLRenderingContext;
-  readonly attributes: object = {};
-
-  vertexArrayObject: VertexArrayObject;
-  accessors: Accessor[] = [];
-  configuration: ProgramConfiguration | null = null;
-
-  // Extracted information
-  elements = null;
-  elementsAccessor = null;
-  values = null;
-  unused = null;
-  drawParams = null;
-  buffer = null; // For attribute 0 on desktops, and created when unbinding buffers
-  
-  bindOnUse = false;
-
-  constructor(gl: WebGLRenderingContext, props?: VertexArrayProps) {
-    // Use program's id if program is supplied but no id is supplied
-    const id = props?.id || (props?.program && props?.program.id);
-    // super(gl, Object.assign({}, props, {id}));
-
-    this.vertexArrayObject = new VertexArrayObject(gl);
-
-    this.id = id;
-    this.gl = gl;
-    this.configuration = null;
-
-    this.initialize(props);
-    Object.seal(this);
-  }
-
-  delete(): void {
-    if (this.buffer) {
-      this.buffer.delete();
-    }
-
-    this.vertexArrayObject.delete();
-  }
-
-  initialize(props?: VertexArrayProps) {
-    this.reset();
-    this.configuration = null;
-    this.bindOnUse = false;
-    return this.setProps(props || {});
-  }
-
-  // Resets all attributes (to default valued constants)
-  reset() {
-    // this.vertexArrayObject.reset();
-
-    this.elements = null;
-    this.elementsAccessor = null;
-    const {MAX_ATTRIBUTES} = this.vertexArrayObject;
-    this.values = new Array(MAX_ATTRIBUTES).fill(null);
-    this.accessors = new Array(MAX_ATTRIBUTES).fill(null);
-    this.unused = {};
-
-    // Auto detects draw params
-    this.drawParams = null;
-
-    return this;
-  }
-
-  setProps(props: VertexArrayProps) {
-    if ('program' in props) {
-      this.configuration = props.program && props.program.configuration;
-    }
-    if ('configuration' in props) {
-      this.configuration = props.configuration;
-    }
-    if ('attributes' in props) {
-      this.setAttributes(props.attributes);
-    }
-    if ('elements' in props) {
-      this.setElementBuffer(props.elements);
-    }
-    if ('bindOnUse' in props) {
-      // @ts-expect-error
-      props = props.bindOnUse;
-    }
-    return this;
-  }
-
-  // Automatically called if buffers changed through VertexArray API
-  clearDrawParams(): void {
-    this.drawParams = null;
-  }
-
-  getDrawParams(): DrawParams {
-    // Auto deduced draw parameters
-    this.drawParams = this.drawParams || this._updateDrawParams();
-
-    return this.drawParams;
-  }
-
-  // Set (bind) an array or map of vertex array buffers, either in numbered or named locations.
-  // For names that are not present in `location`, the supplied buffers will be ignored.
-  // if a single buffer of type GL.ELEMENT_ARRAY_BUFFER is present, it will be set as elements
-  //   Signatures:
-  //     {attributeName: buffer}
-  //     {attributeName: [buffer, accessor]}
-  //     {attributeName: (typed) array} => constant
-  setAttributes(attributes): this {
-    Object.assign(this.attributes, attributes);
-    this.vertexArrayObject.bind(() => {
-      for (const locationOrName in attributes) {
-        const value = attributes[locationOrName];
-        this._setAttribute(locationOrName, value);
-      }
-      // Make sure we don't leave any bindings
-      this.gl.bindBuffer(GL.ARRAY_BUFFER, null);
-    });
-
-    return this;
-  }
-
-  // Set (bind) an elements buffer, for indexed rendering.
-  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
-  setElementBuffer(elementBuffer: Buffer | null = null, accessor = {}): this {
-    this.elements = elementBuffer; // Save value for debugging
-    this.elementsAccessor = accessor;
-    this.clearDrawParams();
-    this.vertexArrayObject.setElementBuffer(elementBuffer, accessor);
-
-    return this;
-  }
-
-  // Set a location in vertex attributes array to a buffer
-  setBuffer(locationOrName: number | string, buffer: Buffer, appAccessor = {}): this {
-    // Check target
-    if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
-      this.setElementBuffer(buffer, appAccessor);
-      return this;
-    }
-
-    const {location, accessor} = this._resolveLocationAndAccessor(
-      locationOrName,
-      buffer,
-      buffer.accessor,
-      appAccessor
-    );
-
-    if (location >= 0) {
-      this.values[location] = buffer;
-      this.accessors[location] = accessor;
-      this.clearDrawParams();
-      this.vertexArrayObject.setBuffer(location, buffer, accessor);
-    }
-
-    return this;
-  }
-
-  // Set attribute to constant value (small typed array corresponding to one vertex' worth of data)
-  setConstant(locationOrName, arrayValue, appAccessor = {}): this {
-    // @ts-expect-error
-    const {location, accessor} = this._resolveLocationAndAccessor(
-      locationOrName,
-      arrayValue,
-      // Ensure that size isn't taken from program for multi-column
-      // attributes
-      {size: arrayValue.length, ...appAccessor}
-    );
-
-    if (location >= 0) {
-      arrayValue = this.vertexArrayObject._normalizeConstantArrayValue(arrayValue);
-
-      this.values[location] = arrayValue;
-      this.accessors[location] = accessor;
-      this.clearDrawParams();
-
-      // NOTE: We set the actual constant value later on bind. We can't set the value now since
-      // constants are global and affect all other VertexArrays that have disabled attributes
-      // in the same location.
-      // We do disable the attribute which makes it use the global constant value at that location
-      this.vertexArrayObject.enable(location, false);
-    }
-
-    return this;
-  }
-
-  // Workaround for Chrome TransformFeedback binding issue
-  // If required, unbind temporarily to avoid conflicting with TransformFeedback
-  unbindBuffers(): this {
-    this.vertexArrayObject.bind(() => {
-      if (this.elements) {
-        this.vertexArrayObject.setElementBuffer(null);
-      }
-
-      // Chrome does not like buffers that are bound to several binding points,
-      // so we need to offer and unbind facility
-      // WebGL offers disabling, but no clear way to set a VertexArray buffer to `null`
-      // So we just bind all the attributes to the dummy "attribute zero" buffer
-      this.buffer = this.buffer || new Buffer(this.gl, {accessor: {size: 4}});
-
-      for (let location = 0; location < this.vertexArrayObject.MAX_ATTRIBUTES; location++) {
-        if (this.values[location] instanceof Buffer) {
-          this.gl.disableVertexAttribArray(location);
-          this.gl.bindBuffer(GL.ARRAY_BUFFER, this.buffer.handle);
-          this.gl.vertexAttribPointer(location, 1, GL.FLOAT, false, 0, 0);
-        }
-      }
-    });
-    return this;
-  }
-
-  // Workaround for Chrome TransformFeedback binding issue
-  // If required, rebind rebind after temporary unbind
-  bindBuffers(): this {
-    this.vertexArrayObject.bind(() => {
-      if (this.elements) {
-        this.setElementBuffer(this.elements);
-      }
-
-      for (let location = 0; location < this.vertexArrayObject.MAX_ATTRIBUTES; location++) {
-        const buffer = this.values[location];
-        if (buffer instanceof Buffer) {
-          this.setBuffer(location, buffer);
-        }
-      }
-    });
-    return this;
-  }
-
-  // Bind for use
-  // When a vertex array is about to be used, we must:
-  // - Set constant attributes (since these are stored on the context and reset on bind)
-  // - Check if we need to initialize the buffer
-  bindForDraw(vertexCount, instanceCount, func) {
-    let value;
-
-    this.vertexArrayObject.bind(() => {
-      // Make sure that any constant attributes are updated (stored on the context, not the VAO)
-      // Also handles attribute 0
-      this._setConstantAttributes(vertexCount, instanceCount);
-
-      value = func();
-    });
-
-    return value;
-  }
-
-  // PRIVATE
-
-  // Resolve locations and accessors
-  _resolveLocationAndAccessor(locationOrName, value, valueAccessor, appAccessor) {
-    const INVALID_RESULT = {
-      location: -1,
-      accessor: null
-    };
-
-    const {location, name} = this._getAttributeIndex(locationOrName);
-    if (!Number.isFinite(location) || location < 0) {
-      this.unused[locationOrName] = value;
-      log.once(3, () => `unused value ${locationOrName} in ${this.id}`)();
-      return INVALID_RESULT;
-    }
-
-    const accessInfo = this._getAttributeInfo(name || location);
-
-    // Attribute location wasn't directly found.
-    // Likely due to multi-location attributes (e.g. matrix)
-    if (!accessInfo) {
-      return INVALID_RESULT;
-    }
-
-    // Resolve the partial accessors into a final accessor
-    const currentAccessor = this.accessors[location] || {};
-    const accessor = Accessor.resolve(
-      accessInfo.accessor,
-      currentAccessor,
-      valueAccessor,
-      appAccessor
-    );
-
-    const {size, type} = accessor;
-    assert(Number.isFinite(size) && Number.isFinite(type));
-
-    return {location, accessor};
-  }
-
-  _getAttributeInfo(attributeName: string | number): AttributeBinding {
-    return this.configuration && this.configuration.getAttributeInfo(attributeName);
-  }
-
-  _getAttributeIndex(locationOrName: number | string): {location: number, name?: string} {
-    const location = Number(locationOrName);
-    if (Number.isFinite(location)) {
-      return {location};
-    }
-
-    const multiLocation = MULTI_LOCATION_ATTRIBUTE_REGEXP.exec(String(locationOrName));
-    const name = multiLocation ? multiLocation[1] : String(locationOrName);
-    const locationOffset = multiLocation ? Number(multiLocation[2]) : 0;
-
-    if (this.configuration) {
-      return {
-        location: this.configuration.getAttributeLocation(name) + locationOffset,
-        name
-      };
-    }
-
-    return {location: -1};
-  }
-
-  _setAttribute(locationOrName: number | string, value: Buffer): void;
-  _setAttribute(locationOrName: number | string, value: [Buffer, any]): void;
-  _setAttribute(locationOrName: number | string, value: ArrayBuffer | any[]): void;
-  _setAttribute(locationOrName: number | string, value: {value: Buffer}): void;
-
-  _setAttribute(locationOrName: number | string, value): void {
-    if (value instanceof Buffer) {
-      //  Signature: {attributeName: Buffer}
-      this.setBuffer(locationOrName, value);
-    } else if (Array.isArray(value) && value.length && value[0] instanceof Buffer) {
-      // Signature: {attributeName: [buffer, accessor]}
-      const buffer = value[0];
-      const accessor = value[1];
-      this.setBuffer(locationOrName, buffer, accessor);
-    } else if (ArrayBuffer.isView(value) || Array.isArray(value)) {
-      // Signature: {attributeName: constant}, constant == short (typed) array
-      const constant = value;
-      this.setConstant(locationOrName, constant);
-    } else if (value.buffer instanceof Buffer) {
-      // luma.gl v7: Support accessor objects with 'buffer' field
-      // for interleaved data
-      // Signature: {attributeName: {...accessor, buffer}}
-      const accessor = value;
-      this.setBuffer(locationOrName, accessor.buffer, accessor);
-    } else {
-      throw new Error(ERR_ATTRIBUTE_TYPE);
-    }
-  }
-
-  // Updates all constant attribute values (constants are used when vertex attributes are disabled).
-  // This needs to be done repeatedly since in contrast to buffer bindings,
-  // constants are stored on the WebGL context, not the VAO
-  _setConstantAttributes(vertexCount: number, instanceCount: number): void {
-    // TODO - use accessor to determine what length to use
-    const elementCount = Math.max(vertexCount | 0, instanceCount | 0);
-    let constant = this.values[0];
-    if (ArrayBuffer.isView(constant)) {
-      this._setConstantAttributeZero(constant, elementCount);
-    }
-
-    for (let location = 1; location < this.vertexArrayObject.MAX_ATTRIBUTES; location++) {
-      constant = this.values[location];
-      if (ArrayBuffer.isView(constant)) {
-        this._setConstantAttribute(location, constant);
-      }
-    }
-  }
-
-  _setConstantAttributeZero(constant, elementCount: number): void {
-    if (VertexArrayObject.isSupported(this.gl, {constantAttributeZero: true})) {
-      this._setConstantAttribute(0, constant);
-      return;
-    }
-
-    // Get a dummy buffer populated with repeated constants
-    const buffer = this.vertexArrayObject.getConstantBuffer(elementCount, constant);
-
-    // Set the buffer on location 0
-    this.vertexArrayObject.setBuffer(0, buffer, this.accessors[0]);
-  }
-
-  _setConstantAttribute(location: number | string, constant): void {
-    VertexArrayObject.setConstant(this.gl, location, constant);
-  }
-
-  // Walks the buffers and updates draw parameters
-  _updateDrawParams(): DrawParams {
-    const drawParams = {
-      elementCount: 0,
-      indexType: Uint16Array,
-      indexOffset: 0,
-      isIndexed: false,
-      isInstanced: false,
-      indexCount: Infinity,
-      vertexCount: Infinity,
-      instanceCount: Infinity
-    };
-
-    for (let location = 0; location < this.vertexArrayObject.MAX_ATTRIBUTES; location++) {
-      this._updateDrawParamsForLocation(drawParams, location);
-    }
-
-    if (this.elements) {
-      // indexing is autodetected - buffer with target GL.ELEMENT_ARRAY_BUFFER
-      // index type is saved for drawElement calls
-      drawParams.elementCount = this.elements.getElementCount(this.elements.accessor);
-      drawParams.isIndexed = true;
-      drawParams.indexType = this.elementsAccessor.type || this.elements.accessor.type;
-      drawParams.indexOffset = this.elementsAccessor.offset || 0;
-    }
-
-    // Post-calculation checks
-    if (drawParams.indexCount === Infinity) {
-      drawParams.indexCount = 0;
-    }
-    if (drawParams.vertexCount === Infinity) {
-      drawParams.vertexCount = 0;
-    }
-    if (drawParams.instanceCount === Infinity) {
-      drawParams.instanceCount = 0;
-    }
-
-    return drawParams;
-  }
-
-  _updateDrawParamsForLocation(drawParams: DrawParams, location): void {
-    const value = this.values[location];
-    const accessor = this.accessors[location];
-
-    if (!value) {
-      return;
-    }
-
-    // Check if instanced (whether buffer or constant)
-    const {divisor} = accessor;
-    const isInstanced = divisor > 0;
-    drawParams.isInstanced = drawParams.isInstanced || isInstanced;
-
-    if (value instanceof Buffer) {
-      const buffer = value;
-
-      if (isInstanced) {
-        // instance attribute
-        const instanceCount = buffer.getVertexCount(accessor);
-        drawParams.instanceCount = Math.min(drawParams.instanceCount, instanceCount);
-      } else {
-        // normal attribute
-        const vertexCount = buffer.getVertexCount(accessor);
-        drawParams.vertexCount = Math.min(drawParams.vertexCount, vertexCount);
-      }
-    }
-  }
-
-  // DEPRECATED in v6.x - but not warnings not properly implemented
-
-  setElements(elementBuffer = null, accessor = {}) {
-    log.deprecated('setElements', 'setElementBuffer')();
-    return this.setElementBuffer(elementBuffer, accessor);
-  }
-}

package/src/context/context/device-pixels.ts

@@ -1,147 +0,0 @@
-import {log} from '@luma.gl/api';
-import {getContextState} from './context-state';
-
-/**
- * Returns multiplier need to convert CSS size to Device size
- */
-export function cssToDeviceRatio(gl: WebGLRenderingContext): number {
-  const state = getContextState(gl);
-
-  if (gl.canvas && state) {
-    // For headless gl we might have used custom width and height
-    // hence use cached clientWidth
-    const {clientWidth} = state._canvasSizeInfo;
-    return clientWidth ? gl.drawingBufferWidth / clientWidth : 1;
-  }
-  // use default device pixel ratio
-  return 1;
-}
-
-/**
- * Maps CSS pixel position to device pixel position
- */
- export function cssToDevicePixels(
-  gl: WebGLRenderingContext,
-  cssPixel: number[],
-  yInvert: boolean = true
-): {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-} {
-  const ratio = cssToDeviceRatio(gl);
-  const width = gl.drawingBufferWidth;
-  const height = gl.drawingBufferHeight;
-  return scalePixels(cssPixel, ratio, width, height, yInvert);
-}
-
-/**
- * Calulates device pixel ratio, used during context creation
- *
- * @param useDevicePixels - boolean or a number
- * @return - device pixel ratio
- */
- export function getDevicePixelRatio(useDevicePixels: boolean | number): number {
-  const windowRatio = typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1;
-  if (Number.isFinite(useDevicePixels)) {
-    // @ts-expect-error Can no longer be boolean after previous line
-    return useDevicePixels <= 0 ? 1 : useDevicePixels;
-  }
-  return useDevicePixels ? windowRatio : 1;
-}
-
-// use devicePixelRatio to set canvas width and height
-export function setDevicePixelRatio(gl, devicePixelRatio, options: {width?: number, height?: number} = {}) {
-  // NOTE: if options.width and options.height not used remove in v8
-  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;
-  }
-
-  const contextState = getContextState(gl);
-  const cachedSize = contextState._canvasSizeInfo;
-  // Check if canvas needs to be resized
-  if (
-    cachedSize.clientWidth !== clientWidth ||
-    cachedSize.clientHeight !== clientHeight ||
-    cachedSize.devicePixelRatio !== devicePixelRatio
-  ) {
-    let clampedPixelRatio = devicePixelRatio;
-
-    const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
-    const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
-    gl.canvas.width = canvasWidth;
-    gl.canvas.height = canvasHeight;
-
-    // Note: when devicePixelRatio is too high, it is possible we might hit system limit for
-    // drawing buffer width and hight, in those cases they get clamped and resulting aspect ration may not be maintained
-    // for those cases, reduce devicePixelRatio.
-    if (gl.drawingBufferWidth !== canvasWidth || gl.drawingBufferHeight !== canvasHeight) {
-      log.warn(`Device pixel ratio clamped`)();
-      clampedPixelRatio = Math.min(
-        gl.drawingBufferWidth / clientWidth,
-        gl.drawingBufferHeight / clientHeight
-      );
-
-      gl.canvas.width = Math.floor(clientWidth * clampedPixelRatio);
-      gl.canvas.height = Math.floor(clientHeight * clampedPixelRatio);
-    }
-
-    Object.assign(contextState._canvasSizeInfo, {clientWidth, clientHeight, devicePixelRatio});
-  }
-}
-
-
-// PRIVATE
-
-function scalePixels(pixel, ratio, width, height, yInvert) {
-  const x = scaleX(pixel[0], ratio, width);
-  let y = scaleY(pixel[1], ratio, height, yInvert);
-
-  // Find boundaries of next pixel to provide valid range of device pixel locaitons
-
-  let t = scaleX(pixel[0] + 1, ratio, width);
-  // If next pixel's position is clamped to boundary, use it as is, otherwise subtract 1 for current pixel boundary
-  const xHigh = t === width - 1 ? t : t - 1;
-
-  t = scaleY(pixel[1] + 1, ratio, height, yInvert);
-  let yHigh;
-  if (yInvert) {
-    // If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range
-    t = t === 0 ? t : t + 1;
-    // swap y and yHigh
-    yHigh = y;
-    y = t;
-  } else {
-    // If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range
-    yHigh = t === height - 1 ? t : t - 1;
-    // y remains same
-  }
-  return {
-    x,
-    y,
-    // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
-    width: Math.max(xHigh - x + 1, 1),
-    height: Math.max(yHigh - y + 1, 1)
-  };
-}
-
-function scaleX(x, ratio, width) {
-  // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
-  const r = Math.min(Math.round(x * ratio), width - 1);
-  return r;
-}
-
-function scaleY(y, ratio, height, yInvert) {
-  // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
-  return yInvert
-    ? Math.max(0, height - 1 - Math.round(y * ratio))
-    : Math.min(Math.round(y * ratio), height - 1);
-}

package/src/context/context/get-canvas.ts

@@ -1,37 +0,0 @@
-// luma.gl, MIT license
-import {isBrowser} from 'probe.gl/env';
-const isPage = isBrowser() && typeof document !== 'undefined';
-
-/**
- * Creates a new canvas or returns the HTML element for a canvas.
- * @param width
- * @param height
- * @returns
- */
-export function getCanvas(options: {
-  canvas?: string | HTMLCanvasElement | OffscreenCanvas,
-  width: number,
-  height: number
-}): HTMLCanvasElement | OffscreenCanvas {
-  const {canvas, width = 800, height = 600} = options;
-
-  if (!canvas) {
-    const targetCanvas = document.createElement('canvas');
-    targetCanvas.id = 'lumagl-canvas';
-    targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
-    targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
-    document.body.insertBefore(targetCanvas, document.body.firstChild);
-    return targetCanvas;
-  }
-
-  if (typeof canvas === 'string') {
-    const isPageLoaded = isPage && document.readyState === 'complete';
-    if (!isPageLoaded) {
-      throw new Error(`createGLContext called on canvas '${canvas}' before page was loaded`);
-    }
-    // TODO - check type?
-    return document.getElementById(canvas) as HTMLCanvasElement;
-  }
-
-  return canvas;
-}

package/src/context/context/resize-context.ts

@@ -1,37 +0,0 @@
-// luma.gl, MIT license
-import { getDevicePixelRatio, setDevicePixelRatio } from "./device-pixels";
-/**
- * Resize the canvas' drawing buffer.
- *
- * Can match the canvas CSS size, and optionally also consider devicePixelRatio
- * Can be called every frame
- *
- * Regardless of size, the drawing buffer will always be scaled to the viewport, but
- * for best visual results, usually set to either:
- *  canvas CSS width x canvas CSS height
- *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
- * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
- *
- * resizeGLContext(gl, {width, height, useDevicePixels})
- */
- export function resizeGLContext(
-  gl: WebGLRenderingContext,
-  options?: {
-    width?: number;
-    height?: number;
-    useDevicePixels?: boolean | number;
-  }
-) {
-  // Resize browser context .
-  if (gl.canvas) {
-    const devicePixelRatio = getDevicePixelRatio(options?.useDevicePixels);
-    setDevicePixelRatio(gl, devicePixelRatio, options);
-    return;
-  }
-
-  // Resize headless gl context
-  const ext = gl.getExtension('STACKGL_resize_drawingbuffer');
-  if (ext && options && `width` in options && `height` in options) {
-    ext.resize(options.width, options.height);
-  }
-}