@next2d/webgpu 3.0.0

package/src/Filter/FilterGradientLUTCache.js

@@ -0,0 +1,84 @@
+/**
+ * @description フィルター用グラデーションLUTの共有アタッチメント
+ *              Shared attachment for filter gradient LUT
+ *              注意: グラデーションLUTは共有テクスチャに描画されるため、
+ *              キャッシュは使用しません。各フレームで再描画が必要です。
+ *              Note: Gradient LUT is drawn to a shared texture, so caching
+ *              is not used. Re-drawing is required each frame.
+ *
+ * @type {IAttachmentObject | null}
+ * @private
+ */
+let $filterGradientAttachment = null;
+/**
+ * @description GPUDeviceの参照
+ * @private
+ */
+let $device = null;
+/**
+ * @description GPUDeviceを設定
+ *              Set GPUDevice
+ *
+ * @param  {GPUDevice} device
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setFilterGradientLUTDevice = (device) => {
+    $device = device;
+};
+/**
+ * @description フィルター用グラデーションLUTのAttachmentObjectを返却
+ *              Returns AttachmentObject for filter gradient LUT
+ *
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export const $getFilterGradientAttachmentObject = () => {
+    if (!$filterGradientAttachment && $device) {
+        const resolution = 256;
+        // 1xN テクスチャを作成
+        const texture = $device.createTexture({
+            "size": { "width": resolution, "height": 1 },
+            "format": "rgba8unorm",
+            "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        $filterGradientAttachment = {
+            "id": -256, // フィルター用に負のIDを使用
+            "width": resolution,
+            "height": 1,
+            "clipLevel": 0,
+            "msaa": false,
+            "mask": false,
+            "color": null,
+            "texture": {
+                "id": -256,
+                "resource": texture,
+                "view": texture.createView(),
+                "width": resolution,
+                "height": 1,
+                "area": resolution,
+                "smooth": true
+            },
+            "stencil": null,
+            "msaaTexture": null,
+            "msaaStencil": null
+        };
+    }
+    return $filterGradientAttachment;
+};
+/**
+ * @description フィルター用グラデーションLUTの共有アタッチメントを破棄してクリア
+ *              Destroy and clear filter gradient LUT shared attachment
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $clearFilterGradientAttachment = () => {
+    if ($filterGradientAttachment?.texture?.resource) {
+        $filterGradientAttachment.texture.resource.destroy();
+    }
+    $filterGradientAttachment = null;
+};

package/src/Filter/FilterOffset.d.ts

@@ -0,0 +1,8 @@
+import type { IPoint } from "../interface/IPoint";
+/**
+ * @description フィルター処理のオフセット値
+ *              Offset values for filter processing
+ * @type {IPoint}
+ * @protected
+ */
+export declare const $offset: IPoint;

package/src/Filter/FilterOffset.js

@@ -0,0 +1,10 @@
+/**
+ * @description フィルター処理のオフセット値
+ *              Offset values for filter processing
+ * @type {IPoint}
+ * @protected
+ */
+export const $offset = {
+    "x": 0,
+    "y": 0
+};

package/src/Filter/GlowFilter/FilterApplyGlowFilterUseCase.d.ts

@@ -0,0 +1,24 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description グローフィルターを適用
+ *              Apply glow filter
+ *
+ * UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
+ * copyTextureToTextureと一時テクスチャを使用しない最適化版。
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} color - グロー色 (32bit整数)
+ * @param  {number} alpha - アルファ
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - グロー強度
+ * @param  {number} quality - クオリティ
+ * @param  {boolean} inner - インナーグロー
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, color: number, alpha: number, blurX: number, blurY: number, strength: number, quality: number, inner: boolean, knockout: boolean, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/GlowFilter/FilterApplyGlowFilterUseCase.js

