@next2d/webgpu 3.0.4 → 3.1.0

package/src/Context/usecase/ContextApplyFilterUseCase.js

@@ -11,27 +11,78 @@ import { execute as filterApplyGradientBevelFilterUseCase } from "../../Filter/G
 import { execute as filterApplyGradientGlowFilterUseCase } from "../../Filter/GradientGlowFilter/FilterApplyGradientGlowFilterUseCase";
 import { execute as filterApplyDisplacementMapFilterUseCase } from "../../Filter/DisplacementMapFilter/FilterApplyDisplacementMapFilterUseCase";
 import { execute as blendApplyComplexBlendUseCase } from "../../Blend/usecase/BlendApplyComplexBlendUseCase";
+import { $isMaskTestEnabled, $getMaskStencilReference } from "../../Mask";
+/**
+ * @description ユニフォームデータの事前確保配列（4要素）
+ *              Pre-allocated uniform data array (4 elements)
+ */
 const $uniform4 = new Float32Array(4);
+/**
+ * @description ユニフォームデータの事前確保配列A（6要素）
+ *              Pre-allocated uniform data array A (6 elements)
+ */
 const $uniform6a = new Float32Array(6);
+/**
+ * @description ユニフォームデータの事前確保配列B（6要素）
+ *              Pre-allocated uniform data array B (6 elements)
+ */
 const $uniform6b = new Float32Array(6);
+/**
+ * @description ユニフォームデータの事前確保配列（8要素）
+ *              Pre-allocated uniform data array (8 elements)
+ */
 const $uniform8 = new Float32Array(8);
+/**
+ * @description ユニフォームデータの事前確保配列（12要素）
+ *              Pre-allocated uniform data array (12 elements)
+ */
 const $uniform12 = new Float32Array(12);
+/**
+ * @description ユニフォームデータの事前確保配列（20要素）
+ *              Pre-allocated uniform data array (20 elements)
+ */
 const $uniform20 = new Float32Array(20);
 // プリアロケート BindGroup Entry 配列
+/**
+ * @description バインドグループエントリの事前確保配列
+ *              Pre-allocated bind group entry array
+ */
 const $entries3 = [
     { "binding": 0, "resource": { "buffer": null } },
     { "binding": 1, "resource": null },
     { "binding": 2, "resource": null }
 ];
