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

package/dist/dist.dev.js

@@ -72,6 +72,36 @@ var __exports__ = (() => {
   var VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : "untranspiled source";
   var isBrowser2 = isBrowser();
 
+  // ../../node_modules/@probe.gl/env/dist/lib/get-browser.js
+  var window2 = globalThis;
+  function getBrowser(mockUserAgent) {
+    if (!mockUserAgent && !isBrowser()) {
+      return "Node";
+    }
+    if (isElectron(mockUserAgent)) {
+      return "Electron";
+    }
+    const userAgent = mockUserAgent || navigator_.userAgent || "";
+    if (userAgent.indexOf("Edge") > -1) {
+      return "Edge";
+    }
+    const isMSIE = userAgent.indexOf("MSIE ") !== -1;
+    const isTrident = userAgent.indexOf("Trident/") !== -1;
+    if (isMSIE || isTrident) {
+      return "IE";
+    }
+    if (window2.chrome) {
+      return "Chrome";
+    }
+    if (window2.safari) {
+      return "Safari";
+    }
+    if (window2.mozInnerScreenX) {
+      return "Firefox";
+    }
+    return "Unknown";
+  }
+
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
   function getStorage(type) {
     try {
@@ -1042,9 +1072,13 @@ var __exports__ = (() => {
   __publicField(Buffer2, "MAP_WRITE", 2);
   __publicField(Buffer2, "COPY_SRC", 4);
   __publicField(Buffer2, "COPY_DST", 8);
+  /** Index buffer */
   __publicField(Buffer2, "INDEX", 16);
+  /** Vertex buffer */
   __publicField(Buffer2, "VERTEX", 32);
+  /** Uniform buffer */
   __publicField(Buffer2, "UNIFORM", 64);
+  /** Storage buffer */
   __publicField(Buffer2, "STORAGE", 128);
   __publicField(Buffer2, "INDIRECT", 256);
   __publicField(Buffer2, "QUERY_RESOLVE", 512);
@@ -1135,6 +1169,7 @@ var __exports__ = (() => {
     createCommandEncoder(props = {}) {
       throw new Error("not implemented");
     }
+    /** Create a vertex array */
     /** Create a RenderPass */
     /** Create a ComputePass */
     /** Get a renderpass that is set up to render to the primary CanvasContext */
@@ -1520,7 +1555,7 @@ var __exports__ = (() => {
     stage: "vertex",
     source: "",
     sourceMap: null,
-    language: "glsl",
+    language: "auto",
     shaderType: 0
   });
 
@@ -1745,12 +1780,13 @@ var __exports__ = (() => {
       return "RenderPipeline";
     }
     hash = "";
+    /** The merged layout */
+    /** Buffer map describing buffer interleaving etc */
     constructor(device, props) {
       super(device, props, _RenderPipeline.defaultProps);
+      this.shaderLayout = this.props.shaderLayout;
+      this.bufferLayout = this.props.bufferLayout || [];
     }
-    /** Set attributes (stored on pipeline and set before each call) */
-    /** Set attributes (stored on pipeline and set before each call) */
-    /** Set constant attributes (WebGL only) */
     /** Set bindings (stored on pipeline and set before each call) */
     /** Uniforms 
      * @deprecated Only supported on WebGL devices.
@@ -1776,8 +1812,6 @@ var __exports__ = (() => {
     parameters: {},
     vertexCount: 0,
     instanceCount: 0,
-    indices: null,
-    attributes: {},
     bindings: {},
     uniforms: {}
   });
@@ -1887,6 +1921,68 @@ var __exports__ = (() => {
     ...Resource.defaultProps
   });
 
+  // ../core/src/adapter/type-utils/decode-attribute-type.ts
+  function decodeShaderAttributeType(attributeType) {
+    const [dataType, components] = TYPE_INFO[attributeType];
+    const integer = dataType === "i32" || dataType === "u32";
+    const signed = dataType !== "u32";
+    const byteLength = TYPE_SIZES[dataType] * components;
+    const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
+    return {
+      dataType,
+      components,
+      defaultVertexFormat,
+      byteLength,
+      integer,
+      signed
+    };
+  }
+  function getCompatibleVertexFormat(dataType, components) {
+    let vertexType;
+    switch (dataType) {
+      case "f32":
+        vertexType = "float32";
+        break;
+      case "i32":
+        vertexType = "sint32";
+        break;
+      case "u32":
+        vertexType = "uint32";
+        break;
+      case "f16":
+        return components <= 2 ? "float16x2" : "float16x4";
+    }
+    if (components === 1) {
+      return vertexType;
+    }
+    return `${vertexType}x${components}`;
+  }
+  var TYPE_INFO = {
+    f32: ["f32", 1],
+    "vec2<f32>": ["f32", 2],
+    "vec3<f32>": ["f32", 3],
+    "vec4<f32>": ["f32", 4],
+    f16: ["f16", 1],
+    "vec2<f16>": ["f16", 2],
+    "vec3<f16>": ["f16", 3],
+    "vec4<f16>": ["f16", 4],
+    i32: ["i32", 1],
+    "vec2<i32>": ["i32", 2],
+    "vec3<i32>": ["i32", 3],
+    "vec4<i32>": ["i32", 4],
+    u32: ["u32", 1],
+    "vec2<u32>": ["u32", 2],
+    "vec3<u32>": ["u32", 3],
+    "vec4<u32>": ["u32", 4]
+  };
+  var TYPE_SIZES = {
+    f32: 4,
+    f16: 2,
+    i32: 4,
+    u32: 4
+    // 'bool-webgl': 4,  
+  };
+
   // ../core/src/adapter/type-utils/decode-data-type.ts
   function decodeVertexType(type) {
     const dataType = TYPE_MAP[type];
@@ -1903,7 +1999,7 @@ var __exports__ = (() => {
     };
   }
   function getDataTypeBytes(type) {
-    const bytes = TYPE_SIZES[type];
+    const bytes = TYPE_SIZES2[type];
     return bytes;
   }
   var TYPE_MAP = {
@@ -1920,7 +2016,7 @@ var __exports__ = (() => {
     uint32: "uint32",
     sint32: "sint32"
   };
-  var TYPE_SIZES = {
+  var TYPE_SIZES2 = {
     uint8: 1,
     sint8: 1,
     uint16: 2,
@@ -1956,68 +2052,6 @@ var __exports__ = (() => {
     return result;
   }
 
-  // ../core/src/adapter/type-utils/decode-attribute-type.ts
-  function decodeShaderAttributeType(attributeType) {
-    const [dataType, components] = TYPE_INFO[attributeType];
-    const integer = dataType === "i32" || dataType === "u32";
-    const signed = dataType !== "u32";
-    const byteLength = TYPE_SIZES2[dataType] * components;
-    const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
-    return {
-      dataType,
-      components,
-      defaultVertexFormat,
-      byteLength,
-      integer,
-      signed
-    };
-  }
-  function getCompatibleVertexFormat(dataType, components) {
-    let vertexType;
-    switch (dataType) {
-      case "f32":
-        vertexType = "float32";
-        break;
-      case "i32":
-        vertexType = "sint32";
-        break;
-      case "u32":
-        vertexType = "uint32";
-        break;
-      case "f16":
-        return components <= 2 ? "float16x2" : "float16x4";
-    }
-    if (components === 1) {
-      return vertexType;
-    }
-    return `${vertexType}x${components}`;
-  }
-  var TYPE_INFO = {
-    f32: ["f32", 1],
-    "vec2<f32>": ["f32", 2],
-    "vec3<f32>": ["f32", 3],
-    "vec4<f32>": ["f32", 4],
-    f16: ["f16", 1],
-    "vec2<f16>": ["f16", 2],
-    "vec3<f16>": ["f16", 3],
-    "vec4<f16>": ["f16", 4],
-    i32: ["i32", 1],
-    "vec2<i32>": ["i32", 2],
-    "vec3<i32>": ["i32", 3],
-    "vec4<i32>": ["i32", 4],
-    u32: ["u32", 1],
-    "vec2<u32>": ["u32", 2],
-    "vec3<u32>": ["u32", 3],
-    "vec4<u32>": ["u32", 4]
-  };
-  var TYPE_SIZES2 = {
-    f32: 4,
-    f16: 2,
-    i32: 4,
-    u32: 4
-    // 'bool-webgl': 4,  
-  };
-
   // ../core/src/adapter/attribute-utils/get-attribute-from-layouts.ts
   function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
     const attributeInfos = {};
@@ -2026,6 +2060,14 @@ var __exports__ = (() => {
     }
     return attributeInfos;
   }
+  function getAttributeInfosByLocation(shaderLayout, bufferLayout, maxVertexAttributes = 16) {
+    const attributeInfos = getAttributeInfosFromLayouts(shaderLayout, bufferLayout);
+    const locationInfos = new Array(maxVertexAttributes).fill(null);
+    for (const attributeInfo of Object.values(attributeInfos)) {
+      locationInfos[attributeInfo.location] = attributeInfo;
+    }
+    return locationInfos;
+  }
   function getAttributeInfoFromLayouts(shaderLayout, bufferLayout, name2) {
     const shaderDeclaration = getAttributeFromShaderLayout(shaderLayout, name2);
     const bufferMapping = getAttributeFromBufferLayout(bufferLayout, name2);
@@ -2121,6 +2163,30 @@ var __exports__ = (() => {
     return null;
   }
 
+  // ../core/src/adapter/resources/vertex-array.ts
+  var _VertexArray = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "VertexArray";
+    }
+    /** Max number of vertex attributes */
+    /** Attribute infos indexed by location - TODO only needed by webgl module? */
+    indexBuffer = null;
+    constructor(device, props) {
+      super(device, props, _VertexArray.defaultProps);
+      this.maxVertexAttributes = device.limits.maxVertexAttributes;
+      this.attributes = new Array(this.maxVertexAttributes).fill(null);
+      this.attributeInfos = getAttributeInfosByLocation(props.renderPipeline.shaderLayout, props.renderPipeline.bufferLayout, this.maxVertexAttributes);
+    }
+    /** Set attributes (stored on pipeline and set before each call) */
+    /** Set attributes (stored on pipeline and set before each call) */
+    /** Set constant attributes (WebGL only) */
+  };
+  var VertexArray = _VertexArray;
+  __publicField(VertexArray, "defaultProps", {
+    ...Resource.defaultProps,
+    renderPipeline: null
+  });
+
   // ../core/src/lib/utils/cast.ts
   function cast(value) {
     return value;
@@ -2449,7 +2515,7 @@ var __exports__ = (() => {
         stage
       } = this.props;
       let language = this.props.language;
-      if (!language) {
+      if (language === "auto") {
         language = source.includes("->") ? "wgsl" : "glsl";
       }
       switch (language) {
@@ -2482,8 +2548,8 @@ var __exports__ = (() => {
       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;
   }
@@ -2804,25 +2870,24 @@ var __exports__ = (() => {
     // private _firstIndex: number;
     // private _lastIndex: number;
     /** For internal use to create BindGroups */
+    _bindGroupLayout = null;
     _bindGroup = null;
     constructor(device, props) {
       super(device, props);
       this.device = device;
-      this.handle = this.props.handle || this.createHandle();
+      this.handle = this.props.handle;
+      if (!this.handle) {
+        const descriptor = this._getRenderPipelineDescriptor();
+        log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
+        log.probe(1, JSON.stringify(descriptor, null, 2))();
+        log.groupEnd(1)();
+        this.handle = this.device.handle.createRenderPipeline(descriptor);
+      }
       this.handle.label = this.props.id;
       this.vs = cast(props.vs);
       this.fs = 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);
-      log.groupCollapsed(1, `new WebGPRenderPipeline(${this.id})`)();
-      log.log(1, JSON.stringify(descriptor, null, 2))();
-      log.groupEnd(1)();
-      return renderPipeline;
     }
     destroy() {
     }
@@ -2845,6 +2910,7 @@ var __exports__ = (() => {
     setBindings(bindings) {
       if (!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, this.props.shaderLayout, this.props.bindings);
       }
     }
@@ -2860,7 +2926,9 @@ var __exports__ = (() => {
     _getBindGroup() {
       return this._bindGroup;
     }
-    /** Populate the complex WebGPU GPURenderPipelineDescriptor */
+    /** 
+     * Populate the complex WebGPU GPURenderPipelineDescriptor 
+     */
     _getRenderPipelineDescriptor() {
       const vertex = {
         module: cast(this.props.vs).handle,
@@ -2906,7 +2974,12 @@ var __exports__ = (() => {
       if (options.indexCount) {
         webgpuRenderPass.handle.drawIndexed(options.indexCount, options.instanceCount, options.firstIndex, options.baseVertex, options.firstInstance);
       } else {
-        webgpuRenderPass.handle.draw(options.vertexCount || 0, options.instanceCount, options.firstIndex, options.firstInstance);
+        webgpuRenderPass.handle.draw(
+          options.vertexCount || 0,
+          options.instanceCount || 1,
+          // If 0, nothing will be drawn
+          options.firstInstance
+        );
       }
     }
     _setAttributeBuffers(webgpuRenderPass) {
@@ -2956,6 +3029,9 @@ var __exports__ = (() => {
       this.device = device;
       const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
       const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
+      log.groupCollapsed(1, `new WebGPURenderPass(${this.id})`)();
+      log.probe(1, JSON.stringify(renderPassDescriptor, null, 2))();
+      log.groupEnd(1)();
       this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
       this.handle.label = this.props.id;
     }
@@ -2986,7 +3062,7 @@ var __exports__ = (() => {
       if (options.indexCount) {
         this.handle.drawIndexed(options.indexCount, options.instanceCount, options.firstIndex, options.baseVertex, options.firstInstance);
       } else {
-        this.handle.draw(options.vertexCount || 0, options.instanceCount, options.firstIndex, options.firstInstance);
+        this.handle.draw(options.vertexCount || 0, options.instanceCount || 1, options.firstIndex, options.firstInstance);
       }
     }
     drawIndirect() {
@@ -3037,7 +3113,7 @@ var __exports__ = (() => {
       };
       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,
@@ -3045,9 +3121,25 @@ var __exports__ = (() => {
       }));
       if (framebuffer.depthStencilAttachment) {
         renderPassDescriptor.depthStencilAttachment = {
-          ...this.props,
           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;
     }
@@ -3110,6 +3202,51 @@ var __exports__ = (() => {
     // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
   };
 
+  // src/adapter/resources/webgpu-vertex-array.ts
+  var WebGPUVertexArray = class extends VertexArray {
+    get [Symbol.toStringTag]() {
+      return "WebGPUVertexArray";
+    }
+    /** Vertex Array is a helper class under WebGPU */
+    /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+    static isConstantAttributeZeroSupported(device) {
+      return device.info.type === "webgl2" || getBrowser() === "Chrome";
+    }
+    // Create a VertexArray
+    constructor(device, props) {
+      super(device, props);
+      this.device = device;
+    }
+    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) {
+      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?.handle, 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/resources/webgpu-framebuffer.ts
   var WebGPUFramebuffer = class extends Framebuffer {
     constructor(device, props) {
@@ -3121,8 +3258,10 @@ var __exports__ = (() => {
 
   // src/adapter/webgpu-canvas-context.ts
   var WebGPUCanvasContext = class extends CanvasContext {
+    /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
+    format = navigator.gpu.getPreferredCanvasFormat();
+    /** Default stencil format for depth textures */
     depthStencilFormat = "depth24plus";
-    sampleCount = 1;
     depthStencilAttachment = null;
     constructor(device, adapter, props) {
       super(props);
@@ -3131,21 +3270,24 @@ var __exports__ = (() => {
       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],
@@ -3166,7 +3308,8 @@ var __exports__ = (() => {
         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
         });
@@ -3245,7 +3388,7 @@ var __exports__ = (() => {
         version: "",
         gpu: "unknown",
         // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
-        shadingLanguages: ["glsl", "wgsl"],
+        shadingLanguages: ["wgsl"],
         shadingLanguageVersions: {
           glsl: "450",
           wgsl: "100"
@@ -3261,11 +3404,9 @@ var __exports__ = (() => {
           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();
     }
     // TODO
@@ -3320,6 +3461,9 @@ var __exports__ = (() => {
     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
@@ -3343,21 +3487,17 @@ var __exports__ = (() => {
      * 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() {
-      this.renderPass = this.renderPass || this.beginRenderPass({
-        framebuffer: this.canvasContext?.getCurrentFramebuffer()
-      });
-      return this.renderPass;
+      throw new Error("a");
     }
     submit() {
-      this.renderPass?.end();
       const commandBuffer = this.commandEncoder?.finish();
       if (commandBuffer) {
         this.handle.queue.submit([commandBuffer]);
       }
       this.commandEncoder = null;
-      this.renderPass = null;
     }
     _getFeatures() {
       const features = new Set(this.handle.features);