@next2d/webgpu 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/webgpu",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Next2D WebGPU Package",
   "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "dependencies": {
-    "@next2d/texture-packer": "3.0.2",
-    "@next2d/render-queue": "3.0.2"
+    "@next2d/texture-packer": "3.0.3",
+    "@next2d/render-queue": "3.0.3"
   }
 }

package/src/Context.js

@@ -2227,10 +2227,11 @@ export class Context {
      * @description ImageBitmapを生成
      */
     async createImageBitmap(width, height) {
-        // アトラステクスチャから現在の描画内容を取得
-        const attachment = $getAtlasAttachmentObject();
-        if (!attachment) {
-            throw new Error("[WebGPU] Atlas attachment not found");
+        // メインアタッチメントから合成済み描画結果を取得
+        // （drawArraysInstanced()がアトラスからメインアタッチメントへ合成済み）
+        const mainAttachment = this.$mainAttachmentObject;
+        if (!mainAttachment || !mainAttachment.texture) {
+            throw new Error("[WebGPU] Main attachment not found");
         }
         // 描画を完了
         if (this.renderPassEncoder) {
@@ -2246,14 +2247,11 @@ export class Context {
             "size": bufferSize,
             "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
         });
-        // コマンドエンコーダーを作成
-        const commandEncoder = this.device.createCommandEncoder();
-        // アトラステクスチャからピクセルバッファにコピー
-        if (!attachment.texture) {
-            throw new Error("Attachment texture is null");
-        }
-        commandEncoder.copyTextureToBuffer({
-            "texture": attachment.texture.resource,
+        // フレームのcommandEncoderにcopyコマンドを追加
+        // 描画コマンドの後にコピーが実行されるため、正しい順序が保証される
+        this.ensureCommandEncoder();
+        this.commandEncoder.copyTextureToBuffer({
+            "texture": mainAttachment.texture.resource,
             "mipLevel": 0,
             "origin": { "x": 0, "y": 0, "z": 0 }
         }, {
@@ -2265,18 +2263,32 @@ export class Context {
             "height": height,
             "depthOrArrayLayers": 1
         });
-        // コマンドを送信
-        this.device.queue.submit([commandEncoder.finish()]);
+        // endFrame()で描画コマンドとcopyコマンドを一括submit
+        // swap chain textureの参照もクリアされる
+        this.endFrame();
         // バッファをマップして読み込み
         await pixelBuffer.mapAsync(GPUMapMode.READ);
         const mappedRange = pixelBuffer.getMappedRange();
         const pixels = new Uint8Array(mappedRange);
-        // ピクセルデータをコピー（アライメントを考慮）
+        // メインアタッチメントはbgra8unormフォーマットのため、
+        // ImageData（RGBA）用にB⇔Rチャンネルをスワップしつつコピー
+        const isBgra = this.preferredFormat === "bgra8unorm";
         const resultPixels = new Uint8Array(width * height * 4);
+        const rowBytes = width * 4;
         for (let y = 0; y < height; y++) {
             const srcOffset = y * bytesPerRow;
-            const dstOffset = y * width * 4;
-            resultPixels.set(pixels.subarray(srcOffset, srcOffset + width * 4), dstOffset);
+            const dstOffset = y * rowBytes;
+            if (isBgra) {
+                for (let x = 0; x < rowBytes; x += 4) {
+                    resultPixels[dstOffset + x] = pixels[srcOffset + x + 2]; // R ← B
+                    resultPixels[dstOffset + x + 1] = pixels[srcOffset + x + 1]; // G
+                    resultPixels[dstOffset + x + 2] = pixels[srcOffset + x]; // B ← R
+                    resultPixels[dstOffset + x + 3] = pixels[srcOffset + x + 3]; // A
+                }
+            }
+            else {
+                resultPixels.set(pixels.subarray(srcOffset, srcOffset + rowBytes), dstOffset);
+            }
         }
         pixelBuffer.unmap();
         pixelBuffer.destroy();