@luma.gl/webgpu 9.0.0-alpha.2

package/dist/glsl/glsllang.d.ts

@@ -0,0 +1,3 @@
+/** Dynamically load the GLSL compiler */
+export declare function loadGlslangModule(): Promise<unknown>;
+//# sourceMappingURL=glsllang.d.ts.map

package/dist/glsl/glsllang.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glsllang.d.ts","sourceRoot":"","sources":["../../src/glsl/glsllang.ts"],"names":[],"mappings":"AAKA,yCAAyC;AACzC,wBAAsB,iBAAiB,qBAOtC"}

package/dist/glsl/glsllang.js

@@ -0,0 +1,10 @@
+let glslang;
+export async function loadGlslangModule() {
+  if (!glslang) {
+    const glslangModule = await import('https://unpkg.com/@webgpu/glslang@0.0.15/dist/web-devel/glslang.js');
+    glslang = await glslangModule.default();
+  }
+
+  return glslang;
+}
+//# sourceMappingURL=glsllang.js.map

package/dist/glsl/glsllang.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/glsl/glsllang.ts"],"names":["glslang","loadGlslangModule","glslangModule","default"],"mappings":"AAGA,IAAIA,OAAJ;AAGA,OAAO,eAAeC,iBAAf,GAAmC;AACxC,MAAI,CAACD,OAAL,EAAc;AAEZ,UAAME,aAAa,GAAG,MAAM,OAAiC,oEAAjC,CAA5B;AACAF,IAAAA,OAAO,GAAG,MAAME,aAAa,CAACC,OAAd,EAAhB;AACD;;AACD,SAAOH,OAAP;AACD","sourcesContent":["// Inspired by webgpu samples at https://github.com/austinEng/webgpu-samples/blob/master/src/glslang.ts\n// under BSD 3-clause license\n\nlet glslang: unknown;\n\n/** Dynamically load the GLSL compiler */\nexport async function loadGlslangModule() {\n  if (!glslang) {\n    // @ts-ignore\n    const glslangModule = await import(/* webpackIgnore: true */ 'https://unpkg.com/@webgpu/glslang@0.0.15/dist/web-devel/glslang.js');\n    glslang = await glslangModule.default();\n  }\n  return glslang;\n}\n"],"file":"glsllang.js"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import '@luma.gl/api';
+import './init';
+export { default as WebGPUDevice } from './adapter/webgpu-device';
+export { default as WebGPUBuffer } from './adapter/resources/webgpu-buffer';
+export { default as WebGPUTexture } from './adapter/resources/webgpu-texture';
+export { default as WebGPUSampler } from './adapter/resources/webgpu-sampler';
+export { default as WebGPUShader } from './adapter/resources/webgpu-shader';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AACtB,OAAO,QAAQ,CAAA;AAGf,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+import '@luma.gl/api';
+import './init';
+export { default as WebGPUDevice } from './adapter/webgpu-device';
+export { default as WebGPUBuffer } from './adapter/resources/webgpu-buffer';
+export { default as WebGPUTexture } from './adapter/resources/webgpu-texture';
+export { default as WebGPUSampler } from './adapter/resources/webgpu-sampler';
+export { default as WebGPUShader } from './adapter/resources/webgpu-shader';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["default","WebGPUDevice","WebGPUBuffer","WebGPUTexture","WebGPUSampler","WebGPUShader"],"mappings":"AAEA,OAAO,cAAP;AACA,OAAO,QAAP;AAGA,SAAQA,OAAO,IAAIC,YAAnB,QAAsC,yBAAtC;AAGA,SAAQD,OAAO,IAAIE,YAAnB,QAAsC,mCAAtC;AACA,SAAQF,OAAO,IAAIG,aAAnB,QAAuC,oCAAvC;AACA,SAAQH,OAAO,IAAII,aAAnB,QAAuC,oCAAvC;AACA,SAAQJ,OAAO,IAAIK,YAAnB,QAAsC,mCAAtC","sourcesContent":["\n// Initialize any global state\nimport '@luma.gl/api';\nimport './init'\n\n// WEBGPU ADAPTER\nexport {default as WebGPUDevice} from './adapter/webgpu-device';\n\n// WEBGPU CLASSES (typically not accessed directly)\nexport {default as WebGPUBuffer} from './adapter/resources/webgpu-buffer';\nexport {default as WebGPUTexture} from './adapter/resources/webgpu-texture';\nexport {default as WebGPUSampler} from './adapter/resources/webgpu-sampler';\nexport {default as WebGPUShader} from './adapter/resources/webgpu-shader';\n"],"file":"index.js"}

package/dist/init.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=init.d.ts.map

package/dist/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":""}

package/dist/init.js

