@luma.gl/webgpu 9.0.0-beta.4 → 9.0.0-beta.5

package/dist/adapter/helpers/accessor-to-format.js

@@ -1,2 +1,100 @@
+/*
+import {assert} from '@luma.gl/core';
 
-//# sourceMappingURL=accessor-to-format.js.map
+type Accessor = Record<string, any>;
+
+const FORMAT_TO_ACCESSOR: Record<GPUVertexFormat, Accessor> = {
+  uchar2: {type: 'uchar', size: 2},
+  uchar4: {type: 'uchar', size: 4},
+  char2: {type: 'char', size: 2},
+  char4: {type: 'char', size: 4},
+  uchar2norm: {type: 'uchar', size: 2, normalized: true},
+  uchar4norm: {type: 'uchar', size: 4, normalized: true},
+  char2norm: {type: 'char', size: 2, normalized: true},
+  char4norm: {type: 'char', size: 4, normalized: true},
+  ushort2: {type: 'ushort', size: 2},
+  ushort4: {type: 'ushort', size: 4},
+  short2: {type: 'short', size: 2},
+  short4: {type: 'short', size: 4},
+  ushort2norm: {type: 'ushort', size: 2, normalized: true},
+  ushort4norm: {type: 'ushort', size: 4, normalized: true},
+  short2norm: {type: 'short', size: 1, normalized: true},
+  short4norm: {type: 'short', size: 1, normalized: true},
+  half2: {type: 'half', size: 2},
+  half4: {type: 'half', size: 4},
+  float: {type: 'float', size: 1},
+  float2: {type: 'float', size: 2},
+  float3: {type: 'float', size: 3},
+  float4: {type: 'float', size: 4},
+  uint: {type: 'uint', size: 1, integer: true},
+  uint2: {type: 'uint', size: 2, integer: true},
+  uint3: {type: 'uint', size: 3, integer: true},
+  uint4: {type: 'uint', size: 4, integer: true},
+  int: {type: 'int', size: 1, integer: true},
+  int2: {type: 'int', size: 2, integer: true},
+  int3: {type: 'int', size: 3, integer: true},
+  int4: {type: 'int', size: 4, integer: true}
+};
+
+/**
+ * Convert from WebGPU attribute format strings to accessor {type, size, normalized, integer}
+ * @param {*} format
+ *
+export function mapWebGPUFormatToAccessor(format) {
+  const accessorDefinition = FORMAT_TO_ACCESSOR[format];
+  assert(accessorDefinition, 'invalid attribute format');
+  return Object.freeze(accessorDefinition);
+}
+
+/**
+ * Convert from accessor {type, size, normalized, integer} to WebGPU attribute format strings
+ * @param {*} format
+ *
+export function mapAccessorToWebGPUFormat(accessor) {
+  const {type = GL.FLOAT, size = 1, normalized = false, integer = false} = accessor;
+  assert(size >=1 && size <=4);
+  // `norm` suffix (uchar4norm)
+  const norm = normalized ? 'norm' : '';
+  // size 1 is ommitted in format names (float vs float2)
+  const count = size === 1 ? '' : size;
+  switch (type) {
+    case GL.UNSIGNED_BYTE:
+      switch (size) {
+        case 2:
+        case 4:
+          return `uchar${count}${norm}`;
+      }
+    case GL.BYTE:
+      switch (size) {
+        case 2:
+        case 4:
+          return `char${count}${norm}`;
+      }
+    case GL.UNSIGNED_SHORT:
+      switch (size) {
+        case 2:
+        case 4:
+          return `ushort${count}${norm}`;
+      }
+    case GL.SHORT:
+      switch (size) {
+        case 2:
+        case 4:
+          return `short${count}${norm}`;
+      }
+    case GL.HALF_FLOAT:
+      switch (size) {
+        case 2:
+        case 4:
+          return `half${count}`;
+      }
+    case GL.FLOAT:
+      return `float${count}`;
+    case GL.UNSIGNED_INT:
+      return `uint${count}`;
+    case GL.INT:
+      return `int${count}`;
+  }
+  throw new Error('illegal accessor');
+}
+*/ 

package/dist/adapter/helpers/convert-texture-format.js

@@ -1,7 +1,7 @@
+/** Ensure a texture format is WebGPU compatible */
 export function getWebGPUTextureFormat(format) {
-  if (format.includes('webgl')) {
-    throw new Error('webgl-only format');
-  }
-  return format;
+    if (format.includes('webgl')) {
+        throw new Error('webgl-only format');
+    }
+    return format;
 }
