@bloopjs/toodle 0.0.104 → 0.1.2

package/src/backends/webgl2/glsl/quad.glsl.ts

@@ -0,0 +1,114 @@
+export const vertexShader = /*glsl*/ `#version 300 es
+precision highp float;
+
+// Engine uniforms
+uniform mat3 u_viewProjection;
+uniform vec2 u_resolution;
+
+// Instance data attributes
+// location 0-2 are the model matrix for this instanced quad (mat3 as 3 vec3s)
+layout(location = 0) in vec4 a_model0;
+layout(location = 1) in vec4 a_model1;
+layout(location = 2) in vec4 a_model2;
+// location 3 is the tint color
+layout(location = 3) in vec4 a_tint;
+// location 4 is the uv offset and scale
+layout(location = 4) in vec4 a_uvOffsetAndScale;
+// location 5 is the crop offset and scale
+layout(location = 5) in vec4 a_cropOffsetAndScale;
+// location 6 is the atlas index (integer attribute)
+layout(location = 6) in uint a_atlasIndex;
+
+// Outputs to fragment shader
+out vec4 v_uv; // xy = atlas uv, zw = original uv
+out vec4 v_tint;
+flat out int v_atlasIndex;
+
+// Lookup tables for unit quad positions and UVs
+const vec2 posLookup[4] = vec2[4](
+  vec2(-0.5, 0.5),
+  vec2(-0.5, -0.5),
+  vec2(0.5, 0.5),
+  vec2(0.5, -0.5)
+);
+
+const vec2 uvLookup[4] = vec2[4](
+  vec2(0.0, 0.0),
+  vec2(0.0, 1.0),
+  vec2(1.0, 0.0),
+  vec2(1.0, 1.0)
+);
+
+void main() {
+  // Reconstruct model matrix from instance data
+  mat3 modelMatrix = mat3(a_model0.xyz, a_model1.xyz, a_model2.xyz);
+
+  // Transform vertex position
+  vec2 localPosition = posLookup[gl_VertexID];
+  vec2 cropOffset = a_cropOffsetAndScale.xy;
+  vec2 cropScale = a_cropOffsetAndScale.zw;
+  vec2 croppedPosition = localPosition * cropScale + cropOffset;
+  vec3 worldPosition = modelMatrix * vec3(croppedPosition, 1.0);
+  vec3 clipPosition = u_viewProjection * worldPosition;
+  gl_Position = vec4(clipPosition.xy, 0.0, 1.0);
+
+  // Set UV coordinates
+  vec2 originalUv = uvLookup[gl_VertexID];
+  vec2 atlasUv = originalUv * a_uvOffsetAndScale.zw * cropScale + a_uvOffsetAndScale.xy;
+  v_uv = vec4(atlasUv, originalUv);
+
+  // Pass through tint and atlas index
+  v_tint = a_tint;
+  v_atlasIndex = int(a_atlasIndex);
+}
+
+`;
+
+/**
+ * Default fragment shader for WebGL2 quad rendering.
+ * Custom fragment shaders must follow the same contract:
+ * - Required uniforms: u_resolution, u_textureArray
+ * - Required inputs: v_uv (vec4), v_tint (vec4), v_atlasIndex (flat int)
+ * - Required output: fragColor (vec4)
+ */
+export const fragmentShader = /*glsl*/ `#version 300 es
+precision highp float;
+precision highp sampler2DArray;
+
+// Engine uniforms
+uniform vec2 u_resolution;
+
+// Texture array sampler
+uniform sampler2DArray u_textureArray;
+
+// Inputs from vertex shader
+in vec4 v_uv; // xy = atlas uv, zw = original uv
+in vec4 v_tint;
+flat in int v_atlasIndex;
+
+// Output color
+out vec4 fragColor;
+
+void main() {
+  vec2 atlasUv = v_uv.xy;
+  vec2 originalUv = v_uv.zw;
+
+  if (v_atlasIndex == 1000) {
+    // Rectangle - return solid color
+    fragColor = vec4(1.0, 1.0, 1.0, 1.0) * v_tint;
+  } else if (v_atlasIndex == 1001) {
+    // Circle
+    float edgeWidth = 4.0 / max(u_resolution.x, u_resolution.y);
+    float centerDistance = 2.0 * distance(vec2(0.5, 0.5), originalUv);
+    float alpha = 1.0 - smoothstep(1.0 - edgeWidth, 1.0 + edgeWidth, centerDistance);
+    fragColor = vec4(v_tint.rgb, alpha * v_tint.a);
+  } else {
+    // Texture - sample from texture array
+    vec4 color = texture(u_textureArray, vec3(atlasUv, float(v_atlasIndex)));
+    fragColor = color * v_tint;
+  }
+}
+`;
+
+/** Alias for users who want to extend the default shader */
+export const defaultFragmentShader = fragmentShader;

