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

package/src/classes/texture-2d.ts

@@ -1,21 +1,17 @@
+import {Device, loadImage} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {assertWebGLContext} from '@luma.gl/gltools';
-import Texture, {TextureProps} from './texture';
-import {loadImage} from '../utils/load-file';
+import Texture, {TextureProps, TextureSupportOptions} from './texture';
 
 
 export type Texture2DProps = TextureProps & {
 };
 
 export default class Texture2D extends Texture {
-  static isSupported(gl: WebGLRenderingContext, opts?: object): boolean {
-    // @ts-expect-error
-    return Texture.isSupported(gl, opts);
+  static isSupported(device: Device | WebGLRenderingContext, opts?: TextureSupportOptions): boolean {
+    return Texture.isSupported(device, opts);
   }
 
-  constructor(gl: WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
-      assertWebGLContext(gl);
-
+  constructor(device: Device | WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
     // Signature: new Texture2D(gl, url | Promise)
     if (props instanceof Promise || typeof props === 'string') {
       props = {data: props};
@@ -23,11 +19,10 @@ export default class Texture2D extends Texture {
 
     // Signature: new Texture2D(gl, {data: url})
     if (typeof props?.data === 'string') {
-      // @ts-expect-error
       props = Object.assign({}, props, {data: loadImage(props.data)});
     }
 
-    super(gl, Object.assign({}, props, {target: GL.TEXTURE_2D}));
+    super(device, Object.assign({}, props, {target: GL.TEXTURE_2D}));
 
     this.initialize(props);
 

package/src/classes/texture-3d.ts

@@ -1,5 +1,8 @@
+import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, withParameters} from '@luma.gl/gltools';
+import WebGLDevice from '../device/webgl-device';
+import {assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
 import Texture, {TextureProps} from './texture';
 import {DATA_FORMAT_CHANNELS, TYPE_SIZES} from './texture-formats';
 import Buffer from './webgl-buffer';
@@ -26,16 +29,20 @@ type SetImageDataOptions = {
  * They are accessed by 3-dimensional texture coordinates.
  */
 export default class Texture3D extends Texture {
-  static isSupported(gl: WebGLRenderingContext): boolean {
-    return isWebGL2(gl);
+  static isSupported(device: Device | WebGLRenderingContext): boolean {
+    try {
+      const webglDevice = WebGLDevice.attach(device);
+      return webglDevice.isWebGL2;
+    } catch {
+      return false;
+    }
   }
 
-  constructor(gl: WebGL2RenderingContext, props: Texture3DProps = {}) {
-    super(gl as WebGLRenderingContext, props);
-    assertWebGL2Context(gl);
+  constructor(device: Device | WebGL2RenderingContext, props: Texture3DProps = {}) {
+    super(device, {...props, target: GL.TEXTURE_3D});
+    assertWebGL2Context(this.gl2);
     props = Object.assign({depth: 1}, props, {target: GL.TEXTURE_3D, unpackFlipY: false});
     this.initialize(props);
-
     Object.seal(this);
   }
 
@@ -63,7 +70,7 @@ export default class Texture3D extends Texture {
 
     withParameters(this.gl, parameters, () => {
       if (ArrayBuffer.isView(data)) {
-        // @ts-ignore
+        // @ts-expect-error
         this.gl.texImage3D(
           this.target,
           level,
@@ -80,7 +87,7 @@ export default class Texture3D extends Texture {
 
       if (data instanceof Buffer) {
         this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle);
-        // @ts-ignore
+        // @ts-expect-error
         this.gl.texImage3D(
           this.target,
           level,
@@ -100,9 +107,7 @@ export default class Texture3D extends Texture {
       this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
       // NOTE(Tarek): Default to RGBA bytes
-      // @ts-ignore
       const channels = DATA_FORMAT_CHANNELS[this.dataFormat] || 4;
-      // @ts-ignore
       const channelSize = TYPE_SIZES[this.type] || 1;
 
       this.trackAllocatedMemory(

package/src/classes/texture-cube.ts

@@ -1,5 +1,7 @@
+import {Device, log} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log, assertWebGLContext} from '@luma.gl/gltools';
+import WebGLDevice from '../device/webgl-device';
+import {assertWebGLContext} from '../context/context/webgl-checks';
 import Texture, {TextureProps} from './texture';
 
 export type TextureCubeProps = TextureProps & {
@@ -17,10 +19,8 @@ export default class TextureCube extends Texture {
 
   props;
 
-  constructor(gl: WebGLRenderingContext, props?: TextureCubeProps) {
-    assertWebGLContext(gl);
-
-    super(gl, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
+  constructor(device: Device | WebGLRenderingContext, props?: TextureCubeProps) {
+    super(device, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
 
     this.initialize(props);
 
@@ -37,7 +37,7 @@ export default class TextureCube extends Texture {
     // Store props for accessors
     this.props = props;
 
-    // @ts-ignore
+    // @ts-expect-error
     this.setCubeMapImageData(props).then(() => {
       this.loaded = true;
 
@@ -54,7 +54,7 @@ export default class TextureCube extends Texture {
 
   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?
+    // @ts-expect-error TODO - is this a bug?
     return this._subImage({target: face, data, x, y, mipmapLevel});
   }
 

package/src/classes/texture-formats.ts

@@ -1,5 +1,5 @@
 import GL from '@luma.gl/constants';
-import {isWebGL2} from '@luma.gl/gltools';
+import {isWebGL2} from '../context/context/webgl-checks';
 
 // const S3TC = 'WEBGL_compressed_texture_s3tc';
 // const PVRTC = 'WEBGL_compressed_texture_pvrtc';

package/src/classes/texture.ts

@@ -1,8 +1,10 @@
-import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, getWebGL2Context, withParameters, log} from '@luma.gl/gltools';
-import {global} from 'probe.gl/env';
-import {getKey, getKeyValue} from '../webgl-utils';
+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} 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 '../device/webgl-device';
 import Buffer from './webgl-buffer';
 import {
   TEXTURE_FORMATS,
@@ -11,20 +13,21 @@ import {
   isFormatSupported,
   isLinearFilteringSupported
 } from './texture-formats';
-import {uid, isPowerOfTwo, assert} from '../utils';
 
-export {TextureProps};
+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 WEBGLTexture extends Texture {
   readonly MAX_ATTRIBUTES: number;
-
+  readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLTexture;
@@ -39,9 +42,9 @@ export default class WEBGLTexture extends Texture {
   type = undefined;
   dataFormat = undefined;
   border = undefined;
-  mipmaps = undefined;
+  mipmaps: boolean = undefined;
 
-  target: number;
+  target: GL;
   textureUnit: number = undefined;
 
   // Program.draw() checks the loaded flag of all textures to avoid
@@ -51,17 +54,15 @@ export default class WEBGLTexture extends Texture {
   _video;
 
   static isSupported(
-    gl: WebGLRenderingContext,
-    options?: {
-      format: any;
-      linearFiltering: any;
-    }
+    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;
   }
@@ -76,8 +77,8 @@ export default class WEBGLTexture extends Texture {
   // 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: WebGLRenderingContext, props: TextureProps) {
-    super(gl as any, props);
+  constructor(device: Device | WebGLRenderingContext, props: TextureProps) {
+    super(WebGLDevice.attach(device), props);
 
     const {
       id = uid('texture'),
@@ -104,8 +105,9 @@ export default class WEBGLTexture extends Texture {
     this.textureUnit = undefined;
     this.mipmaps = undefined;
 
-    this.gl = gl;
-    this.gl2 = getWebGL2Context(gl);
+    this.device = WebGLDevice.attach(device);
+    this.gl = this.device.gl;
+    this.gl2 = this.device.gl2;
     this.handle = this.props.handle || this.gl.createTexture();
   }
 
@@ -123,7 +125,7 @@ export default class WEBGLTexture extends Texture {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
-  /* eslint-disable max-len, max-statements */
+  // eslint-disable-next-line max-statements
   initialize(props: TextureProps = {}): this {
     let data = props.data;
 
@@ -139,7 +141,7 @@ export default class WEBGLTexture extends Texture {
       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));
@@ -231,7 +233,7 @@ export default class WEBGLTexture extends Texture {
       this._video = {
         video: data,
         parameters,
-        // @ts-ignore
+        // @ts-expect-error
         lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
       };
     }
@@ -242,7 +244,7 @@ export default class WEBGLTexture extends Texture {
   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;
       }
@@ -312,7 +314,7 @@ export default class WEBGLTexture extends Texture {
    * @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');
 
@@ -366,7 +368,6 @@ export default class WEBGLTexture extends Texture {
         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,
@@ -377,7 +378,7 @@ export default class WEBGLTexture extends Texture {
             dataFormat,
             type,
             data,
-            // @ts-ignore
+            // @ts-expect-error
             offset
           );
           break;
@@ -428,8 +429,7 @@ export default class WEBGLTexture extends Texture {
 
     return this;
   }
-  /* eslint-enable max-len, max-statements, complexity */
-
+  
   /**
    * Redefines an area of an existing texture
    * Note: does not allocate storage
@@ -515,9 +515,9 @@ export default class WEBGLTexture extends Texture {
         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
@@ -535,8 +535,7 @@ export default class WEBGLTexture extends Texture {
 
     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).
@@ -606,7 +605,7 @@ export default class WEBGLTexture extends Texture {
     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, ...)
@@ -752,7 +751,7 @@ export default class WEBGLTexture extends Texture {
       pname = getKeyValue(this.gl, pname);
       assert(pname);
   
-      // @ts-ignore
+      // @ts-expect-error
       const parameters = this.constructor.PARAMETERS || {};
   
       // Use parameter definitions to handle unsupported parameters
@@ -785,7 +784,7 @@ export default class WEBGLTexture extends Texture {
       const {parameters, keys} = options;
   
       // Get parameter definitions for this Resource
-      // @ts-ignore
+      // @ts-expect-error
       const PARAMETERS = this.constructor.PARAMETERS || {};
   
       const isWebgl2 = isWebGL2(this.gl);
@@ -830,7 +829,7 @@ export default class WEBGLTexture extends Texture {
       pname = getKeyValue(this.gl, pname);
       assert(pname);
   
-      // @ts-ignore
+      // @ts-expect-error
       const parameters = this.constructor.PARAMETERS || {};
   
       const parameter = parameters[pname];

package/src/classes/transform-feedback.ts

@@ -1,8 +1,9 @@
+import {log, isObjectEmpty} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, log} from '@luma.gl/gltools';
+import WebGLDevice from '../device/webgl-device';
+import {isWebGL2, assertWebGL2Context} from '../context/context/webgl-checks';
 import WebGLResource, {ResourceProps} from './webgl-resource';
 import Buffer from './webgl-buffer';
-import {isObjectEmpty} from '../utils';
 
 export type TransformFeedbackProps = ResourceProps & {
   [key: string]: any;
@@ -21,7 +22,7 @@ export default class TransformFeedback extends WebGLResource<TransformFeedbackPr
   }
 
   constructor(gl: WebGLRenderingContext, props: TransformFeedbackProps = {}) {
-    super(gl, props, {} as any);
+    super(WebGLDevice.attach(gl), props, {} as any);
     assertWebGL2Context(gl);
 
     this.initialize(props);
@@ -74,7 +75,7 @@ export default class TransformFeedback extends WebGLResource<TransformFeedbackPr
 
     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;
     }
 
@@ -90,19 +91,19 @@ export default class TransformFeedback extends WebGLResource<TransformFeedbackPr
   }
 
   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;
   }
@@ -162,10 +163,10 @@ export default class TransformFeedback extends WebGLResource<TransformFeedbackPr
   _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;
@@ -174,17 +175,17 @@ export default class TransformFeedback extends WebGLResource<TransformFeedbackPr
   // 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.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 
+import {assert} from '@luma.gl/api';
 import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
-import {assert} from '../utils';
 
 const ERR_ARGUMENT = 'UniformBufferLayout illegal argument';
 

package/src/classes/uniforms.ts

@@ -1,13 +1,10 @@
-/** @typedef {import('./uniforms')} types */
-
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log} from '@luma.gl/gltools';
 import {Matrix4} from '@math.gl/core';
 
 import Framebuffer from './framebuffer';
 import Renderbuffer from './renderbuffer';
 import Texture from './texture';
-import {assert} from '../utils';
 
 type NumberUniformInfo = {
   type: 'number'
@@ -54,7 +51,6 @@ type Uniforms = {
 const UNIFORM_SETTERS = {
   // WEBGL1
 
-  /* eslint-disable max-len */
   [GL.FLOAT]: getArraySetter.bind(null, 'uniform1fv', toFloatArray, 1, setVectorUniform),
   [GL.FLOAT_VEC2]: getArraySetter.bind(null, 'uniform2fv', toFloatArray, 2, setVectorUniform),
   [GL.FLOAT_VEC3]: getArraySetter.bind(null, 'uniform3fv', toFloatArray, 3, setVectorUniform),
@@ -169,7 +165,6 @@ const UNIFORM_SETTERS = {
   [GL.UNSIGNED_INT_SAMPLER_3D]: getSamplerSetter,
   [GL.UNSIGNED_INT_SAMPLER_CUBE]: getSamplerSetter,
   [GL.UNSIGNED_INT_SAMPLER_2D_ARRAY]: getSamplerSetter
-  /* eslint-enable max-len */
 };
 
 // Pre-allocated typed arrays for temporary conversion
@@ -233,8 +228,7 @@ export function parseUniformName(name: string): {name: string; isArray: boolean,
       // Add space to source
       source = source ? `${source} ` : '';
       // Value could be unprintable so write the object on console
-      console.error(`${source} Bad uniform ${uniformName}`, value); // eslint-disable-line
-      /* eslint-enable no-console */
+      console.error(`${source} Bad uniform ${uniformName}`, value); // eslint-disable-line no-console
       throw new Error(`${source} Bad uniform ${uniformName}`);
     }
   }
@@ -248,12 +242,12 @@ export function copyUniform(uniforms: object, key: string, value: any): void {
   if (Array.isArray(value) || ArrayBuffer.isView(value)) {
     if (uniforms[key]) {
       const dest = uniforms[key];
-      // @ts-ignore
+      // @ts-expect-error
       for (let i = 0, len = value.length; i < len; ++i) {
         dest[i] = value[i];
       }
     } else {
-      // @ts-ignore
+      // @ts-expect-error
       uniforms[key] = value.slice();
     }
   } else {

package/src/classes/vertex-array-object.ts

@@ -1,12 +1,11 @@
+import {assert, getScratchArray, fillArray} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {assertWebGL2Context, isWebGL2} from '@luma.gl/gltools';
-import {getBrowser} from 'probe.gl';
+import {getBrowser} from '@probe.gl/env';
+import WebGLDevice from '../device/webgl-device';
+import {assertWebGL2Context, isWebGL2} from '../context/context/webgl-checks';
 import Program from './program';
 import WebGLResource, {ResourceProps} from './webgl-resource';
 import Buffer from './webgl-buffer';
-import {getScratchArray, fillArray} from '../utils/array-utils-flat';
-import {assert} from '../utils';
-import {getLumaContextData} from '../context/luma-context-data';
 
 const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
 
@@ -24,7 +23,7 @@ export type VertexArrayObjectProps = ResourceProps & {
 export default class VertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
   private static MAX_ATTRIBUTES: number;
 
-  static isSupported(gl: WebGLRenderingContext, options?: VertexArrayObjectProps): boolean {
+  static isSupported(gl: WebGLRenderingContext | WebGL2RenderingContext, options?: VertexArrayObjectProps): boolean {
     if (options?.constantAttributeZero) {
       return isWebGL2(gl) || getBrowser() === 'Chrome';
     }
@@ -38,20 +37,17 @@ export default class VertexArrayObject extends WebGLResource<VertexArrayObjectPr
    * @todo (Tarek): VAOs are now polyfilled. Deprecate this in 9.0
    */
   static getDefaultArray(gl: WebGLRenderingContext): VertexArrayObject {
-    const lumaContextData = getLumaContextData(gl);
-    lumaContextData.defaultVertexArray = lumaContextData.defaultVertexArray || 
+    const webglDevice = WebGLDevice.fromContext(gl);
+    webglDevice.defaultVertexArray = webglDevice.defaultVertexArray || 
       new VertexArrayObject(gl, {handle: null, isDefaultArray: true});
-    return lumaContextData.defaultVertexArray;
+    return webglDevice.defaultVertexArray;
   }
 
   /** Get maximum number of attributes in a vertex array */
   static getMaxAttributes(gl: WebGLRenderingContext): number {
     // TODO - should be cached per context
-    // @ts-ignore
     VertexArrayObject.MAX_ATTRIBUTES =
-      // @ts-ignore
       VertexArrayObject.MAX_ATTRIBUTES || gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
-    // @ts-ignore
     return VertexArrayObject.MAX_ATTRIBUTES;
   }
 
@@ -89,7 +85,7 @@ export default class VertexArrayObject extends WebGLResource<VertexArrayObjectPr
   // Create a VertexArray
   constructor(gl: WebGLRenderingContext, opts?: VertexArrayObjectProps) {
     // Use program's id if program but no id is supplied
-    super(gl, {...opts, id: opts?.id || (opts?.program && opts?.program.id)}, {} as any);
+    super(WebGLDevice.attach(gl), {...opts, id: opts?.id || (opts?.program && opts?.program.id)}, {} as any);
 
     this.buffer = null;
     this.bufferValue = null;
@@ -318,7 +314,7 @@ export default class VertexArrayObject extends WebGLResource<VertexArrayObjectPr
 
   _deleteHandle(): void {
     this.gl2.deleteVertexArray(this.handle);
-    // @ts-ignore
+    // @ts-expect-error
     return [this.elements];
     // return [this.elements, ...this.buffers];
   }

package/src/classes/vertex-array.ts

@@ -1,11 +1,10 @@
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log} from '@luma.gl/gltools';
 import Accessor from './accessor';
 import Buffer from './webgl-buffer';
 import Program from './program'; 
 import ProgramConfiguration from './program-configuration';
 import VertexArrayObject, {VertexArrayObjectProps} from './vertex-array-object';
-import {assert, stubRemovedMethods} from '../utils';
 
 const ERR_ATTRIBUTE_TYPE =
   'VertexArray: attributes must be Buffers or constants (i.e. typed array)';
@@ -19,7 +18,7 @@ export type VertexArrayProps = {
   id?: string;
   program?: Program;
   configuration?: ProgramConfiguration;
-  attributes?: any[];
+  attributes?: Record<string, any>;
   elements?: any;
   bindOnUse?: boolean;
 };

package/src/classes/webgl-buffer.ts

@@ -1,10 +1,11 @@
-import GL from '@luma.gl/constants';
-import {getWebGL2Context, assertWebGL2Context, log} from '@luma.gl/gltools';
+import {log, assert, checkProps} from '@luma.gl/api';
 import {Buffer, BufferProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {getWebGL2Context, assertWebGL2Context} from '../context/context/webgl-checks';
 import {AccessorObject} from '../types';
 import Accessor from './accessor';
-import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from '../webgl-utils';
-import {assert, checkProps} from '../utils';
+import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from '../webgl-utils/typed-array-utils';
+import WebGLDevice from '../device/webgl-device';
 
 const DEBUG_DATA_LENGTH = 10;
 
@@ -58,6 +59,7 @@ export type WebGLBufferProps = BufferProps & {
 
 /** WebGL Buffer interface */
 export default class WEBGLBuffer extends Buffer {
+  readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLBuffer;
@@ -77,7 +79,7 @@ export default class WEBGLBuffer extends Buffer {
   constructor(gl: WebGLRenderingContext, byteLength: number);
 
   constructor(gl: WebGLRenderingContext, props = {}) {
-    super(gl as any, props);
+    super(WebGLDevice.attach(gl), props);
 
     this.gl = gl;
     this.gl2 = getWebGL2Context(gl);