@bloopjs/toodle 0.1.3 → 0.1.5

package/src/textures/AssetManager.ts

@@ -1,5 +1,7 @@
 import type { IRenderBackend } from "../backends/IRenderBackend";
 import type { ITextShader } from "../backends/ITextShader";
+import type { WebGLBackend } from "../backends/webgl2/WebGLBackend";
+import { WebGLFontPipeline } from "../backends/webgl2/WebGLFontPipeline";
 import { WebGLTextShader } from "../backends/webgl2/WebGLTextShader";
 import { FontPipeline } from "../backends/webgpu/FontPipeline";
 import { TextureComputeShader } from "../backends/webgpu/TextureComputeShader";
@@ -19,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;
@@ -349,8 +355,14 @@ export class AssetManager {
       );
       this.#fonts.set(id, textShader);
     } else {
-      // WebGL: font loaded for measurement, but rendering will throw
-      const textShader = new WebGLTextShader(font, limits.maxTextLength);
+      // WebGL: create font pipeline and text shader for rendering
+      const webglBackend = this.#backend as WebGLBackend;
+      const fontPipeline = WebGLFontPipeline.create(
+        webglBackend.gl,
+        font,
+        limits.maxTextLength,
+      );
+      const textShader = new WebGLTextShader(webglBackend, fontPipeline);
       this.#fonts.set(id, textShader);
     }
 
@@ -424,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 });
+        }),
+      );
 
-    this.bundles.registerDynamicBundle(bundleId, atlases);
+      const atlases = await packBitmapsToAtlasCPU(
+        images,
+        this.#backend.limits.textureSize,
+      );
+
+      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();
+}