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

package/src/classes/copy-and-blit.ts

@@ -1,20 +1,25 @@
-// @ts-nocheck
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import Buffer from './webgl-buffer';
 import Framebuffer from './framebuffer';
 import Texture from './texture';
-import {assertWebGL2Context, withParameters, log} from '@luma.gl/gltools';
-import {flipRows, scalePixels} from '../webgl-utils';
+import {assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import {flipRows, scalePixels} from '../webgl-utils/typed-array-utils';
 import {getTypedArrayFromGLType, getGLTypeFromTypedArray} from '../webgl-utils/typed-array-utils';
 import {glFormatToComponents, glTypeToBytes} from '../webgl-utils/format-utils';
 import {toFramebuffer} from '../webgl-utils/texture-utils';
-import {assert} from '../utils';
 
-// NOTE: Slow requires roundtrip to GPU
-// Copies data from a Framebuffer or a Texture object into ArrayBuffer object.
-// App can provide targetPixelArray or have it auto allocated by this method
+/**
+ * Copies data from a Framebuffer or a Texture object into ArrayBuffer object.
+ * App can provide targetPixelArray or have it auto allocated by this method
+ *  newly allocated by this method unless provided by app.
+ * @note Slow requires roundtrip to GPU
+ *
+ * @param source
+ * @param options
 // @returns {Uint8Array|Uint16Array|FloatArray} - pixel array,
-//  newly allocated by this method unless provided by app.
+ */
 export function readPixelsToArray(
   source: Framebuffer | Texture,
   options?: {
@@ -28,15 +33,8 @@ export function readPixelsToArray(
     sourceHeight?: number;
     sourceType?: number;
   }
-): Uint8Array | Uint16Array | Float32Array;
-
-// NOTE: Slow requires roundtrip to GPU
-// Copies data from a Framebuffer or a Texture object into ArrayBuffer object.
-// App can provide targetPixelArray or have it auto allocated by this method
-// @returns {Uint8Array|Uint16Array|FloatArray} - pixel array,
-//  newly allocated by this method unless provided by app.
-export function readPixelsToArray(source, options = {}) {
-  const {sourceX = 0, sourceY = 0, sourceFormat = GL.RGBA} = options;
+): Uint8Array | Uint16Array | Float32Array {
+  const {sourceX = 0, sourceY = 0, sourceFormat = GL.RGBA} = options || {};
   let {
     sourceAttachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
     target = null,
@@ -44,7 +42,7 @@ export function readPixelsToArray(source, options = {}) {
     sourceWidth,
     sourceHeight,
     sourceType
-  } = options;
+  } = options || {};
 
   const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
   assert(framebuffer);
@@ -70,7 +68,7 @@ export function readPixelsToArray(source, options = {}) {
 
   const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
   gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
-  // @ts-ignore
+  // @ts-expect-error
   gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
   if (deleteFramebuffer) {
     framebuffer.delete();
@@ -78,8 +76,12 @@ export function readPixelsToArray(source, options = {}) {
   return target;
 }
 
-// NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
-// Copies data from a Framebuffer or a Texture object into a Buffer object.
+/**
+ * Copies data from a Framebuffer or a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
+ * @param source
+ * @param options
+ */
 export function readPixelsToBuffer(
   source: Framebuffer | Texture,
   options?: {
@@ -93,30 +95,23 @@ export function readPixelsToBuffer(
     sourceHeight?: number;
     sourceType?: number;
   }
-): Buffer;
-
-// NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
-// Copies data from a Framebuffer or a Texture object into a Buffer object.
-export function readPixelsToBuffer(
-  source,
-  {
-    sourceX = 0,
-    sourceY = 0,
-    sourceFormat = GL.RGBA,
-    target = null, // A new Buffer object is created when not provided.
-    targetByteOffset = 0, // byte offset in buffer object
+): Buffer {
+  const {sourceX = 0, sourceY = 0, sourceFormat = GL.RGBA,
+    targetByteOffset = 0
+  } = options || {};
     // following parameters are auto deduced if not provided
+  let {
+    target,
     sourceWidth,
     sourceHeight,
-    sourceType
-  }
-) {
+    sourceType,
+  } = options || {}
   const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
   assert(framebuffer);
   sourceWidth = sourceWidth || framebuffer.width;
   sourceHeight = sourceHeight || framebuffer.height;
 
-  // Asynchronus read (PIXEL_PACK_BUFFER) is WebGL2 only feature
+  // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
   const gl2 = assertWebGL2Context(framebuffer.gl);
 
   // deduce type if not available.
@@ -127,12 +122,11 @@ export function readPixelsToBuffer(
     const components = glFormatToComponents(sourceFormat);
     const byteCount = glTypeToBytes(sourceType);
     const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
-    // @ts-expect-error TODO why is WebGL2 context not compatible
     target = new Buffer(gl2, {byteLength, accessor: {type: sourceType, size: components}});
   }
 
+  // @ts-expect-error
   target.bind({target: GL.PIXEL_PACK_BUFFER});
-  // @ts-expect-error TODO why is WebGL2 context not compatible
   withParameters(gl2, {framebuffer}, () => {
     gl2.readPixels(
       sourceX,
@@ -204,6 +198,7 @@ export function copyToImage(
 ): typeof Image {
   const dataUrl = copyToDataUrl(source, {sourceAttachment: options?.sourceAttachment || GL.COLOR_ATTACHMENT0});
   const targetImage = options?.targetImage || new Image();
+  // @ts-expect-error
   targetImage.src = dataUrl;
   // @ts-expect-error
   return targetImage;
@@ -215,7 +210,7 @@ export function copyToImage(
 // eslint-disable-next-line complexity, max-statements
 export function copyToTexture(
   source: Framebuffer | Texture,
-  target: Texture,
+  target: Texture | GL,
   options?: {
     sourceX?: number;
     sourceY?: number;
@@ -236,14 +231,14 @@ export function copyToTexture(
     // attachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
     targetMipmaplevel = 0,
     targetInternalFormat = GL.RGBA
-  } = options;
+  } = options || {};
   let {
     targetX,
     targetY,
     targetZ,
     width, // defaults to target width
     height // defaults to target height
-  } = options;
+  } = options || {};
 
   const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
   assert(framebuffer);
@@ -260,17 +255,20 @@ export function copyToTexture(
   // const prevBuffer = gl.readBuffer(attachment);
   assert(target);
   let texture = null;
+  let textureTarget: GL;
   if (target instanceof Texture) {
     texture = target;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
     texture.bind(0);
-    target = texture.target;
+    textureTarget = texture.target;
+  } else {
+    textureTarget = target;
   }
 
   if (!isSubCopy) {
     gl.copyTexImage2D(
-      target,
+      textureTarget,
       targetMipmaplevel,
       targetInternalFormat,
       sourceX,
@@ -280,11 +278,11 @@ export function copyToTexture(
       0 /* border must be 0 */
     );
   } else {
-    switch (target) {
+    switch (textureTarget) {
       case GL.TEXTURE_2D:
       case GL.TEXTURE_CUBE_MAP:
         gl.copyTexSubImage2D(
-          target,
+          textureTarget,
           targetMipmaplevel,
           targetX,
           targetY,
@@ -298,7 +296,7 @@ export function copyToTexture(
       case GL.TEXTURE_3D:
         const gl2 = assertWebGL2Context(gl);
         gl2.copyTexSubImage3D(
-          target,
+          textureTarget,
           targetMipmaplevel,
           targetX,
           targetY,
@@ -315,7 +313,7 @@ export function copyToTexture(
   if (texture) {
     texture.unbind();
   }
-  // @ts-ignore
+  // @ts-expect-error
   gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
   if (deleteFramebuffer) {
     framebuffer.delete();
@@ -378,7 +376,6 @@ export function blit(
 
   assert(srcFramebuffer);
   assert(dstFramebuffer);
-  // @ts-ignore
   const {gl, handle, width, height, readBuffer} = dstFramebuffer;
   const gl2 = assertWebGL2Context(gl);
 
@@ -427,9 +424,9 @@ export function blit(
     filter
   );
   gl2.readBuffer(readBuffer);
-  // @ts-ignore
+  // @ts-expect-error
   gl2.bindFramebuffer(GL.READ_FRAMEBUFFER, prevReadHandle || null);
-  // @ts-ignore
+  // @ts-expect-error
   gl2.bindFramebuffer(GL.DRAW_FRAMEBUFFER, prevDrawHandle || null);
   if (deleteSrcFramebuffer) {
     srcFramebuffer.delete();
@@ -438,7 +435,7 @@ export function blit(
     dstFramebuffer.delete();
   }
 
-  return dstFramebuffer;
+  // return dstFramebuffer;
 }
 
 // Helper methods

package/src/classes/framebuffer.ts

@@ -1,16 +1,14 @@
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {getWebGL2Context, assertWebGL2Context, log} from '@luma.gl/gltools';
+import WebGLDevice from '../device/webgl-device';
+import {getWebGL2Context, assertWebGL2Context} from '../context/context/webgl-checks';
+import {getKey} from '../webgl-utils/constants-to-keys';
 import Resource, {ResourceProps} from './webgl-resource';
 import Texture2D from './texture-2d';
 import Renderbuffer from './renderbuffer';
 import {clear, clearBuffer} from './clear';
 import {copyToDataUrl} from './copy-and-blit';
 
-import {getLumaContextData} from '../context/luma-context-data';
-import {getFeatures} from '../features';
-import {getKey} from '../webgl-utils';
-import {assert} from '../utils';
-
 const ERR_MULTIPLE_RENDERTARGETS = 'Multiple render targets not supported';
 
 type TextureAttachment = {
@@ -40,7 +38,7 @@ type colorBufferFloatOptions = {colorBufferFloat?: boolean; colorBufferHalfFloat
 
 export class ImmutableFramebuffer extends Resource<FramebufferProps> {
   constructor(gl: WebGLRenderingContext, props?: FramebufferProps) {
-    super(gl, props, {} as any);
+    super(WebGLDevice.attach(gl), props, {} as any);
     this._initialize({
       attachments: props?.attachments || {},
       readBuffer: props?.readBuffer,
@@ -61,7 +59,7 @@ export class ImmutableFramebuffer extends Resource<FramebufferProps> {
     const {gl} = this;
     const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
     const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
-    // @ts-ignore
+    // @ts-expect-error
     gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
     return status;
   }
@@ -82,7 +80,8 @@ export class ImmutableFramebuffer extends Resource<FramebufferProps> {
     }
     message = message || `Framebuffer ${this.id}`;
     const image = copyToDataUrl(this, {targetMaxHeight: 100});
-    log.image({logLevel, message, image}, message)();
+    // @ts-expect-error probe.gl typings incorrectly require priority...
+    log.image({logLevel, message, image})();
     return this;
   }
 
@@ -112,7 +111,7 @@ export class ImmutableFramebuffer extends Resource<FramebufferProps> {
     if (drawBuffers) {
       this._setDrawBuffers(drawBuffers);
     }
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     return this;
@@ -131,7 +130,7 @@ export class ImmutableFramebuffer extends Resource<FramebufferProps> {
       this._attachOne(attachmentPoint, attachment);
     }
 
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
   }
 
@@ -280,16 +279,16 @@ export default class Framebuffer extends ImmutableFramebuffer {
    * Creates a Framebuffer object wrapper for the default WebGL framebuffer (target === null)
    */
   static getDefaultFramebuffer(gl: WebGLRenderingContext): Framebuffer {
-    const lumaContextData = getLumaContextData(gl);
-    lumaContextData.defaultFramebuffer =
-      lumaContextData.defaultFramebuffer ||
+    const webglDevice = WebGLDevice.fromContext(gl);
+    webglDevice.defaultFramebuffer =
+      webglDevice.defaultFramebuffer ||
       new Framebuffer(gl, {
         id: 'default-framebuffer',
         handle: null,
         attachments: {}
       });
     // TODO - can we query for and get a handle to the GL.FRONT renderbuffer?
-    return lumaContextData.defaultFramebuffer;
+    return webglDevice.defaultFramebuffer;
   }
 
   get MAX_COLOR_ATTACHMENTS(): number {
@@ -407,13 +406,13 @@ export default class Framebuffer extends ImmutableFramebuffer {
       this._setDrawBuffers(drawBuffers);
       this.drawBuffers = drawBuffers;
     }
-    // @ts-ignore
+    // @ts-expect-error
     gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     return this;
   }
 
-  // Attachment resize is expected to be a noop if size is same
+  /** Attachment resize is expected to be a noop if size is same */
   resize(size?: {width?: number; height?: number}): this {
     let {width, height} = size || {};
     // for default framebuffer, just update the stored size
@@ -442,7 +441,7 @@ export default class Framebuffer extends ImmutableFramebuffer {
     return this;
   }
 
-  // Attach from a map of attachments
+  /** Attach from a map of attachments */
   attach(attachments, {clearAttachments = false, resizeAttachments = true} = {}) {
     const newAttachments = {};
 
@@ -480,7 +479,7 @@ export default class Framebuffer extends ImmutableFramebuffer {
       }
     }
 
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     // Assign to attachments and remove any nulls to get a clean attachment map
@@ -506,7 +505,7 @@ export default class Framebuffer extends ImmutableFramebuffer {
       clearBuffer(this.gl, {drawBuffer, value});
     });
 
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     return this;
@@ -531,10 +530,10 @@ export default class Framebuffer extends ImmutableFramebuffer {
       gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments);
     } else {
       // TODO - why does type checking fail on this line
-      // @ts-ignore
+      // @ts-expect-error
       gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments, x, y, width, height);
     }
-    // @ts-ignore
+    // @ts-expect-error
     gl2.bindFramebuffer(GL.READ_FRAMEBUFFER, prevHandle);
     return this;
   }
@@ -549,7 +548,7 @@ export default class Framebuffer extends ImmutableFramebuffer {
       this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
     }
     if (keys && value > 1000) {
-      // @ts-ignore
+      // @ts-expect-error
       value = getKey(this.gl, value);
     }
     return value;
@@ -558,7 +557,7 @@ export default class Framebuffer extends ImmutableFramebuffer {
   getAttachmentParameters(
     attachment = GL.COLOR_ATTACHMENT0,
     keys,
-    // @ts-ignore
+    // @ts-expect-error
     parameters = this.constructor.ATTACHMENT_PARAMETERS || []
   ) {
     const values = {};
@@ -672,32 +671,36 @@ export default class Framebuffer extends ImmutableFramebuffer {
     delete this.attachments[attachment];
   }
 
-  // Attempt to provide workable defaults for WebGL2 symbols under WebGL1
-  // null means OK to query
-  // TODO - move to webgl1 polyfills
-  /* eslint-disable complexity */
+  /**
+   * Attempt to provide workable defaults for WebGL2 symbols under WebGL1
+   * null means OK to query
+   * TODO - move to webgl1 polyfills
+   * @param pname 
+   * @returns 
+   */
+  // eslint-disable-next-line complexity
   _getAttachmentParameterFallback(pname) {
-    const caps = getFeatures(this.gl);
+    const webglDevice = WebGLDevice.fromContext(this.gl);
+    const features = webglDevice.features;
 
     switch (pname) {
       case GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER: // GLint
-        return !caps.WEBGL2 ? 0 : null;
+        return !features.has('webgl2') ? 0 : null;
       case GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE: // GLint
-        return !caps.WEBGL2 ? 8 : null;
+        return !features.has('webgl2') ? 8 : null;
       case GL.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE: // GLenum
-        return !caps.WEBGL2 ? GL.UNSIGNED_INT : null;
+        return !features.has('webgl2') ? GL.UNSIGNED_INT : null;
       case GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING:
-        return !caps.WEBGL2 && !caps.EXT_sRGB ? GL.LINEAR : null;
+        return !features.has('webgl2') && !features.has('webgl-color-encoding-srgb') ? GL.LINEAR : null;
       default:
         return null;
     }
   }
-  /* eslint-enable complexity */
 }
 
 // PUBLIC METHODS
@@ -713,7 +716,7 @@ function mapIndexToCubeMapFace(layer) {
 // Get a string describing the framebuffer error if installed
 function _getFrameBufferStatus(status) {
   // Use error mapping if installed
-  // @ts-ignore
+  // @ts-expect-error
   const STATUS = Framebuffer.STATUS || {};
   return STATUS[status] || `Framebuffer error ${status}`;
 }

package/src/classes/program-configuration.ts

@@ -1,7 +1,7 @@
 // Contains metadata describing attribute configurations for a program's shaders
 // Much of this is automatically extracted from shaders after program linking
 import Accessor from './accessor';
-import {isWebGL2} from '@luma.gl/gltools';
+import {isWebGL2} from '../context/context/webgl-checks';
 import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
 
 /**
@@ -12,13 +12,13 @@ import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
  */
  export default class ProgramConfiguration {
   id: string;
-  attributeInfos = [];
-  attributeInfosByName = {};
+  attributeInfos: any[] = [];
+  attributeInfosByName: Record<string, any> = {};
   // Locations may not be contiguous the case of matrix attributes
   // so keep a separate location->attribute map.
-  attributeInfosByLocation = [];
-  varyingInfos = [];
-  varyingInfosByName = {};
+  attributeInfosByLocation: any[] = [];
+  varyingInfos: any[] = [];
+  varyingInfosByName: Record<string, any> = {};
 
   constructor(program) {
     this.id = program.id;

package/src/classes/program.ts

@@ -1,5 +1,6 @@
+import {log, assert, uid} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-
+import WebGLDevice from '../device/webgl-device';
 import WebGLResource, {ResourceProps} from './webgl-resource';
 import Texture from './texture';
 import Framebuffer from './framebuffer';
@@ -8,10 +9,10 @@ import {VertexShader, FragmentShader} from './webgl-shader';
 import ProgramConfiguration from './program-configuration';
 import {copyUniform, checkUniformValues} from './uniforms';
 
-import {isWebGL2, assertWebGL2Context, withParameters, log} from '@luma.gl/gltools';
-import {getKey} from '../webgl-utils';
+import {isWebGL2, assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import {getKey} from '../webgl-utils/constants-to-keys';
 import {getPrimitiveDrawMode} from '../webgl-utils/attribute-utils';
-import {uid, assert} from '../utils';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
@@ -47,19 +48,19 @@ export type ProgramDrawOptions = {
 export default class Program extends WebGLResource<ProgramProps> {
   configuration: ProgramConfiguration;
   // Experimental flag to avoid deleting Program object while it is cached
-  _isCached = false;
-  _textureIndexCounter = 0;
   hash: string;; // Used by ProgramManager
   vs;
   fs;
-  uniforms: {};
-  _textureUniforms: {};
-  varyings: {};
-  _uniformCount = 0;
-  _uniformSetters: {};
+  uniforms: Record<string, any>;
+  varyings: Record<string, any>;
+  _textureUniforms: Record<string, any>;
+  _isCached: boolean = false;
+  _textureIndexCounter: number = 0;
+  _uniformCount: number = 0;
+  _uniformSetters: Record<string, Function>;
   
   constructor(gl: WebGLRenderingContext, props: ProgramProps = {}) {
-    super(gl, props, {} as any);
+    super(WebGLDevice.attach(gl), props, {} as any);
 
 
     this.initialize(props);
@@ -234,12 +235,15 @@ export default class Program extends WebGLResource<ProgramProps> {
 
           if (textureUpdate) {
             // eslint-disable-next-line max-depth
+            // @ts-expect-error
             if (uniformSetter.textureIndex === undefined) {
+              // @ts-expect-error
               uniformSetter.textureIndex = this._textureIndexCounter++;
             }
 
             // Bind texture to index
             const texture = value;
+            // @ts-expect-error
             const {textureIndex} = uniformSetter;
 
             texture.bind(textureIndex);
@@ -247,6 +251,7 @@ export default class Program extends WebGLResource<ProgramProps> {
 
             this._textureUniforms[uniformName] = texture;
           } else {
+            // @ts-expect-error
             value = uniformSetter.textureIndex;
           }
         } else if (this._textureUniforms[uniformName]) {
@@ -285,6 +290,7 @@ export default class Program extends WebGLResource<ProgramProps> {
   // Note: This is currently done before every draw call
   _bindTextures() {
     for (const uniformName in this._textureUniforms) {
+      // @ts-expect-error
       const textureIndex = this._uniformSetters[uniformName].textureIndex;
       this._textureUniforms[uniformName].bind(textureIndex);
     }
@@ -308,11 +314,11 @@ export default class Program extends WebGLResource<ProgramProps> {
       const type = this.gl.getShaderParameter(this.handle, GL.SHADER_TYPE);
       switch (type) {
         case GL.VERTEX_SHADER:
-          // @ts-ignore
+          // @ts-expect-error
           opts.vs = new VertexShader({handle: shaderHandle});
           break;
         case GL.FRAGMENT_SHADER:
-          // @ts-ignore
+          // @ts-expect-error
           opts.fs = new FragmentShader({handle: shaderHandle});
           break;
         default:
@@ -351,7 +357,7 @@ export default class Program extends WebGLResource<ProgramProps> {
     log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this._getName()}`)();
 
     // Avoid checking program linking error in production
-    // @ts-ignore
+    // @ts-expect-error
     if (gl.debug || log.level > 0) {
       const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
       if (!linked) {

package/src/classes/query.ts

@@ -1,8 +1,8 @@
 // WebGL2 Query (also handles disjoint timer extensions)
-import {isWebGL2} from '@luma.gl/gltools';
+import {assert} from '@luma.gl/api';
+import WebGLDevice from '../device/webgl-device';
+import {isWebGL2} from '../context/context/webgl-checks';
 import WebGLResource, {ResourceProps} from './webgl-resource';
-import {FEATURES, hasFeatures} from '../features';
-import {assert} from '../utils';
 
 const GL_QUERY_RESULT = 0x8866; // Returns a GLuint containing the query result.
 const GL_QUERY_RESULT_AVAILABLE = 0x8867; // whether query result is available.
@@ -27,7 +27,8 @@ export default class Query extends WebGLResource<QueryProps> {
     const webgl2 = isWebGL2(gl);
 
     // Initial value
-    const hasTimerQuery = hasFeatures(gl, FEATURES.TIMER_QUERY);
+    const webglDevice = WebGLDevice.fromContext(gl);
+    const hasTimerQuery = webglDevice.features.has('webgl-timer-query');
     let supported = webgl2 || hasTimerQuery;
 
     for (const key of options) {
@@ -52,8 +53,7 @@ export default class Query extends WebGLResource<QueryProps> {
 
   // Create a query class
   constructor(gl: WebGLRenderingContext, opts: QueryProps = {}) {
-    super(gl, opts, {} as any);
-
+    super(WebGLDevice.attach(gl), opts, {} as any);
     Object.seal(this);
   }
 

package/src/classes/renderbuffer-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';
 
 export function isRenderbufferFormatSupported(gl: WebGLRenderingContext, format: GL): boolean {
   const info = RENDERBUFFER_FORMATS[format];

package/src/classes/renderbuffer.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-inline-comments */
+import {assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
+import WebGLDevice from '../device/webgl-device';
 import WebGLResource, {ResourceProps} from './webgl-resource';
 import {isRenderbufferFormatSupported, getRenderbufferFormatBytesPerPixel} from './renderbuffer-formats';
-import {isWebGL2} from '@luma.gl/gltools';
-import {assert} from '../utils';
+import {isWebGL2} from '../context/context/webgl-checks';
 
 export type RenderbufferProps = ResourceProps & {
   format: number;
@@ -38,7 +39,7 @@ export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
   }
 
   constructor(gl: WebGLRenderingContext, props: RenderbufferProps) {
-    super(gl, props, DEFAULT_RENDERBUFFER_PROPS);
+    super(WebGLDevice.attach(gl), props, DEFAULT_RENDERBUFFER_PROPS);
     this._initialize(this.props);
   }
 
@@ -54,7 +55,7 @@ export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
 
     if (samples !== 0 && isWebGL2(this.gl)) {
-      // @ts-ignore
+      // @ts-expect-error
       this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
     } else {
       this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);