@next2d/webgpu 3.0.5 → 3.1.0

package/src/Context.js

@@ -5,9 +5,7 @@ import { PathCommand } from "./PathCommand";
 import { BufferManager } from "./BufferManager";
 import { TextureManager } from "./TextureManager";
 import { FrameBufferManager } from "./FrameBufferManager";
-import { AttachmentManager } from "./AttachmentManager";
 import { PipelineManager } from "./Shader/PipelineManager";
-import { ComputePipelineManager } from "./Compute/ComputePipelineManager";
 import { $rootNodes, $resetAtlas, $getActiveAtlasIndex, $setActiveAtlasIndex, $setAtlasCreator, $getAtlasAttachmentObject, $getAtlasAttachmentObjectByIndex } from "./AtlasManager";
 import { addDisplayObjectToInstanceArray, getInstancedShaderManager } from "./Blend/BlendInstancedManager";
 import { execute as maskBeginMaskService } from "./Mask/service/MaskBeginMaskService";
@@ -38,14 +36,17 @@ import { execute as contextApplyFilterUseCase } from "./Context/usecase/ContextA
 import { execute as contextContainerEndLayerUseCase } from "./Context/usecase/ContextContainerEndLayerUseCase";
 /**
  * @description スワップチェーン転送用のIdentity UV定数: scale=(1,1), offset=(0,0)
+ *              Identity UV constant for swap-chain transfer: scale=(1,1), offset=(0,0)
  */
 const $IDENTITY_UV = new Float32Array([1.0, 1.0, 0.0, 0.0]);
 /**
  * @description save()/restore()用の Float32Array プール
+ *              Float32Array pool for save()/restore() operations
  */
 const $matrixPool = [];
 /**
  * @description leaveMask() 用フルスクリーンメッシュ定数
+ *              Full-screen mesh constant for leaveMask()
  */
 const $FULLSCREEN_MESH = new Float32Array([
     // Triangle 1: (0,0), (1,0), (0,1)
@@ -59,6 +60,7 @@ const $FULLSCREEN_MESH = new Float32Array([
 ]);
 /**
  * @description clearNodeArea() 用クワッド頂点定数
+ *              Quad vertex constant for clearNodeArea()
  */
 const $QUAD_VERTICES = new Float32Array([
     0, 0, // 左上
@@ -70,10 +72,17 @@ const $QUAD_VERTICES = new Float32Array([
 ]);
 /**
  * @description containerDrawCachedFilter() 用 CT uniform プリアロケート
+ *              Pre-allocated CT uniform for containerDrawCachedFilter()
  */
 const $ctUniform8 = new Float32Array(8);
+/**
+ * @description copyTempToAtlasNode() 用 uniform プリアロケート (scale=1,-1, offset=0,1)
+ *              Pre-allocated uniform for atlas node copy with Y-flip
+ */
+const $atlasNodeCopyUniform = new Float32Array([1, -1, 0, 1]);
 /**
  * @description fill() 用 uniform プリアロケート (color + matrix = 16 floats = 64 bytes)
+ *              Pre-allocated uniform for fill() (color + matrix = 16 floats = 64 bytes)
  */
 const $fillUniform16 = new Float32Array(16);
 // present() 用 Static BindGroup キャッシュ
@@ -137,343 +146,381 @@ const $msaaDescriptor = {
  * @class
  */
 export class Context {
+    /**
+     * @description WebGPUコンテキストを初期化する
+     *              Initialize the WebGPU context
+     *
+     * @param  {GPUDevice} device - GPUデバイス / GPU device instance
+     * @param  {GPUCanvasContext} canvas_context - GPUキャンバスコンテキスト / GPU canvas context
+     * @param  {GPUTextureFormat} preferred_format - 優先テクスチャフォーマット / Preferred texture format
+     * @param  {number} device_pixel_ratio - デバイスピクセル比 / Device pixel ratio
+     */
     constructor(device, canvas_context, preferred_format, device_pixel_ratio = 1) {
+        /** @description 変換行列スタック / Transform matrix stack */
         Object.defineProperty(this, "$stack", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 現在の2D変換行列 / Current 2D transform matrix */
         Object.defineProperty(this, "$matrix", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 背景クリア色R / Background clear color R */
         Object.defineProperty(this, "$clearColorR", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 背景クリア色G / Background clear color G */
         Object.defineProperty(this, "$clearColorG", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 背景クリア色B / Background clear color B */
         Object.defineProperty(this, "$clearColorB", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 背景クリア色A / Background clear color A */
         Object.defineProperty(this, "$clearColorA", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description メインアタッチメントオブジェクト / Main attachment object */
         Object.defineProperty(this, "$mainAttachmentObject", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description アタッチメントオブジェクトのスタック / Attachment object stack */
         Object.defineProperty(this, "$stackAttachmentObject", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description グローバルアルファ値 / Global alpha value */
         Object.defineProperty(this, "globalAlpha", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description グローバル合成操作 / Global composite operation */
         Object.defineProperty(this, "globalCompositeOperation", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 画像スムージングの有効/無効 / Whether image smoothing is enabled */
         Object.defineProperty(this, "imageSmoothingEnabled", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 塗りつぶしスタイル / Fill style color */
         Object.defineProperty(this, "$fillStyle", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 線スタイル / Stroke style color */
         Object.defineProperty(this, "$strokeStyle", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description マスク描画範囲 / Mask drawing bounds */
         Object.defineProperty(this, "maskBounds", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 線の太さ / Line thickness */
         Object.defineProperty(this, "thickness", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 線端の形状 / Line cap style */
         Object.defineProperty(this, "caps", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 線の結合スタイル / Line joint style */
         Object.defineProperty(this, "joints", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description マイターリミット / Miter limit */
         Object.defineProperty(this, "miterLimit", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description GPUデバイス / GPU device instance */
         Object.defineProperty(this, "device", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description GPUキャンバスコンテキスト / GPU canvas context */
         Object.defineProperty(this, "canvasContext", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description 優先テクスチャフォーマット / Preferred texture format */
         Object.defineProperty(this, "preferredFormat", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description コマンドエンコーダー / Command encoder */
         Object.defineProperty(this, "commandEncoder", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /** @description レンダーパスエンコーダー / Render pass encoder */
         Object.defineProperty(this, "renderPassEncoder", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        // Main canvas texture (for final display) - acquired once per frame
+        /** @description メインキャンバステクスチャ（最終表示用、フレームごとに1回取得） / Main canvas texture (for final display, acquired once per frame) */
         Object.defineProperty(this, "mainTexture", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /** @description メインキャンバステクスチャビュー / Main canvas texture view */
         Object.defineProperty(this, "mainTextureView", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /** @description フレーム開始済みフラグ / Whether the frame has been started */
         Object.defineProperty(this, "frameStarted", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: false
         });
-        // フレームごとの一時テクスチャ（endFrame()でdestroy）
+        /** @description フレームごとの一時テクスチャ（endFrame()でdestroy） / Per-frame temporary textures (destroyed in endFrame()) */
         Object.defineProperty(this, "frameTextures", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: []
         });
-        // フレームごとのプール管理テクスチャ（endFrame()でプールに返却）
+        /** @description フレームごとのプール管理テクスチャ（endFrame()でプールに返却） / Per-frame pooled textures (returned to pool in endFrame()) */
         Object.defineProperty(this, "pooledTextures", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: []
         });
-        // フレームごとのレンダーテクスチャプール管理（endFrame()でプールに返却）
+        /** @description フレームごとのレンダーテクスチャプール管理（endFrame()でプールに返却） / Per-frame render texture pool (returned to pool in endFrame()) */
         Object.defineProperty(this, "pooledRenderTextures", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: []
         });
-        // Current rendering target (could be main or atlas)
+        /** @description 現在のレンダーターゲット（メインまたはアトラス） / Current render target (could be main or atlas) */
         Object.defineProperty(this, "currentRenderTarget", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        // Current viewport size (WebGL版と同じ: アトラス描画時はアトラスサイズを使用)
+        /** @description 現在のビューポート幅（アトラス描画時はアトラスサイズ） / Current viewport width (atlas size during atlas rendering) */
         Object.defineProperty(this, "viewportWidth", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
+        /** @description 現在のビューポート高さ（アトラス描画時はアトラスサイズ） / Current viewport height (atlas size during atlas rendering) */
         Object.defineProperty(this, "viewportHeight", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
+        /** @description パスコマンド / Path command handler */
         Object.defineProperty(this, "pathCommand", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description バッファマネージャー / Buffer manager */
         Object.defineProperty(this, "bufferManager", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description テクスチャマネージャー / Texture manager */
         Object.defineProperty(this, "textureManager", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description フレームバッファマネージャー / Frame buffer manager */
         Object.defineProperty(this, "frameBufferManager", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /** @description パイプラインマネージャー / Pipeline manager */
         Object.defineProperty(this, "pipelineManager", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "computePipelineManager", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "attachmentManager", {
+        /** @description 新しい描画状態フラグ / New draw state flag */
+        Object.defineProperty(this, "newDrawState", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
-        Object.defineProperty(this, "newDrawState", {
+        /** @description cacheAsBitmap用の保留中アトラスノードスタック / Pending atlas nodes stack for cacheAsBitmap */
+        Object.defineProperty(this, "_pendingAtlasNodes", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: false
+            value: []
         });
-        // コンテナレイヤースタック（フィルター/ブレンド用）
+        /** @description コンテナレイヤースタック（フィルター/ブレンド用） / Container layer stack (for filter/blend) */
         Object.defineProperty(this, "$containerLayerStack", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: []
         });
+        /** @description コンテナレイヤーのコンテンツサイズ / Container layer content sizes */
         Object.defineProperty(this, "containerLayerContentSizes", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: []
         });
-        // マスク描画モードフラグ（beginMask〜endMask間でtrue）
+        /** @description マスク描画モードフラグ（beginMask〜endMask間でtrue） / Mask drawing mode flag (true between beginMask and endMask) */
         Object.defineProperty(this, "inMaskMode", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: false
         });
-        // ノード領域クリア済みフラグ（beginNodeRendering〜endNodeRendering間で使用）
+        /** @description ノード領域クリア済みフラグ（beginNodeRendering〜endNodeRendering間で使用） / Node area cleared flag (used between beginNodeRendering and endNodeRendering) */
         Object.defineProperty(this, "nodeAreaCleared", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: false
         });
-        // 現在のノードのシザー範囲（クリア後に戻すため）
+        /** @description 現在のノードのシザー範囲（クリア後に戻すため） / Current node scissor rect (to restore after clearing) */
         Object.defineProperty(this, "currentNodeScissor", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        // アトラスレンダーパス統合: 同一アトラスへの連続描画でパスを再利用
+        /** @description アトラスレンダーパス統合: 同一アトラスへの連続描画でパスを再利用 / Atlas render pass integration: reuse pass for consecutive draws to the same atlas */
         Object.defineProperty(this, "nodeRenderPassAtlasIndex", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: -1
         });
-        // Dynamic Uniform BindGroup（fill/stencilパイプライン共有、フレームごとに1回作成）
+        /** @description Dynamic Uniform BindGroup（fill/stencilパイプライン共有、フレームごとに1回作成） / Dynamic Uniform BindGroup (shared by fill/stencil pipelines, created once per frame) */
         Object.defineProperty(this, "fillDynamicBindGroup", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /** @description Dynamic Uniform BindGroupのバッファ / Dynamic Uniform BindGroup buffer */
         Object.defineProperty(this, "fillDynamicBindGroupBuffer", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        // clearNodeArea() 用頂点バッファキャッシュ
+        /** @description clearNodeArea() 用頂点バッファキャッシュ / Vertex buffer cache for clearNodeArea() */
         Object.defineProperty(this, "nodeClearQuadBuffer", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        // Storage Buffer + Indirect Drawing を使用するかどうか
+        /** @description Storage Buffer + Indirect Drawing を使用するかどうか / Whether to use Storage Buffer + Indirect Drawing */
         Object.defineProperty(this, "useOptimizedInstancing", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: true
         });
-        // リサイズ後にcanvasContextの再設定が必要かどうか
-        // ($resizeComplete()でcanvas.width/heightが設定された後、ensureMainTexture()でconfigure()を呼ぶ)
+        /** @description リサイズ後にcanvasContextの再設定が必要かどうか / Whether canvasContext reconfiguration is needed after resize */
         Object.defineProperty(this, "$needsReconfigure", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: false
         });
-        // Hot Path 用の事前割り当てバッファ
+        /** @description Hot Path 用の事前割り当てバッファ / Pre-allocated buffer for hot path */
         Object.defineProperty(this, "$uniformData8", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new Float32Array(8)
         });
+        /** @description Hot Path 用の事前割り当てシザーレクト / Pre-allocated scissor rect for hot path */
         Object.defineProperty(this, "$scissorRect", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: { "x": 0, "y": 0, "w": 0, "h": 0 }
         });
-        // フィルター/コンテナレイヤー用のプリアロケートされた設定オブジェクト
+        /** @description フィルター/コンテナレイヤー用のプリアロケートされた設定オブジェクト / Pre-allocated config object for filter/container layers */
         Object.defineProperty(this, "$filterConfig", {
             enumerable: true,
             configurable: true,
@@ -528,8 +575,6 @@ export class Context {
         this.pipelineManager = new PipelineManager(device, preferred_format);
         // 遅延パイプライン群を即座に先行作成（初回アクセス時のレイテンシ解消）
         this.pipelineManager.preloadLazyGroups();
-        this.computePipelineManager = new ComputePipelineManager(device);
-        this.attachmentManager = new AttachmentManager(device);
         // グラデーションLUT共有アタッチメントにGPUDeviceを設定
         $setGradientLUTDevice(device);
         $setFilterGradientLUTDevice(device);
@@ -546,7 +591,6 @@ export class Context {
             "frameBufferManager": this.frameBufferManager,
             "pipelineManager": this.pipelineManager,
             "textureManager": this.textureManager,
-            "computePipelineManager": this.computePipelineManager,
             "frameTextures": this.frameTextures
         };
         // コンテキストをグローバル変数にセット
@@ -554,6 +598,9 @@ export class Context {
     }
     /**
      * @description 転送範囲をリセット（フレーム開始）
+     *              Reset transfer bounds (frame start)
+     *
+     * @return {void}
      */
     clearTransferBounds() {
         // フレーム開始時に呼ばれる
@@ -562,6 +609,13 @@ export class Context {
     }
     /**
      * @description 背景色を更新
+     *              Update the background color
+     *
+     * @param  {number} red   - 赤色成分 / Red component
+     * @param  {number} green - 緑色成分 / Green component
+     * @param  {number} blue  - 青色成分 / Blue component
+     * @param  {number} alpha - アルファ成分 / Alpha component
+     * @return {void}
      */
     updateBackgroundColor(red, green, blue, alpha) {
         this.$clearColorR = red;
@@ -571,6 +625,9 @@ export class Context {
     }
     /**
      * @description 背景色で塗りつぶす（メインアタッチメント）
+     *              Fill with background color (main attachment)
+     *
+     * @return {void}
      */
     fillBackgroundColor() {
         // メインアタッチメントがない場合はスキップ
@@ -618,6 +675,12 @@ export class Context {
     }
     /**
      * @description メインcanvasのサイズを変更
+     *              Resize the main canvas
+     *
+     * @param  {number}  width       - 新しい幅 / New width
+     * @param  {number}  height      - 新しい高さ / New height
+     * @param  {boolean} cache_clear - キャッシュをクリアするか / Whether to clear cache
+     * @return {void}
      */
     resize(width, height, cache_clear = true) {
         // インスタンス配列をクリア（WebGL版と同じ）
@@ -706,16 +769,11 @@ export class Context {
         // メインアタッチメントをバインド
         this.bind(this.$mainAttachmentObject);
     }
-    /**
-     * @description 指定範囲をクリアする
-     */
-    clearRect(_x, _y, _w, _h) {
-        // WebGPU clear rect implementation
-        // WebGPUではclearはレンダーパス開始時に行うため、ここでは何もしない
-        // 実際のクリアはbeginNodeRenderingやbeginFrameで行われる
-    }
     /**
      * @description 現在の2D変換行列を保存
+     *              Save the current 2D transform matrix
+     *
+     * @return {void}
      */
     save() {
         const matrix = $matrixPool.length > 0 ? $matrixPool.pop() : new Float32Array(9);
@@ -724,6 +782,9 @@ export class Context {
     }
     /**
      * @description 2D変換行列を復元
+     *              Restore the 2D transform matrix
+     *
+     * @return {void}
      */
     restore() {
         const matrix = this.$stack.pop();
@@ -734,6 +795,15 @@ export class Context {
     }
     /**
      * @description 2D変換行列を設定
+     *              Set the 2D transform matrix
+     *
+     * @param  {number} a - 水平スケール / Horizontal scale
+     * @param  {number} b - 垂直スキュー / Vertical skew
+     * @param  {number} c - 水平スキュー / Horizontal skew
+     * @param  {number} d - 垂直スケール / Vertical scale
+     * @param  {number} e - 水平移動 / Horizontal translation
+     * @param  {number} f - 垂直移動 / Vertical translation
+     * @return {void}
      */
     setTransform(a, b, c, d, e, f) {
         this.$matrix[0] = a;
@@ -745,6 +815,15 @@ export class Context {
     }
     /**
      * @description 現在の2D変換行列に対して乗算を行います
+     *              Multiply the current 2D transform matrix
+     *
+     * @param  {number} a - 水平スケール / Horizontal scale
+     * @param  {number} b - 垂直スキュー / Vertical skew
+     * @param  {number} c - 水平スキュー / Horizontal skew
+     * @param  {number} d - 垂直スケール / Vertical scale
+     * @param  {number} e - 水平移動 / Horizontal translation
+     * @param  {number} f - 垂直移動 / Vertical translation
+     * @return {void}
      */
     transform(a, b, c, d, e, f) {
         const m = this.$matrix;
@@ -758,6 +837,9 @@ export class Context {
     }
     /**
      * @description コンテキストの値を初期化する
+     *              Reset all context values to their initial state
+     *
+     * @return {void}
      */
     reset() {
         this.$matrix.set([1, 0, 0, 0, 1, 0, 0, 0, 1]);
@@ -769,30 +851,57 @@ export class Context {
     }
     /**
      * @description パスを開始
+     *              Begin a new path
+     *
+     * @return {void}
      */
     beginPath() {
         this.pathCommand.beginPath();
     }
     /**
      * @description パスを移動
+     *              Move the path to the specified point
+     *
+     * @param  {number} x - X座標 / X coordinate
+     * @param  {number} y - Y座標 / Y coordinate
+     * @return {void}
      */
     moveTo(x, y) {
         this.pathCommand.moveTo(x, y);
     }
     /**
      * @description パスを線で結ぶ
+     *              Draw a line to the specified point
+     *
+     * @param  {number} x - X座標 / X coordinate
+     * @param  {number} y - Y座標 / Y coordinate
+     * @return {void}
      */
     lineTo(x, y) {
         this.pathCommand.lineTo(x, y);
     }
     /**
      * @description 二次ベジェ曲線を描画
+     *              Draw a quadratic Bézier curve
+     *
+     * @param  {number} cx - 制御点X / Control point X
+     * @param  {number} cy - 制御点Y / Control point Y
+     * @param  {number} x  - 終点X / End point X
+     * @param  {number} y  - 終点Y / End point Y
+     * @return {void}
      */
     quadraticCurveTo(cx, cy, x, y) {
         this.pathCommand.quadraticCurveTo(cx, cy, x, y);
     }
     /**
      * @description 塗りつぶしスタイルを設定
+     *              Set the fill style color
+     *
+     * @param  {number} red   - 赤色成分 / Red component
+     * @param  {number} green - 緑色成分 / Green component
+     * @param  {number} blue  - 青色成分 / Blue component
+     * @param  {number} alpha - アルファ成分 / Alpha component
+     * @return {void}
      */
     fillStyle(red, green, blue, alpha) {
         this.$fillStyle[0] = red;
@@ -802,6 +911,13 @@ export class Context {
     }
     /**
      * @description 線のスタイルを設定
+     *              Set the stroke style color
+     *
+     * @param  {number} red   - 赤色成分 / Red component
+     * @param  {number} green - 緑色成分 / Green component
+     * @param  {number} blue  - 青色成分 / Blue component
+     * @param  {number} alpha - アルファ成分 / Alpha component
+     * @return {void}
      */
     strokeStyle(red, green, blue, alpha) {
         this.$strokeStyle[0] = red;
@@ -811,25 +927,46 @@ export class Context {
     }
     /**
      * @description パスを閉じる
+     *              Close the current path
+     *
+     * @return {void}
      */
     closePath() {
         this.pathCommand.closePath();
     }
     /**
      * @description 円弧を描画
+     *              Draw an arc
+     *
+     * @param  {number} x      - 中心X / Center X
+     * @param  {number} y      - 中心Y / Center Y
+     * @param  {number} radius - 半径 / Radius
+     * @return {void}
      */
     arc(x, y, radius) {
         this.pathCommand.arc(x, y, radius);
     }
     /**
      * @description 3次ベジェ曲線を描画
+     *              Draw a cubic Bézier curve
+     *
+     * @param  {number} cx1 - 第1制御点X / First control point X
+     * @param  {number} cy1 - 第1制御点Y / First control point Y
+     * @param  {number} cx2 - 第2制御点X / Second control point X
+     * @param  {number} cy2 - 第2制御点Y / Second control point Y
+     * @param  {number} x   - 終点X / End point X
+     * @param  {number} y   - 終点Y / End point Y
+     * @return {void}
      */
     bezierCurveTo(cx1, cy1, cx2, cy2, x, y) {
         this.pathCommand.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
     }
     /**
      * @description 描画メソッド共通: レンダーパスの確保とノード領域クリア
+     *              Common drawing method: ensure render pass and clear node area
      *              fill(), stroke(), gradientFill(), bitmapFill(), gradientStroke(), bitmapStroke() で使用
+     *
+     * @return {void}
      */
     ensureFillRenderPass() {
         // フレームが開始されていない場合は開始
@@ -918,6 +1055,9 @@ export class Context {
     }
     /**
      * @description 塗りつぶしを実行（Loop-Blinn方式対応）
+     *              Execute fill operation (with Loop-Blinn support)
+     *
+     * @return {void}
      */
     fill() {
         const pathVertices = this.pathCommand.$getVertices;
@@ -954,6 +1094,9 @@ export class Context {
     }
     /**
      * @description Dynamic Uniform BindGroupを取得（フレーム内で初回呼び出し時に作成）
+     *              Get or create the Dynamic Uniform BindGroup (created on first call within a frame)
+     *
+     * @return {GPUBindGroup} Dynamic Uniform BindGroup
      */
     getOrCreateFillDynamicBindGroup() {
         const currentBuffer = this.bufferManager.dynamicUniform.getBuffer();
@@ -978,89 +1121,93 @@ export class Context {
     }
     /**
      * @description fill/stroke用のcolor/matrix uniformを書き込む
-     * FillUniforms構造体: color(vec4) + matrix0(vec4) + matrix1(vec4) + matrix2(vec4) = 64 bytes
-     * @return Dynamic Uniform Buffer内のアライメント済みオフセット
-     */
-    writeFillUniform(red, green, blue, alpha, a, b, c, d, tx, ty, viewportWidth, viewportHeight) {
+     *              Write color/matrix uniform for fill/stroke operations
+     *              FillUniforms構造体: color(vec4) + matrix0(vec4) + matrix1(vec4) + matrix2(vec4) = 64 bytes
+     *
+     * @param  {number} red              - 赤色成分 / Red component
+     * @param  {number} green            - 緑色成分 / Green component
+     * @param  {number} blue             - 青色成分 / Blue component
+     * @param  {number} alpha            - アルファ成分 / Alpha component
+     * @param  {number} a                - 変換行列a / Transform matrix a
+     * @param  {number} b                - 変換行列b / Transform matrix b
+     * @param  {number} c                - 変換行列c / Transform matrix c
+     * @param  {number} d                - 変換行列d / Transform matrix d
+     * @param  {number} tx               - 変換行列tx / Transform matrix tx
+     * @param  {number} ty               - 変換行列ty / Transform matrix ty
+     * @param  {number} viewport_width   - ビューポート幅 / Viewport width
+     * @param  {number} viewport_height  - ビューポート高さ / Viewport height
+     * @return {number} Dynamic Uniform Buffer内のアライメント済みオフセット / Aligned offset in the Dynamic Uniform Buffer
+     */
+    writeFillUniform(red, green, blue, alpha, a, b, c, d, tx, ty, viewport_width, viewport_height) {
         // color
         $fillUniform16[0] = red;
         $fillUniform16[1] = green;
         $fillUniform16[2] = blue;
         $fillUniform16[3] = alpha;
         // matrix0 (a, b, 0, pad) — ビューポート正規化
-        $fillUniform16[4] = a / viewportWidth;
-        $fillUniform16[5] = b / viewportHeight;
+        $fillUniform16[4] = a / viewport_width;
+        $fillUniform16[5] = b / viewport_height;
         $fillUniform16[6] = 0;
         $fillUniform16[7] = 0;
         // matrix1 (c, d, 0, pad)
-        $fillUniform16[8] = c / viewportWidth;
-        $fillUniform16[9] = d / viewportHeight;
+        $fillUniform16[8] = c / viewport_width;
+        $fillUniform16[9] = d / viewport_height;
         $fillUniform16[10] = 0;
         $fillUniform16[11] = 0;
         // matrix2 (tx, ty, 1, pad)
-        $fillUniform16[12] = tx / viewportWidth;
-        $fillUniform16[13] = ty / viewportHeight;
+        $fillUniform16[12] = tx / viewport_width;
+        $fillUniform16[13] = ty / viewport_height;
         $fillUniform16[14] = 1;
         $fillUniform16[15] = 0;
         return this.bufferManager.dynamicUniform.allocate($fillUniform16);
     }
     /**
      * @description 2パスステンシルフィル（アトラス用）
+     *              Two-pass stencil fill (for atlas)
+     *
+     * @param  {GPUBuffer}   vertex_buffer  - 頂点バッファ / Vertex buffer
+     * @param  {number}      vertex_count   - 頂点数 / Vertex count
+     * @param  {GPUBindGroup} bind_group    - バインドグループ / Bind group
+     * @param  {number}      uniform_offset - ユニフォームオフセット / Uniform offset
+     * @return {void}
      */
-    fillWithStencil(vertexBuffer, vertexCount, bindGroup, uniformOffset) {
-        contextFillWithStencilService(this.renderPassEncoder, this.pipelineManager, vertexBuffer, vertexCount, bindGroup, uniformOffset);
+    fillWithStencil(vertex_buffer, vertex_count, bind_group, uniform_offset) {
+        contextFillWithStencilService(this.renderPassEncoder, this.pipelineManager, vertex_buffer, vertex_count, bind_group, uniform_offset);
     }
     /**
      * @description 2パスステンシルフィル（メインキャンバス用）
+     *              Two-pass stencil fill (for main canvas)
+     *
+     * @param  {GPUBuffer}   vertex_buffer  - 頂点バッファ / Vertex buffer
+     * @param  {number}      vertex_count   - 頂点数 / Vertex count
+     * @param  {GPUBindGroup} bind_group    - バインドグループ / Bind group
+     * @param  {number}      uniform_offset - ユニフォームオフセット / Uniform offset
+     * @return {void}
      */
-    fillWithStencilMain(vertexBuffer, vertexCount, bindGroup, uniformOffset) {
-        contextFillWithStencilMainService(this.renderPassEncoder, this.pipelineManager, vertexBuffer, vertexCount, bindGroup, uniformOffset);
+    fillWithStencilMain(vertex_buffer, vertex_count, bind_group, uniform_offset) {
+        contextFillWithStencilMainService(this.renderPassEncoder, this.pipelineManager, vertex_buffer, vertex_count, bind_group, uniform_offset);
     }
     /**
      * @description 単純なフィル（ステンシルなし、キャンバス描画用）
-     */
-    fillSimple(vertexBuffer, vertexCount, useStencilPipeline, bindGroup, uniformOffset) {
+     *              Simple fill (no stencil, for canvas rendering)
+     *
+     * @param  {GPUBuffer}    vertex_buffer        - 頂点バッファ / Vertex buffer
+     * @param  {number}       vertex_count         - 頂点数 / Vertex count
+     * @param  {boolean}      use_stencil_pipeline - ステンシルパイプラインを使用するか / Whether to use stencil pipeline
+     * @param  {GPUBindGroup} bind_group           - バインドグループ / Bind group
+     * @param  {number}       uniform_offset       - ユニフォームオフセット / Uniform offset
+     * @return {void}
+     */
+    fillSimple(vertex_buffer, vertex_count, use_stencil_pipeline, bind_group, uniform_offset) {
         const clipLevel = this.$mainAttachmentObject?.clipLevel ?? 1;
-        contextFillSimpleService(this.renderPassEncoder, this.pipelineManager, vertexBuffer, vertexCount, bindGroup, uniformOffset, !!this.currentRenderTarget, useStencilPipeline, clipLevel);
-    }
-    /**
-     * @description オフスクリーンアタッチメントにバインド
-     * WebGL: FrameBufferManagerBindAttachmentObjectService
-     */
-    bindAttachment(attachment) {
-        this.attachmentManager.bindAttachment(attachment);
-        // 現在のレンダーターゲットをオフスクリーンに切り替え
-        // color?.view または texture?.view を使用
-        const view = attachment.color?.view ?? attachment.texture?.view;
-        if (view) {
-            this.currentRenderTarget = view;
-        }
-    }
-    /**
-     * @description メインキャンバスにバインド
-     * WebGL: FrameBufferManagerUnBindAttachmentObjectService
-     */
-    unbindAttachment() {
-        this.attachmentManager.unbindAttachment();
-        this.currentRenderTarget = null;
-    }
-    /**
-     * @description アタッチメントオブジェクトを取得
-     * WebGL: FrameBufferManagerGetAttachmentObjectUseCase
-     */
-    getAttachmentObject(width, height, msaa = false) {
-        return this.attachmentManager.getAttachmentObject(width, height, msaa);
-    }
-    /**
-     * @description アタッチメントオブジェクトを解放
-     * WebGL: FrameBufferManagerReleaseAttachmentObjectUseCase
-     */
-    releaseAttachment(attachment) {
-        this.attachmentManager.releaseAttachment(attachment);
+        contextFillSimpleService(this.renderPassEncoder, this.pipelineManager, vertex_buffer, vertex_count, bind_group, uniform_offset, this.currentRenderTarget !== null, use_stencil_pipeline, clipLevel);
     }
     /**
      * @description 線の描画を実行（WebGL版と同じ仕様）
+     *              Execute stroke drawing (same specification as WebGL version)
      *              WebGL版と同様に、ストロークを塗りとして描画する
+     *
+     * @return {void}
      */
     stroke() {
         // WebGL版と同じ: IPath[]形式で頂点を取得
@@ -1101,6 +1248,15 @@ export class Context {
     }
     /**
      * @description グラデーションの塗りつぶしを実行
+     *              Execute gradient fill
+     *
+     * @param  {number}       type          - グラデーションタイプ / Gradient type
+     * @param  {number[]}     stops         - カラーストップ配列 / Color stop array
+     * @param  {Float32Array} matrix        - グラデーション変換行列 / Gradient transform matrix
+     * @param  {number}       spread        - スプレッドメソッド / Spread method
+     * @param  {number}       interpolation - 補間方法 / Interpolation method
+     * @param  {number}       focal         - 焦点距離 / Focal point ratio
+     * @return {void}
      */
     gradientFill(type, stops, matrix, spread, interpolation, focal) {
         const pathVertices = this.pathCommand.$getVertices;
@@ -1116,7 +1272,7 @@ export class Context {
         const useMainStencil = !!((this.inMaskMode || $isMaskTestEnabled()) && this.$mainAttachmentObject?.stencil?.view && !this.currentRenderTarget);
         const useStencilPipeline = useMainStencil;
         // アトラスへの描画かどうか
-        const useAtlasTarget = !!this.currentRenderTarget;
+        const useAtlasTarget = this.currentRenderTarget !== null;
         const lutTexture = contextGradientFillUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, pathVertices, this.$matrix, this.$fillStyle, type, stops, matrix, spread, interpolation, focal, viewportWidth, viewportHeight, useAtlasTarget, useStencilPipeline, this.$mainAttachmentObject?.clipLevel ?? 1);
         if (lutTexture) {
             this.addFrameTexture(lutTexture);
@@ -1127,6 +1283,15 @@ export class Context {
     }
     /**
      * @description ビットマップの塗りつぶしを実行
+     *              Execute bitmap fill
+     *
+     * @param  {Uint8Array}   pixels - ピクセルデータ / Pixel data
+     * @param  {Float32Array} matrix - ビットマップ変換行列 / Bitmap transform matrix
+     * @param  {number}       width  - ビットマップ幅 / Bitmap width
+     * @param  {number}       height - ビットマップ高さ / Bitmap height
+     * @param  {boolean}      repeat - 繰り返しフラグ / Repeat flag
+     * @param  {boolean}      smooth - スムージングフラグ / Smoothing flag
+     * @return {void}
      */
     bitmapFill(pixels, matrix, width, height, repeat, smooth) {
         const pathVertices = this.pathCommand.$getVertices;
@@ -1144,7 +1309,7 @@ export class Context {
         const useStencilPipeline = useAtlasStencil || useMainStencil;
         // マスク描画時のクリップレベルを取得
         const clipLevel = this.$mainAttachmentObject?.clipLevel ?? 1;
-        const bitmapTexture = contextBitmapFillUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, pathVertices, this.$matrix, this.$fillStyle, pixels, matrix, width, height, repeat, smooth, this.viewportWidth, this.viewportHeight, !!this.currentRenderTarget, !!useStencilPipeline, clipLevel);
+        const bitmapTexture = contextBitmapFillUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, pathVertices, this.$matrix, this.$fillStyle, pixels, matrix, width, height, repeat, smooth, this.viewportWidth, this.viewportHeight, this.currentRenderTarget !== null, !!useStencilPipeline, clipLevel);
         // ビットマップテクスチャをフレーム終了時に解放するリストに追加
         if (bitmapTexture) {
             this.addFrameTexture(bitmapTexture);
@@ -1155,6 +1320,15 @@ export class Context {
     }
     /**
      * @description グラデーション線の描画を実行
+     *              Execute gradient stroke drawing
+     *
+     * @param  {number}       type          - グラデーションタイプ / Gradient type
+     * @param  {number[]}     stops         - カラーストップ配列 / Color stop array
+     * @param  {Float32Array} matrix        - グラデーション変換行列 / Gradient transform matrix
+     * @param  {number}       spread        - スプレッドメソッド / Spread method
+     * @param  {number}       interpolation - 補間方法 / Interpolation method
+     * @param  {number}       focal         - 焦点距離 / Focal point ratio
+     * @return {void}
      */
     gradientStroke(type, stops, matrix, spread, interpolation, focal) {
         // WebGL版と同じ: IPath[]形式で頂点を取得
@@ -1170,7 +1344,7 @@ export class Context {
         const useMainStencil = !!(!this.currentRenderTarget && this.$mainAttachmentObject?.stencil?.view);
         const useStencilPipeline = useAtlasStencil || useMainStencil;
         // WebGL版と同じ: thicknessをそのまま渡し、内部で/2される
-        const lutTexture = contextGradientStrokeUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, vertices, this.thickness, this.$matrix, this.$strokeStyle, type, stops, matrix, spread, interpolation, focal, this.viewportWidth, this.viewportHeight, !!this.currentRenderTarget, useStencilPipeline);
+        const lutTexture = contextGradientStrokeUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, vertices, this.thickness, this.$matrix, this.$strokeStyle, type, stops, matrix, spread, interpolation, focal, this.viewportWidth, this.viewportHeight, this.currentRenderTarget !== null, useStencilPipeline);
         // LUTテクスチャをフレーム終了時に解放するリストに追加
         if (lutTexture) {
             this.addFrameTexture(lutTexture);
@@ -1181,6 +1355,15 @@ export class Context {
     }
     /**
      * @description ビットマップ線の描画を実行
+     *              Execute bitmap stroke drawing
+     *
+     * @param  {Uint8Array}   pixels - ピクセルデータ / Pixel data
+     * @param  {Float32Array} matrix - ビットマップ変換行列 / Bitmap transform matrix
+     * @param  {number}       width  - ビットマップ幅 / Bitmap width
+     * @param  {number}       height - ビットマップ高さ / Bitmap height
+     * @param  {boolean}      repeat - 繰り返しフラグ / Repeat flag
+     * @param  {boolean}      smooth - スムージングフラグ / Smoothing flag
+     * @return {void}
      */
     bitmapStroke(pixels, matrix, width, height, repeat, smooth) {
         // WebGL版と同じ: IPath[]形式で頂点を取得
@@ -1196,7 +1379,7 @@ export class Context {
         const useMainStencil = !!(!this.currentRenderTarget && this.$mainAttachmentObject?.stencil?.view);
         const useStencilPipeline = useAtlasStencil || useMainStencil;
         // WebGL版と同じ: thicknessをそのまま渡し、内部で/2される
-        const bitmapTexture = contextBitmapStrokeUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, vertices, this.thickness, this.$matrix, this.$strokeStyle, pixels, matrix, width, height, repeat, smooth, this.viewportWidth, this.viewportHeight, !!this.currentRenderTarget, useStencilPipeline);
+        const bitmapTexture = contextBitmapStrokeUseCase(this.device, this.renderPassEncoder, this.bufferManager, this.pipelineManager, vertices, this.thickness, this.$matrix, this.$strokeStyle, pixels, matrix, width, height, repeat, smooth, this.viewportWidth, this.viewportHeight, this.currentRenderTarget !== null, useStencilPipeline);
         // ビットマップテクスチャをフレーム終了時に解放するリストに追加
         if (bitmapTexture) {
             this.addFrameTexture(bitmapTexture);
@@ -1207,8 +1390,11 @@ export class Context {
     }
     /**
      * @description マスク処理を実行
+     *              Execute mask clipping operation
      *              WebGL版と同様にステンシルバッファを使用したクリッピング
      *              メインアタッチメントとアトラス両方でマスク処理をサポート
+     *
+     * @return {void}
      */
     clip() {
         // メインアタッチメントまたはアトラスのいずれかを使用
@@ -1253,6 +1439,10 @@ export class Context {
     }
     /**
      * @description アタッチメントオブジェクトをバインド
+     *              Bind an attachment object
+     *
+     * @param  {IAttachmentObject} attachment_object - バインドするアタッチメント / Attachment to bind
+     * @return {void}
      */
     bind(attachment_object) {
         this.frameBufferManager.setCurrentAttachment(attachment_object);
@@ -1262,8 +1452,11 @@ export class Context {
     }
     /**
      * @description 現在のアタッチメントオブジェクトを取得
+     *              Get the current attachment object
      *              アトラスがバインドされていない場合はメインアタッチメントを返す
      *              When no atlas is bound, returns the main attachment
+     *
+     * @return {IAttachmentObject | null} 現在のアタッチメント / Current attachment
      */
     get currentAttachmentObject() {
         // WebGL版と同じ: currentAttachmentがない場合はmainAttachmentを返す
@@ -1273,19 +1466,30 @@ export class Context {
     }
     /**
      * @description アトラス専用のアタッチメントオブジェクトを取得
+     *              Get the atlas-specific attachment object
+     *
+     * @return {IAttachmentObject | null} アトラスアタッチメント / Atlas attachment
      */
     get atlasAttachmentObject() {
         return $getAtlasAttachmentObject();
     }
     /**
      * @description グリッドの描画データをセット
+     *              Set grid drawing data
+     *
+     * @param  {Float32Array | null} grid_data - グリッドデータ / Grid data
+     * @return {void}
      */
     useGrid(grid_data) {
         $gridDataMap.set($fillBufferIndex, grid_data);
     }
     /**
      * @description 指定のノード範囲で描画を開始（アトラステクスチャへの描画）
+     *              Begin rendering for the specified node region (drawing to atlas texture)
      *              2パスステンシルフィル対応: ステンシルバッファ付きレンダーパスを使用
+     *
+     * @param  {Node} node - 描画対象ノード / Target node for rendering
+     * @return {void}
      */
     beginNodeRendering(node) {
         // ノード領域クリアフラグをリセット
@@ -1353,7 +1557,10 @@ export class Context {
     }
     /**
      * @description ノード領域がまだクリアされていない場合にクリアを実行
+     *              Clear the node area if it has not been cleared yet
      *              最初の描画操作（fill, gradientFill, gradientStroke等）で呼び出される
+     *
+     * @return {void}
      */
     ensureNodeAreaCleared() {
         if (this.nodeAreaCleared) {
@@ -1364,7 +1571,10 @@ export class Context {
     }
     /**
      * @description ノード領域をクリア（透明色 + ステンシル=0）
+     *              Clear the node area (transparent color + stencil=0)
      *              WebGL版の gl.clear(COLOR_BUFFER_BIT | STENCIL_BUFFER_BIT) と同等
+     *
+     * @return {void}
      */
     clearNodeArea() {
         if (!this.renderPassEncoder) {
@@ -1399,7 +1609,10 @@ export class Context {
     }
     /**
      * @description 指定のノード範囲で描画を終了
+     *              End rendering for the current node region
      *              レンダーパスは終了しない（次のbeginNodeRenderingで再利用するため）
+     *
+     * @return {void}
      */
     endNodeRendering() {
         // レンダーパスは終了しない（次のbeginNodeRenderingで同一アトラスなら再利用）
@@ -1413,6 +1626,9 @@ export class Context {
     }
     /**
      * @description 塗りの描画を実行
+     *              Execute fill drawing
+     *
+     * @return {void}
      */
     drawFill() {
         // WebGL版ではfill()がバッファに蓄積し、drawFill()がまとめてGPU描画する
@@ -1425,6 +1641,15 @@ export class Context {
     }
     /**
      * @description インスタンスを描画
+     *              Draw a display object instance
+     *
+     * @param  {Node}         node            - 描画対象ノード / Target node
+     * @param  {number}       x_min           - バウンディングボックス左端 / Bounding box left
+     * @param  {number}       y_min           - バウンディングボックス上端 / Bounding box top
+     * @param  {number}       x_max           - バウンディングボックス右端 / Bounding box right
+     * @param  {number}       y_max           - バウンディングボックス下端 / Bounding box bottom
+     * @param  {Float32Array} color_transform - カラー変換パラメータ / Color transform parameters
+     * @return {void}
      */
     drawDisplayObject(node, x_min, y_min, x_max, y_max, color_transform) {
         // WebGPU display object drawing
@@ -1438,10 +1663,11 @@ export class Context {
      * @description インスタンス配列を描画
      *              Draw instanced arrays
      *
-     * useOptimizedInstancingがtrueの場合、Storage BufferとIndirect Drawingを使用。
-     * - Storage Buffer: メモリアロケーション削減、CPU負荷15-25%軽減
-     * - Indirect Drawing: CPU-GPUオーバーヘッド5-15%削減
+     *              useOptimizedInstancingがtrueの場合、Storage BufferとIndirect Drawingを使用。
+     *              - Storage Buffer: メモリアロケーション削減、CPU負荷15-25%軽減
+     *              - Indirect Drawing: CPU-GPUオーバーヘッド5-15%削減
      *
+     * @return {void}
      */
     drawArraysInstanced() {
         // フレームが開始されていない場合は開始
@@ -1474,24 +1700,11 @@ export class Context {
         // 複雑なブレンドモードの処理
         this.processComplexBlendQueue();
     }
-    /**
-     * @description 最適化インスタンス描画の有効/無効を設定
-     *              Enable or disable optimized instancing
-     *
-     */
-    setOptimizedInstancing(enabled) {
-        this.useOptimizedInstancing = enabled;
-    }
-    /**
-     * @description 最適化インスタンス描画が有効かどうか
-     *              Whether optimized instancing is enabled
-     *
-     */
-    isOptimizedInstancingEnabled() {
-        return this.useOptimizedInstancing;
-    }
     /**
      * @description 複雑なブレンドモードのキューを処理
+     *              Process the complex blend mode queue
+     *
+     * @return {void}
      */
     processComplexBlendQueue() {
         // コマンドエンコーダーを確保
@@ -1501,6 +1714,9 @@ export class Context {
     }
     /**
      * @description インスタンス配列をクリア
+     *              Clear instanced arrays
+     *
+     * @return {void}
      */
     clearArraysInstanced() {
         // WebGPU clear instanced arrays
@@ -1509,8 +1725,13 @@ export class Context {
     }
     /**
      * @description ピクセルバッファをNodeの指定箇所に転送
+     *              Transfer pixel buffer to the specified position of the Node
      *              WebGPUでは、Shapeのシェーダーが-ndc.yでY軸反転しているため、
      *              Bitmapも同じ方向になるよう画像を上下反転して書き込む
+     *
+     * @param  {Node}       node   - 描画対象ノード / Target node
+     * @param  {Uint8Array} pixels - ピクセルデータ / Pixel data
+     * @return {void}
      */
     drawPixels(node, pixels) {
         // WebGPU draw pixels
@@ -1554,6 +1775,14 @@ export class Context {
     }
     /**
      * @description 一時テクスチャ経由でピクセルデータをMSAAテクスチャに描画
+     *              Draw pixel data to MSAA texture via a temporary texture
+     *
+     * @param  {IAttachmentObject} attachment - アタッチメントオブジェクト / Attachment object
+     * @param  {Node}              node       - 描画対象ノード / Target node
+     * @param  {Uint8Array}        pixels     - ピクセルデータ / Pixel data
+     * @param  {number}            width      - 幅 / Width
+     * @param  {number}            height     - 高さ / Height
+     * @return {void}
      */
     drawPixelsToMsaa(attachment, node, pixels, width, height) {
         // 一時テクスチャをプールから取得
@@ -1620,10 +1849,16 @@ export class Context {
     }
     /**
      * @description OffscreenCanvasをNodeの指定箇所に転送
+     *              Transfer OffscreenCanvas to the specified position of the Node
      *              WebGPUでは、Shapeのシェーダーが-ndc.yでY軸反転しているため、
      *              Bitmapも同じ方向になるよう画像を上下反転して書き込む
+     *
+     * @param  {Node}                              node    - 描画対象ノード / Target node
+     * @param  {OffscreenCanvas | ImageBitmap}     element - 描画要素 / Element to draw
+     * @param  {boolean}                           flip_y  - Y軸反転フラグ / Y-axis flip flag
+     * @return {void}
      */
-    drawElement(node, element, flipY = false) {
+    drawElement(node, element, flip_y = false) {
         // WebGPU draw element
         // OffscreenCanvasまたはImageBitmapをアトラステクスチャに描画
         // ノードのインデックスを使用して正しいアトラスを取得
@@ -1645,21 +1880,30 @@ export class Context {
         // MSAAが有効な場合は一時テクスチャ経由でMSAAテクスチャに直接描画
         // MSAAが無効な場合もシェーダー経由で描画（WebGLと同じ処理フロー）
         if (attachment.msaa && attachment.msaaTexture?.view) {
-            this.drawElementToMsaa(attachment, node, element, width, height, flipY);
+            this.drawElementToMsaa(attachment, node, element, width, height, flip_y);
         }
         else {
-            this.drawElementToTexture(attachment, node, element, width, height, flipY);
+            this.drawElementToTexture(attachment, node, element, width, height, flip_y);
         }
     }
     /**
      * @description 一時テクスチャ経由でMSAAテクスチャに直接描画
-     */
-    drawElementToMsaa(attachment, node, element, width, height, flipY) {
+     *              Draw to MSAA texture directly via a temporary texture
+     *
+     * @param  {IAttachmentObject}             attachment - アタッチメントオブジェクト / Attachment object
+     * @param  {Node}                          node       - 描画対象ノード / Target node
+     * @param  {OffscreenCanvas | ImageBitmap} element    - 描画要素 / Element to draw
+     * @param  {number}                        width      - 幅 / Width
+     * @param  {number}                        height     - 高さ / Height
+     * @param  {boolean}                       flip_y     - Y軸反転フラグ / Y-axis flip flag
+     * @return {void}
+     */
+    drawElementToMsaa(attachment, node, element, width, height, flip_y) {
         // 一時テクスチャをプールから取得
         const tempTexture = $acquireRenderTexture(this.device, width, height);
         this.device.queue.copyExternalImageToTexture({
             "source": element,
-            "flipY": flipY
+            "flipY": flip_y
         }, {
             "texture": tempTexture,
             "premultipliedAlpha": true
@@ -1720,15 +1964,24 @@ export class Context {
     }
     /**
      * @description 一時テクスチャ経由で通常テクスチャに描画（非MSAA版）
-     */
-    drawElementToTexture(attachment, node, element, width, height, flipY) {
+     *              Draw to a regular texture via a temporary texture (non-MSAA version)
+     *
+     * @param  {IAttachmentObject}             attachment - アタッチメントオブジェクト / Attachment object
+     * @param  {Node}                          node       - 描画対象ノード / Target node
+     * @param  {OffscreenCanvas | ImageBitmap} element    - 描画要素 / Element to draw
+     * @param  {number}                        width      - 幅 / Width
+     * @param  {number}                        height     - 高さ / Height
+     * @param  {boolean}                       flip_y     - Y軸反転フラグ / Y-axis flip flag
+     * @return {void}
+     */
+    drawElementToTexture(attachment, node, element, width, height, flip_y) {
         // 一時テクスチャをプールから取得
         const tempTexture = $acquireRenderTexture(this.device, width, height);
         // ImageBitmapを一時テクスチャにコピー
         // flipYパラメータで画像の上下反転を制御（Videoはtrue、TextFieldはfalse）
         this.device.queue.copyExternalImageToTexture({
             "source": element,
-            "flipY": flipY
+            "flipY": flip_y
         }, {
             "texture": tempTexture,
             "premultipliedAlpha": true
@@ -1789,6 +2042,20 @@ export class Context {
     }
     /**
      * @description フィルターを適用
+     *              Apply filter effects
+     *
+     * @param  {Node}         node            - 描画対象ノード / Target node
+     * @param  {string}       _unique_key     - ユニークキー / Unique key
+     * @param  {boolean}      _updated        - 更新フラグ / Updated flag
+     * @param  {number}       width           - 幅 / Width
+     * @param  {number}       height          - 高さ / Height
+     * @param  {boolean}      _is_bitmap      - ビットマップかどうか / Whether it is a bitmap
+     * @param  {Float32Array} matrix          - 変換行列 / Transform matrix
+     * @param  {Float32Array} color_transform - カラー変換パラメータ / Color transform parameters
+     * @param  {IBlendMode}   blend_mode      - ブレンドモード / Blend mode
+     * @param  {Float32Array} bounds          - バウンディングボックス / Bounding box
+     * @param  {Float32Array} params          - フィルターパラメータ / Filter parameters
+     * @return {void}
      */
     applyFilter(node, _unique_key, _updated, width, height, _is_bitmap, matrix, color_transform, blend_mode, bounds, params) {
         // インスタンス配列を先に描画
@@ -1813,6 +2080,9 @@ export class Context {
      * @description コンテナのフィルター/ブレンド用のレイヤーを開始
      *              Begin a container layer for filter/blend processing
      *
+     * @param  {number} width  - レイヤー幅 / Layer width
+     * @param  {number} height - レイヤー高さ / Layer height
+     * @return {void}
      */
     containerBeginLayer(width, height) {
         this.drawArraysInstanced();
@@ -1839,14 +2109,15 @@ export class Context {
      * @description コンテナのフィルター/ブレンド用レイヤーを終了し、結果を元のメインに合成
      *              End the container layer and composite the result back to the original main
      *
-     * @param  {IBlendMode} blend_mode
-     * @param  {Float32Array} matrix
-     * @param  {Float32Array | null} color_transform
-     * @param  {boolean} use_filter
-     * @param  {Float32Array | null} filter_bounds
-     * @param  {Float32Array | null} filter_params
-     * @param  {string} unique_key
-     * @param  {string} filter_key
+     * @param  {IBlendMode}          blend_mode      - ブレンドモード / Blend mode
+     * @param  {Float32Array}        matrix          - 変換行列 / Transform matrix
+     * @param  {Float32Array | null} color_transform - カラー変換パラメータ / Color transform parameters
+     * @param  {boolean}             use_filter      - フィルター使用フラグ / Whether to use filter
+     * @param  {Float32Array | null} filter_bounds   - フィルターバウンド / Filter bounds
+     * @param  {Float32Array | null} filter_params   - フィルターパラメータ / Filter parameters
+     * @param  {string}              unique_key      - ユニークキー / Unique key
+     * @param  {string}              filter_key      - フィルターキー / Filter key
+     * @return {void}
      */
     containerEndLayer(blend_mode, matrix, color_transform, use_filter, filter_bounds, filter_params, unique_key, filter_key) {
         this.drawArraysInstanced();
@@ -1866,16 +2137,124 @@ export class Context {
         // メインのアタッチメントをバインド
         this.bind(this.$mainAttachmentObject);
     }
+    /**
+     * @description cacheAsBitmap: temp FBO作成→子要素描画開始
+     *              Begin container cacheAsBitmap: create temp bgra8unorm FBO for children,
+     *              allocate atlas node for later copy
+     *
+     * @param  {number} width  - ノード幅 / Node width
+     * @param  {number} height - ノード高さ / Node height
+     * @return {Node}
+     */
+    containerBeginAtlasNode(width, height) {
+        this.drawArraysInstanced();
+        // アトラスノードを確保（後でコピー先として使用）
+        const node = this.createNode(width, height);
+        this._pendingAtlasNodes.push(node);
+        // mainをスタックに保存
+        const mainAttachment = this.$mainAttachmentObject;
+        this.$containerLayerStack.push(mainAttachment);
+        // 既存のレンダーパスを終了
+        if (this.renderPassEncoder) {
+            this.renderPassEncoder.end();
+            this.renderPassEncoder = null;
+        }
+        // bgra8unormのtemp FBOを作成（全パイプラインが互換）
+        const tempAttachment = this.frameBufferManager.createAttachment("container_layer", width, height, mainAttachment.msaa, true);
+        this.$mainAttachmentObject = tempAttachment;
+        this.bind(tempAttachment);
+        return node;
+    }
+    /**
+     * @description cacheAsBitmap: temp FBO→アトラスノードへコピー
+     *              End container cacheAsBitmap: copy temp FBO content to atlas node,
+     *              release temp FBO
+     *
+     * @return {void}
+     */
+    containerEndAtlasNode() {
+        this.drawArraysInstanced();
+        // 既存のレンダーパスを終了（temp FBOのMSAAリゾルブが実行される）
+        if (this.renderPassEncoder) {
+            this.renderPassEncoder.end();
+            this.renderPassEncoder = null;
+        }
+        this.ensureCommandEncoder();
+        const tempAttachment = this.$mainAttachmentObject;
+        const node = this._pendingAtlasNodes.pop();
+        // mainを復元
+        this.$mainAttachmentObject = this.$containerLayerStack.pop();
+        // temp FBO → アトラスノードへコピー
+        this.copyTempToAtlasNode(tempAttachment, node);
+        // temp FBOをリリース
+        this.frameBufferManager.releaseTemporaryAttachment(tempAttachment);
+        // メインをバインド
+        this.bind(this.$mainAttachmentObject);
+    }
+    /**
+     * @description temp FBOの内容をアトラスノード領域にコピー
+     *              Copy temp FBO content to the atlas node region using texture_copy pipeline
+     *
+     * @param  {IAttachmentObject} temp_attachment - コピー元のtemp FBO / Source temp FBO
+     * @param  {Node}              node            - コピー先のアトラスノード / Destination atlas node
+     * @return {void}
+     */
+    copyTempToAtlasNode(temp_attachment, node) {
+        const atlas = $getAtlasAttachmentObjectByIndex(node.index) || $getAtlasAttachmentObject();
+        if (!atlas || !atlas.texture || !temp_attachment.texture) {
+            return;
+        }
+        // アトラスはrgba8unormフォーマット（FrameBufferManagerCreateAttachmentUseCase参照）
+        // atlas_*テクスチャはcopyExternalImageToTextureとの互換性のためrgba8unormで作成される
+        const useMsaa = atlas.msaa && atlas.msaaTexture?.view;
+        const pipelineName = useMsaa ? "texture_copy_rgba8_msaa" : "texture_copy_rgba8";
+        const pipeline = this.pipelineManager.getPipeline(pipelineName);
+        const bindGroupLayout = this.pipelineManager.getBindGroupLayout("texture_copy");
+        if (!pipeline || !bindGroupLayout) {
+            return;
+        }
+        // uniform: temp FBO全体をサンプリング（Y軸反転してアトラスに格納）
+        // アトラスのShape描画はFillVertexのyFlipSign=1.0によりY反転で格納されるため、
+        // cacheAsBitmapのコピーも同じ規則に合わせてY反転する
+        // UV.y = texCoord.y * scaleY + offsetY = texCoord.y * (-1) + 1 = 1 - texCoord.y
+        const uniformBuffer = this.bufferManager.acquireAndWriteUniformBuffer($atlasNodeCopyUniform);
+        // サンプラーとソーステクスチャ（MSAAリゾルブ済みのテクスチャ）
+        const sampler = this.textureManager.createSampler("container_atlas_copy", false);
+        const srcView = temp_attachment.texture.view;
+        const bindGroup = this.device.createBindGroup({
+            "layout": bindGroupLayout,
+            "entries": [
+                { "binding": 0, "resource": { "buffer": uniformBuffer } },
+                { "binding": 1, "resource": sampler },
+                { "binding": 2, "resource": srcView }
+            ]
+        });
+        // アトラスのノード領域にレンダーパスを作成
+        const colorView = useMsaa ? atlas.msaaTexture.view : atlas.texture.view;
+        const resolveTarget = useMsaa ? atlas.texture.view : null;
+        const renderPassDescriptor = this.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+        const passEncoder = this.commandEncoder.beginRenderPass(renderPassDescriptor);
+        // ビューポートとシザーでノード領域に制限
+        passEncoder.setViewport(node.x, node.y, node.w, node.h, 0, 1);
+        passEncoder.setScissorRect(node.x, node.y, node.w, node.h);
+        passEncoder.setPipeline(pipeline);
+        passEncoder.setBindGroup(0, bindGroup);
+        passEncoder.draw(6, 1, 0, 0);
+        passEncoder.end();
+        // アトラスレンダーパスインデックスをリセット（次のbeginNodeRenderingで新規作成させる）
+        this.nodeRenderPassAtlasIndex = -1;
+    }
     /**
      * @description キャッシュされたコンテナフィルターテクスチャをメインに描画
      *              Draw a cached container filter texture to the main attachment
      *
-     * @param  {IBlendMode} blend_mode
-     * @param  {Float32Array} matrix
-     * @param  {Float32Array} color_transform
-     * @param  {Float32Array} filter_bounds
-     * @param  {string} unique_key
-     * @param  {string} filter_key
+     * @param  {IBlendMode}   blend_mode      - ブレンドモード / Blend mode
+     * @param  {Float32Array} matrix          - 変換行列 / Transform matrix
+     * @param  {Float32Array} color_transform - カラー変換パラメータ / Color transform parameters
+     * @param  {Float32Array} filter_bounds   - フィルターバウンド / Filter bounds
+     * @param  {string}       unique_key      - ユニークキー / Unique key
+     * @param  {string}       filter_key      - フィルターキー / Filter key
+     * @return {void}
      */
     containerDrawCachedFilter(blend_mode, matrix, color_transform, filter_bounds, unique_key, filter_key) {
         const cachedKey = $cacheStore.get(unique_key, "fKey");
@@ -2012,6 +2391,9 @@ export class Context {
     }
     /**
      * @description メインテクスチャを確保（フレーム開始時に一度だけgetCurrentTexture呼び出し）
+     *              Ensure the main texture is acquired (calls getCurrentTexture once per frame)
+     *
+     * @return {void}
      */
     ensureMainTexture() {
         if (!this.mainTexture) {
@@ -2031,6 +2413,9 @@ export class Context {
     }
     /**
      * @description 現在の描画ターゲットのテクスチャビューを取得
+     *              Get the texture view of the current render target
+     *
+     * @return {GPUTextureView} 現在のテクスチャビュー / Current texture view
      */
     getCurrentTextureView() {
         // アトラステクスチャへのレンダリング中の場合
@@ -2043,6 +2428,9 @@ export class Context {
     }
     /**
      * @description コマンドエンコーダーが存在することを保証
+     *              Ensure the command encoder exists
+     *
+     * @return {void}
      */
     ensureCommandEncoder() {
         // Note: RenderPassEncoderの終了はここでは行わない
@@ -2053,6 +2441,9 @@ export class Context {
     }
     /**
      * @description フレーム開始（レンダリング開始前に呼ぶ）
+     *              Begin a new frame (call before rendering starts)
+     *
+     * @return {void}
      */
     beginFrame() {
         if (!this.frameStarted) {
@@ -2066,12 +2457,19 @@ export class Context {
     }
     /**
      * @description フレームごとのプール管理テクスチャを追加（endFrame()でプールに返却）
+     *              Add a pooled texture for the current frame (returned to pool in endFrame())
+     *
+     * @param  {GPUTexture} texture - プール管理テクスチャ / Pooled texture
+     * @return {void}
      */
     addFrameTexture(texture) {
         this.pooledTextures.push(texture);
     }
     /**
      * @description フレーム終了とコマンド送信（レンダリング完了後に呼ぶ）
+     *              End the frame and submit commands (call after rendering is complete)
+     *
+     * @return {void}
      */
     endFrame() {
         if (!this.frameStarted) {
@@ -2130,13 +2528,21 @@ export class Context {
     }
     /**
      * @description コマンドを送信（後方互換性のため残す）
+     *              Submit commands (kept for backward compatibility)
+     *
+     * @return {void}
      */
     submit() {
         this.endFrame();
     }
     /**
      * @description ノードを作成
+     *              Create a node in the texture atlas
      *              アトラスがいっぱいの場合は新しいアトラスを作成して再試行
+     *
+     * @param  {number} width  - ノード幅 / Node width
+     * @param  {number} height - ノード高さ / Node height
+     * @return {Node} 作成されたノード / Created node
      */
     createNode(width, height) {
         // WebGPU node creation implementation using texture-packer
@@ -2156,6 +2562,10 @@ export class Context {
     }
     /**
      * @description ノードを削除
+     *              Remove a node from the texture atlas
+     *
+     * @param  {Node} node - 削除対象ノード / Node to remove
+     * @return {void}
      */
     removeNode(node) {
         // WebGPU node removal implementation
@@ -2167,7 +2577,10 @@ export class Context {
     }
     /**
      * @description フレームバッファの描画情報をキャンバスに転送
+     *              Transfer frame buffer contents to the canvas
      *              スワップチェーンはCopyDstをサポートしないため、レンダーパスでブリット
+     *
+     * @return {void}
      */
     transferMainCanvas() {
         // メインアタッチメントの内容をスワップチェーン（キャンバス）にコピー
@@ -2225,6 +2638,11 @@ export class Context {
     }
     /**
      * @description ImageBitmapを生成
+     *              Create an ImageBitmap from the current rendering result
+     *
+     * @param  {number} width  - 画像幅 / Image width
+     * @param  {number} height - 画像高さ / Image height
+     * @return {Promise<ImageBitmap>} 生成されたImageBitmap / Created ImageBitmap
      */
     async createImageBitmap(width, height) {
         // メインアタッチメントから合成済み描画結果を取得
@@ -2323,6 +2741,7 @@ export class Context {
      * @description マスク描画の開始準備
      *              Prepare to start drawing the mask
      *
+     * @return {void}
      */
     beginMask() {
         // メインアタッチメントをバインド（マスクはメインアタッチメントのステンシルに書き込む）
@@ -2375,10 +2794,11 @@ export class Context {
      * @description マスクの描画範囲を設定
      *              Set the mask drawing bounds
      *
-     * @param  {number} x_min
-     * @param  {number} y_min
-     * @param  {number} x_max
-     * @param  {number} y_max
+     * @param  {number} x_min - 最小X座標 / Minimum X coordinate
+     * @param  {number} y_min - 最小Y座標 / Minimum Y coordinate
+     * @param  {number} x_max - 最大X座標 / Maximum X coordinate
+     * @param  {number} y_max - 最大Y座標 / Maximum Y coordinate
+     * @return {void}
      */
     setMaskBounds(x_min, y_min, x_max, y_max) {
         maskSetMaskBoundsService(x_min, y_min, x_max, y_max);
@@ -2387,6 +2807,7 @@ export class Context {
      * @description マスクの描画を終了
      *              End mask drawing
      *
+     * @return {void}
      */
     endMask() {
         // マスク描画用のレンダーパスを終了
@@ -2400,8 +2821,9 @@ export class Context {
     }
     /**
      * @description マスクの終了処理
-     *              Mask end processing
+     *              Mask end processing (leave the mask)
      *
+     * @return {void}
      */
     leaveMask() {
         this.drawArraysInstanced();