@luma.gl/webgl 9.0.0-alpha.52 → 9.0.0-alpha.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.52",
+  "version": "9.0.0-alpha.54",
   "description": "WebGL2 adapter for the luma.gl API",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-alpha.52",
-    "@luma.gl/core": "9.0.0-alpha.52",
+    "@luma.gl/constants": "9.0.0-alpha.54",
+    "@luma.gl/core": "9.0.0-alpha.54",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.52"
+    "@luma.gl/test-utils": "9.0.0-alpha.54"
   },
-  "gitHead": "41fa29f78dc260e5ef4c6a48e657fb5d23c96e8f"
+  "gitHead": "6028eb651303eadbc8f25e86d135d28f118fa3cf"
 }

package/src/adapter/converters/sampler-parameters.ts

@@ -2,19 +2,17 @@
 // Copyright (c) vis.gl contributors
 
 // SAMPLER FILTERS
-import {SamplerParameters} from '@luma.gl/core';
+import {SamplerProps} from '@luma.gl/core';
 import {GL, GLSamplerParameters} from '@luma.gl/constants';
-import {convertCompareFunction, convertToCompareFunction} from './device-parameters';
-
-/* eslint-disable consistent-return */
+import {convertCompareFunction} from './device-parameters';
 
 /**
  * Convert WebGPU-style sampler props to WebGL
  * @param props
  * @returns
  */
-export function convertSamplerParametersToWebGL(props: SamplerParameters): GLSamplerParameters {
-  const params: Record<number, number> = {};
+export function convertSamplerParametersToWebGL(props: SamplerProps): GLSamplerParameters {
+  const params: GLSamplerParameters = {};
   if (props.addressModeU) {
     params[GL.TEXTURE_WRAP_S] = convertAddressMode(props.addressModeU);
   }
@@ -54,8 +52,27 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): GLSam
   return params;
 }
 
+/**
+ * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
+ */
+export function updateSamplerParametersForNPOT(
+  parameters: GLSamplerParameters
+): GLSamplerParameters {
+  const newParameters = {...parameters};
+  if (parameters[GL.TEXTURE_MIN_FILTER] !== GL.NEAREST) {
+    // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_MIN_FILTER to LINEAR`)();
+    newParameters[GL.TEXTURE_MIN_FILTER] = GL.LINEAR;
+  }
+  // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_WRAP_S to CLAMP_TO_EDGE`)();
+  newParameters[GL.TEXTURE_WRAP_S] = GL.CLAMP_TO_EDGE;
+  newParameters[GL.TEXTURE_WRAP_T] = GL.CLAMP_TO_EDGE;
+  return newParameters;
+}
+
+// HELPERS
+
 /** Convert address more */
-function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'): GL {
+function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'): GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT {
   switch (addressMode) {
     case 'clamp-to-edge':
       return GL.CLAMP_TO_EDGE;
@@ -66,7 +83,7 @@ function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-re
   }
 }
 
