@luma.gl/webgpu - npm Package Compare versions

Comparing version 9.0.0-alpha.7 to 9.0.0-alpha.8

dist/adapter/helpers/webgpu-parameters.js

@@ -7,2 +7,3 @@ function addDepthStencil(descriptor) {
   };
+  return descriptor.depthStencil;
 }
@@ -12,58 +13,60 @@
   cullMode: (parameter, value, descriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.cullMode = value;
   },
   frontFace: (parameter, value, descriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.frontFace = value;
   },
   depthWriteEnabled: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthWriteEnabled = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthWriteEnabled = value;
   },
   depthCompare: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthCompare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthCompare = value;
   },
   depthFormat: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.format = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.format = value;
   },
   depthBias: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBias = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBias = value;
   },
   depthBiasSlopeScale: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasSlopeScale = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasSlopeScale = value;
   },
   depthBiasClamp: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasClamp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasClamp = value;
   },
   stencilReadMask: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilReadMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilReadMask = value;
   },
   stencilWriteMask: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilWriteMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilWriteMask = value;
   },
   stencilCompare: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.compare = value;
-    descriptor.depthStencil.stencilBack.compare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.compare = value;
+    depthStencil.stencilBack.compare = value;
   },
   stencilPassOperation: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.passOp = value;
-    descriptor.depthStencil.stencilBack.passOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.passOp = value;
+    depthStencil.stencilBack.passOp = value;
   },
   stencilFailOperation: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.failOp = value;
-    descriptor.depthStencil.stencilBack.failOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.failOp = value;
+    depthStencil.stencilBack.failOp = value;
   },
   stencilDepthFailOperation: (parameter, value, descriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.depthFailOp = value;
-    descriptor.depthStencil.stencilBack.depthFailOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.depthFailOp = value;
+    depthStencil.stencilBack.depthFailOp = value;
   },
@@ -83,12 +86,8 @@ sampleCount: (parameter, value, descriptor) => {
   colorMask: (parameter, value, descriptor) => {
-    addColorState(descriptor);
-    const targets = descriptor.fragment.targets;
+    const targets = addColorState(descriptor);
     targets[0].writeMask = value;
   },
   blendColorOperation: (parameter, value, descriptor) => {
-    addColorState(descriptor);
-    const targets = descriptor.fragment.targets;
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.color = targets[0].blend.color || {};
-    targets[0].blend.color.operation = value;
+    const targets = addColorState(descriptor);
+    const target = targets[0];
   }
@@ -131,8 +130,18 @@ };
 function addColorState(descriptor) {
-  descriptor.fragment.targets = descriptor.fragment.targets || [];
+  var _descriptor$fragment, _descriptor$fragment2, _descriptor$fragment3, _descriptor$fragment4, _descriptor$fragment5;
 
-  if (descriptor.fragment.targets.length === 0) {
-    descriptor.fragment.targets.push({});
+  descriptor.fragment.targets = ((_descriptor$fragment = descriptor.fragment) === null || _descriptor$fragment === void 0 ? void 0 : _descriptor$fragment.targets) || [];
+
+  if (!Array.isArray((_descriptor$fragment2 = descriptor.fragment) === null || _descriptor$fragment2 === void 0 ? void 0 : _descriptor$fragment2.targets)) {
+    throw new Error('colorstate');
   }
+
+  if (((_descriptor$fragment3 = descriptor.fragment) === null || _descriptor$fragment3 === void 0 ? void 0 : (_descriptor$fragment4 = _descriptor$fragment3.targets) === null || _descriptor$fragment4 === void 0 ? void 0 : _descriptor$fragment4.length) === 0) {
+    var _descriptor$fragment$;
+
+    (_descriptor$fragment$ = descriptor.fragment.targets) === null || _descriptor$fragment$ === void 0 ? void 0 : _descriptor$fragment$.push({});
+  }
+
+  return (_descriptor$fragment5 = descriptor.fragment) === null || _descriptor$fragment5 === void 0 ? void 0 : _descriptor$fragment5.targets;
 }
 //# sourceMappingURL=webgpu-parameters.js.map

dist/adapter/resources/webgpu-buffer.d.ts

@@ -9,3 +9,2 @@ /// <reference types="@webgpu/types" />
     constructor(device: WebGPUDevice, props: BufferProps);
-    protected createHandle(mapBuffer: boolean): GPUBuffer;
     destroy(): void;
@@ -12,0 +11,0 @@ write(data: ArrayBufferView, byteOffset?: number): void;

dist/adapter/resources/webgpu-buffer.js

@@ -39,6 +39,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-  createHandle(mapBuffer) {
-    return;
-  }
-
   destroy() {
@@ -45,0 +41,0 @@ this.handle.destroy();

dist/adapter/resources/webgpu-command-encoder.d.ts

@@ -8,3 +8,2 @@ /// <reference types="@webgpu/types" />
     constructor(device: WebGPUDevice, props: CommandEncoderProps);
-    protected createHandle(): GPUCommandEncoder;
     destroy(): void;
@@ -11,0 +10,0 @@ finish(options?: {

dist/adapter/resources/webgpu-command-encoder.js

@@ -12,10 +12,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     this.device = device;
-    this.handle = this.handle || this.createHandle();
-    this.handle.label = this.props.id;
-  }
-
-  createHandle() {
-    return this.device.handle.createCommandEncoder({
+    this.handle = props.handle || this.device.handle.createCommandEncoder({
       measureExecutionTime: this.props.measureExecutionTime
     });
+    this.handle.label = this.props.id;
   }
@@ -47,3 +43,7 @@
       origin: (_options$origin = options.origin) !== null && _options$origin !== void 0 ? _options$origin : {}
-    }, options.extent);
+    }, {
+      width: options.extent[0],
+      height: options.extent[1],
+      depthOrArrayLayers: options.extent[2]
+    });
   }