@@ -0,0 +1,4 @@
+import { luma } from '@luma.gl/api';
+import WebGPUDevice from './adapter/webgpu-device';
+luma.registerDevices([WebGPUDevice]);
+//# sourceMappingURL=init.js.map

package/dist/init.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts"],"names":["luma","WebGPUDevice","registerDevices"],"mappings":"AAAA,SAAQA,IAAR,QAAmB,cAAnB;AACA,OAAOC,YAAP,MAAyB,yBAAzB;AAEAD,IAAI,CAACE,eAAL,CAAqB,CAACD,YAAD,CAArB","sourcesContent":["import {luma} from '@luma.gl/api';\nimport WebGPUDevice from './adapter/webgpu-device';\n\nluma.registerDevices([WebGPUDevice]);\n"],"file":"init.js"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@luma.gl/webgpu",
+  "version": "9.0.0-alpha.2",
+  "description": "WebGPU adapter for the luma.gl API",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visgl/luma.gl"
+  },
+  "keywords": [
+    "webgpu",
+    "visualization",
+    "animation",
+    "3d"
+  ],
+  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "pre-build": "npm run build-bundle && npm run build-bundle -- --env.dev",
+    "build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "@luma.gl/api": "9.0.0-alpha.2",
+    "@webgpu/types": "^0.1.9",
+    "probe.gl": "^3.2.1"
+  },
+  "gitHead": "81e93840f31f0e32f86dfea6b576acf2c2d9caec"
+}

package/src/adapter/helpers/accessor-to-format.ts

@@ -0,0 +1,101 @@
+/*
+import {assert} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+
+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/src/adapter/helpers/convert-texture-format.ts

@@ -0,0 +1,10 @@
+// luma.gl, MIT license
+import {TextureFormat} from '@luma.gl/api';
+
+/** Ensure a texture format is WebGPU compatible */
+export function getWebGPUTextureFormat(format: TextureFormat): GPUTextureFormat {
+  if (format.includes('webgl')) {
+    throw new Error('webgl-only format');
+  }
+  return format as GPUTextureFormat;
+}

package/src/adapter/helpers/generate-mipmaps.ts

@@ -0,0 +1,107 @@
+// 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;
+void main() {
+  gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
+  vTex = gl_Position / 2.0f + vec2(0.5f);
+}`;
+
+const FS_GEN_MIPMAP = `#version 450
+layout(set = 0, binding = 0) uniform sampler imgSampler;
+layout(set = 0, binding = 1) uniform texture2D img;
+layout(location = 0) in vec2 vTex;
+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 {
+  device: GPUDevice;
+  mipmapSampler: GPUSampler;
+  mipmapPipeline: GPURenderPipeline;
+
+  constructor(device: GPUDevice, 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: ImageBitmap) {
+    let 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: srcTexture }, 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;
+  }
+}

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

@@ -0,0 +1,82 @@
+// luma.gl, MIT license
+import type {ShaderLayout, BindingLayout, Binding} from '@luma.gl/api';
+import {Buffer, Sampler, Texture, log, cast} from '@luma.gl/api';
+import type WebGPUBuffer from '../resources/webgpu-buffer';
+import type WebGPUSampler from '../resources/webgpu-sampler';
+import type WebGPUTexture from '../resources/webgpu-texture';
+
+/**
+ * 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: GPUDevice, layout: GPUBindGroupLayout, bindings: Binding[]): GPUBindGroupLayout {
+  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: GPUDevice,
+  bindGroupLayout: GPUBindGroupLayout,
+  layout: ShaderLayout,
+  bindings: Record<string, Binding>
+): GPUBindGroup {
+  const entries = getBindGroupEntries(bindings, layout);
+  return device.createBindGroup({
+    layout: bindGroupLayout,
+    entries
+  });
+}
+
+export function getShaderLayoutBinding(layout: ShaderLayout, bindingName: string): BindingLayout {
+  const bindingLayout = layout.bindings.find(binding => binding.name === bindingName);
+  if (!bindingLayout) {
+    log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+  }
+  return bindingLayout;
+}
+
+/**
+ * @param bindings
+ * @returns
+ */
+function getBindGroupEntries(bindings: Record<string, Binding>, layout: ShaderLayout): GPUBindGroupEntry[] {
+  const entries: GPUBindGroupEntry[] = [];
+
+  for (const [bindingName, value] of Object.entries(bindings)) {
+    const bindingLayout = getShaderLayoutBinding(layout, bindingName);
+    if (bindingLayout) {
+      entries.push(getBindGroupEntry(value, bindingLayout.location));
+    }
+  }
+
+  return entries;
+}
+
+function getBindGroupEntry(binding: Binding, index: number): GPUBindGroupEntry {
+  if (binding instanceof Buffer) {
+    return {
+      binding: index,
+      resource: {
+        buffer: cast<WebGPUBuffer>(binding).handle
+      }
+    };
+  }
+  if (binding instanceof Sampler) {
+    return {
+      binding: index,
+      resource: cast<WebGPUSampler>(binding).handle
+    };
+  } else if (binding instanceof Texture) {
+    return {
+      binding: index,
+      resource: cast<WebGPUTexture>(binding).handle.createView()
+    };
+  }
+  throw new Error('invalid binding');
+}

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