-//# sourceMappingURL=convert-texture-format.js.map

package/dist/adapter/helpers/generate-mipmaps.js

@@ -1,3 +1,7 @@
+// luma.gl, MIT license
+// Forked from Kangz/mipmapper.js under MIT license Copyright 2020 Brandon Jones
+// https://gist.github.com/Kangz/782d5f1ae502daf53910a13f55db2f83
+// @ts-nocheck this is written against outdated WebGPU API, needs an update pass
 const VS_GEN_MIPMAP = `\#version 450
 const vec2 pos[4] = vec2[4](vec2(-1.0f, 1.0f), vec2(1.0f, 1.0f), vec2(-1.0f, -1.0f), vec2(1.0f, -1.0f));
 layout(location = 0) out vec2 vTex;
@@ -13,88 +17,78 @@ layout(location = 0) out vec4 outColor;
 void main() {
   outColor = texture(sampler2D(img, imgSampler), vTex);
 }`;
+/** WebGPU does not have built-in mipmap creation */
 export class WebGPUMipmapGenerator {
-  constructor(device, glslang) {
-    this.device = void 0;
-    this.mipmapSampler = void 0;
-    this.mipmapPipeline = void 0;
-    this.device = device;
-    this.mipmapSampler = device.createSampler({
-      minFilter: 'linear'
-    });
-    this.mipmapPipeline = device.createRenderPipeline({
-      vertexStage: {
-        module: device.createShaderModule({
-          code: glslang.compileGLSL(VS_GEN_MIPMAP, 'vertex')
-        }),
-        entryPoint: 'main'
-      },
-      fragmentStage: {
-        module: device.createShaderModule({
-          code: glslang.compileGLSL(FS_GEN_MIPMAP, 'fragment')
-        }),
-        entryPoint: 'main'
-      },
-      primitiveTopology: 'triangle-strip',
-      colorStates: [{
-        format: 'rgba8unorm'
-      }]
-    });
-  }
-  generateMipmappedTexture(imageBitmap) {
-    const textureSize = {
-      width: imageBitmap.width,
-      height: imageBitmap.height,
-      depth: 1
-    };
-    const mipLevelCount = Math.floor(Math.log2(Math.max(imageBitmap.width, imageBitmap.height))) + 1;
-    const texture = this.device.createTexture({
-      size: textureSize,
-      format: 'rgba8unorm',
-      usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED | GPUTextureUsage.OUTPUT_ATTACHMENT,
-      mipLevelCount
-    });
-    this.device.queue.copyImageBitmapToTexture({
-      imageBitmap
-    }, {
-      texture
-    }, textureSize);
-    const commandEncoder = this.device.createCommandEncoder({});
-    for (let i = 1; i < mipLevelCount; ++i) {
-      const passEncoder = commandEncoder.beginRenderPass({
-        colorAttachments: [{
-          attachment: texture.createView({
-            baseMipLevel: i,
-            mipLevelCount: 1
-          }),
-          loadValue: {
-            r: 1.0,
-            g: 0.0,
-            b: 0.0,
-            a: 0.0
-          }
-        }]
-      });
-      const bindGroup = this.device.createBindGroup({
-        layout: this.mipmapPipeline.getBindGroupLayout(0),
-        bindings: [{
-          binding: 0,
-          resource: this.mipmapSampler
-        }, {
-          binding: 1,
-          resource: texture.createView({
-            baseMipLevel: i - 1,
-            mipLevelCount: 1
-          })
-        }]
-      });
-      passEncoder.setPipeline(this.mipmapPipeline);
-      passEncoder.setBindGroup(0, bindGroup);
-      passEncoder.draw(4);
-      passEncoder.endPass();
+    device;
+    mipmapSampler;
+    mipmapPipeline;
+    constructor(device, glslang) {
+        this.device = device;
+        this.mipmapSampler = device.createSampler({ minFilter: 'linear' });
+        this.mipmapPipeline = device.createRenderPipeline({
+            vertexStage: {
+                module: device.createShaderModule({
+                    code: glslang.compileGLSL(VS_GEN_MIPMAP, 'vertex')
+                }),
+                entryPoint: 'main'
+            },
+            fragmentStage: {
+                module: device.createShaderModule({
+                    code: glslang.compileGLSL(FS_GEN_MIPMAP, 'fragment')
+                }),
+                entryPoint: 'main'
+            },
+            primitiveTopology: 'triangle-strip',
+            colorStates: [{
+                    format: 'rgba8unorm',
+                }]
+        });
+    }
+    generateMipmappedTexture(imageBitmap) {
+        const textureSize = {
+            width: imageBitmap.width,
+            height: imageBitmap.height,
+            depth: 1,
+        };
+        const mipLevelCount = Math.floor(Math.log2(Math.max(imageBitmap.width, imageBitmap.height))) + 1;
+        // Populate the top level of the srcTexture with the imageBitmap.
+        const texture = this.device.createTexture({
+            size: textureSize,
+            format: 'rgba8unorm',
+            usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED | GPUTextureUsage.OUTPUT_ATTACHMENT,
+            mipLevelCount
+        });
+        this.device.queue.copyImageBitmapToTexture({ imageBitmap }, { texture }, textureSize);
+        const commandEncoder = this.device.createCommandEncoder({});
+        for (let i = 1; i < mipLevelCount; ++i) {
+            const passEncoder = commandEncoder.beginRenderPass({
+                colorAttachments: [{
+                        attachment: texture.createView({
+                            baseMipLevel: i,
+                            mipLevelCount: 1
+                        }),
+                        loadValue: { r: 1.0, g: 0.0, b: 0.0, a: 0.0 },
+                    }],
+            });
+            const bindGroup = this.device.createBindGroup({
+                layout: this.mipmapPipeline.getBindGroupLayout(0),
+                bindings: [{
+                        binding: 0,
+                        resource: this.mipmapSampler,
+                    }, {
+                        binding: 1,
+                        resource: texture.createView({
+                            baseMipLevel: i - 1,
+                            mipLevelCount: 1
+                        }),
+                    }],
+            });
+            passEncoder.setPipeline(this.mipmapPipeline);
+            passEncoder.setBindGroup(0, bindGroup);
+            passEncoder.draw(4);
+            passEncoder.endPass();
+        }
+        this.device.queue.submit([commandEncoder.finish()]);
+        return texture;
     }
-    this.device.queue.submit([commandEncoder.finish()]);
-    return texture;
-  }
 }
-//# sourceMappingURL=generate-mipmaps.js.map

package/dist/adapter/helpers/get-bind-group.js

@@ -1,53 +1,66 @@
 import { Buffer, Sampler, Texture, log, cast } from '@luma.gl/core';
+/**
+ * Create a WebGPU "bind group layout" from an array of luma.gl bindings
+ * @note bind groups can be automatically generated by WebGPU.
+ */
 export function makeBindGroupLayout(device, layout, bindings) {
-  throw new Error('not implemented');
+    throw new Error('not implemented');
+    // return device.createBindGroupLayout({
+    //   layout,
+    //   entries: getBindGroupEntries(bindings)
+    // })
 }
+/**
+ * Create a WebGPU "bind group" from an array of luma.gl bindings
+ */
 export function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
-  const entries = getBindGroupEntries(bindings, shaderLayout);
-  return device.createBindGroup({
-    layout: bindGroupLayout,
-    entries
-  });
+    const entries = getBindGroupEntries(bindings, shaderLayout);
+    return device.createBindGroup({
+        layout: bindGroupLayout,
+        entries
+    });
 }
 export function getShaderLayoutBinding(shaderLayout, bindingName) {
-  const bindingLayout = shaderLayout.bindings.find(binding => binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase());
-  if (!bindingLayout) {
-    log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
-  }
-  return bindingLayout;
+    const bindingLayout = shaderLayout.bindings.find(binding => binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase());
+    if (!bindingLayout) {
+        log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+    }
+    return bindingLayout;
 }