@@ -50,0 +50,0 @@

dist/adapter/resources/webgpu-compute-pass.d.ts

@@ -7,3 +7,3 @@ /// <reference types="@webgpu/types" />
     readonly handle: GPUComputePassEncoder;
-    _bindGroupLayout: GPUBindGroupLayout;
+    _bindGroupLayout: GPUBindGroupLayout | null;
     constructor(device: WebGPUDevice, props: ComputePassProps);
@@ -10,0 +10,0 @@ /** @note no WebGPU destroy method, just gc */

dist/adapter/resources/webgpu-compute-pass.js

@@ -5,2 +5,4 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   constructor(device, props) {
+    var _device$commandEncode;
+
     super(device, props);
@@ -12,8 +14,8 @@
 
-    _defineProperty(this, "_bindGroupLayout", void 0);
+    _defineProperty(this, "_bindGroupLayout", null);
 
     this.device = device;
-    this.handle = this.props.handle || device.commandEncoder.beginComputePass({
+    this.handle = this.props.handle || ((_device$commandEncode = device.commandEncoder) === null || _device$commandEncode === void 0 ? void 0 : _device$commandEncode.beginComputePass({
       label: this.props.id
-    });
+    }));
   }
@@ -20,0 +22,0 @@

dist/adapter/resources/webgpu-framebuffer.d.ts

@@ -13,3 +13,3 @@ /// <reference types="@webgpu/types" />
     colorAttachments: WebGPUTexture[];
-    depthStencilAttachment: WebGPUTexture;
+    depthStencilAttachment: WebGPUTexture | null;
     /** Partial render pass descriptor. Used by WebGPURenderPass */
