feat(core): add indexed drawing support

.changeset/lucky-bears-jump.md

@@ -0,0 +1,5 @@
+---
+"@wgpu-kit/core": minor
+---
+
+add indexed drawing support

packages/core/package.json

@@ -12,11 +12,10 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .ts ./src",
-    "test": "vitest"
+    "test": "vitest run"
   },
   "dependencies": {
-    "@webgpu/types": "0.1.34",
-    "wgsl_reflect": "github:brendan-duncan/wgsl_reflect"
+    "@webgpu/types": "0.1.34"
   },
   "devDependencies": {
     "@types/uuid": "^9.0.3",

packages/core/src/Executor.ts

@@ -92,7 +92,23 @@ export class Executor extends Mixins {
           pass.setPipeline(pipeline.gpuPipeline);
           pass.setVertexBuffer(0, vao.gpuBuffer);
           pass.setBindGroup(0, bindGroup);
-          pass.draw(vao.vertexCount, vao.instanceCount);
+          const indexBuffer = vao.indexBuffer;
+
+          if (indexBuffer?.gpuBuffer !== undefined) {
+            const fmt =
+              indexBuffer.cpuBuffer instanceof Uint32Array
+                ? "uint32"
+                : "uint16";
+            pass.setIndexBuffer(indexBuffer.gpuBuffer, fmt);
+            pass.drawIndexed(
+              indexBuffer.indexCount ?? indexBuffer.cpuBuffer.length,
+              vao.instanceCount,
+              indexBuffer.firstIndex,
+            );
+          } else {
+            pass.draw(vao.vertexCount, vao.instanceCount);
+          }
+
           pass.end();
         } else if (
           pipeline.type === "compute" &&

packages/core/src/IndexBuffer.ts

@@ -0,0 +1,69 @@
+import { WithGpuBuffer } from "./components/GpuBufferObject";
+import { WithDevice } from "./components/Device";
+import { WithLabel } from "./components/Label";
+import { WithCpuBuffer } from "./components/CpuBuffer";
+
+type IndexArray = Uint16Array | Uint32Array;
+const Mixins = WithCpuBuffer(WithGpuBuffer(WithDevice(WithLabel())));
+
+/**
+ * {@link IndexBuffer} constructor parameters
+ */
+export type IndexBufferOptions = {
+  label?: string;
+  arrayBuffer: IndexArray;
+  indexCount?: number;
+  firstIndex?: number;
+  baseIndex?: number;
+};
+
+/**
+ * An index buffer that is used in a {@link VertexAttributeObject} to
+ * use indexed drawing.
+ */
+export class IndexBuffer extends Mixins {
+  declare cpuBuffer: IndexArray;
+  indexCount?: number;
+  firstIndex?: number;
+  baseIndex?: number;
+
+  constructor(options: IndexBufferOptions) {
+    super();
+    this.label = options.label;
+    this.setCpuBuffer(options.arrayBuffer);
+    this.indexCount = options.indexCount;
+    this.firstIndex = options.firstIndex;
+    this.baseIndex = options.baseIndex;
+  }
+
+  setCpuBuffer(indexBuffer: IndexArray) {
+    this.setCpuBuffer(indexBuffer);
+  }
+
+  setIndexCount(indexCount: number) {
+    this.indexCount = indexCount;
+  }
+
+  setFirstIndex(firstIndex: number) {
+    this.firstIndex = firstIndex;
+  }
+
+  setBaseIndex(baseIndex: number) {
+    this.baseIndex = baseIndex;
+  }
+
+  async updateGpuBuffer() {
+    const device = await this.getDevice();
+    const sizeMismatch = this.cpuBuffer.byteLength !== this.gpuBuffer?.size;
+
+    if (this.gpuBuffer === undefined || sizeMismatch) {
+      this.gpuBuffer = device.createBuffer({
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        label: `${this.label ?? "Unlabelled"} Index Buffer`,
+        size: this.cpuBuffer.byteLength,
+      });
+    }
+
+    device.queue.writeBuffer(this.gpuBuffer, 0, this.cpuBuffer);
+  }
+}

packages/core/src/VertexAttributeObject.ts

@@ -3,6 +3,7 @@ import { WithDevice } from "./components/Device";
 import { WithLabel } from "./components/Label";
 import type { Attribute } from "./Attribute";
 import { WithCpuBuffer } from "./components/CpuBuffer";
+import type { IndexBuffer } from "./IndexBuffer";
 
 const Mixins = WithCpuBuffer(WithGpuBuffer(WithDevice(WithLabel())));
 
@@ -24,6 +25,7 @@ export class VertexAttributeObject extends Mixins {
   layout?: GPUVertexBufferLayout;
   vertexCount: number;
   instanceCount: number;
+  indexBuffer?: IndexBuffer;
 
   constructor(options: VAOOptions) {
     super();
@@ -45,6 +47,11 @@ export class VertexAttributeObject extends Mixins {
     this.instanceCount = count;
   }
 
+  async setIndexBuffer(indexBuffer: IndexBuffer) {
+    this.indexBuffer = indexBuffer;
+    await this.indexBuffer.updateGpuBuffer();
+  }
+
   private updateLayout(): void {
     if (this.attributes.length === 0) {
       return;

packages/core/src/index.ts

@@ -7,3 +7,4 @@ export * from "./Uniform";
 export * from "./VertexAttributeObject";
 export * from "./Texture";
 export * from "./Sampler";
+export * from "./IndexBuffer";