@@ -0,0 +1,123 @@
+import type {ShaderLayout, BufferMapping, AttributeLayout} from '@luma.gl/api';
+import {decodeVertexFormat} from '@luma.gl/api';
+
+/**
+ * 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 bufferMap The buffer map is optional
+ * @returns WebGPU layout intended for a GPURenderPassDescriptor.
+ */
+export function getVertexBufferLayout(layout: ShaderLayout, bufferMap: BufferMapping[]): GPUVertexBufferLayout[] {
+  const vertexBufferLayouts: GPUVertexBufferLayout[] = [];
+  const usedAttributes = new Set<string>();
+
+  // First handle any buffers mentioned in `bufferMapping`
+  for (const mapping of bufferMap) {
+    // Build vertex attributes for one buffer
+    const vertexAttributes: GPUVertexAttribute[] = [];
+
+    // TODO verify that all stepModes for one buffer are the same
+    let stepMode: 'vertex' | 'instance' = 'vertex';
+    let byteStride = 0;
+    let byteOffset = mapping.byteOffset || 0;
+
+    // interleaved mapping {..., attributes: [{...}, ...]}
+    if ('attributes' in mapping) {
+      const arrayStride = mapping.byteStride;
+      for (const interleaved of mapping.attributes) {
+        const attributeLayout = findAttributeLayout(layout, interleaved.name, usedAttributes);
+
+        stepMode = attributeLayout.stepMode || 'vertex';
+        vertexAttributes.push({
+          format: attributeLayout.format,
+          offset: byteOffset + byteStride,
+          shaderLocation: attributeLayout.location
+        });
+
+        byteStride += decodeVertexFormat(attributeLayout.format).byteLength;
+      }
+      // non-interleaved mapping (just set offset and stride)
+    } else {
+      const attributeLayout = findAttributeLayout(layout, mapping.name, usedAttributes);
+      byteStride = decodeVertexFormat(attributeLayout.format).byteLength,
+
+      stepMode = attributeLayout.stepMode || 'vertex';
+      vertexAttributes.push({
+        format: attributeLayout.format,
+        offset: byteOffset,
+        shaderLocation: attributeLayout.location
+      });
+    }
+
+    // Store all the attribute bindings for one buffer
+    vertexBufferLayouts.push({
+      arrayStride: mapping.byteStride || byteStride,
+      stepMode: stepMode || 'vertex',
+      attributes: vertexAttributes
+    });
+  }
+
+  // Add any non-mapped attributes
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      vertexBufferLayouts.push({
+        arrayStride: decodeVertexFormat(attribute.format).byteLength,
+        stepMode: attribute.stepMode || 'vertex',
+        attributes: [{
+          format: attribute.format,
+          offset: 0,
+          shaderLocation: attribute.location
+        }]
+      });
+    }
+  }
+
+  return vertexBufferLayouts;
+}
+
+export function getBufferSlots(layout: ShaderLayout, bufferMap: BufferMapping[]): Record<string, number> {
+  const usedAttributes = new Set<string>();
+  let bufferSlot = 0;
+  const bufferSlots: Record<string, number> = {};
+
+  // First handle any buffers mentioned in `bufferMapping`
+  for (const mapping of bufferMap) {
+    // interleaved mapping {..., attributes: [{...}, ...]}
+    if ('attributes' in mapping) {
+      for (const interleaved of mapping.attributes) {
+        usedAttributes.add(interleaved.name);
+      }
+      // non-interleaved mapping (just set offset and stride)
+    } else {
+      usedAttributes.add(mapping.name);
+    }
+    bufferSlots[mapping.name] = bufferSlot++;
+  }
+
+  // Add any non-mapped attributes
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      bufferSlots[attribute.name] = bufferSlot++;
+    }
+  }
+
+  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(layout: ShaderLayout, name: string, attributeNames: Set<string>): AttributeLayout {
+  const attribute = layout.attributes.find(attribute => attribute.name === name);
+  if (!attribute) {
+    throw new Error(`Unknown attribute ${name}`);
+  }
+  if (attributeNames.has(name)) {
+    throw new Error(`Duplicate attribute ${name}`);
+  }
+  attributeNames.add(name);
+  return attribute;
+}