@@ -16,0 +16,0 @@ renderPassDescriptor: {

dist/adapter/resources/webgpu-framebuffer.js

@@ -13,3 +13,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-    _defineProperty(this, "depthStencilAttachment", void 0);
+    _defineProperty(this, "depthStencilAttachment", null);
 
@@ -16,0 +16,0 @@ _defineProperty(this, "renderPassDescriptor", {

dist/adapter/resources/webgpu-render-pass.js

@@ -32,4 +32,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   setBindings(bindings) {
-    this.pipeline.setBindings(bindings);
-    this.handle.setBindGroup(0, this.pipeline._getBindGroup());
+    var _this$pipeline, _this$pipeline2;
+
+    (_this$pipeline = this.pipeline) === null || _this$pipeline === void 0 ? void 0 : _this$pipeline.setBindings(bindings);
+    const bindGroup = (_this$pipeline2 = this.pipeline) === null || _this$pipeline2 === void 0 ? void 0 : _this$pipeline2._getBindGroup();
+
+    if (bindGroup) {
+      this.handle.setBindGroup(0, bindGroup);
+    }
   }
@@ -49,3 +55,3 @@
     } else {
-      this.handle.draw(options.vertexCount, options.instanceCount, options.firstIndex, options.firstInstance);
+      this.handle.draw(options.vertexCount || 0, options.instanceCount, options.firstIndex, options.firstInstance);
     }
@@ -52,0 +58,0 @@ }

dist/adapter/resources/webgpu-render-pipeline.js

@@ -23,3 +23,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-    _defineProperty(this, "_indexBuffer", void 0);
+    _defineProperty(this, "_indexBuffer", null);
 
@@ -98,2 +98,4 @@ _defineProperty(this, "_bindGroupLayout", void 0);
     if (this.props.fs) {
+      var _this$device, _this$device$canvasCo;
+
       fragment = {
@@ -103,3 +105,3 @@ module: cast(this.props.fs).handle,
         targets: [{
-          format: getWebGPUTextureFormat(this.device.canvasContext.format)
+          format: getWebGPUTextureFormat((_this$device = this.device) === null || _this$device === void 0 ? void 0 : (_this$device$canvasCo = _this$device.canvasContext) === null || _this$device$canvasCo === void 0 ? void 0 : _this$device$canvasCo.format)
         }]
@@ -109,2 +111,10 @@ };
 
+    switch (this.props.topology) {
+      case 'triangle-fan':
+      case 'line-loop':
+        throw new Error("WebGPU does not support primitive topology ".concat(this.props.topology));
+
+      default:
+    }
+
     let descriptor = {
@@ -134,3 +144,3 @@ vertex,
     } else {
-      webgpuRenderPass.handle.draw(options.vertexCount, options.instanceCount, options.firstIndex, options.firstInstance);
+      webgpuRenderPass.handle.draw(options.vertexCount || 0, options.instanceCount, options.firstIndex, options.firstInstance);
     }
@@ -137,0 +147,0 @@ }

dist/adapter/resources/webgpu-texture.js

@@ -23,3 +23,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-    _defineProperty(this, "sampler", void 0);
+    _defineProperty(this, "sampler", null);
 
@@ -39,3 +39,3 @@ if (typeof this.props.format === 'number') {
 
-    this.setSampler(props.sampler);
+    this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
     this.view = this.handle.createView({});
@@ -42,0 +42,0 @@ }

dist/adapter/webgpu-canvas-context.js

@@ -23,3 +23,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-    _defineProperty(this, "depthStencilAttachment", void 0);
+    _defineProperty(this, "depthStencilAttachment", null);
 
@@ -63,3 +63,3 @@ this.device = device;
         this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = undefined;
+        this.depthStencilAttachment = null;
       }
@@ -66,0 +66,0 @@

dist/adapter/webgpu-device.d.ts

@@ -23,5 +23,5 @@ /// <reference types="@webgpu/types" />
     }>;
-    canvasContext: WebGPUCanvasContext | undefined;
-    commandEncoder: GPUCommandEncoder;
-    renderPass: WebGPURenderPass;
+    canvasContext: WebGPUCanvasContext | null;
+    commandEncoder: GPUCommandEncoder | null;
+    renderPass: WebGPURenderPass | null;
     private _info;
