@luma.gl/webgl 8.5.10 → 8.6.0-alpha.4

package/src/classes/{texture.js → texture.ts}

@@ -1,9 +1,11 @@
+import {Device, log, assert, uid, isPowerOfTwo} from '@luma.gl/api';
+import {Texture, TextureProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, withParameters, log} from '@luma.gl/gltools';
-import {global} from 'probe.gl/env';
-
-import Resource from './resource';
-import Buffer from './buffer';
+import {isWebGL2, assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import {getKey, getKeyValue} from '../webgl-utils/constants-to-keys';
+import WebGLDevice from '../adapter/webgl-device';
+import Buffer from './webgl-buffer';
 import {
   TEXTURE_FORMATS,
   DATA_FORMAT_CHANNELS,
@@ -11,23 +13,56 @@ import {
   isFormatSupported,
   isLinearFilteringSupported
 } from './texture-formats';
-import {assert} from '../utils/assert';
-import {uid, isPowerOfTwo} from '../utils/utils';
+
+export type {TextureProps};
+
+export type TextureSupportOptions = {
+  format?: any;
+  linearFiltering?: any;
+};
 
 // Supported min filters for NPOT texture.
 const NPOT_MIN_FILTERS = [GL.LINEAR, GL.NEAREST];
 
 // Polyfill
-// Note (Tarek): Do we really need to support this API?
-const WebGLBuffer = global.WebGLBuffer || function WebGLBuffer() {};
-
-export default class Texture extends Resource {
-  static isSupported(gl, opts = {}) {
-    const {format, linearFiltering} = opts;
+export default class WEBGLTexture extends Texture {
+  readonly MAX_ATTRIBUTES: number;
+  readonly device: WebGLDevice;
+  readonly gl: WebGLRenderingContext;
+  readonly gl2: WebGL2RenderingContext | null;
+  readonly handle: WebGLTexture;
+
+  data;
+
+  width: number;
+  height: number;
+  depth: number;
+
+  format = undefined;
+  type = undefined;
+  dataFormat = undefined;
+  border = undefined;
+  mipmaps: boolean = undefined;
+
+  target: GL;
+  textureUnit: number = undefined;
+
+  // Program.draw() checks the loaded flag of all textures to avoid
+  // Textures that are still loading from promises
+  // Set to true as soon as texture has been initialized with valid data
+  loaded = false;
+  _video;
+
+  static isSupported(
+    device: Device | WebGLRenderingContext,
+    options?: TextureSupportOptions
+  ): boolean {
+    const webglDevice = WebGLDevice.attach(device);
+    const {format, linearFiltering} = options;
     let supported = true;
     if (format) {
-      supported = supported && isFormatSupported(gl, format);
-      supported = supported && (!linearFiltering || isLinearFilteringSupported(gl, format));
+      supported = supported && isFormatSupported(webglDevice.gl, format);
+      supported = supported && (!linearFiltering || isLinearFilteringSupported(webglDevice.gl, format));
     }
     return supported;
   }
@@ -42,7 +77,9 @@ export default class Texture extends Resource {
   // you must always bind it as a GL_TEXTURE_2D;
   // attempting to bind it as GL_TEXTURE_1D will give rise to an error
   // (while run-time).
-  constructor(gl, props) {
+  constructor(device: Device | WebGLRenderingContext, props: TextureProps) {
+    super(WebGLDevice.attach(device), props);
+
     const {
       id = uid('texture'),
       handle,
@@ -50,8 +87,6 @@ export default class Texture extends Resource {
       // , magFilter, minFilter, wrapS, wrapT
     } = props;
 
-    super(gl, {id, handle});
-
     this.target = target;
     this.textureUnit = undefined;
 
@@ -69,18 +104,33 @@ export default class Texture extends Resource {
     this.border = undefined;
     this.textureUnit = undefined;
     this.mipmaps = undefined;
+
+    this.device = WebGLDevice.attach(device);
+    this.gl = this.device.gl;
+    this.gl2 = this.device.gl2;
+    this.handle = this.props.handle || this.gl.createTexture();
   }
 
-  toString() {
+  destroy(): void {
+    if (this.handle) {
+      this.gl.deleteTexture(this.handle);
+      this.removeStats();
+      this.trackDeallocatedMemory('Texture');
+      // @ts-expect-error
+      this.handle = null;
+    }
+  }
+
+  toString(): string {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
-  /* eslint-disable max-len, max-statements */
-  initialize(props = {}) {
+  // eslint-disable-next-line max-statements
+  initialize(props: TextureProps = {}): this {
     let data = props.data;
 
     if (data instanceof Promise) {
-      data.then(resolvedImageData =>
+      data.then((resolvedImageData) =>
         this.initialize(
           Object.assign({}, props, {
             pixels: resolvedImageData,
@@ -91,7 +141,7 @@ export default class Texture extends Resource {
       return this;
     }
     const isVideo = typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement;
-    // @ts-ignore
+    // @ts-expect-error
     if (isVideo && data.readyState < HTMLVideoElement.HAVE_METADATA) {
       this._video = null; // Declare member before the object is sealed
       data.addEventListener('loadeddata', () => this.initialize(props));
@@ -183,7 +233,7 @@ export default class Texture extends Resource {
       this._video = {
         video: data,
         parameters,
-        // @ts-ignore
+        // @ts-expect-error
         lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
       };
     }
@@ -191,10 +241,10 @@ export default class Texture extends Resource {
     return this;
   }
 
-  update() {
+  update(): this {
     if (this._video) {
       const {video, parameters, lastTime} = this._video;
-      // @ts-ignore
+      // @ts-expect-error
       if (lastTime === video.currentTime || video.readyState < HTMLVideoElement.HAVE_CURRENT_DATA) {
         return;
       }
@@ -211,7 +261,7 @@ export default class Texture extends Resource {
 
   // If size has changed, reinitializes with current format
   // note clears image and mipmaps
-  resize({height, width, mipmaps = false}) {
+  resize({height, width, mipmaps = false}): this {
     if (width !== this.width || height !== this.height) {
       return this.initialize({
         width,
@@ -227,7 +277,7 @@ export default class Texture extends Resource {
   }
 
   // Call to regenerate mipmaps after modifying texture(s)
-  generateMipmap(params = {}) {
+  generateMipmap(params = {}): this {
     if (this._isNPOT()) {
       log.warn(`texture: ${this} is Non-Power-Of-Two, disabling mipmaping`)();
       return this;
@@ -264,9 +314,9 @@ export default class Texture extends Resource {
    * @param {GLint} border - must be 0.
    * @parameters - temporary settings to be applied, can be used to supply pixel store settings.
    */
-  /* eslint-disable max-len, max-statements, complexity */
+  // eslint-disable-next-line max-statements, complexity
   setImageData(options) {
-    this._trackDeallocatedMemory('Texture');
+    this.trackDeallocatedMemory('Texture');
 
     const {
       target = this.target,
@@ -318,7 +368,6 @@ export default class Texture extends Resource {
         case 'typed-array':
           // Looks like this assert is not necessary, as offset is ignored under WebGL1
           // assert((offset === 0 || isWebGL2(gl)), 'offset supported in WebGL2 only');
-          // @ts-ignore
           gl.texImage2D(
             target,
             level,
@@ -329,7 +378,7 @@ export default class Texture extends Resource {
             dataFormat,
             type,
             data,
-            // @ts-ignore
+            // @ts-expect-error
             offset
           );
           break;
@@ -367,21 +416,20 @@ export default class Texture extends Resource {
     });
 
     if (data && data.byteLength) {
-      this._trackAllocatedMemory(data.byteLength, 'Texture');
+      this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
       // NOTE(Tarek): Default to RGBA bytes
       const channels = DATA_FORMAT_CHANNELS[this.dataFormat] || 4;
       const channelSize = TYPE_SIZES[this.type] || 1;
 
-      this._trackAllocatedMemory(this.width * this.height * channels * channelSize, 'Texture');
+      this.trackAllocatedMemory(this.width * this.height * channels * channelSize, 'Texture');
     }
 
     this.loaded = true;
 
     return this;
   }
-  /* eslint-enable max-len, max-statements, complexity */
-
+  
   /**
    * Redefines an area of an existing texture
    * Note: does not allocate storage
@@ -467,9 +515,9 @@ export default class Texture extends Resource {
         this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
       } else if (ArrayBuffer.isView(data)) {
         // const gl2 = assertWebGL2Context(this.gl);
-        // @ts-ignore last offset parameter is ignored under WebGL1
+        // @ts-expect-error last offset parameter is ignored under WebGL1
         this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, data, offset);
-      } else if (data instanceof WebGLBuffer) {
+      } else if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
         // WebGL2 allows us to create texture directly from a WebGL buffer
         const gl2 = assertWebGL2Context(this.gl);
         // This texImage2D signature uses currently bound GL.PIXEL_UNPACK_BUFFER
@@ -487,8 +535,7 @@ export default class Texture extends Resource {
 
     this.gl.bindTexture(this.target, null);
   }
-  /* eslint-enable max-len, max-statements, complexity */
-
+  
   /**
    * Defines a two-dimensional texture image or cube-map texture image with
    * pixels from the current framebuffer (rather than from client memory).
@@ -504,7 +551,7 @@ export default class Texture extends Resource {
     return null;
   }
 
-  getActiveUnit() {
+  getActiveUnit(): number {
     return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
   }
 
@@ -558,7 +605,7 @@ export default class Texture extends Resource {
     if (data instanceof Buffer) {
       return {data: data.handle, dataType: 'buffer'};
     }
-    if (data instanceof WebGLBuffer) {
+    if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
       return {data, dataType: 'buffer'};
     }
     // Assume data is a browser supported object (ImageData, Canvas, ...)
@@ -660,7 +707,7 @@ export default class Texture extends Resource {
   }
 
   // eslint-disable-next-line complexity
-  _deduceImageSize(data, width, height) {
+  _deduceImageSize(data, width, height): {width: number, height: number} {
     let size;
 
     if (typeof ImageData !== 'undefined' && data instanceof ImageData) {
@@ -694,16 +741,135 @@ export default class Texture extends Resource {
 
   // RESOURCE METHODS
 
-  _createHandle() {
-    return this.gl.createTexture();
-  }
-
-  _deleteHandle() {
-    this.gl.deleteTexture(this.handle);
-    this._trackDeallocatedMemory('Texture');
-  }
-
-  _getParameter(pname) {
+    /**
+   * Query a Resource parameter
+   *
+   * @param name
+   * @return param
+   */
+     getParameter(pname: number, props = {}): any {
+      pname = getKeyValue(this.gl, pname);
+      assert(pname);
+  
+      // @ts-expect-error
+      const parameters = this.constructor.PARAMETERS || {};
+  
+      // Use parameter definitions to handle unsupported parameters
+      const parameter = parameters[pname];
+      if (parameter) {
+        const isWebgl2 = isWebGL2(this.gl);
+  
+        // Check if we can query for this parameter
+        const parameterAvailable =
+          (!('webgl2' in parameter) || isWebgl2) &&
+          (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+  
+        if (!parameterAvailable) {
+          const webgl1Default = parameter.webgl1;
+          const webgl2Default = 'webgl2' in parameter ? parameter.webgl2 : parameter.webgl1;
+          const defaultValue = isWebgl2 ? webgl2Default : webgl1Default;
+          return defaultValue;
+        }
+      }
+  
+      // If unknown parameter - Could be a valid parameter not covered by PARAMS
+      // Attempt to query for it and let WebGL report errors
+      return this._getParameter(pname, props);
+    }
+  
+    // Many resources support a getParameter call -
+    // getParameters will get all parameters - slow but useful for debugging
+    // eslint-disable-next-line complexity
+    getParameters(options: {parameters?, keys?} = {}) {
+      const {parameters, keys} = options;
+  
+      // Get parameter definitions for this Resource
+      // @ts-expect-error
+      const PARAMETERS = this.constructor.PARAMETERS || {};
+  
+      const isWebgl2 = isWebGL2(this.gl);
+  
+      const values = {};
+  
+      // Query all parameters if no list provided
+      const parameterKeys = parameters || Object.keys(PARAMETERS);
+  
+      // WEBGL limits
+      for (const pname of parameterKeys) {
+        const parameter = PARAMETERS[pname];
+  
+        // Check if this parameter is available on this platform
+        const parameterAvailable =
+          parameter &&
+          (!('webgl2' in parameter) || isWebgl2) &&
+          (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+  
+        if (parameterAvailable) {
+          const key = keys ? getKey(this.gl, pname) : pname;
+          values[key] = this.getParameter(pname, options);
+          if (keys && parameter.type === 'GLenum') {
+            values[key] = getKey(this.gl, values[key]);
+          }
+        }
+      }
+  
+      return values;
+    }
+  
+    /**
+     * Update a Resource setting
+     *
+     * @todo - cache parameter to avoid issuing WebGL calls?
+     *
+     * @param {string} pname - parameter (GL constant, value or key)
+     * @param {GLint|GLfloat|GLenum} value
+     * @return {Resource} returns self to enable chaining
+     */
+    setParameter(pname, value) {
+      pname = getKeyValue(this.gl, pname);
+      assert(pname);
+  
+      // @ts-expect-error
+      const parameters = this.constructor.PARAMETERS || {};
+  
+      const parameter = parameters[pname];
+      if (parameter) {
+        const isWebgl2 = isWebGL2(this.gl);
+  
+        // Check if this parameter is available on this platform
+        const parameterAvailable =
+          (!('webgl2' in parameter) || isWebgl2) &&
+          (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+  
+        if (!parameterAvailable) {
+          throw new Error('Parameter not available on this platform');
+        }
+  
+        // Handle string keys
+        if (parameter.type === 'GLenum') {
+          // @ts-expect-error
+          value = getKeyValue(value);
+        }
+      }
+  
+      // If unknown parameter - Could be a valid parameter not covered by PARAMS
+      // attempt to set it and let WebGL report errors
+      this._setParameter(pname, value);
+      return this;
+    }
+  
+    /*
+     * Batch update resource parameters
+     * Assumes the subclass supports a setParameter call
+     */
+    setParameters(parameters) {
+      for (const pname in parameters) {
+        this.setParameter(pname, parameters[pname]);
+      }
+      return this;
+    }
+  
+  _getParameter(pname: number, props?): any {
     switch (pname) {
       case GL.TEXTURE_WIDTH:
         return this.width;
@@ -717,7 +883,7 @@ export default class Texture extends Resource {
     }
   }
 
-  _setParameter(pname, param) {
+  _setParameter(pname: number, param: number): this {
     this.gl.bindTexture(this.target, this.handle);
 
     // NOTE: Apply NPOT workaround
@@ -729,7 +895,7 @@ export default class Texture extends Resource {
     switch (pname) {
       case GL.TEXTURE_MIN_LOD:
       case GL.TEXTURE_MAX_LOD:
-        this.gl.texParameterf(this.handle, pname, param);
+        this.gl.texParameterf(this.target, pname, param);
         break;
 
       case GL.TEXTURE_WIDTH:
@@ -746,7 +912,7 @@ export default class Texture extends Resource {
     return this;
   }
 
-  _isNPOT() {
+  _isNPOT(): boolean {
     if (isWebGL2(this.gl)) {
       // NPOT restriction is only for WebGL1
       return false;
@@ -774,7 +940,7 @@ export default class Texture extends Resource {
     }
   }
 
-  _getNPOTParam(pname, param) {
+  _getNPOTParam(pname: number, param: number): number {
     if (this._isNPOT()) {
       switch (pname) {
         case GL.TEXTURE_MIN_FILTER:

package/src/classes/{transform-feedback.js → transform-feedback.ts}

@@ -1,27 +1,36 @@
+import {log, isObjectEmpty} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, log} from '@luma.gl/gltools';
-import Resource from './resource';
-import Buffer from './buffer';
-import {isObjectEmpty} from '../utils/utils';
-
-// NOTE: The `bindOnUse` flag is a major workaround:
-// See https://github.com/KhronosGroup/WebGL/issues/2346
-
-export default class TransformFeedback extends Resource {
-  static isSupported(gl) {
+import WebGLDevice from '../adapter/webgl-device';
+import {isWebGL2, assertWebGL2Context} from '../context/context/webgl-checks';
+import WebGLResource, {ResourceProps} from './webgl-resource';
+import Buffer from './webgl-buffer';
+
+export type TransformFeedbackProps = ResourceProps & {
+  [key: string]: any;
+};
+
+export default class TransformFeedback extends WebGLResource<TransformFeedbackProps> {
+  buffers = {};
+  unused = {};
+  configuration = null;
+  // NOTE: The `bindOnUse` flag is a major workaround:
+  // See https://github.com/KhronosGroup/WebGL/issues/2346
+  bindOnUse = true;
+
+  static isSupported(gl: WebGLRenderingContext): boolean {
     return isWebGL2(gl);
   }
 
-  constructor(gl, props = {}) {
+  constructor(gl: WebGLRenderingContext, props: TransformFeedbackProps = {}) {
+    super(WebGLDevice.attach(gl), props, {} as any);
     assertWebGL2Context(gl);
-    super(gl, props);
 
     this.initialize(props);
     this.stubRemovedMethods('TransformFeedback', 'v6.0', ['pause', 'resume']);
     Object.seal(this);
   }
 
-  initialize(props = {}) {
+  initialize(props?: TransformFeedbackProps): this {
     this.buffers = {};
     this.unused = {};
     this.configuration = null;
@@ -36,7 +45,7 @@ export default class TransformFeedback extends Resource {
     return this;
   }
 
-  setProps(props) {
+  setProps(props: TransformFeedbackProps) {
     if ('program' in props) {
       this.configuration = props.program && props.program.configuration;
     }
@@ -66,7 +75,7 @@ export default class TransformFeedback extends Resource {
 
     if (location < 0) {
       this.unused[locationOrName] = buffer;
-      log.warn(() => `${this.id} unused varying buffer ${locationOrName}`)();
+      log.warn(`${this.id} unused varying buffer ${locationOrName}`)();
       return this;
     }
 
@@ -82,19 +91,19 @@ export default class TransformFeedback extends Resource {
   }
 
   begin(primitiveMode = GL.POINTS) {
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
     this._bindBuffers();
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.beginTransformFeedback(primitiveMode);
     return this;
   }
 
   end() {
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.endTransformFeedback();
     this._unbindBuffers();
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);
     return this;
   }
@@ -151,13 +160,13 @@ export default class TransformFeedback extends Resource {
     }
   }
 
-  _bindBuffer(index, buffer, byteOffset = 0, byteSize) {
+  _bindBuffer(index, buffer, byteOffset = 0, byteSize?) {
     const handle = buffer && buffer.handle;
     if (!handle || byteSize === undefined) {
-      // @ts-ignore
+      // @ts-expect-error
       this.gl.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle);
     } else {
-      // @ts-ignore
+      // @ts-expect-error
       this.gl.bindBufferRange(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle, byteOffset, byteSize);
     }
     return this;
@@ -166,17 +175,17 @@ export default class TransformFeedback extends Resource {
   // RESOURCE METHODS
 
   _createHandle() {
-    // @ts-ignore
+    // @ts-expect-error
     return this.gl.createTransformFeedback();
   }
 
   _deleteHandle() {
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.deleteTransformFeedback(this.handle);
   }
 
   _bindHandle(handle) {
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
   }
 }

package/src/classes/{uniform-buffer-layout.js → uniform-buffer-layout.ts}

@@ -1,8 +1,7 @@
 // @ts-nocheck
 
-/* eslint-disable camelcase */
+import {assert} from '@luma.gl/api';
 import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
-import {assert} from '../utils/assert';
 
 const ERR_ARGUMENT = 'UniformBufferLayout illegal argument';
 
@@ -11,8 +10,10 @@ const GL_FLOAT = 0x1406;
 const GL_INT = 0x1404;
 const GL_UNSIGNED_INT = 0x1405;
 
-// Std140 layout for uniforms
-export default class UniformBufferLayout {
+/**
+ * Std140 layout for uniforms
+ */
+ export default class UniformBufferLayout {
   constructor(layout) {
     this.layout = {};
     this.size = 0;
@@ -34,7 +35,7 @@ export default class UniformBufferLayout {
   }
 
   // Get number of bytes needed for buffer allocation
-  getBytes() {
+  getBytes(): number {
     return this.size * 4;
   }
 
@@ -44,7 +45,10 @@ export default class UniformBufferLayout {
   }
 
   // Get offset and data for one object (for bufferSubData)
-  getSubData(index) {
+  getSubData(index): {
+    data: any;
+    offset: any;
+  } {
     let data;
     let offset;
     if (index === undefined) {