@luma.gl/webgl 9.0.0-alpha.51 → 9.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.51",
+  "version": "9.0.0-alpha.53",
   "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.51",
-    "@luma.gl/core": "9.0.0-alpha.51",
+    "@luma.gl/constants": "9.0.0-alpha.53",
+    "@luma.gl/core": "9.0.0-alpha.53",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.51"
+    "@luma.gl/test-utils": "9.0.0-alpha.53"
   },
-  "gitHead": "368b615bdd46d0006717f004244a942f3d2812e7"
+  "gitHead": "f8939f1cf52a15f11ec053d4906e40f0b2a86836"
 }

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-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/debug/webgl-developer-tools.ts

@@ -2,7 +2,8 @@
 // Copyright (c) vis.gl contributors
 
 import {log, loadScript} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+// Rename constant to prevent inlining. We need the full set of constants for generating debug strings.
+import {GL as GLEnum} from '@luma.gl/constants';
 import {isBrowser} from '@probe.gl/env'
 
 const WEBGL_DEBUG_CDN_URL = 'https://unpkg.com/webgl-debug@2.0.1/index.js';
@@ -85,7 +86,7 @@ function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): W
   }
 
   // Create a new debug context
-  globalThis.WebGLDebugUtils.init({...GL, ...gl});
+  globalThis.WebGLDebugUtils.init({...GLEnum, ...gl});
   const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(
     gl,
     onGLError.bind(null, props),
@@ -93,9 +94,9 @@ function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): W
   );
 
   // Make sure we have all WebGL2 and extension constants (todo dynamic import to circumvent minification?)
-  for (const key in GL) {
-    if (!(key in glDebug) && typeof GL[key] === 'number') {
-      glDebug[key] = GL[key];
+  for (const key in GLEnum) {
+    if (!(key in glDebug) && typeof GLEnum[key] === 'number') {
+      glDebug[key] = GLEnum[key];
     }
   }
   
@@ -147,7 +148,7 @@ function onValidateGLFunc(props: DebugContextProps, functionName: string, functi
     log.log(1, functionString)();
   }
 
-  // If array of breakpoint strings supplied, check if any of them is contained in current GL function
+  // If array of breakpoint strings supplied, check if any of them is contained in current GLEnum function
   if (props.break && props.break.length > 0) {
     functionString = functionString || getFunctionString(functionName, functionArgs);
     const isBreakpoint = props.break.every((breakOn: string) => functionString.indexOf(breakOn) !== -1);

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;
+    }
   }
 }