@@ -56,5 +56,5 @@ private _isLost;
      */
-    beginRenderPass(props?: RenderPassProps): WebGPURenderPass;
-    beginComputePass(props?: ComputePassProps): WebGPUComputePass;
-    createCanvasContext(props?: CanvasContextProps): WebGPUCanvasContext;
+    beginRenderPass(props: RenderPassProps): WebGPURenderPass;
+    beginComputePass(props: ComputePassProps): WebGPUComputePass;
+    createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext;
     /**
@@ -61,0 +61,0 @@ * Gets default renderpass encoder.

dist/adapter/webgpu-device.js

@@ -25,17 +25,22 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: "high-performance"
+      powerPreference: 'high-performance'
     });
-    log.probe(1, "Adapter available")();
+
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
+
+    log.probe(1, 'Adapter available')();
     const gpuDevice = await adapter.requestDevice({
       requiredFeatures: adapter.features
     });
-    log.probe(1, "GPUDevice available")();
+    log.probe(1, 'GPUDevice available')();
 
     if (typeof props.canvas === 'string') {
       await CanvasContext.pageLoaded;
-      log.probe(1, "DOM is loaded")();
+      log.probe(1, 'DOM is loaded')();
     }
 
     const device = new WebGPUDevice(gpuDevice, adapter, props);
-    log.probe(1, "Device created", device.info)();
+    log.probe(1, 'Device created', device.info)();
     log.table(1, device.info)();
@@ -55,7 +60,7 @@ log.groupEnd(1)();
 
-    _defineProperty(this, "canvasContext", void 0);
+    _defineProperty(this, "canvasContext", null);
 
-    _defineProperty(this, "commandEncoder", void 0);
+    _defineProperty(this, "commandEncoder", null);
 
-    _defineProperty(this, "renderPass", void 0);
+    _defineProperty(this, "renderPass", null);
 
@@ -84,5 +89,9 @@ _defineProperty(this, "_info", void 0);
     };
-    this.lost = this.handle.lost;
-    this.lost.then(_ => {
+    this.lost = new Promise(async resolve => {
+      const lostInfo = await this.handle.lost;
       this._isLost = true;
+      resolve({
+        reason: 'destroyed',
+        message: lostInfo.message
+      });
     });
@@ -174,4 +183,6 @@
   getDefaultRenderPass() {
+    var _this$canvasContext;
+
     this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: this.canvasContext.getCurrentFramebuffer()
+      framebuffer: (_this$canvasContext = this.canvasContext) === null || _this$canvasContext === void 0 ? void 0 : _this$canvasContext.getCurrentFramebuffer()
     });
@@ -182,5 +193,11 @@ return this.renderPass;
   submit() {
-    this.renderPass.endPass();
-    const commandBuffer = this.commandEncoder.finish();
-    this.handle.queue.submit([commandBuffer]);
+    var _this$renderPass, _this$commandEncoder;
+
+    (_this$renderPass = this.renderPass) === null || _this$renderPass === void 0 ? void 0 : _this$renderPass.endPass();
+    const commandBuffer = (_this$commandEncoder = this.commandEncoder) === null || _this$commandEncoder === void 0 ? void 0 : _this$commandEncoder.finish();
+
+    if (commandBuffer) {
+      this.handle.queue.submit([commandBuffer]);
+    }
+
     this.commandEncoder = null;
@@ -187,0 +204,0 @@ this.renderPass = null;

package.json

 {
   "name": "@luma.gl/webgpu",
-  "version": "9.0.0-alpha.7",
+  "version": "9.0.0-alpha.8",
   "description": "WebGPU adapter for the luma.gl API",
@@ -31,7 +31,7 @@ "license": "MIT",
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.7",
+    "@luma.gl/api": "9.0.0-alpha.8",
     "@webgpu/types": "^0.1.9",
     "probe.gl": "^3.2.1"
   },
-  "gitHead": "c1fbf71bb1311dcdc54338d82d299f8ed0d73346"
+  "gitHead": "9f5c5cca812c45ccf35e03b0491fd7243c5f2a6d"
 }

src/adapter/helpers/webgpu-parameters.ts

 import {Parameters} from '@luma.gl/api';
 
-function addDepthStencil(descriptor: GPURenderPipelineDescriptor): void {
+function addDepthStencil(descriptor: GPURenderPipelineDescriptor): GPUDepthStencilState {
   descriptor.depthStencil = descriptor.depthStencil || {
@@ -10,2 +10,3 @@ // required, set something
   };
+  return descriptor.depthStencil;
 }
@@ -22,2 +23,3 @@
   cullMode: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.cullMode = value;
@@ -27,2 +29,3 @@ },
   frontFace: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.frontFace = value;
@@ -34,29 +37,29 @@ },
   depthWriteEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthWriteEnabled = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthWriteEnabled = value;
   },
 
   depthCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthCompare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthCompare = value;
   },
 
   depthFormat: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.format = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.format = value;
   },
 
   depthBias: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBias = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBias = value;
   },
 
   depthBiasSlopeScale: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasSlopeScale = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasSlopeScale = value;
   },
 
   depthBiasClamp: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasClamp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasClamp = value;
   },
@@ -67,33 +70,33 @@
   stencilReadMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilReadMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilReadMask = value;
   },
 
   stencilWriteMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilWriteMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilWriteMask = value;
   },
 
   stencilCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.compare = value;
-    descriptor.depthStencil.stencilBack.compare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront!.compare = value;
+    depthStencil.stencilBack!.compare = value;
   },
 
   stencilPassOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.passOp = value;
-    descriptor.depthStencil.stencilBack.passOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront!.passOp = value;
+    depthStencil.stencilBack!.passOp = value;
   },
 
   stencilFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.failOp = value;
-    descriptor.depthStencil.stencilBack.failOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront!.failOp = value;
+    depthStencil.stencilBack!.failOp = value;
   },
 
   stencilDepthFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.depthFailOp = value;
-    descriptor.depthStencil.stencilBack.depthFailOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront!.depthFailOp = value;
+    depthStencil.stencilBack!.depthFailOp = value;
   },
@@ -121,4 +124,3 @@
   colorMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    const targets = descriptor.fragment.targets as GPUColorTargetState[];
+    const targets = addColorState(descriptor);
     targets[0].writeMask = value;
@@ -128,8 +130,7 @@ },
   blendColorOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    const targets = descriptor.fragment.targets as GPUColorTargetState[];
-    // @ts-expect-error
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.color = targets[0].blend.color || {};
-    targets[0].blend.color.operation = value;
+    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;
   }
@@ -190,3 +191,3 @@
   vertex: {
-    module: undefined,
+    module: undefined!,
     entryPoint: 'main'
@@ -196,3 +197,3 @@ },
   fragment: {
-    module: undefined,
+    module: undefined!,
     entryPoint: 'main',
@@ -228,9 +229,11 @@ targets: [
 
-function addColorState(descriptor: GPURenderPipelineDescriptor): void {
-  descriptor.fragment.targets = descriptor.fragment.targets || [];
-  // @ts-expect-error
-  if (descriptor.fragment.targets.length === 0) {
-    // @ts-expect-error
-    descriptor.fragment.targets.push({});
+function addColorState(descriptor: GPURenderPipelineDescriptor): GPUColorTargetState[] {
+  descriptor.fragment!.targets = descriptor.fragment?.targets || [];
+  if (!Array.isArray(descriptor.fragment?.targets)) {
+    throw new Error('colorstate');
   }
+  if (descriptor.fragment?.targets?.length === 0) {
+    descriptor.fragment.targets?.push({});
+  }
+  return descriptor.fragment?.targets as GPUColorTargetState[];
 }

src/adapter/resources/webgpu-buffer.ts

@@ -39,6 +39,2 @@ // WEBGPU Buffer implementation
 
-  protected createHandle(mapBuffer: boolean): GPUBuffer {
-    return
-  }
-
   destroy(): void {
@@ -45,0 +41,0 @@ this.handle.destroy();

src/adapter/resources/webgpu-command-encoder.ts

@@ -13,10 +13,6 @@ import {CommandEncoder, CommandEncoderProps, RenderPipeline, Buffer, Texture, cast} from '@luma.gl/api';
     this.device = device;
-    this.handle = this.handle || this.createHandle();
-    this.handle.label = this.props.id;
-  }
-
-  protected createHandle(): GPUCommandEncoder {
-    return this.device.handle.createCommandEncoder({
+    this.handle = props.handle || this.device.handle.createCommandEncoder({
       measureExecutionTime: this.props.measureExecutionTime
     });
+    this.handle.label = this.props.id;
   }
@@ -75,3 +71,8 @@
       },
-      options.extent // default depth?
+      {
+        // TODO exclamation mark hack
+        width: options.extent![0],
+        height: options.extent![1],
+        depthOrArrayLayers: options.extent![2]
+      }
     );
@@ -78,0 +79,0 @@ }

src/adapter/resources/webgpu-compute-pass.ts

@@ -10,3 +10,3 @@ import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding, cast} from '@luma.gl/api';
   readonly handle: GPUComputePassEncoder;
-  _bindGroupLayout: GPUBindGroupLayout;
+  _bindGroupLayout: GPUBindGroupLayout | null = null;
 
@@ -17,3 +17,3 @@ constructor(device: WebGPUDevice, props: ComputePassProps) {
 
-    this.handle = this.props.handle || device.commandEncoder.beginComputePass({
+    this.handle = this.props.handle || device.commandEncoder?.beginComputePass({
       label: this.props.id,
@@ -20,0 +20,0 @@ // timestampWrites?: GPUComputePassTimestampWrites;

src/adapter/resources/webgpu-framebuffer.ts

@@ -20,3 +20,3 @@ import type {FramebufferProps, ColorTextureFormat} from '@luma.gl/api';
   colorAttachments: WebGPUTexture[] = [];
-  depthStencilAttachment: WebGPUTexture;
+  depthStencilAttachment: WebGPUTexture | null = null;
 
@@ -23,0 +23,0 @@ /** Partial render pass descriptor. Used by WebGPURenderPass */

