@luma.gl/webgl 8.6.0-alpha.1 → 8.6.0-alpha.5

package/src/context/polyfill/polyfill-vertex-array-object.ts

@@ -0,0 +1,360 @@
+/*
+ ** Copyright (c) 2015 The Khronos Group Inc.
+ **
+ ** Permission is hereby granted, free of charge, to any person obtaining a
+ ** copy of this software and/or associated documentation files (the
+ ** "Materials"), to deal in the Materials without restriction, including
+ ** without limitation the rights to use, copy, modify, merge, publish,
+ ** distribute, sublicense, and/or sell copies of the Materials, and to
+ ** permit persons to whom the Materials are furnished to do so, subject to
+ ** the following conditions:
+ **
+ ** The above copyright notice and this permission notice shall be included
+ ** in all copies or substantial portions of the Materials.
+ **
+ ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
+ */
+
+// Modified to use ES6 and polyfill a provided context rather than
+// the global class.
+
+// @ts-nocheck external code
+
+const glErrorShadow = {};
+
+function error(msg) {
+  if (globalThis.console && globalThis.console.error) {
+    globalThis.console.error(msg);
+  }
+}
+
+function log(msg) {
+  if (globalThis.console && globalThis.console.log) {
+    globalThis.console.log(msg);
+  }
+}
+
+function synthesizeGLError(err, opt_msg) {
+  glErrorShadow[err] = true;
+  if (opt_msg !== undefined) {
+    error(opt_msg);
+  }
+}
+
+function wrapGLError(gl) {
+  const f = gl.getError;
+  gl.getError = function getError() {
+    let err;
+    do {
+      err = f.apply(gl);
+      if (err !== gl.NO_ERROR) {
+        glErrorShadow[err] = true;
+      }
+    } while (err !== gl.NO_ERROR);
+
+    for (err in glErrorShadow) {
+      if (glErrorShadow[err]) {
+        delete glErrorShadow[err];
+        return parseInt(err, 10);
+      }
+    }
+
+    return gl.NO_ERROR;
+  };
+}
+
+const WebGLVertexArrayObjectOES = function WebGLVertexArrayObjectOES(ext) {
+  const gl = ext.gl;
+
+  this.ext = ext;
+  this.isAlive = true;
+  this.hasBeenBound = false;
+
+  this.elementArrayBuffer = null;
+  this.attribs = new Array(ext.maxVertexAttribs);
+  for (let n = 0; n < this.attribs.length; n++) {
+    const attrib = new WebGLVertexArrayObjectOES.VertexAttrib(gl);
+    this.attribs[n] = attrib;
+  }
+
+  this.maxAttrib = 0;
+};
+
+WebGLVertexArrayObjectOES.VertexAttrib = function VertexAttrib(gl) {
+  this.enabled = false;
+  this.buffer = null;
+  this.size = 4;
+  this.type = gl.FLOAT;
+  this.normalized = false;
+  this.stride = 16;
+  this.offset = 0;
+
+  this.cached = '';
+  this.recache();
+};
+WebGLVertexArrayObjectOES.VertexAttrib.prototype.recache = function recache() {
+  this.cached = [this.size, this.type, this.normalized, this.stride, this.offset].join(':');
+};
+
+const OESVertexArrayObject = function OESVertexArrayObject(gl) {
+  const self = this;
+  this.gl = gl;
+
+  wrapGLError(gl);
+
+  const original = (this.original = {
+    getParameter: gl.getParameter,
+    enableVertexAttribArray: gl.enableVertexAttribArray,
+    disableVertexAttribArray: gl.disableVertexAttribArray,
+    bindBuffer: gl.bindBuffer,
+    getVertexAttrib: gl.getVertexAttrib,
+    vertexAttribPointer: gl.vertexAttribPointer
+  });
+
+  gl.getParameter = function getParameter(pname) {
+    if (pname === self.VERTEX_ARRAY_BINDING_OES) {
+      if (self.currentVertexArrayObject === self.defaultVertexArrayObject) {
+        return null;
+      }
+      return self.currentVertexArrayObject;
+    }
+    return original.getParameter.apply(this, arguments);
+  };
+
+  gl.enableVertexAttribArray = function enableVertexAttribArray(index) {
+    const vao = self.currentVertexArrayObject;
+    vao.maxAttrib = Math.max(vao.maxAttrib, index);
+    const attrib = vao.attribs[index];
+    attrib.enabled = true;
+    return original.enableVertexAttribArray.apply(this, arguments);
+  };
+  gl.disableVertexAttribArray = function disableVertexAttribArray(index) {
+    const vao = self.currentVertexArrayObject;
+    vao.maxAttrib = Math.max(vao.maxAttrib, index);
+    const attrib = vao.attribs[index];
+    attrib.enabled = false;
+    return original.disableVertexAttribArray.apply(this, arguments);
+  };
+
+  gl.bindBuffer = function bindBuffer(target, buffer) {
+    switch (target) {
+      case gl.ARRAY_BUFFER:
+        self.currentArrayBuffer = buffer;
+        break;
+      case gl.ELEMENT_ARRAY_BUFFER:
+        self.currentVertexArrayObject.elementArrayBuffer = buffer;
+        break;
+      default:
+    }
+    return original.bindBuffer.apply(this, arguments);
+  };
+
+  gl.getVertexAttrib = function getVertexAttrib(index, pname) {
+    const vao = self.currentVertexArrayObject;
+    const attrib = vao.attribs[index];
+    switch (pname) {
+      case gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING:
+        return attrib.buffer;
+      case gl.VERTEX_ATTRIB_ARRAY_ENABLED:
+        return attrib.enabled;
+      case gl.VERTEX_ATTRIB_ARRAY_SIZE:
+        return attrib.size;
+      case gl.VERTEX_ATTRIB_ARRAY_STRIDE:
+        return attrib.stride;
+      case gl.VERTEX_ATTRIB_ARRAY_TYPE:
+        return attrib.type;
+      case gl.VERTEX_ATTRIB_ARRAY_NORMALIZED:
+        return attrib.normalized;
+      default:
+        return original.getVertexAttrib.apply(this, arguments);
+    }
+  };
+
+  // eslint-disable-next-line max-params
+  gl.vertexAttribPointer = function vertexAttribPointer(
+    indx,
+    size,
+    type,
+    normalized,
+    stride,
+    offset
+  ) {
+    const vao = self.currentVertexArrayObject;
+    vao.maxAttrib = Math.max(vao.maxAttrib, indx);
+    const attrib = vao.attribs[indx];
+    attrib.buffer = self.currentArrayBuffer;
+    attrib.size = size;
+    attrib.type = type;
+    attrib.normalized = normalized;
+    attrib.stride = stride;
+    attrib.offset = offset;
+    attrib.recache();
+    return original.vertexAttribPointer.apply(this, arguments);
+  };
+
+  if (gl.instrumentExtension) {
+    gl.instrumentExtension(this, 'OES_vertex_array_object');
+  }
+
+  // undefined for headless gl
+  if (gl.canvas) {
+    gl.canvas.addEventListener(
+      'webglcontextrestored',
+      () => {
+        log('OESVertexArrayObject emulation library context restored');
+        self.reset_();
+      },
+      true
+    );
+  }
+
+  this.reset_();
+};
+
+OESVertexArrayObject.prototype.VERTEX_ARRAY_BINDING_OES = 0x85b5;
+
+OESVertexArrayObject.prototype.reset_ = function reset_() {
+  const contextWasLost = this.vertexArrayObjects !== undefined;
+  if (contextWasLost) {
+    for (let ii = 0; ii < this.vertexArrayObjects.length; ++ii) {
+      this.vertexArrayObjects.isAlive = false;
+    }
+  }
+  const gl = this.gl;
+  this.maxVertexAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
+
+  this.defaultVertexArrayObject = new WebGLVertexArrayObjectOES(this);
+  this.currentVertexArrayObject = null;
+  this.currentArrayBuffer = null;
+  this.vertexArrayObjects = [this.defaultVertexArrayObject];
+
+  this.bindVertexArrayOES(null);
+};
+
+OESVertexArrayObject.prototype.createVertexArrayOES = function createVertexArrayOES() {
+  const arrayObject = new WebGLVertexArrayObjectOES(this);
+  this.vertexArrayObjects.push(arrayObject);
+  return arrayObject;
+};
+
+OESVertexArrayObject.prototype.deleteVertexArrayOES = function deleteVertexArrayOES(arrayObject) {
+  arrayObject.isAlive = false;
+  this.vertexArrayObjects.splice(this.vertexArrayObjects.indexOf(arrayObject), 1);
+  if (this.currentVertexArrayObject === arrayObject) {
+    this.bindVertexArrayOES(null);
+  }
+};
+
+OESVertexArrayObject.prototype.isVertexArrayOES = function isVertexArrayOES(arrayObject) {
+  if (arrayObject && arrayObject instanceof WebGLVertexArrayObjectOES) {
+    if (arrayObject.hasBeenBound && arrayObject.ext === this) {
+      return true;
+    }
+  }
+  return false;
+};
+
+OESVertexArrayObject.prototype.bindVertexArrayOES = function bindVertexArrayOES(arrayObject) {
+  const gl = this.gl;
+  if (arrayObject && !arrayObject.isAlive) {
+    synthesizeGLError(
+      gl.INVALID_OPERATION,
+      'bindVertexArrayOES: attempt to bind deleted arrayObject'
+    );
+    return;
+  }
+  const original = this.original;
+
+  const oldVAO = this.currentVertexArrayObject;
+  this.currentVertexArrayObject = arrayObject || this.defaultVertexArrayObject;
+  this.currentVertexArrayObject.hasBeenBound = true;
+  const newVAO = this.currentVertexArrayObject;
+
+  if (oldVAO === newVAO) {
+    return;
+  }
+
+  if (!oldVAO || newVAO.elementArrayBuffer !== oldVAO.elementArrayBuffer) {
+    original.bindBuffer.call(gl, gl.ELEMENT_ARRAY_BUFFER, newVAO.elementArrayBuffer);
+  }
+
+  let currentBinding = this.currentArrayBuffer;
+  const maxAttrib = Math.max(oldVAO ? oldVAO.maxAttrib : 0, newVAO.maxAttrib);
+  for (let n = 0; n <= maxAttrib; n++) {
+    const attrib = newVAO.attribs[n];
+    const oldAttrib = oldVAO ? oldVAO.attribs[n] : null;
+
+    if (!oldVAO || attrib.enabled !== oldAttrib.enabled) {
+      if (attrib.enabled) {
+        original.enableVertexAttribArray.call(gl, n);
+      } else {
+        original.disableVertexAttribArray.call(gl, n);
+      }
+    }
+
+    if (attrib.enabled) {
+      let bufferChanged = false;
+      if (!oldVAO || attrib.buffer !== oldAttrib.buffer) {
+        if (currentBinding !== attrib.buffer) {
+          original.bindBuffer.call(gl, gl.ARRAY_BUFFER, attrib.buffer);
+          currentBinding = attrib.buffer;
+        }
+        bufferChanged = true;
+      }
+
+      if (bufferChanged || attrib.cached !== oldAttrib.cached) {
+        original.vertexAttribPointer.call(
+          gl,
+          n,
+          attrib.size,
+          attrib.type,
+          attrib.normalized,
+          attrib.stride,
+          attrib.offset
+        );
+      }
+    }
+  }
+
+  if (this.currentArrayBuffer !== currentBinding) {
+    original.bindBuffer.call(gl, gl.ARRAY_BUFFER, this.currentArrayBuffer);
+  }
+};
+
+export function polyfillVertexArrayObject(gl) {
+  if (typeof gl.createVertexArray === 'function') {
+    // VAOs directly supported on object (i.e. WebGL 2 context)
+    return;
+  }
+
+  const original_getSupportedExtensions = gl.getSupportedExtensions;
+  gl.getSupportedExtensions = function getSupportedExtensions() {
+    const list = original_getSupportedExtensions.call(this) || [];
+    if (list.indexOf('OES_vertex_array_object') < 0) {
+      list.push('OES_vertex_array_object');
+    }
+    return list;
+  };
+
+  const original_getExtension = gl.getExtension;
+  gl.getExtension = function getExtension(name) {
+    const ext = original_getExtension.call(this, name);
+    if (ext) {
+      return ext;
+    }
+    if (name !== 'OES_vertex_array_object') {
+      return null;
+    }
+
+    if (!gl.__OESVertexArrayObject) {
+      this.__OESVertexArrayObject = new OESVertexArrayObject(this);
+    }
+    return this.__OESVertexArrayObject;
+  };
+}

