@luma.gl/webgpu 9.1.9 → 9.2.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgpu",
-  "version": "9.1.9",
+  "version": "9.2.0-alpha.2",
   "description": "WebGPU adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -37,11 +37,11 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "^9.1.0"
+    "@luma.gl/core": "9.2.0-alpha.1"
   },
   "dependencies": {
     "@probe.gl/env": "^4.0.8",
     "@webgpu/types": "^0.1.34"
   },
-  "gitHead": "2d0d93f337120d670e03bd2d5141d90d0d582b44"
+  "gitHead": "dc1e71675ea19a4afbb59d3b9dcd3b01deea3cae"
 }

package/src/adapter/helpers/get-bind-group.ts

@@ -34,22 +34,30 @@ export function getBindGroup(
   bindings: Record<string, Binding>
 ): GPUBindGroup {
   const entries = getBindGroupEntries(bindings, shaderLayout);
-  return device.createBindGroup({
+  device.pushErrorScope('validation');
+  const bindGroup = device.createBindGroup({
     layout: bindGroupLayout,
     entries
   });
+  device.popErrorScope().then((error: GPUError | null) => {
+    if (error) {
+      log.error(`bindGroup creation: ${error.message}`, bindGroup)();
+    }
+  });
+  return bindGroup;
 }
 
 export function getShaderLayoutBinding(
   shaderLayout: ComputeShaderLayout,
-  bindingName: string
+  bindingName: string,
+  options?: {ignoreWarnings?: boolean}
 ): BindingDeclaration | null {
   const bindingLayout = shaderLayout.bindings.find(
     binding =>
       binding.name === bindingName ||
       `${binding.name.toLocaleLowerCase()}uniforms` === bindingName.toLocaleLowerCase()
   );
-  if (!bindingLayout) {
+  if (!bindingLayout && !options?.ignoreWarnings) {
     log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }
   return bindingLayout || null;
@@ -68,13 +76,23 @@ function getBindGroupEntries(
   for (const [bindingName, value] of Object.entries(bindings)) {
     let bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
     if (bindingLayout) {
-      entries.push(getBindGroupEntry(value, bindingLayout.location));
+      const entry = getBindGroupEntry(value, bindingLayout.location);
+      if (entry) {
+        entries.push(entry);
+      }
     }
 
     // TODO - hack to automatically bind samplers to supplied texture default samplers
-    bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`);
-    if (bindingLayout) {
-      entries.push(getBindGroupEntry(value, bindingLayout.location, {sampler: true}));
+    if (value instanceof Texture) {
+      bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
+        ignoreWarnings: true
+      });
+      if (bindingLayout) {
+        const entry = getBindGroupEntry(value, bindingLayout.location, {sampler: true});
+        if (entry) {
+          entries.push(entry);
+        }
+      }
     }
   }
 
@@ -85,7 +103,7 @@ function getBindGroupEntry(
   binding: Binding,
   index: number,
   options?: {sampler?: boolean}
-): GPUBindGroupEntry {
+): GPUBindGroupEntry | null {
   if (binding instanceof Buffer) {
     return {
       binding: index,
@@ -99,7 +117,8 @@ function getBindGroupEntry(
       binding: index,
       resource: (binding as WebGPUSampler).handle
     };
-  } else if (binding instanceof Texture) {
+  }
+  if (binding instanceof Texture) {
     if (options?.sampler) {
       return {
         binding: index,
@@ -108,8 +127,9 @@ function getBindGroupEntry(
     }
     return {
       binding: index,
-      resource: (binding as WebGPUTexture).handle.createView({label: 'bind-group-auto-created'})
+      resource: (binding as WebGPUTexture).view.handle
     };
   }
-  throw new Error('invalid binding');
+  log.warn(`invalid binding ${name}`, binding);
+  return null;
 }

package/src/adapter/helpers/get-vertex-buffer-layout.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {ShaderLayout, BufferLayout, AttributeDeclaration, VertexFormat} from '@luma.gl/core';
-import {log, decodeVertexFormat} from '@luma.gl/core';
+import {log, getVertexFormatInfo} from '@luma.gl/core';
 // import {getAttributeInfosFromLayouts} from '@luma.gl/core';
 
 /** Throw error on any WebGL-only vertex formats */
@@ -59,7 +59,7 @@ export function getVertexBufferLayout(
           shaderLocation: location
         });
 
-        byteStride += decodeVertexFormat(format).byteLength;
+        byteStride += getVertexFormatInfo(format).byteLength;
       }
       // non-interleaved mapping (just set offset and stride)
     } else {
@@ -67,7 +67,7 @@ export function getVertexBufferLayout(
       if (!attributeLayout) {
         continue; // eslint-disable-line no-continue
       }
-      byteStride = decodeVertexFormat(format).byteLength;
+      byteStride = getVertexFormatInfo(format).byteLength;
 
       stepMode =
         attributeLayout.stepMode ||
@@ -92,7 +92,7 @@ export function getVertexBufferLayout(
   for (const attribute of shaderLayout.attributes) {
     if (!usedAttributes.has(attribute.name)) {
       vertexBufferLayouts.push({
-        arrayStride: decodeVertexFormat('float32x3').byteLength,
+        arrayStride: getVertexFormatInfo('float32x3').byteLength,
         stepMode:
           attribute.stepMode || (attribute.name.startsWith('instance') ? 'instance' : 'vertex'),
         attributes: [
@@ -163,7 +163,7 @@ function findAttributeLayout(
 ): AttributeDeclaration | null {
   const attribute = shaderLayout.attributes.find(attribute_ => attribute_.name === name);
   if (!attribute) {
-    log.warn(`Unknown attribute ${name}`)();
+    log.warn(`Supplied attribute not present in shader layout: ${name}`)();
     return null;
   }
   if (attributeNames) {

package/src/adapter/helpers/webgpu-parameters.ts

@@ -33,56 +33,45 @@ function addDepthStencilBack(descriptor: GPURenderPipelineDescriptor): GPUStenci
  * Supports for luma.gl's flat parameter space
  * Populates the corresponding sub-objects in a GPURenderPipelineDescriptor
  */
-// @ts-expect-error
 export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   // RASTERIZATION PARAMETERS
 
-  cullMode: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  cullMode: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.cullMode = value;
   },
 
-  frontFace: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  frontFace: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.frontFace = value;
   },
 
   // DEPTH
 
-  depthWriteEnabled: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
-    const depthStencil = addDepthStencil(descriptor);
-    depthStencil.depthWriteEnabled = value;
+  depthWriteEnabled: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    if (value) {
+      const depthStencil = addDepthStencil(descriptor);
+      depthStencil.depthWriteEnabled = value;
+    }
   },
 
-  depthCompare: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  depthCompare: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthCompare = value;
   },
 
-  depthFormat: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  depthFormat: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.format = value;
   },
 
-  depthBias: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthBias: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthBias = value;
   },
 
   depthBiasSlopeScale: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
@@ -90,40 +79,24 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
     depthStencil.depthBiasSlopeScale = value;
   },
 
-  depthBiasClamp: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  depthBiasClamp: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthBiasClamp = value;
   },
 
   // STENCIL
 
-  stencilReadMask: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  stencilReadMask: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilReadMask = value;
   },
 
-  stencilWriteMask: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  stencilWriteMask: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilWriteMask = value;
   },
 
-  stencilCompare: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  stencilCompare: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     const stencilFront = addDepthStencilFront(descriptor);
     const stencilBack = addDepthStencilBack(descriptor);
     stencilFront.compare = value;
@@ -131,7 +104,7 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   },
 
   stencilPassOperation: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
@@ -142,7 +115,7 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   },
 
   stencilFailOperation: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
@@ -153,7 +126,7 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   },
 
   stencilDepthFailOperation: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
@@ -165,26 +138,18 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
 
   // MULTISAMPLE
 
-  sampleCount: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  sampleCount: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     descriptor.multisample = descriptor.multisample || {};
     descriptor.multisample.count = value;
   },
 
-  sampleMask: (
-    parameter: keyof Parameters,
-    value: any,
-    descriptor: GPURenderPipelineDescriptor
-  ) => {
+  sampleMask: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     descriptor.multisample = descriptor.multisample || {};
     descriptor.multisample.mask = value;
   },
 
   sampleAlphaToCoverageEnabled: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
@@ -194,62 +159,98 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
 
   // COLOR
 
-  colorMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    const targets = addColorState(descriptor);
-    targets[0].writeMask = value;
+  colorMask: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    const target = addColorState(descriptor, 0);
+    target.writeMask = value;
+  },
+
+  blend: (_: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    if (value) {
+      addBlendState(descriptor, 0);
+    }
   },
 
   blendColorOperation: (
-    parameter: keyof Parameters,
+    _: keyof Parameters,
     value: any,
     descriptor: GPURenderPipelineDescriptor
   ) => {
-    addColorState(descriptor);
-    // const targets = addColorState(descriptor);
-    // const target = targets[0];
-    // const blend: GPUBlendState = target.blend || {color: {alpha: 0}};
-    // blend.color = blend.color || {};
-    // target.blend.color.operation = value;
-  }
+    const blend = addBlendState(descriptor, 0);
+    blend.color = blend.color || {};
+    blend.color.operation = value;
+  },
 
-  /*
-  blendColorSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.color = targets[0].blend.color || {};
-    targets[0].blend.color.srcTarget = value;
+  blendColorSrcFactor: (
+    _: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
+    const blend = addBlendState(descriptor, 0);
+    blend.color = blend.color || {};
+    blend.color.srcFactor = value;
   },
 
-  blendColorDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.color = targets[0].blend.color || {};
-    targets[0].blend.color.dstTarget = value;
+  blendColorDstFactor: (
+    _: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
+    const blend = addBlendState(descriptor, 0);
+    blend.color.dstFactor = value;
   },
 
-  blendAlphaOperation: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.alpha = targets[0].blend.alpha || {};
-    targets[0].blend.alpha.operation = value;
+  blendAlphaOperation: (
+    _: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
+    const blend = addBlendState(descriptor, 0);
+    blend.alpha = blend.alpha || {};
+    blend.alpha.operation = value;
   },
 
-  blendAlphaSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.alpha = targets[0].blend.alpha || {};
-    targets[0].blend.alpha.srcTarget = value;
+  blendAlphaSrcFactor: (
+    _: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
+    const blend = addBlendState(descriptor, 0);
+    blend.alpha = blend.alpha || {};
+    blend.alpha.srcFactor = value;
   },
 
-  blendAlphaDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.alpha = targets[0].blend.alpha || {};
-    targets[0].blend.alpha.dstTarget = value;
+  blendAlphaDstFactor: (
+    _: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
+    const blend = addBlendState(descriptor, 0);
+    blend.alpha = blend.alpha || {};
+    blend.alpha.dstFactor = value;
   },
-  */
+
+  unclippedDepth: notSupported,
+  provokingVertex: notSupported,
+  polygonMode: notSupported,
+  polygonOffsetLine: notSupported,
+  clipDistance0: notSupported,
+  clipDistance1: notSupported,
+  clipDistance2: notSupported,
+  clipDistance3: notSupported,
+  clipDistance4: notSupported,
+  clipDistance5: notSupported,
+  clipDistance6: notSupported,
+  clipDistance7: notSupported
 };
 
+function notSupported(
+  key: keyof Parameters,
+  value: any,
+  descriptor: GPURenderPipelineDescriptor
+): void {
+  log.warn(`${key} parameter not supported in WebGPU`)();
+}
+
 const DEFAULT_PIPELINE_DESCRIPTOR: GPURenderPipelineDescriptor = {
   // depthStencil: {
   //   stencilFront: {},
@@ -296,17 +297,21 @@ function setParameters(
 ): void {
   for (const [key, value] of Object.entries(parameters)) {
     const setterFunction = PARAMETER_TABLE[key as keyof Parameters];
-    if (!setterFunction) {
-      log.warn(`Illegal parameter ${key}`)();
-      continue;
+    if (setterFunction) {
+      setterFunction(key, value, pipelineDescriptor);
+    } else {
+      log.error(`Illegal parameter ${key} in WebGPU`)();
     }
-    setterFunction(key, value, pipelineDescriptor);
   }
 }
 
-function addColorState(descriptor: GPURenderPipelineDescriptor): GPUColorTargetState[] {
-  // @ts-ignore GPU types as iterator
-  descriptor.fragment.targets = descriptor.fragment?.targets || [];
+/** @todo - support multiple color targets... */
+function addColorState(
+  descriptor: GPURenderPipelineDescriptor,
+  attachment: number
+): GPUColorTargetState {
+  // @ts-ignore
+  descriptor.fragment.targets = descriptor.fragment?.targets || ([] as GPUColorTargetState[]);
   if (!Array.isArray(descriptor.fragment?.targets)) {
     log.warn('parameters: no targets array')();
   }
@@ -315,5 +320,12 @@ function addColorState(descriptor: GPURenderPipelineDescriptor): GPUColorTargetS
     // @ts-expect-error GPU types as iterator
     descriptor.fragment.targets?.push({});
   }
-  return descriptor.fragment?.targets as GPUColorTargetState[];
+  // @ts-expect-error GPU types as iterator
+  return descriptor.fragment?.targets?.[0] as GPUColorTargetState;
+}
+
+function addBlendState(descriptor: GPURenderPipelineDescriptor, attachment: number): GPUBlendState {
+  const target = addColorState(descriptor, attachment);
+  target.blend = target.blend || {color: {}, alpha: {}};
+  return target.blend;
 }