@next2d/webgpu 3.0.4 → 3.1.0

package/src/Context/usecase/ContextClipUseCase.js

@@ -1,7 +1,26 @@
 import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
 import { execute as maskUnionMaskService } from "../../Mask/service/MaskUnionMaskService";
 import { $clipLevels } from "../../Mask";
+/**
+ * @description クリップ用ユニフォームデータの事前確保配列（16要素）
+ *              Pre-allocated uniform data array for clipping (16 elements)
+ */
 const $clipUniform16 = new Float32Array(16);
+/**
+ * @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 const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, current_attachment, path_vertices, context_matrix, fill_style, global_alpha, is_main_attachment = false) => {
     // クリップ境界を取得
     const clipLevel = current_attachment.clipLevel;

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

@@ -2,4 +2,24 @@ import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import type { IBlendMode } from "../../interface/IBlendMode";
 import type { ILocalFilterConfig } from "../../interface/ILocalFilterConfig";
 import type { BufferManager } from "../../BufferManager";
-export declare const execute: (tempAttachment: IAttachmentObject, mainAttachment: IAttachmentObject, _tempName: string, blendMode: IBlendMode, matrix: Float32Array, colorTransform: Float32Array | null, useFilter: boolean, filterBounds: Float32Array | null, params: Float32Array | null, uniqueKey: string, filterKey: string, _contentWidth: number, _contentHeight: number, config: ILocalFilterConfig, bufferManager: BufferManager) => void;
+/**
+ * @description コンテナレイヤーの終了処理を実行する（フィルター適用＋ブレンド＋メインへの描画）
+ *              Executes container layer end processing (filter application + blending + drawing to main)
+ * @param {IAttachmentObject} temp_attachment 一時アタッチメント / Temporary attachment
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {string} _temp_name 一時名（未使用） / Temporary name (unused)
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @param {Float32Array} matrix 変換行列 / Transformation matrix
+ * @param {Float32Array | null} color_transform カラートランスフォーム配列 / Color transform array
+ * @param {boolean} use_filter フィルター使用フラグ / Whether to use filter
+ * @param {Float32Array | null} filter_bounds フィルターバウンディングボックス / Filter bounding box
+ * @param {Float32Array | null} params フィルターパラメータ配列 / Filter parameters array
+ * @param {string} unique_key ユニークキー / Unique key
+ * @param {string} filter_key フィルターキー / Filter key
+ * @param {number} _content_width コンテンツ幅（未使用） / Content width (unused)
+ * @param {number} _content_height コンテンツ高さ（未使用） / Content height (unused)
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @return {void}
+ */
+export declare const execute: (temp_attachment: IAttachmentObject, main_attachment: IAttachmentObject, _temp_name: string, blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array | null, use_filter: boolean, filter_bounds: Float32Array | null, params: Float32Array | null, unique_key: string, filter_key: string, _content_width: number, _content_height: number, config: ILocalFilterConfig, buffer_manager: BufferManager) => void;

package/src/Context/usecase/ContextContainerEndLayerUseCase.js

@@ -11,40 +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";
+/**
+ * @description ユニフォームデータの事前確保配列（4要素）
+ *              Pre-allocated uniform data array (4 elements)
+ */
 const $uniform4 = new Float32Array(4);
+/**
+ * @description ユニフォームデータの事前確保配列（8要素）
+ *              Pre-allocated uniform data array (8 elements)
+ */
 const $uniform8 = new Float32Array(8);
+/**
+ * @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"
 ]);
+/**
+ * @description 恒等カラートランスフォーム
+ *              Identity color transform
+ */
 const $identityColorTransform = new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
