@bloopjs/toodle 0.0.103 → 0.1.1

package/src/{shaders/QuadShader.ts → backends/webgpu/WebGPUQuadShader.ts}

@@ -4,134 +4,86 @@ import {
   type StructuredView,
 } from "webgpu-utils";
 import { WgslReflect } from "wgsl_reflect";
-import type { SceneNode } from "../scene/SceneNode";
-import type { AssetManager } from "../textures/AssetManager";
-import { assert } from "../utils/assert";
+import type { EngineUniform } from "../../coreTypes/EngineUniform";
+import type { SceneNode } from "../../scene/SceneNode";
+import { assert } from "../../utils/assert";
 import {
-  attachVertexInstanceBuffer,
   createGpuPipeline,
   getGpuPipelineDescriptor,
   setVertexInstanceBufferLayout,
-} from "../utils/boilerplate";
-import type { EngineUniform } from "./EngineUniform";
-import type { IShader } from "./IShader";
+} from "../../utils/boilerplate";
+import type { IBackendShader } from "../IBackendShader";
+import type { BlendMode } from "../IRenderBackend";
+import type { ITextureAtlas } from "../ITextureAtlas";
 import {
   codeWithLineNumbers,
   combineShaderCode,
   struct2BufferLayout,
 } from "./parser";
 import { pixelArtSampler, smoothSampler } from "./samplers";
+import type { WebGPUBackend } from "./WebGPUBackend";
 import quadWgsl from "./wgsl/quad.wgsl";
 
