@luma.gl/webgpu 9.0.0-alpha.35 → 9.0.0-alpha.37

package/dist/index.cjs

@@ -65,7 +65,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/adapter/webgpu-device.ts
-var import_core14 = require("@luma.gl/core");
+var import_core15 = require("@luma.gl/core");
 
 // src/adapter/resources/webgpu-buffer.ts
 var import_core = require("@luma.gl/core");
@@ -407,7 +407,7 @@ var WebGPUShader = class extends import_core5.Shader {
   createHandle() {
     const { source, stage } = this.props;
     let language = this.props.language;
-    if (!language) {
+    if (language === "auto") {
       language = source.includes("->") ? "wgsl" : "glsl";
     }
     switch (language) {
@@ -443,8 +443,8 @@ function addDepthStencil(descriptor) {
     stencilFront: {},
     stencilBack: {},
     // TODO can this cause trouble? Should we set to WebGPU defaults? Are there defaults?
-    depthWriteEnabled: void 0,
-    depthCompare: void 0
+    depthWriteEnabled: false,
+    depthCompare: "less-equal"
   };
   return descriptor.depthStencil;
 }
@@ -770,23 +770,25 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
     super(device, props);
     this.fs = null;
     this._indexBuffer = null;
+    // private _firstIndex: number;
+    // private _lastIndex: number;
+    /** For internal use to create BindGroups */
+    this._bindGroupLayout = null;
     this._bindGroup = null;
     this.device = device;
-    this.handle = this.props.handle || this.createHandle();
+    this.handle = this.props.handle;
+    if (!this.handle) {
+      const descriptor = this._getRenderPipelineDescriptor();
+      import_core8.log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
+      import_core8.log.probe(1, JSON.stringify(descriptor, null, 2))();
+      import_core8.log.groupEnd(1)();
+      this.handle = this.device.handle.createRenderPipeline(descriptor);
+    }
     this.handle.label = this.props.id;
     this.vs = (0, import_core8.cast)(props.vs);
     this.fs = (0, import_core8.cast)(props.fs);
     this._bufferSlots = getBufferSlots(this.props.shaderLayout, this.props.bufferLayout);
     this._buffers = new Array(Object.keys(this._bufferSlots).length).fill(null);
-    this._bindGroupLayout = this.handle.getBindGroupLayout(0);
-  }
-  createHandle() {
-    const descriptor = this._getRenderPipelineDescriptor();
-    const renderPipeline = this.device.handle.createRenderPipeline(descriptor);
-    import_core8.log.groupCollapsed(1, `new WebGPRenderPipeline(${this.id})`)();
-    import_core8.log.log(1, JSON.stringify(descriptor, null, 2))();
-    import_core8.log.groupEnd(1)();
-    return renderPipeline;
   }
   destroy() {
   }
@@ -811,6 +813,7 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
   setBindings(bindings) {
     if (!(0, import_core8.isObjectEmpty)(this.props.bindings)) {
       Object.assign(this.props.bindings, bindings);
+      this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
       this._bindGroup = getBindGroup(
         this.device.handle,
         this._bindGroupLayout,
@@ -831,7 +834,9 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
   _getBindGroup() {
     return this._bindGroup;
   }
-  /** Populate the complex WebGPU GPURenderPipelineDescriptor */
+  /** 
+   * Populate the complex WebGPU GPURenderPipelineDescriptor 
+   */
   _getRenderPipelineDescriptor() {
     var _a, _b;
     const vertex = {
@@ -888,8 +893,8 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
     } else {
       webgpuRenderPass.handle.draw(
         options.vertexCount || 0,
-        options.instanceCount,
-        options.firstIndex,
+        options.instanceCount || 1,
+        // If 0, nothing will be drawn
         options.firstInstance
       );
     }
@@ -947,6 +952,9 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     this.device = device;
     const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
     const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
+    import_core10.log.groupCollapsed(1, `new WebGPURenderPass(${this.id})`)();
+    import_core10.log.probe(1, JSON.stringify(renderPassDescriptor, null, 2))();
+    import_core10.log.groupEnd(1)();
     this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
     this.handle.label = this.props.id;
   }
@@ -986,7 +994,7 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     } else {
       this.handle.draw(
         options.vertexCount || 0,
-        options.instanceCount,
+        options.instanceCount || 1,
         options.firstIndex,
         options.firstInstance
       );
@@ -1042,16 +1050,31 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     };
     renderPassDescriptor.colorAttachments = framebuffer.colorAttachments.map((colorAttachment) => ({
       // clear values
-      loadOp: "clear",
+      loadOp: this.props.clearColor !== false ? "clear" : "load",
       colorClearValue: this.props.clearColor || [0, 0, 0, 0],
       storeOp: this.props.discard ? "discard" : "store",
       // ...colorAttachment,
       view: colorAttachment.handle.createView()
     }));
     if (framebuffer.depthStencilAttachment) {
-      renderPassDescriptor.depthStencilAttachment = __spreadProps(__spreadValues({}, this.props), {
+      renderPassDescriptor.depthStencilAttachment = {
         view: framebuffer.depthStencilAttachment.handle.createView()
-      });
+      };
+      const { depthStencilAttachment } = renderPassDescriptor;
+      if (this.props.depthReadOnly) {
+        depthStencilAttachment.depthReadOnly = true;
+      }
+      depthStencilAttachment.depthClearValue = this.props.clearDepth || 0;
+      const hasDepthAspect = true;
+      if (hasDepthAspect) {
+        depthStencilAttachment.depthLoadOp = this.props.clearDepth !== false ? "clear" : "load";
+        depthStencilAttachment.depthStoreOp = "store";
+      }
+      const hasStencilAspect = false;
+      if (hasStencilAspect) {
+        depthStencilAttachment.stencilLoadOp = this.props.clearStencil !== false ? "clear" : "load";
+        depthStencilAttachment.stencilStoreOp = "store";
+      }
     }
     return renderPassDescriptor;
   }
@@ -1116,12 +1139,58 @@ var WebGPUComputePass = class extends import_core11.ComputePass {
   // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
 };
 
+// src/adapter/resources/webgpu-vertex-array.ts
+var import_core12 = require("@luma.gl/core");
+var import_env = require("@probe.gl/env");
+var WebGPUVertexArray = class extends import_core12.VertexArray {
+  // Create a VertexArray
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+  }
+  get [Symbol.toStringTag]() {
+    return "WebGPUVertexArray";
+  }
+  /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+  static isConstantAttributeZeroSupported(device) {
+    return device.info.type === "webgl2" || (0, import_env.getBrowser)() === "Chrome";
+  }
+  destroy() {
+  }
+  /**
+   * Set an elements buffer, for indexed rendering.
+   * Must be a Buffer bound to buffer with usage bit Buffer.INDEX set. 
+   */
+  setIndexBuffer(buffer) {
+    this.indexBuffer = buffer;
+  }
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location, buffer) {
+    this.attributes[location] = buffer;
+  }
+  /** Set a location in vertex attributes array to a constant value, disables the location */
+  setConstant(location, value) {
+    import_core12.log.warn(`${this.id} constant attributes not supported on WebGPU`);
+  }
+  bindBeforeRender(renderPass, firstIndex, indexCount) {
+    const webgpuRenderPass = renderPass;
+    const webgpuIndexBuffer = this.indexBuffer;
+    webgpuRenderPass.handle.setIndexBuffer(webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType);
+    for (let location = 0; location < this.maxVertexAttributes; location++) {
+      const webgpuBuffer = this.attributes[location];
+      webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer.handle);
+    }
+  }
+  unbindAfterRender(renderPass) {
+  }
+};
+
 // src/adapter/webgpu-canvas-context.ts