-function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL {
+function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL.NEAREST | GL.LINEAR {
   switch (maxFilter) {
     case 'nearest':
       return GL.NEAREST;
@@ -82,7 +99,7 @@ function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL {
 function convertMinFilterMode(
   minFilter: 'nearest' | 'linear',
   mipmapFilter?: 'nearest' | 'linear'
-): GL {
+): GL.NEAREST | GL.LINEAR | GL.NEAREST_MIPMAP_NEAREST | GL.LINEAR_MIPMAP_NEAREST | GL.NEAREST_MIPMAP_LINEAR | GL.LINEAR_MIPMAP_LINEAR {
   if (!mipmapFilter) {
     return convertMaxFilterMode(minFilter);
   }
@@ -93,145 +110,3 @@ function convertMinFilterMode(
       return mipmapFilter === 'nearest' ? GL.LINEAR_MIPMAP_NEAREST : GL.LINEAR_MIPMAP_LINEAR;
   }
 }
-
-// Convert from WebGL to WebGPU
-
-/**
- * Convert WebGL-style sampler props to WebGPU
- * @param props
- * @returns
- */
-export function convertToSamplerParameters(params: GLSamplerParameters): SamplerParameters {
-  const props: SamplerParameters = {};
-  if (params[GL.TEXTURE_WRAP_S]) {
-    props.addressModeU = convertToAddressMode(params[GL.TEXTURE_WRAP_S]);
-  }
-  if (params[GL.TEXTURE_WRAP_T]) {
-    props.addressModeV = convertToAddressMode(params[GL.TEXTURE_WRAP_T]);
-  }
-  if (params[GL.TEXTURE_WRAP_R]) {
-    props.addressModeW = convertToAddressMode(params[GL.TEXTURE_WRAP_R]);
-  }
-  if (params[GL.TEXTURE_MAG_FILTER]) {
-    props.magFilter = convertToMaxFilterMode(params[GL.TEXTURE_MAG_FILTER]);
-  }
-  if (params[GL.TEXTURE_MIN_FILTER]) {
-    props.minFilter = convertToMinFilterMode(params[GL.TEXTURE_MIN_FILTER]);
-  }
-  if (params[GL.TEXTURE_MIN_FILTER]) {
-    props.mipmapFilter = convertToMipmapFilterMode(params[GL.TEXTURE_MIN_FILTER]);
-  }
-  if (params[GL.TEXTURE_MIN_LOD]) {
-    props.lodMinClamp = params[GL.TEXTURE_MIN_LOD];
-  }
-  if (params[GL.TEXTURE_MAX_LOD]) {
-    props.lodMaxClamp = params[GL.TEXTURE_MAX_LOD];
-  }
-  if (params[GL.TEXTURE_COMPARE_MODE]) {
-    props.type =
-      params[GL.TEXTURE_COMPARE_MODE] === GL.COMPARE_REF_TO_TEXTURE
-        ? 'comparison-sampler'
-        : 'color-sampler';
-  }
-  if (params[GL.TEXTURE_COMPARE_FUNC]) {
-    props.compare = convertToCompareFunction('compare', params[GL.TEXTURE_COMPARE_FUNC]);
-  }
-  // NOTE depends on extension (very common)
-  if (params[GL.TEXTURE_MAX_ANISOTROPY_EXT]) {
-    props.maxAnisotropy = params[GL.TEXTURE_MAX_ANISOTROPY_EXT];
-  }
-  return props;
-}
-
-/** Convert address more */
-function convertToAddressMode(
-  addressMode: GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT
-): 'clamp-to-edge' | 'repeat' | 'mirror-repeat' {
-  switch (addressMode) {
-    case GL.CLAMP_TO_EDGE:
-      return 'clamp-to-edge';
-    case GL.REPEAT:
-      return 'repeat';
-    case GL.MIRRORED_REPEAT:
-      return 'mirror-repeat';
-    default:
-      throw new Error('address');
-  }
-}
-
-function convertToMaxFilterMode(filterMode: GL.NEAREST | GL.LINEAR): 'nearest' | 'linear' {
-  switch (filterMode) {
-    case GL.NEAREST:
-      return 'nearest';
-    case GL.LINEAR:
-      return 'linear';
-    default:
-      throw new Error('maxfilter');
-  }
-}
-
-type GLMinFilter =
-  | GL.NEAREST
-  | GL.LINEAR
-  | GL.NEAREST_MIPMAP_NEAREST
-  | GL.LINEAR_MIPMAP_NEAREST
-  | GL.NEAREST_MIPMAP_LINEAR
-  | GL.LINEAR_MIPMAP_LINEAR;
-
-/** WebGPU has separate min filter and mipmap filter, WebGL is combined */
-function convertToMinFilterMode(filterMode: GLMinFilter): 'nearest' | 'linear' {
-  switch (filterMode) {
-    // TODO is this correct?
-    case GL.NEAREST:
-      return 'nearest';
-    case GL.LINEAR:
-      return 'linear';
-    case GL.NEAREST_MIPMAP_NEAREST:
-      return 'nearest';
-    case GL.LINEAR_MIPMAP_NEAREST:
-      return 'linear';
-    case GL.NEAREST_MIPMAP_LINEAR:
-      return 'nearest';
-    case GL.LINEAR_MIPMAP_LINEAR:
-      return 'linear';
-    default:
-      throw new Error('minfilter');
-  }
-}
-
-function convertToMipmapFilterMode(filterMode: GLMinFilter): 'nearest' | 'linear' {
-  switch (filterMode) {
-    // TODO is this correct?
-    case GL.NEAREST:
-      return 'nearest';
-    case GL.LINEAR:
-      return 'linear';
-    case GL.NEAREST_MIPMAP_NEAREST:
-      return 'nearest';
-    case GL.LINEAR_MIPMAP_NEAREST:
-      return 'nearest';
-    case GL.NEAREST_MIPMAP_LINEAR:
-      return 'linear';
-    case GL.LINEAR_MIPMAP_LINEAR:
-      return 'linear';
-    default:
-      throw new Error('mipmap');
-  }
-}
-
-/**
- * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
- */
-export function updateSamplerParametersForNPOT(
-  parameters: GLSamplerParameters
-): GLSamplerParameters {
-  const newParameters = {...parameters};
-  if (parameters[GL.TEXTURE_MIN_FILTER] !== GL.NEAREST) {
-    // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_MIN_FILTER to LINEAR`)();
-    newParameters[GL.TEXTURE_MIN_FILTER] = GL.LINEAR;
-  }
-  // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_WRAP_S to CLAMP_TO_EDGE`)();
-  newParameters[GL.TEXTURE_WRAP_S] = GL.CLAMP_TO_EDGE;
-  newParameters[GL.TEXTURE_WRAP_T] = GL.CLAMP_TO_EDGE;
-  return newParameters;
-}

package/src/adapter/device-helpers/get-device-info.ts

@@ -25,6 +25,7 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   // "Sniff" the GPU type and backend from the info. This works best if unmasked info is available.
   const gpu = identifyGPUVendor(vendor, renderer);
   const gpuBackend = identifyGPUBackend(vendor, renderer);
+  const gpuType = identifyGPUType(vendor, renderer);
 
   // Determine GLSL version
   // For now, skip parsing of the long version string, just use context type below to deduce version
@@ -36,6 +37,7 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   return {
     type: isWebGL2(gl) ? 'webgl2' : 'webgl',
     gpu,
+    gpuType,
     gpuBackend,
     vendor,
     renderer,
@@ -72,13 +74,30 @@ function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel'
 }
 
 /** "Sniff" the GPU backend from the info. This works best if unmasked info is available. */
-function identifyGPUBackend(vendor: string, renderer: string): 'angle' | 'metal' | 'unknown' {
-  if ((/ANGLE/i.exec(vendor)) || (/ANGLE/i.exec(renderer))) {
-    return 'angle';
-  }
+function identifyGPUBackend(vendor: string, renderer: string): 'opengl' | 'metal' | 'unknown' {
   if ((/Metal/i.exec(vendor)) || (/Metal/i.exec(renderer))) {
     return 'metal';
   }
-  
+  if ((/ANGLE/i.exec(vendor)) || (/ANGLE/i.exec(renderer))) {
+    return 'opengl';
+  }  
   return 'unknown';
 }
+
+function identifyGPUType(vendor: string, renderer: string): 'discrete' | 'integrated' | 'cpu' | 'unknown' {
+  if ((/SwiftShader/i.exec(vendor)) || (/SwiftShader/i.exec(renderer))) {
+    return 'cpu';
+  }
+
+  const gpuVendor = identifyGPUVendor(vendor, renderer);
+  switch (gpuVendor) {
+    case 'intel':
+      return 'integrated';
+    case 'software':
+      return 'cpu';
+    case 'unknown':
+      return 'unknown';
+    default:
+      return 'discrete';
+  }
+}

package/src/adapter/resources/webgl-buffer.ts

@@ -6,8 +6,6 @@ import {Buffer, assert} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 
-const DEBUG_DATA_LENGTH = 10;
-
 /** WebGL Buffer interface */
 export class WEBGLBuffer extends Buffer {
   readonly device: WebGLDevice;
@@ -26,8 +24,6 @@ export class WEBGLBuffer extends Buffer {
   byteLength: number;
   /** Number of bytes used */
   bytesUsed: number;
-  /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
-  debugData: ArrayBuffer | null = null;
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
@@ -47,8 +43,6 @@ export class WEBGLBuffer extends Buffer {
     this.glUsage = getWebGLUsage(this.props.usage);
     this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
 
-    this.debugData = null;
-
     // Set data: (re)initializes the buffer
     if (props.data) {
       this._initWithData(props.data, props.byteOffset, props.byteLength);
@@ -61,24 +55,22 @@ export class WEBGLBuffer extends Buffer {
 
   /** Allocate a new buffer and initialize to contents of typed array */
   _initWithData(
-    data,
+    data: ArrayBuffer | ArrayBufferView,
     byteOffset: number = 0,
     byteLength: number = data.byteLength + byteOffset
-  ): this {
-    assert(ArrayBuffer.isView(data));
-
-    const glTarget = this._getWriteTarget();
+  ): void {
+    // const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    const glTarget = this.glTarget;
     this.gl.bindBuffer(glTarget, this.handle);
     this.gl.bufferData(glTarget, byteLength, this.glUsage);
     this.gl.bufferSubData(glTarget, byteOffset, data);
     this.gl.bindBuffer(glTarget, null);
 
-    this.debugData = data.slice(0, DEBUG_DATA_LENGTH);
     this.bytesUsed = byteLength;
     this.byteLength = byteLength;
-    this.trackAllocatedMemory(byteLength);
 
-    return this;
+    this._setDebugData(data, byteOffset, byteLength);
+    this.trackAllocatedMemory(byteLength);
   }
 
   // Allocate a GPU buffer of specified size.
@@ -93,16 +85,19 @@ export class WEBGLBuffer extends Buffer {
       data = new Float32Array(0);
     }
 
-    const glTarget = this._getWriteTarget();
+    // const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    const glTarget = this.glTarget;
 
     this.gl.bindBuffer(glTarget, this.handle);
     this.gl.bufferData(glTarget, data, this.glUsage);
     this.gl.bindBuffer(glTarget, null);
 
-    this.debugData = null;
     this.bytesUsed = byteLength;
     this.byteLength = byteLength;
 
+    this._setDebugData(null, 0, byteLength);
+    this.trackAllocatedMemory(byteLength);
+
     return this;
   }
 
@@ -134,15 +129,19 @@ export class WEBGLBuffer extends Buffer {
     }
     this.gl.bindBuffer(glTarget, null);
 
-    // TODO - update local `data` if offsets are right
-    // this.debugData = data.slice(byteOffset, 40);
+    this._setDebugData(data, byteOffset, data.byteLength);
   }
 
-  /** Read data from the buffer */
+  /** Asynchronously read data from the buffer */
   override async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array> {
+    return this.readSyncWebGL2(byteOffset, byteLength);
+  }
+
+  /** Synchronously read data from the buffer. WebGL only. */
+  override readSyncWebGL2(byteOffset = 0, byteLength?: number): Uint8Array {
     this.device.assertWebGL2();
 
-    byteLength = byteLength ?? this.byteLength;
+    byteLength = byteLength ?? this.byteLength - byteOffset;
     const data = new Uint8Array(byteLength);
     const dstOffset = 0;
 
@@ -151,40 +150,37 @@ export class WEBGLBuffer extends Buffer {
     this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, byteOffset, data, dstOffset, byteLength);
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
 
-    // TODO - update local `data` if offsets are 0
-    // this.debugData = null;
+    // Update local `data` if offsets are 0
+    this._setDebugData(data, byteOffset, byteLength);
 
     return data;
   }
-
-  // PROTECTED METHODS (INTENDED FOR USE BY OTHER FRAMEWORK CODE ONLY)
-
-  _invalidateDebugData() {
-    this.debugData = null;
-  }
-
-  _getWriteTarget() {
-    return this.glTarget;
-    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
-  }
-
-  _getReadTarget() {
-    return this.glTarget;
-    // return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.glTarget;
-  }
 }
 
-// static MAP_READ = 0x01;
-// static MAP_WRITE = 0x02;
-// static COPY_SRC = 0x0004;
-// static COPY_DST = 0x0008;
-// static INDEX = 0x0010;
-// static VERTEX = 0x0020;
-// static UNIFORM = 0x0040;
-// static STORAGE = 0x0080;
-// static INDIRECT = 0x0100;
-// static QUERY_RESOLVE = 0x0200;
-
+/**
+ * Returns a WebGL buffer target
+ *
+ * @param usage
+ * static MAP_READ = 0x01;
+ * static MAP_WRITE = 0x02;
+ * static COPY_SRC = 0x0004;
+ * static COPY_DST = 0x0008;
+ * static INDEX = 0x0010;
+ * static VERTEX = 0x0020;
+ * static UNIFORM = 0x0040;
+ * static STORAGE = 0x0080;
+ * static INDIRECT = 0x0100;
+ * static QUERY_RESOLVE = 0x0200;
+ * 
+ * @returns WebGL buffer targe
+ * 
+ * Buffer bind points in WebGL2
+ * gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
+ * gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
+ * gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
+ * gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
+ * gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
+ */
 function getWebGLTarget(
   usage: number
 ): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
@@ -198,14 +194,8 @@ function getWebGLTarget(
     return GL.UNIFORM_BUFFER;
   }
 
-  // gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
-  // gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
-  // gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
-  // gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
-  // gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
-
   // Binding a buffer for the first time locks the type
-  // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
+  // In WebGL2, we can use GL.COPY_WRITE_BUFFER to avoid locking the type
   return GL.ARRAY_BUFFER;
 }
 

package/src/adapter/resources/webgl-texture.ts

@@ -12,10 +12,9 @@ import {
   Sampler,
   SamplerProps,
   SamplerParameters,
-  TypedArray,
-  isObjectEmpty
+  TypedArray
 } from '@luma.gl/core';
-import {Texture, cast, log, assert, isPowerOfTwo, loadImage} from '@luma.gl/core';
+import {Texture, log, assert, isPowerOfTwo, loadImage, isObjectEmpty} from '@luma.gl/core';
 import {GL, GLSamplerParameters} from '@luma.gl/constants';
 import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {
@@ -193,7 +192,7 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
   constructor(device: Device, props: WEBGLTextureProps) {
     super(device, {...DEFAULT_WEBGL_TEXTURE_PROPS, format: 'rgba8unorm', ...props});
 
-    this.device = cast<WebGLDevice>(device);
+    this.device = device as WebGLDevice;
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
     this.handle = this.props.handle || this.gl.createTexture();

package/src/adapter/webgl-device.ts

@@ -132,7 +132,7 @@ export class WebGLDevice extends Device {
   }
 
   static async create(props: DeviceProps = {}): Promise<WebGLDevice> {
-    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
+    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
 
     // Wait for page to load. Only wait when props. canvas is string
     // to avoid setting page onload callback unless necessary
@@ -158,7 +158,18 @@ export class WebGLDevice extends Device {
       return WebGLDevice.attach(props.gl);
     }
 
-    return new WebGLDevice(props);
+    const device = new WebGLDevice(props);
+
+    // Log some debug info about the newly created context
+    const message = `\
+Created ${device.info.type}${device.debug ? ' debug' : ''} context: \
+${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
+    log.probe(LOG_LEVEL, message)();
+    log.table(LOG_LEVEL, device.info)();
+
+    log.groupEnd(LOG_LEVEL)();
+
+    return device;
   }
 
   //
@@ -240,14 +251,6 @@ export class WebGLDevice extends Device {
       const canvas = this.handle.canvas || (props.canvas as HTMLCanvasElement);
       this.spector = initializeSpectorJS({...this.props, canvas});
     }
-
-    // Log some debug info about the newly created context
-    const message = `\
-Created ${this.info.type}${this.debug ? ' debug' : ''} context: \
-${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`;
-    log.probe(LOG_LEVEL, message)();
-
-    log.groupEnd(LOG_LEVEL)();
   }
 
   /**

package/src/context/polyfill/polyfill-context.ts

@@ -38,9 +38,13 @@ function initializeExtensions(gl: WebGLRenderingContext): void {
   const contextState = getContextData(gl);
   // `getSupportedExtensions` can return null when context is lost.
   const EXTENSIONS = gl.getSupportedExtensions() || [];
+  // Generates warnings in Chrome
+  const IGNORE_EXTENSIONS = ['WEBGL_polygon_mode'];
   for (const extensionName of EXTENSIONS) {
-    const extension = gl.getExtension(extensionName);
-    contextState._extensions[extensionName] = extension;
+    if (!IGNORE_EXTENSIONS.includes(extensionName)) {
+      const extension = gl.getExtension(extensionName);
+      contextState._extensions[extensionName] = extension;
+    }
   }
 }