@next2d/webgpu 3.0.5 → 3.1.0

package/src/FillTexturePool.d.ts

@@ -1,6 +1,45 @@
+/**
+ * @description キャッシュからビューを取得、なければ生成してキャッシュに保存
+ *              Get view from cache, or create and cache a new one
+ * @param  {GPUTexture} texture
+ * @return {GPUTextureView}
+ */
 export declare const $getOrCreateView: (texture: GPUTexture) => GPUTextureView;
+/**
+ * @description プールから塗りテクスチャを取得、なければ新規作成
+ *              Acquire a fill texture from the pool, or create a new one
+ * @param  {GPUDevice} device
+ * @param  {number} width
+ * @param  {number} height
+ * @return {GPUTexture}
+ */
 export declare const $acquireFillTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+/**
+ * @description 塗りテクスチャをプールに返却
+ *              Release a fill texture back to the pool
+ * @param  {GPUTexture} texture
+ * @return {void}
+ */
 export declare const $releaseFillTexture: (texture: GPUTexture) => void;
+/**
+ * @description プールからレンダーテクスチャを取得、なければ新規作成
+ *              Acquire a render texture from the pool, or create a new one
+ * @param  {GPUDevice} device
+ * @param  {number} width
+ * @param  {number} height
+ * @return {GPUTexture}
+ */
 export declare const $acquireRenderTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+/**
+ * @description レンダーテクスチャをプールに返却
+ *              Release a render texture back to the pool
+ * @param  {GPUTexture} texture
+ * @return {void}
+ */
 export declare const $releaseRenderTexture: (texture: GPUTexture) => void;
+/**
+ * @description 全テクスチャプールを破棄してクリア
+ *              Destroy and clear all texture pools
+ * @return {void}
+ */
 export declare const $clearFillTexturePool: () => void;

package/src/FillTexturePool.js

@@ -1,5 +1,15 @@
-// GPUTexture → GPUTextureView キャッシュ（createView()呼び出し削減）
+/**
+ * @description GPUTexture → GPUTextureView キャッシュ（createView()呼び出し削減）
+ *              GPUTexture to GPUTextureView cache to reduce createView() calls
+ * @type {WeakMap<GPUTexture, GPUTextureView>}
+ */
 const $viewCache = new WeakMap();