src/adapter/resources/webgpu-render-pass.ts

@@ -38,4 +38,7 @@ import type {RenderPassProps, RenderPassParameters, Binding} from '@luma.gl/api';
   setBindings(bindings: Record<string, Binding>): void {
-    this.pipeline.setBindings(bindings);
-    this.handle.setBindGroup(0, this.pipeline._getBindGroup());
+    this.pipeline?.setBindings(bindings);
+    const bindGroup = this.pipeline?._getBindGroup();
+    if (bindGroup) {
+      this.handle.setBindGroup(0, bindGroup);
+    }
   }
@@ -75,3 +78,3 @@
       this.handle.draw(
-        options.vertexCount,
+        options.vertexCount || 0,
         options.instanceCount,
@@ -78,0 +81,0 @@ options.firstIndex,

src/adapter/resources/webgpu-render-pipeline.ts

@@ -28,3 +28,3 @@ import type {Binding, RenderPass, Shader} from '@luma.gl/api';
   private _buffers: Buffer[];
-  private _indexBuffer: WebGPUBuffer;
+  private _indexBuffer: WebGPUBuffer | null = null;
   // private _firstIndex: number;
@@ -35,3 +35,3 @@ // private _lastIndex: number;
   private _bindGroupLayout: GPUBindGroupLayout;
-  private _bindGroup: GPUBindGroup = null;
+  private _bindGroup: GPUBindGroup | null = null;
 
@@ -135,3 +135,4 @@ constructor(device: WebGPUDevice, props: RenderPipelineProps) {
           {
-            format: getWebGPUTextureFormat(this.device.canvasContext.format)
+            // TODO exclamation mark hack!
+            format: getWebGPUTextureFormat(this.device?.canvasContext?.format!)
           }
@@ -142,2 +143,10 @@ ]
 
+    // WebGPU has more restrictive topology support than WebGL
+    switch (this.props.topology) {
+      case 'triangle-fan':
+      case 'line-loop':
+        throw new Error(`WebGPU does not support primitive topology ${this.props.topology}`);
+      default:
+    }
+
     // Create a partially populated descriptor
@@ -193,3 +202,3 @@ let descriptor: GPURenderPipelineDescriptor = {
       webgpuRenderPass.handle.draw(
-        options.vertexCount,
+        options.vertexCount || 0,
         options.instanceCount,
@@ -196,0 +205,0 @@ options.firstIndex,

src/adapter/resources/webgpu-texture.ts

@@ -20,3 +20,3 @@ // luma.gl, MIT license
   readonly view: GPUTextureView;
-  sampler: WebGPUSampler;
+  sampler: WebGPUSampler = null;
 
@@ -45,3 +45,4 @@ // static async createFromImageURL(src, usage = 0) {
     // Create a default sampler. This mimics the WebGL1 API where sampler props are stored on the texture
-    this.setSampler(props.sampler);
+    // this.setSampler(props.sampler);
+    this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
 
@@ -48,0 +49,0 @@ // TODO - To support texture arrays we need to create custom views...

src/adapter/webgpu-canvas-context.ts

@@ -19,3 +19,3 @@ import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/api';
 
-  private depthStencilAttachment: Texture;
+  private depthStencilAttachment: Texture | null = null;
 
@@ -68,3 +68,3 @@ constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
         this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = undefined;
+        this.depthStencilAttachment = null;
       }
@@ -71,0 +71,0 @@

src/adapter/webgpu-device.ts

@@ -40,7 +40,7 @@ /// <reference types="@webgpu/types" />
   readonly adapter: GPUAdapter;
-  readonly lost: Promise<{reason: 'destroyed', message: string}>;
-  canvasContext: WebGPUCanvasContext | undefined;
+  readonly lost: Promise<{reason: 'destroyed'; message: string}>;
+  canvasContext: WebGPUCanvasContext | null = null;
 
-  commandEncoder: GPUCommandEncoder;
-  renderPass: WebGPURenderPass;
+  commandEncoder: GPUCommandEncoder | null = null;
+  renderPass: WebGPURenderPass | null = null;
 
@@ -59,25 +59,31 @@ private _info: DeviceInfo;
     if (!navigator.gpu) {
-      throw new Error('WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu');
+      throw new Error(
+        'WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu'
+      );
     }
     log.groupCollapsed(1, 'WebGPUDevice created')();
     const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: "high-performance"
+      powerPreference: 'high-performance'
       // forceSoftware: false
     });
