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

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

@@ -1,18 +1,23 @@
 import GL from '@luma.gl/constants';
 import {log, assertWebGLContext} from '@luma.gl/gltools';
-import Texture from './texture';
+import Texture, {TextureProps} from './texture';
 
-const FACES = [
-  GL.TEXTURE_CUBE_MAP_POSITIVE_X,
-  GL.TEXTURE_CUBE_MAP_NEGATIVE_X,
-  GL.TEXTURE_CUBE_MAP_POSITIVE_Y,
-  GL.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-  GL.TEXTURE_CUBE_MAP_POSITIVE_Z,
-  GL.TEXTURE_CUBE_MAP_NEGATIVE_Z
-];
+export type TextureCubeProps = TextureProps & {
+};
 
 export default class TextureCube extends Texture {
-  constructor(gl, props = {}) {
+  static FACES: number[] = [
+    GL.TEXTURE_CUBE_MAP_POSITIVE_X,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_X,
+    GL.TEXTURE_CUBE_MAP_POSITIVE_Y,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+    GL.TEXTURE_CUBE_MAP_POSITIVE_Z,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_Z
+  ];
+
+  props;
+
+  constructor(gl: WebGLRenderingContext, props?: TextureCubeProps) {
     assertWebGLContext(gl);
 
     super(gl, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
@@ -22,11 +27,15 @@ export default class TextureCube extends Texture {
     Object.seal(this);
   }
 
-  initialize(props = {}) {
+  get [Symbol.toStringTag](): string {
+    return 'TextureCube';
+  }
+
+  initialize(props?: TextureCubeProps): this {
     const {mipmaps = true, parameters = {}} = props;
 
     // Store props for accessors
-    this.opts = props;
+    this.props = props;
 
     // @ts-ignore
     this.setCubeMapImageData(props).then(() => {
@@ -43,22 +52,33 @@ export default class TextureCube extends Texture {
     return this;
   }
 
-  subImage({face, data, x = 0, y = 0, mipmapLevel = 0}) {
+  subImage(options: {face: any; data: any; x?: number; y?: number; mipmapLevel?: number}): any {
+    const {face, data, x = 0, y = 0, mipmapLevel = 0} = options;
     // @ts-ignore TODO - is this a bug?
     return this._subImage({target: face, data, x, y, mipmapLevel});
   }
 
   /* eslint-disable max-statements, max-len */
-  async setCubeMapImageData({
-    width,
-    height,
-    pixels,
-    data,
-    border = 0,
-    format = GL.RGBA,
-    type = GL.UNSIGNED_BYTE
-  }) {
+  async setCubeMapImageData(options: {
+    width: any;
+    height: any;
+    pixels: any;
+    data: any;
+    border?: number;
+    format?: any;
+    type?: any;
+  }): Promise<void>{
     const {gl} = this;
+
+    const {
+      width,
+      height,
+      pixels,
+      data,
+      border = 0,
+      format = GL.RGBA,
+      type = GL.UNSIGNED_BYTE
+    } = options;
     const imageDataMap = pixels || data;
 
     // pixel data (imageDataMap) is an Object from Face to Image or Promise.
@@ -75,7 +95,7 @@ export default class TextureCube extends Texture {
     // ... }
 
     const resolvedFaces = await Promise.all(
-      FACES.map(face => {
+      TextureCube.FACES.map((face) => {
         const facePixels = imageDataMap[face];
         return Promise.all(Array.isArray(facePixels) ? facePixels : [facePixels]);
       })
@@ -83,8 +103,8 @@ export default class TextureCube extends Texture {
 
     this.bind();
 
-    FACES.forEach((face, index) => {
-      if (resolvedFaces[index].length > 1 && this.opts.mipmaps !== false) {
+    TextureCube.FACES.forEach((face, index) => {
+      if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
         // If the user provides multiple LODs, then automatic mipmap
         // generation generateMipmap() should be disabled to avoid overwritting them.
         log.warn(`${this.id} has mipmap and multiple LODs.`)();
@@ -122,7 +142,7 @@ export default class TextureCube extends Texture {
 
     this.bind();
     if (imageData instanceof Promise) {
-      imageData.then(resolvedImageData =>
+      imageData.then((resolvedImageData) =>
         this.setImageDataForFace(
           Object.assign({}, options, {
             face,
@@ -140,5 +160,3 @@ export default class TextureCube extends Texture {
     return this;
   }
 }
-
-TextureCube.FACES = FACES;

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

@@ -8,8 +8,16 @@ import {isWebGL2} from '@luma.gl/gltools';
 // const SRGB = 'EXT_sRGB';
 // const DEPTH = 'WEBGL_depth_texture';
 
+type TextureFormat = {
+  dataFormat: number;
+  types: number[];
+  gl2?: boolean;
+  gl1?: boolean;
+  compressed?: boolean;
+}
+
 // Legal combinations for internalFormat, format and type
-export const TEXTURE_FORMATS = {
+export const TEXTURE_FORMATS: Record<string, TextureFormat> = {
   // Unsized texture format - more performance
   [GL.RGB]: {dataFormat: GL.RGB, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_5_6_5]},
   // TODO: format: GL.RGBA type: GL.FLOAT is supported in WebGL1 when 'OES_texure_float' is suported

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

@@ -1,9 +1,9 @@
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, withParameters, log} from '@luma.gl/gltools';
+import {isWebGL2, assertWebGL2Context, getWebGL2Context, withParameters, log} from '@luma.gl/gltools';
 import {global} from 'probe.gl/env';
-
-import Resource from './resource';
-import Buffer from './buffer';
+import {getKey, getKeyValue} from '../webgl-utils';
+import {Texture, TextureProps} from '@luma.gl/api';
+import Buffer from './webgl-buffer';
 import {
   TEXTURE_FORMATS,
   DATA_FORMAT_CHANNELS,
@@ -11,8 +11,9 @@ import {
   isFormatSupported,
   isLinearFilteringSupported
 } from './texture-formats';
-import {assert} from '../utils/assert';
-import {uid, isPowerOfTwo} from '../utils/utils';
+import {uid, isPowerOfTwo, assert} from '../utils';
+
+export {TextureProps};
 
 // Supported min filters for NPOT texture.
 const NPOT_MIN_FILTERS = [GL.LINEAR, GL.NEAREST];
@@ -21,9 +22,42 @@ const NPOT_MIN_FILTERS = [GL.LINEAR, GL.NEAREST];
 // 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 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 = undefined;
+
+  target: number;
+  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(
+    gl: WebGLRenderingContext,
+    options?: {
+      format: any;
+      linearFiltering: any;
+    }
+  ): boolean {
+    const {format, linearFiltering} = options;
     let supported = true;
     if (format) {
       supported = supported && isFormatSupported(gl, format);
@@ -42,7 +76,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(gl: WebGLRenderingContext, props: TextureProps) {
+    super(gl as any, props);
+
     const {
       id = uid('texture'),
       handle,
@@ -50,8 +86,6 @@ export default class Texture extends Resource {
       // , magFilter, minFilter, wrapS, wrapT
     } = props;
 
-    super(gl, {id, handle});
-
     this.target = target;
     this.textureUnit = undefined;
 
@@ -69,18 +103,32 @@ export default class Texture extends Resource {
     this.border = undefined;
     this.textureUnit = undefined;
     this.mipmaps = undefined;
+
+    this.gl = gl;
+    this.gl2 = getWebGL2Context(gl);
+    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 = {}) {
+  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,
@@ -191,7 +239,7 @@ export default class Texture extends Resource {
     return this;
   }
 
-  update() {
+  update(): this {
     if (this._video) {
       const {video, parameters, lastTime} = this._video;
       // @ts-ignore
@@ -211,7 +259,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 +275,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;
@@ -266,7 +314,7 @@ export default class Texture extends Resource {
    */
   /* eslint-disable max-len, max-statements, complexity */
   setImageData(options) {
-    this._trackDeallocatedMemory('Texture');
+    this.trackDeallocatedMemory('Texture');
 
     const {
       target = this.target,
@@ -367,13 +415,13 @@ 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;
@@ -504,7 +552,7 @@ export default class Texture extends Resource {
     return null;
   }
 
-  getActiveUnit() {
+  getActiveUnit(): number {
     return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
   }
 
@@ -660,7 +708,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 +742,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-ignore
+      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-ignore
+      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-ignore
+      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 +884,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 +896,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 +913,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 +941,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,35 @@
 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 WebGLResource, {ResourceProps} from './webgl-resource';
+import Buffer from './webgl-buffer';
+import {isObjectEmpty} from '../utils';
+
+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(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 +44,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;
     }
@@ -151,7 +159,7 @@ 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

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

@@ -1,8 +1,7 @@
 // @ts-nocheck
 
-/* eslint-disable camelcase */
 import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
-import {assert} from '../utils/assert';
+import {assert} from '../utils';
 
 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) {