@bloopjs/toodle 0.1.4 → 0.1.6

package/dist/textures/AssetManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetManager.d.ts","sourceRoot":"","sources":["../../src/textures/AssetManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AssetManager.d.ts","sourceRoot":"","sources":["../../src/textures/AssetManager.ts"],"names":[],"mappings":"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"}

package/dist/textures/util.d.ts

@@ -1,4 +1,13 @@
 import type { CpuTextureAtlas, TextureWithMetadata } from "./types";
 export declare function getBitmapFromUrl(url: URL): Promise<ImageBitmap>;
 export declare function packBitmapsToAtlas(images: Map<string, TextureWithMetadata>, textureSize: number, device: GPUDevice): Promise<CpuTextureAtlas[]>;
+/**
+ * CPU-only version of packBitmapsToAtlas for WebGL2 backend.
+ * Uses OffscreenCanvas to composite packed bitmaps instead of GPU textures.
+ * Does not support transparent pixel cropping.
+ */
+export declare function packBitmapsToAtlasCPU(images: Map<string, {
+    bitmap: ImageBitmap;
+    id: string;
+}>, textureSize: number): Promise<CpuTextureAtlas[]>;
 //# sourceMappingURL=util.d.ts.map

package/dist/textures/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/textures/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CASrE;AAED,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,SAAS,GAChB,OAAO,CAAC,eAAe,EAAE,CAAC,CAqH5B"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/textures/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CASrE;AAED,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,SAAS,GAChB,OAAO,CAAC,eAAe,EAAE,CAAC,CAqH5B;AA2HD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,EACxD,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,eAAe,EAAE,CAAC,CA8G5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/toodle",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "files": [
     "dist",

package/src/backends/IBackendShader.ts

@@ -28,6 +28,9 @@ export interface IBackendShader {
   /** Debug label for the shader */
   readonly label: string;
 
+  /** The final compiled shader code (for debugging) */
+  readonly code: string;
+
   /**
    * Prepare for a new frame.
    * Called once per frame before any processBatch calls.

package/src/backends/webgl2/WebGLQuadShader.ts

@@ -16,6 +16,7 @@ const INSTANCE_BYTES = INSTANCE_FLOATS * Float32Array.BYTES_PER_ELEMENT;
  */
 export class WebGLQuadShader implements IBackendShader {
   readonly label: string;
+  readonly code: string;
 
   #backend: WebGLBackend;
   #atlas: ITextureAtlas;
@@ -45,6 +46,7 @@ export class WebGLQuadShader implements IBackendShader {
 
     this.#atlas = atlas;
     this.label = label;
+    this.code = userFragmentShader ?? fragmentShader;
     this.#backend = backend;
     this.#instanceCount = instanceCount;
 

package/src/backends/webgl2/WebGLTextShader.ts

@@ -21,6 +21,7 @@ import type { WebGLFontPipeline } from "./WebGLFontPipeline";
  */
 export class WebGLTextShader implements ITextShader {
   readonly label = "text";
+  readonly code: string = fragmentShader;
   readonly font: MsdfFont;
   readonly maxCharCount: number;
 

package/src/backends/webgpu/WebGPUTextShader.ts

@@ -22,6 +22,7 @@ const textDescriptorInstanceSize = struct.size;
 
 export class WebGPUTextShader implements ITextShader {
   readonly label = "text";
+  readonly code: string = msdfShader;
 
   #backend: WebGPUBackend;
   #pipeline: GPURenderPipeline;

package/src/textures/AssetManager.ts

@@ -21,7 +21,11 @@ import type {
   TextureBundleOpts,
   TextureWithMetadata,
 } from "./types";
-import { getBitmapFromUrl, packBitmapsToAtlas } from "./util";
+import {
+  getBitmapFromUrl,
+  packBitmapsToAtlas,
+  packBitmapsToAtlasCPU,
+} from "./util";
 
 export type TextureId = string;
 export type BundleId = string;
@@ -432,41 +436,58 @@ export class AssetManager {
     bundleId: BundleId,
     opts: TextureBundleOpts,
   ) {
-    if (this.#backend.type !== "webgpu") {
-      throw new Error(
-        "Dynamic texture bundle registration is only supported with WebGPU backend. Use prebaked atlases instead.",
+    if (this.#backend.type === "webgpu") {
+      // WebGPU path: supports optional crop compute shader
+      const device = (this.#backend as WebGPUBackend).device;
+      const images = new Map<string, TextureWithMetadata>();
+
+      await Promise.all(
+        Object.entries(opts.textures).map(async ([id, url]) => {
+          const bitmap = await getBitmapFromUrl(url);
+          let textureWrapper: TextureWithMetadata = this.#wrapBitmapToTexture(
+            bitmap,
+            id,
+          );
+
+          if (opts.cropTransparentPixels && this.#cropComputeShader) {
+            textureWrapper =
+              await this.#cropComputeShader.processTexture(textureWrapper);
+          }
+          images.set(id, textureWrapper);
+        }),
       );
-    }
 
-    const device = (this.#backend as WebGPUBackend).device;
-    const images = new Map<string, TextureWithMetadata>();
+      const atlases = await packBitmapsToAtlas(
+        images,
+        this.#backend.limits.textureSize,
+        device,
+      );
 
-    let _networkLoadTime = 0;
-    await Promise.all(
-      Object.entries(opts.textures).map(async ([id, url]) => {
-        const now = performance.now();
-        const bitmap = await getBitmapFromUrl(url);
-        _networkLoadTime += performance.now() - now;
-        let textureWrapper: TextureWithMetadata = this.#wrapBitmapToTexture(
-          bitmap,
-          id,
+      this.bundles.registerDynamicBundle(bundleId, atlases);
+    } else {
+      // WebGL2 path: CPU-only packing without cropping support
+      if (opts.cropTransparentPixels) {
+        console.warn(
+          "cropTransparentPixels is not supported on WebGL2 backend and will be ignored.",
         );
+      }
 
-        if (opts.cropTransparentPixels && this.#cropComputeShader) {
-          textureWrapper =
-            await this.#cropComputeShader.processTexture(textureWrapper);
-        }
-        images.set(id, textureWrapper);
-      }),
-    );
+      const images = new Map<string, { bitmap: ImageBitmap; id: string }>();
 
-    const atlases = await packBitmapsToAtlas(
-      images,
-      this.#backend.limits.textureSize,
-      device,
-    );
+      await Promise.all(
+        Object.entries(opts.textures).map(async ([id, url]) => {
+          const bitmap = await getBitmapFromUrl(url);
+          images.set(id, { bitmap, id });
+        }),
+      );
+
+      const atlases = await packBitmapsToAtlasCPU(
+        images,
+        this.#backend.limits.textureSize,
+      );
 
-    this.bundles.registerDynamicBundle(bundleId, atlases);
+      this.bundles.registerDynamicBundle(bundleId, atlases);
+    }
   }
 
   async #registerBundleFromAtlases(bundleId: BundleId, opts: AtlasBundleOpts) {

package/src/textures/util.ts

@@ -258,3 +258,143 @@ type Rectangle = {
   width: number;
   height: number;
 };
+
+/**
+ * CPU-only version of packBitmapsToAtlas for WebGL2 backend.
+ * Uses OffscreenCanvas to composite packed bitmaps instead of GPU textures.
+ * Does not support transparent pixel cropping.
+ */
+export async function packBitmapsToAtlasCPU(
+  images: Map<string, { bitmap: ImageBitmap; id: string }>,
+  textureSize: number,
+): Promise<CpuTextureAtlas[]> {
+  const cpuTextureAtlases: CpuTextureAtlas[] = [];
+  const packed: PackedTexture[] = [];
+  const spaces: Rectangle[] = [
+    { x: 0, y: 0, width: textureSize, height: textureSize },
+  ];
+
+  let atlasRegionMap = new Map<string, TextureRegion>();
+
+  for (const [id, { bitmap }] of images) {
+    // Find best fitting space using guillotine method
+    let bestSpace = -1;
+    let bestScore = Number.POSITIVE_INFINITY;
+
+    for (let i = 0; i < spaces.length; i++) {
+      const space = spaces[i];
+      if (bitmap.width <= space.width && bitmap.height <= space.height) {
+        // Score based on how well it fits (smaller score is better)
+        const score = Math.abs(
+          space.width * space.height - bitmap.width * bitmap.height,
+        );
+        if (score < bestScore) {
+          bestScore = score;
+          bestSpace = i;
+        }
+      }
+    }
+
+    if (bestSpace === -1) {
+      // Current atlas is full, finalize it and start a new one
+      const tex = createAtlasBitmapFromPacked(packed, textureSize);
+      cpuTextureAtlases.push({
+        texture: tex,
+        textureRegions: atlasRegionMap,
+        width: tex.width,
+        height: tex.height,
+      });
+
+      atlasRegionMap = new Map<string, TextureRegion>();
+      packed.length = 0;
+
+      spaces.length = 0;
+      spaces.push({
+        x: 0,
+        y: 0,
+        width: textureSize,
+        height: textureSize,
+      });
+      bestSpace = 0;
+    }
+
+    const space = spaces[bestSpace];
+
+    // Pack the image
+    packed.push({
+      texture: bitmap,
+      x: space.x,
+      y: space.y,
+      width: bitmap.width,
+      height: bitmap.height,
+    });
+
+    // Split remaining space into two new spaces
+    spaces.splice(bestSpace, 1);
+
+    if (space.width - bitmap.width > 0) {
+      spaces.push({
+        x: space.x + bitmap.width,
+        y: space.y,
+        width: space.width - bitmap.width,
+        height: bitmap.height,
+      });
+    }
+
+    if (space.height - bitmap.height > 0) {
+      spaces.push({
+        x: space.x,
+        y: space.y + bitmap.height,
+        width: space.width,
+        height: space.height - bitmap.height,
+      });
+    }
+
+    // Create atlas coords (no cropping for CPU path)
+    const uvScale = {
+      width: bitmap.width / textureSize,
+      height: bitmap.height / textureSize,
+    };
+    atlasRegionMap.set(id, {
+      uvOffset: {
+        x: space.x / textureSize,
+        y: space.y / textureSize,
+      },
+      uvScale,
+      uvScaleCropped: uvScale,
+      cropOffset: { x: 0, y: 0 },
+      originalSize: { width: bitmap.width, height: bitmap.height },
+    });
+  }
+
+  // Finalize the last atlas
+  const tex = createAtlasBitmapFromPacked(packed, textureSize);
+  cpuTextureAtlases.push({
+    texture: tex,
+    textureRegions: atlasRegionMap,
+    width: tex.width,
+    height: tex.height,
+  });
+
+  return cpuTextureAtlases;
+}
+
+/**
+ * Composites packed textures onto an OffscreenCanvas and returns an ImageBitmap.
+ */
+function createAtlasBitmapFromPacked(
+  packed: PackedTexture[],
+  atlasSize: number,
+): ImageBitmap {
+  const canvas = new OffscreenCanvas(atlasSize, atlasSize);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2d context from OffscreenCanvas");
+  }
+
+  for (const texture of packed) {
+    ctx.drawImage(texture.texture, texture.x, texture.y);
+  }
+
+  return canvas.transferToImageBitmap();
+}