-var import_core13 = require("@luma.gl/core");
+var import_core14 = require("@luma.gl/core");
 
 // src/adapter/resources/webgpu-framebuffer.ts
-var import_core12 = require("@luma.gl/core");
-var WebGPUFramebuffer = class extends import_core12.Framebuffer {
+var import_core13 = require("@luma.gl/core");
+var WebGPUFramebuffer = class extends import_core13.Framebuffer {
   constructor(device, props) {
     super(device, props);
     this.device = device;
@@ -1130,32 +1199,37 @@ var WebGPUFramebuffer = class extends import_core12.Framebuffer {
 };
 
 // src/adapter/webgpu-canvas-context.ts
-var WebGPUCanvasContext = class extends import_core13.CanvasContext {
+var WebGPUCanvasContext = class extends import_core14.CanvasContext {
   constructor(device, adapter, props) {
     super(props);
+    /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
+    this.format = navigator.gpu.getPreferredCanvasFormat();
+    /** Default stencil format for depth textures */
     this.depthStencilFormat = "depth24plus";
-    this.sampleCount = 1;
     this.depthStencilAttachment = null;
     this.device = device;
     this.width = -1;
     this.height = -1;
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
     this.gpuCanvasContext = this.canvas.getContext("webgpu");
-    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    this.format = "bgra8unorm";
   }
+  /** Destroy any textures produced while configured and remove the context configuration. */
   destroy() {
     this.gpuCanvasContext.unconfigure();
   }
+  getCurrentTexture() {
+    return this.device._createTexture({
+      id: "default-render-target",
+      handle: this.gpuCanvasContext.getCurrentTexture()
+    });
+  }
   /** Update framebuffer with properly resized "swap chain" texture views */
   getCurrentFramebuffer() {
     this.update();
-    const currentColorAttachment = this.device.createTexture({
-      id: "default-render-target",
-      handle: this.gpuCanvasContext.getCurrentTexture(),
-      format: this.format,
-      width: this.width,
-      height: this.height
-    });
+    const currentColorAttachment = this.getCurrentTexture();
+    this.width = currentColorAttachment.width;
+    this.height = currentColorAttachment.height;
     this._createDepthStencilAttachment();
     return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
@@ -1176,11 +1250,12 @@ var WebGPUCanvasContext = class extends import_core13.CanvasContext {
       this.gpuCanvasContext.configure({
         device: this.device.handle,
         format: getWebGPUTextureFormat(this.format),
-        // size: [this.width, this.height],
+        // Can be used to define e.g. -srgb views
+        // viewFormats: [...]
         colorSpace: this.props.colorSpace,
         alphaMode: this.props.alphaMode
       });
-      import_core13.log.log(1, `Resized to ${this.width}x${this.height}px`)();
+      import_core14.log.log(1, `Resized to ${this.width}x${this.height}px`)();
     }
   }
   resize(options) {
@@ -1202,9 +1277,9 @@ var WebGPUCanvasContext = class extends import_core13.CanvasContext {
 };
 
 // src/adapter/webgpu-device.ts
-var _WebGPUDevice = class extends import_core14.Device {
+var _WebGPUDevice = class extends import_core15.Device {
   constructor(device, adapter, props) {
-    super(__spreadProps(__spreadValues({}, props), { id: props.id || (0, import_core14.uid)("webgpu-device") }));
+    super(__spreadProps(__spreadValues({}, props), { id: props.id || (0, import_core15.uid)("webgpu-device") }));
     this.canvasContext = null;
     this.commandEncoder = null;
     this.renderPass = null;
@@ -1218,7 +1293,7 @@ var _WebGPUDevice = class extends import_core14.Device {
       version: "",
       gpu: "unknown",
       // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
-      shadingLanguages: ["glsl", "wgsl"],
+      shadingLanguages: ["wgsl"],
       shadingLanguageVersions: {
         glsl: "450",
         wgsl: "100"
@@ -1231,9 +1306,7 @@ var _WebGPUDevice = class extends import_core14.Device {
       this._isLost = true;
       resolve({ reason: "destroyed", message: lostInfo.message });
     }));
-    if (props.canvas) {
-      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, { canvas: props.canvas });
-    }
+    this.canvasContext = new WebGPUCanvasContext(this, this.adapter, { canvas: props.canvas });
     this.features = this._getFeatures();
   }
   /** Check if WebGPU is available */
@@ -1247,7 +1320,7 @@ var _WebGPUDevice = class extends import_core14.Device {
           "WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu"
         );
       }
-      import_core14.log.groupCollapsed(1, "WebGPUDevice created")();
+      import_core15.log.groupCollapsed(1, "WebGPUDevice created")();
       const adapter = yield navigator.gpu.requestAdapter({
         powerPreference: "high-performance"
         // forceSoftware: false
@@ -1256,21 +1329,21 @@ var _WebGPUDevice = class extends import_core14.Device {
         throw new Error("Failed to request WebGPU adapter");
       }
       const adapterInfo = yield adapter.requestAdapterInfo();
-      import_core14.log.probe(1, "Adapter available", adapterInfo)();
+      import_core15.log.probe(1, "Adapter available", adapterInfo)();
       const gpuDevice = yield adapter.requestDevice({
         requiredFeatures: adapter.features
         // TODO ensure we obtain best limits
         // requiredLimits: adapter.limits
       });
-      import_core14.log.probe(1, "GPUDevice available")();
+      import_core15.log.probe(1, "GPUDevice available")();
       if (typeof props.canvas === "string") {
-        yield import_core14.CanvasContext.pageLoaded;
-        import_core14.log.probe(1, "DOM is loaded")();
+        yield import_core15.CanvasContext.pageLoaded;
+        import_core15.log.probe(1, "DOM is loaded")();
       }
       const device = new _WebGPUDevice(gpuDevice, adapter, props);
-      import_core14.log.probe(1, "Device created", device.info)();
-      import_core14.log.table(1, device.info)();
-      import_core14.log.groupEnd(1)();
+      import_core15.log.probe(1, "Device created", device.info)();
+      import_core15.log.table(1, device.info)();
+      import_core15.log.groupEnd(1)();
       return device;
     });
   }
@@ -1326,6 +1399,9 @@ var _WebGPUDevice = class extends import_core14.Device {
   createComputePipeline(props) {
     return new WebGPUComputePipeline(this, props);
   }
+  createVertexArray(props) {
+    return new WebGPUVertexArray(this, props);
+  }
   // WebGPU specifics
   /**
    * Allows a render pass to begin against a canvas context
@@ -1349,23 +1425,18 @@ var _WebGPUDevice = class extends import_core14.Device {
    * Gets default renderpass encoder.
    * Creates a new encoder against default canvasContext if not already created
    * @note Called internally by Model.
+   * @deprecated Create explicit pass with device.beginRenderPass
    */
   getDefaultRenderPass() {
-    var _a;
-    this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: (_a = this.canvasContext) == null ? void 0 : _a.getCurrentFramebuffer()
-    });
-    return this.renderPass;
+    throw new Error("a");
   }
   submit() {
-    var _a, _b;
-    (_a = this.renderPass) == null ? void 0 : _a.end();
-    const commandBuffer = (_b = this.commandEncoder) == null ? void 0 : _b.finish();
+    var _a;
+    const commandBuffer = (_a = this.commandEncoder) == null ? void 0 : _a.finish();
     if (commandBuffer) {
       this.handle.queue.submit([commandBuffer]);
     }
     this.commandEncoder = null;
-    this.renderPass = null;
   }
   _getFeatures() {
     const features = new Set(this.handle.features);