@bloopjs/toodle 0.0.100

package/src/textures/TextureComputeShader.ts

@@ -0,0 +1,434 @@
+import computeShader from "./pixel-scraping.wgsl";
+import type { TextureWithMetadata } from "./types";
+
+// 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.
+ * Texel coordinates start at 0,0 in the top-left corner of the texture.
+ */
+type OpaqueRect = {
+  /** The leftmost texel coordinate of the bounding box. */
+  texelX: number;
+  /** The topmost texel coordinate of the bounding box. */
+  texelY: number;
+  /** The width of the bounding box in texels. */
+  texelWidth: number;
+  /** The height of the bounding box in texels. */
+  texelHeight: number;
+};
+
+/**
+ * A GPU-based texture processor that uses compute shaders to:
+ * 1. Find the non-transparent bounding box in a texture.
+ * 2. Crop the texture to that bounding box.
+ * 3. Create a fallback texture if no non-transparent pixels are found.
+ */
+export class TextureComputeShader {
+  #device: GPUDevice;
+  #boundingBuffer: GPUBuffer;
+  #cropPipeline: GPUComputePipeline;
+  #boundPipeline: GPUComputePipeline;
+  #missingTexturePipeline: GPUComputePipeline;
+
+  constructor(
+    device: GPUDevice,
+    cropPipeline: GPUComputePipeline,
+    boundPipeline: GPUComputePipeline,
+    missingTexturePipeline: GPUComputePipeline,
+  ) {
+    this.#device = device;
+    this.#boundPipeline = boundPipeline;
+    this.#cropPipeline = cropPipeline;
+    this.#missingTexturePipeline = missingTexturePipeline;
+
+    // Buffer to store the computed bounding box [minX, minY, maxX, maxY]
+    this.#boundingBuffer = this.#device.createBuffer({
+      size: BOUNDING_BOX_SIZE,
+      usage:
+        GPUBufferUsage.STORAGE |
+        GPUBufferUsage.COPY_SRC |
+        GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  /**
+   * Factory method to initialize pipelines and return an instance of TextureComputeShader.
+   */
+  static create(device: GPUDevice) {
+    const pipelines = createPipelines(device, "TextureComputeShader");
+    return new TextureComputeShader(
+      device,
+      pipelines.cropPipeline,
+      pipelines.boundPipeline,
+      pipelines.missingTexturePipeline,
+    );
+  }
+
+  /**
+   * Main entry point to process a texture.
+   * Returns a cropped ImageBitmap and metadata.
+   */
+  async processTexture(
+    textureWrapper: TextureWithMetadata,
+  ): Promise<TextureWithMetadata> {
+    const boundsBindGroup = this.#boundsBindGroup(textureWrapper.texture);
+
+    const commandEncoder = this.#device.createCommandEncoder();
+    const passEncoder = commandEncoder.beginComputePass();
+
+    const dispatchX = Math.ceil(textureWrapper.texture.width / WORKGROUP_SIZE);
+    const dispatchY = Math.ceil(textureWrapper.texture.height / WORKGROUP_SIZE);
+
+    // Initialize bounding box with max/min values
+    const boundsInit = new Uint32Array([
+      MAX_BOUND,
+      MAX_BOUND,
+      MIN_BOUND,
+      MIN_BOUND,
+    ]);
+    this.#device.queue.writeBuffer(
+      this.#boundingBuffer,
+      0,
+      boundsInit.buffer,
+      0,
+      BOUNDING_BOX_SIZE,
+    );
+
+    // Run bounds detection compute shader
+    passEncoder.setPipeline(this.#boundPipeline);
+    passEncoder.setBindGroup(0, boundsBindGroup);
+    passEncoder.dispatchWorkgroups(dispatchX, dispatchY);
+    passEncoder.end();
+    this.#device.queue.submit([commandEncoder.finish()]);
+
+    const { texelX, texelY, texelWidth, texelHeight, computeBuffer } =
+      await this.#getBoundingBox();
+
+    // If no non-transparent pixels were found
+    if (texelX === MAX_BOUND || texelY === MAX_BOUND) {
+      return await this.#createMissingTexture(textureWrapper.texture);
+    }
+
+    // Crop the texture to the computed bounds
+    const croppedTexture = await this.#cropTexture(
+      texelWidth,
+      texelHeight,
+      computeBuffer,
+      textureWrapper.texture,
+    );
+
+    const leftCrop = texelX;
+    const rightCrop = textureWrapper.originalSize.width - texelX - texelWidth;
+    const topCrop = texelY;
+    const bottomCrop =
+      textureWrapper.originalSize.height - texelY - texelHeight;
+
+    textureWrapper = {
+      texture: croppedTexture,
+      cropOffset: { x: leftCrop - rightCrop, y: bottomCrop - topCrop },
+      originalSize: textureWrapper.originalSize,
+    };
+
+    return textureWrapper;
+  }
+
+  /**
+   * Reads the GPU buffer containing the bounding box.
+   */
+  async #getBoundingBox(): Promise<
+    OpaqueRect & { computeBuffer: Uint32Array }
+  > {
+    const readBuffer = this.#device.createBuffer({
+      label: "AABB Compute Buffer",
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+    });
+
+    const copyEncoder = this.#device.createCommandEncoder();
+    copyEncoder.copyBufferToBuffer(
+      this.#boundingBuffer,
+      0,
+      readBuffer,
+      0,
+      BOUNDING_BOX_SIZE,
+    );
+    this.#device.queue.submit([copyEncoder.finish()]);
+
+    await readBuffer.mapAsync(GPUMapMode.READ);
+    const computeBuffer = new Uint32Array(readBuffer.getMappedRange().slice(0));
+    readBuffer.unmap();
+
+    const [minX, minY, maxX, maxY] = computeBuffer;
+    return {
+      texelX: minX,
+      texelY: minY,
+      texelWidth: maxX - minX + 1,
+      texelHeight: maxY - minY + 1,
+
+      computeBuffer,
+    };
+  }
+
+  /**
+   * Crops the original texture to the specified bounds using a compute shader.
+   */
+  async #cropTexture(
+    croppedWidth: number,
+    croppedHeight: number,
+    computeBuffer: Uint32Array,
+    inputTexture: GPUTexture,
+  ) {
+    const boundsUniform = this.#device.createBuffer({
+      label: "Cropping Bounds Uniform Buffer",
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    this.#device.queue.writeBuffer(boundsUniform, 0, computeBuffer);
+
+    const outputTexture = this.#device.createTexture({
+      label: "Cropped Texture",
+      size: [croppedWidth, croppedHeight],
+      format: "rgba8unorm",
+      usage:
+        GPUTextureUsage.STORAGE_BINDING |
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_SRC,
+    });
+
+    const dimensionsOutBuffer = this.#device.createBuffer({
+      label: "Cropping Dimensions Output Buffer",
+      size: BOUNDING_BOX_SIZE,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+    });
+
+    const bindGroup = this.#croppingBindGroup(
+      inputTexture,
+      outputTexture,
+      boundsUniform,
+      dimensionsOutBuffer,
+    );
+
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.#cropPipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.dispatchWorkgroups(
+      Math.ceil(croppedWidth / WORKGROUP_SIZE),
+      Math.ceil(croppedHeight / WORKGROUP_SIZE),
+    );
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+
+    return outputTexture;
+  }
+
+  /**
+   * Creates a fallback placeholder texture if the input is fully transparent.
+   */
+  async #createMissingTexture(
+    inputTexture: GPUTexture,
+  ): Promise<TextureWithMetadata> {
+    const placeholder = this.#device.createTexture({
+      label: "Missing Placeholder Texture",
+      size: [inputTexture.width, inputTexture.height],
+      format: "rgba8unorm",
+      usage:
+        GPUTextureUsage.COPY_SRC |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.STORAGE_BINDING |
+        GPUTextureUsage.TEXTURE_BINDING,
+    });
+
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.#missingTexturePipeline);
+    pass.setBindGroup(0, this.#missingTextureBindGroup(placeholder));
+    pass.dispatchWorkgroups(placeholder.width / 8, placeholder.height / 8);
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+
+    return {
+      texture: placeholder,
+      cropOffset: { x: 0, y: 0 },
+      originalSize: { width: inputTexture.width, height: inputTexture.height },
+    };
+  }
+
+  /**
+   * 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 {
+    return this.#device.createBindGroup({
+      layout: this.#boundPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: inputTexture.createView() },
+        { binding: 1, resource: { buffer: this.#boundingBuffer } },
+      ],
+    });
+  }
+
+  #croppingBindGroup(
+    inputTexture: GPUTexture,
+    outputTexture: GPUTexture,
+    boundsUniform: GPUBuffer,
+    dimensionsOutBuffer: GPUBuffer,
+  ): GPUBindGroup {
+    return this.#device.createBindGroup({
+      layout: this.#cropPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: inputTexture.createView() },
+        { binding: 1, resource: outputTexture.createView() },
+        { binding: 2, resource: { buffer: boundsUniform } },
+        { binding: 3, resource: { buffer: dimensionsOutBuffer } },
+      ],
+    });
+  }
+
+  #missingTextureBindGroup(outputTexture: GPUTexture): GPUBindGroup {
+    return this.#device.createBindGroup({
+      layout: this.#missingTexturePipeline.getBindGroupLayout(0),
+      entries: [{ binding: 0, resource: outputTexture.createView() }],
+    });
+  }
+}
+
+/**
+ * Creates compute pipelines for bounding box detection, cropping, and fallback texture generation.
+ */
+function createPipelines(device: GPUDevice, label: string) {
+  const shader = device.createShaderModule({
+    label: `${label} Shader`,
+    code: computeShader,
+  });
+
+  const findBoundsBindGroupLayout = device.createBindGroupLayout({
+    label: "Bounds Detection Layout",
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        texture: { sampleType: "float", viewDimension: "2d" },
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" },
+      },
+    ],
+  });
+
+  const cropBindGroupLayout = device.createBindGroupLayout({
+    label: "Cropping Layout",
+    entries: [
+      { binding: 0, visibility: GPUShaderStage.COMPUTE, texture: {} },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: {
+          access: "write-only",
+          format: "rgba8unorm",
+          viewDimension: "2d",
+        },
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" },
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" },
+      },
+    ],
+  });
+
+  const missingTextureBindGroupLayout = device.createBindGroupLayout({
+    label: "Missing Texture Layout",
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: {
+          access: "write-only",
+          format: "rgba8unorm",
+          viewDimension: "2d",
+        },
+      },
+    ],
+  });
+
+  return {
+    boundPipeline: device.createComputePipeline({
+      label: `${label} - Find Bounds Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [findBoundsBindGroupLayout],
+      }),
+      compute: { module: shader, entryPoint: "find_bounds" },
+    }),
+    cropPipeline: device.createComputePipeline({
+      label: `${label} - Crop Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [cropBindGroupLayout],
+      }),
+      compute: { module: shader, entryPoint: "crop_and_output" },
+    }),
+    missingTexturePipeline: device.createComputePipeline({
+      label: `${label} - Missing Texture Pipeline`,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [missingTextureBindGroupLayout],
+      }),
+      compute: { module: shader, entryPoint: "missing_texture" },
+    }),
+  };
+}

