@luma.gl/webgl 9.1.0-alpha.2 → 9.1.0-alpha.9

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/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.2",
+  "version": "9.1.0-alpha.9",
   "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.2",
+    "@luma.gl/constants": "9.1.0-alpha.9",
     "@math.gl/types": "^4.0.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "cb258afdefd2d5712d2decca35c746dd9d77a03e"
+  "gitHead": "ff05b21269181dbb782ba7c8c1546900288ee6a1"
 }

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

@@ -339,7 +339,7 @@ export class WEBGLTexture extends Texture {
   }
 
   /** 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 +367,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 +383,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 +416,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,14 +576,19 @@ 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;
     }
 
@@ -608,7 +597,8 @@ export class WEBGLTexture extends Texture {
       copyCPUDataToMipLevel(this.device.gl, textureData.data, {
         ...this,
         depth,
-        level
+        level,
+        glTarget
       });
       return;
     }

package/src/adapter/webgl-adapter.ts

@@ -0,0 +1,113 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Adapter, Device, DeviceProps, CanvasContext, log} from '@luma.gl/core';
+import {WebGLDevice} from './webgl-device';
+import {enforceWebGL2} from '../context/polyfills/polyfill-webgl1-extensions';
+import {loadSpectorJS, DEFAULT_SPECTOR_PROPS} from '../context/debug/spector';
+import {loadWebGLDeveloperTools} from '../context/debug/webgl-developer-tools';
+
+const LOG_LEVEL = 1;
+
+export class WebGLAdapter extends Adapter {
+  /** type of device's created by this adapter */
+  readonly type: Device['type'] = 'webgl';
+
+  constructor() {
+    super();
+
+    // Add spector default props to device default props, so that runtime settings are observed
+    Device.defaultProps = {...Device.defaultProps, ...DEFAULT_SPECTOR_PROPS};
+
+    // @ts-ignore DEPRECATED For backwards compatibility luma.registerDevices
+    WebGLDevice.adapter = this;
+  }
+
+  /** Check if WebGL 2 is available */
+  isSupported(): boolean {
+    return typeof WebGL2RenderingContext !== 'undefined';
+  }
+
+  /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
+  enforceWebGL2(enable: boolean): void {
+    enforceWebGL2(enable);
+  }
+
+  /**
+   * Get a device instance from a GL context
+   * Creates and instruments the device if not already created
+   * @param gl
+   * @returns
+   */
+  async attach(gl: Device | WebGL2RenderingContext): Promise<WebGLDevice> {
+    if (gl instanceof WebGLDevice) {
+      return gl;
+    }
+    // @ts-expect-error
+    if (gl?.device instanceof Device) {
+      // @ts-expect-error
+      return gl.device as WebGLDevice;
+    }
+    if (!isWebGL(gl)) {
+      throw new Error('Invalid WebGL2RenderingContext');
+    }
+    return new WebGLDevice({gl: gl as WebGL2RenderingContext});
+  }
+
+  async create(props: DeviceProps = {}): Promise<WebGLDevice> {
+    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
+
+    const promises: Promise<unknown>[] = [];
+
+    // Load webgl and spector debug scripts from CDN if requested
+    if (props.debug) {
+      promises.push(loadWebGLDeveloperTools());
+    }
+
+    if (props.debugWithSpectorJS) {
+      promises.push(loadSpectorJS(props));
+    }
+
+    // Wait for page to load: if canvas is a string we need to query the DOM for the canvas element.
+    // We only wait when props.canvas is string to avoids setting the global page onload callback unless necessary.
+    if (typeof props.canvas === 'string') {
+      promises.push(CanvasContext.pageLoaded);
+    }
+
+    // Wait for all the loads to settle before creating the context.
+    // The Device.create() functions are async, so in contrast to the constructor, we can `await` here.
+    const results = await Promise.allSettled(promises);
+    for (const result of results) {
+      if (result.status === 'rejected') {
+        log.error(`Failed to initialize debug libraries ${result.reason}`)();
+      }
+    }
+
+    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
+
+    const device = new WebGLDevice(props);
+
+    // Log some debug info about the newly created context
+    const message = `\
+Created ${device.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;
+  }
+}
+
+/** Check if supplied parameter is a WebGL2RenderingContext */
+function isWebGL(gl: any): boolean {
+  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+    return true;
+  }
+  // Look for debug contexts, headless gl etc
+  return Boolean(gl && Number.isFinite(gl._version));
+}
+
+export const webgl2Adapter = new WebGLAdapter();