package/src/backends/webgl2/mod.ts

@@ -0,0 +1,2 @@
+export { WebGLBackend, type WebGLBackendOptions } from "./WebGLBackend";
+export { WebGLQuadShader } from "./WebGLQuadShader";

package/src/{textures → backends/webgpu}/TextureComputeShader.ts

@@ -1,12 +1,11 @@
-import computeShader from "./pixel-scraping.wgsl";
-import type { TextureWithMetadata } from "./types";
+import type { TextureWithMetadata } from "../../textures/types";
+import computeShader from "./wgsl/pixel-scraping.wgsl";
 
 // Constants
 const BOUNDING_BOX_SIZE = 4 * Uint32Array.BYTES_PER_ELEMENT;
 const WORKGROUP_SIZE = 8;
 const MAX_BOUND = 0xffffffff;
 const MIN_BOUND = 0x00000000;
-const BYTES_PER_PIXEL = 4;
 
 /**
  * The data returned by the compute shader that represents the opaque pixels in a texture.
@@ -260,51 +259,6 @@ export class TextureComputeShader {
     };
   }
 
-  /**
-   * Converts a GPUTexture to an ImageBitmap for display or further use.
-   */
-  async #textureToBitmap(
-    texture: GPUTexture,
-    width: number,
-    height: number,
-  ): Promise<ImageBitmap> {
-    const paddedBytesPerRow = Math.ceil((width * BYTES_PER_PIXEL) / 256) * 256;
-    const bufferSize = paddedBytesPerRow * height;
-
-    const readBuffer = this.#device.createBuffer({
-      size: bufferSize,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
-    });
-
-    const encoder = this.#device.createCommandEncoder();
-    encoder.copyTextureToBuffer(
-      { texture },
-      { buffer: readBuffer, bytesPerRow: paddedBytesPerRow },
-      { width, height, depthOrArrayLayers: 1 },
-    );
-    this.#device.queue.submit([encoder.finish()]);
-
-    await readBuffer.mapAsync(GPUMapMode.READ);
-    const raw = readBuffer.getMappedRange();
-    const rawArray = new Uint8Array(raw);
-
-    const pixelData = new Uint8ClampedArray(width * height * 4);
-    for (let y = 0; y < height; y++) {
-      const src = y * paddedBytesPerRow;
-      const dst = y * width * 4;
-      pixelData.set(rawArray.subarray(src, src + width * 4), dst);
-    }
-    readBuffer.unmap();
-
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d")!;
-    ctx.putImageData(new ImageData(pixelData, width, height), 0, 0);
-
-    return await createImageBitmap(canvas);
-  }
-
   // Bind group helpers
 
   #boundsBindGroup(inputTexture: GPUTexture): GPUBindGroup {

package/src/backends/webgpu/WebGPUBackend.ts

