@luma.gl/webgl 9.0.0-beta.6 → 9.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.7",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/constants": "^9.0.0-beta.4"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.0.0-beta.6",
-    "@luma.gl/core": "9.0.0-beta.6",
+    "@luma.gl/constants": "9.0.0-beta.7",
+    "@luma.gl/core": "9.0.0-beta.7",
     "@probe.gl/env": "^4.0.2"
   },
-  "gitHead": "cb2f0938d03a65e3588622ac99650b14a10488b6"
+  "gitHead": "e9606a88e0aab3dc27c87020cac89040ea1a8a02"
 }

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

@@ -40,15 +40,14 @@ export function withDeviceAndGLParameters<T = unknown>(
   }
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
-  // @ts-expect-error
-  pushContextState(device.gl);
+  const webglDevice = device as WebGLDevice;
+  pushContextState(webglDevice.gl);
   try {
     setDeviceParameters(device, parameters);
-    setGLParameters(device, glParameters);
+    setGLParameters(webglDevice.gl, glParameters);
     return func(device);
   } finally {
-    // @ts-expect-error
-    popContextState(device.gl);
+    popContextState(webglDevice.gl);
   }
 }
 
@@ -72,14 +71,13 @@ export function withGLParameters<T = unknown>(
   }
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
-  // @ts-expect-error
-  pushContextState(device.gl);
+  const webglDevice = device as WebGLDevice;
+  pushContextState(webglDevice.gl);
   try {
-    setGLParameters(device, parameters);
+    setGLParameters(webglDevice.gl, parameters);
     return func(device);
   } finally {
-    // @ts-expect-error
-    popContextState(device.gl);
+    popContextState(webglDevice.gl);
   }
 }
 
