@next2d/renderer 2.0.0 → 3.0.1

package/README.md

@@ -1,11 +1,198 @@
-@next2d/renderer
-=============
+# @next2d/renderer
 
-## Installation
+## 概要 / Overview
 
-```
+`@next2d/renderer`は、Web Workerで動作するOffscreenCanvasベースのレンダリングエンジンです。Next2Dアプリケーション向けに高性能でノンブロッキングなレンダリングを提供します。レンダリング処理を別スレッドにオフロードすることで、スムーズなUI操作と効率的なグラフィックス処理を実現します。
+
+`@next2d/renderer` is an OffscreenCanvas-based rendering engine that runs in a Web Worker, providing high-performance, non-blocking rendering for Next2D applications. By offloading rendering operations to a separate thread, it ensures smooth UI interactions and efficient graphics processing.
+
+## 主な特徴 / Key Features
+
+- **Web Workerアーキテクチャ**: ノンブロッキングレンダリングのため完全にWeb Worker内で動作
+  - Runs entirely in a Web Worker for non-blocking rendering
+- **OffscreenCanvas**: ハードウェアアクセラレーションによるグラフィックス処理にOffscreenCanvas APIを活用
+  - Leverages OffscreenCanvas API for hardware-accelerated graphics
+- **コマンドキューパターン**: レンダリングコマンドを非同期で効率的に処理
+  - Efficiently processes rendering commands asynchronously
+- **モジュラー設計**: 各表示オブジェクトタイプごとにサービスとユースケースをクリーンに分離
+  - Clean separation of services and use cases for each display object type
+
+## インストール / Installation
+
+```bash
 npm install @next2d/renderer
 ```
 
-## License
-This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
+## アーキテクチャ / Architecture
+
+### ディレクトリ構造 / Directory Structure
+
+```
+src/
+├── index.ts                           # Workerエントリポイント / Worker entry point
+├── CommandController.ts               # メインコマンドキューコントローラー / Main command queue controller
+├── RendererUtil.ts                    # レンダリング用ユーティリティ関数 / Utility functions for rendering
+├── Command/
+│   ├── service/                       # コマンド処理サービス / Command processing services
+│   │   ├── CommandInitializeContextService.ts
+│   │   ├── CommandResizeService.ts
+│   │   └── CommandRemoveCacheService.ts
+│   └── usecase/                       # コマンドユースケース / Command use cases
+│       ├── CommandRenderUseCase.ts
+│       └── CommandCaptureUseCase.ts
+├── DisplayObject/
+│   └── service/                       # 基本表示オブジェクトサービス / Base display object services
+│       └── DisplayObjectGetBlendModeService.ts
+├── DisplayObjectContainer/
+│   └── usecase/                       # コンテナレンダリングロジック / Container rendering logic
+│       ├── DisplayObjectContainerRenderUseCase.ts
+│       └── DisplayObjectContainerClipRenderUseCase.ts
+├── Shape/
+│   ├── service/                       # Shapeコマンド処理 / Shape command processing
+│   │   └── ShapeCommandService.ts
+│   └── usecase/                       # Shapeレンダリングロジック / Shape rendering logic
+│       ├── ShapeRenderUseCase.ts
+│       └── ShapeClipRenderUseCase.ts
+├── TextField/
+│   ├── service/                       # テキスト処理サービス / Text processing services
+│   │   ├── TextFieldGenerateFontStyleService.ts
+│   │   └── TextFiledGetAlignOffsetService.ts
+│   └── usecase/                       # テキストレンダリングロジック / Text rendering logic
+│       ├── TextFieldRenderUseCase.ts
+│       └── TextFieldDrawOffscreenCanvasUseCase.ts
+├── Video/
+│   └── usecase/                       # ビデオレンダリングロジック / Video rendering logic
+│       └── VideoRenderUseCase.ts
+└── interface/                         # TypeScriptインターフェース / TypeScript interfaces
+    ├── IMessage.ts
+    ├── INode.ts
+    ├── IRGBA.ts
+    ├── IBlendMode.ts
+    ├── ITextFormat.ts
+    ├── ITextObject.ts
+    └── ...
+```
+
+### コンポーネントの役割 / Component Roles
+
+- **index.ts**: メッセージイベントリスナーをセットアップするWorkerエントリポイント / Worker entry point that sets up the message event listener
+- **CommandController**: コマンドキューを管理し、適切なハンドラーにコマンドをディスパッチ / Manages the command queue and dispatches commands to appropriate handlers
+- **Command/service/**: 低レベルのコマンド処理(コンテキスト初期化、リサイズ、キャッシュ削除) / Low-level command processing (context initialization, resize, cache removal)
+- **Command/usecase/**: 高レベルのコマンド操作(レンダリング、キャプチャ) / High-level command operations (render, capture)
+- **DisplayObject/service/**: すべての表示オブジェクト共通のサービス / Shared services for all display objects
+- **DisplayObjectContainer/usecase/**: コンテナオブジェクトのレンダリングロジック / Rendering logic for container objects
+- **Shape/service/ & usecase/**: ベクターグラフィックスのレンダリング / Vector graphics rendering
+- **TextField/service/ & usecase/**: テキストレンダリングとフォント処理 / Text rendering and font processing
+- **Video/usecase/**: ビデオ要素のレンダリング / Video element rendering
+- **RendererUtil.ts**: レンダリング操作用の共通ユーティリティ関数 / Common utility functions for rendering operations
+- **interface/**: TypeScript型定義とインターフェース / TypeScript type definitions and interfaces
+
+## メッセージフロー / Message Flow
+
+```mermaid
+sequenceDiagram
+    participant MT as Main Thread / メインスレッド
+    participant WW as Web Worker
+    participant CC as CommandController
+    participant UC as Use Case / ユースケース
+    participant Ctx as OffscreenCanvas Context
+
+    MT->>WW: postMessage(command)
+    WW->>CC: queue.push(message)
+
+    alt state === "deactivate"
+        CC->>CC: state = "active"
+        loop while queue.length > 0
+            CC->>CC: message = queue.shift()
+
+            alt command === "initialize"
+                CC->>UC: commandInitializeContextService()
+                UC->>Ctx: setup OffscreenCanvas context / コンテキストをセットアップ
+            else command === "resize"
+                CC->>UC: commandResizeService()
+                UC->>Ctx: resize canvas / キャンバスをリサイズ
+            else command === "render"
+                CC->>UC: commandRenderUseCase()
+                UC->>Ctx: render display objects / 表示オブジェクトをレンダリング
+                UC->>CC: rendering complete / レンダリング完了
+                CC->>MT: postMessage({ message: "render", buffer })
+            else command === "capture"
+                CC->>UC: commandCaptureUseCase()
+                UC->>Ctx: capture frame / フレームをキャプチャ
+                UC->>CC: capture complete / キャプチャ完了
+                CC->>MT: postMessage({ message: "capture", imageBitmap })
+            else command === "removeCache"
+                CC->>UC: commandRemoveCacheService()
+            else command === "cacheClear"
+                CC->>UC: $cacheStore.reset()
+            end
+        end
+        CC->>CC: state = "deactivate"
+    end
+```
+
+## コマンドキューパターン / Command Queue Pattern
+
+レンダラーは、非同期レンダリング操作を効率的に管理するためにコマンドキューパターンを使用しています。
+
+The renderer uses a command queue pattern to efficiently manage asynchronous rendering operations.
+
+### キュー管理 / Queue Management
+
+1. **メッセージ受信 / Message Reception**: メインスレッドからメッセージが到着すると、`queue`配列にプッシュされます / When a message arrives from the main thread, it's pushed into the `queue` array
+2. **状態チェック / State Check**: Workerが`deactivate`状態(アイドル)の場合、実行を開始します / If the worker is in `deactivate` state (idle), it begins execution
+3. **逐次処理 / Sequential Processing**: `queue.shift()`を使用してコマンドを1つずつ処理します / Commands are processed one by one using `queue.shift()`
+4. **状態管理 / State Management**: Workerは`active`と`deactivate`状態の間で遷移します / The worker transitions between `active` and `deactivate` states
+
+### サポートされるコマンド / Supported Commands
+
+- **initialize**: デバイスピクセル比を使用してOffscreenCanvasコンテキストをセットアップ / Set up OffscreenCanvas context with device pixel ratio
+- **resize**: キャンバスの寸法を更新し、必要に応じてキャッシュをクリア / Update canvas dimensions and clear cache if needed
+- **render**: 表示オブジェクトのレンダリングパイプラインを実行 / Execute rendering pipeline for display objects
+- **capture**: 現在のフレームをImageBitmapとしてキャプチャ / Capture current frame as ImageBitmap
+- **removeCache**: 特定のキャッシュアイテムを削除 / Remove specific cached items
+- **cacheClear**: キャッシュストア全体をクリア / Clear entire cache store
+
+### メリット / Benefits
+
+- **ノンブロッキング / Non-blocking**: レンダリング中もメインスレッドはレスポンシブなまま / Main thread remains responsive during rendering
+- **効率的 / Efficient**: コマンドはバッチ処理され、非同期で処理されます / Commands are batched and processed asynchronously
+- **スレッドセーフ / Thread-safe**: Workerの分離により競合状態を防止 / Worker isolation prevents race conditions
+- **転送可能オブジェクト / Transferable Objects**: ゼロコピーメッセージパッシングのために転送可能オブジェクト(ArrayBuffer、ImageBitmap)を使用 / Uses Transferable objects (ArrayBuffer, ImageBitmap) for zero-copy message passing
+
+## 使用例 / Usage Example
+
+```typescript
+// メインスレッド / Main thread
+const worker = new Worker('renderer.js');
+const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+const offscreen = canvas.transferControlToOffscreen();
+
+// レンダラーの初期化 / Initialize renderer
+worker.postMessage({
+  command: 'initialize',
+  canvas: offscreen,
+  devicePixelRatio: window.devicePixelRatio
+}, [offscreen]);
+
+// フレームのレンダリング / Render frame
+worker.postMessage({
+  command: 'render',
+  buffer: renderDataBuffer,
+  length: dataLength,
+  imageBitmaps: bitmaps
+}, [renderDataBuffer.buffer, ...bitmaps]);
+
+// 完了の待機 / Listen for completion
+worker.addEventListener('message', (event) => {
+  if (event.data.message === 'render') {
+    // レンダリング完了、バッファが返却されました
+    // Rendering complete, buffer returned
+    console.log('フレームがレンダリングされました / Frame rendered');
+  }
+});
+```
+
+## ライセンス / License
+
+This project is licensed under the [MIT License](LICENSE) - see the LICENSE file for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/renderer",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "Next2D Renderer Package",
   "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -24,8 +24,9 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "dependencies": {
-    "@next2d/webgl": "2.0.0",
-    "@next2d/cache": "2.0.0",
-    "@next2d/texture-packer": "2.0.0"
+    "@next2d/webgl": "3.0.1",
+    "@next2d/webgpu": "3.0.1",
+    "@next2d/cache": "3.0.1",
+    "@next2d/texture-packer": "3.0.1"
   }
 }

package/src/Command/service/CommandInitializeContextService.d.ts

@@ -1,11 +1,11 @@
 /**
- * @description OffscreenCanvasからWebGL2のコンテキストを取得
- *              Get WebGL2 context from OffscreenCanvas
+ * @description OffscreenCanvasからWebGL2またはWebGPUのコンテキストを取得
+ *              Get WebGL2 or WebGPU context from OffscreenCanvas
  *
  * @param  {OffscreenCanvas} canvas
  * @param  {number} device_pixel_ratio
- * @return {void}
+ * @return {Promise<void>}
  * @method
  * @public
  */
-export declare const execute: (canvas: OffscreenCanvas, device_pixel_ratio: number) => void;
+export declare const execute: (canvas: OffscreenCanvas, device_pixel_ratio: number) => Promise<void>;

package/src/Command/service/CommandInitializeContextService.js

@@ -1,27 +1,55 @@
-import { Context } from "@next2d/webgl";
+import { Context as WebGLContext } from "@next2d/webgl";
+import { Context as WebGPUContext } from "@next2d/webgpu";
 import { $setCanvas, $setContext, $samples } from "../../RendererUtil";
 /**
- * @description OffscreenCanvasからWebGL2のコンテキストを取得
- *              Get WebGL2 context from OffscreenCanvas
+ * @description 開発時用のフラグ
+ *              Flag for development use
+ *
+ * @type {boolean}
+ * @private
+ */
+const useWebGPU = true;
+/**
+ * @description OffscreenCanvasからWebGL2またはWebGPUのコンテキストを取得
+ *              Get WebGL2 or WebGPU context from OffscreenCanvas
  *
  * @param  {OffscreenCanvas} canvas
  * @param  {number} device_pixel_ratio
- * @return {void}
+ * @return {Promise<void>}
  * @method
  * @public
  */
-export const execute = (canvas, device_pixel_ratio) => {
+export const execute = async (canvas, device_pixel_ratio) => {
     // Set OffscreenCanvas
     $setCanvas(canvas);
-    const gl = canvas.getContext("webgl2", {
-        "stencil": true,
-        "premultipliedAlpha": true,
-        "antialias": false,
-        "depth": false
-    });
-    if (!gl) {
-        throw new Error("webgl2 is not supported.");
+    if (useWebGPU && "gpu" in navigator) {
+        const gpu = navigator.gpu;
+        const adapter = await gpu.requestAdapter();
+        if (!adapter) {
+            throw new Error("WebGPU adapter not available");
+        }
+        const device = await adapter.requestDevice();
+        if (!device) {
+            throw new Error("WebGPU device not available");
+        }
+        const context = canvas.getContext("webgpu");
+        if (!context) {
+            throw new Error("WebGPU context not available");
+        }
+        const preferredFormat = gpu.getPreferredCanvasFormat();
+        $setContext(new WebGPUContext(device, context, preferredFormat, device_pixel_ratio));
+    }
+    else {
+        const gl = canvas.getContext("webgl2", {
+            "stencil": true,
+            "premultipliedAlpha": true,
+            "antialias": false,
+            "depth": false
+        });
+        if (!gl) {
+            throw new Error("webgl2 is not supported.");
+        }
+        // Set CanvasToWebGLContext
+        $setContext(new WebGLContext(gl, $samples, device_pixel_ratio));
     }
-    // Set CanvasToWebGLContext
-    $setContext(new Context(gl, $samples, device_pixel_ratio));
 };

package/src/Command/usecase/CommandCaptureUseCase.d.ts

@@ -5,9 +5,11 @@
  * @param  {Float32Array} render_queue
  * @param  {number} width
  * @param  {number} height
+ * @param  {number} [bg_color=0xffffff]
+ * @param  {number} [bg_alpha=0]
  * @param  {ImageBitmap[]} [image_bitmaps=null]
  * @return {Promise<ImageBitmap>}
  * @method
  * @protected
  */
-export declare const execute: (render_queue: Float32Array, width: number, height: number, image_bitmaps: ImageBitmap[] | null) => Promise<ImageBitmap>;
+export declare const execute: (render_queue: Float32Array, width: number, height: number, bg_color: number | undefined, bg_alpha: number | undefined, image_bitmaps: ImageBitmap[] | null) => Promise<ImageBitmap>;

package/src/Command/usecase/CommandCaptureUseCase.js

@@ -10,18 +10,26 @@ import { $context } from "../../RendererUtil";
  * @param  {Float32Array} render_queue
  * @param  {number} width
  * @param  {number} height
+ * @param  {number} [bg_color=0xffffff]
+ * @param  {number} [bg_alpha=0]
  * @param  {ImageBitmap[]} [image_bitmaps=null]
  * @return {Promise<ImageBitmap>}
  * @method
  * @protected
  */
-export const execute = async (render_queue, width, height, image_bitmaps) => {
+export const execute = async (render_queue, width, height, bg_color = 0x000000, bg_alpha = 0, image_bitmaps) => {
     // reset transfer bounds
     $context.clearTransferBounds();
     let index = 1;
     // reset
     $context.reset();
     $context.setTransform(1, 0, 0, 1, 0, 0);
+    // cache current background color
+    const red = $context.$clearColorR;
+    const green = $context.$clearColorG;
+    const blue = $context.$clearColorB;
+    const alpha = $context.$clearColorA;
+    $context.updateBackgroundColor((bg_color >> 16 & 0xff) / 255, (bg_color >> 8 & 0xff) / 255, (bg_color & 0xff) / 255, bg_alpha);
     $context.fillBackgroundColor();
     while (render_queue.length > index) {
         // hidden
@@ -49,5 +57,8 @@ export const execute = async (render_queue, width, height, image_bitmaps) => {
         }
     }
     $context.drawArraysInstanced();
-    return await $context.createImageBitmap(width, height);
+    const imageBitmap = await $context.createImageBitmap(width, height);
+    // reset background color
+    $context.updateBackgroundColor(red, green, blue, alpha);
+    return imageBitmap;
 };

package/src/Command/usecase/CommandRenderUseCase.js

@@ -30,7 +30,7 @@ export const execute = (render_queue, image_bitmaps) => {
             $context.updateBackgroundColor(0, 0, 0, 0);
         }
         else {
-            $context.updateBackgroundColor($color >> 16 & 0xff / 255, $color >> 8 & 0xff / 255, $color & 0xff / 255, 1);
+            $context.updateBackgroundColor(($color >> 16 & 0xff) / 255, ($color >> 8 & 0xff) / 255, ($color & 0xff) / 255, 1);
         }
     }
     // reset

package/src/CommandController.js

@@ -73,7 +73,7 @@ export class CommandController {
                     commandResizeService(object.buffer[0], object.buffer[1], Boolean(object.buffer[2]));
                     break;
                 case "initialize":
-                    commandInitializeContextService(object.canvas, object.devicePixelRatio);
+                    await commandInitializeContextService(object.canvas, object.devicePixelRatio);
                     break;
                 case "removeCache":
                     commandRemoveCacheService(object.buffer);
@@ -83,7 +83,7 @@ export class CommandController {
                     break;
                 case "capture":
                     {
-                        const imageBitmap = await commandCaptureUseCase(object.buffer.subarray(0, object.length), object.width, object.height, object.imageBitmaps);
+                        const imageBitmap = await commandCaptureUseCase(object.buffer.subarray(0, object.length), object.width, object.height, object.bgColor, object.bgAlpha, object.imageBitmaps);
                         // 描画完了したらメインスレッドにbufferを返却する
                         globalThis.postMessage({
                             "message": "capture",

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.js

@@ -4,6 +4,7 @@ import { execute as shapeClipRenderUseCase } from "../../Shape/usecase/ShapeClip
 import { execute as textFieldRenderUseCase } from "../../TextField/usecase/TextFieldRenderUseCase";
 import { execute as videoRenderUseCase } from "../../Video/usecase/VideoRenderUseCase";
 import { execute as displayObjectContainerClipRenderUseCase } from "./DisplayObjectContainerClipRenderUseCase";
+import { execute as displayObjectGetBlendModeService } from "../../DisplayObject/service/DisplayObjectGetBlendModeService";
 /**
  * @description DisplayObjectContainerの描画を実行します。
  *              Execute the drawing of DisplayObjectContainer.
@@ -16,6 +17,63 @@ import { execute as displayObjectContainerClipRenderUseCase } from "./DisplayObj
  * @protected
  */
 export const execute = (render_queue, index, image_bitmaps) => {
+    let endClipDepth = 0;
+    let canRenderMask = true;
+    // use layer
+    const blendMode = displayObjectGetBlendModeService(render_queue[index++]);
+    const useLayer = Boolean(render_queue[index++]);
+    // layer size
+    let layerWidth = 0;
+    let layerHeight = 0;
+    let useFilter = false;
+    let uniqueKey = "";
+    let filterKey = "";
+    let filterBounds = null;
+    let filterParams = null;
+    let matrix = null;
+    let colorTransform = null;
+    if (useLayer) {
+        layerWidth = render_queue[index++];
+        layerHeight = render_queue[index++];
+        useFilter = Boolean(render_queue[index++]);
+        if (useFilter) {
+            // フィルターパス: filterCache/uniqueKey/filterKey を読む
+            const filterCache = Boolean(render_queue[index++]);
+            uniqueKey = `${render_queue[index++]}`;
+            filterKey = `${render_queue[index++]}`;
+            if (filterCache) {
+                filterBounds = render_queue.subarray(index, index + 4);
+                index += 4;
+                matrix = render_queue.subarray(index, index + 6);
+                index += 6;
+                colorTransform = render_queue.subarray(index, index + 8);
+                index += 8;
+                // キャッシュされたフィルターテクスチャを描画
+                $context.containerDrawCachedFilter(blendMode, matrix, colorTransform, filterBounds, uniqueKey, filterKey);
+                return index;
+            }
+            filterBounds = render_queue.subarray(index, index + 4);
+            index += 4;
+            matrix = render_queue.subarray(index, index + 6);
+            index += 6;
+            colorTransform = render_queue.subarray(index, index + 8);
+            index += 8;
+            const length = render_queue[index++];
+            filterParams = render_queue.subarray(index, index + length);
+            index += length;
+        }
+        else {
+            // ブレンドのみパス: matrix + colorTransform
+            matrix = render_queue.subarray(index, index + 6);
+            index += 6;
+            colorTransform = render_queue.subarray(index, index + 8);
+            index += 8;
+        }
+    }
+    // コンテナのフィルター/ブレンド用にレイヤーを開始
+    if (useLayer) {
+        $context.containerBeginLayer(layerWidth, layerHeight);
+    }
     const useMaskDisplayObject = Boolean(render_queue[index++]);
     if (useMaskDisplayObject) {
         // これまでの描画データを描画して初期化
@@ -39,8 +97,6 @@ export const execute = (render_queue, index, image_bitmaps) => {
         }
         $context.endMask();
     }
-    let endClipDepth = 0;
-    let canRenderMask = true;
     const length = render_queue[index++];
     for (let idx = 0; length > idx; idx++) {
         const depth = render_queue[index++];
@@ -89,7 +145,8 @@ export const execute = (render_queue, index, image_bitmaps) => {
             continue;
         }
         // hidden
-        if (!render_queue[index++]) {
+        const hidden = render_queue[index++];
+        if (!hidden) {
             continue;
         }
         const type = render_queue[index++];
@@ -107,7 +164,6 @@ export const execute = (render_queue, index, image_bitmaps) => {
                 index = videoRenderUseCase(render_queue, index, image_bitmaps);
                 break;
             default:
-                console.error("unknown type", type);
                 break;
         }
     }
@@ -116,5 +172,9 @@ export const execute = (render_queue, index, image_bitmaps) => {
         $context.restore();
         $context.leaveMask();
     }
+    // コンテナのフィルター/ブレンド結果をメインに合成
+    if (useLayer) {
+        $context.containerEndLayer(blendMode, matrix, colorTransform, useFilter, filterBounds, filterParams, uniqueKey, filterKey);
+    }
     return index;
 };

package/src/RendererUtil.d.ts

@@ -1,4 +1,5 @@
-import type { Context } from "@next2d/webgl";
+import type { Context as WebGLContext } from "@next2d/webgl";
+import type { Context as WebGPUContext } from "@next2d/webgpu";
 import type { IRGBA } from "./interface/IRGBA";
 /**
  * @type {number}
@@ -6,20 +7,20 @@ import type { IRGBA } from "./interface/IRGBA";
  */
 export declare const $samples: number;
 /**
- * @type {Context}
+ * @type {WebGLContext | WebGPUContext}
  * @public
  */
-export declare let $context: Context;
+export declare let $context: WebGLContext | WebGPUContext;
 /**
- * @description Next2DのWebGLの描画コンテキストを設定
- *              Set the drawing context of Next2D's WebGL
+ * @description Next2Dの描画コンテキストを設定（WebGLまたはWebGPU）
+ *              Set the drawing context of Next2D (WebGL or WebGPU)
  *
- * @param  {number} context
+ * @param  {WebGLContext | WebGPUContext} context
  * @return {void}
  * @method
  * @public
  */
-export declare const $setContext: (context: Context) => void;
+export declare const $setContext: (context: WebGLContext | WebGPUContext) => void;
 /**
  * @type {CanvasToWebGLContext}
  * @public

package/src/RendererUtil.js

@@ -4,15 +4,15 @@
  */
 export const $samples = 4;
 /**
- * @type {Context}
+ * @type {WebGLContext | WebGPUContext}
  * @public
  */
 export let $context;
 /**
- * @description Next2DのWebGLの描画コンテキストを設定
- *              Set the drawing context of Next2D's WebGL
+ * @description Next2Dの描画コンテキストを設定（WebGLまたはWebGPU）
+ *              Set the drawing context of Next2D (WebGL or WebGPU)
  *
- * @param  {number} context
+ * @param  {WebGLContext | WebGPUContext} context
  * @return {void}
  * @method
  * @public

package/src/Shape/service/ShapeCommandService.js

@@ -157,10 +157,8 @@ export const execute = (commands, is_clip = false) => {
                         commands[index++] // alpha
                         );
                     }
-                    const matrix = new Float32Array([
-                        commands[index++], commands[index++], commands[index++],
-                        commands[index++], commands[index++], commands[index++]
-                    ]);
+                    const matrix = commands.subarray(index, index + 6);
+                    index += 6;
                     const spread = commands[index++];
                     const interpolation = commands[index++];
                     const focal = commands[index++];
@@ -182,10 +180,8 @@ export const execute = (commands, is_clip = false) => {
                     const length = commands[index++];
                     const buffer = new Uint8Array(commands.subarray(index, index + length));
                     index += length;
-                    const matrix = new Float32Array([
-                        commands[index++], commands[index++], commands[index++],
-                        commands[index++], commands[index++], commands[index++]
-                    ]);
+                    const matrix = commands.subarray(index, index + 6);
+                    index += 6;
                     $context.bitmapFill(buffer, matrix, width, height, Boolean(commands[index++]), Boolean(commands[index++]));
                 }
                 break;
@@ -211,10 +207,8 @@ export const execute = (commands, is_clip = false) => {
                         commands[index++] // alpha
                         );
                     }
-                    const matrix = new Float32Array([
-                        commands[index++], commands[index++], commands[index++],
-                        commands[index++], commands[index++], commands[index++]
-                    ]);
+                    const matrix = commands.subarray(index, index + 6);
+                    index += 6;
                     const spread = commands[index++];
                     const interpolation = commands[index++];
                     const focal = commands[index++];
@@ -240,10 +234,8 @@ export const execute = (commands, is_clip = false) => {
                     const length = commands[index++];
                     const buffer = new Uint8Array(commands.subarray(index, index + length));
                     index += length;
-                    const matrix = new Float32Array([
-                        commands[index++], commands[index++], commands[index++],
-                        commands[index++], commands[index++], commands[index++]
-                    ]);
+                    const matrix = commands.subarray(index, index + 6);
+                    index += 6;
                     $context.bitmapStroke(buffer, matrix, width, height, Boolean(commands[index++]), Boolean(commands[index++]));
                 }
                 break;

package/src/Shape/usecase/ShapeRenderUseCase.js

@@ -30,10 +30,10 @@ export const execute = (render_queue, index) => {
     // cache uniqueKey
     const uniqueKey = `${render_queue[index++]}`;
     const cacheKey = render_queue[index++];
-    const xScale = Math.round(Math.sqrt(matrix[0] * matrix[0]
-        + matrix[1] * matrix[1]) * 10000) / 10000;
-    const yScale = Math.round(Math.sqrt(matrix[2] * matrix[2]
-        + matrix[3] * matrix[3]) * 10000) / 10000;
+    const xScale = render_queue[index++];
+    const yScale = render_queue[index++];
+    // フィルターキャッシュ用のユニークキー（instanceId）
+    const filterKey = `${render_queue[index++]}`;
     let node;
     const hasCache = render_queue[index++];
     if (!hasCache) {
@@ -56,10 +56,13 @@ export const execute = (render_queue, index) => {
             $cacheStore.set(uniqueKey, `${cacheKey}`, node);
             // fixed logic
             const currentAttachment = $context.currentAttachmentObject;
-            $context.bind($context.atlasAttachmentObject);
+            const atlasAttachment = $context.atlasAttachmentObject;
+            if (atlasAttachment) {
+                $context.bind(atlasAttachment);
+            }
             $context.reset();
             $context.beginNodeRendering(node);
-            const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+            const offsetY = atlasAttachment ? atlasAttachment.height - node.y - height : 0;
             $context.setTransform(1, 0, 0, 1, node.x, offsetY);
             if (isDrawable) {
                 shapeCommandService(commands);
@@ -81,12 +84,15 @@ export const execute = (render_queue, index) => {
             $cacheStore.set(uniqueKey, `${cacheKey}`, node);
             // fixed logic
             const currentAttachment = $context.currentAttachmentObject;
-            $context.bind($context.atlasAttachmentObject);
+            const atlasAttachment = $context.atlasAttachmentObject;
+            if (atlasAttachment) {
+                $context.bind(atlasAttachment);
+            }
             // 初期化して、描画範囲を初期化
             $context.reset();
             $context.beginNodeRendering(node);
             // matrix設定
-            const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+            const offsetY = atlasAttachment ? atlasAttachment.height - node.y - height : 0;
             $context.setTransform(xScale, 0, 0, yScale, -xMin * xScale + node.x, -yMin * yScale + offsetY);
             if (gridData) {
                 gridData[24] = node.x;
@@ -121,7 +127,7 @@ export const execute = (render_queue, index) => {
         const params = render_queue.subarray(index, index + length);
         const width = Math.ceil(Math.abs(bounds[2] - bounds[0]));
         const height = Math.ceil(Math.abs(bounds[3] - bounds[1]));
-        $context.applyFilter(node, uniqueKey, updated, width, height, isBitmap, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
+        $context.applyFilter(node, filterKey, updated, width, height, isBitmap, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
         index += length;
         return index;
     }

package/src/TextField/usecase/TextFieldRenderUseCase.js

@@ -34,10 +34,10 @@ export const execute = (render_queue, index) => {
     const cacheKey = render_queue[index++];
     // text state
     const changed = Boolean(render_queue[index++]);
-    const xScale = Math.round(Math.sqrt(matrix[0] * matrix[0]
-        + matrix[1] * matrix[1]) * 10000) / 10000;
-    const yScale = Math.round(Math.sqrt(matrix[2] * matrix[2]
-        + matrix[3] * matrix[3]) * 10000) / 10000;
+    const xScale = render_queue[index++];
+    const yScale = render_queue[index++];
+    // フィルターキャッシュ用のユニークキー（instanceId）
+    const filterKey = `${render_queue[index++]}`;
     let node;
     const hasCache = render_queue[index++];
     if (!hasCache) {
@@ -95,10 +95,13 @@ export const execute = (render_queue, index) => {
         const canvas = textFieldDrawOffscreenCanvasUseCase(JSON.parse($textDecoder.decode(buffer)), textSetting, xScale, yScale);
         // fixed logic
         const currentAttachment = $context.currentAttachmentObject;
-        $context.bind($context.atlasAttachmentObject);
+        const atlasAttachment = $context.atlasAttachmentObject;
+        if (atlasAttachment) {
+            $context.bind(atlasAttachment);
+        }
         $context.reset();
         $context.beginNodeRendering(node);
-        const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+        const offsetY = atlasAttachment ? atlasAttachment.height - node.y - height : 0;
         $context.setTransform(1, 0, 0, 1, node.x, offsetY);
         $context.drawElement(node, canvas);
         $context.endNodeRendering();
@@ -123,7 +126,7 @@ export const execute = (render_queue, index) => {
         const params = render_queue.subarray(index, index + length);
         const width = Math.ceil(Math.abs(bounds[2] - bounds[0]));
         const height = Math.ceil(Math.abs(bounds[3] - bounds[1]));
-        $context.applyFilter(node, uniqueKey, Boolean(Math.max(+changed, +updated)), width, height, false, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
+        $context.applyFilter(node, filterKey, Boolean(Math.max(+changed, +updated)), width, height, false, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
         index += length;
         return index;
     }

package/src/Video/usecase/VideoRenderUseCase.js

@@ -29,6 +29,8 @@ export const execute = (render_queue, index, image_bitmaps) => {
     const cacheKey = "0";
     // video state
     const changed = Boolean(render_queue[index++]);
+    // フィルターキャッシュ用のユニークキー（instanceId）
+    const filterKey = `${render_queue[index++]}`;
     let node;
     const hasCache = render_queue[index++];
     if (!hasCache) {
@@ -44,13 +46,17 @@ export const execute = (render_queue, index, image_bitmaps) => {
         if (image_bitmaps && image_bitmaps.length) {
             // fixed logic
             const currentAttachment = $context.currentAttachmentObject;
-            $context.bind($context.atlasAttachmentObject);
+            const atlasAttachment = $context.atlasAttachmentObject;
+            if (atlasAttachment) {
+                $context.bind(atlasAttachment);
+            }
             $context.reset();
             $context.beginNodeRendering(node);
-            const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+            const offsetY = atlasAttachment ? atlasAttachment.height - node.y - height : 0;
             $context.setTransform(1, 0, 0, 1, node.x, offsetY);
             const imageBitmap = image_bitmaps.shift();
-            $context.drawElement(node, imageBitmap);
+            // Video用にflipY: trueを指定（WebGPUでは画像の座標系変換が必要）
+            $context.drawElement(node, imageBitmap, true);
             $context.endNodeRendering();
             if (currentAttachment) {
                 $context.bind(currentAttachment);
@@ -74,7 +80,7 @@ export const execute = (render_queue, index, image_bitmaps) => {
         const params = render_queue.subarray(index, index + length);
         const width = Math.ceil(Math.abs(bounds[2] - bounds[0]));
         const height = Math.ceil(Math.abs(bounds[3] - bounds[1]));
-        $context.applyFilter(node, uniqueKey, Boolean(Math.max(+changed, +updated)), width, height, true, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
+        $context.applyFilter(node, filterKey, Boolean(Math.max(+changed, +updated)), width, height, true, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
         index += length;
         return index;
     }

package/src/interface/IMessage.d.ts

@@ -8,4 +8,6 @@ export interface IMessage {
     canvas?: OffscreenCanvas;
     devicePixelRatio?: number;
     id?: string;
+    bgColor: number;
+    bgAlpha: number;
 }