@luma.gl/webgl 9.0.0-alpha.46 → 9.0.0-alpha.48

package/package.json

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

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

@@ -7,10 +7,12 @@ import {
   CompareFunction,
   StencilOperation,
   log,
-  isObjectEmpty
+  isObjectEmpty,
+  BlendOperation,
+  BlendFactor
 } from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
-import type {GLParameters} from '@luma.gl/constants';
+import type {GLBlendEquation, GLBlendFunction, GLParameters} 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';
@@ -207,21 +209,19 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
 
   // COLOR STATE
 
-  // if (parameters.blend) {
-  //   gl.enable(GL.BLEND);
+  if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
+    gl.enable(GL.BLEND);
 
-  //   const blend = parameters.blend;
+    const colorEquation = convertBlendOperationToEquation('blendColorOperation', parameters.blendColorOperation || 'add');
+    const alphaEquation = convertBlendOperationToEquation('blendAlphaOperation', parameters.blendAlphaOperation || 'add');
+    gl.blendEquationSeparate(colorEquation, alphaEquation);
 
-  //   let colorEquation = (blend && blend.color && blend.color.operation) || 'add';
-  //   let alphaEquation = (blend && blend.alpha && blend.alpha.operation) || 'add';
-  //   gl.blendEquationSeparate(colorEquation, alphaEquation);
-
-  //   let colorSrcFactor = (blend && blend.color && blend.color.srcFactor) || 'one';
-  //   let colorDstFactor = (blend && blend.color && blend.color.dstFactor) || 'zero';
-  //   let alphaSrcFactor = (blend && blend.alpha && blend.alpha.srcFactor) || 'one';
-  //   let alphaDstFactor = (blend && blend.alpha && blend.alpha.dstFactor) || 'zero';
-  //   gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
-  // }
+    const colorSrcFactor = convertBlendFactorToFunction('blendColorSrcFactor', parameters.blendColorSrcFactor || 'one');
+    const colorDstFactor = convertBlendFactorToFunction('blendColorDstFactor', parameters.blendColorDstFactor || 'zero');
+    const alphaSrcFactor = convertBlendFactorToFunction('blendAlphaSrcFactor', parameters.blendAlphaSrcFactor || 'one');
+    const alphaDstFactor = convertBlendFactorToFunction('blendAlphaDstFactor', parameters.blendAlphaDstFactor || 'zero');
+    gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+  }
 }
 
 /*
@@ -286,16 +286,31 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-// function convertBlendOperationToEquation(parameter: string, value: string): number {
-//   return map(parameter, value, {
-//     'add': GL.FUNC_ADD,
-//     'sub': GL.FUNC_SUBTRACT,
-//     'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
-//     // When using a WebGL 2 context, the following values are available additionally:
-//     'min': GL.MIN,
-//     'max': GL.MAX
-//   });
-// }
+function convertBlendOperationToEquation(parameter: string, value: BlendOperation): GLBlendEquation {
+  return map(parameter, value, {
+    'add': GL.FUNC_ADD,
+    'subtract': GL.FUNC_SUBTRACT,
+    'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
+    // When using a WebGL 2 context, the following values are available additionally:
+    'min': GL.MIN,
+    'max': GL.MAX
+  } as Record<BlendOperation, GLBlendEquation>);
+}
+
+function convertBlendFactorToFunction(parameter: string, value: BlendFactor): GLBlendFunction {
+  return map(parameter, value, {
+    'one': GL.ONE,
+    'zero': GL.ZERO,
+    'src-color': GL.SRC_COLOR,
+    'one-minus-src-color': GL.ONE_MINUS_SRC_COLOR,
+    'dst-color': GL.DST_COLOR,
+    'one-minus-dst-color': GL.ONE_MINUS_DST_COLOR,
+    'src-alpha': GL.SRC_ALPHA,
+    'one-minus-src-alpha': GL.ONE_MINUS_SRC_ALPHA,
+    'dst-alpha': GL.DST_ALPHA,
+    'one-minus-dst-alpha': GL.ONE_MINUS_DST_ALPHA,
+  } as Record<BlendFactor, GLBlendFunction>);
+}
 
 function message(parameter: string, value: any): string {
   return `Illegal parameter ${value} for ${parameter}`;

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

@@ -7,29 +7,45 @@ import {isWebGL2} from '../../context/context/webgl-checks';
 
 /** @returns strings identifying the GPU vendor and driver. */
 export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
+  // "Masked" info is always available, but don't contain much useful information
   const vendorMasked = gl.getParameter(GL.VENDOR);
   const rendererMasked = gl.getParameter(GL.RENDERER);