@@ -115,7 +113,7 @@ export function withDeviceParameters<T = unknown>(
 
 /** Set WebGPU Style Parameters */
 export function setDeviceParameters(device: Device, parameters: Parameters) {
-  const webglDevice = WebGLDevice.attach(device);
+  const webglDevice = device as WebGLDevice;
   const {gl} = webglDevice;
 
   // RASTERIZATION SETTINGS

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

@@ -130,8 +130,8 @@ type Format = {
   attachment?: GL.DEPTH_ATTACHMENT | GL.STENCIL_ATTACHMENT | GL.DEPTH_STENCIL_ATTACHMENT;
   /** if depthTexture is set this is a depth/stencil format that can be set to a texture  */
   depthTexture?: boolean;
-
-  renderbuffer?: boolean;
+  /** @deprecated can this format be used with renderbuffers */
+  rb?: boolean;
 };
 
 // TABLES
@@ -142,38 +142,37 @@ 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
-  // 'r8unorm-unsized': {gl: GL.LUMINANCE, b: 4, c: 2, bpp: 4},
+  // 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, renderbuffer: true},
+  'r8unorm': {gl: GL.R8, b: 1, c: 1, rb: true},
   'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1, render: snorm8_renderable},
-  'r8uint': {gl: GL.R8UI, b: 1, c: 1, renderbuffer: true},
-  'r8sint': {gl: GL.R8I, b: 1, c: 1, renderbuffer: true},
+  'r8uint': {gl: GL.R8UI, b: 1, c: 1, rb: true},
+  'r8sint': {gl: GL.R8I, b: 1, c: 1, rb: true},
 
   // 16-bit formats
-  'rg8unorm': {gl: GL.RG8, b: 2, c: 2, renderbuffer: true},
+  'rg8unorm': {gl: GL.RG8, b: 2, c: 2, rb: true},
   'rg8snorm': {gl: GL.RG8_SNORM, b: 2, c: 2, render: snorm8_renderable},
-  'rg8uint': {gl: GL.RG8UI, b: 2, c: 2, renderbuffer: true},
-  'rg8sint': {gl: GL.RG8I, b: 2, c: 2, renderbuffer: true},
+  'rg8uint': {gl: GL.RG8UI, b: 2, c: 2, rb: true},
+  'rg8sint': {gl: GL.RG8I, b: 2, c: 2, rb: true},
 
-  'r16uint': {gl: GL.R16UI, b: 2, c: 1, renderbuffer: true},
-  'r16sint': {gl: GL.R16I, b: 2, c: 1, renderbuffer: true},
-  'r16float': {gl: GL.R16F, b: 2, c: 1, render: float16_renderable, filter: 'float16-filterable-webgl', renderbuffer: true},
-  'r16unorm-webgl': {gl: GL.R16_EXT, b:2, c:1, f: norm16_renderable, renderbuffer: true},
+  'r16uint': {gl: GL.R16UI, b: 2, c: 1, rb: true},
+  'r16sint': {gl: GL.R16I, b: 2, c: 1, rb: true},
+  'r16float': {gl: GL.R16F, b: 2, c: 1, render: float16_renderable, filter: 'float16-filterable-webgl', rb: true},
+  'r16unorm-webgl': {gl: GL.R16_EXT, b:2, c:1, f: norm16_renderable, rb: true},
   'r16snorm-webgl': {gl: GL.R16_SNORM_EXT, b:2, c:1, f: snorm16_renderable},
 
   // Packed 16-bit formats
-  'rgba4unorm-webgl': {gl: GL.RGBA4, b: 2, c: 4, wgpu: false, renderbuffer: true},
-  'rgb565unorm-webgl': {gl: GL.RGB565, b: 2, c: 4, wgpu: false, renderbuffer: true},
-  'rgb5a1unorm-webgl': {gl: GL.RGB5_A1, b: 2, c: 4, wgpu: false, renderbuffer: true},
+  'rgba4unorm-webgl': {gl: GL.RGBA4, b: 2, c: 4, wgpu: false, rb: true},
+  'rgb565unorm-webgl': {gl: GL.RGB565, b: 2, c: 4, wgpu: false, rb: true},
+  'rgb5a1unorm-webgl': {gl: GL.RGB5_A1, b: 2, c: 4, wgpu: false, rb: true},
 
   // 24-bit formats
   'rgb8unorm-webgl': {gl: GL.RGB8, b: 3, c: 3, wgpu: false},
@@ -192,32 +191,32 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   'rg16uint': {gl: GL.RG16UI, b: 4, c: 1, bpp: 4},
   'rg16sint': {gl: GL.RG16I, b: 4, c: 2, bpp: 4},
   // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
-  'rg16float': {gl: GL.RG16F, bpp: 4, b: 4, c: 2, render: float16_renderable, filter: float16_filterable, renderbuffer: true},
+  'rg16float': {gl: GL.RG16F, bpp: 4, b: 4, c: 2, render: float16_renderable, filter: float16_filterable, rb: true},
   'rg16unorm-webgl': {gl: GL.RG16_EXT, b:2, c:2, render: norm16_renderable},
   'rg16snorm-webgl': {gl: GL.RG16_SNORM_EXT, b:2, c:2, render: snorm16_renderable},
 
-  'r32uint': {gl: GL.R32UI, b: 4, c: 1, bpp: 4, renderbuffer: true},
-  'r32sint': {gl: GL.R32I, b: 4, c: 1, bpp: 4, renderbuffer: true},
+  'r32uint': {gl: GL.R32UI, b: 4, c: 1, bpp: 4, rb: true},
+  'r32sint': {gl: GL.R32I, b: 4, c: 1, bpp: 4, rb: true},
   'r32float': {gl: GL.R32F, bpp: 4, b: 4, c: 1, render: float32_renderable, filter: float32_filterable},
 
   // Packed 32-bit formats
   'rgb9e5ufloat': {gl: GL.RGB9_E5, b: 4, c: 3, p: 1, render: rgb9e5ufloat_renderable}, // , filter: true},
-  'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, b: 4, c: 3, p: 1,render: float32_renderable, renderbuffer: true},
-  'rgb10a2unorm': {gl: GL.RGB10_A2, b: 4, c: 4, p: 1, renderbuffer: true},
-  'rgb10a2uint-webgl': {b: 4, c: 4, gl: GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, renderbuffer: true},
+  'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, b: 4, c: 3, p: 1,render: float32_renderable, rb: true},
+  'rgb10a2unorm': {gl: GL.RGB10_A2, b: 4, c: 4, p: 1, rb: true},
+  'rgb10a2uint-webgl': {b: 4, c: 4, gl: GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, rb: true},
 
   // 48-bit formats
   'rgb16unorm-webgl': {gl: GL.RGB16_EXT, b:2, c:3, f: norm16_renderable}, // rgb not renderable
   'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT, b:2, c:3, f: norm16_renderable}, // rgb not renderable
 
   // 64-bit formats
-  'rg32uint': {gl: GL.RG32UI, b: 8, c: 2, renderbuffer: true},
-  'rg32sint': {gl: GL.RG32I, b: 8, c: 2, renderbuffer: true},
-  'rg32float': {gl: GL.RG32F, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, renderbuffer: true},
-  'rgba16uint': {gl: GL.RGBA16UI, b: 8, c: 4, renderbuffer: true},
-  'rgba16sint': {gl: GL.RGBA16I, b: 8, c: 4, renderbuffer: true},
+  'rg32uint': {gl: GL.RG32UI, b: 8, c: 2, rb: true},
+  'rg32sint': {gl: GL.RG32I, b: 8, c: 2, rb: true},
+  'rg32float': {gl: GL.RG32F, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, rb: true},
+  'rgba16uint': {gl: GL.RGBA16UI, b: 8, c: 4, rb: true},
+  'rgba16sint': {gl: GL.RGBA16I, b: 8, c: 4, rb: true},
   'rgba16float': {gl: GL.RGBA16F, b: 8, c: 4, render: float16_renderable, filter: float16_filterable},
-  'rgba16unorm-webgl': {gl: GL.RGBA16_EXT, b:2, c:4, render: norm16_renderable, renderbuffer: true},
+  'rgba16unorm-webgl': {gl: GL.RGBA16_EXT, b:2, c:4, render: norm16_renderable, rb: true},
   'rgba16snorm-webgl': {gl: GL.RGBA16_SNORM_EXT, b:2, c:4, render: snorm16_renderable},
 
   // 96-bit formats (deprecated!)
@@ -225,23 +224,29 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
     gl2ext: EXT_color_buffer_float, dataFormat: GL.RGB, types: [GL.FLOAT]},
   
   // 128-bit formats
-  'rgba32uint': {gl: GL.RGBA32UI, b: 16, c: 4, renderbuffer: true},
-  'rgba32sint': {gl: GL.RGBA32I, b: 16, c: 4, renderbuffer: true},
-  'rgba32float': {gl: GL.RGBA32F, b: 16, c: 4, render: float32_renderable, filter: float32_filterable, renderbuffer: true},
+  'rgba32uint': {gl: GL.RGBA32UI, b: 16, c: 4, rb: true},
+  'rgba32sint': {gl: GL.RGBA32I, b: 16, c: 4, rb: true},
+  'rgba32float': {gl: GL.RGBA32F, b: 16, c: 4, render: float32_renderable, filter: float32_filterable, rb: true},
 
   // Depth and stencil formats
-  'stencil8': {gl: GL.STENCIL_INDEX8, b: 1, c: 1, attachment: GL.STENCIL_ATTACHMENT, renderbuffer: true}, // 8 stencil bits
+  'stencil8': {gl: GL.STENCIL_INDEX8, b: 1, c: 1, attachment: GL.STENCIL_ATTACHMENT, rb: true}, // 8 stencil bits
 
-  'depth16unorm': {gl: GL.DEPTH_COMPONENT16, b: 2, c: 1, attachment: GL.DEPTH_ATTACHMENT, renderbuffer: true}, // 16 depth bits
-  'depth24plus': {gl: GL.DEPTH_COMPONENT24, b: 3, c: 1, attachment: GL.DEPTH_ATTACHMENT},
-  'depth32float': {gl: GL.DEPTH_COMPONENT32F, b: 4, c: 1, attachment: GL.DEPTH_ATTACHMENT, renderbuffer: true},
+  'depth16unorm': {gl: GL.DEPTH_COMPONENT16, b: 2, c: 1, attachment: GL.DEPTH_ATTACHMENT, 
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.UNSIGNED_SHORT], rb: true}, // 16 depth bits
+  'depth24plus': {gl: GL.DEPTH_COMPONENT24, b: 3, c: 1, attachment: GL.DEPTH_ATTACHMENT,
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.UNSIGNED_INT]},
+  'depth32float': {gl: GL.DEPTH_COMPONENT32F, b: 4, c: 1, attachment: GL.DEPTH_ATTACHMENT, 
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.FLOAT], rb: true},
 
   // 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.DEPTH_STENCIL, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, renderbuffer: true, depthTexture: true},