+/**
+ * @param bindings
+ * @returns
+ */
 function getBindGroupEntries(bindings, shaderLayout) {
-  const entries = [];
-  for (const [bindingName, value] of Object.entries(bindings)) {
-    const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
-    if (bindingLayout) {
-      entries.push(getBindGroupEntry(value, bindingLayout.location));
+    const entries = [];
+    for (const [bindingName, value] of Object.entries(bindings)) {
+        const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
+        if (bindingLayout) {
+            entries.push(getBindGroupEntry(value, bindingLayout.location));
+        }
     }
-  }
-  return entries;
+    return entries;
 }
 function getBindGroupEntry(binding, index) {
-  if (binding instanceof Buffer) {
-    return {
-      binding: index,
-      resource: {
-        buffer: cast(binding).handle
-      }
-    };
-  }
-  if (binding instanceof Sampler) {
-    return {
-      binding: index,
-      resource: cast(binding).handle
-    };
-  } else if (binding instanceof Texture) {
-    return {
-      binding: index,
-      resource: cast(binding).handle.createView({
-        label: 'bind-group-auto-created'
-      })
-    };
-  }
-  throw new Error('invalid binding');
+    if (binding instanceof Buffer) {
+        return {
+            binding: index,
+            resource: {
+                buffer: cast(binding).handle
+            }
+        };
+    }
+    if (binding instanceof Sampler) {
+        return {
+            binding: index,
+            resource: cast(binding).handle
+        };
+    }
+    else if (binding instanceof Texture) {
+        return {
+            binding: index,
+            resource: cast(binding).handle.createView({ label: 'bind-group-auto-created' })
+        };
+    }
+    throw new Error('invalid binding');
 }
-//# sourceMappingURL=get-bind-group.js.map

package/dist/adapter/helpers/get-vertex-buffer-layout.js

@@ -1,94 +1,124 @@
 import { log, decodeVertexFormat } from '@luma.gl/core';
+// import {getAttributeInfosFromLayouts} from '@luma.gl/core';
+/** Throw error on any WebGL-only vertex formats */
 function getWebGPUVertexFormat(format) {
-  if (format.endsWith('-webgl')) {
-    throw new Error(`WebGPU does not support vertex format ${format}`);
-  }
-  return format;
+    if (format.endsWith('-webgl')) {
+        throw new Error(`WebGPU does not support vertex format ${format}`);
+    }
+    return format;
 }
+/**
+ * Build a WebGPU vertex buffer layout intended for use in a GPURenderPassDescriptor.
+ * Converts luma.gl attribute definitions to a WebGPU GPUVertexBufferLayout[] array
+ * @param layout
+ * @param bufferLayout The buffer map is optional
+ * @returns WebGPU layout intended for a GPURenderPassDescriptor.
+ */
 export function getVertexBufferLayout(shaderLayout, bufferLayout) {
-  const vertexBufferLayouts = [];
-  const usedAttributes = new Set();
-  for (const mapping of bufferLayout) {
-    const vertexAttributes = [];
-    let stepMode = 'vertex';
-    let byteStride = 0;
-    if (mapping.attributes) {
-      for (const attributeMapping of mapping.attributes) {
-        const attributeName = attributeMapping.attribute;
-        const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
-        stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
-        vertexAttributes.push({
-          format: getWebGPUVertexFormat(attributeMapping.format || mapping.format),
-          offset: attributeMapping.byteOffset,
-          shaderLocation: attributeLayout.location
+    const vertexBufferLayouts = [];
+    const usedAttributes = new Set();
+    // First handle any buffers mentioned in `bufferLayout`
+    for (const mapping of bufferLayout) {
+        // Build vertex attributes for one buffer
+        const vertexAttributes = [];
+        // TODO verify that all stepModes for one buffer are the same
+        let stepMode = 'vertex';
+        let byteStride = 0;
+        // interleaved mapping {..., attributes: [{...}, ...]}
+        if (mapping.attributes) {
+            // const arrayStride = mapping.byteStride; TODO
+            for (const attributeMapping of mapping.attributes) {
+                const attributeName = attributeMapping.attribute;
+                const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
+                stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
+                vertexAttributes.push({
+                    format: getWebGPUVertexFormat(attributeMapping.format || mapping.format),
+                    offset: attributeMapping.byteOffset,
+                    shaderLocation: attributeLayout.location
+                });
+                byteStride += decodeVertexFormat(mapping.format).byteLength;
+            }
+            // non-interleaved mapping (just set offset and stride)
+        }
+        else {
+            const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
+            if (!attributeLayout) {
+                continue; // eslint-disable-line no-continue
+            }
+            byteStride = decodeVertexFormat(mapping.format).byteLength;
+            stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
+            vertexAttributes.push({
+                format: getWebGPUVertexFormat(mapping.format),
+                // We only support 0 offset for non-interleaved buffer layouts
+                offset: 0,
+                shaderLocation: attributeLayout.location
+            });
+        }
+        // Store all the attribute bindings for one buffer
+        vertexBufferLayouts.push({
+            arrayStride: mapping.byteStride || byteStride,
+            stepMode,
+            attributes: vertexAttributes
         });
-        byteStride += decodeVertexFormat(mapping.format).byteLength;
-      }
-    } else {
-      const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
-      if (!attributeLayout) {
-        continue;
-      }
-      byteStride = decodeVertexFormat(mapping.format).byteLength;
-      stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
-      vertexAttributes.push({
-        format: getWebGPUVertexFormat(mapping.format),
-        offset: 0,
-        shaderLocation: attributeLayout.location
-      });
     }
-    vertexBufferLayouts.push({
-      arrayStride: mapping.byteStride || byteStride,
-      stepMode,
-      attributes: vertexAttributes
-    });
-  }
-  for (const attribute of shaderLayout.attributes) {
-    if (!usedAttributes.has(attribute.name)) {
-      vertexBufferLayouts.push({
-        arrayStride: decodeVertexFormat('float32x3').byteLength,
-        stepMode: attribute.stepMode || (attribute.name.startsWith('instance') ? 'instance' : 'vertex'),
-        attributes: [{
-          format: getWebGPUVertexFormat('float32x3'),
-          offset: 0,
-          shaderLocation: attribute.location
-        }]
-      });
+    // Add any non-mapped attributes - TODO - avoid hardcoded types
+    for (const attribute of shaderLayout.attributes) {
+        if (!usedAttributes.has(attribute.name)) {
+            vertexBufferLayouts.push({
+                arrayStride: decodeVertexFormat('float32x3').byteLength,
+                stepMode: attribute.stepMode || (attribute.name.startsWith('instance') ? 'instance' : 'vertex'),
+                attributes: [
+                    {
+                        format: getWebGPUVertexFormat('float32x3'),
+                        offset: 0,
+                        shaderLocation: attribute.location
+                    }
+                ]
+            });
+        }
     }
-  }
-  return vertexBufferLayouts;
+    return vertexBufferLayouts;
 }
 export function getBufferSlots(shaderLayout, bufferLayout) {
-  const usedAttributes = new Set();
-  let bufferSlot = 0;
-  const bufferSlots = {};
-  for (const mapping of bufferLayout) {
-    if ('attributes' in mapping) {
-      for (const interleaved of mapping.attributes) {
-        usedAttributes.add(interleaved.attribute);
-      }
-    } else {
-      usedAttributes.add(mapping.name);
+    const usedAttributes = new Set();
+    let bufferSlot = 0;
+    const bufferSlots = {};
+    // First handle any buffers mentioned in `bufferLayout`
+    for (const mapping of bufferLayout) {
+        // interleaved mapping {..., attributes: [{...}, ...]}
+        if ('attributes' in mapping) {
+            for (const interleaved of mapping.attributes) {
+                usedAttributes.add(interleaved.attribute);
+            }
+            // non-interleaved mapping (just set offset and stride)
+        }
+        else {
+            usedAttributes.add(mapping.name);
+        }
+        bufferSlots[mapping.name] = bufferSlot++;
     }
-    bufferSlots[mapping.name] = bufferSlot++;
-  }
-  for (const attribute of shaderLayout.attributes) {
-    if (!usedAttributes.has(attribute.name)) {
-      bufferSlots[attribute.name] = bufferSlot++;
+    // Add any non-mapped attributes
+    for (const attribute of shaderLayout.attributes) {
+        if (!usedAttributes.has(attribute.name)) {
+            bufferSlots[attribute.name] = bufferSlot++;
+        }
     }
-  }
-  return bufferSlots;
+    return bufferSlots;
 }
+/**
+ * Looks up an attribute in the ShaderLayout.
+ * @throws if name is not in ShaderLayout
+ * @throws if name has already been referenced
+ */
 function findAttributeLayout(shaderLayout, name, attributeNames) {
-  const attribute = shaderLayout.attributes.find(attribute => attribute.name === name);
-  if (!attribute) {
-    log.warn(`Unknown attribute ${name}`)();
-    return null;
-  }
-  if (attributeNames.has(name)) {
-    throw new Error(`Duplicate attribute ${name}`);
-  }
-  attributeNames.add(name);
-  return attribute;
+    const attribute = shaderLayout.attributes.find(attribute => attribute.name === name);
+    if (!attribute) {
+        log.warn(`Unknown attribute ${name}`)();
+        return null;
+    }
+    if (attributeNames.has(name)) {
+        throw new Error(`Duplicate attribute ${name}`);
+    }
+    attributeNames.add(name);
+    return attribute;
 }
-//# sourceMappingURL=get-vertex-buffer-layout.js.map