@@ -0,0 +1,143 @@
+import { $offset } from "../FilterOffset";
+import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
+/**
+ * @description プリアロケートされたFloat32Array (サイズ16)
+ */
+const $uniform16 = new Float32Array(16);
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング4つ)
+ */
+const $entries4 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "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 glow filter
+ *
+ * UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
+ * copyTextureToTextureと一時テクスチャを使用しない最適化版。
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} color - グロー色 (32bit整数)
+ * @param  {number} alpha - アルファ
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - グロー強度
+ * @param  {number} quality - クオリティ
+ * @param  {boolean} inner - インナーグロー
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export const execute = (sourceAttachment, matrix, color, alpha, blurX, blurY, strength, quality, inner, knockout, devicePixelRatio, 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 blurAttachment = filterApplyBlurFilterUseCase(sourceAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    const blurWidth = blurAttachment.width;
+    const blurHeight = blurAttachment.height;
+    const blurOffsetX = $offset.x;
+    const blurOffsetY = $offset.y;
+    // 出力サイズを決定
+    const width = inner ? baseWidth : blurWidth;
+    const height = inner ? baseHeight : blurHeight;
+    // オフセット差分を計算
+    const offsetDiffX = blurOffsetX - baseOffsetX;
+    const offsetDiffY = blurOffsetY - baseOffsetY;
+    // UV変換パラメータ計算（GradientGlowFilterと同じパターン）
+    const baseTextureX = inner ? 0 : offsetDiffX;
+    const baseTextureY = inner ? 0 : offsetDiffY;
+    const blurTextureX = inner ? -offsetDiffX : 0;
+    const blurTextureY = inner ? -offsetDiffY : 0;
+    const baseScaleX = width / baseWidth;
+    const baseScaleY = height / baseHeight;
+    const baseOffsetUVX = baseTextureX / baseWidth;
+    const baseOffsetUVY = baseTextureY / baseHeight;
+    const blurScaleX = width / blurWidth;
+    const blurScaleY = height / blurHeight;
+    const blurOffsetUVX = blurTextureX / blurWidth;
+    const blurOffsetUVY = blurTextureY / blurHeight;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    const pipeline = pipelineManager.getFilterPipeline("glow_filter", {
+        "IS_INNER": inner ? 1 : 0,
+        "IS_KNOCKOUT": knockout ? 1 : 0
+    });
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("glow_filter");
+    if (!pipeline || !bindGroupLayout) {
+        console.error("[WebGPU GlowFilter] Pipeline not found");
+        frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+        return sourceAttachment;
+    }
+    // サンプラーを作成
+    const sampler = textureManager.createSampler("glow_sampler", true);
+    // ユニフォームバッファを作成
+    // color: vec4<f32> (16 bytes)
+    // baseScale: vec2<f32>, baseOffset: vec2<f32> (16 bytes)
+    // blurScale: vec2<f32>, blurOffset: vec2<f32> (16 bytes)
+    // strength: f32, inner: f32, knockout: f32, _padding: f32 (16 bytes)
+    // Total: 64 bytes
+    const [r, g, b, a] = intToRGBA(color, alpha);
+    $uniform16[0] = r;
+    $uniform16[1] = g;
+    $uniform16[2] = b;
+    $uniform16[3] = a;
+    $uniform16[4] = baseScaleX;
+    $uniform16[5] = baseScaleY;
+    $uniform16[6] = baseOffsetUVX;
+    $uniform16[7] = baseOffsetUVY;
+    $uniform16[8] = blurScaleX;
+    $uniform16[9] = blurScaleY;
+    $uniform16[10] = blurOffsetUVX;
+    $uniform16[11] = blurOffsetUVY;
+    $uniform16[12] = strength;
+    $uniform16[13] = inner ? 1.0 : 0.0;
+    $uniform16[14] = knockout ? 1.0 : 0.0;
+    $uniform16[15] = 0.0;
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform16)
+        : device.createBuffer({
+            "size": $uniform16.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, $uniform16);
+    }
+    // バインドグループを作成（元テクスチャとブラーテクスチャを直接バインド）
+    $entries4[0].resource.buffer = uniformBuffer;
+    $entries4[1].resource = sampler;
+    $entries4[2].resource = blurAttachment.texture.view;
+    $entries4[3].resource = sourceAttachment.texture.view;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries4
+    });
+    // レンダーパスを実行
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(destAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    // クリーンアップ
+    frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+    return destAttachment;
+};

package/src/Filter/GlowFilterShader.d.ts

@@ -0,0 +1,4 @@
+export declare class GlowFilterShader {
+    static getFragmentShader(): string;
+    static getVertexShader(): string;
+}

package/src/Filter/GlowFilterShader.js