+  '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, renderbuffer: true},
-  // "depth32float-stencil8" feature
-  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, renderbuffer: true},
+  '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},
 
   // BC compressed formats: check device.features.has("texture-compression-bc");
 
@@ -455,10 +460,9 @@ const TYPE_SIZES = {
 /** Checks if a texture format is supported */
 export function isTextureFormatSupported(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL,
+  format: TextureFormat,
   extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
   const info = TEXTURE_FORMATS[format];
   if (!info) {
     return false;
@@ -481,7 +485,7 @@ export function isRenderbufferFormatSupported(
   extensions: GLExtensions
 ): boolean {
   // Note: Order is important since the function call initializes extensions.
-  return isTextureFormatSupported(gl, format, extensions) && TEXTURE_FORMATS[format]?.renderbuffer;
+  return isTextureFormatSupported(gl, format, extensions) && TEXTURE_FORMATS[format]?.rb;
 }
 
 /**
@@ -513,7 +517,7 @@ export function convertTextureFormatToGL(format: TextureFormat): GL | undefined
 /** Checks if a texture format is supported */
 export function getTextureFormatSupport(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL,
+  format: TextureFormat,
   extensions: GLExtensions
 ): {
   supported: boolean;
@@ -522,7 +526,6 @@ export function getTextureFormatSupport(
   blendable?: boolean;
   storable?: boolean;
 } {
-  const format = convertGLToTextureFormat(formatOrGL);
   const info = TEXTURE_FORMATS[format];
   if (!info) {
     return {supported: false};
@@ -556,13 +559,15 @@ export function getTextureFormatSupport(
 /** Checks whether linear filtering (interpolated sampling) is available for floating point textures */
 export function isTextureFormatFilterable(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL,
+  format: TextureFormat,
   extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
   if (!isTextureFormatSupported(gl, format, extensions)) {
     return false;
   }
+  if (format.startsWith('depth') || format.startsWith('stencil')) {
+    return false;
+  }
   try {
     const decoded = decodeTextureFormat(format);
     if (decoded.signed) {
@@ -582,10 +587,9 @@ export function isTextureFormatFilterable(
 
 export function isTextureFormatRenderable(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL,
+  format: TextureFormat,
   extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
   if (!isTextureFormatSupported(gl, format, extensions)) {
     return false;
   }
@@ -596,20 +600,20 @@ export function isTextureFormatRenderable(
   return true;
 }
 
-export function getWebGLTextureParameters(formatOrGL: TextureFormat | GL) {
-  const format = convertGLToTextureFormat(formatOrGL);
+/** Get parameters necessary to work with format in WebGL: internalFormat, dataFormat, type, compressed, */
+export function getWebGLTextureParameters(format: TextureFormat) {
+  const formatData = TEXTURE_FORMATS[format];
   const webglFormat = convertTextureFormatToGL(format);
   const decoded = decodeTextureFormat(format);
   return {
     format: webglFormat,
-    dataFormat: getWebGLPixelDataFormat(
-      decoded.format,
-      decoded.integer,
-      decoded.normalized,
-      webglFormat
-    ),
+    dataFormat:
+      formatData?.dataFormat ||
+      getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
     // depth formats don't have a type
-    type: decoded.dataType ? getGLFromVertexType(decoded.dataType) : GL.UNSIGNED_BYTE,
+    type: decoded.dataType
+      ? getGLFromVertexType(decoded.dataType)
+      : formatData?.types?.[0] || GL.UNSIGNED_BYTE,
     // @ts-expect-error
     compressed: decoded.compressed
   };
@@ -626,9 +630,8 @@ export function getDepthStencilAttachmentWebGL(
 }
 
 /** TODO - VERY roundabout legacy way of calculating bytes per pixel */
-export function getTextureFormatBytesPerPixel(formatOrGL: TextureFormat | GL): number {
+export function getTextureFormatBytesPerPixel(format: TextureFormat): number {
   // TODO remove webgl1 support
-  const format = convertGLToTextureFormat(formatOrGL);
   const params = getWebGLTextureParameters(format);
   // NOTE(Tarek): Default to RGBA bytes
   const channels = DATA_FORMAT_CHANNELS[params.dataFormat] || 4;

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

@@ -47,8 +47,12 @@ export class WebGLDeviceFeatures extends DeviceFeatures {
   protected extensions: GLExtensions;
   protected testedFeatures = new Set<DeviceFeature>();
 
-  constructor(gl: WebGL2RenderingContext, extensions: GLExtensions) {
-    super();
+  constructor(
+    gl: WebGL2RenderingContext,
+    extensions: GLExtensions,
+    disabledFeatures: Partial<Record<DeviceFeature, boolean>>
+  ) {
+    super([], disabledFeatures);
     this.gl = gl;
     this.extensions = extensions;
     // TODO - is this really needed?
@@ -71,6 +75,10 @@ export class WebGLDeviceFeatures extends DeviceFeatures {
   }
 
   override has(feature: DeviceFeature): boolean {
+    if (this.disabledFeatures[feature]) {
+      return false;
+    }
+
     // We have already tested this feature
     if (!this.testedFeatures.has(feature)) {
       this.testedFeatures.add(feature);
@@ -87,6 +95,18 @@ export class WebGLDeviceFeatures extends DeviceFeatures {
     return this.features.has(feature);
   }
 
+  // FOR DEVICE
+
+  initializeFeatures() {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const feature of this) {
+      // WebGL extensions are initialized by requesting them
+    }
+  }
+
+  // IMPLEMENTATION
+
   /** Extract all WebGL features */
   protected getWebGLFeature(feature: DeviceFeature): boolean {
     const featureInfo = WEBGL_FEATURES[feature];

package/src/adapter/objects/webgl-renderbuffer.ts

@@ -111,7 +111,7 @@ export class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
 
     this.trackAllocatedMemory(
-      width * height * (samples || 1) * getTextureFormatBytesPerPixel(this.glFormat)
+      width * height * (samples || 1) * getTextureFormatBytesPerPixel(this.format)
     );
   }
 

package/src/adapter/objects/webgl-resource.ts

@@ -25,7 +25,7 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
   constructor(device: Device, props: Props, defaultProps: Required<Props>) {
     super(device, props, defaultProps);
 
-    this.device = WebGLDevice.attach(device);
+    this.device = device as WebGLDevice;
     const gl = this.device.gl;
 
     // extends

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

@@ -53,12 +53,12 @@ export class WEBGLExternalTexture extends WEBGLTexture {
   }
 
   // eslint-disable-next-line max-statements
-  constructor(device: Device | WebGL2RenderingContext, props: TextureProps) {
-    super(WebGLDevice.attach(device), {id: uid('texture'), ...props});
+  constructor(device: Device , props: TextureProps) {
+    super(device as WebGLDevice, {id: uid('texture'), ...props});
 
     this.glTarget = getWebGLTextureTarget(props);
 
-    this.device = WebGLDevice.attach(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/resources/webgl-framebuffer.ts

@@ -8,10 +8,12 @@ import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLTextureView} from './webgl-texture-view';
-import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
 import {getDepthStencilAttachmentWebGL} from '../converters/texture-formats';
 
-export type Attachment = WEBGLTextureView | WEBGLTexture | WEBGLRenderbuffer;
+// TODO - for now we don't see a usage for renderbuffers in WebGL 2.
+// import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
+
+export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer;
 
 /** luma.gl Framebuffer, WebGL implementation  */
 export class WEBGLFramebuffer extends Framebuffer {
@@ -86,14 +88,14 @@ export class WEBGLFramebuffer extends Framebuffer {
 
   /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
   protected override createDepthStencilTexture(format: TextureFormat): Texture {
-    return new WEBGLRenderbuffer(this.device, {
-      id: `${this.id}-depth-stencil`, // TODO misleading if not depth and stencil?
+    // return new WEBGLRenderbuffer(this.device, {
+    return new WEBGLTexture(this.device, {
+      id: `${this.id}-depth-stencil`,
       format,
-      // dataFormat: GL.DEPTH_STENCIL,
-      // type: GL.UNSIGNED_INT_24_8,
       width: this.width,
-      height: this.height
-    }) as unknown as WEBGLTexture;
+      height: this.height,
+      mipmaps: false
+    });
   }
 
   /**
@@ -127,21 +129,21 @@ export class WEBGLFramebuffer extends Framebuffer {
   }
 
   /** Attach one attachment */
-  protected _attachOne(
-    attachmentPoint: GL,
-    attachment: Attachment
-  ): WEBGLTexture | WEBGLRenderbuffer {
-    if (attachment instanceof WEBGLRenderbuffer) {
-      this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
-      return attachment;
-    } else if (Array.isArray(attachment)) {
+  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WEBGLTexture {
+    // if (attachment instanceof WEBGLRenderbuffer) {
+    //   this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
+    //   return attachment;
+    // }
+    if (Array.isArray(attachment)) {
       const [texture, layer = 0, level = 0] = attachment;
       this._attachTexture(attachmentPoint, texture as unknown as WEBGLTexture, layer, level);
       return texture as unknown as WEBGLTexture;
-    } else if (attachment instanceof WEBGLTexture) {
+    }
+    if (attachment instanceof WEBGLTexture) {
       this._attachTexture(attachmentPoint, attachment, 0, 0);
       return attachment;
-    } else if (attachment instanceof WEBGLTextureView) {
+    }
+    if (attachment instanceof WEBGLTextureView) {
       const textureView = attachment;
       this._attachTexture(
         attachmentPoint,
@@ -154,14 +156,15 @@ export class WEBGLFramebuffer extends Framebuffer {
     throw new Error('attach');
   }
 
-  protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
-    this.gl.framebufferRenderbuffer(
-      GL.FRAMEBUFFER,
-      attachment,
-      GL.RENDERBUFFER,
-      renderbuffer.handle
-    );
-  }
+  // TODO - we do not seem to need render buffers in WebGL 2
+  // protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
+  //   this.gl.framebufferRenderbuffer(
+  //     GL.FRAMEBUFFER,
+  //     attachment,
+  //     GL.RENDERBUFFER,
+  //     renderbuffer.handle
+  //   );
+  // }
 
   /**
    * @param attachment

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

@@ -38,7 +38,7 @@ export class WEBGLRenderPass extends RenderPass {
   end(): void {
     popContextState(this.device.gl);
     if (this.props.framebuffer) {
-      setGLParameters(this.device, {framebuffer: null});
+      setGLParameters(this.device.gl, {framebuffer: null});
     }
     // should add commands to CommandEncoder.
   }
@@ -99,7 +99,7 @@ export class WEBGLRenderPass extends RenderPass {
 
     this.glParameters = glParameters;
 
-    setGLParameters(this.device, glParameters);
+    setGLParameters(this.device.gl, glParameters);
   }
 
   beginOcclusionQuery(queryIndex: number): void {
@@ -137,7 +137,7 @@ export class WEBGLRenderPass extends RenderPass {
 
     if (clearMask !== 0) {
       // Temporarily set any clear "colors" and call clear
-      withGLParameters(this.device, glParameters, () => {
+      withGLParameters(this.device.gl, glParameters, () => {
         this.device.gl.clear(clearMask);
       });
 

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

@@ -175,11 +175,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     baseVertex?: number;
     transformFeedback?: WEBGLTransformFeedback;
   }): boolean {
-    // If we are using async linking, we need to wait until linking completes
-    if (this.linkStatus !== 'success') {
-      return false;
-    }
-
     const {
       renderPass,
       vertexArray,
@@ -198,15 +193,27 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     const glIndexType = (vertexArray.indexBuffer as WEBGLBuffer)?.glIndexType;
     const isInstanced: boolean = Number(instanceCount) > 0;
 
+    // If we are using async linking, we need to wait until linking completes
+    if (this.linkStatus !== 'success') {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+      return false;
+    }
+
     // Avoid WebGL draw call when not rendering any data or values are incomplete
     // Note: async textures set as uniforms might still be loading.
     // Now that all uniforms have been updated, check if any texture
     // in the uniforms is not yet initialized, then we don't draw
     if (!this._areTexturesRenderable() || vertexCount === 0) {
-      // (isInstanced && instanceCount === 0)
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
       return false;
     }
 
+    // (isInstanced && instanceCount === 0)
+    if (vertexCount === 0) {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - no vertices to draw`)();
+      return true;
+    }
+
     this.device.gl.useProgram(this.handle);
 
     // Note: Rebinds constant attributes before each draw call

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

@@ -10,6 +10,7 @@
 import {
   Device,
   TextureProps,
+  TextureViewProps,
   Sampler,
   SamplerProps,
   SamplerParameters,
@@ -227,6 +228,10 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
+  createView(props: TextureViewProps): WEBGLTextureView {
+    return new WEBGLTextureView(this.device, {...props, texture: this});
+  }
+
   // eslint-disable-next-line max-statements
   initialize(props: WEBGLTextureProps = {}): this {
     // Cube textures
@@ -318,10 +323,9 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
     this.setSampler(props.sampler);
     this._setSamplerParameters(parameters);
 
-    // @ts-ignore
-    this.view = new WEBGLTextureView(this.device, {...this.props, texture: this});
+    this.view = this.createView({...this.props, mipLevelCount: 1, arrayLayerCount: 1});
 
-    if (mipmaps) {
+    if (mipmaps && this.device.isTextureFormatFilterable(props.format)) {
       this.generateMipmap();
     }