@luma.gl/webgl 9.1.0-alpha.1 → 9.1.0-alpha.10

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export type { WebGLDeviceLimits } from "./adapter/device-helpers/webgl-device-limits.js";
+export { webgl2Adapter } from "./adapter/webgl-adapter.js";
+export type { WebGLAdapter } from "./adapter/webgl-adapter.js";
 export { WebGLDevice } from "./adapter/webgl-device.js";
 export { WebGLCanvasContext } from "./adapter/webgl-canvas-context.js";
 export { WEBGLBuffer } from "./adapter/resources/webgl-buffer.js";
@@ -15,8 +17,8 @@ export { Accessor } from "./classic/accessor.js";
 export type { AccessorObject } from "./types.js";
 export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";
 export { getShaderLayout } from "./adapter/helpers/get-shader-layout.js";
+export { WebGLStateTracker } from "./context/state-tracker/webgl-state-tracker.js";
 export { TEXTURE_FORMATS as _TEXTURE_FORMATS } from "./adapter/converters/texture-formats.js";
-export { trackContextState, pushContextState, popContextState } from "./context/state-tracker/track-context-state.js";
 export { resetGLParameters, setGLParameters, getGLParameters } from "./context/parameters/unified-parameter-api.js";
 export { withGLParameters } from "./context/state-tracker/with-parameters.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,QAAQ,EAAC,8BAA2B;AAC5C,YAAY,EAAC,cAAc,EAAC,mBAAgB;AAI5C,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,eAAe,EAAC,+CAA4C;AAGpE,OAAO,EAAC,eAAe,IAAI,gBAAgB,EAAC,gDAA6C;AAIzF,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EAChB,uDAAoD;AAErD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,aAAa,EAAC,mCAAgC;AACtD,YAAY,EAAC,YAAY,EAAC,mCAAgC;AAG1D,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,QAAQ,EAAC,8BAA2B;AAC5C,YAAY,EAAC,cAAc,EAAC,mBAAgB;AAI5C,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,eAAe,EAAC,+CAA4C;AACpE,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EAAC,eAAe,IAAI,gBAAgB,EAAC,gDAA6C;AAGzF,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/dist/index.js

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 // WebGL adapter classes
+export { webgl2Adapter } from "./adapter/webgl-adapter.js";
+// WebGL Device classes
 export { WebGLDevice } from "./adapter/webgl-device.js";
 export { WebGLCanvasContext } from "./adapter/webgl-canvas-context.js";
 // WebGL Resource classes
@@ -25,10 +27,9 @@ export { Accessor } from "./classic/accessor.js";
 export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";
 // HELPERS - EXPERIMENTAL
 export { getShaderLayout } from "./adapter/helpers/get-shader-layout.js";
+export { WebGLStateTracker } from "./context/state-tracker/webgl-state-tracker.js";
 // TEST EXPORTS
 export { TEXTURE_FORMATS as _TEXTURE_FORMATS } from "./adapter/converters/texture-formats.js";
 // DEPRECATED TEST EXPORTS
-// State tracking
-export { trackContextState, pushContextState, popContextState } from "./context/state-tracker/track-context-state.js";
 export { resetGLParameters, setGLParameters, getGLParameters } from "./context/parameters/unified-parameter-api.js";
 export { withGLParameters } from "./context/state-tracker/with-parameters.js";

package/dist/utils/split-uniforms-and-bindings.d.ts

@@ -1,5 +1,5 @@
 import type { UniformValue, Binding } from '@luma.gl/core';