package/src/textures/mod.ts

@@ -0,0 +1 @@
+export type * from "./types";

package/src/textures/pixel-scraping.wgsl.ts

@@ -0,0 +1,131 @@
+export default /*wgsl*/ `
+// ==============================
+// === BOUNDING BOX PASS =======
+// ==============================
+
+// Input texture from which to compute the non-transparent bounding box
+@group(0) @binding(0)
+var input_texture: texture_2d<f32>;
+
+// Atomic bounding box storage structure
+struct bounding_box_atomic {
+    min_x: atomic<u32>,
+    min_y: atomic<u32>,
+    max_x: atomic<u32>,
+    max_y: atomic<u32>,
+};
+
+// Storage buffer to hold atomic bounding box updates
+@group(0) @binding(1)
+var<storage, read_write> bounds: bounding_box_atomic;
+
+// Compute shader to find the bounding box of non-transparent pixels
+@compute @workgroup_size(8, 8)
+fn find_bounds(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let size = textureDimensions(input_texture).xy;
+    if (gid.x >= size.x || gid.y >= size.y) {
+        return;
+    }
+
+    let pixel = textureLoad(input_texture, vec2<i32>(gid.xy), 0);
+    if (pixel.a > 0.0) {
+        atomicMin(&bounds.min_x, gid.x);
+        atomicMin(&bounds.min_y, gid.y);
+        atomicMax(&bounds.max_x, gid.x);
+        atomicMax(&bounds.max_y, gid.y);
+    }
+}
+
+// ==============================
+// === CROP + OUTPUT PASS ======
+// ==============================
+
+// Input texture from which cropped data is read
+@group(0) @binding(0)
+var input_texture_crop: texture_2d<f32>;
+
+// Output texture where cropped image is written
+@group(0) @binding(1)
+var output_texture: texture_storage_2d<rgba8unorm, write>;
+
+// Bounding box passed in as a uniform (not atomic anymore)
+struct bounding_box_uniform {
+    min_x: u32,
+    min_y: u32,
+    max_x: u32,
+    max_y: u32,
+};
+
+@group(0) @binding(2)
+var<uniform> bounds_uniform: bounding_box_uniform;
+
+// Struct to store both original and cropped texture dimensions
+struct image_dimensions {
+    original_width: u32,
+    original_height: u32,
+    cropped_width: u32,
+    cropped_height: u32,
+};
+
+// Storage buffer to output the result dimensions
+@group(0) @binding(3)
+var<storage, read_write> dimensions_out: image_dimensions;
+
+// Compute shader to crop the input texture to the bounding box and output it
+@compute @workgroup_size(8, 8)
+fn crop_and_output(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let size = textureDimensions(input_texture_crop).xy;
+
+    let crop_width = bounds_uniform.max_x - bounds_uniform.min_x + 1u;
+    let crop_height = bounds_uniform.max_y - bounds_uniform.min_y + 1u;
+
+    if (gid.x >= crop_width || gid.y >= crop_height) {
+        return;
+    }
+
+    let src_coord = vec2<i32>(
+        i32(bounds_uniform.min_x + gid.x),
+        i32(bounds_uniform.min_y + gid.y)
+    );
+
+    let dst_coord = vec2<i32>(i32(gid.x), i32(gid.y));
+    let pixel = textureLoad(input_texture_crop, src_coord, 0);
+    textureStore(output_texture, dst_coord, pixel);
+
+    // Output dimensions from workgroup (0,0) only
+    if (gid.x == 0u && gid.y == 0u) {
+        dimensions_out.original_width = size.x;
+        dimensions_out.original_height = size.y;
+        dimensions_out.cropped_width = crop_width;
+        dimensions_out.cropped_height = crop_height;
+    }
+}
+
+// ==============================
+// === MISSING TEXTURE FILL ====
+// ==============================
+
+// Output texture to draw a fallback checkerboard
+@group(0) @binding(0)
+var checker_texture: texture_storage_2d<rgba8unorm, write>;
+
+// Compute shader to fill a texture with a purple & green checkerboard
+@compute @workgroup_size(8, 8)
+fn missing_texture(@builtin(global_invocation_id) id: vec3<u32>) {
+    let size = textureDimensions(checker_texture);
+    if (id.x >= size.x || id.y >= size.y) {
+        return;
+    }
+
+    let checker_size = 25u;
+    let on_color = ((id.x / checker_size + id.y / checker_size) % 2u) == 0u;
+
+    let color = select(
+        vec4<f32>(0.5, 0.0, 0.5, 1.0), // Purple
+        vec4<f32>(0.0, 1.0, 0.0, 1.0), // Green
+        on_color
+    );
+
+    textureStore(checker_texture, vec2<i32>(id.xy), color);
+}
+`;