@@ -0,0 +1,66 @@
+export class GlowFilterShader {
+    static getFragmentShader() {
+        return /* wgsl */ `
+            struct VertexOutput {
+                @builtin(position) position: vec4<f32>,
+                @location(0) texCoord: vec2<f32>,
+            }
+
+            struct GlowUniforms {
+                glowColor: vec4<f32>,
+                strength: f32,
+                inner: f32,
+                knockout: f32,
+                _padding: f32,
+            }
+
+            @group(0) @binding(0) var<uniform> uniforms: GlowUniforms;
+            @group(0) @binding(1) var textureSampler: sampler;
+            @group(0) @binding(2) var textureData: texture_2d<f32>;
+
+            @fragment
+            fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+                var originalColor = textureSample(textureData, textureSampler, input.texCoord);
+
+                let alpha = originalColor.a;
+
+                var glowColor = uniforms.glowColor * uniforms.strength * alpha;
+
+                if (uniforms.inner > 0.5) {
+                    if (uniforms.knockout > 0.5) {
+                        return glowColor;
+                    } else {
+                        return mix(originalColor, glowColor, alpha);
+                    }
+                } else {
+                    if (uniforms.knockout > 0.5) {
+                        return vec4<f32>(glowColor.rgb, glowColor.a * (1.0 - alpha));
+                    } else {
+                        return originalColor + glowColor;
+                    }
+                }
+            }
+        `;
+    }
+    static getVertexShader() {
+        return /* wgsl */ `
+            struct VertexInput {
+                @location(0) position: vec2<f32>,
+                @location(1) texCoord: vec2<f32>,
+            }
+
+            struct VertexOutput {
+                @builtin(position) position: vec4<f32>,
+                @location(0) texCoord: vec2<f32>,
+            }
+
+            @vertex
+            fn main(input: VertexInput) -> VertexOutput {
+                var output: VertexOutput;
+                output.position = vec4<f32>(input.position, 0.0, 1.0);
+                output.texCoord = input.texCoord;
+                return output;
+            }
+        `;
+    }
+}

package/src/Filter/GradientBevelFilter/FilterApplyGradientBevelFilterUseCase.d.ts

@@ -0,0 +1,29 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description グラデーションベベルフィルターを適用
+ *              Apply gradient bevel filter
+ *
+ *              WebGL版と同じフロー:
+ *              1. ベベルベーステクスチャ作成: original * (1 - shifted.a)
+ *              2. ベベルベースにブラー適用
+ *              3. UV変換方式で最終合成（isInsideでハード境界クリッピング）
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - ベベルの距離
+ * @param  {number} angle - ベベルの角度（度）
+ * @param  {Float32Array} colors - 色配列
+ * @param  {Float32Array} alphas - アルファ配列
+ * @param  {Float32Array} ratios - 比率配列
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - ベベル強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IGradientBevelConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, colors: Float32Array, alphas: Float32Array, ratios: Float32Array, blurX: number, blurY: number, strength: number, quality: number, type: number, knockout: boolean, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;

package/src/Filter/GradientBevelFilter/FilterApplyGradientBevelFilterUseCase.js