-export declare function isUniformValue(value: unknown): boolean;
+export declare function isUniformValue(value: unknown): value is UniformValue;
 type UniformsAndBindings = {
     bindings: Record<string, Binding>;
     uniforms: Record<string, UniformValue>;

package/dist/utils/split-uniforms-and-bindings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-uniforms-and-bindings.d.ts","sourceRoot":"","sources":["../../src/utils/split-uniforms-and-bindings.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAGzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEtD;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,YAAY,CAAC,GAC/C,mBAAmB,CAYrB"}
+{"version":3,"file":"split-uniforms-and-bindings.d.ts","sourceRoot":"","sources":["../../src/utils/split-uniforms-and-bindings.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAGzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,YAAY,CAEpE;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,YAAY,CAAC,GAC/C,mBAAmB,CAYrB"}

package/dist/utils/uid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a UID.
+ * @param id= - Identifier base name
+ * @return uid
+ **/
+export declare function uid(id?: string): string;
+//# sourceMappingURL=uid.d.ts.map

package/dist/utils/uid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/utils/uid.ts"],"names":[],"mappings":"AAMA;;;;IAII;AACJ,wBAAgB,GAAG,CAAC,EAAE,GAAE,MAAa,GAAG,MAAM,CAI7C"}

package/dist/utils/uid.js

@@ -0,0 +1,14 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+const uidCounters = {};
+/**
+ * Returns a UID.
+ * @param id= - Identifier base name
+ * @return uid
+ **/
+export function uid(id = 'id') {
+    uidCounters[id] = uidCounters[id] || 1;
+    const count = uidCounters[id]++;
+    return `${id}-${count}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-alpha.1",
+  "version": "9.1.0-alpha.10",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/core": "^9.0.0-beta"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.1.0-alpha.1",
+    "@luma.gl/constants": "9.1.0-alpha.10",
     "@math.gl/types": "^4.0.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "bc5c11c87f1e4db857e701688ca1410d7f51fd0f"
+  "gitHead": "f419cdc284e87b553df60af49d2888ac7dbbf288"
 }

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

@@ -14,7 +14,6 @@ import type {
   GLProvokingVertex,
   GLStencilOp
 } from '@luma.gl/constants';
-import {pushContextState, popContextState} from '../../context/state-tracker/track-context-state';
 import {setGLParameters} from '../../context/parameters/unified-parameter-api';
 import {WebGLDevice} from '../webgl-device';
 
@@ -41,13 +40,13 @@ export function withDeviceAndGLParameters<T = unknown>(
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
   const webglDevice = device as WebGLDevice;
-  pushContextState(webglDevice.gl);
+  webglDevice.pushState();
   try {
     setDeviceParameters(device, parameters);
     setGLParameters(webglDevice.gl, glParameters);
     return func(device);
   } finally {
-    popContextState(webglDevice.gl);
+    webglDevice.popState();
   }
 }
 
@@ -72,12 +71,12 @@ export function withGLParameters<T = unknown>(
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
   const webglDevice = device as WebGLDevice;
-  pushContextState(webglDevice.gl);
+  webglDevice.pushState();
   try {
     setGLParameters(webglDevice.gl, parameters);
     return func(device);
   } finally {
-    popContextState(webglDevice.gl);
+    webglDevice.popState();
   }
 }
 
@@ -99,15 +98,14 @@ export function withDeviceParameters<T = unknown>(
     return func(device);
   }
 
-  // Wrap in a try-catch to ensure that parameters are restored on exceptions
-  // @ts-expect-error
-  pushContextState(device.gl);
+  // Wrap in a try-catch to ensure that parameters are restored on exceptions'
+  const webglDevice = device as WebGLDevice;
+  webglDevice.pushState();
   try {
     setDeviceParameters(device, parameters);
     return func(device);
   } finally {
-    // @ts-expect-error
-    popContextState(device.gl);
+    webglDevice.popState();
   }
 }
 
@@ -280,10 +278,18 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   // },
 
   // COLOR STATE
+  switch (parameters.blend) {
+    case true:
+      gl.enable(GL.BLEND);
+      break;
+    case false:
+      gl.disable(GL.BLEND);
+      break;
+    default:
+    // leave WebGL blend state unchanged if `parameters.blend` is not set
+  }
 
   if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-    gl.enable(GL.BLEND);
-
     const colorEquation = convertBlendOperationToEquation(
       'blendColorOperation',
       parameters.blendColorOperation || 'add'

package/src/adapter/converters/texture-formats.ts

@@ -141,15 +141,6 @@ type Format = {
  */
 // prettier-ignore
 export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
-  // Unsized formats that leave the precision up to the driver. TODO - Fix bpp constants
-  'rgb8unorm-unsized': {gl: GL.RGB, b: 4, c: 2, bpp: 4,
-    dataFormat: GL.RGB, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_5_6_5]},
-  'rgba8unorm-unsized': {gl: GL.RGBA, b: 4, c: 2, bpp: 4,
-    dataFormat: GL.RGBA, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_4_4_4_4, GL.UNSIGNED_SHORT_5_5_5_1]},
-  // 'r8unorm-unsized': {gl: GL.LUMINANCE, b: 4, c: 2, bpp: 4},
-  // 'rgb8unorm-srgb-unsized': {gl: GL.SRGB_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
-  // 'rgba8unorm-srgb-unsized': {gl: GL.SRGB_ALPHA_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
-
   // 8-bit formats
   'r8unorm': {gl: GL.R8, b: 1, c: 1, rb: true},
   'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1, render: snorm8_renderable},
@@ -239,9 +230,6 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   // The depth component of the "depth24plus" and "depth24plus-stencil8" formats may be implemented as either a 24-bit depth value or a "depth32float" value.
   'depth24plus-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, rb: true, depthTexture: true,
     dataFormat: GL.DEPTH_STENCIL, types: [GL.UNSIGNED_INT_24_8]},
-  // "depth24unorm-stencil8" feature
-  'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, 
-    dataFormat: GL.DEPTH_STENCIL, types: [GL.UNSIGNED_INT_24_8], rb: true},
   // "depth32float-stencil8" feature - TODO below is render buffer only?
   'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, 
     dataFormat: GL.DEPTH_STENCIL, types: [GL.FLOAT_32_UNSIGNED_INT_24_8_REV], rb: true},
@@ -469,6 +457,10 @@ export function isTextureFormatSupported(
   if (info.gl === undefined) {
     return false;
   }
+  const feature = info.f;
+  if (feature) {
+    return checkTextureFeature(gl, feature, extensions);
+  }
   // Check extensions
   const extension = info.x || info.gl2ext;
   if (extension) {
@@ -509,7 +501,7 @@ export function getTextureFormatSupport(
 
   // Support Check that we have a GL constant
   let supported = info.gl === undefined;
-  supported = supported && checkTextureFeature(gl, info.f as DeviceFeature, extensions);
+  supported = supported && checkTextureFeature(gl, info.f, extensions);
 
   // Filtering
   // const filterable = info.filter
@@ -521,8 +513,8 @@ export function getTextureFormatSupport(
 
   return {
     supported,
-    renderable: supported && checkTextureFeature(gl, info.render as DeviceFeature, extensions),
-    filterable: supported && checkTextureFeature(gl, info.filter as DeviceFeature, extensions),
+    renderable: supported && checkTextureFeature(gl, info.render, extensions),
+    filterable: supported && checkTextureFeature(gl, info.filter, extensions),
     blendable: false, // tod,
     storable: false
   };
@@ -586,13 +578,12 @@ export function getTextureFormatWebGL(format: TextureFormat): {
     internalFormat: webglFormat,
     format:
       formatData?.dataFormat ||
-      getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
+      getWebGLPixelDataFormat(decoded.channels, decoded.integer, decoded.normalized, webglFormat),
     // depth formats don't have a type
     type: decoded.dataType
       ? getGLFromVertexType(decoded.dataType)
       : formatData?.types?.[0] || GL.UNSIGNED_BYTE,
-    // @ts-expect-error
-    compressed: decoded.compressed
+    compressed: decoded.compressed || false
   };
 }
 
@@ -619,7 +610,7 @@ export function getTextureFormatBytesPerPixel(format: TextureFormat): number {
 // DATA TYPE HELPERS
 
 export function getWebGLPixelDataFormat(
-  dataFormat: string,
+  channels: 'r' | 'rg' | 'rgb' | 'rgba' | 'bgra',
   integer: boolean,
   normalized: boolean,
   format: GL
@@ -629,11 +620,12 @@ export function getWebGLPixelDataFormat(
     return format;
   }
   // prettier-ignore
-  switch (dataFormat) {
+  switch (channels) {
     case 'r': return integer && !normalized ? GL.RED_INTEGER : GL.RED;
     case 'rg': return integer && !normalized ? GL.RG_INTEGER : GL.RG;
     case 'rgb': return integer && !normalized ? GL.RGB_INTEGER : GL.RGB;
     case 'rgba': return integer && !normalized ? GL.RGBA_INTEGER : GL.RGBA;
+    case 'bgra': throw new Error('bgra pixels not supported by WebGL');
     default: return GL.RGBA;
   }
 }

package/src/adapter/device-helpers/webgl-device-features.ts

@@ -21,7 +21,6 @@ const WEBGL_FEATURES: Partial<Record<DeviceFeature, boolean | string>> = {
   // 'timestamp-query' // GPUQueryType "timestamp-query"
   // "indirect-first-instance"
   // Textures are handled by getTextureFeatures()
-  // 'depth24unorm-stencil8' // GPUTextureFormat 'depth24unorm-stencil8'
   // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
 
   // optional WebGL features

package/src/adapter/helpers/webgl-texture-utils.ts

@@ -97,7 +97,7 @@ export function initializeTextureStorage(
 ): void {
   const {dimension, width, height, depth = 0} = options;
   const {glInternalFormat} = options;
-  const glTarget = options.glTarget; // getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = options.glTarget; // getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
   switch (dimension) {
     case '2d-array':
     case '3d':
@@ -120,7 +120,7 @@ export function copyCPUImageToMipLevel(
   const {dimension, width, height, depth = 0, level = 0} = options;
   const {x = 0, y = 0, z = 0} = options;
   const {glFormat, glType} = options;
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   // width = size.width,
   // height = size.height
@@ -154,7 +154,9 @@ export function copyCPUDataToMipLevel(
   const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
   const {x = 0, y = 0, z = 0} = options;
   const {glFormat, glType, compressed} = options;
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
+
+  // gl.bindTexture(glTarget, null);
 
   switch (dimension) {
     case '2d-array':
@@ -196,7 +198,7 @@ export function copyGPUBufferToMipLevel(
   const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
   const {x = 0, y = 0, z = 0} = options;
   const {glFormat, glType, compressed} = options;
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, webglBuffer);
 
@@ -250,9 +252,10 @@ export function getWebGLTextureTarget(
 
 /**
  * In WebGL, cube maps specify faces by overriding target instead of using the depth parameter.
+ * @note We still bind the texture using GL.TEXTURE_CUBE_MAP, but we need to use the face-specific target when setting mip levels.
  * @returns glTarget unchanged, if dimension !== 'cube'.
  */
-function getCubeTargetWebGL(
+function getWebGLCubeFaceTarget(
   glTarget: GLTextureTarget,
   dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d',
   level: number
@@ -269,7 +272,7 @@ function getCubeTargetWebGL(
 export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextureOptions): void {
   const {dimension, width, height, depth = 0, level = 0} = options;
   const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   switch (dimension) {
     case '2d-array':
@@ -312,7 +315,7 @@ export function setMipLevelFromExternalImage(
   const {dimension, width, height, depth = 0, level = 0} = options;
   const {glInternalFormat, glType} = options;
 
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   // TODO - we can't change texture width (due to WebGPU limitations) -
   // and the width/heigh of an external image is implicit, so why do we need to extract it?
@@ -363,7 +366,7 @@ export function setMipLevelFromTypedArray(
   const {dimension, width, height, depth = 0, level = 0, offset = 0} = options;
   const {glInternalFormat, glFormat, glType, compressed} = options;
 
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   withGLParameters(gl, parameters, () => {
     switch (dimension) {
@@ -442,7 +445,7 @@ export function setMipLevelFromGPUBuffer(
 ): void {
   const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
   const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   const webglBuffer = buffer as WEBGLBuffer;
   const imageSize = buffer.byteLength;

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

@@ -155,7 +155,7 @@ export class WEBGLFramebuffer extends Framebuffer {
     switch (texture.glTarget) {
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
-        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.glTarget, level, layer);
+        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.handle, level, layer);
         break;
 
       case GL.TEXTURE_CUBE_MAP:

package/src/adapter/resources/webgl-render-pass.ts

@@ -8,7 +8,6 @@ import {WebGLDevice} from '../webgl-device';
 import {GL, GLParameters} from '@luma.gl/constants';
 import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {setGLParameters} from '../../context/parameters/unified-parameter-api';
-import {pushContextState, popContextState} from '../../context/state-tracker/track-context-state';
 import {WEBGLQuerySet} from './webgl-query-set';
 
 // Should collapse during minification
@@ -29,16 +28,30 @@ export class WEBGLRenderPass extends RenderPass {
     super(device, props);
     this.device = device;
 
+    // If no viewport is provided, apply reasonably defaults
+    let viewport;
+    if (!props?.parameters?.viewport) {
+      if (props?.framebuffer) {
+        // Set the viewport to the size of the framebuffer
+        const {width, height} = props.framebuffer;
+        viewport = [0, 0, width, height];
+      } else {
+        // Instead of using our own book-keeping, we can just read the values from the WebGL context
+        const [width, height] = device.getCanvasContext().getDrawingBufferSize();
+        viewport = [0, 0, width, height];
+      }
+    }
+
     // TODO - do parameters (scissorRect) affect the clear operation?
-    pushContextState(this.device.gl);
-    this.setParameters(this.props.parameters);
+    this.device.pushState();
+    this.setParameters({viewport, ...this.props.parameters});
 
     // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
     this.clear();
   }
 
   end(): void {
-    popContextState(this.device.gl);
+    this.device.popState();
     // should add commands to CommandEncoder.
   }
 

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -112,7 +112,8 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           .join(', ');
         if (!options?.disableWarnings) {
           log.warn(
-            `Unknown binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`
+            `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
+            value
           )();
         }
         continue; // eslint-disable-line no-continue

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

@@ -60,7 +60,7 @@ export class WEBGLShader extends Shader {
   /** Compile a shader and get compilation status */
   protected async _compile(source: string): Promise<void> {
     const addGLSLVersion = (source: string) =>
-      source.startsWith('#version ') ? source : `#version 100\n${source}`;
+      source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
     source = addGLSLVersion(source);
 
     const {gl} = this.device;

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

@@ -192,7 +192,7 @@ export class WEBGLTexture extends Texture {
     let {width, height} = props;
 
     if (!width || !height) {
-      const textureSize = this.getTextureDataSize(data);
+      const textureSize = Texture.getTextureDataSize(data);
       width = textureSize?.width || 1;
       height = textureSize?.height || 1;
     }
@@ -333,13 +333,36 @@ export class WEBGLTexture extends Texture {
   }
 
   // Image Data Setters
+  copyExternalImage(options: {
+    image: ExternalImage;
+    sourceX?: number;
+    sourceY?: number;
+    width?: number;
+    height?: number;
+    depth?: number;
+    mipLevel?: number;
+    x?: number;
+    y?: number;
+    z?: number;
+    aspect?: 'all' | 'stencil-only' | 'depth-only';
+    colorSpace?: 'srgb';
+    premultipliedAlpha?: boolean;
+  }): {width: number; height: number} {
+    const size = Texture.getExternalImageSize(options.image);
+    const opts = {...Texture.defaultCopyExternalImageOptions, ...size, ...options};
+    const {depth, mipLevel: lodLevel, image} = opts;
+    this.bind();
+    this._setMipLevel(depth, lodLevel, image);
+    this.unbind();
+    return {width: opts.width, height: opts.height};
+  }
 
   setTexture1DData(data: Texture1DData): void {
     throw new Error('setTexture1DData not supported in WebGL.');
   }
 
   /** Set a simple texture */
-  setTexture2DData(lodData: Texture2DData, depth = 0, glTarget = this.glTarget): void {
+  setTexture2DData(lodData: Texture2DData, depth = 0): void {
     this.bind();
 
     const lodArray = normalizeTextureData(lodData, this);
@@ -367,7 +390,9 @@ export class WEBGLTexture extends Texture {
       throw new Error(this.id);
     }
     if (ArrayBuffer.isView(data)) {
+      this.bind();
       copyCPUDataToMipLevel(this.device.gl, data, this);
+      this.unbind();
     }
   }
 
@@ -381,9 +406,9 @@ export class WEBGLTexture extends Texture {
     if (this.props.dimension !== 'cube') {
       throw new Error(this.id);
     }
-    // for (const face of Texture.CubeFaces) {
-    //   // this.setTextureCubeFaceData(face, data[face]);
-    // }
+    for (const face of Texture.CubeFaces) {
+      this.setTextureCubeFaceData(data[face], face);
+    }
   }
 
   /**
@@ -414,27 +439,9 @@ export class WEBGLTexture extends Texture {
       log.warn(`${this.id} has mipmap and multiple LODs.`)();
     }
 
-    // const glFace = GL.TEXTURE_CUBE_MAP_POSITIVE_X + Texture.CubeFaces.indexOf(face);
-    // const glType = GL.UNSIGNED_BYTE;
-    // const {width, height, format = GL.RGBA, type = GL.UNSIGNED_BYTE} = this;
-    // const {width, height, format = GL.RGBA, type = GL.UNSIGNED_BYTE} = this;
+    const faceDepth = Texture.CubeFaces.indexOf(face);
 
-    this.bind();
-    // for (let lodLevel = 0; lodLevel < lodData.length; lodLevel++) {
-    //   const imageData = lodData[lodLevel];
-    //   if (imageData instanceof ArrayBuffer) {
-    //     // const imageData = image instanceof ArrayBuffer ? new ImageData(new Uint8ClampedArray(image), this.width) : image;
-    //     this.device.gl.texImage2D?.(
-    //       glFace,
-    //       lodLevel,
-    //       this.glInternalFormat,
-    //       this.glInternalFormat,
-    //       glType,
-    //       imageData
-    //     );
-    //   }
-    // }
-    this.unbind();
+    this.setTexture2DData(lodData, faceDepth);
   }
 
   // INTERNAL METHODS
@@ -592,23 +599,29 @@ export class WEBGLTexture extends Texture {
    * Copy a region of data from a CPU memory buffer into this texture.
    * @todo -   GLUnpackParameters parameters
    */
-  protected _setMipLevel(depth: number, level: number, textureData: Texture2DData, offset = 0) {
+  protected _setMipLevel(
+    depth: number,
+    level: number,
+    textureData: Texture2DData,
+    glTarget: GL = this.glTarget
+  ) {
     // if (!textureData) {
     //   clearMipLevel(this.device.gl, {...this, depth, level});
     //   return;
     // }
 
     if (Texture.isExternalImage(textureData)) {
-      copyCPUImageToMipLevel(this.device.gl, textureData, {...this, depth, level});
+      copyCPUImageToMipLevel(this.device.gl, textureData, {...this, depth, level, glTarget});
       return;
     }
 
     // @ts-expect-error
-    if (this.isTextureLevelData(textureData)) {
+    if (Texture.isTextureLevelData(textureData)) {
       copyCPUDataToMipLevel(this.device.gl, textureData.data, {
         ...this,
         depth,
-        level
+        level,
+        glTarget
       });
       return;
     }

package/src/adapter/resources/webgl-transform-feedback.ts

@@ -56,7 +56,7 @@ export class WEBGLTransformFeedback extends TransformFeedback {
 
   end(): void {
     this.gl.endTransformFeedback();
-    if (!this.bindOnUse) {
+    if (this.bindOnUse) {
       this._unbindBuffers();
     }
     this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);

package/src/adapter/resources/webgl-vertex-array.ts

@@ -97,6 +97,9 @@ export class WEBGLVertexArray extends VertexArray {
       // Attaches ARRAY_BUFFER with specified buffer format to location
       this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
     }
+    // Clear binding - keeping it may cause [.WebGL-0x12804417100]
+    // GL_INVALID_OPERATION: A transform feedback buffer that would be written to is also bound to a non-transform-feedback target
+    this.device.gl.bindBuffer(GL.ARRAY_BUFFER, null);
 
     // Mark as non-constant
     this.device.gl.enableVertexAttribArray(location);