@next2d/webgpu 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/webgpu",
-  "version": "3.0.1",
+  "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.1",
-    "@next2d/render-queue": "3.0.1"
+    "@next2d/texture-packer": "3.0.3",
+    "@next2d/render-queue": "3.0.3"
   }
 }

package/src/Context.d.ts

@@ -59,6 +59,7 @@ export declare class Context {
     private fillDynamicBindGroupBuffer;
     private nodeClearQuadBuffer;
     private useOptimizedInstancing;
+    private $needsReconfigure;
     private readonly $uniformData8;
     private readonly $scissorRect;
     private readonly $filterConfig;

package/src/Context.js

@@ -452,6 +452,14 @@ export class Context {
             writable: true,
             value: true
         });
+        // リサイズ後にcanvasContextの再設定が必要かどうか
+        // ($resizeComplete()でcanvas.width/heightが設定された後、ensureMainTexture()でconfigure()を呼ぶ)
+        Object.defineProperty(this, "$needsReconfigure", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         // Hot Path 用の事前割り当てバッファ
         Object.defineProperty(this, "$uniformData8", {
             enumerable: true,
@@ -636,13 +644,9 @@ export class Context {
         this.currentRenderTarget = null;
         // マスク状態をリセット
         $resetMaskState();
-        // キャンバスのサイズを更新
-        const canvas = this.canvasContext.canvas;
-        // 型チェックを安全に実行（Worker環境対応）
-        if (canvas && "width" in canvas && "height" in canvas) {
-            canvas.width = width;
-            canvas.height = height;
-        }
+        // キャンバスのサイズ更新は$resizeComplete()に任せる
+        // WebGPUではcanvas.width/height設定でコンテキストが暗黙的にunconfigureされるため、
+        // 描画フレーム開始前に$resizeComplete()→configure()→getCurrentTexture()の順で実行する
         // WebGL版と同じ: スタックにあるアタッチメントも解放
         if (this.$stackAttachmentObject.length) {
             for (let idx = 0; idx < this.$stackAttachmentObject.length; ++idx) {
@@ -686,12 +690,9 @@ export class Context {
         }
         // アンバインド（WebGL版と同じ）
         this.frameBufferManager.setCurrentAttachment(null);
-        // canvasContextを再設定
-        this.canvasContext.configure({
-            "device": this.device,
-            "format": this.preferredFormat,
-            "alphaMode": "premultiplied"
-        });
+        // canvasContextの再設定はensureMainTexture()で行う
+        // $resizeComplete()でcanvas.width/heightが設定された後にconfigure()→getCurrentTexture()を実行するため
+        this.$needsReconfigure = true;
         // リサイズ時にスワップチェーンテクスチャをリセット
         // 古いテクスチャ参照を解放して、次のフレームで新しいサイズのテクスチャを取得
         this.mainTexture = null;
@@ -2014,6 +2015,16 @@ export class Context {
      */
     ensureMainTexture() {
         if (!this.mainTexture) {
+            // リサイズ後はcanvas.width/heightが$resizeComplete()で更新されているので
+            // ここでconfigure()を呼んでからgetCurrentTexture()を取得する
+            if (this.$needsReconfigure) {
+                this.canvasContext.configure({
+                    "device": this.device,
+                    "format": this.preferredFormat,
+                    "alphaMode": "premultiplied"
+                });
+                this.$needsReconfigure = false;
+            }
             this.mainTexture = this.canvasContext.getCurrentTexture();
             this.mainTextureView = this.mainTexture.createView();
         }
@@ -2216,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) {
@@ -2235,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 }
         }, {
@@ -2254,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();