@@ -0,0 +1,216 @@
+import { $offset } from "../FilterOffset";
+import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
+import { generateFilterGradientLUT } from "../../Gradient/GradientLUTGenerator";
+/**
+ * @description 度からラジアンへの変換係数
+ */
+const DEG_TO_RAD = Math.PI / 180;
+/**
+ * @description プリアロケートされたFloat32Array
+ */
+const $uniform4 = new Float32Array(4);
+const $uniform12 = new Float32Array(12);
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
+ */
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング5つ)
+ */
+const $entries5 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null },
+    { "binding": 3, "resource": null },
+    { "binding": 4, "resource": null }
+];
+/**
+ * @description グラデーションベベルフィルターを適用
+ *              Apply gradient bevel filter
+ *
+ *              WebGL版と同じフロー:
+ *              1. ベベルベーステクスチャ作成: original * (1 - shifted.a)
+ *              2. ベベルベースにブラー適用
+ *              3. UV変換方式で最終合成（isInsideでハード境界クリッピング）
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - ベベルの距離
+ * @param  {number} angle - ベベルの角度（度）
+ * @param  {Float32Array} colors - 色配列
+ * @param  {Float32Array} alphas - アルファ配列
+ * @param  {Float32Array} ratios - 比率配列
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - ベベル強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IGradientBevelConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export const execute = (sourceAttachment, matrix, distance, angle, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout, devicePixelRatio, 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 xScale = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+    const yScale = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+    // ベベルのオフセットを計算
+    const radian = angle * DEG_TO_RAD;
+    const x = Math.cos(radian) * distance * (xScale / devicePixelRatio);
+    const y = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    // ===== Step 1: ベベルベーステクスチャ作成 =====
+    // WebGL版と同じ: original * (1 - shifted_original.a)
+    // shifted = original を (2x, 2y) ピクセル分シフトしたもの
+    const bevelBasePipeline = pipelineManager.getPipeline("bevel_base");
+    const bevelBaseLayout = pipelineManager.getBindGroupLayout("bevel_base");
+    if (!bevelBasePipeline || !bevelBaseLayout) {
+        console.error("[WebGPU GradientBevelFilter] bevel_base pipeline not found");
+        return sourceAttachment;
+    }
+    const bevelBaseAttachment = frameBufferManager.createTemporaryAttachment(baseWidth, baseHeight);
+    const bevelBaseSampler = textureManager.createSampler("bevel_base_sampler", true);
+    // UV空間でのオフセット: (2x / baseWidth, 2y / baseHeight)
+    $uniform4[0] = 2 * x / baseWidth;
+    $uniform4[1] = 2 * y / baseHeight;
+    $uniform4[2] = 0.0;
+    $uniform4[3] = 0.0;
+    const bevelBaseUniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform4)
+        : device.createBuffer({
+            "size": $uniform4.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(bevelBaseUniformBuffer, 0, $uniform4);
+    }
+    $entries3[0].resource.buffer = bevelBaseUniformBuffer;
+    $entries3[1].resource = bevelBaseSampler;
+    $entries3[2].resource = sourceAttachment.texture.view;
+    const bevelBaseBindGroup = device.createBindGroup({
+        "layout": bevelBaseLayout,
+        "entries": $entries3
+    });
+    const bevelBaseRenderPass = frameBufferManager.createRenderPassDescriptor(bevelBaseAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const bevelBaseEncoder = commandEncoder.beginRenderPass(bevelBaseRenderPass);
+    bevelBaseEncoder.setPipeline(bevelBasePipeline);
+    bevelBaseEncoder.setBindGroup(0, bevelBaseBindGroup);
+    bevelBaseEncoder.draw(6, 1, 0, 0);
+    bevelBaseEncoder.end();
+    // ===== Step 2: ベベルベースにブラー適用 =====
+    // WebGL版と同じ: bevelBaseをブラーする（元テクスチャではなく）
+    const blurAttachment = filterApplyBlurFilterUseCase(bevelBaseAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    // ベベルベースは不要になったので解放
+    frameBufferManager.releaseTemporaryAttachment(bevelBaseAttachment);
+    const blurWidth = blurAttachment.width;
+    const blurHeight = blurAttachment.height;
+    // ===== Step 3: WebGL版と同じサイズ・位置計算 =====
+    const isInner = type === 1;
+    const absX = Math.abs(x);
+    const absY = Math.abs(y);
+    const blurOffsetX = (blurWidth - baseWidth) / 2;
+    const blurOffsetY = (blurHeight - baseHeight) / 2;
+    // WebGL版と同じ: bevelWidth/bevelHeight
+    const bevelWidth = Math.ceil(blurWidth + absX * 2);
+    const bevelHeight = Math.ceil(blurHeight + absY * 2);
+    const width = isInner ? baseWidth : bevelWidth;
+    const height = isInner ? baseHeight : bevelHeight;
+    // WebGL版と同じテクスチャ位置計算
+    const baseTextureX = isInner ? 0 : absX + blurOffsetX;
+    const baseTextureY = isInner ? 0 : absY + blurOffsetY;
+    const blurTextureX = isInner ? -blurOffsetX - x : absX - x;
+    const blurTextureY = isInner ? -blurOffsetY - y : absY - y;
+    // ===== Step 4: グラデーションLUT生成 =====
+    // 注意: 共有テクスチャ+queue.writeTextureは使用しない。
+    // queue.writeTextureはcommandEncoder外で即座に実行されるため、
+    // 同一フレーム内の複数GradientBevelFilter適用時に最後の書き込みで上書きされる。
+    // 各呼び出しで専用テクスチャを作成してこのタイミング問題を回避する。
+    const lutData = generateFilterGradientLUT(ratios, colors, alphas);
+    const lutTexture = device.createTexture({
+        "size": { "width": 256, "height": 1 },
+        "format": "rgba8unorm",
+        "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    device.queue.writeTexture({ "texture": lutTexture }, lutData.buffer, { "bytesPerRow": 256 * 4, "offset": lutData.byteOffset }, { "width": 256, "height": 1 });
+    const lutView = lutTexture.createView();
+    // ===== Step 5: UV変換パラメータ計算 =====
+    // WebGL版と同じ: uv = v_coord * scale - offset
+    // WebGPU: texCoord.y=0がトップ（Y-flip補正済み）
+    //         → offset_y = textureY / textureHeight（WebGLのY反転不要）
+    const baseScaleX = width / baseWidth;
+    const baseScaleY = height / baseHeight;
+    const baseOffsetUVX = baseTextureX / baseWidth;
+    const baseOffsetUVY = baseTextureY / baseHeight;
+    const blurScaleX = width / blurWidth;
+    const blurScaleY = height / blurHeight;
+    const blurOffsetUVX = blurTextureX / blurWidth;
+    const blurOffsetUVY = blurTextureY / blurHeight;
+    // ===== Step 6: 最終合成パス =====
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    const pipeline = pipelineManager.getFilterPipeline("gradient_bevel_filter", {
+        "BEVEL_TYPE": type,
+        "IS_KNOCKOUT": knockout ? 1 : 0
+    });
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("gradient_bevel_filter");
+    if (!pipeline || !bindGroupLayout) {
+        console.error("[WebGPU GradientBevelFilter] Pipeline not found");
+        frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+        return sourceAttachment;
+    }
+    const sampler = textureManager.createSampler("gradient_bevel_sampler", true);
+    // ユニフォームバッファ: 12 floats = 48 bytes
+    $uniform12[0] = strength;
+    $uniform12[1] = isInner ? 1.0 : 0.0;
+    $uniform12[2] = knockout ? 1.0 : 0.0;
+    $uniform12[3] = type;
+    $uniform12[4] = baseScaleX;
+    $uniform12[5] = baseScaleY;
+    $uniform12[6] = baseOffsetUVX;
+    $uniform12[7] = baseOffsetUVY;
+    $uniform12[8] = blurScaleX;
+    $uniform12[9] = blurScaleY;
+    $uniform12[10] = blurOffsetUVX;
+    $uniform12[11] = blurOffsetUVY;
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform12)
+        : device.createBuffer({
+            "size": $uniform12.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, $uniform12);
+    }
+    // バインドグループを作成（オリジナルテクスチャを直接使用）
+    $entries5[0].resource.buffer = uniformBuffer;
+    $entries5[1].resource = sampler;
+    $entries5[2].resource = blurAttachment.texture.view;
+    $entries5[3].resource = sourceAttachment.texture.view;
+    $entries5[4].resource = lutView;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries5
+    });
+    // レンダーパスを実行
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(destAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    // クリーンアップ（lutTextureはsubmit後に遅延破棄）
+    config.frameTextures.push(lutTexture);
+    frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+    // WebGL版と同じオフセット更新
+    $offset.x = baseOffsetX + baseTextureX;
+    $offset.y = baseOffsetY + baseTextureY;
+    return destAttachment;
+};

package/src/Filter/GradientGlowFilter/FilterApplyGradientGlowFilterUseCase.d.ts

@@ -0,0 +1,29 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description グラデーショングローフィルターを適用
+ *              Apply gradient glow filter
+ *
+ *              WebGL版と同じフロー:
+ *              1. ブラー適用
+ *              2. グラデーションLUT生成（専用テクスチャ）
+ *              3. UV変換方式で最終合成（isInsideでハード境界クリッピング）
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - グローの距離
+ * @param  {number} angle - グローの角度（度）
+ * @param  {Float32Array} colors - 色配列
+ * @param  {Float32Array} alphas - アルファ配列
+ * @param  {Float32Array} ratios - 比率配列
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - グロー強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export declare const execute: (sourceAttachment: IAttachmentObject, matrix: Float32Array, distance: number, angle: number, colors: Float32Array, alphas: Float32Array, ratios: Float32Array, blurX: number, blurY: number, strength: number, quality: number, type: number, knockout: boolean, devicePixelRatio: number, config: IFilterConfig) => IAttachmentObject;