-const SIMPLE_BLEND_MODES = new Set([
+/**
+ * @description シンプルなブレンドモードのセット
+ *              Set of simple blend modes
+ */
+const $SIMPLE_BLEND_MODES = new Set([
     "normal", "layer", "add", "screen", "alpha", "erase", "copy"
 ]);
-const Y_FLIP_UNIFORM = new Float32Array([1, -1, 0, 1]);
-const isIdentityColorTransform = (ct) => {
+/**
+ * @description Y軸反転用ユニフォームデータ
+ *              Uniform data for Y-axis flip
+ */
+const $Y_FLIP_UNIFORM = new Float32Array([1, -1, 0, 1]);
+/**
+ * @description カラートランスフォームが恒等変換かどうかを判定する
+ *              Checks whether the color transform is an identity transform
+ * @param {Float32Array} ct カラートランスフォーム配列 / Color transform array
+ * @return {boolean} 恒等変換の場合true / True if identity transform
+ */
+const $isIdentityColorTransform = (ct) => {
     return ct[0] === 1 && ct[1] === 1 && ct[2] === 1 && ct[3] === 1
         && ct[4] === 0 && ct[5] === 0 && ct[6] === 0 && ct[7] === 0;
 };
-const applyColorTransform = (config, attachment, colorTransform) => {
+/**
+ * @description フィルター結果にカラートランスフォームを適用する
+ *              Applies color transform to the filter result
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} attachment ソースアタッチメント / Source attachment
+ * @param {Float32Array} color_transform カラートランスフォーム配列 / Color transform array
+ * @return {IAttachmentObject} カラートランスフォーム適用後のアタッチメント / Attachment with color transform applied
+ */
+const $applyColorTransform = (config, attachment, color_transform) => {
     const ctAttachment = config.frameBufferManager.createTemporaryAttachment(attachment.width, attachment.height);
     const pipeline = config.pipelineManager.getPipeline("color_transform");
     const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
@@ -40,13 +91,13 @@ const applyColorTransform = (config, attachment, colorTransform) => {
     }
     // uniform: mul(vec4) + add(vec4) = 32 bytes
     // add値は0-255スケールの生値をそのまま渡す（WebGLのフィルターCTパスと同じ）
-    $uniform8[0] = colorTransform[0];
-    $uniform8[1] = colorTransform[1];
-    $uniform8[2] = colorTransform[2];
-    $uniform8[3] = colorTransform[3];
-    $uniform8[4] = colorTransform[4];
-    $uniform8[5] = colorTransform[5];
-    $uniform8[6] = colorTransform[6];
+    $uniform8[0] = color_transform[0];
+    $uniform8[1] = color_transform[1];
+    $uniform8[2] = color_transform[2];
+    $uniform8[3] = color_transform[3];
+    $uniform8[4] = color_transform[4];
+    $uniform8[5] = color_transform[5];
+    $uniform8[6] = color_transform[6];
     $uniform8[7] = 0;
     const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer($uniform8);
     const sampler = config.textureManager.createSampler("color_transform_sampler", false);
@@ -65,7 +116,15 @@ const applyColorTransform = (config, attachment, colorTransform) => {
     passEncoder.end();
     return ctAttachment;
 };
-const getTextureFromNode = (node, command_encoder, frame_buffer_manager) => {
+/**
+ * @description アトラスノードからテクスチャを取得する
+ *              Extracts texture from an atlas node
+ * @param {Node} node テクスチャパッカーノード / Texture packer node
+ * @param {GPUCommandEncoder} command_encoder コマンドエンコーダ / Command encoder
+ * @param {FrameBufferManager} frame_buffer_manager フレームバッファマネージャ / Frame buffer manager
+ * @return {IAttachmentObject} 取得したアタッチメント / Extracted attachment
+ */
+const $getTextureFromNode = (node, command_encoder, frame_buffer_manager) => {
     // 一時アタッチメントを作成（ノードのサイズを使用）
     const attachment = frame_buffer_manager.createTemporaryAttachment(node.w, node.h);
     // アトラステクスチャから該当部分をコピー（複数アトラス対応）
@@ -85,27 +144,44 @@ const getTextureFromNode = (node, command_encoder, frame_buffer_manager) => {
         });
     }
     else {
-        console.error("[WebGPU Filter] getTextureFromNode: FAILED - missing atlas or textures");
+        console.error("[WebGPU Filter] $getTextureFromNode: FAILED - missing atlas or textures");
     }
     return attachment;
 };
-const isSimpleBlendMode = (blendMode) => {
-    return SIMPLE_BLEND_MODES.has(blendMode);
+/**
+ * @description ブレンドモードがシンプルかどうかを判定する
+ *              Checks whether the blend mode is a simple blend mode
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @return {boolean} シンプルブレンドモードの場合true / True if simple blend mode
+ */
+const $isSimpleBlendMode = (blend_mode) => {
+    return $SIMPLE_BLEND_MODES.has(blend_mode);
 };
-const copyMainAttachmentRegion = (config, mainAttachment, x, y, width, height) => {
+/**
+ * @description メインアタッチメントの矩形領域をコピーする
+ *              Copies a rectangular region from the main attachment
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {number} x X座標 / X coordinate
+ * @param {number} y Y座標 / Y coordinate
+ * @param {number} width 幅 / Width
+ * @param {number} height 高さ / Height
+ * @return {IAttachmentObject} コピーされたアタッチメント / Copied attachment
+ */
+const $copyMainAttachmentRegion = (config, main_attachment, x, y, width, height) => {
     // 一時アタッチメントを作成
     const dstAttachment = config.frameBufferManager.createTemporaryAttachment(width, height);
     // レンダーパスでコピー（フォーマット変換: bgra8unorm -> rgba8unorm）
     const pipeline = config.pipelineManager.getPipeline("complex_blend_copy");
     const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
-    if (!pipeline || !bindGroupLayout || !mainAttachment.texture || !dstAttachment.texture) {
+    if (!pipeline || !bindGroupLayout || !main_attachment.texture || !dstAttachment.texture) {
         return dstAttachment;
     }
     // ユニフォームバッファ: scale (vec2) + offset (vec2)
-    const scaleX = width / mainAttachment.width;
-    const scaleY = height / mainAttachment.height;
-    const offsetX = x / mainAttachment.width;
-    const offsetY = y / mainAttachment.height;
+    const scaleX = width / main_attachment.width;
+    const scaleY = height / main_attachment.height;
+    const offsetX = x / main_attachment.width;
+    const offsetY = y / main_attachment.height;
     $uniform4[0] = scaleX;
     $uniform4[1] = scaleY;
     $uniform4[2] = offsetX;
@@ -114,7 +190,7 @@ const copyMainAttachmentRegion = (config, mainAttachment, x, y, width, height) =
     const sampler = config.textureManager.createSampler("filter_copy_sampler", false);
     $entries3[0].resource.buffer = uniformBuffer;
     $entries3[1].resource = sampler;
-    $entries3[2].resource = mainAttachment.texture.view;
+    $entries3[2].resource = main_attachment.texture.view;
     const bindGroup = config.device.createBindGroup({
         "layout": bindGroupLayout,
         "entries": $entries3
@@ -127,38 +203,48 @@ const copyMainAttachmentRegion = (config, mainAttachment, x, y, width, height) =
     passEncoder.end();
     return dstAttachment;
 };
-const drawBlendResultToMain = (config, srcAttachment, mainAttachment, x, y) => {
+/**
+ * @description ブレンド結果をメインアタッチメントに描画する
+ *              Draws blend result to the main attachment
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} src_attachment ソースアタッチメント / Source attachment
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {number} x X座標 / X coordinate
+ * @param {number} y Y座標 / Y coordinate
+ * @return {void}
+ */
+const $drawBlendResultToMain = (config, src_attachment, main_attachment, x, y) => {
     // フィルター＋複雑なブレンド用のパイプライン（Y軸反転あり）を使用
     // MSAA有効時はMSAA版パイプラインを使用してmsaaTextureに描画→texture.viewにresolve
-    const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+    const useMsaa = main_attachment.msaa && main_attachment.msaaTexture?.view;
     const pipelineName = useMsaa ? "filter_complex_blend_output_msaa" : "filter_complex_blend_output";
     const pipeline = config.pipelineManager.getPipeline(pipelineName);
     const bindGroupLayout = config.pipelineManager.getBindGroupLayout("positioned_texture");
-    if (!pipeline || !bindGroupLayout || !srcAttachment.texture || !mainAttachment.texture) {
+    if (!pipeline || !bindGroupLayout || !src_attachment.texture || !main_attachment.texture) {
         return;
     }
     // ユニフォームデータ: offset, size, viewport, padding
     $uniform8[0] = x;
     $uniform8[1] = y;
-    $uniform8[2] = srcAttachment.width;
-    $uniform8[3] = srcAttachment.height;
-    $uniform8[4] = mainAttachment.width;
-    $uniform8[5] = mainAttachment.height;
+    $uniform8[2] = src_attachment.width;
+    $uniform8[3] = src_attachment.height;
+    $uniform8[4] = main_attachment.width;
+    $uniform8[5] = main_attachment.height;
     $uniform8[6] = 0;
     $uniform8[7] = 0;
     const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer($uniform8);
     const sampler = config.textureManager.createSampler("filter_blend_output_sampler", false);
     $entries3[0].resource.buffer = uniformBuffer;
     $entries3[1].resource = sampler;
-    $entries3[2].resource = srcAttachment.texture.view;
+    $entries3[2].resource = src_attachment.texture.view;
     const bindGroup = config.device.createBindGroup({
         "layout": bindGroupLayout,
         "entries": $entries3
     });
     // メインアタッチメントへの描画（loadで既存内容を保持）
     // MSAA有効時はmsaaTextureに描画してtexture.viewにresolve
-    const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
-    const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+    const colorView = useMsaa ? main_attachment.msaaTexture.view : main_attachment.texture.view;
+    const resolveTarget = useMsaa ? main_attachment.texture.view : null;
     const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
     const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
@@ -166,7 +252,20 @@ const drawBlendResultToMain = (config, srcAttachment, mainAttachment, x, y) => {
     passEncoder.draw(6, 1, 0, 0);
     passEncoder.end();
 };
-const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode, x, y, _main_texture_view, _buffer_manager) => {
+/**
+ * @description フィルター適用結果をメインキャンバスに描画する
+ *              Draws filter result to the main canvas
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} filter_attachment フィルターアタッチメント / Filter attachment
+ * @param {Float32Array} color_transform カラートランスフォーム配列 / Color transform array
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @param {number} x X座標 / X coordinate
+ * @param {number} y Y座標 / Y coordinate
+ * @param {GPUTextureView} _main_texture_view メインテクスチャビュー（未使用） / Main texture view (unused)
+ * @param {BufferManager} _buffer_manager バッファマネージャ（未使用） / Buffer manager (unused)
+ * @return {void}
+ */
+const $drawFilterToMain = (config, filter_attachment, color_transform, blend_mode, x, y, _main_texture_view, _buffer_manager) => {
     // メインアタッチメントに描画
     // コンテナレイヤー内ではconfig.mainAttachmentがコンテナのテンポラリアタッチメントを指す
     const mainAttachment = config.mainAttachment || config.frameBufferManager.getAttachment("main");
@@ -207,31 +306,41 @@ const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode
         drawHeight = mainHeight - drawY;
     }
     // シンプルなブレンドモードの場合
-    if (isSimpleBlendMode(blend_mode)) {
+    if ($isSimpleBlendMode(blend_mode)) {
         // MSAA有効時はMSAA版パイプラインを使用してmsaaTextureに描画→texture.viewにresolve
         const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        // マスクが有効かチェック
+        const isMasked = $isMaskTestEnabled();
+        const useStencil = isMasked
+            && (mainAttachment.msaaStencil?.view || mainAttachment.stencil?.view);
         // ブレンドモードに応じたパイプラインを選択
         let pipelineName;
-        switch (blend_mode) {
-            case "add":
-                pipelineName = useMsaa ? "filter_output_add_msaa" : "filter_output_add";
-                break;
-            case "screen":
-                pipelineName = useMsaa ? "filter_output_screen_msaa" : "filter_output_screen";
-                break;
-            case "alpha":
-                pipelineName = useMsaa ? "filter_output_alpha_msaa" : "filter_output_alpha";
-                break;
-            case "erase":
-                pipelineName = useMsaa ? "filter_output_erase_msaa" : "filter_output_erase";
-                break;
-            case "copy":
-                pipelineName = useMsaa ? "texture_copy_bgra_msaa" : "texture_copy_bgra";
-                break;
-            default:
-                // normal, layer
-                pipelineName = useMsaa ? "filter_output_msaa" : "filter_output";
-                break;
+        if (useStencil) {
+            // マスク有効時はステンシルテスト付きパイプラインを使用
+            pipelineName = useMsaa ? "filter_output_masked_msaa" : "filter_output_masked";
+        }
+        else {
+            switch (blend_mode) {
+                case "add":
+                    pipelineName = useMsaa ? "filter_output_add_msaa" : "filter_output_add";
+                    break;
+                case "screen":
+                    pipelineName = useMsaa ? "filter_output_screen_msaa" : "filter_output_screen";
+                    break;
+                case "alpha":
+                    pipelineName = useMsaa ? "filter_output_alpha_msaa" : "filter_output_alpha";
+                    break;
+                case "erase":
+                    pipelineName = useMsaa ? "filter_output_erase_msaa" : "filter_output_erase";
+                    break;
+                case "copy":
+                    pipelineName = useMsaa ? "texture_copy_bgra_msaa" : "texture_copy_bgra";
+                    break;
+                default:
+                    // normal, layer
+                    pipelineName = useMsaa ? "filter_output_msaa" : "filter_output";
+                    break;
+            }
         }
         let pipeline = config.pipelineManager.getPipeline(pipelineName);
         let bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
@@ -265,7 +374,16 @@ const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode
         // MSAA有効時はmsaaTextureに描画してtexture.viewにresolve
         const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
         const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
-        const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+        let renderPassDescriptor;
+        if (useStencil) {
+            // マスク有効時はステンシル付きレンダーパスを使用
+            const stencilView = useMsaa && mainAttachment.msaaStencil?.view
+                ? mainAttachment.msaaStencil.view : mainAttachment.stencil.view;
+            renderPassDescriptor = config.frameBufferManager.createStencilRenderPassDescriptor(colorView, stencilView, "load", "load", resolveTarget);
+        }
+        else {
+            renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+        }
         // Viewportはfloat値でサブピクセル精度を維持（WebGLのsetTransform相当）
         // ScissorはGPUIntegerCoordinate必須のため整数化し、viewport領域を包含する
         const vpX = Math.max(0, drawX);
@@ -283,6 +401,10 @@ const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode
         const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
         passEncoder.setPipeline(pipeline);
         passEncoder.setBindGroup(0, bindGroup);
+        // マスク有効時はステンシル参照値を設定
+        if (useStencil) {
+            passEncoder.setStencilReference($getMaskStencilReference());
+        }
         passEncoder.setViewport(vpX, vpY, vpW, vpH, 0, 1);
         passEncoder.setScissorRect(scissorX, scissorY, scissorW, scissorH);
         passEncoder.draw(6, 1, 0, 0);
@@ -291,7 +413,7 @@ const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode
     else {
         // 複雑なブレンドモード（multiply, overlay, darken, lighten, hardlight等）
         // 1. メインアタッチメントから描画先の矩形をコピー
-        const dstAttachment = copyMainAttachmentRegion(config, mainAttachment, drawX, drawY, drawWidth, drawHeight);
+        const dstAttachment = $copyMainAttachmentRegion(config, mainAttachment, drawX, drawY, drawWidth, drawHeight);
         // 2. カラートランスフォームを準備（WebGL版と同じ：add値は生値）
         $uniform8[0] = color_transform[0]; // mulR
         $uniform8[1] = color_transform[1]; // mulG
@@ -312,18 +434,35 @@ const drawFilterToMain = (config, filter_attachment, color_transform, blend_mode
             "frameTextures": config.frameTextures
         });
         // 4. 結果をメインアタッチメントに描画
-        drawBlendResultToMain(config, blendedAttachment, mainAttachment, drawX, drawY);
+        $drawBlendResultToMain(config, blendedAttachment, mainAttachment, drawX, drawY);
         // 5. 一時テクスチャを解放
         config.frameBufferManager.releaseTemporaryAttachment(dstAttachment);
         config.frameBufferManager.releaseTemporaryAttachment(blendedAttachment);
     }
 };
+/**
+ * @description フィルターを適用してメインキャンバスに描画する
+ *              Applies filters and draws the result to the main canvas
+ * @param {Node} node テクスチャパッカーノード / Texture packer node
+ * @param {number} width 幅 / Width
+ * @param {number} height 高さ / Height
+ * @param {boolean} is_bitmap ビットマップフラグ / Whether the source is a bitmap
+ * @param {Float32Array} matrix 変換行列 / Transformation matrix
+ * @param {Float32Array} color_transform カラートランスフォーム配列 / Color transform array
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @param {Float32Array} bounds バウンディングボックス / Bounding box
+ * @param {Float32Array} params フィルターパラメータ配列 / Filter parameters array
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {GPUTextureView} main_texture_view メインテクスチャビュー / Main texture view
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @return {void}
+ */
 export const execute = (node, width, height, is_bitmap, matrix, color_transform, blend_mode, bounds, params, config, main_texture_view, buffer_manager) => {
     // オフセットを初期化
     $offset.x = 0;
     $offset.y = 0;
     // ノードからテクスチャを取得
-    let filterAttachment = getTextureFromNode(node, config.commandEncoder, config.frameBufferManager);
+    let filterAttachment = $getTextureFromNode(node, config.commandEncoder, config.frameBufferManager);
     // アトラスのY反転を補正
     // WebGPUではアトラスに描画する際にY軸が反転して格納される:
     // - Shape: FillVertexがndc.yを反転なしで使用するため、WebGPUのNDC→ピクセル変換でY反転
@@ -336,7 +475,7 @@ export const execute = (node, width, height, is_bitmap, matrix, color_transform,
         if (flipPipeline && flipBindGroupLayout && flippedAttachment.texture) {
             const sampler = config.textureManager.createSampler("filter_flip_sampler", false);
             // scale=(1, -1), offset=(0, 1) で UV.y = texCoord.y * (-1) + 1 = 1 - texCoord.y
-            const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer(Y_FLIP_UNIFORM);
+            const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer($Y_FLIP_UNIFORM);
             $entries3[0].resource.buffer = uniformBuffer;
             $entries3[1].resource = sampler;
             $entries3[2].resource = filterAttachment.texture.view;
@@ -650,8 +789,8 @@ export const execute = (node, width, height, is_bitmap, matrix, color_transform,
     }
     // ColorTransformが恒等変換でない場合、フィルター結果に適用
     // WebGL版と同じ: フィルターチェーン適用後、メイン描画前にColorTransformを適用
-    if (!isIdentityColorTransform(color_transform)) {
-        const ctAttachment = applyColorTransform(config, filterAttachment, color_transform);
+    if (!$isIdentityColorTransform(color_transform)) {
+        const ctAttachment = $applyColorTransform(config, filterAttachment, color_transform);
         config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
         filterAttachment = ctAttachment;
     }
@@ -662,7 +801,7 @@ export const execute = (node, width, height, is_bitmap, matrix, color_transform,
     // WebGL版と同じ: スケール変換のオフセットを考慮（$offsetはフィルターチェーン内部用で最終位置には不要）
     const drawX = -offsetX + xMin + matrix[4];
     const drawY = -offsetY + yMin + matrix[5];
-    drawFilterToMain(config, filterAttachment, color_transform, blend_mode, drawX, drawY, main_texture_view, buffer_manager);
+    $drawFilterToMain(config, filterAttachment, color_transform, blend_mode, drawX, drawY, main_texture_view, buffer_manager);
     // フィルター用アタッチメントを解放
     config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
 };

package/src/Context/usecase/ContextBitmapFillUseCase.d.ts

@@ -1,4 +1,27 @@
 import type { IPath } from "../../interface/IPath";
 import type { BufferManager } from "../../BufferManager";
 import type { PipelineManager } from "../../Shader/PipelineManager";
+/**
+ * @description ビットマップフィル描画を実行する
+ *              Executes bitmap fill rendering
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPURenderPassEncoder} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @param {IPath[]} path_vertices パス頂点配列 / Path vertices array
+ * @param {Float32Array} context_matrix コンテキスト変換行列 / Context transformation matrix
+ * @param {Float32Array} fill_style フィルスタイル（RGBA） / Fill style (RGBA)
+ * @param {Uint8Array} pixels ピクセルデータ / Pixel data
+ * @param {Float32Array} bitmap_matrix ビットマップ変換行列 / Bitmap transformation matrix
+ * @param {number} width テクスチャ幅 / Texture width
+ * @param {number} height テクスチャ高さ / Texture height
+ * @param {boolean} repeat リピート有無 / Whether to repeat
+ * @param {boolean} smooth スムーズフィルタ有無 / Whether to use smooth filtering
+ * @param {number} viewport_width ビューポート幅 / Viewport width
+ * @param {number} viewport_height ビューポート高さ / Viewport height
+ * @param {boolean} use_atlas_target アトラスターゲット使用フラグ / Whether to use atlas target
+ * @param {boolean} use_stencil_pipeline ステンシルパイプライン使用フラグ / Whether to use stencil pipeline
+ * @param {number} _clip_level クリップレベル（未使用） / Clip level (unused)
+ * @return {GPUTexture | null} ビットマップテクスチャまたはnull / Bitmap texture or null
+ */
 export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, path_vertices: IPath[], context_matrix: Float32Array, fill_style: Float32Array, pixels: Uint8Array, bitmap_matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline?: boolean, _clip_level?: number) => GPUTexture | null;

package/src/Context/usecase/ContextBitmapFillUseCase.js

@@ -2,16 +2,63 @@ import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillG
 import { execute as contextComputeBitmapMatrixService } from "../service/ContextComputeBitmapMatrixService";
 import { $acquireFillTexture, $releaseFillTexture } from "../../FillTexturePool";
 import { $isMaskDrawing, $getMaskStencilReference } from "../../Mask";
+/**
+ * @description ビットマップサンプラーのキャッシュ
+ *              Cache for bitmap samplers
+ */
 const $bitmapSamplerCache = new Map();
+/**
+ * @description ユニフォームデータの事前確保配列（32要素）
+ *              Pre-allocated uniform data array (32 elements)
+ */
 const $uniformData32 = new Float32Array(32);
+/**
+ * @description ステンシルデータの事前確保配列（16要素）
+ *              Pre-allocated stencil data array (16 elements)
+ */
 const $stencilData16 = new Float32Array(16);
+/**
+ * @description ステンシル用動的バインドグループのキャッシュ
+ *              Cached dynamic bind group for stencil operations
+ */
 let $stencilDynamicBindGroup = null;
+/**
+ * @description ステンシル用動的バッファのキャッシュ
+ *              Cached dynamic buffer for stencil operations
+ */
 let $stencilDynamicBuffer = null;
+/**
+ * @description バインドグループエントリの事前確保配列
+ *              Pre-allocated bind group entry array
+ */
 const $entries3 = [
     { "binding": 0, "resource": { "buffer": null } },
     { "binding": 1, "resource": null },
     { "binding": 2, "resource": null }
 ];
+/**
+ * @description ビットマップフィル描画を実行する
+ *              Executes bitmap fill rendering
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPURenderPassEncoder} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @param {IPath[]} path_vertices パス頂点配列 / Path vertices array
+ * @param {Float32Array} context_matrix コンテキスト変換行列 / Context transformation matrix
+ * @param {Float32Array} fill_style フィルスタイル（RGBA） / Fill style (RGBA)
+ * @param {Uint8Array} pixels ピクセルデータ / Pixel data
+ * @param {Float32Array} bitmap_matrix ビットマップ変換行列 / Bitmap transformation matrix
+ * @param {number} width テクスチャ幅 / Texture width
+ * @param {number} height テクスチャ高さ / Texture height
+ * @param {boolean} repeat リピート有無 / Whether to repeat
+ * @param {boolean} smooth スムーズフィルタ有無 / Whether to use smooth filtering
+ * @param {number} viewport_width ビューポート幅 / Viewport width
+ * @param {number} viewport_height ビューポート高さ / Viewport height
+ * @param {boolean} use_atlas_target アトラスターゲット使用フラグ / Whether to use atlas target
+ * @param {boolean} use_stencil_pipeline ステンシルパイプライン使用フラグ / Whether to use stencil pipeline
+ * @param {number} _clip_level クリップレベル（未使用） / Clip level (unused)
+ * @return {GPUTexture | null} ビットマップテクスチャまたはnull / Bitmap texture or null
+ */
 export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, path_vertices, context_matrix, fill_style, pixels, bitmap_matrix, width, height, repeat, smooth, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline = false, _clip_level = 1) => {
     // MeshFillGenerateUseCaseで頂点データを生成（4 floats/vertex: position + bezier）
     const mesh = meshFillGenerateUseCase(path_vertices);

package/src/Context/usecase/ContextBitmapStrokeUseCase.d.ts

@@ -1,4 +1,27 @@
 import type { IPath } from "../../interface/IPath";
 import type { BufferManager } from "../../BufferManager";
 import type { PipelineManager } from "../../Shader/PipelineManager";
+/**
+ * @description ビットマップストローク描画を実行する
+ *              Executes bitmap stroke rendering
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPURenderPassEncoder} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @param {IPath[]} vertices パス頂点配列 / Path vertices array
+ * @param {number} thickness ストローク太さ / Stroke thickness
+ * @param {Float32Array} context_matrix コンテキスト変換行列 / Context transformation matrix
+ * @param {Float32Array} stroke_style ストロークスタイル（RGBA） / Stroke style (RGBA)
+ * @param {Uint8Array} pixels ピクセルデータ / Pixel data
+ * @param {Float32Array} bitmap_matrix ビットマップ変換行列 / Bitmap transformation matrix
+ * @param {number} width テクスチャ幅 / Texture width
+ * @param {number} height テクスチャ高さ / Texture height
+ * @param {boolean} repeat リピート有無 / Whether to repeat
+ * @param {boolean} smooth スムーズフィルタ有無 / Whether to use smooth filtering
+ * @param {number} viewport_width ビューポート幅 / Viewport width
+ * @param {number} viewport_height ビューポート高さ / Viewport height
+ * @param {boolean} use_atlas_target アトラスターゲット使用フラグ / Whether to use atlas target
+ * @param {boolean} use_stencil_pipeline ステンシルパイプライン使用フラグ / Whether to use stencil pipeline
+ * @return {GPUTexture | null} ビットマップテクスチャまたはnull / Bitmap texture or null
+ */
 export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, vertices: IPath[], thickness: number, context_matrix: Float32Array, stroke_style: Float32Array, pixels: Uint8Array, bitmap_matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline: boolean) => GPUTexture | null;

package/src/Context/usecase/ContextBitmapStrokeUseCase.js

@@ -1,13 +1,48 @@
 import { execute as meshBitmapStrokeGenerateUseCase } from "../../Mesh/usecase/MeshBitmapStrokeGenerateUseCase";
 import { execute as contextComputeBitmapMatrixService } from "../service/ContextComputeBitmapMatrixService";
 import { $acquireFillTexture, $releaseFillTexture } from "../../FillTexturePool";
+/**
+ * @description ビットマップサンプラーのキャッシュ
+ *              Cache for bitmap samplers
+ */
 const $bitmapSamplerCache = new Map();
+/**
+ * @description ユニフォームデータの事前確保配列（32要素）
+ *              Pre-allocated uniform data array (32 elements)
+ */
 const $uniformData32 = new Float32Array(32);
+/**
+ * @description バインドグループエントリの事前確保配列
+ *              Pre-allocated bind group entry array
+ */
 const $entries3 = [
     { "binding": 0, "resource": { "buffer": null } },
     { "binding": 1, "resource": null },
     { "binding": 2, "resource": null }
 ];
+/**
+ * @description ビットマップストローク描画を実行する
+ *              Executes bitmap stroke rendering
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPURenderPassEncoder} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @param {IPath[]} vertices パス頂点配列 / Path vertices array
+ * @param {number} thickness ストローク太さ / Stroke thickness
+ * @param {Float32Array} context_matrix コンテキスト変換行列 / Context transformation matrix
+ * @param {Float32Array} stroke_style ストロークスタイル（RGBA） / Stroke style (RGBA)
+ * @param {Uint8Array} pixels ピクセルデータ / Pixel data
+ * @param {Float32Array} bitmap_matrix ビットマップ変換行列 / Bitmap transformation matrix
+ * @param {number} width テクスチャ幅 / Texture width
+ * @param {number} height テクスチャ高さ / Texture height
+ * @param {boolean} repeat リピート有無 / Whether to repeat
+ * @param {boolean} smooth スムーズフィルタ有無 / Whether to use smooth filtering
+ * @param {number} viewport_width ビューポート幅 / Viewport width
+ * @param {number} viewport_height ビューポート高さ / Viewport height
+ * @param {boolean} use_atlas_target アトラスターゲット使用フラグ / Whether to use atlas target
+ * @param {boolean} use_stencil_pipeline ステンシルパイプライン使用フラグ / Whether to use stencil pipeline
+ * @return {GPUTexture | null} ビットマップテクスチャまたはnull / Bitmap texture or null
+ */
 export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, vertices, thickness, context_matrix, stroke_style, pixels, bitmap_matrix, width, height, repeat, smooth, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline) => {
     // ビットマップストローク用メッシュを生成（4 floats/vertex: position + bezier）
     const mesh = meshBitmapStrokeGenerateUseCase(vertices, thickness);

package/src/Context/usecase/ContextClipUseCase.d.ts

@@ -2,4 +2,19 @@ import type { IPath } from "../../interface/IPath";
 import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import type { BufferManager } from "../../BufferManager";
 import type { PipelineManager } from "../../Shader/PipelineManager";
+/**
+ * @description クリップ（マスク）描画を実行する
+ *              Executes clip (mask) rendering
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPURenderPassEncoder} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @param {IAttachmentObject} current_attachment 現在のアタッチメント / Current attachment
+ * @param {IPath[]} path_vertices パス頂点配列 / Path vertices array
+ * @param {Float32Array} context_matrix コンテキスト変換行列 / Context transformation matrix
+ * @param {Float32Array} fill_style フィルスタイル（RGBA） / Fill style (RGBA)
+ * @param {number} global_alpha グローバルアルファ値 / Global alpha value
+ * @param {boolean} is_main_attachment メインアタッチメントフラグ / Whether this is the main attachment
+ * @return {void}
+ */
 export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, current_attachment: IAttachmentObject, path_vertices: IPath[], context_matrix: Float32Array, fill_style: Float32Array, global_alpha: number, is_main_attachment?: boolean) => void;