+/**
+ * @description キャッシュからビューを取得、なければ生成してキャッシュに保存
+ *              Get view from cache, or create and cache a new one
+ * @param  {GPUTexture} texture
+ * @return {GPUTextureView}
+ */
 export const $getOrCreateView = (texture) => {
     let view = $viewCache.get(texture);
     if (!view) {
@@ -8,12 +18,40 @@ export const $getOrCreateView = (texture) => {
     }
     return view;
 };
-// GPUTextureUsage.TEXTURE_BINDING(0x04) | GPUTextureUsage.COPY_DST(0x02) = 0x06
-const FILL_TEXTURE_USAGE = 0x06;
-// GPUTextureUsage.TEXTURE_BINDING(0x04) | GPUTextureUsage.COPY_DST(0x02) | GPUTextureUsage.RENDER_ATTACHMENT(0x10) = 0x16
-const RENDER_TEXTURE_USAGE = 0x16;
+/**
+ * @description 塗りテクスチャ用のGPUTextureUsageフラグ
+ *              GPUTextureUsage flags for fill textures
+ *              TEXTURE_BINDING(0x04) | COPY_DST(0x02) = 0x06
+ * @type {number}
+ */
+const $FILL_TEXTURE_USAGE = 0x06;
+/**
+ * @description レンダーテクスチャ用のGPUTextureUsageフラグ
+ *              GPUTextureUsage flags for render textures
+ *              TEXTURE_BINDING(0x04) | COPY_DST(0x02) | RENDER_ATTACHMENT(0x10) = 0x16
+ * @type {number}
+ */
+const $RENDER_TEXTURE_USAGE = 0x16;
+/**
+ * @description 塗りテクスチャのオブジェクトプール
+ *              Object pool for fill textures
+ * @type {Map<string, GPUTexture[]>}
+ */
 const $pool = new Map();
+/**
+ * @description レンダーテクスチャのオブジェクトプール
+ *              Object pool for render textures
+ * @type {Map<string, GPUTexture[]>}
+ */
 const $renderPool = new Map();
+/**
+ * @description プールから塗りテクスチャを取得、なければ新規作成
+ *              Acquire a fill texture from the pool, or create a new one
+ * @param  {GPUDevice} device
+ * @param  {number} width
+ * @param  {number} height
+ * @return {GPUTexture}
+ */
 export const $acquireFillTexture = (device, width, height) => {
     const key = `${width}_${height}`;
     const list = $pool.get(key);
@@ -23,9 +61,15 @@ export const $acquireFillTexture = (device, width, height) => {
     return device.createTexture({
         "size": { width, height },
         "format": "rgba8unorm",
-        "usage": FILL_TEXTURE_USAGE
+        "usage": $FILL_TEXTURE_USAGE
     });
 };
+/**
+ * @description 塗りテクスチャをプールに返却
+ *              Release a fill texture back to the pool
+ * @param  {GPUTexture} texture
+ * @return {void}
+ */
 export const $releaseFillTexture = (texture) => {
     const key = `${texture.width}_${texture.height}`;
     let list = $pool.get(key);
@@ -35,6 +79,14 @@ export const $releaseFillTexture = (texture) => {
     }
     list.push(texture);
 };
+/**
+ * @description プールからレンダーテクスチャを取得、なければ新規作成
+ *              Acquire a render texture from the pool, or create a new one
+ * @param  {GPUDevice} device
+ * @param  {number} width
+ * @param  {number} height
+ * @return {GPUTexture}
+ */
 export const $acquireRenderTexture = (device, width, height) => {
     const key = `${width}_${height}`;
     const list = $renderPool.get(key);
@@ -44,9 +96,15 @@ export const $acquireRenderTexture = (device, width, height) => {
     return device.createTexture({
         "size": { width, height },
         "format": "rgba8unorm",
-        "usage": RENDER_TEXTURE_USAGE
+        "usage": $RENDER_TEXTURE_USAGE
     });
 };
+/**
+ * @description レンダーテクスチャをプールに返却
+ *              Release a render texture back to the pool
+ * @param  {GPUTexture} texture
+ * @return {void}
+ */
 export const $releaseRenderTexture = (texture) => {
     const key = `${texture.width}_${texture.height}`;
     let list = $renderPool.get(key);
@@ -56,6 +114,11 @@ export const $releaseRenderTexture = (texture) => {
     }
     list.push(texture);
 };
+/**
+ * @description 全テクスチャプールを破棄してクリア
+ *              Destroy and clear all texture pools
+ * @return {void}
+ */
 export const $clearFillTexturePool = () => {
     for (const [, list] of $pool) {
         for (const texture of list) {

package/src/Filter/BevelFilter/FilterApplyBevelFilterUseCase.d.ts

@@ -2,9 +2,28 @@ import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import type { IFilterConfig } from "../../interface/IFilterConfig";
 /**
  * @description ベベルフィルターを適用
- *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
+ *              Apply bevel filter
  *
+ *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
  *              UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
  *              合成時のcopyTextureToTextureと一時テクスチャを使用しない最適化版。
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - ベベルの距離
+ * @param  {number} angle - ベベルの角度（度）
+ * @param  {number} highlight_color - ハイライト色 (32bit整数)
+ * @param  {number} highlight_alpha - ハイライトアルファ
+ * @param  {number} shadow_color - シャドウ色 (32bit整数)
+ * @param  {number} shadow_alpha - シャドウアルファ
+ * @param  {number} blur_x - X方向ブラー量
+ * @param  {number} blur_y - Y方向ブラー量
+ * @param  {number} strength - ベベル強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, highlightColor: number, highlightAlpha: number, shadowColor: number, shadowAlpha: number, blurX: number, blurY: number, strength: number, quality: number, type: number, knockout: boolean, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, highlight_color: number, highlight_alpha: number, shadow_color: number, shadow_alpha: number, blur_x: number, blur_y: number, strength: number, quality: number, type: number, knockout: boolean, device_pixel_ratio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/BevelFilter/FilterApplyBevelFilterUseCase.js

@@ -1,9 +1,6 @@
 import { $offset } from "../FilterOffset";
+import { DEG_TO_RAD, intToPremultipliedRGBA } from "../FilterUtil";
 import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
-/**
- * @description 度からラジアンへの変換係数
- */
-const DEG_TO_RAD = Math.PI / 180;
 /**
  * @description プリアロケートされたFloat32Array
  */
@@ -26,41 +23,51 @@ const $entries4 = [
     { "binding": 2, "resource": null },
     { "binding": 3, "resource": null }
 ];
-/**
- * @description 32bit整数からRGB値を抽出（プリマルチプライドアルファ対応）
- */
-const intToRGBA = (color, alpha) => {
-    const r = (color >> 16 & 0xFF) / 255 * alpha;
-    const g = (color >> 8 & 0xFF) / 255 * alpha;
-    const b = (color & 0xFF) / 255 * alpha;
-    return [r, g, b, alpha];
-};
 /**
  * @description ベベルフィルターを適用
- *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
+ *              Apply bevel filter
  *
+ *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
  *              UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
  *              合成時のcopyTextureToTextureと一時テクスチャを使用しない最適化版。
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - ベベルの距離
+ * @param  {number} angle - ベベルの角度（度）
+ * @param  {number} highlight_color - ハイライト色 (32bit整数)
+ * @param  {number} highlight_alpha - ハイライトアルファ
+ * @param  {number} shadow_color - シャドウ色 (32bit整数)
+ * @param  {number} shadow_alpha - シャドウアルファ
+ * @param  {number} blur_x - X方向ブラー量
+ * @param  {number} blur_y - Y方向ブラー量
+ * @param  {number} strength - ベベル強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, matrix, distance, angle, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout, devicePixelRatio, config) => {
+export const execute = (source_attachment, matrix, distance, angle, highlight_color, highlight_alpha, shadow_color, shadow_alpha, blur_x, blur_y, strength, quality, type, knockout, device_pixel_ratio, config) => {
     const { device, commandEncoder, frameBufferManager, pipelineManager, textureManager } = config;
     // 元のオフセットを保存
     const baseOffsetX = $offset.x;
     const baseOffsetY = $offset.y;
-    const baseWidth = sourceAttachment.width;
-    const baseHeight = sourceAttachment.height;
+    const baseWidth = source_attachment.width;
+    const baseHeight = source_attachment.height;
     // スケールを計算
     const xScale = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
     const yScale = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
     // オフセットを計算（WebGL版と同じ）
     const radian = angle * DEG_TO_RAD;
-    const x = Math.cos(radian) * distance * (xScale / devicePixelRatio);
-    const y = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    const x = Math.cos(radian) * distance * (xScale / device_pixel_ratio);
+    const y = Math.sin(radian) * distance * (yScale / device_pixel_ratio);
     // === Erase前処理：差分テクスチャを作成 ===
     const eraseAttachment = frameBufferManager.createTemporaryAttachment(baseWidth, baseHeight);
     // Step 1: ソーステクスチャを元の位置にコピー（erase前処理のcopyTextureToTextureは残す）
     commandEncoder.copyTextureToTexture({
-        "texture": sourceAttachment.texture.resource,
+        "texture": source_attachment.texture.resource,
         "origin": { "x": 0, "y": 0, "z": 0 }
     }, {
         "texture": eraseAttachment.texture.resource,
@@ -95,7 +102,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, highlightColo
         }
         $entries3[0].resource.buffer = eraseUniformBuffer;
         $entries3[1].resource = eraseSampler;
-        $entries3[2].resource = sourceAttachment.texture.view;
+        $entries3[2].resource = source_attachment.texture.view;
         const eraseBindGroup = device.createBindGroup({
             "layout": eraseBindGroupLayout,
             "entries": $entries3
@@ -108,7 +115,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, highlightColo
         erasePassEncoder.end();
     }
     // === 差分テクスチャにブラーを適用 ===
-    const blurAttachment = filterApplyBlurFilterUseCase(eraseAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    const blurAttachment = filterApplyBlurFilterUseCase(eraseAttachment, matrix, blur_x, blur_y, quality, device_pixel_ratio, config);
     // eraseアタッチメントを解放
     frameBufferManager.releaseTemporaryAttachment(eraseAttachment);
     const blurWidth = blurAttachment.width;
@@ -147,7 +154,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, highlightColo
     if (!pipeline || !bindGroupLayout) {
         console.error("[WebGPU BevelFilter] Pipeline not found");
         frameBufferManager.releaseTemporaryAttachment(blurAttachment);
-        return sourceAttachment;
+        return source_attachment;
     }
     // サンプラーを作成
     const sampler = textureManager.createSampler("bevel_sampler", true);
@@ -158,8 +165,8 @@ export const execute = (sourceAttachment, matrix, distance, angle, highlightColo
     // baseScale, baseOffset (16 bytes)
     // blurScale, blurOffset (16 bytes)
     // Total: 80 bytes → 16 floats + 4 floats = 20 floats (80 bytes)
-    const [hr, hg, hb, ha] = intToRGBA(highlightColor, highlightAlpha);
-    const [sr, sg, sb, sa] = intToRGBA(shadowColor, shadowAlpha);
+    const [hr, hg, hb, ha] = intToPremultipliedRGBA(highlight_color, highlight_alpha);
+    const [sr, sg, sb, sa] = intToPremultipliedRGBA(shadow_color, shadow_alpha);
     $uniform20[0] = hr;
     $uniform20[1] = hg;
     $uniform20[2] = hb;
@@ -193,7 +200,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, highlightColo
     $entries4[0].resource.buffer = uniformBuffer;
     $entries4[1].resource = sampler;
     $entries4[2].resource = blurAttachment.texture.view;
-    $entries4[3].resource = sourceAttachment.texture.view;
+    $entries4[3].resource = source_attachment.texture.view;
     const bindGroup = device.createBindGroup({
         "layout": bindGroupLayout,
         "entries": $entries4

package/src/Filter/BlurFilter/FilterApplyBlurFilterUseCase.d.ts

@@ -4,13 +4,13 @@ import type { IFilterConfig } from "../../interface/IFilterConfig";
  * @description ブラーフィルターを適用
  *              Apply blur filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
  * @param  {Float32Array} matrix - 変換行列
- * @param  {number} blurX - X方向のブラー量
- * @param  {number} blurY - Y方向のブラー量
+ * @param  {number} blur_x - X方向のブラー量
+ * @param  {number} blur_y - Y方向のブラー量
  * @param  {number} quality - クオリティ (1-15)
- * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
  * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, blurX: number, blurY: number, quality: number, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, matrix: Float32Array, blur_x: number, blur_y: number, quality: number, device_pixel_ratio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/BlurFilter/FilterApplyBlurFilterUseCase.js

@@ -1,7 +1,5 @@
 import { $offset } from "../FilterOffset";
 import { calculateBlurParams, calculateDirectionalBlurParams } from "../BlurFilterUseCase";
-import { shouldUseComputeShader } from "./service/BlurFilterComputeShaderService";
-import { execute as executeBlurCompute } from "../../Compute/service/ComputeExecuteBlurService";
 /**
  * @description プリアロケートされたFloat32Array (サイズ4)
  */
@@ -18,26 +16,26 @@ const $entries3 = [
  * @description ブラーフィルターを適用
  *              Apply blur filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
  * @param  {Float32Array} matrix - 変換行列
- * @param  {number} blurX - X方向のブラー量
- * @param  {number} blurY - Y方向のブラー量
+ * @param  {number} blur_x - X方向のブラー量
+ * @param  {number} blur_y - Y方向のブラー量
  * @param  {number} quality - クオリティ (1-15)
- * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
  * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config) => {
+export const execute = (source_attachment, matrix, blur_x, blur_y, quality, device_pixel_ratio, config) => {
     const { device, commandEncoder, frameBufferManager, pipelineManager, textureManager } = config;
     // ブラーパラメータを計算
-    const blurParams = calculateBlurParams(matrix, blurX, blurY, quality, devicePixelRatio);
+    const blurParams = calculateBlurParams(matrix, blur_x, blur_y, quality, device_pixel_ratio);
     const { baseBlurX, baseBlurY, offsetX, offsetY, bufferScaleX, bufferScaleY } = blurParams;
     // オフセットを更新
     $offset.x += offsetX;
     $offset.y += offsetY;
     // ブラー用バッファサイズを計算
-    const width = sourceAttachment.width + offsetX * 2;
-    const height = sourceAttachment.height + offsetY * 2;
+    const width = source_attachment.width + offsetX * 2;
+    const height = source_attachment.height + offsetY * 2;
     const bufferWidth = Math.ceil(width * bufferScaleX);
     const bufferHeight = Math.ceil(height * bufferScaleY);
     // ピンポンバッファ用の一時アタッチメントを作成
@@ -46,38 +44,25 @@ export const execute = (sourceAttachment, matrix, blurX, blurY, quality, deviceP
     // サンプラーを作成（線形補間）
     const sampler = textureManager.createSampler("blur_sampler", true);
     // ソーステクスチャをattachment0にコピー（スケーリング付き）
-    copyTextureToAttachment(device, commandEncoder, frameBufferManager, pipelineManager, sourceAttachment, attachment0, sampler, bufferScaleX, bufferScaleY, offsetX * bufferScaleX, offsetY * bufferScaleY, config.bufferManager);
+    copyTextureToAttachment(device, commandEncoder, frameBufferManager, pipelineManager, source_attachment, attachment0, sampler, bufferScaleX, bufferScaleY, offsetX * bufferScaleX, offsetY * bufferScaleY, config.bufferManager);
     // バッファスケールを考慮したブラー値
     const bufferBlurX = baseBlurX * bufferScaleX;
     const bufferBlurY = baseBlurY * bufferScaleY;
-    // Compute Shaderを使用すべきか判定
-    const useCompute = config.computePipelineManager
-        && shouldUseComputeShader(baseBlurX, baseBlurY, bufferWidth, bufferHeight);
     // ブラーパスを実行
     const attachments = [attachment0, attachment1];
     let attachmentIndex = 0;
     for (let q = 0; q < quality; ++q) {
         // 水平ブラー
-        if (blurX > 0) {
+        if (blur_x > 0) {
             const srcIndex = attachmentIndex;
             attachmentIndex = (attachmentIndex + 1) % 2;
-            if (useCompute) {
-                executeBlurCompute(device, commandEncoder, config.computePipelineManager, attachments[srcIndex], attachments[attachmentIndex], true, bufferBlurX, config.bufferManager);
-            }
-            else {
-                applyDirectionalBlur(device, commandEncoder, frameBufferManager, pipelineManager, attachments[srcIndex], attachments[attachmentIndex], sampler, true, bufferBlurX, config.bufferManager);
-            }
+            applyDirectionalBlur(device, commandEncoder, frameBufferManager, pipelineManager, attachments[srcIndex], attachments[attachmentIndex], sampler, true, bufferBlurX, config.bufferManager);
         }
         // 垂直ブラー
-        if (blurY > 0) {
+        if (blur_y > 0) {
             const srcIndex = attachmentIndex;
             attachmentIndex = (attachmentIndex + 1) % 2;
-            if (useCompute) {
-                executeBlurCompute(device, commandEncoder, config.computePipelineManager, attachments[srcIndex], attachments[attachmentIndex], false, bufferBlurY, config.bufferManager);
-            }
-            else {
-                applyDirectionalBlur(device, commandEncoder, frameBufferManager, pipelineManager, attachments[srcIndex], attachments[attachmentIndex], sampler, false, bufferBlurY, config.bufferManager);
-            }
+            applyDirectionalBlur(device, commandEncoder, frameBufferManager, pipelineManager, attachments[srcIndex], attachments[attachmentIndex], sampler, false, bufferBlurY, config.bufferManager);
         }
     }
     // 結果のアタッチメント
@@ -85,7 +70,7 @@ export const execute = (sourceAttachment, matrix, blurX, blurY, quality, deviceP
     // バッファスケールが1でない場合は元のサイズにアップスケール
     if (bufferScaleX !== 1 || bufferScaleY !== 1) {
         const finalAttachment = frameBufferManager.createTemporaryAttachment(width, height);
-        upscaleTexture(device, commandEncoder, frameBufferManager, pipelineManager, resultAttachment, finalAttachment, sampler, 1 / bufferScaleX, 1 / bufferScaleY, config.bufferManager);
+        upscaleTexture(device, commandEncoder, frameBufferManager, pipelineManager, resultAttachment, finalAttachment, sampler, config.bufferManager);
         // ピンポンバッファを解放
         frameBufferManager.releaseTemporaryAttachment(attachment0);
         frameBufferManager.releaseTemporaryAttachment(attachment1);
@@ -100,25 +85,33 @@ export const execute = (sourceAttachment, matrix, blurX, blurY, quality, deviceP
 };
 /**
  * @description テクスチャをアタッチメントにコピー（オフセット位置に配置、スケーリング対応）
+ *              Copy texture to attachment with offset placement and scaling support
  *
- * @param source - ソーステクスチャ
- * @param dest - デストテクスチャ（ソースより大きい）
- * @param bufferScaleX - X方向のバッファスケール
- * @param bufferScaleY - Y方向のバッファスケール
- * @param pixelOffsetX - デスト内でのX方向オフセット（ピクセル単位、スケーリング済み）
- * @param pixelOffsetY - デスト内でのY方向オフセット（ピクセル単位、スケーリング済み）
+ * @param  {GPUDevice} device - GPUデバイス
+ * @param  {GPUCommandEncoder} command_encoder - コマンドエンコーダー
+ * @param  {IFilterConfig["frameBufferManager"]} frame_buffer_manager - フレームバッファマネージャー
+ * @param  {IFilterConfig["pipelineManager"]} pipeline_manager - パイプラインマネージャー
+ * @param  {IAttachmentObject} source - ソーステクスチャ
+ * @param  {IAttachmentObject} dest - デストテクスチャ（ソースより大きい）
+ * @param  {GPUSampler} sampler - サンプラー
+ * @param  {number} buffer_scale_x - X方向のバッファスケール
+ * @param  {number} buffer_scale_y - Y方向のバッファスケール
+ * @param  {number} pixel_offset_x - デスト内でのX方向オフセット（ピクセル単位、スケーリング済み）
+ * @param  {number} pixel_offset_y - デスト内でのY方向オフセット（ピクセル単位、スケーリング済み）
+ * @param  {IFilterConfig["bufferManager"]} [buffer_manager] - バッファマネージャー
+ * @return {void}
  */
-const copyTextureToAttachment = (device, commandEncoder, frameBufferManager, pipelineManager, source, dest, sampler, bufferScaleX, bufferScaleY, pixelOffsetX, pixelOffsetY, bufferManager) => {
+const copyTextureToAttachment = (device, command_encoder, frame_buffer_manager, pipeline_manager, source, dest, sampler, buffer_scale_x, buffer_scale_y, pixel_offset_x, pixel_offset_y, buffer_manager) => {
     // texture_copy_rgba8を使用し、ビューポートでオフセットを制御
-    const pipeline = pipelineManager.getPipeline("texture_copy_rgba8");
-    const bindGroupLayout = pipelineManager.getBindGroupLayout("texture_copy");
+    const pipeline = pipeline_manager.getPipeline("texture_copy_rgba8");
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("texture_copy");
     if (!pipeline || !bindGroupLayout) {
         console.error("[WebGPU BlurFilter] texture_copy_rgba8 pipeline not found");
         return;
     }
     // デスト内でのソース描画サイズ（スケーリング後）
-    const scaledSourceWidth = source.width * bufferScaleX;
-    const scaledSourceHeight = source.height * bufferScaleY;
+    const scaledSourceWidth = source.width * buffer_scale_x;
+    const scaledSourceHeight = source.height * buffer_scale_y;
     // シェーダー: uv = texCoord * scale + offset
     // ソース全体をサンプリングするので scale = 1, offset = 0
     const scaleX = 1;
@@ -130,13 +123,13 @@ const copyTextureToAttachment = (device, commandEncoder, frameBufferManager, pip
     $uniform4[1] = scaleY;
     $uniform4[2] = offsetX;
     $uniform4[3] = offsetY;
-    const uniformBuffer = bufferManager
-        ? bufferManager.acquireAndWriteUniformBuffer($uniform4)
+    const uniformBuffer = buffer_manager
+        ? buffer_manager.acquireAndWriteUniformBuffer($uniform4)
         : device.createBuffer({
             "size": $uniform4.byteLength,
             "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
-    if (!bufferManager) {
+    if (!buffer_manager) {
         device.queue.writeBuffer(uniformBuffer, 0, $uniform4);
     }
     $entries3[0].resource.buffer = uniformBuffer;
@@ -146,27 +139,40 @@ const copyTextureToAttachment = (device, commandEncoder, frameBufferManager, pip
         "layout": bindGroupLayout,
         "entries": $entries3
     });
-    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    const renderPassDescriptor = frame_buffer_manager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = command_encoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
     passEncoder.setBindGroup(0, bindGroup);
     // ビューポートを設定してオフセット位置に描画
-    passEncoder.setViewport(pixelOffsetX, pixelOffsetY, scaledSourceWidth, scaledSourceHeight, 0, 1);
-    passEncoder.setScissorRect(Math.floor(pixelOffsetX), Math.floor(pixelOffsetY), Math.ceil(scaledSourceWidth), Math.ceil(scaledSourceHeight));
+    passEncoder.setViewport(pixel_offset_x, pixel_offset_y, scaledSourceWidth, scaledSourceHeight, 0, 1);
+    passEncoder.setScissorRect(Math.floor(pixel_offset_x), Math.floor(pixel_offset_y), Math.ceil(scaledSourceWidth), Math.ceil(scaledSourceHeight));
     passEncoder.draw(6, 1, 0, 0);
     passEncoder.end();
     // Note: uniformBuffer is not destroyed here - it will be garbage collected after GPU submission
 };
 /**
  * @description 方向ブラーを適用
+ *              Apply directional blur pass
+ *
+ * @param  {GPUDevice} device - GPUデバイス
+ * @param  {GPUCommandEncoder} command_encoder - コマンドエンコーダー
+ * @param  {IFilterConfig["frameBufferManager"]} frame_buffer_manager - フレームバッファマネージャー
+ * @param  {IFilterConfig["pipelineManager"]} pipeline_manager - パイプラインマネージャー
+ * @param  {IAttachmentObject} source - ソーステクスチャ
+ * @param  {IAttachmentObject} dest - デストテクスチャ
+ * @param  {GPUSampler} sampler - サンプラー
+ * @param  {boolean} is_horizontal - 水平方向かどうか
+ * @param  {number} blur - ブラー量
+ * @param  {IFilterConfig["bufferManager"]} [buffer_manager] - バッファマネージャー
+ * @return {void}
  */
-const applyDirectionalBlur = (device, commandEncoder, frameBufferManager, pipelineManager, source, dest, sampler, isHorizontal, blur, bufferManager) => {
-    const params = calculateDirectionalBlurParams(isHorizontal, blur, source.width, source.height);
+const applyDirectionalBlur = (device, command_encoder, frame_buffer_manager, pipeline_manager, source, dest, sampler, is_horizontal, blur, buffer_manager) => {
+    const params = calculateDirectionalBlurParams(is_horizontal, blur, source.width, source.height);
     const { offsetX, offsetY, fraction, samples, halfBlur } = params;
     // halfBlurに対応するパイプラインを取得（1〜16の範囲でクランプ）
     const clampedHalfBlur = Math.max(1, Math.min(16, halfBlur));
-    const pipeline = pipelineManager.getPipeline(`blur_filter_${clampedHalfBlur}`);
-    const bindGroupLayout = pipelineManager.getBindGroupLayout("blur_filter");
+    const pipeline = pipeline_manager.getPipeline(`blur_filter_${clampedHalfBlur}`);
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("blur_filter");
     if (!pipeline || !bindGroupLayout) {
         console.error(`[WebGPU BlurFilter] blur_filter_${clampedHalfBlur} pipeline not found`);
         return;
@@ -176,13 +182,13 @@ const applyDirectionalBlur = (device, commandEncoder, frameBufferManager, pipeli
     $uniform4[1] = offsetY;
     $uniform4[2] = fraction;
     $uniform4[3] = samples;
-    const uniformBuffer = bufferManager
-        ? bufferManager.acquireAndWriteUniformBuffer($uniform4)
+    const uniformBuffer = buffer_manager
+        ? buffer_manager.acquireAndWriteUniformBuffer($uniform4)
         : device.createBuffer({
             "size": $uniform4.byteLength,
             "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
-    if (!bufferManager) {
+    if (!buffer_manager) {
         device.queue.writeBuffer(uniformBuffer, 0, $uniform4);
     }
     $entries3[0].resource.buffer = uniformBuffer;
@@ -192,8 +198,8 @@ const applyDirectionalBlur = (device, commandEncoder, frameBufferManager, pipeli
         "layout": bindGroupLayout,
         "entries": $entries3
     });
-    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    const renderPassDescriptor = frame_buffer_manager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = command_encoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
     passEncoder.setBindGroup(0, bindGroup);
     passEncoder.draw(6, 1, 0, 0);
@@ -202,11 +208,22 @@ const applyDirectionalBlur = (device, commandEncoder, frameBufferManager, pipeli
 };
 /**
  * @description テクスチャをアップスケール（ソース全体をデスト全体にマッピング）
+ *              Upscale texture by mapping entire source to entire destination
+ *
+ * @param  {GPUDevice} device - GPUデバイス
+ * @param  {GPUCommandEncoder} command_encoder - コマンドエンコーダー
+ * @param  {IFilterConfig["frameBufferManager"]} frame_buffer_manager - フレームバッファマネージャー
+ * @param  {IFilterConfig["pipelineManager"]} pipeline_manager - パイプラインマネージャー
+ * @param  {IAttachmentObject} source - ソーステクスチャ
+ * @param  {IAttachmentObject} dest - デストテクスチャ
+ * @param  {GPUSampler} sampler - サンプラー
+ * @param  {IFilterConfig["bufferManager"]} [buffer_manager] - バッファマネージャー
+ * @return {void}
  */
-const upscaleTexture = (device, commandEncoder, frameBufferManager, pipelineManager, source, dest, sampler, _scaleX, _scaleY, bufferManager) => {
+const upscaleTexture = (device, command_encoder, frame_buffer_manager, pipeline_manager, source, dest, sampler, buffer_manager) => {
     // temp_アタッチメントはrgba8unormフォーマットなので、texture_copy_rgba8パイプラインを使用
-    const pipeline = pipelineManager.getPipeline("texture_copy_rgba8");
-    const bindGroupLayout = pipelineManager.getBindGroupLayout("texture_copy");
+    const pipeline = pipeline_manager.getPipeline("texture_copy_rgba8");
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("texture_copy");
     if (!pipeline || !bindGroupLayout) {
         console.error("[WebGPU BlurFilter] texture_copy_rgba8 pipeline not found");
         return;
@@ -218,13 +235,13 @@ const upscaleTexture = (device, commandEncoder, frameBufferManager, pipelineMana
     $uniform4[1] = 1;
     $uniform4[2] = 0;
     $uniform4[3] = 0;
-    const uniformBuffer = bufferManager
-        ? bufferManager.acquireAndWriteUniformBuffer($uniform4)
+    const uniformBuffer = buffer_manager
+        ? buffer_manager.acquireAndWriteUniformBuffer($uniform4)
         : device.createBuffer({
             "size": $uniform4.byteLength,
             "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
-    if (!bufferManager) {
+    if (!buffer_manager) {
         device.queue.writeBuffer(uniformBuffer, 0, $uniform4);
     }
     $entries3[0].resource.buffer = uniformBuffer;
@@ -234,8 +251,8 @@ const upscaleTexture = (device, commandEncoder, frameBufferManager, pipelineMana
         "layout": bindGroupLayout,
         "entries": $entries3
     });
-    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    const renderPassDescriptor = frame_buffer_manager.createRenderPassDescriptor(dest.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = command_encoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
     passEncoder.setBindGroup(0, bindGroup);
     passEncoder.draw(6, 1, 0, 0);