-  // Get unmasked strings if available
+
+  // If we are lucky, unmasked info is available
   // https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/
   const ext = gl.getExtension('WEBGL_debug_renderer_info');
   const vendorUnmasked = gl.getParameter(ext ? ext.UNMASKED_VENDOR_WEBGL : GL.VENDOR);
   const rendererUnmasked = gl.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : GL.RENDERER);
   const vendor = vendorUnmasked || vendorMasked;
   const renderer = rendererUnmasked || rendererMasked;
+
+  // Driver version
+  const version = gl.getParameter(GL.VERSION) as string;
+
+  // "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);
+
+  // Determine GLSL version
+  // For now, skip parsing of the long version string, just use context type below to deduce version
+  // const version = gl.getParameter(GL.SHADING_LANGUAGE_VERSION) as string;
+  // const shadingLanguageVersion = parseGLSLVersion(version);
+  const shadingLanguage = 'glsl';
+  const shadingLanguageVersion = isWebGL2(gl) ? 300 : 100
+
   return {
     type: isWebGL2(gl) ? 'webgl2' : 'webgl',
     gpu,
-    vendor: vendorUnmasked || vendorMasked,
-    renderer: rendererUnmasked || rendererMasked,
-    version: gl.getParameter(GL.VERSION),
-    shadingLanguages: ['glsl'],
-    shadingLanguageVersions: {
-      'glsl': gl.getParameter(GL.SHADING_LANGUAGE_VERSION) as string
-    }
+    gpuBackend,
+    vendor,
+    renderer,
+    version,
+    shadingLanguage,
+    shadingLanguageVersion
   };
 }
 
