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

package/src/classes/{program-configuration.js → program-configuration.ts}

@@ -4,17 +4,24 @@ import Accessor from './accessor';
 import {isWebGL2} from '@luma.gl/gltools';
 import {decomposeCompositeGLType} from '../webgl-utils/attribute-utils';
 
-export default class ProgramConfiguration {
+/**
+ * is a mechanism for taking a program object and querying information
+ * about it, so as to be able to interface and interact with it.
+ * For example, if there is a uniform, you may need to query its
+ * location so that you can set its value.
+ */
+ export default class ProgramConfiguration {
+  id: string;
+  attributeInfos = [];
+  attributeInfosByName = {};
+  // Locations may not be contiguous the case of matrix attributes
+  // so keep a separate location->attribute map.
+  attributeInfosByLocation = [];
+  varyingInfos = [];
+  varyingInfosByName = {};
+
   constructor(program) {
     this.id = program.id;
-    this.attributeInfos = [];
-    this.attributeInfosByName = {};
-
-    // Locations may not be contiguous the case of matrix attributes
-    // so keep a separate location->attribute map.
-    this.attributeInfosByLocation = [];
-    this.varyingInfos = [];
-    this.varyingInfosByName = {};
     Object.seal(this);
     this._readAttributesFromProgram(program);
     this._readVaryingsFromProgram(program);
@@ -48,12 +55,12 @@ export default class ProgramConfiguration {
   }
 
   getVaryingIndex(locationOrName) {
-    const varying = this.getVaryingInfo();
+    const varying = this.getVaryingInfo(locationOrName);
     return varying ? varying.location : -1;
   }
 
   getVaryingAccessor(locationOrName) {
-    const varying = this.getVaryingInfo();
+    const varying = this.getVaryingInfo(locationOrName);
     return varying ? varying.accessor : null;
   }
 

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

@@ -1,51 +1,66 @@
 import GL from '@luma.gl/constants';
 
-import Resource from './resource';
+import WebGLResource, {ResourceProps} from './webgl-resource';
 import Texture from './texture';
 import Framebuffer from './framebuffer';
 import {parseUniformName, getUniformSetter} from './uniforms';
-import {VertexShader, FragmentShader} from './shader';
+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/constants-to-keys';
+import {getKey} from '../webgl-utils';
 import {getPrimitiveDrawMode} from '../webgl-utils/attribute-utils';
-import {assert} from '../utils/assert';
-import {uid} from '../utils/utils';
+import {uid, assert} from '../utils';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 const GL_SEPARATE_ATTRIBS = 0x8c8d;
 
-const V6_DEPRECATED_METHODS = [
-  'setVertexArray',
-  'setAttributes',
-  'setBuffers',
-  'unsetBuffers',
-
-  'use',
-  'getUniformCount',
-  'getUniformInfo',
-  'getUniformLocation',
-  'getUniformValue',
-
-  'getVarying',
-  'getFragDataLocation',
-  'getAttachedShaders',
-  'getAttributeCount',
-  'getAttributeLocation',
-  'getAttributeInfo'
-];
-
-export default class Program extends Resource {
-  constructor(gl, props = {}) {
-    super(gl, props);
+export type ProgramProps = ResourceProps & {
+  hash?;
+  vs?; 
+  fs?;
+  varyings?; 
+  bufferMode?: number;
+}
 
-    this.stubRemovedMethods('Program', 'v6.0', V6_DEPRECATED_METHODS);
+export type ProgramDrawOptions = {
+  logPriority?: any;
+  drawMode?: any;
+  vertexCount: any;
+  offset?: number;
+  start?: any;
+  end?: any;
+  isIndexed?: boolean;
+  indexType?: any;
+  instanceCount?: number;
+  isInstanced?: boolean;
+  vertexArray?: any;
+  transformFeedback?: any;
+  framebuffer?: any;
+  parameters?: {};
+  uniforms?: any;
+  samplers?: any;
+};
+
+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: {};
+  
+  constructor(gl: WebGLRenderingContext, props: ProgramProps = {}) {
+    super(gl, props, {} as any);
 
-    // Experimental flag to avoid deleting Program object while it is cached
-    this._isCached = false;
 
     this.initialize(props);
 
@@ -54,7 +69,7 @@ export default class Program extends Resource {
     this._setId(props.id);
   }
 
-  initialize(props = {}) {
+  initialize(props: ProgramProps = {}) {
     const {hash, vs, fs, varyings, bufferMode = GL_SEPARATE_ATTRIBS} = props;
 
     this.hash = hash || ''; // Used by ProgramManager
@@ -103,7 +118,8 @@ export default class Program extends Resource {
 
   // A good thing about the WebGL API is that there are so many ways to draw things ;)
   // This function unifies those ways into a single call using common parameters with sane defaults
-  draw({
+  draw(options: ProgramDrawOptions): boolean {
+    const {
     logPriority, // Probe log priority, enables Model to do more integrated logging
 
     drawMode = GL.TRIANGLES,
@@ -119,13 +135,15 @@ export default class Program extends Resource {
     vertexArray = null,
     transformFeedback,
     framebuffer,
-    parameters = {},
 
     // Deprecated
     uniforms,
     samplers
-  }) {
-    if (uniforms || samplers) {
+  } = options;
+
+  let {parameters = {}} = options;
+
+  if (uniforms || samplers) {
       // DEPRECATED: v7.0 (deprecated earlier but warning not properly implemented)
       log.deprecated('Program.draw({uniforms})', 'Program.setUniforms(uniforms)')();
       this.setUniforms(uniforms || {});
@@ -358,10 +376,12 @@ export default class Program extends Resource {
       const info = this.gl.getActiveUniform(this.handle, i);
       const {name} = parseUniformName(info.name);
       let location = gl.getUniformLocation(this.handle, name);
+      // @ts-expect-error
       this._uniformSetters[name] = getUniformSetter(gl, location, info);
       if (info.size > 1) {
         for (let l = 0; l < info.size; l++) {
           location = gl.getUniformLocation(this.handle, `${name}[${l}]`);
+          // @ts-expect-error
           this._uniformSetters[`${name}[${l}]`] = getUniformSetter(gl, location, info);
         }
       }

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

@@ -1,8 +1,8 @@
 // WebGL2 Query (also handles disjoint timer extensions)
-import Resource from './resource';
-import {FEATURES, hasFeatures} from '../features';
 import {isWebGL2} from '@luma.gl/gltools';
-import {assert} from '../utils/assert';
+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.
@@ -14,17 +14,23 @@ const GL_TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN = 0x8c88; // #primitives written
 const GL_ANY_SAMPLES_PASSED = 0x8c2f; // Occlusion query (if drawing passed depth test)
 const GL_ANY_SAMPLES_PASSED_CONSERVATIVE = 0x8d6a; // Occlusion query less accurate/faster version
 
-export default class Query extends Resource {
+export type QueryProps = ResourceProps & {
+};
+
+/**
+ * Asynchronous queries for different kinds of information
+ */
+export default class Query extends WebGLResource<QueryProps> {
   // Returns true if Query is supported by the WebGL implementation
   // Can also check whether timestamp queries are available.
-  static isSupported(gl, opts = []) {
+  static isSupported(gl: WebGLRenderingContext, options: string[] = []): boolean {
     const webgl2 = isWebGL2(gl);
 
     // Initial value
     const hasTimerQuery = hasFeatures(gl, FEATURES.TIMER_QUERY);
     let supported = webgl2 || hasTimerQuery;
 
-    for (const key of opts) {
+    for (const key of options) {
       switch (key) {
         case 'queries':
           supported = supported && webgl2;
@@ -40,13 +46,13 @@ export default class Query extends Resource {
     return supported;
   }
 
-  // Create a query class
-  constructor(gl, opts = {}) {
-    super(gl, opts);
+  target = null;
+  _queryPending = false;
+  _pollingPromise = null;
 
-    this.target = null;
-    this._queryPending = false;
-    this._pollingPromise = null;
+  // Create a query class
+  constructor(gl: WebGLRenderingContext, opts: QueryProps = {}) {
+    super(gl, opts, {} as any);
 
     Object.seal(this);
   }
@@ -54,17 +60,17 @@ export default class Query extends Resource {
   // Shortcut for timer query (dependent on extension in both WebGL1 and 2)
   // Measures GPU time delta between this call and a matching `end` call in the
   // GPU instruction stream.
-  beginTimeElapsedQuery() {
+  beginTimeElapsedQuery(): this {
     return this.begin(GL_TIME_ELAPSED_EXT);
   }
 
   // Shortcut for occlusion queries
-  beginOcclusionQuery({conservative = false} = {}) {
-    return this.begin(conservative ? GL_ANY_SAMPLES_PASSED_CONSERVATIVE : GL_ANY_SAMPLES_PASSED);
+  beginOcclusionQuery(options?: {conservative?: boolean}): this {
+    return this.begin(options?.conservative ? GL_ANY_SAMPLES_PASSED_CONSERVATIVE : GL_ANY_SAMPLES_PASSED);
   }
 
   // Shortcut for transformFeedbackQuery
-  beginTransformFeedbackQuery() {
+  beginTransformFeedbackQuery(): this {
     return this.begin(GL_TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN);
   }
 
@@ -73,7 +79,7 @@ export default class Query extends Resource {
   // calling `begin()` on another query. While there can be multiple
   // outstanding queries representing disjoint `begin()`/`end()` intervals.
   // It is not possible to interleave or overlap `begin` and `end` calls.
-  begin(target) {
+  begin(target: number): this {
     // Don't start a new query if one is already active.
     if (this._queryPending) {
       return this;
@@ -86,7 +92,7 @@ export default class Query extends Resource {
   }
 
   // ends the current query
-  end() {
+  end(): this {
     // Can't end a new query if the last one hasn't been resolved.
     if (this._queryPending) {
       return this;
@@ -101,7 +107,7 @@ export default class Query extends Resource {
   }
 
   // Returns true if the query result is available
-  isResultAvailable() {
+  isResultAvailable(): boolean {
     if (!this._queryPending) {
       return false;
     }
@@ -114,12 +120,12 @@ export default class Query extends Resource {
   }
 
   // Timing query is disjoint, i.e. results are invalid
-  isTimerDisjoint() {
+  isTimerDisjoint(): boolean {
     return this.gl2.getParameter(GL_GPU_DISJOINT_EXT);
   }
 
   // Returns query result.
-  getResult() {
+  getResult(): any {
     return this.gl2.getQueryParameter(this.handle, GL_QUERY_RESULT);
   }
 
@@ -129,7 +135,7 @@ export default class Query extends Resource {
   }
 
   // Polls the query
-  createPoll(limit = Number.POSITIVE_INFINITY) {
+  createPoll(limit: number = Number.POSITIVE_INFINITY): Promise<any> {
     if (this._pollingPromise) {
       return this._pollingPromise;
     }

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

@@ -1,14 +1,40 @@
 import GL from '@luma.gl/constants';
+import {isWebGL2} from '@luma.gl/gltools';
+
+export function isRenderbufferFormatSupported(gl: WebGLRenderingContext, format: GL): boolean {
+  const info = RENDERBUFFER_FORMATS[format];
+  // Unknown format
+  if (!info) {
+    return false;
+  }
+  if (info.ext) {
+    return Boolean(gl.getExtension(info.ext));
+  }
+  if (info.gl2) {
+    return isWebGL2(gl);
+  }
+  return true;
+}
+
+export function getRenderbufferFormatBytesPerPixel(format: GL): number {
+  return RENDERBUFFER_FORMATS[format].bpp;
+}
 
 // Define local extension strings to optimize minification
-// const SRGB = 'EXT_sRGB';
-// const EXT_FLOAT_WEBGL1 = 'WEBGL_color_buffer_float';
 const EXT_FLOAT_WEBGL2 = 'EXT_color_buffer_float';
-// const EXT_HALF_FLOAT_WEBGL1 = 'EXT_color_buffer_half_float';
 
-// NOTE(Tarek): bpp === "bytes per pixel", used for
-// memory usage calculations.
-export default {
+/**
+ * @param bpp "bytes per pixel", used for memory usage calculations.
+ * @param gl2 requires WebGL2
+ * @param ext requires extension
+ */
+type RenderbufferFormat = {
+  bpp: number;
+  gl2?: boolean;
+  ext?: string;
+};
+
+const RENDERBUFFER_FORMATS: Record<string, RenderbufferFormat> = {
   [GL.DEPTH_COMPONENT16]: {bpp: 2}, // 16 depth bits.
   [GL.DEPTH_COMPONENT24]: {gl2: true, bpp: 3},
   [GL.DEPTH_COMPONENT32F]: {gl2: true, bpp: 4},
@@ -52,13 +78,15 @@ export default {
   [GL.RGBA32UI]: {gl2: true, bpp: 16},
 
   // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
-  [GL.R16F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 2},
-  [GL.RG16F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 4},
-  [GL.RGBA16F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 8},
-  [GL.R32F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 4},
-  [GL.RG32F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 8},
+  [GL.R16F]: {ext: EXT_FLOAT_WEBGL2, bpp: 2},
+  [GL.RG16F]: {ext: EXT_FLOAT_WEBGL2, bpp: 4},
+  [GL.RGBA16F]: {ext: EXT_FLOAT_WEBGL2, bpp: 8},
+  [GL.R32F]: {ext: EXT_FLOAT_WEBGL2, bpp: 4},
+  [GL.RG32F]: {ext: EXT_FLOAT_WEBGL2, bpp: 8},
   // TODO - can't get WEBGL_color_buffer_float to work on renderbuffers
-  [GL.RGBA32F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 16},
-  // [GL.RGBA32F]: {gl2: EXT_FLOAT_WEBGL2, gl1: EXT_FLOAT_WEBGL1},
-  [GL.R11F_G11F_B10F]: {gl2: EXT_FLOAT_WEBGL2, bpp: 4}
+  [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, bpp: 16},
+  // [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, gl1: EXT_FLOAT_WEBGL1},
+  [GL.R11F_G11F_B10F]: {ext: EXT_FLOAT_WEBGL2, bpp: 4}
 };
+
+export default RENDERBUFFER_FORMATS;

package/src/classes/renderbuffer.ts

@@ -0,0 +1,153 @@
+/* eslint-disable no-inline-comments */
+import GL from '@luma.gl/constants';
+import WebGLResource, {ResourceProps} from './webgl-resource';
+import {isRenderbufferFormatSupported, getRenderbufferFormatBytesPerPixel} from './renderbuffer-formats';
+import {isWebGL2} from '@luma.gl/gltools';
+import {assert} from '../utils';
+
+export type RenderbufferProps = ResourceProps & {
+  format: number;
+  width?: number;
+  height?: number;
+  samples?: number;
+};
+
+const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
+  id: undefined,
+  handle: undefined,
+  userData: undefined,
+  format: 0,
+  width: 1, 
+  height: 1, 
+  samples: 0
+};
+
+/**
+ * Renderbuffers are GPU objects that contain images.
+ * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
+ * while Textures may not be, and are the logical choice when
+ * you do not need to sample (i.e. in a post-pass shader)
+ * from the produced image. If you need to resample
+ * (such as when reading depth back in a second shader pass),
+ * use Textures instead.
+ * Renderbuffer objects also natively accommodate Multisampling (MSAA).
+ */
+export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
+  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
+    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+  }
+
+  constructor(gl: WebGLRenderingContext, props: RenderbufferProps) {
+    super(gl, props, DEFAULT_RENDERBUFFER_PROPS);
+    this._initialize(this.props);
+  }
+
+  // PRIVATE METHODS
+
+  /** Creates and initializes a renderbuffer object's data store */
+  protected _initialize(props: Required<RenderbufferProps>) {
+    const {format, width, height, samples} = props;
+    assert(format, 'Needs format');
+
+    this.trackDeallocatedMemory();
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+
+    if (samples !== 0 && isWebGL2(this.gl)) {
+      // @ts-ignore
+      this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
+    } else {
+      this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);
+    }
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
+
+    this.trackAllocatedMemory(
+      width * height * (samples || 1) * getRenderbufferFormatBytesPerPixel(format)
+    );
+
+    return this;
+  }
+
+  // RESOURECE IMPLEMENTATION
+
+  _createHandle() {
+    return this.gl.createRenderbuffer();
+  }
+
+  _deleteHandle(): void {
+    this.gl.deleteRenderbuffer(this.handle);
+    this.trackDeallocatedMemory();
+  }
+
+  _bindHandle(handle): void {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
+  }
+}
+
+
+/**
+ * Renderbuffers are GPU objects that contain images.
+ * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
+ * while Textures may not be, and are the logical choice when
+ * you do not need to sample (i.e. in a post-pass shader)
+ * from the produced image. If you need to resample
+ * (such as when reading depth back in a second shader pass),
+ * use Textures instead.
+ * Renderbuffer objects also natively accommodate Multisampling (MSAA).
+ */
+export default class Renderbuffer extends ImmutableRenderbuffer {
+  get width(): number { return this.props.width; }
+  get height(): number { return this.props.height; }
+  get format(): number  { return this.props.format; }
+  get samples(): number { return this.props.samples; }
+
+  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
+    return ImmutableRenderbuffer.isSupported(gl, options);
+  }
+
+  static getSamplesForFormat(gl: WebGL2RenderingContext, options: {format: number}): number{
+    // Polyfilled to return [0] under WebGL1
+    return gl.getInternalformatParameter(GL.RENDERBUFFER, options.format, GL.SAMPLES);
+  }
+
+  constructor(gl: WebGLRenderingContext, props?: RenderbufferProps) {
+    super(gl, props);
+  }
+
+  resize(size: {width: number, height: number}): this {
+    // Don't resize if width/height haven't changed
+    if (size.width !== this.width || size.height !== this.height) {
+      return this.initialize({...size, format: this.format, samples: this.samples});
+    }
+    return this;
+  }
+
+  /** Creates and initializes a renderbuffer object's data store */
+  initialize(props: RenderbufferProps): this {
+    Object.assign(this.props, props);
+    this._initialize(this.props);
+    return this;
+  }
+
+  // PRIVATE
+
+  _syncHandle(handle) {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+    Object.assign(this.props, {
+      format: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_INTERNAL_FORMAT),
+      width: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_WIDTH),
+      height: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_HEIGHT),
+      samples: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_SAMPLES)
+    });
+  }
+
+  // @param {Boolean} opt.autobind=true - method call will bind/unbind object
+  // @returns {GLenum|GLint} - depends on pname
+  _getParameter(pname) {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+    const value = this.gl.getRenderbufferParameter(GL.RENDERBUFFER, pname);
+    // this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
+    return value;
+  }
+}

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

@@ -1,15 +1,20 @@
 import GL from '@luma.gl/constants';
 import {assertWebGLContext} from '@luma.gl/gltools';
-import Texture from './texture';
+import Texture, {TextureProps} from './texture';
 import {loadImage} from '../utils/load-file';
 
+
+export type Texture2DProps = TextureProps & {
+};
+
 export default class Texture2D extends Texture {
-  static isSupported(gl, opts) {
+  static isSupported(gl: WebGLRenderingContext, opts?: object): boolean {
+    // @ts-expect-error
     return Texture.isSupported(gl, opts);
   }
 
-  constructor(gl, props = {}) {
-    assertWebGLContext(gl);
+  constructor(gl: WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
+      assertWebGLContext(gl);
 
     // Signature: new Texture2D(gl, url | Promise)
     if (props instanceof Promise || typeof props === 'string') {
@@ -17,7 +22,8 @@ export default class Texture2D extends Texture {
     }
 
     // Signature: new Texture2D(gl, {data: url})
-    if (typeof props.data === 'string') {
+    if (typeof props?.data === 'string') {
+      // @ts-expect-error
       props = Object.assign({}, props, {data: loadImage(props.data)});
     }
 
@@ -27,4 +33,8 @@ export default class Texture2D extends Texture {
 
     Object.seal(this);
   }
+
+  get [Symbol.toStringTag](): string {
+    return 'Texture2D';
+  }
 }

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

@@ -1,24 +1,49 @@
 import GL from '@luma.gl/constants';
 import {isWebGL2, assertWebGL2Context, withParameters} from '@luma.gl/gltools';
-import Texture from './texture';
+import Texture, {TextureProps} from './texture';
 import {DATA_FORMAT_CHANNELS, TYPE_SIZES} from './texture-formats';
-import Buffer from './buffer';
+import Buffer from './webgl-buffer';
 
+export type Texture3DProps = TextureProps & {
+};
+
+type SetImageDataOptions = {
+  level?: number;
+  dataFormat?: any;
+  width: any;
+  height: any;
+  depth?: number;
+  border?: number;
+  format: any;
+  type?: any;
+  offset?: number;
+  data: any;
+  parameters?: {};
+};
+
+/**
+ * Textures that have 3 dimensions: width, height, and depth.
+ * They are accessed by 3-dimensional texture coordinates.
+ */
 export default class Texture3D extends Texture {
-  static isSupported(gl) {
+  static isSupported(gl: WebGLRenderingContext): boolean {
     return isWebGL2(gl);
   }
 
-  constructor(gl, props = {}) {
+  constructor(gl: WebGL2RenderingContext, props: Texture3DProps = {}) {
+    super(gl as WebGLRenderingContext, props);
     assertWebGL2Context(gl);
     props = Object.assign({depth: 1}, props, {target: GL.TEXTURE_3D, unpackFlipY: false});
-    super(gl, props);
     this.initialize(props);
 
     Object.seal(this);
   }
 
-  // Image 3D copies from Typed Array or WebGLBuffer
+  get [Symbol.toStringTag](): string {
+    return 'Texture3D';
+  }
+
+  /** Image 3D copies from Typed Array or WebGLBuffer */
   setImageData({
     level = 0,
     dataFormat = GL.RGBA,
@@ -31,8 +56,8 @@ export default class Texture3D extends Texture {
     offset = 0,
     data,
     parameters = {}
-  }) {
-    this._trackDeallocatedMemory('Texture');
+  }: SetImageDataOptions) {
+    this.trackDeallocatedMemory('Texture');
 
     this.gl.bindTexture(this.target, this.handle);
 
@@ -72,7 +97,7 @@ export default class Texture3D extends Texture {
     });
 
     if (data && data.byteLength) {
-      this._trackAllocatedMemory(data.byteLength, 'Texture');
+      this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
       // NOTE(Tarek): Default to RGBA bytes
       // @ts-ignore
@@ -80,7 +105,7 @@ export default class Texture3D extends Texture {
       // @ts-ignore
       const channelSize = TYPE_SIZES[this.type] || 1;
 
-      this._trackAllocatedMemory(
+      this.trackAllocatedMemory(
         this.width * this.height * this.depth * channels * channelSize,
         'Texture'
       );