-export type QuadShaderOpts = {
-  assetManager?: AssetManager;
-  blendMode?: GPUBlendState;
+type InstanceData = {
+  cpuBuffer: Float32Array<ArrayBuffer>;
+  gpuBuffer: GPUBuffer;
+  bufferLayout: GPUVertexBufferLayout;
 };
 
-export class QuadShader implements IShader {
-  label: string;
-  code: string;
+/**
+ * WebGPU implementation of quad shader for instanced rendering.
+ */
+export class WebGPUQuadShader implements IBackendShader {
+  readonly label: string;
+  readonly code: string;
 
+  #backend: WebGPUBackend;
+  #atlas: ITextureAtlas;
   #uniformValues: StructuredView;
   #instanceData: InstanceData;
   #instanceIndex = 0;
-  #instanceCount;
+  #instanceCount: number;
 
-  #device: GPUDevice;
   #pipeline: GPURenderPipeline;
   #bindGroups: GPUBindGroup[] = [];
   #uniformBuffer: GPUBuffer;
 
-  startFrame(device: GPUDevice, uniform: EngineUniform) {
-    this.#instanceIndex = 0;
-
-    this.#uniformValues.set(uniform);
-    this.#uniformValues.set({
-      viewProjection: uniform.viewProjectionMatrix,
-      resolution: [uniform.resolution.width, uniform.resolution.height],
-    });
-
-    // Write view projection matrix to uniform buffer
-    device.queue.writeBuffer(
-      this.#uniformBuffer,
-      0,
-      this.#uniformValues.arrayBuffer,
-    );
-  }
-
-  processBatch(renderPass: GPURenderPassEncoder, nodes: SceneNode[]) {
-    renderPass.setPipeline(this.#pipeline);
-    const batchStartInstanceIndex = this.#instanceIndex;
-
-    // Count for the number of instances in the buffer...
-    let instanceCount = 0;
-
-    if (nodes.length > this.#instanceCount) {
-      throw new Error(
-        `ToodleInstanceCap: ${nodes.length} instances enqueued, max is ${this.#instanceCount} for ${this.label} shader`,
-      );
-    }
-
-    for (let i = 0; i < nodes.length; i++) {
-      if (!this.#instanceData) {
-        continue;
-      }
-      const instance = nodes[i];
-      assert(instance.renderComponent, "instance has no render component");
-      const floatOffset =
-        ((batchStartInstanceIndex + instanceCount) *
-          this.#instanceData.bufferLayout.arrayStride) /
-        Float32Array.BYTES_PER_ELEMENT;
-
-      instanceCount += instance.renderComponent.writeInstance(
-        instance,
-        this.#instanceData.cpuBuffer,
-        floatOffset,
-      );
-    }
-
-    if (this.#instanceData) {
-      const byteOffset =
-        batchStartInstanceIndex * this.#instanceData.bufferLayout.arrayStride;
-      const byteLength =
-        instanceCount * this.#instanceData.bufferLayout.arrayStride;
-
-      this.#device.queue.writeBuffer(
-        this.#instanceData.gpuBuffer,
-        byteOffset,
-        this.#instanceData.cpuBuffer,
-        byteOffset / Float32Array.BYTES_PER_ELEMENT,
-        byteLength / Float32Array.BYTES_PER_ELEMENT,
-      );
-
-      attachVertexInstanceBuffer(renderPass, this.#instanceData.gpuBuffer);
-
-      for (let i = 0; i < this.#bindGroups.length; i++) {
-        renderPass.setBindGroup(i, this.#bindGroups[i]);
-      }
-    }
-
-    this.#instanceIndex += instanceCount;
-
-    renderPass.draw(4, instanceCount, 0, batchStartInstanceIndex);
-    return 1;
-  }
-
-  endFrame() {}
-
   constructor(
     label: string,
-    assetManager: AssetManager,
-    device: GPUDevice,
-    presentationFormat: GPUTextureFormat,
-    userCode: string,
+    backend: WebGPUBackend,
     instanceCount: number,
-    blendMode?: GPUBlendState,
+    userCode?: string,
+    blendMode?: BlendMode,
+    atlasId?: string,
   ) {
+    const atlas = backend.getTextureAtlas(atlasId ?? "default");
+    if (!atlas) {
+      throw new Error(`Atlas "${atlasId ?? "default"}" not found`);
+    }
+    this.#atlas = atlas;
     this.label = label;
+    this.#backend = backend;
+    this.#instanceCount = instanceCount;
+
+    const device = backend.device;
+    const presentationFormat = backend.presentationFormat;
 
     // Combine user code with base quad shader code
-    const shaderDescriptor = combineShaderCode(label, quadWgsl, userCode);
+    const effectiveUserCode =
+      userCode ??
+      /*wgsl*/ `
+			@fragment
+			fn frag(vertex: VertexOutput) -> @location(0) vec4f {
+				let color = default_fragment_shader(vertex, linearSampler);
+				return color;
+			}
+		`;
+
+    const shaderDescriptor = combineShaderCode(
+      label,
+      quadWgsl,
+      effectiveUserCode,
+    );
 
     // Create shader module from combined code
     let module: GPUShaderModule;
@@ -149,18 +101,20 @@ export class QuadShader implements IShader {
     this.code = shaderDescriptor.code;
 
     // Create blend state
-    const blend = blendMode ?? {
-      color: {
-        srcFactor: "src-alpha",
-        dstFactor: "one-minus-src-alpha",
-        operation: "add",
-      },
-      alpha: {
-        srcFactor: "one",
-        dstFactor: "one-minus-src-alpha",
-        operation: "add",
-      },
-    };
+    const blend = blendMode
+      ? convertBlendMode(blendMode)
+      : {
+          color: {
+            srcFactor: "src-alpha" as GPUBlendFactor,
+            dstFactor: "one-minus-src-alpha" as GPUBlendFactor,
+            operation: "add" as GPUBlendOperation,
+          },
+          alpha: {
+            srcFactor: "one" as GPUBlendFactor,
+            dstFactor: "one-minus-src-alpha" as GPUBlendFactor,
+            operation: "add" as GPUBlendOperation,
+          },
+        };
 
     // Create instance data from shader code
     const ast = new WgslReflect(shaderDescriptor.code);
@@ -208,12 +162,6 @@ export class QuadShader implements IShader {
       pipelineDescriptor,
     );
 
-    // Reference texture atlas
-    const textureAtlas = assetManager.textureAtlas;
-
-    // Store device
-    this.#device = device;
-
     // Create uniform buffer for engine uniforms (mat3x3 viewProjection)
     const defs = makeShaderDataDefinitions(this.code);
     this.#uniformValues = makeStructuredView(defs.uniforms.engineUniform);
@@ -224,65 +172,173 @@ export class QuadShader implements IShader {
     });
 
     // Create bind groups
-    this.#bindGroups = setQuadBindGroups(
-      label,
-      device,
-      this.#pipeline,
-      textureAtlas,
+    this.#bindGroups = this.#createBindGroups(device);
+  }
+
+  startFrame(uniform: EngineUniform): void {
+    this.#instanceIndex = 0;
+
+    this.#uniformValues.set(uniform);
+    this.#uniformValues.set({
+      viewProjection: uniform.viewProjectionMatrix,
+      resolution: [uniform.resolution.width, uniform.resolution.height],
+    });
+
+    // Write view projection matrix to uniform buffer
+    const device = this.#backend.device;
+    device.queue.writeBuffer(
       this.#uniformBuffer,
+      0,
+      this.#uniformValues.arrayBuffer,
     );
+  }
 
-    this.#instanceCount = instanceCount;
+  processBatch(nodes: SceneNode[]): number {
+    const device = this.#backend.device;
+    const renderPass = this.#backend.renderPass;
+
+    renderPass.setPipeline(this.#pipeline);
+    const batchStartInstanceIndex = this.#instanceIndex;
+
+    let instanceCount = 0;
+
+    if (nodes.length > this.#instanceCount) {
+      throw new Error(
+        `ToodleInstanceCap: ${nodes.length} instances enqueued, max is ${this.#instanceCount} for ${this.label} shader`,
+      );
+    }
+
+    for (let i = 0; i < nodes.length; i++) {
+      if (!this.#instanceData) {
+        continue;
+      }
+      const instance = nodes[i];
+      assert(instance.renderComponent, "instance has no render component");
+      const floatOffset =
+        ((batchStartInstanceIndex + instanceCount) *
+          this.#instanceData.bufferLayout.arrayStride) /
+        Float32Array.BYTES_PER_ELEMENT;
+
+      instanceCount += instance.renderComponent.writeInstance(
+        instance,
+        this.#instanceData.cpuBuffer,
+        floatOffset,
+      );
+    }
+
+    if (this.#instanceData) {
+      const byteOffset =
+        batchStartInstanceIndex * this.#instanceData.bufferLayout.arrayStride;
+      const byteLength =
+        instanceCount * this.#instanceData.bufferLayout.arrayStride;
+
+      device.queue.writeBuffer(
+        this.#instanceData.gpuBuffer,
+        byteOffset,
+        this.#instanceData.cpuBuffer,
+        byteOffset / Float32Array.BYTES_PER_ELEMENT,
+        byteLength / Float32Array.BYTES_PER_ELEMENT,
+      );
+
+      renderPass.setVertexBuffer(0, this.#instanceData.gpuBuffer);
+
+      for (let i = 0; i < this.#bindGroups.length; i++) {
+        renderPass.setBindGroup(i, this.#bindGroups[i]);
+      }
+    }
+
+    this.#instanceIndex += instanceCount;
+
+    renderPass.draw(4, instanceCount, 0, batchStartInstanceIndex);
+    return 1;
+  }
+
+  endFrame(): void {
+    // Nothing to do
   }
-}
 
-function setQuadBindGroups(
-  label: string,
-  device: GPUDevice,
-  pipeline: GPURenderPipeline,
-  textureAtlas: GPUTexture,
-  buffer: GPUBuffer,
-) {
-  const bindGroup = device.createBindGroup({
-    label: `${label} engine bind group`,
-    layout: pipeline.getBindGroupLayout(0),
-    entries: [
-      {
-        binding: 0,
-        resource: {
-          buffer,
+  #createBindGroups(device: GPUDevice): GPUBindGroup[] {
+    const textureAtlas = this.#atlas.handle as GPUTexture;
+
+    const bindGroup = device.createBindGroup({
+      label: `${this.label} engine bind group`,
+      layout: this.#pipeline.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: {
+            buffer: this.#uniformBuffer,
+          },
         },
-      },
-      {
-        binding: 1,
-        resource: device.createSampler(smoothSampler),
-      },
-      {
-        binding: 2,
-        resource: device.createSampler(pixelArtSampler),
-      },
-    ],
-  });
-
-  const atlasBindGroup = device.createBindGroup({
-    label: `${label} atlas bind group`,
-    layout: pipeline.getBindGroupLayout(1),
-    entries: [
-      {
-        binding: 0,
-        resource: textureAtlas.createView({
-          dimension: "2d-array",
-          arrayLayerCount: textureAtlas.depthOrArrayLayers,
-        }),
-      },
-    ],
-  });
-
-  return [bindGroup, atlasBindGroup];
+        {
+          binding: 1,
+          resource: device.createSampler(smoothSampler),
+        },
+        {
+          binding: 2,
+          resource: device.createSampler(pixelArtSampler),
+        },
+      ],
+    });
+
+    const atlasBindGroup = device.createBindGroup({
+      label: `${this.label} atlas bind group`,
+      layout: this.#pipeline.getBindGroupLayout(1),
+      entries: [
+        {
+          binding: 0,
+          resource: textureAtlas.createView({
+            dimension: "2d-array",
+            arrayLayerCount: textureAtlas.depthOrArrayLayers,
+          }),
+        },
+      ],
+    });
+
+    return [bindGroup, atlasBindGroup];
+  }
 }
 
-type InstanceData = {
-  cpuBuffer: Float32Array<ArrayBuffer>;
-  gpuBuffer: GPUBuffer;
-  bufferLayout: GPUVertexBufferLayout;
-};
+function convertBlendMode(mode: BlendMode): GPUBlendState {
+  const convertFactor = (f: string): GPUBlendFactor => {
+    const map: Record<string, GPUBlendFactor> = {
+      one: "one",
+      zero: "zero",
+      "src-alpha": "src-alpha",
+      "one-minus-src-alpha": "one-minus-src-alpha",
+      "dst-alpha": "dst-alpha",
+      "one-minus-dst-alpha": "one-minus-dst-alpha",
+    };
+    const result = map[f];
+    if (!result) {
+      throw new Error(`Unknown blend factor: ${f}`);
+    }
+    return result;
+  };
+
+  const convertOp = (o: string): GPUBlendOperation => {
+    const map: Record<string, GPUBlendOperation> = {
+      add: "add",
+      subtract: "subtract",
+      "reverse-subtract": "reverse-subtract",
+    };
+    const result = map[o];
+    if (!result) {
+      throw new Error(`Unknown blend operation: ${o}`);
+    }
+    return result;
+  };
+
+  return {
+    color: {
+      srcFactor: convertFactor(mode.color.srcFactor),
+      dstFactor: convertFactor(mode.color.dstFactor),
+      operation: convertOp(mode.color.operation),
+    },
+    alpha: {
+      srcFactor: convertFactor(mode.alpha.srcFactor),
+      dstFactor: convertFactor(mode.alpha.dstFactor),
+      operation: convertOp(mode.alpha.operation),
+    },
+  };
+}

package/src/backends/webgpu/mod.ts

@@ -0,0 +1,2 @@
+export { WebGPUBackend, type WebGPUBackendOptions } from "./WebGPUBackend";
+export { WebGPUQuadShader } from "./WebGPUQuadShader";

package/src/{shaders → backends/webgpu}/parser.ts

@@ -120,7 +120,7 @@ function findStartingLocation(struct: StructInfo) {
       (attr) => attr.name === "location",
     );
     if (locationAttr) {
-      const location = Number.parseInt(locationAttr.value as string);
+      const location = Number.parseInt(locationAttr.value as string, 10);
       startingLocation = Math.max(startingLocation, location);
     }
   }
@@ -164,7 +164,7 @@ export function struct2BufferLayout(
         throw new Error(`Location attribute is an array for member: ${m.name}`);
       }
 
-      const shaderLocation = Number.parseInt(location);
+      const shaderLocation = Number.parseInt(location, 10);
       if (Number.isNaN(shaderLocation)) {
         throw new Error(
           `Invalid location attribute: ${location} for member: ${m.name}`,

package/src/{shaders → backends/webgpu}/postprocess/blur.ts

@@ -1,4 +1,4 @@
-import type { Color } from "../../coreTypes/Color";
+import type { Color } from "../../../coreTypes/Color";
 import { PostProcessDefaults } from "./mod";
 
 // example of a blur post-process effect using a two-pass Gaussian blur
@@ -16,7 +16,7 @@ export function blur(
   const lines = weights.map((w) => w.toFixed(7)).join(", ");
   const wgslFragment = `let weights = array<f32, ${weights.length}>(${lines});`;
 
-  const brightPipeline = device.createRenderPipeline({
+  const _brightPipeline = device.createRenderPipeline({
     ...PostProcessDefaults.pipelineDescriptor(device),
     label: "toodle post process - brightness pass",
     fragment: {

package/src/{shaders → backends/webgpu}/postprocess/mod.ts

@@ -26,7 +26,7 @@ export const PostProcessDefaults = {
     });
   },
 
-  vertexBufferLayout(device: GPUDevice): GPUVertexBufferLayout {
+  vertexBufferLayout(_device: GPUDevice): GPUVertexBufferLayout {
     return {
       arrayStride: 4 * 4,
       attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],

package/src/mod.ts

@@ -4,8 +4,9 @@ export type * from "./coreTypes/mod";
 
 export type * from "./scene/QuadNode";
 export type * from "./scene/SceneNode";
-export type * from "./shaders/QuadShader";
 export type * from "./text/TextNode";
+export type * from "./backends/IBackendShader";
+export type * from "./backends/IRenderBackend";
 
 export * from "./limits";
 export * from "./Toodle";
@@ -14,7 +15,7 @@ export * as Colors from "./colors/mod";
 export * as GfxMath from "./math/mod";
 export * as Scene from "./scene/mod";
 export * as Screen from "./screen/mod";
-export * as Shaders from "./shaders/mod";
+export * as Backends from "./backends/mod";
 export * as Text from "./text/mod";
 export * as Textures from "./textures/mod";
 export * as Utils from "./utils/mod";

package/src/scene/Batcher.ts

@@ -1,4 +1,4 @@
-import type { IShader } from "../shaders/IShader";
+import type { IBackendShader } from "../backends/IBackendShader";
 import type { SceneNode } from "./SceneNode";
 
 type Layer = {
@@ -7,7 +7,7 @@ type Layer = {
 };
 
 export type Pipeline<TNode extends SceneNode = SceneNode> = {
-  shader: IShader;
+  shader: IBackendShader;
   nodes: TNode[];
 };
 
@@ -49,7 +49,7 @@ export class Batcher {
     return layer;
   }
 
-  #findOrCreatePipeline(layer: Layer, shader: IShader) {
+  #findOrCreatePipeline(layer: Layer, shader: IBackendShader) {
     let pipeline = layer.pipelines.find((p) => p.shader === shader);
     if (!pipeline) {
       pipeline = { shader, nodes: [] };

package/src/scene/QuadNode.ts

@@ -1,8 +1,8 @@
 import { type Mat3, mat3 } from "wgpu-matrix";
+import type { IBackendShader } from "../backends/IBackendShader";
 import type { Color } from "../coreTypes/Color";
 import type { Size } from "../coreTypes/Size";
 import type { Vec2 } from "../coreTypes/Vec2";
-import type { IShader } from "../shaders/IShader";
 import type { Toodle } from "../Toodle";
 import type { AssetManager, TextureId } from "../textures/AssetManager";
 import type { AtlasCoords, TexelRegion } from "../textures/types";
@@ -57,10 +57,7 @@ export class QuadNode extends SceneNode {
       options.shader,
       "QuadNode requires a shader to be explicitly provided",
     );
-    assert(
-      options.idealSize,
-      "QuadNode requires an ideal size to be explicitly provided",
-    );
+    assert(options.size, "QuadNode requires a size to be explicitly provided");
 
     assert(
       options.atlasCoords,
@@ -147,6 +144,10 @@ export class QuadNode extends SceneNode {
     return size;
   }
 
+  set size(val: Size) {
+    super.size = val;
+  }
+
   /**
    * This is the final model matrix used to render the quad, which
    * may differ from the matrix passed down to the node's children.
@@ -305,7 +306,7 @@ export type QuadOptions = NodeOptions & {
 
   assetManager?: AssetManager;
 
-  shader?: IShader;
+  shader?: IBackendShader;
   writeInstance?: (array: Float32Array, offset: number) => void;
   color?: Color;
   /**

package/src/scene/RenderComponent.ts

@@ -1,8 +1,8 @@
-import type { IShader } from "../shaders/IShader";
+import type { IBackendShader } from "../backends/IBackendShader";
 import type { SceneNode } from "./SceneNode";
 
 export type RenderComponent = {
-  shader: IShader;
+  shader: IBackendShader;
   data?: Float32Array;
 
   /**

package/src/scene/SceneNode.ts

@@ -27,7 +27,7 @@ export class SceneNode {
   #transform: Transform;
   #matrix: Mat3 = mat3.identity();
   #renderComponent: RenderComponent | null = null;
-  #idealSize: Size | null = null;
+  #size: Size | null = null;
   #positionProxy: Point;
   #scaleProxy: Vec2;
 
@@ -45,7 +45,7 @@ export class SceneNode {
     this.#transform = {
       position: opts?.position ?? { x: 0, y: 0 },
       scale: { x: 1, y: 1 },
-      size: opts?.idealSize ?? { width: 1, height: 1 },
+      size: opts?.size ?? { width: 1, height: 1 },
       rotation: opts?.rotationRadians ?? 0,
     };
     if (opts?.scale) this.scale = opts.scale;
@@ -56,7 +56,7 @@ export class SceneNode {
     this.#layer = opts?.layer ?? null;
     this.#isActive = opts?.isActive ?? true;
     this.label = opts?.label ?? undefined;
-    this.#idealSize = opts?.idealSize ?? null;
+    this.#size = opts?.size ?? null;
     this.#key = opts?.key ?? null;
 
     for (const kid of opts?.kids ?? []) {
@@ -246,17 +246,16 @@ export class SceneNode {
     this.setDirty();
   }
 
-  set idealSize(value: Size | null) {
-    this.#idealSize = value;
-    this.setDirty();
-  }
-
   /**
    * The size of the node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/quad-size-scale.html
    */
+  set size(value: Size | null) {
+    this.#size = value;
+    this.setDirty();
+  }
 
   get size() {
-    return this.#idealSize;
+    return this.#size;
   }
 
   /**
@@ -264,13 +263,13 @@ export class SceneNode {
    * If the node has no defined size, the aspect ratio will be 1.
    */
   get aspectRatio() {
-    if (!this.#idealSize) {
+    if (!this.#size) {
       console.warn(
         "Attempted to get aspect ratio of a node with no ideal size",
       );
       return 1;
     }
-    return this.#idealSize.width / this.#idealSize.height;
+    return this.#size.width / this.#size.height;
   }
 
   /**
@@ -592,7 +591,7 @@ export type NodeOptions = {
   /** The scale for the node. */
   scale?: Vec2 | number;
   /** The desired size for the node. */
-  idealSize?: Size;
+  size?: Size;
   /** The active state for the node. */
   isActive?: boolean;
   /** The kids for the node. */