@@ -0,0 +1,350 @@
+import type { Color } from "../../coreTypes/Color";
+import type { EngineUniform } from "../../coreTypes/EngineUniform";
+import type { Size } from "../../coreTypes/Size";
+import type { Limits, LimitsOptions } from "../../limits";
+import { DEFAULT_LIMITS } from "../../limits";
+import type { CpuTextureAtlas } from "../../textures/types";
+import { assert } from "../../utils/assert";
+import type { IBackendShader, QuadShaderCreationOpts } from "../IBackendShader";
+import type { IRenderBackend } from "../IRenderBackend";
+import type {
+  ITextureAtlas,
+  TextureAtlasFormat,
+  TextureAtlasOptions,
+} from "../ITextureAtlas";
+import type { PostProcess } from "./postprocess/mod";
+import { WebGPUQuadShader } from "./WebGPUQuadShader";
+
+export type WebGPUBackendOptions = {
+  limits?: LimitsOptions;
+  format?: "rgba8unorm" | "rg8unorm";
+};
+
+/**
+ * WebGPU implementation of the render backend.
+ */
+export class WebGPUBackend implements IRenderBackend {
+  readonly type = "webgpu" as const;
+  readonly limits: Limits;
+  readonly atlasSize: Size;
+  readonly defaultAtlasId = "default";
+
+  #atlases = new Map<string, ITextureAtlas>();
+
+  #device: GPUDevice;
+  #context: GPUCanvasContext;
+  #presentationFormat: GPUTextureFormat;
+  #encoder: GPUCommandEncoder | null = null;
+  #renderPass: GPURenderPassEncoder | null = null;
+  #postprocess: PostProcess | null = null;
+  #pingpong: [GPUTexture, GPUTexture] | null = null;
+  #canvas: HTMLCanvasElement;
+
+  private constructor(
+    device: GPUDevice,
+    context: GPUCanvasContext,
+    presentationFormat: GPUTextureFormat,
+    limits: Limits,
+    canvas: HTMLCanvasElement,
+  ) {
+    this.#device = device;
+    this.#context = context;
+    this.#presentationFormat = presentationFormat;
+    this.limits = limits;
+    this.atlasSize = {
+      width: limits.textureSize,
+      height: limits.textureSize,
+    };
+    this.#canvas = canvas;
+  }
+
+  /**
+   * Create a WebGPU backend attached to a canvas.
+   */
+  static async create(
+    canvas: HTMLCanvasElement,
+    options: WebGPUBackendOptions = {},
+  ): Promise<WebGPUBackend> {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      throw new Error("WebGPU not supported: no adapter found");
+    }
+
+    const device = await adapter.requestDevice();
+    device.lost.then((info) => {
+      console.error("GPU Device lost", info);
+    });
+
+    const context = canvas.getContext("webgpu");
+    assert(context, "Could not get WebGPU context from canvas");
+
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+    context.configure({
+      device,
+      format: presentationFormat,
+    });
+
+    const limits: Limits = {
+      ...DEFAULT_LIMITS,
+      ...options.limits,
+    };
+
+    const backend = new WebGPUBackend(
+      device,
+      context,
+      presentationFormat,
+      limits,
+      canvas,
+    );
+
+    // Create the default texture atlas
+    backend.createTextureAtlas("default", {
+      format: options.format ?? "rgba8unorm",
+      layers: limits.textureArrayLayers,
+      size: limits.textureSize,
+    });
+
+    return backend;
+  }
+
+  startFrame(clearColor: Color, loadOp: "clear" | "load"): void {
+    this.#encoder = this.#device.createCommandEncoder();
+
+    // If postprocessing, render to ping-pong texture; otherwise render to canvas
+    const target = this.#postprocess
+      ? this.#pingpong![0]
+      : this.#context.getCurrentTexture();
+
+    this.#renderPass = this.#encoder.beginRenderPass({
+      label: "toodle frame",
+      colorAttachments: [
+        {
+          view: target.createView(),
+          clearValue: clearColor,
+          loadOp,
+          storeOp: "store",
+        },
+      ],
+    });
+  }
+
+  endFrame(): void {
+    assert(this.#renderPass, "No render pass - did you call startFrame?");
+    assert(this.#encoder, "No encoder - did you call startFrame?");
+
+    this.#renderPass.end();
+
+    // Run postprocessing if set
+    if (this.#postprocess && this.#pingpong) {
+      this.#postprocess.process(
+        this.#device.queue,
+        this.#encoder,
+        this.#pingpong,
+        this.#context.getCurrentTexture(),
+      );
+    }
+
+    this.#device.queue.submit([this.#encoder.finish()]);
+
+    this.#renderPass = null;
+    this.#encoder = null;
+  }
+
+  updateEngineUniform(_uniform: EngineUniform): void {
+    // Uniforms are updated per-shader in WebGPU, not at the backend level
+    // This is handled in WebGPUQuadShader.startFrame
+  }
+
+  async uploadAtlas(
+    atlas: CpuTextureAtlas,
+    layerIndex: number,
+    atlasId?: string,
+  ): Promise<void> {
+    const targetAtlas = this.getTextureAtlas(atlasId ?? "default");
+    assert(targetAtlas, `Atlas "${atlasId ?? "default"}" not found`);
+    const texture = targetAtlas.handle as GPUTexture;
+
+    if (atlas.rg8Bytes) {
+      const w = texture.width;
+      const h = texture.height;
+
+      // WebGPU requires 256-byte bytesPerRow
+      const rowBytes = w * 2;
+      assert(rowBytes % 256 === 0, "rowBytes must be a multiple of 256");
+
+      this.#device.queue.writeTexture(
+        {
+          texture,
+          origin: { x: 0, y: 0, z: layerIndex },
+        },
+        atlas.rg8Bytes,
+        { bytesPerRow: rowBytes, rowsPerImage: h },
+        { width: w, height: h, depthOrArrayLayers: 1 },
+      );
+    } else {
+      this.#device.queue.copyExternalImageToTexture(
+        {
+          source: atlas.texture,
+        },
+        {
+          texture,
+          origin: [0, 0, layerIndex],
+        },
+        [atlas.texture.width, atlas.texture.height, 1],
+      );
+    }
+  }
+
+  createQuadShader(opts: QuadShaderCreationOpts): IBackendShader {
+    return new WebGPUQuadShader(
+      opts.label,
+      this,
+      opts.instanceCount,
+      opts.userCode,
+      opts.blendMode,
+      opts.atlasId,
+    );
+  }
+
+  createTextureAtlas(id: string, options?: TextureAtlasOptions): ITextureAtlas {
+    if (this.#atlases.has(id)) {
+      throw new Error(`Atlas "${id}" already exists`);
+    }
+
+    const format: TextureAtlasFormat = options?.format ?? "rgba8unorm";
+    const layers = options?.layers ?? this.limits.textureArrayLayers;
+    const size = options?.size ?? this.limits.textureSize;
+
+    const texture = this.#device.createTexture({
+      label: `Toodle Atlas "${id}"`,
+      size: [size, size, layers],
+      format,
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    const atlas: ITextureAtlas = { id, format, layers, size, handle: texture };
+    this.#atlases.set(id, atlas);
+    return atlas;
+  }
+
+  getTextureAtlas(id?: string): ITextureAtlas | null {
+    return this.#atlases.get(id ?? "default") ?? null;
+  }
+
+  destroyTextureAtlas(id: string): void {
+    const atlas = this.#atlases.get(id);
+    if (atlas) {
+      (atlas.handle as GPUTexture).destroy();
+      this.#atlases.delete(id);
+    }
+  }
+
+  resize(_width: number, _height: number): void {
+    // Canvas resize is handled automatically by WebGPU context
+    // The presentation size updates on next getCurrentTexture()
+
+    // Recreate ping-pong textures if postprocessing is active
+    if (this.#postprocess && this.#pingpong) {
+      this.#destroyPingPongTextures();
+      this.#createPingPongTextures();
+    }
+  }
+
+  destroy(): void {
+    this.#destroyPingPongTextures();
+    // Destroy all atlases
+    for (const atlas of this.#atlases.values()) {
+      (atlas.handle as GPUTexture).destroy();
+    }
+    this.#atlases.clear();
+    this.#device.destroy();
+  }
+
+  /**
+   * Set a post-processor for screen effects.
+   * Setting a post-processor will cause the main render to go to an offscreen texture.
+   * Note: Ping-pong textures are not destroyed when setting to null to avoid
+   * race conditions with in-flight command buffers. They are cleaned up on destroy().
+   */
+  setPostprocess(processor: PostProcess | null): void {
+    this.#postprocess = processor;
+    if (processor && !this.#pingpong) {
+      this.#createPingPongTextures();
+    }
+    // Don't destroy pingpong textures when setting to null - they may still be
+    // referenced by in-flight command buffers. They'll be cleaned up on destroy().
+  }
+
+  /**
+   * Get the current post-processor.
+   */
+  getPostprocess(): PostProcess | null {
+    return this.#postprocess;
+  }
+
+  #createPingPongTextures(): void {
+    const width = this.#canvas.width;
+    const height = this.#canvas.height;
+
+    const createTexture = (label: string) =>
+      this.#device.createTexture({
+        label,
+        size: [width, height],
+        format: this.#presentationFormat,
+        usage:
+          GPUTextureUsage.RENDER_ATTACHMENT |
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_SRC,
+      });
+
+    this.#pingpong = [
+      createTexture("toodle pingpong 0"),
+      createTexture("toodle pingpong 1"),
+    ];
+  }
+
+  #destroyPingPongTextures(): void {
+    if (this.#pingpong) {
+      this.#pingpong[0].destroy();
+      this.#pingpong[1].destroy();
+      this.#pingpong = null;
+    }
+  }
+
+  /**
+   * Get the GPU device for advanced operations.
+   */
+  get device(): GPUDevice {
+    return this.#device;
+  }
+
+  /**
+   * Get the canvas context.
+   */
+  get context(): GPUCanvasContext {
+    return this.#context;
+  }
+
+  /**
+   * Get the presentation format.
+   */
+  get presentationFormat(): GPUTextureFormat {
+    return this.#presentationFormat;
+  }
+
+  /**
+   * Get the current render pass encoder.
+   * Only available between startFrame() and endFrame().
+   */
+  get renderPass(): GPURenderPassEncoder {
+    assert(
+      this.#renderPass,
+      "No render pass available - did you call startFrame?",
+    );
+    return this.#renderPass;
+  }
+}