+/** "Sniff" the GPU type from the info. This works best if unmasked info is available. */
 function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'software' | 'unknown' {
   if ((/NVIDIA/i.exec(vendor)) || (/NVIDIA/i.exec(renderer))) {
     return 'nvidia';
@@ -54,3 +70,15 @@ function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel'
   
   return 'unknown';
 }
+
+/** "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';
+  }
+  if ((/Metal/i.exec(vendor)) || (/Metal/i.exec(renderer))) {
+    return 'metal';
+  }
+  
+  return 'unknown';
+}

package/src/adapter/helpers/parse-shader-compiler-log.ts

@@ -3,8 +3,6 @@
 
 import type {CompilerMessage} from '@luma.gl/core';
 
-const MESSAGE_TYPES = ['warning', 'error', 'info'];
-
 /**
  * Parse a WebGL-format GLSL compilation log into an array of WebGPU style message records.
  * This follows documented WebGL conventions for compilation logs.
@@ -22,6 +20,19 @@ export function parseShaderCompilerLog(errLog: string) : readonly CompilerMessag
     }
 
     const segments: string[] = line.split(':');
+
+    // Check for messages with no line information `ERROR: unsupported shader version`
+    if (segments.length === 2) {
+      const [messageType, message] = segments;
+      messages.push({
+        message: message.trim(),
+        type: getMessageType(messageType),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue; // eslint-disable-line no-continue  
+    }
+
     const [messageType, linePosition, lineNumber, ...rest] = segments;
 
     let lineNum = parseInt(lineNumber, 10);
@@ -34,13 +45,9 @@ export function parseShaderCompilerLog(errLog: string) : readonly CompilerMessag
       linePos = 0;
     }
 
-    // Ensure supported type
-    const lowerCaseType = messageType.toLowerCase();
-    const type = (MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : 'info') as 'warning' | 'error' | 'info';
-
     messages.push({
       message: rest.join(':').trim(),
-      type,
+      type: getMessageType(messageType),
       lineNum,
       linePos // TODO
     })
@@ -48,3 +55,10 @@ export function parseShaderCompilerLog(errLog: string) : readonly CompilerMessag
 
   return messages;
 }
+
+/** Ensure supported type */
+function getMessageType(messageType: string): 'warning' | 'error' | 'info' {    
+  const MESSAGE_TYPES = ['warning', 'error', 'info'];
+  const lowerCaseType = messageType.toLowerCase();
+  return (MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : 'info') as 'warning' | 'error' | 'info';
+}

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

@@ -1,17 +1,10 @@
 import type {PrimitiveTopology, ShaderLayout, TransformFeedbackProps} from '@luma.gl/core';
-import {log, TransformFeedback, Buffer} from '@luma.gl/core';
+import {log, TransformFeedback, Buffer, BufferRange} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from '../..';
 import {getGLPrimitive} from '../helpers/webgl-topology-utils';
 
-/** For bindRange */
-type BufferRange = {
-  buffer: Buffer;
-  byteOffset?: number;
-  byteLength?: number;
-};
-
 export class WEBGLTransformFeedback extends TransformFeedback {
   readonly device: WebGLDevice;
   readonly gl2: WebGL2RenderingContext;
@@ -72,7 +65,7 @@ export class WEBGLTransformFeedback extends TransformFeedback {
 
   // SUBCLASS
 
-  setBuffers(buffers: Record<string, Buffer | BufferRange>) {
+  setBuffers(buffers: Record<string, Buffer | BufferRange>): void {
     this.buffers = {};
     this.unusedBuffers = {};
 
@@ -81,17 +74,16 @@ export class WEBGLTransformFeedback extends TransformFeedback {
         this.setBuffer(bufferName, buffers[bufferName]);
       }
     });
-    return this;
   }
 
-  setBuffer(locationOrName: string | number, bufferOrRange: Buffer | BufferRange) {
+  setBuffer(locationOrName: string | number, bufferOrRange: Buffer | BufferRange): void {
     const location = this._getVaryingIndex(locationOrName);
     const {buffer, byteLength, byteOffset} = this._getBufferRange(bufferOrRange);
 
     if (location < 0) {
       this.unusedBuffers[locationOrName] = buffer;
       log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
-      return this;
+      return;
     }
 
     this.buffers[location] = {buffer, byteLength, byteOffset};
@@ -101,8 +93,14 @@ export class WEBGLTransformFeedback extends TransformFeedback {
     if (!this.bindOnUse) {
       this._bindBuffer(location, buffer, byteOffset, byteLength);
     }
+  }
 
-    return this;
+  getBuffer(locationOrName: string | number): Buffer | BufferRange | null {
+    if (isIndex(locationOrName)) {
+      return this.buffers[locationOrName] || null;
+    }
+    const location = this._getVaryingIndex(locationOrName);
+    return location >= 0 ? this.buffers[location] : null;
   }
 
   bind(funcOrHandle = this.handle) {
@@ -146,7 +144,7 @@ export class WEBGLTransformFeedback extends TransformFeedback {
     return {buffer, byteOffset, byteLength};
   }
 
-  protected _getVaryingIndex(locationOrName: string | number) {
+  protected _getVaryingIndex(locationOrName: string | number): number {
     if (isIndex(locationOrName)) {
       return Number(locationOrName);
     }
@@ -182,14 +180,13 @@ export class WEBGLTransformFeedback extends TransformFeedback {
     buffer: Buffer,
     byteOffset = 0,
     byteLength?: number
-  ): this {
+  ): void {
     const handle = buffer && (buffer as WEBGLBuffer).handle;
     if (!handle || byteLength === undefined) {
       this.gl2.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle);
     } else {
       this.gl2.bindBufferRange(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle, byteOffset, byteLength);
     }
-    return this;
   }
 }
 

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

@@ -54,14 +54,15 @@ export class WEBGLVertexArray extends VertexArray {
   }
 
   /**
-  // Set (bind) an elements buffer, for indexed rendering.
-  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
+  // Set (bind/unbind) an elements buffer, for indexed rendering.
+  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER or null. Constants not supported
    * 
    * @param elementBuffer 
    */
   setIndexBuffer(indexBuffer: Buffer | null): void {
     const buffer = indexBuffer as WEBGLBuffer;
-    if (buffer?.glTarget !== GL.ELEMENT_ARRAY_BUFFER) {
+    // Explicitly allow `null` to support clearing the index buffer
+    if (buffer && buffer.glTarget !== GL.ELEMENT_ARRAY_BUFFER) {
       throw new Error('Use .setBuffer()');
     }
     // In WebGL The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject

package/src/adapter/webgl-device.ts

@@ -582,8 +582,9 @@ function setConstantUintArray(device: WebGLDevice, location: number, array: Uint
   // }
 }
 
-/**
- *
+/** 
+ * Compares contents of two typed arrays 
+ * @todo max length?
  */
 function compareConstantArrayValues(v1: TypedArray, v2: TypedArray): boolean {
   if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {

package/src/classic/typed-array-utils.ts

@@ -9,6 +9,7 @@ const ERR_TYPE_DEDUCTION = 'Failed to deduce GL constant from typed array';
 /**
  * Converts TYPED ARRAYS to corresponding GL constant
  * Used to auto deduce gl parameter types
+ * @deprecated Use getDataTypeFromTypedArray
  * @param arrayOrType
  * @returns
  */
@@ -40,6 +41,7 @@ export function getGLTypeFromTypedArray(arrayOrType: TypedArray): GLDataType {
 /**
  * Converts GL constant to corresponding TYPED ARRAY
  * Used to auto deduce gl parameter types
+ * @deprecated Use getTypedArrayFromDataType
  * @param glType
  * @param param1
  * @returns