@bloopjs/toodle 0.1.4 → 0.1.5

package/dist/mod.js

@@ -19926,6 +19926,105 @@ async function textureToBitmap(device, texture, width, height) {
   readBuffer.unmap();
   return bitmap;
 }
+async function packBitmapsToAtlasCPU(images, textureSize) {
+  const cpuTextureAtlases = [];
+  const packed = [];
+  const spaces = [
+    { x: 0, y: 0, width: textureSize, height: textureSize }
+  ];
+  let atlasRegionMap = new Map;
+  for (const [id, { bitmap }] of images) {
+    let bestSpace = -1;
+    let bestScore = Number.POSITIVE_INFINITY;
+    for (let i3 = 0;i3 < spaces.length; i3++) {
+      const space2 = spaces[i3];
+      if (bitmap.width <= space2.width && bitmap.height <= space2.height) {
+        const score = Math.abs(space2.width * space2.height - bitmap.width * bitmap.height);
+        if (score < bestScore) {
+          bestScore = score;
+          bestSpace = i3;
+        }
+      }
+    }
+    if (bestSpace === -1) {
+      const tex2 = createAtlasBitmapFromPacked(packed, textureSize);
+      cpuTextureAtlases.push({
+        texture: tex2,
+        textureRegions: atlasRegionMap,
+        width: tex2.width,
+        height: tex2.height
+      });
+      atlasRegionMap = new Map;
+      packed.length = 0;
+      spaces.length = 0;
+      spaces.push({
+        x: 0,
+        y: 0,
+        width: textureSize,
+        height: textureSize
+      });
+      bestSpace = 0;
+    }
+    const space = spaces[bestSpace];
+    packed.push({
+      texture: bitmap,
+      x: space.x,
+      y: space.y,
+      width: bitmap.width,
+      height: bitmap.height
+    });
+    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
+      });
+    }
+    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 }
+    });
+  }
+  const tex = createAtlasBitmapFromPacked(packed, textureSize);
+  cpuTextureAtlases.push({
+    texture: tex,
+    textureRegions: atlasRegionMap,
+    width: tex.width,
+    height: tex.height
+  });
+  return cpuTextureAtlases;
+}
+function createAtlasBitmapFromPacked(packed, atlasSize) {
+  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();
+}
 
 // src/textures/AssetManager.ts
 class AssetManager {
@@ -20115,24 +20214,31 @@ class AssetManager {
     return texture;
   }
   async#registerBundleFromTextures(bundleId, opts) {
-    if (this.#backend.type !== "webgpu") {
-      throw new Error("Dynamic texture bundle registration is only supported with WebGPU backend. Use prebaked atlases instead.");
-    }
-    const device = this.#backend.device;
-    const images = new Map;
-    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 = this.#wrapBitmapToTexture(bitmap, id);
-      if (opts.cropTransparentPixels && this.#cropComputeShader) {
-        textureWrapper = await this.#cropComputeShader.processTexture(textureWrapper);
+    if (this.#backend.type === "webgpu") {
+      const device = this.#backend.device;
+      const images = new Map;
+      await Promise.all(Object.entries(opts.textures).map(async ([id, url]) => {
+        const bitmap = await getBitmapFromUrl(url);
+        let textureWrapper = this.#wrapBitmapToTexture(bitmap, id);
+        if (opts.cropTransparentPixels && this.#cropComputeShader) {
+          textureWrapper = await this.#cropComputeShader.processTexture(textureWrapper);
+        }
+        images.set(id, textureWrapper);
+      }));
+      const atlases = await packBitmapsToAtlas(images, this.#backend.limits.textureSize, device);
+      this.bundles.registerDynamicBundle(bundleId, atlases);
+    } else {
+      if (opts.cropTransparentPixels) {
+        console.warn("cropTransparentPixels is not supported on WebGL2 backend and will be ignored.");
       }
-      images.set(id, textureWrapper);
-    }));
-    const atlases = await packBitmapsToAtlas(images, this.#backend.limits.textureSize, device);
-    this.bundles.registerDynamicBundle(bundleId, atlases);
+      const images = new Map;
+      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);
+    }
   }
   async#registerBundleFromAtlases(bundleId, opts) {
     await this.bundles.registerAtlasBundle(bundleId, opts);
@@ -20798,5 +20904,5 @@ export {
   AssetManager
 };
 
-//# debugId=4A88BA8B6CA05C3D64756E2164756E21
+//# debugId=6E0EAD9B5EBDC37664756E2164756E21
 //# sourceMappingURL=mod.js.map