-    log.probe(1, "Adapter available")();
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
 
+    log.probe(1, 'Adapter available')();
+
     const gpuDevice = await adapter.requestDevice({
-      requiredFeatures: adapter.features as ReadonlySet<GPUFeatureName>,
+      requiredFeatures: adapter.features as ReadonlySet<GPUFeatureName>
       // TODO ensure we obtain best limits
       // requiredLimits: adapter.limits
     });
-    log.probe(1, "GPUDevice available")();
+    log.probe(1, 'GPUDevice available')();
 
     if (typeof props.canvas === 'string') {
       await CanvasContext.pageLoaded;
-      log.probe(1, "DOM is loaded")();
+      log.probe(1, 'DOM is loaded')();
     }
 
     const device = new WebGPUDevice(gpuDevice, adapter, props);
-    log.probe(1, "Device created", device.info)();
+    log.probe(1, 'Device created', device.info)();
     log.table(1, device.info)();
@@ -108,5 +114,7 @@ log.groupEnd(1)();
 
-    this.lost = this.handle.lost;
-    this.lost.then(_ => {
+    // "Context" loss handling
+    this.lost = new Promise<{reason: 'destroyed'; message: string}>(async (resolve) => {
+      const lostInfo = await this.handle.lost;
       this._isLost = true;
+      resolve({reason: 'destroyed', message: lostInfo.message});
     });
@@ -147,3 +155,3 @@
   isTextureFormatFilterable(format: TextureFormat): boolean {
-    return this.isTextureFormatSupported(format); 
+    return this.isTextureFormatSupported(format);
   }
@@ -153,3 +161,3 @@
   isTextureFormatRenderable(format: TextureFormat): boolean {
-    return this.isTextureFormatSupported(format); 
+    return this.isTextureFormatSupported(format);
   }
@@ -195,7 +203,7 @@
 
-  /** 
+  /**
    * Allows a render pass to begin against a canvas context
    * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
    */
-  beginRenderPass(props?: RenderPassProps): WebGPURenderPass {
+  beginRenderPass(props: RenderPassProps): WebGPURenderPass {
     this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
@@ -205,3 +213,3 @@ return new WebGPURenderPass(this, props);
 
-  beginComputePass(props?: ComputePassProps): WebGPUComputePass {
+  beginComputePass(props: ComputePassProps): WebGPUComputePass {
     this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
@@ -211,15 +219,17 @@ return new WebGPUComputePass(this, props);
 
-  createCanvasContext(props?: CanvasContextProps): WebGPUCanvasContext {
+  createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
 
-  /** 
+  /**
    * Gets default renderpass encoder.
-   * Creates a new encoder against default canvasContext if not already created 
+   * Creates a new encoder against default canvasContext if not already created
    * @note Called internally by Model.
    */
   getDefaultRenderPass(): WebGPURenderPass {
-    this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: this.canvasContext.getCurrentFramebuffer()
-    });
+    this.renderPass =
+      this.renderPass ||
+      this.beginRenderPass({
+        framebuffer: this.canvasContext?.getCurrentFramebuffer()
+      });
     return this.renderPass;
@@ -229,5 +239,7 @@ }
   submit(): void {
-    this.renderPass.endPass();
-    const commandBuffer = this.commandEncoder.finish();
-    this.handle.queue.submit([commandBuffer]);
+    this.renderPass?.endPass();
+    const commandBuffer = this.commandEncoder?.finish();
+    if (commandBuffer) {
+      this.handle.queue.submit([commandBuffer]);
+    }
     this.commandEncoder = null;
@@ -265,6 +277,6 @@ this.renderPass = null;
     features.add('texture-blend-float-webgl1');
-  
+
     // TEXTURES, RENDERBUFFERS
     features.add('texture-formats-srgb-webgl1');
-  
+
     // TEXTURES
@@ -274,7 +286,7 @@ features.add('texture-formats-depth-webgl1');
     features.add('texture-formats-float16-webgl1');
-  
+
     features.add('texture-filter-linear-float32-webgl');
     features.add('texture-filter-linear-float16-webgl');
     features.add('texture-filter-anisotropic-webgl');
-  
+
     // FRAMEBUFFERS, TEXTURES AND RENDERBUFFERS
@@ -284,3 +296,3 @@ features.add('texture-renderable-rgba32float-webgl');
     features.add('texture-renderable-float16-webgl');
-  
+
     // GLSL extensions
@@ -287,0 +299,0 @@ features.add('glsl-frag-data');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

289091

increased by1.93%

Lines of code

3736

increased by1.33%

Dependency changes

• + [e-mail]/api@9.0.0-alpha.8(transitive)

• - [e-mail]/api@9.0.0-alpha.7(transitive)

• [e-mail]/api@9.0.0-alpha.8