-const isIdentityColorTransform = (ct) => {
+/**
+ * @description カラートランスフォームが恒等変換かどうかを判定する
+ *              Checks whether the color transform is an identity transform
+ * @param {Float32Array | null} ct カラートランスフォーム配列 / Color transform array
+ * @return {boolean} 恒等変換の場合true / True if identity transform
+ */
+const $isIdentityColorTransform = (ct) => {
     if (!ct) {
         return true;
     }
     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 an attachment
+ * @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");
     if (!pipeline || !bindGroupLayout || !attachment.texture || !ctAttachment.texture) {
         return attachment;
     }
-    $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("container_ct_sampler", false);
@@ -63,20 +101,31 @@ const applyColorTransform = (config, attachment, colorTransform) => {
     passEncoder.end();
     return ctAttachment;
 };
-const copyRegionToFilterAttachment = (config, srcAttachment, x, y, width, height) => {
+/**
+ * @description ソースアタッチメントの領域をフィルター用アタッチメントにコピーする
+ *              Copies a region from source attachment to a filter attachment
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} src_attachment ソースアタッチメント / Source 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 $copyRegionToFilterAttachment = (config, src_attachment, x, y, width, height) => {
     const dstAttachment = config.frameBufferManager.createTemporaryAttachment(width, height);
-    const pipeline = config.pipelineManager.getPipeline("complex_blend_copy");
+    // texture_copy_rgba8 (BlurFilterVertex, yFlipTexCoord=true) を使用
+    const pipeline = config.pipelineManager.getPipeline("texture_copy_rgba8");
     const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
-    if (!pipeline || !bindGroupLayout || !srcAttachment.texture || !dstAttachment.texture) {
+    if (!pipeline || !bindGroupLayout || !src_attachment.texture || !dstAttachment.texture) {
         return dstAttachment;
     }
-    const scaleX = width / srcAttachment.width;
-    const offsetX = x / srcAttachment.width;
-    // ComplexBlendCopyVertexはOpenGL座標系のtexCoord（Y軸反転）を使用するため、
-    // UV uniformでY反転を補正して正しい向きの出力を得る
-    // texCoord.y=1(fb上端) → uv.y=y/H(ソース上端), texCoord.y=0(fb下端) → uv.y=(y+h)/H(ソース下端)
-    const scaleY = -(height / srcAttachment.height);
-    const offsetY = (y + height) / srcAttachment.height;
+    // BlurFilterVertex (yFlipTexCoord=true):
+    // texCoord.y=0(fb上端) → uv.y=y/H, texCoord.y=1(fb下端) → uv.y=(y+h)/H
+    const scaleX = width / src_attachment.width;
+    const scaleY = height / src_attachment.height;
+    const offsetX = x / src_attachment.width;
+    const offsetY = y / src_attachment.height;
     $uniform4[0] = scaleX;
     $uniform4[1] = scaleY;
     $uniform4[2] = offsetX;
@@ -85,7 +134,7 @@ const copyRegionToFilterAttachment = (config, srcAttachment, x, y, width, height
     const sampler = config.textureManager.createSampler("container_copy_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
@@ -98,42 +147,54 @@ const copyRegionToFilterAttachment = (config, srcAttachment, x, y, width, height
     passEncoder.end();
     return dstAttachment;
 };
-const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendMode, x, y, bufferManager) => {
-    if (!mainAttachment.texture || !filterAttachment.texture) {
+/**
+ * @description フィルター結果をメインアタッチメントに描画する
+ *              Draws filter result to the main attachment
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {IAttachmentObject} filter_attachment フィルターアタッチメント / Filter attachment
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @param {number} x X座標 / X coordinate
+ * @param {number} y Y座標 / Y coordinate
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @return {void}
+ */
+const $drawFilterResultToMain = (config, filter_attachment, main_attachment, blend_mode, x, y, buffer_manager) => {
+    if (!main_attachment.texture || !filter_attachment.texture) {
         return;
     }
     // WebGLと同じサブピクセル精度を維持するため、Math.floorを使用しない
     let drawX = x;
     let drawY = y;
-    let drawWidth = filterAttachment.width;
-    let drawHeight = filterAttachment.height;
+    let drawWidth = filter_attachment.width;
+    let drawHeight = filter_attachment.height;
     let uvOffsetX = 0;
     let uvOffsetY = 0;
     if (drawX < 0) {
-        uvOffsetX = -drawX / filterAttachment.width;
+        uvOffsetX = -drawX / filter_attachment.width;
         drawWidth += drawX;
         drawX = 0;
     }
     if (drawY < 0) {
-        uvOffsetY = -drawY / filterAttachment.height;
+        uvOffsetY = -drawY / filter_attachment.height;
         drawHeight += drawY;
         drawY = 0;
     }
     if (drawWidth <= 0 || drawHeight <= 0) {
         return;
     }
-    const mainWidth = mainAttachment.width;
-    const mainHeight = mainAttachment.height;
+    const mainWidth = main_attachment.width;
+    const mainHeight = main_attachment.height;
     if (drawX + drawWidth > mainWidth) {
         drawWidth = mainWidth - drawX;
     }
     if (drawY + drawHeight > mainHeight) {
         drawHeight = mainHeight - drawY;
     }
-    if (SIMPLE_BLEND_MODES.has(blendMode)) {
-        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+    if ($SIMPLE_BLEND_MODES.has(blend_mode)) {
+        const useMsaa = main_attachment.msaa && main_attachment.msaaTexture?.view;
         let pipelineName;
-        switch (blendMode) {
+        switch (blend_mode) {
             case "add":
                 pipelineName = useMsaa ? "filter_output_add_msaa" : "filter_output_add";
                 break;
@@ -159,22 +220,22 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
             return;
         }
         const sampler = config.textureManager.createSampler("container_output_sampler", true);
-        const uvScaleX = drawWidth / filterAttachment.width;
-        const uvScaleY = drawHeight / filterAttachment.height;
+        const uvScaleX = drawWidth / filter_attachment.width;
+        const uvScaleY = drawHeight / filter_attachment.height;
         $uniform4[0] = uvScaleX;
         $uniform4[1] = uvScaleY;
         $uniform4[2] = uvOffsetX;
         $uniform4[3] = uvOffsetY;
-        const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform4);
+        const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniform4);
         $entries3[0].resource.buffer = uniformBuffer;
         $entries3[1].resource = sampler;
-        $entries3[2].resource = filterAttachment.texture.view;
+        $entries3[2].resource = filter_attachment.texture.view;
         const bindGroup = config.device.createBindGroup({
             "layout": bindGroupLayout,
             "entries": $entries3
         });
-        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);
         // Viewportはfloat値でサブピクセル精度を維持（WebGLのsetTransform相当）
         const vpX = Math.max(0, drawX);
@@ -198,7 +259,7 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
     }
     else {
         // 複雑なブレンドモード
-        const dstAttachment = copyRegionToFilterAttachment(config, mainAttachment, drawX, drawY, drawWidth, drawHeight);
+        const dstAttachment = $copyRegionToFilterAttachment(config, main_attachment, drawX, drawY, drawWidth, drawHeight);
         $uniform8[0] = $identityColorTransform[0];
         $uniform8[1] = $identityColorTransform[1];
         $uniform8[2] = $identityColorTransform[2];
@@ -207,7 +268,7 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
         $uniform8[5] = $identityColorTransform[5] / 255;
         $uniform8[6] = $identityColorTransform[6] / 255;
         $uniform8[7] = 0;
-        const blendedAttachment = blendApplyComplexBlendUseCase(filterAttachment, dstAttachment, blendMode, $uniform8, {
+        const blendedAttachment = blendApplyComplexBlendUseCase(filter_attachment, dstAttachment, blend_mode, $uniform8, {
             "device": config.device,
             "commandEncoder": config.commandEncoder,
             "bufferManager": config.bufferManager,
@@ -217,20 +278,20 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
             "frameTextures": config.frameTextures
         });
         // 結果をメインに描画
-        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        const useMsaa = main_attachment.msaa && main_attachment.msaaTexture?.view;
         const resultPipelineName = useMsaa ? "filter_complex_blend_output_msaa" : "filter_complex_blend_output";
         const resultPipeline = config.pipelineManager.getPipeline(resultPipelineName);
         const resultLayout = config.pipelineManager.getBindGroupLayout("positioned_texture");
-        if (resultPipeline && resultLayout && blendedAttachment.texture && mainAttachment.texture) {
+        if (resultPipeline && resultLayout && blendedAttachment.texture && main_attachment.texture) {
             $uniform8[0] = drawX;
             $uniform8[1] = drawY;
             $uniform8[2] = blendedAttachment.width;
             $uniform8[3] = blendedAttachment.height;
-            $uniform8[4] = mainAttachment.width;
-            $uniform8[5] = mainAttachment.height;
+            $uniform8[4] = main_attachment.width;
+            $uniform8[5] = main_attachment.height;
             $uniform8[6] = 0;
             $uniform8[7] = 0;
-            const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform8);
+            const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniform8);
             const sampler = config.textureManager.createSampler("container_blend_output_sampler", false);
             $entries3[0].resource.buffer = uniformBuffer;
             $entries3[1].resource = sampler;
@@ -239,8 +300,8 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
                 "layout": resultLayout,
                 "entries": $entries3
             });
-            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(resultPipeline);
@@ -252,7 +313,17 @@ const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendM
         config.frameBufferManager.releaseTemporaryAttachment(blendedAttachment);
     }
 };
-const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, config) => {
+/**
+ * @description フィルターチェーンをアタッチメントに適用する
+ *              Applies a chain of filters to an attachment
+ * @param {IAttachmentObject} filter_attachment フィルターアタッチメント / Filter attachment
+ * @param {Float32Array} matrix 変換行列 / Transformation matrix
+ * @param {Float32Array} params フィルターパラメータ配列 / Filter parameters array
+ * @param {number} device_pixel_ratio デバイスピクセル比 / Device pixel ratio
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @return {IAttachmentObject} フィルター適用後のアタッチメント / Attachment with filters applied
+ */
+const $applyFilterChain = (filter_attachment, matrix, params, device_pixel_ratio, config) => {
     $offset.x = 0;
     $offset.y = 0;
     for (let idx = 0; params.length > idx;) {
@@ -260,20 +331,20 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
         switch (type) {
             case 0: // BevelFilter
                 {
-                    const newAtt = filterApplyBevelFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyBevelFilterUseCase(filter_attachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 1: // BlurFilter
                 {
-                    const newAtt = filterApplyBlurFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyBlurFilterUseCase(filter_attachment, matrix, params[idx++], params[idx++], params[idx++], device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 2: // ColorMatrixFilter
@@ -298,11 +369,11 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
                     $uniform20[17] = params[idx++];
                     $uniform20[18] = params[idx++];
                     $uniform20[19] = params[idx++];
-                    const newAtt = filterApplyColorMatrixFilterUseCase(filterAttachment, $uniform20, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyColorMatrixFilterUseCase(filter_attachment, $uniform20, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 3: // ConvolutionFilter
@@ -314,11 +385,11 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
                     for (let i = 0; i < length; i++) {
                         convMatrix[i] = params[idx++];
                     }
-                    const newAtt = filterApplyConvolutionFilterUseCase(filterAttachment, matrixX, matrixY, convMatrix, params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), params[idx++], params[idx++], config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyConvolutionFilterUseCase(filter_attachment, matrixX, matrixY, convMatrix, params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), params[idx++], params[idx++], config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 4: // DisplacementMapFilter
@@ -328,29 +399,29 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
                     for (let i = 0; i < dmLen; i++) {
                         dmBuffer[i] = params[idx++];
                     }
-                    const newAtt = filterApplyDisplacementMapFilterUseCase(filterAttachment, matrix, dmBuffer, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyDisplacementMapFilterUseCase(filter_attachment, matrix, dmBuffer, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 5: // DropShadowFilter
                 {
-                    const newAtt = filterApplyDropShadowFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), Boolean(params[idx++]), devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyDropShadowFilterUseCase(filter_attachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), Boolean(params[idx++]), device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 6: // GlowFilter
                 {
-                    const newAtt = filterApplyGlowFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyGlowFilterUseCase(filter_attachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 7: // GradientBevelFilter
@@ -372,11 +443,11 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
                     for (let i = 0; i < gbRatiosLen; i++) {
                         gbRatios[i] = params[idx++];
                     }
-                    const newAtt = filterApplyGradientBevelFilterUseCase(filterAttachment, matrix, gbDist, gbAngle, gbColors, gbAlphas, gbRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyGradientBevelFilterUseCase(filter_attachment, matrix, gbDist, gbAngle, gbColors, gbAlphas, gbRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
             case 8: // GradientGlowFilter
@@ -398,37 +469,57 @@ const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, co
                     for (let i = 0; i < ggRatiosLen; i++) {
                         ggRatios[i] = params[idx++];
                     }
-                    const newAtt = filterApplyGradientGlowFilterUseCase(filterAttachment, matrix, ggDist, ggAngle, ggColors, ggAlphas, ggRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
-                    if (filterAttachment !== newAtt) {
-                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    const newAtt = filterApplyGradientGlowFilterUseCase(filter_attachment, matrix, ggDist, ggAngle, ggColors, ggAlphas, ggRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), device_pixel_ratio, config);
+                    if (filter_attachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filter_attachment);
                     }
-                    filterAttachment = newAtt;
+                    filter_attachment = newAtt;
                 }
                 break;
         }
     }
-    return filterAttachment;
+    return filter_attachment;
 };
-export const execute = (tempAttachment, mainAttachment, _tempName, blendMode, matrix, colorTransform, useFilter, filterBounds, params, uniqueKey, filterKey, _contentWidth, _contentHeight, config, bufferManager) => {
-    if (useFilter && matrix && filterBounds && params) {
+/**
+ * @description コンテナレイヤーの終了処理を実行する（フィルター適用＋ブレンド＋メインへの描画）
+ *              Executes container layer end processing (filter application + blending + drawing to main)
+ * @param {IAttachmentObject} temp_attachment 一時アタッチメント / Temporary attachment
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {string} _temp_name 一時名（未使用） / Temporary name (unused)
+ * @param {IBlendMode} blend_mode ブレンドモード / Blend mode
+ * @param {Float32Array} matrix 変換行列 / Transformation matrix
+ * @param {Float32Array | null} color_transform カラートランスフォーム配列 / Color transform array
+ * @param {boolean} use_filter フィルター使用フラグ / Whether to use filter
+ * @param {Float32Array | null} filter_bounds フィルターバウンディングボックス / Filter bounding box
+ * @param {Float32Array | null} params フィルターパラメータ配列 / Filter parameters array
+ * @param {string} unique_key ユニークキー / Unique key
+ * @param {string} filter_key フィルターキー / Filter key
+ * @param {number} _content_width コンテンツ幅（未使用） / Content width (unused)
+ * @param {number} _content_height コンテンツ高さ（未使用） / Content height (unused)
+ * @param {ILocalFilterConfig} config フィルター設定 / Filter configuration
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @return {void}
+ */
+export const execute = (temp_attachment, main_attachment, _temp_name, blend_mode, matrix, color_transform, use_filter, filter_bounds, params, unique_key, filter_key, _content_width, _content_height, config, buffer_manager) => {
+    if (use_filter && matrix && filter_bounds && params) {
         // containerEndLayerが呼ばれる＝ディスプレイレイヤーがコンテンツ変更を検出して再レンダリングを要求
         // 常に新鮮なテクスチャを抽出してフィルターを適用する
         // （キャッシュはディスプレイレイヤーのcontainerDrawCachedFilterで管理）
         // WebGL版と同じ: レイヤー全体をフィルター用にコピー
         // レイヤーはコンテンツサイズで作成され、childrenは相対座標で描画されているため
         // (0, 0, layerWidth, layerHeight) = コンテンツ全体
-        let filterAttachment = copyRegionToFilterAttachment(config, tempAttachment, 0, 0, tempAttachment.width, tempAttachment.height);
+        let filterAttachment = $copyRegionToFilterAttachment(config, temp_attachment, 0, 0, temp_attachment.width, temp_attachment.height);
         // 一時アタッチメントを遅延解放（コマンドバッファsubmit後に解放）
         // destroyAttachmentは即座にGPUテクスチャを破棄するため、
         // コマンドエンコーダに記録済みのレンダーパスが参照するテクスチャが無効になる
-        config.frameBufferManager.releaseTemporaryAttachment(tempAttachment);
+        config.frameBufferManager.releaseTemporaryAttachment(temp_attachment);
         // フィルターチェーンを適用
         const devicePixelRatio = WebGPUUtil.getDevicePixelRatio();
-        filterAttachment = applyFilterChain(filterAttachment, matrix, params, devicePixelRatio, config);
+        filterAttachment = $applyFilterChain(filterAttachment, matrix, params, devicePixelRatio, config);
         // キャッシュに保存
-        if (uniqueKey) {
-            $cacheStore.set(uniqueKey, "fKey", filterKey);
-            $cacheStore.set(uniqueKey, "fTexture", filterAttachment);
+        if (unique_key) {
+            $cacheStore.set(unique_key, "fKey", filter_key);
+            $cacheStore.set(unique_key, "fTexture", filterAttachment);
         }
         // フィルター結果をメインに描画
         if (filterAttachment) {
@@ -436,41 +527,41 @@ export const execute = (tempAttachment, mainAttachment, _tempName, blendMode, ma
             // キャッシュにはフィルター結果のみ保存（CTは毎フレーム適用する）
             let drawAttachment = filterAttachment;
             let ctAttachment = null;
-            if (!isIdentityColorTransform(colorTransform)) {
-                ctAttachment = applyColorTransform(config, filterAttachment, colorTransform);
+            if (!$isIdentityColorTransform(color_transform)) {
+                ctAttachment = $applyColorTransform(config, filterAttachment, color_transform);
                 drawAttachment = ctAttachment;
             }
             const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
             const scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
-            const boundsXMin = filterBounds[0] * (scaleX / devicePixelRatio);
-            const boundsYMin = filterBounds[1] * (scaleY / devicePixelRatio);
+            const boundsXMin = filter_bounds[0] * (scaleX / devicePixelRatio);
+            const boundsYMin = filter_bounds[1] * (scaleY / devicePixelRatio);
             // WebGL版と同じ: boundsXMin + matrix[4] で絶対位置
             const drawX = boundsXMin + matrix[4];
             const drawY = boundsYMin + matrix[5];
-            drawFilterResultToMain(config, drawAttachment, mainAttachment, blendMode, drawX, drawY, bufferManager);
+            $drawFilterResultToMain(config, drawAttachment, main_attachment, blend_mode, drawX, drawY, buffer_manager);
             // CT一時アタッチメントを解放
             if (ctAttachment) {
                 config.frameBufferManager.releaseTemporaryAttachment(ctAttachment);
             }
             // キャッシュされていないフィルター結果のみ解放
-            if (!uniqueKey) {
+            if (!unique_key) {
                 config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
             }
         }
     }
     else {
         // ブレンドのみ：レイヤー全体をフィルター用にコピーしてメインに描画
-        let fullAttachment = copyRegionToFilterAttachment(config, tempAttachment, 0, 0, tempAttachment.width, tempAttachment.height);
+        let fullAttachment = $copyRegionToFilterAttachment(config, temp_attachment, 0, 0, temp_attachment.width, temp_attachment.height);
         // 一時アタッチメントを遅延解放（コマンドバッファsubmit後に解放）
-        config.frameBufferManager.releaseTemporaryAttachment(tempAttachment);
+        config.frameBufferManager.releaseTemporaryAttachment(temp_attachment);
         // ColorTransformが恒等変換でない場合、適用
-        if (!isIdentityColorTransform(colorTransform)) {
-            const ctAttachment = applyColorTransform(config, fullAttachment, colorTransform);
+        if (!$isIdentityColorTransform(color_transform)) {
+            const ctAttachment = $applyColorTransform(config, fullAttachment, color_transform);
             config.frameBufferManager.releaseTemporaryAttachment(fullAttachment);
             fullAttachment = ctAttachment;
         }
         // WebGL版と同じ: matrix[4], matrix[5] = layerBounds の絶対位置に描画
-        drawFilterResultToMain(config, fullAttachment, mainAttachment, blendMode, matrix[4], matrix[5], bufferManager);
+        $drawFilterResultToMain(config, fullAttachment, main_attachment, blend_mode, matrix[4], matrix[5], buffer_manager);
         config.frameBufferManager.releaseTemporaryAttachment(fullAttachment);
     }
 };

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

@@ -3,4 +3,17 @@ import type { BufferManager } from "../../BufferManager";
 import type { FrameBufferManager } from "../../FrameBufferManager";
 import type { TextureManager } from "../../TextureManager";
 import type { PipelineManager } from "../../Shader/PipelineManager";
+/**
+ * @description インスタンス描画を実行する
+ *              Executes instanced array drawing
+ * @param {GPUDevice} device GPUデバイス / GPU device
+ * @param {GPUCommandEncoder} command_encoder コマンドエンコーダ / Command encoder
+ * @param {GPURenderPassEncoder | null} render_pass_encoder レンダーパスエンコーダ / Render pass encoder
+ * @param {IAttachmentObject} main_attachment メインアタッチメント / Main attachment
+ * @param {BufferManager} buffer_manager バッファマネージャ / Buffer manager
+ * @param {FrameBufferManager} frame_buffer_manager フレームバッファマネージャ / Frame buffer manager
+ * @param {TextureManager} texture_manager テクスチャマネージャ / Texture manager
+ * @param {PipelineManager} pipeline_manager パイプラインマネージャ / Pipeline manager
+ * @return {GPURenderPassEncoder | null} レンダーパスエンコーダまたはnull / Render pass encoder or null
+ */
 export declare const execute: (device: GPUDevice, command_encoder: GPUCommandEncoder, render_pass_encoder: GPURenderPassEncoder | null, main_attachment: IAttachmentObject, buffer_manager: BufferManager, frame_buffer_manager: FrameBufferManager, texture_manager: TextureManager, pipeline_manager: PipelineManager) => GPURenderPassEncoder | null;