package/src/context/state-tracker/deep-array-equal.ts

@@ -0,0 +1,20 @@
+
+/** deeply compare two arrays */
+export function deepArrayEqual(x, y): boolean {
+  if (x === y) {
+    return true;
+  }
+  const isArrayX = Array.isArray(x) || ArrayBuffer.isView(x);
+  const isArrayY = Array.isArray(y) || ArrayBuffer.isView(y);
+  // @ts-expect-error TODO fix
+  if (isArrayX && isArrayY && x.length === y.length) {
+    // @ts-expect-error TODO fix
+    for (let i = 0; i < x.length; ++i) {
+      if (x[i] !== y[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}

package/src/context/state-tracker/track-context-state.ts

@@ -0,0 +1,250 @@
+// Support for listening to context state changes and intercepting state queries
+// NOTE: this system does not handle buffer bindings
+import {assert} from '@luma.gl/api';
+import {GL_PARAMETER_DEFAULTS, GL_HOOKED_SETTERS, NON_CACHE_PARAMETERS} from '../parameters/webgl-parameter-tables';
+import {setParameters, getParameters} from '../parameters/unified-parameter-api';
+import {deepArrayEqual} from './deep-array-equal';
+
+// HELPER CLASS - GLState
+
+/* eslint-disable no-shadow */
+class GLState {
+  gl: WebGLRenderingContext;
+  program = null;
+  stateStack = [];
+  enable = true;
+  cache;
+  log;
+
+  constructor(
+    gl,
+    {
+      copyState = false, // Copy cache from params (slow) or initialize from WebGL defaults (fast)
+      log = () => {} // Logging function, called when gl parameter change calls are actually issued
+    } = {}
+  ) {
+    this.gl = gl;
+    this.cache = copyState ? getParameters(gl) : Object.assign({}, GL_PARAMETER_DEFAULTS);
+    this.log = log;
+
+    this._updateCache = this._updateCache.bind(this);
+    Object.seal(this);
+  }
+
+  push(values = {}) {
+    this.stateStack.push({});
+  }
+
+  pop() {
+    assert(this.stateStack.length > 0);
+    // Use the saved values in the state stack to restore parameters
+    const oldValues = this.stateStack[this.stateStack.length - 1];
+    setParameters(this.gl, oldValues);
+    // Don't pop until we have reset parameters (to make sure other "stack frames" are not affected)
+    this.stateStack.pop();
+  }
+
+  /**
+  // interceptor for context set functions - update our cache and our stack
+  // values (Object) - the key values for this setter
+   * @param values
+   * @returns
+   */
+  _updateCache(values) {
+    let valueChanged = false;
+    let oldValue; // = undefined
+
+    const oldValues = this.stateStack.length > 0 && this.stateStack[this.stateStack.length - 1];
+
+    for (const key in values) {
+      assert(key !== undefined);
+      const value = values[key];
+      const cached = this.cache[key];
+      // Check that value hasn't already been shadowed
+      if (!deepArrayEqual(value, cached)) {
+        valueChanged = true;
+        oldValue = cached;
+
+        // First, save current value being shadowed
+        // If a state stack frame is active, save the current parameter values for pop
+        // but first check that value hasn't already been shadowed and saved
+        if (oldValues && !(key in oldValues)) {
+          oldValues[key] = cached;
+        }
+
+        // Save current value being shadowed
+        this.cache[key] = value;
+      }
+    }
+
+    return {valueChanged, oldValue};
+  }
+}
+
+// PUBLIC API
+
+/**
+ * Initialize WebGL state caching on a context
+ * can be called multiple times to enable/disable
+ *
+ * @note After calling this function, context state will be cached
+ * gl.state.push() and gl.state.pop() will be available for saving,
+ * temporarily modifying, and then restoring state.
+ */
+ export function trackContextState(
+  gl: WebGLRenderingContext,
+  options?: {
+    enable?: boolean;
+    copyState?: boolean;
+    log?: any;
+  }
+): WebGLRenderingContext {
+  const {enable = true, copyState} = options;
+  assert(copyState !== undefined);
+  // @ts-expect-error
+  if (!gl.state) {
+    const global_ = typeof global !== 'undefined' ? global : window;
+    // @ts-ignore
+    // const {polyfillContext} = global_;
+    // if (polyfillContext) {
+    //   polyfillContext(gl);
+    // }
+
+    // Create a state cache
+    // @ts-expect-error
+    gl.state = new GLState(gl, {copyState});
+
+    installProgramSpy(gl);
+
+    // intercept all setter functions in the table
+    for (const key in GL_HOOKED_SETTERS) {
+      const setter = GL_HOOKED_SETTERS[key];
+      installSetterSpy(gl, key, setter);
+    }
+
+    // intercept all getter functions in the table
+    installGetterOverride(gl, 'getParameter');
+    installGetterOverride(gl, 'isEnabled');
+  }
+
+  // @ts-expect-error
+  gl.state.enable = enable;
+
+  return gl;
+}
+
+/**
+ * Saves current WebGL context state onto an internal per-context stack
+ */
+ export function pushContextState(gl: WebGLRenderingContext): void {
+  // @ts-expect-error
+  if (!gl.state) {
+    trackContextState(gl, {copyState: false});
+  }
+  // @ts-expect-error
+  gl.state.push();
+}
+
+
+/**
+ * Restores previously saved WebGL context state
+ */
+export function popContextState(gl: WebGLRenderingContext): void {
+  // @ts-expect-error
+  assert(gl.state);
+  // @ts-expect-error
+  gl.state.pop();
+}
+
+// HELPER FUNCTIONS - INSTALL GET/SET INTERCEPTORS (SPYS) ON THE CONTEXT
+
+/**
+// Overrides a WebGLRenderingContext state "getter" function
+// to return values directly from cache
+ * @param gl
+ * @param functionName
+ */
+function installGetterOverride(gl, functionName) {
+  // Get the original function from the WebGLRenderingContext
+  const originalGetterFunc = gl[functionName].bind(gl);
+
+  // Wrap it with a spy so that we can update our state cache when it gets called
+  gl[functionName] = function get(pname) {
+    if (pname === undefined || NON_CACHE_PARAMETERS.has(pname)) {
+      // Invalid or blacklisted parameter, do not cache
+      return originalGetterFunc(pname);
+    }
+
+    if (!(pname in gl.state.cache)) {
+      // WebGL limits are not prepopulated in the cache, call the original getter when first queried.
+      gl.state.cache[pname] = originalGetterFunc(pname);
+    }
+
+    // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
+    return gl.state.enable
+      ? // Call the getter the params so that it can e.g. serve from a cache
+        gl.state.cache[pname]
+      : // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
+        originalGetterFunc(pname);
+  };
+
+  // Set the name of this anonymous function to help in debugging and profiling
+  Object.defineProperty(gl[functionName], 'name', {
+    value: `${functionName}-from-cache`,
+    configurable: false
+  });
+}
+
+/**
+// Overrides a WebGLRenderingContext state "setter" function
+// to call a setter spy before the actual setter. Allows us to keep a cache
+// updated with a copy of the WebGL context state.
+ * @param gl
+ * @param functionName
+ * @param setter
+ * @returns
+ */
+function installSetterSpy(gl, functionName, setter) {
+  // Get the original function from the WebGLRenderingContext
+  if (!gl[functionName]) {
+    // This could happen if we try to intercept WebGL2 method on a WebGL1 context
+    return;
+  }
+  const originalSetterFunc = gl[functionName].bind(gl);
+
+  // Wrap it with a spy so that we can update our state cache when it gets called
+  gl[functionName] = function set(...params) {
+    // Update the value
+    // Call the setter with the state cache and the params so that it can store the parameters
+    const {valueChanged, oldValue} = setter(gl.state._updateCache, ...params);
+
+    // Call the original WebGLRenderingContext func to make sure the context actually gets updated
+    if (valueChanged) {
+      originalSetterFunc(...params);
+    }
+
+    // Note: if the original function fails to set the value, our state cache will be bad
+    // No solution for this at the moment, but assuming that this is unlikely to be a real problem
+    // We could call the setter after the originalSetterFunc. Concern is that this would
+    // cause different behavior in debug mode, where originalSetterFunc can throw exceptions
+
+    return oldValue;
+  };
+
+  // Set the name of this anonymous function to help in debugging and profiling
+  Object.defineProperty(gl[functionName], 'name', {
+    value: `${functionName}-to-cache`,
+    configurable: false
+  });
+}
+
+function installProgramSpy(gl) {
+  const originalUseProgram = gl.useProgram.bind(gl);
+
+  gl.useProgram = function useProgramLuma(handle) {
+    if (gl.state.program !== handle) {
+      originalUseProgram(handle);
+      gl.state.program = handle;
+    }
+  };
+}

package/src/context/state-tracker/with-parameters.ts

@@ -0,0 +1,50 @@
+import {GLParameters, setParameters} from '../parameters/unified-parameter-api';
+import {pushContextState, popContextState} from './track-context-state';
+
+/**
+ * Execute a function with a set of temporary WebGL parameter overrides
+ * - Saves current "global" WebGL context settings
+ * - Sets the supplies WebGL context parameters,
+ * - Executes supplied function
+ * - Restores parameters
+ * - Returns the return value of the supplied function
+ */
+ export function withParameters(gl: WebGLRenderingContext, parameters: GLParameters & {nocatch?: boolean}, func: any): any {
+  if (isObjectEmpty(parameters)) {
+    // Avoid setting state if no parameters provided. Just call and return
+    return func(gl);
+  }
+
+  const {nocatch = true} = parameters;
+
+  pushContextState(gl);
+  setParameters(gl, parameters);
+
+  // Setup is done, call the function
+  let value;
+
+  if (nocatch) {
+    // Avoid try catch to minimize stack size impact for safe execution paths
+    value = func(gl);
+    popContextState(gl);
+  } else {
+    // Wrap in a try-catch to ensure that parameters are restored on exceptions
+    try {
+      value = func(gl);
+    } finally {
+      popContextState(gl);
+    }
+  }
+
+  return value;
+}
+
+// Helpers
+
+// Returns true if given object is empty, false otherwise.
+function isObjectEmpty(object) {
+  for (const key in object) {
+    return false;
+  }
+  return true;
+}

package/src/debug/debug-uniforms.ts

@@ -1,4 +1,4 @@
-import {formatValue, assert} from '../utils';
+import {assert, formatValue} from '@luma.gl/api';
 
 // Prepares a table suitable for console.table
 /* eslint-disable max-statements, complexity */

package/src/debug/debug-vertex-array.ts

@@ -1,7 +1,7 @@
+import {formatValue} from '@luma.gl/api';
 import Buffer from '../classes/webgl-buffer';
-import {getKey} from '../webgl-utils';
+import {getKey} from '../webgl-utils/constants-to-keys';
 import {getCompositeGLType} from '../webgl-utils/attribute-utils';
-import {formatValue} from '../utils';
 
 // Creates object suitable as input for console.table
 export function getDebugTableForVertexArray(options?: {vertexArray: any; header?: string}): {} {
@@ -81,9 +81,7 @@ function getDebugTableRow(vertexArray, attribute, accessor, header) {
     marker = changed ? '*' : '';
 
     value = data;
-    // @ts-ignore
     bytes = buffer.byteLength;
-    // @ts-ignore
     verts = bytes / data.BYTES_PER_ELEMENT / size;
 
     let format;