@next2d/webgpu 3.0.5 → 3.1.0

package/src/Filter/BlurFilterUseCase.d.ts

@@ -4,14 +4,16 @@
  */
 /**
  * @description ブラーフィルターパラメータを計算
- * @param {Float32Array} matrix - 変換行列
- * @param {number} blurX - X方向のブラー量
- * @param {number} blurY - Y方向のブラー量
- * @param {number} quality - クオリティ (1-15)
- * @param {number} devicePixelRatio - デバイスピクセル比
+ *              Calculate blur filter parameters
+ *
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} blur_x - X方向のブラー量
+ * @param  {number} blur_y - Y方向のブラー量
+ * @param  {number} quality - クオリティ (1-15)
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
  * @return {object}
  */
-export declare const calculateBlurParams: (matrix: Float32Array, blurX: number, blurY: number, quality: number, devicePixelRatio: number) => {
+export declare const calculateBlurParams: (matrix: Float32Array, blur_x: number, blur_y: number, quality: number, device_pixel_ratio: number) => {
     baseBlurX: number;
     baseBlurY: number;
     offsetX: number;
@@ -21,13 +23,15 @@ export declare const calculateBlurParams: (matrix: Float32Array, blurX: number,
 };
 /**
  * @description 方向ブラーのパラメータを計算
- * @param {boolean} isHorizontal - 水平方向かどうか
- * @param {number} blur - ブラー量
- * @param {number} textureWidth - テクスチャ幅
- * @param {number} textureHeight - テクスチャ高さ
+ *              Calculate directional blur parameters
+ *
+ * @param  {boolean} is_horizontal - 水平方向かどうか
+ * @param  {number} blur - ブラー量
+ * @param  {number} texture_width - テクスチャ幅
+ * @param  {number} texture_height - テクスチャ高さ
  * @return {object}
  */
-export declare const calculateDirectionalBlurParams: (isHorizontal: boolean, blur: number, textureWidth: number, textureHeight: number) => {
+export declare const calculateDirectionalBlurParams: (is_horizontal: boolean, blur: number, texture_width: number, texture_height: number) => {
     offsetX: number;
     offsetY: number;
     fraction: number;

package/src/Filter/BlurFilterUseCase.js

@@ -5,23 +5,26 @@
 /**
  * @description ブラー計算用のステップ値
  *              Step values for blur calculation
+ * @type {number[]}
  */
-const BLUR_STEP = [0.5, 1.05, 1.4, 1.55, 1.75, 1.9, 2, 2.15, 2.2, 2.3, 2.5, 3, 3, 3.5, 3.5];
+const $BLUR_STEP = [0.5, 1.05, 1.4, 1.55, 1.75, 1.9, 2, 2.15, 2.2, 2.3, 2.5, 3, 3, 3.5, 3.5];
 /**
  * @description ブラーフィルターパラメータを計算
- * @param {Float32Array} matrix - 変換行列
- * @param {number} blurX - X方向のブラー量
- * @param {number} blurY - Y方向のブラー量
- * @param {number} quality - クオリティ (1-15)
- * @param {number} devicePixelRatio - デバイスピクセル比
+ *              Calculate blur filter parameters
+ *
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} blur_x - X方向のブラー量
+ * @param  {number} blur_y - Y方向のブラー量
+ * @param  {number} quality - クオリティ (1-15)
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
  * @return {object}
  */
-export const calculateBlurParams = (matrix, blurX, blurY, quality, devicePixelRatio) => {
+export const calculateBlurParams = (matrix, blur_x, blur_y, quality, device_pixel_ratio) => {
     const xScale = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
     const yScale = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
-    const baseBlurX = blurX * (xScale / devicePixelRatio);
-    const baseBlurY = blurY * (yScale / devicePixelRatio);
-    const step = BLUR_STEP[Math.min(quality - 1, BLUR_STEP.length - 1)];
+    const baseBlurX = blur_x * (xScale / device_pixel_ratio);
+    const baseBlurY = blur_y * (yScale / device_pixel_ratio);
+    const step = $BLUR_STEP[Math.min(quality - 1, $BLUR_STEP.length - 1)];
     const offsetX = Math.round(baseBlurX * step);
     const offsetY = Math.round(baseBlurY * step);
     // バッファスケールを計算（大きなブラーの場合はダウンスケール）
@@ -62,19 +65,21 @@ export const calculateBlurParams = (matrix, blurX, blurY, quality, devicePixelRa
 };
 /**
  * @description 方向ブラーのパラメータを計算
- * @param {boolean} isHorizontal - 水平方向かどうか
- * @param {number} blur - ブラー量
- * @param {number} textureWidth - テクスチャ幅
- * @param {number} textureHeight - テクスチャ高さ
+ *              Calculate directional blur parameters
+ *
+ * @param  {boolean} is_horizontal - 水平方向かどうか
+ * @param  {number} blur - ブラー量
+ * @param  {number} texture_width - テクスチャ幅
+ * @param  {number} texture_height - テクスチャ高さ
  * @return {object}
  */
-export const calculateDirectionalBlurParams = (isHorizontal, blur, textureWidth, textureHeight) => {
+export const calculateDirectionalBlurParams = (is_horizontal, blur, texture_width, texture_height) => {
     const halfBlur = Math.ceil(blur * 0.5);
     const fraction = 1 - (halfBlur - blur * 0.5);
     const samples = 1 + blur;
     // テクセルオフセットを計算
-    const offsetX = isHorizontal ? 1 / textureWidth : 0;
-    const offsetY = isHorizontal ? 0 : 1 / textureHeight;
+    const offsetX = is_horizontal ? 1 / texture_width : 0;
+    const offsetY = is_horizontal ? 0 : 1 / texture_height;
     return {
         offsetX,
         offsetY,

package/src/Filter/ColorMatrixFilter/FilterApplyColorMatrixFilterUseCase.d.ts

@@ -4,9 +4,9 @@ import type { IFilterConfig } from "../../interface/IFilterConfig";
  * @description カラーマトリックスフィルターを適用
  *              Apply color matrix filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
  * @param  {Float32Array} matrix - 4x5カラーマトリックス (20 floats)
  * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, matrix: Float32Array, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/ColorMatrixFilter/FilterApplyColorMatrixFilterUseCase.js

@@ -14,20 +14,20 @@ const $entries3 = [
  * @description カラーマトリックスフィルターを適用
  *              Apply color matrix filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
  * @param  {Float32Array} matrix - 4x5カラーマトリックス (20 floats)
  * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, matrix, config) => {
+export const execute = (source_attachment, matrix, config) => {
     const { device, commandEncoder, frameBufferManager, pipelineManager, textureManager } = config;
     // 出力アタッチメントを作成
-    const destAttachment = frameBufferManager.createTemporaryAttachment(sourceAttachment.width, sourceAttachment.height);
+    const destAttachment = frameBufferManager.createTemporaryAttachment(source_attachment.width, source_attachment.height);
     const pipeline = pipelineManager.getPipeline("color_matrix_filter");
     const bindGroupLayout = pipelineManager.getBindGroupLayout("color_matrix_filter");
     if (!pipeline || !bindGroupLayout) {
         console.error("[WebGPU ColorMatrixFilter] Pipeline not found");
-        return sourceAttachment;
+        return source_attachment;
     }
     // サンプラーを作成
     const sampler = textureManager.createSampler("color_matrix_sampler", true);
@@ -73,7 +73,7 @@ export const execute = (sourceAttachment, matrix, config) => {
     // バインドグループを作成
     $entries3[0].resource.buffer = uniformBuffer;
     $entries3[1].resource = sampler;
-    $entries3[2].resource = sourceAttachment.texture.view;
+    $entries3[2].resource = source_attachment.texture.view;
     const bindGroup = device.createBindGroup({
         "layout": bindGroupLayout,
         "entries": $entries3

package/src/Filter/ConvolutionFilter/FilterApplyConvolutionFilterUseCase.d.ts

@@ -2,5 +2,19 @@ import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import type { IFilterConfig } from "../../interface/IFilterConfig";
 /**
  * @description コンボリューションフィルターを適用
+ *              Apply convolution filter
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
+ * @param  {number} matrix_x - マトリックスのX方向サイズ
+ * @param  {number} matrix_y - マトリックスのY方向サイズ
+ * @param  {Float32Array} matrix - コンボリューションマトリックス
+ * @param  {number} divisor - 除算値
+ * @param  {number} bias - バイアス値
+ * @param  {boolean} preserve_alpha - アルファ値を保持するか
+ * @param  {boolean} clamp - クランプするか
+ * @param  {number} color - 代替色 (32bit整数)
+ * @param  {number} alpha - アルファ値
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, matrixX: number, matrixY: number, matrix: Float32Array, divisor: number, bias: number, preserveAlpha: boolean, clamp: boolean, color: number, alpha: number, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, matrix_x: number, matrix_y: number, matrix: Float32Array, divisor: number, bias: number, preserve_alpha: boolean, clamp: boolean, color: number, alpha: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/ConvolutionFilter/FilterApplyConvolutionFilterUseCase.js

@@ -1,4 +1,5 @@
 import { ShaderSource } from "../../Shader/ShaderSource";
+import { intToStraightRGBA } from "../FilterUtil";
 /**
  * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
  */
@@ -7,33 +8,38 @@ const $entries3 = [
     { "binding": 1, "resource": null },
     { "binding": 2, "resource": null }
 ];
-/**
- * @description 32bit整数からRGB値を抽出
- */
-const intToRGBA = (color, alpha) => {
-    const r = (color >> 16 & 0xFF) / 255;
-    const g = (color >> 8 & 0xFF) / 255;
-    const b = (color & 0xFF) / 255;
-    return [r, g, b, alpha];
-};
 /**
  * @description パイプラインキャッシュ（キー: matrixX,matrixY,preserveAlpha,clamp）
  */
 const $pipelineCache = new Map();
 /**
  * @description コンボリューションフィルターを適用
+ *              Apply convolution filter
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
+ * @param  {number} matrix_x - マトリックスのX方向サイズ
+ * @param  {number} matrix_y - マトリックスのY方向サイズ
+ * @param  {Float32Array} matrix - コンボリューションマトリックス
+ * @param  {number} divisor - 除算値
+ * @param  {number} bias - バイアス値
+ * @param  {boolean} preserve_alpha - アルファ値を保持するか
+ * @param  {boolean} clamp - クランプするか
+ * @param  {number} color - 代替色 (32bit整数)
+ * @param  {number} alpha - アルファ値
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, matrixX, matrixY, matrix, divisor, bias, preserveAlpha, clamp, color, alpha, config) => {
+export const execute = (source_attachment, matrix_x, matrix_y, matrix, divisor, bias, preserve_alpha, clamp, color, alpha, config) => {
     const { device, commandEncoder, frameBufferManager, textureManager } = config;
-    const width = sourceAttachment.width;
-    const height = sourceAttachment.height;
+    const width = source_attachment.width;
+    const height = source_attachment.height;
     // 出力アタッチメントを作成
     const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
     // パイプラインをキャッシュから取得または作成
-    const cacheKey = `${matrixX},${matrixY},${preserveAlpha},${clamp}`;
+    const cacheKey = `${matrix_x},${matrix_y},${preserve_alpha},${clamp}`;
     let cached = $pipelineCache.get(cacheKey);
     if (!cached) {
-        const shaderCode = ShaderSource.getConvolutionFilterFragmentShader(matrixX, matrixY, preserveAlpha, clamp);
+        const shaderCode = ShaderSource.getConvolutionFilterFragmentShader(matrix_x, matrix_y, preserve_alpha, clamp);
         const shaderModule = device.createShaderModule({ "code": shaderCode });
         const bindGroupLayout = device.createBindGroupLayout({
             "entries": [
@@ -94,9 +100,9 @@ export const execute = (sourceAttachment, matrixX, matrixY, matrix, divisor, bia
     // サンプラーを作成
     const sampler = textureManager.createSampler("convolution_sampler", true);
     // ユニフォームバッファを作成
-    const matrixSize = matrixX * matrixY;
+    const matrixSize = matrix_x * matrix_y;
     const matrixArraySize = Math.ceil(matrixSize / 4);
-    const [r, g, b, a] = intToRGBA(color, alpha);
+    const [r, g, b, a] = intToStraightRGBA(color, alpha);
     // マトリクスを4要素ごとにまとめる
     const paddedMatrix = new Float32Array(matrixArraySize * 4);
     for (let i = 0; i < matrixSize; i++) {
@@ -128,7 +134,7 @@ export const execute = (sourceAttachment, matrixX, matrixY, matrix, divisor, bia
     // バインドグループを作成
     $entries3[0].resource.buffer = uniformBuffer;
     $entries3[1].resource = sampler;
-    $entries3[2].resource = sourceAttachment.texture.view;
+    $entries3[2].resource = source_attachment.texture.view;
     const bindGroup = device.createBindGroup({
         "layout": cached.bindGroupLayout,
         "entries": $entries3

package/src/Filter/DisplacementMapFilter/FilterApplyDisplacementMapFilterUseCase.d.ts

@@ -2,5 +2,24 @@ import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import type { IFilterConfig } from "../../interface/IFilterConfig";
 /**
  * @description ディスプレイスメントマップフィルターを適用
+ *              Apply displacement map filter
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
+ * @param  {Float32Array} _matrix - 変換行列（未使用）
+ * @param  {Uint8Array} bitmap_buffer - ビットマップバッファ
+ * @param  {number} bitmap_width - ビットマップ幅
+ * @param  {number} bitmap_height - ビットマップ高さ
+ * @param  {number} map_point_x - マップポイントX座標
+ * @param  {number} map_point_y - マップポイントY座標
+ * @param  {number} component_x - X方向コンポーネント
+ * @param  {number} component_y - Y方向コンポーネント
+ * @param  {number} scale_x - X方向スケール
+ * @param  {number} scale_y - Y方向スケール
+ * @param  {number} mode - ディスプレイスメントモード
+ * @param  {number} color - 代替色 (32bit整数)
+ * @param  {number} alpha - アルファ値
+ * @param  {number} _device_pixel_ratio - デバイスピクセル比（未使用）
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, _matrix: Float32Array, bitmapBuffer: Uint8Array, bitmapWidth: number, bitmapHeight: number, mapPointX: number, mapPointY: number, componentX: number, componentY: number, scaleX: number, scaleY: number, mode: number, color: number, alpha: number, _devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, _matrix: Float32Array, bitmap_buffer: Uint8Array, bitmap_width: number, bitmap_height: number, map_point_x: number, map_point_y: number, component_x: number, component_y: number, scale_x: number, scale_y: number, mode: number, color: number, alpha: number, _device_pixel_ratio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/DisplacementMapFilter/FilterApplyDisplacementMapFilterUseCase.js

@@ -1,4 +1,5 @@
 import { ShaderSource } from "../../Shader/ShaderSource";
+import { intToPremultipliedRGBA } from "../FilterUtil";
 /**
  * @description プリアロケートされたFloat32Array (サイズ12: 最大48バイト)
  */
@@ -12,43 +13,53 @@ 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 パイプラインキャッシュ（キー: componentX,componentY,mode）
  */
 const $pipelineCache = new Map();
 /**
  * @description ディスプレイスメントマップフィルターを適用
+ *              Apply displacement map filter
+ *
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ（アタッチメント）
+ * @param  {Float32Array} _matrix - 変換行列（未使用）
+ * @param  {Uint8Array} bitmap_buffer - ビットマップバッファ
+ * @param  {number} bitmap_width - ビットマップ幅
+ * @param  {number} bitmap_height - ビットマップ高さ
+ * @param  {number} map_point_x - マップポイントX座標
+ * @param  {number} map_point_y - マップポイントY座標
+ * @param  {number} component_x - X方向コンポーネント
+ * @param  {number} component_y - Y方向コンポーネント
+ * @param  {number} scale_x - X方向スケール
+ * @param  {number} scale_y - Y方向スケール
+ * @param  {number} mode - ディスプレイスメントモード
+ * @param  {number} color - 代替色 (32bit整数)
+ * @param  {number} alpha - アルファ値
+ * @param  {number} _device_pixel_ratio - デバイスピクセル比（未使用）
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, _matrix, bitmapBuffer, bitmapWidth, bitmapHeight, mapPointX, mapPointY, componentX, componentY, scaleX, scaleY, mode, color, alpha, _devicePixelRatio, config) => {
+export const execute = (source_attachment, _matrix, bitmap_buffer, bitmap_width, bitmap_height, map_point_x, map_point_y, component_x, component_y, scale_x, scale_y, mode, color, alpha, _device_pixel_ratio, config) => {
     const { device, commandEncoder, frameBufferManager, textureManager } = config;
-    const width = sourceAttachment.width;
-    const height = sourceAttachment.height;
+    const width = source_attachment.width;
+    const height = source_attachment.height;
     // WebGL版と同じ: baseWidth/baseHeightはビットマップサイズを使用
-    const baseWidth = bitmapWidth;
-    const baseHeight = bitmapHeight;
+    const baseWidth = bitmap_width;
+    const baseHeight = bitmap_height;
     // 出力アタッチメントを作成
     const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
     // マップテクスチャを作成
     const mapTexture = device.createTexture({
-        "size": { "width": bitmapWidth, "height": bitmapHeight },
+        "size": { "width": bitmap_width, "height": bitmap_height },
         "format": "rgba8unorm",
         "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
     });
-    device.queue.writeTexture({ "texture": mapTexture }, bitmapBuffer.buffer, { "bytesPerRow": bitmapWidth * 4, "offset": bitmapBuffer.byteOffset }, { "width": bitmapWidth, "height": bitmapHeight });
+    device.queue.writeTexture({ "texture": mapTexture }, bitmap_buffer.buffer, { "bytesPerRow": bitmap_width * 4, "offset": bitmap_buffer.byteOffset }, { "width": bitmap_width, "height": bitmap_height });
     // パイプラインをキャッシュから取得または作成
-    const cacheKey = `${componentX},${componentY},${mode}`;
+    const cacheKey = `${component_x},${component_y},${mode}`;
     let cached = $pipelineCache.get(cacheKey);
     if (!cached) {
-        const fragmentShaderCode = ShaderSource.getDisplacementMapFilterFragmentShader(componentX, componentY, mode);
+        const fragmentShaderCode = ShaderSource.getDisplacementMapFilterFragmentShader(component_x, component_y, mode);
         const vertexShaderModule = device.createShaderModule({
             "code": ShaderSource.getBlurFilterVertexShader()
         });
@@ -122,20 +133,20 @@ export const execute = (sourceAttachment, _matrix, bitmapBuffer, bitmapWidth, bi
     const needsSubstituteColor = mode === 1;
     const uniformSize = needsSubstituteColor ? 48 : 32;
     // uvToStScale
-    $uniform12[0] = baseWidth / bitmapWidth;
-    $uniform12[1] = baseHeight / bitmapHeight;
+    $uniform12[0] = baseWidth / bitmap_width;
+    $uniform12[1] = baseHeight / bitmap_height;
     // uvToStOffset
-    $uniform12[2] = mapPointX / bitmapWidth;
-    $uniform12[3] = (baseHeight - bitmapHeight - mapPointY) / bitmapHeight;
+    $uniform12[2] = map_point_x / bitmap_width;
+    $uniform12[3] = (baseHeight - bitmap_height - map_point_y) / bitmap_height;
     // scale
-    $uniform12[4] = scaleX / baseWidth;
-    $uniform12[5] = scaleY / baseHeight;
+    $uniform12[4] = scale_x / baseWidth;
+    $uniform12[5] = scale_y / baseHeight;
     // padding
     $uniform12[6] = 0;
     $uniform12[7] = 0;
     // substituteColor (mode === 1 の場合)
     if (needsSubstituteColor) {
-        const [r, g, b, a] = intToRGBA(color, alpha);
+        const [r, g, b, a] = intToPremultipliedRGBA(color, alpha);
         $uniform12[8] = r;
         $uniform12[9] = g;
         $uniform12[10] = b;
@@ -153,7 +164,7 @@ export const execute = (sourceAttachment, _matrix, bitmapBuffer, bitmapWidth, bi
     // バインドグループを作成
     $entries4[0].resource.buffer = uniformBuffer;
     $entries4[1].resource = sampler;
-    $entries4[2].resource = sourceAttachment.texture.view;
+    $entries4[2].resource = source_attachment.texture.view;
     $entries4[3].resource = mapTexture.createView();
     const bindGroup = device.createBindGroup({
         "layout": cached.bindGroupLayout,

package/src/Filter/DropShadowFilter/FilterApplyDropShadowFilterUseCase.d.ts

@@ -4,21 +4,21 @@ import type { IFilterConfig } from "../../interface/IFilterConfig";
  * @description ドロップシャドウフィルターを適用
  *              Apply drop shadow filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ
  * @param  {Float32Array} matrix - 変換行列
  * @param  {number} distance - シャドウの距離
  * @param  {number} angle - シャドウの角度（度）
  * @param  {number} color - シャドウ色 (32bit整数)
  * @param  {number} alpha - アルファ
- * @param  {number} blurX - X方向ブラー量
- * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} blur_x - X方向ブラー量
+ * @param  {number} blur_y - Y方向ブラー量
  * @param  {number} strength - シャドウ強度
  * @param  {number} quality - クオリティ
  * @param  {boolean} inner - インナーシャドウ
  * @param  {boolean} knockout - ノックアウトモード
- * @param  {boolean} hideObject - 元オブジェクトを隠す
- * @param  {number} devicePixelRatio - デバイスピクセル比
- * @param  {IDropShadowConfig} config - WebGPUリソース設定
+ * @param  {boolean} hide_object - 元オブジェクトを隠す
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, color: number, alpha: number, blurX: number, blurY: number, strength: number, quality: number, inner: boolean, knockout: boolean, hideObject: boolean, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;
+export declare const execute: (source_attachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, color: number, alpha: number, blur_x: number, blur_y: number, strength: number, quality: number, inner: boolean, knockout: boolean, hide_object: boolean, device_pixel_ratio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/DropShadowFilter/FilterApplyDropShadowFilterUseCase.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 (サイズ16)
  */
@@ -17,45 +14,36 @@ 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 ドロップシャドウフィルターを適用
  *              Apply drop shadow filter
  *
- * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {IAttachmentObject} source_attachment - 入力テクスチャ
  * @param  {Float32Array} matrix - 変換行列
  * @param  {number} distance - シャドウの距離
  * @param  {number} angle - シャドウの角度（度）
  * @param  {number} color - シャドウ色 (32bit整数)
  * @param  {number} alpha - アルファ
- * @param  {number} blurX - X方向ブラー量
- * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} blur_x - X方向ブラー量
+ * @param  {number} blur_y - Y方向ブラー量
  * @param  {number} strength - シャドウ強度
  * @param  {number} quality - クオリティ
  * @param  {boolean} inner - インナーシャドウ
  * @param  {boolean} knockout - ノックアウトモード
- * @param  {boolean} hideObject - 元オブジェクトを隠す
- * @param  {number} devicePixelRatio - デバイスピクセル比
- * @param  {IDropShadowConfig} config - WebGPUリソース設定
+ * @param  {boolean} hide_object - 元オブジェクトを隠す
+ * @param  {number} device_pixel_ratio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
  * @return {IAttachmentObject} - フィルター適用後のアタッチメント
  */
-export const execute = (sourceAttachment, matrix, distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject, devicePixelRatio, config) => {
+export const execute = (source_attachment, matrix, distance, angle, color, alpha, blur_x, blur_y, strength, quality, inner, knockout, hide_object, 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 blurAttachment = filterApplyBlurFilterUseCase(sourceAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    const blurAttachment = filterApplyBlurFilterUseCase(source_attachment, matrix, blur_x, blur_y, quality, device_pixel_ratio, config);
     const blurWidth = blurAttachment.width;
     const blurHeight = blurAttachment.height;
     const blurOffsetX = $offset.x;
@@ -67,8 +55,8 @@ export const execute = (sourceAttachment, matrix, distance, angle, color, alpha,
     const yScale = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
     // シャドウのオフセットを計算
     const radian = angle * DEG_TO_RAD;
-    const shadowX = Math.cos(radian) * distance * (xScale / devicePixelRatio);
-    const shadowY = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    const shadowX = Math.cos(radian) * distance * (xScale / device_pixel_ratio);
+    const shadowY = Math.sin(radian) * distance * (yScale / device_pixel_ratio);
     // 出力キャンバスのサイズを計算
     const w = inner ? baseWidth : blurWidth + Math.max(0, Math.abs(shadowX) - offsetDiffX);
     const h = inner ? baseHeight : blurHeight + Math.max(0, Math.abs(shadowY) - offsetDiffY);
@@ -86,11 +74,11 @@ export const execute = (sourceAttachment, matrix, distance, angle, color, alpha,
     // タイプとノックアウト状態を決定
     const isInner = inner;
     let isKnockout = knockout;
-    let isHideObject = hideObject;
+    let isHideObject = hide_object;
     if (inner) {
-        isKnockout = knockout || hideObject;
+        isKnockout = knockout || hide_object;
     }
-    else if (!knockout && hideObject) {
+    else if (!knockout && hide_object) {
         // フルモード（シャドウのみ表示）
         isKnockout = true;
         isHideObject = true;
@@ -104,7 +92,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, color, alpha,
     if (!pipeline || !bindGroupLayout) {
         console.error("[WebGPU DropShadowFilter] Pipeline not found");
         frameBufferManager.releaseTemporaryAttachment(blurAttachment);
-        return sourceAttachment;
+        return source_attachment;
     }
     // サンプラーを作成
     const sampler = textureManager.createSampler("drop_shadow_sampler", true);
@@ -119,7 +107,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, color, alpha,
     // knockout: f32 (4 bytes)
     // hideObject: f32 (4 bytes)
     // Total: 64 bytes
-    const [r, g, b, a] = intToRGBA(color, alpha);
+    const [r, g, b, a] = intToPremultipliedRGBA(color, alpha);
     // WebGL版と同じUV変換方式:
     // uv = texCoord * scale - offset
     // WebGPU: texCoord.y=0がトップ、テクスチャY=0がトップ（Y-flip補正済み）
@@ -161,7 +149,7 @@ export const execute = (sourceAttachment, matrix, distance, angle, color, alpha,
     $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/FilterGradientLUTCache.js

@@ -12,6 +12,8 @@
 let $filterGradientAttachment = null;
 /**
  * @description GPUDeviceの参照
+ *              Reference to GPUDevice
+ * @type {GPUDevice | null}
  * @private
  */
 let $device = null;

package/src/Filter/FilterUtil.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @description 度数法からラジアンへの変換係数
+ *              Conversion factor from degrees to radians
+ */
+export declare const DEG_TO_RAD: number;
+/**
+ * @description 32bit整数カラーからプリマルチプライドアルファRGBA値を抽出
+ *              Extract premultiplied alpha RGBA values from 32bit integer color
+ *
+ * @param  {number} color - 32bit整数カラー値
+ * @param  {number} alpha - アルファ値 (0-1)
+ * @return {[number, number, number, number]} - [r, g, b, a] (プリマルチプライドアルファ)
+ */
+export declare const intToPremultipliedRGBA: (color: number, alpha: number) => [number, number, number, number];
+/**
+ * @description 32bit整数カラーからストレートRGBA値を抽出
+ *              Extract straight (non-premultiplied) RGBA values from 32bit integer color
+ *
+ * @param  {number} color - 32bit整数カラー値
+ * @param  {number} alpha - アルファ値 (0-1)
+ * @return {[number, number, number, number]} - [r, g, b, a] (ストレート)
+ */
+export declare const intToStraightRGBA: (color: number, alpha: number) => [number, number, number, number];

package/src/Filter/FilterUtil.js

@@ -0,0 +1,33 @@
+/**
+ * @description 度数法からラジアンへの変換係数
+ *              Conversion factor from degrees to radians
+ */
+export const DEG_TO_RAD = Math.PI / 180;
+/**
+ * @description 32bit整数カラーからプリマルチプライドアルファRGBA値を抽出
+ *              Extract premultiplied alpha RGBA values from 32bit integer color
+ *
+ * @param  {number} color - 32bit整数カラー値
+ * @param  {number} alpha - アルファ値 (0-1)
+ * @return {[number, number, number, number]} - [r, g, b, a] (プリマルチプライドアルファ)
+ */
+export const intToPremultipliedRGBA = (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 32bit整数カラーからストレートRGBA値を抽出
+ *              Extract straight (non-premultiplied) RGBA values from 32bit integer color
+ *
+ * @param  {number} color - 32bit整数カラー値
+ * @param  {number} alpha - アルファ値 (0-1)
+ * @return {[number, number, number, number]} - [r, g, b, a] (ストレート)
+ */
+export const intToStraightRGBA = (color, alpha) => {
+    const r = (color >> 16 & 0xFF) / 255;
+    const g = (color >> 8 & 0xFF) / 255;
+    const b = (color & 0xFF) / 255;
+    return [r, g, b, alpha];
+};