@next2d/webgpu 3.0.0

package/src/FillTexturePool.d.ts

@@ -0,0 +1,6 @@
+export declare const $getOrCreateView: (texture: GPUTexture) => GPUTextureView;
+export declare const $acquireFillTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+export declare const $releaseFillTexture: (texture: GPUTexture) => void;
+export declare const $acquireRenderTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+export declare const $releaseRenderTexture: (texture: GPUTexture) => void;
+export declare const $clearFillTexturePool: () => void;

package/src/FillTexturePool.js

@@ -0,0 +1,72 @@
+// GPUTexture → GPUTextureView キャッシュ（createView()呼び出し削減）
+const $viewCache = new WeakMap();
+export const $getOrCreateView = (texture) => {
+    let view = $viewCache.get(texture);
+    if (!view) {
+        view = texture.createView();
+        $viewCache.set(texture, view);
+    }
+    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;
+const $pool = new Map();
+const $renderPool = new Map();
+export const $acquireFillTexture = (device, width, height) => {
+    const key = `${width}_${height}`;
+    const list = $pool.get(key);
+    if (list && list.length > 0) {
+        return list.pop();
+    }
+    return device.createTexture({
+        "size": { width, height },
+        "format": "rgba8unorm",
+        "usage": FILL_TEXTURE_USAGE
+    });
+};
+export const $releaseFillTexture = (texture) => {
+    const key = `${texture.width}_${texture.height}`;
+    let list = $pool.get(key);
+    if (!list) {
+        list = [];
+        $pool.set(key, list);
+    }
+    list.push(texture);
+};
+export const $acquireRenderTexture = (device, width, height) => {
+    const key = `${width}_${height}`;
+    const list = $renderPool.get(key);
+    if (list && list.length > 0) {
+        return list.pop();
+    }
+    return device.createTexture({
+        "size": { width, height },
+        "format": "rgba8unorm",
+        "usage": RENDER_TEXTURE_USAGE
+    });
+};
+export const $releaseRenderTexture = (texture) => {
+    const key = `${texture.width}_${texture.height}`;
+    let list = $renderPool.get(key);
+    if (!list) {
+        list = [];
+        $renderPool.set(key, list);
+    }
+    list.push(texture);
+};
+export const $clearFillTexturePool = () => {
+    for (const [, list] of $pool) {
+        for (const texture of list) {
+            texture.destroy();
+        }
+    }
+    $pool.clear();
+    for (const [, list] of $renderPool) {
+        for (const texture of list) {
+            texture.destroy();
+        }
+    }
+    $renderPool.clear();
+};

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

@@ -0,0 +1,10 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description ベベルフィルターを適用
+ *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
+ *
+ *              UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
+ *              合成時のcopyTextureToTextureと一時テクスチャを使用しない最適化版。
+ */
+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;

package/src/Filter/BevelFilter/FilterApplyBevelFilterUseCase.js

@@ -0,0 +1,214 @@
+import { $offset } from "../FilterOffset";
+import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
+/**
+ * @description 度からラジアンへの変換係数
+ */
+const DEG_TO_RAD = Math.PI / 180;
+/**
+ * @description プリアロケートされたFloat32Array
+ */
+const $uniform8 = new Float32Array(8);
+const $uniform20 = new Float32Array(20);
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
+ */
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+/**
+ * @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 ベベルフィルターを適用
+ *              WebGL版と同様に、erase前処理で差分テクスチャを作成してからブラーを適用
+ *
+ *              UV変換方式で元テクスチャとブラーテクスチャを直接サンプリング。
+ *              合成時のcopyTextureToTextureと一時テクスチャを使用しない最適化版。
+ */
+export const execute = (sourceAttachment, matrix, distance, angle, highlightColor, highlightAlpha, shadowColor, shadowAlpha, 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]);
+    // オフセットを計算（WebGL版と同じ）
+    const radian = angle * DEG_TO_RAD;
+    const x = Math.cos(radian) * distance * (xScale / devicePixelRatio);
+    const y = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    // === Erase前処理：差分テクスチャを作成 ===
+    const eraseAttachment = frameBufferManager.createTemporaryAttachment(baseWidth, baseHeight);
+    // Step 1: ソーステクスチャを元の位置にコピー（erase前処理のcopyTextureToTextureは残す）
+    commandEncoder.copyTextureToTexture({
+        "texture": sourceAttachment.texture.resource,
+        "origin": { "x": 0, "y": 0, "z": 0 }
+    }, {
+        "texture": eraseAttachment.texture.resource,
+        "origin": { "x": 0, "y": 0, "z": 0 }
+    }, {
+        "width": baseWidth,
+        "height": baseHeight
+    });
+    // Step 2: オフセット位置からサンプルしてerase描画
+    const erasePipeline = pipelineManager.getPipeline("texture_erase");
+    const eraseBindGroupLayout = pipelineManager.getBindGroupLayout("texture_copy");
+    if (erasePipeline && eraseBindGroupLayout) {
+        const eraseSampler = textureManager.createSampler("erase_sampler", true);
+        const offsetX = x * 2 / baseWidth;
+        const offsetY = y * 2 / baseHeight;
+        $uniform8[0] = 1.0;
+        $uniform8[1] = 1.0;
+        $uniform8[2] = offsetX;
+        $uniform8[3] = offsetY;
+        $uniform8[4] = 0;
+        $uniform8[5] = 0;
+        $uniform8[6] = 0;
+        $uniform8[7] = 0;
+        const eraseUniformBuffer = config.bufferManager
+            ? config.bufferManager.acquireAndWriteUniformBuffer($uniform8)
+            : device.createBuffer({
+                "size": $uniform8.byteLength,
+                "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+            });
+        if (!config.bufferManager) {
+            device.queue.writeBuffer(eraseUniformBuffer, 0, $uniform8);
+        }
+        $entries3[0].resource.buffer = eraseUniformBuffer;
+        $entries3[1].resource = eraseSampler;
+        $entries3[2].resource = sourceAttachment.texture.view;
+        const eraseBindGroup = device.createBindGroup({
+            "layout": eraseBindGroupLayout,
+            "entries": $entries3
+        });
+        const erasePassDescriptor = frameBufferManager.createRenderPassDescriptor(eraseAttachment.texture.view, 0, 0, 0, 0, "load");
+        const erasePassEncoder = commandEncoder.beginRenderPass(erasePassDescriptor);
+        erasePassEncoder.setPipeline(erasePipeline);
+        erasePassEncoder.setBindGroup(0, eraseBindGroup);
+        erasePassEncoder.draw(6, 1, 0, 0);
+        erasePassEncoder.end();
+    }
+    // === 差分テクスチャにブラーを適用 ===
+    const blurAttachment = filterApplyBlurFilterUseCase(eraseAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    // eraseアタッチメントを解放
+    frameBufferManager.releaseTemporaryAttachment(eraseAttachment);
+    const blurWidth = blurAttachment.width;
+    const blurHeight = blurAttachment.height;
+    // 出力サイズを計算
+    const absX = Math.abs(x);
+    const absY = Math.abs(y);
+    const isInner = type === 1;
+    const bevelWidth = Math.ceil(blurWidth + absX * 2);
+    const bevelHeight = Math.ceil(blurHeight + absY * 2);
+    const width = isInner ? baseWidth : bevelWidth;
+    const height = isInner ? baseHeight : bevelHeight;
+    // オフセット差分を計算
+    const blurOffsetFromBase = (blurWidth - baseWidth) / 2;
+    const blurOffsetFromBaseY = (blurHeight - baseHeight) / 2;
+    // UV変換パラメータ計算（GradientBevelFilterと同じパターン）
+    const baseTextureX = isInner ? 0 : Math.floor(absX + blurOffsetFromBase);
+    const baseTextureY = isInner ? 0 : Math.floor(absY + blurOffsetFromBaseY);
+    const blurTextureX = isInner ? Math.floor(-blurOffsetFromBase - x) : Math.floor(absX - x);
+    const blurTextureY = isInner ? Math.floor(-blurOffsetFromBaseY - y) : Math.floor(absY - 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;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    const pipeline = pipelineManager.getFilterPipeline("bevel_filter", {
+        "BEVEL_TYPE": type,
+        "IS_KNOCKOUT": knockout ? 1 : 0
+    });
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("bevel_filter");
+    if (!pipeline || !bindGroupLayout) {
+        console.error("[WebGPU BevelFilter] Pipeline not found");
+        frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+        return sourceAttachment;
+    }
+    // サンプラーを作成
+    const sampler = textureManager.createSampler("bevel_sampler", true);
+    // ユニフォームバッファを作成
+    // highlightColor: vec4<f32> (16 bytes)
+    // shadowColor: vec4<f32> (16 bytes)
+    // strength, inner, knockout, bevelType (16 bytes)
+    // 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);
+    $uniform20[0] = hr;
+    $uniform20[1] = hg;
+    $uniform20[2] = hb;
+    $uniform20[3] = ha;
+    $uniform20[4] = sr;
+    $uniform20[5] = sg;
+    $uniform20[6] = sb;
+    $uniform20[7] = sa;
+    $uniform20[8] = strength;
+    $uniform20[9] = isInner ? 1.0 : 0.0;
+    $uniform20[10] = knockout ? 1.0 : 0.0;
+    $uniform20[11] = type;
+    $uniform20[12] = baseScaleX;
+    $uniform20[13] = baseScaleY;
+    $uniform20[14] = baseOffsetUVX;
+    $uniform20[15] = baseOffsetUVY;
+    $uniform20[16] = blurScaleX;
+    $uniform20[17] = blurScaleY;
+    $uniform20[18] = blurOffsetUVX;
+    $uniform20[19] = blurOffsetUVY;
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform20)
+        : device.createBuffer({
+            "size": $uniform20.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, $uniform20);
+    }
+    // バインドグループを作成（元テクスチャとブラーテクスチャを直接バインド）
+    $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);
+    // オフセットを更新（WebGL版と同じ: 常にbaseOffset+baseTextureXYに設定）
+    $offset.x = baseOffsetX + baseTextureX;
+    $offset.y = baseOffsetY + baseTextureY;
+    return destAttachment;
+};

package/src/Filter/BevelFilterShader.d.ts

@@ -0,0 +1,2 @@
+export declare const getBevelFilterFragmentShader: (type: string, knockout: boolean, isGradient: boolean) => string;
+export declare const getBevelFilterShaderKey: (type: string, knockout: boolean, isGradient: boolean) => string;

package/src/Filter/BevelFilterShader.js

@@ -0,0 +1,107 @@
+export const getBevelFilterFragmentShader = (type, knockout, isGradient) => {
+    const isInner = type === "inner";
+    const isOuter = type === "outer";
+    const gradientBinding = isGradient ? `
+@group(0) @binding(4) var gradientTexture: texture_2d<f32>;` : "";
+    const colorCalculation = isGradient ? `
+    let gradientCoord = vec2<f32>(blurAlpha, 0.5);
+    var filterColor = textureSample(gradientTexture, sourceSampler, gradientCoord);
+` : `
+    let highlightWeight = clamp(blurAlpha * 2.0, 0.0, 1.0);
+    let shadowWeight = clamp((1.0 - blurAlpha) * 2.0, 0.0, 1.0);
+    var filterColor = uniforms.highlightColor * highlightWeight + uniforms.shadowColor * shadowWeight;
+`;
+    let typeProcessing = "";
+    if (isInner) {
+        typeProcessing = `
+    let baseAlpha = textureSample(baseTexture, sourceSampler, baseTexCoord).a;
+    filterColor = filterColor * baseAlpha;
+    ${knockout ? "let finalColor = filterColor;" : "let finalColor = mix(baseColor, filterColor, filterColor.a);"}
+`;
+    }
+    else if (isOuter) {
+        typeProcessing = `
+    let baseAlpha = textureSample(baseTexture, sourceSampler, baseTexCoord).a;
+    filterColor = filterColor * (1.0 - baseAlpha);
+    ${knockout ? "let finalColor = filterColor;" : "let finalColor = filterColor + baseColor * (1.0 - filterColor.a);"}
+`;
+    }
+    else {
+        typeProcessing = knockout ? `
+    let finalColor = filterColor;
+` : `
+    let finalColor = filterColor + baseColor * (1.0 - filterColor.a);
+`;
+    }
+    return `
+struct BevelUniforms {
+    blurTexCoordScale: vec2<f32>,
+    blurTexCoordOffset: vec2<f32>,
+    baseTexCoordScale: vec2<f32>,
+    baseTexCoordOffset: vec2<f32>,
+    strength: f32,
+    _pad1: f32,
+    _pad2: f32,
+    _pad3: f32,
+    highlightColor: vec4<f32>,
+    shadowColor: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: BevelUniforms;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var blurTexture: texture_2d<f32>;
+@group(0) @binding(3) var baseTexture: texture_2d<f32>;
+${gradientBinding}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+}
+
+@vertex
+fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 6>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>(1.0, -1.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(1.0, -1.0),
+        vec2<f32>(1.0, 1.0)
+    );
+
+    var texCoords = array<vec2<f32>, 6>(
+        vec2<f32>(0.0, 1.0),
+        vec2<f32>(1.0, 1.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(1.0, 1.0),
+        vec2<f32>(1.0, 0.0)
+    );
+
+    var output: VertexOutput;
+    output.position = vec4<f32>(positions[vertexIndex], 0.0, 1.0);
+    output.texCoord = texCoords[vertexIndex];
+    return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let blurTexCoord = input.texCoord * uniforms.blurTexCoordScale + uniforms.blurTexCoordOffset;
+    let baseTexCoord = input.texCoord * uniforms.baseTexCoordScale + uniforms.baseTexCoordOffset;
+
+    let blurColor = textureSample(blurTexture, sourceSampler, blurTexCoord);
+    var blurAlpha = blurColor.a * uniforms.strength;
+    blurAlpha = clamp(blurAlpha, 0.0, 1.0);
+
+    let baseColor = textureSample(baseTexture, sourceSampler, baseTexCoord);
+
+    ${colorCalculation}
+    ${typeProcessing}
+
+    return finalColor;
+}
+`;
+};
+export const getBevelFilterShaderKey = (type, knockout, isGradient) => {
+    return `bevel_${type}_${knockout ? "ko" : "nko"}_${isGradient ? "g" : "ng"}`;
+};

package/src/Filter/BitmapFilterShader.d.ts

@@ -0,0 +1,2 @@
+export declare const getBitmapFilterFragmentShader: (transformsBase: boolean, transformsBlur: boolean, isGlow: boolean, type: string, knockout: boolean, appliesStrength: boolean, isGradient: boolean) => string;
+export declare const getBitmapFilterShaderKey: (transformsBase: boolean, transformsBlur: boolean, isGlow: boolean, type: string, knockout: boolean, appliesStrength: boolean, isGradient: boolean) => string;

package/src/Filter/BitmapFilterShader.js

@@ -0,0 +1,207 @@
+export const getBitmapFilterFragmentShader = (transformsBase, transformsBlur, isGlow, type, knockout, appliesStrength, isGradient) => {
+    const isInner = type === "inner";
+    let textureBindingIndex = 2;
+    const blurTextureBinding = textureBindingIndex++;
+    const baseTextureBinding = transformsBase ? textureBindingIndex++ : -1;
+    const gradientTextureBinding = isGradient ? textureBindingIndex++ : -1;
+    let uniformsStruct = `struct BitmapFilterUniforms {
+`;
+    if (transformsBase) {
+        uniformsStruct += `    baseScale: vec2<f32>,
+    baseOffset: vec2<f32>,
+`;
+    }
+    if (transformsBlur) {
+        uniformsStruct += `    blurScale: vec2<f32>,
+    blurOffset: vec2<f32>,
+`;
+    }
+    if (appliesStrength) {
+        uniformsStruct += `    strength: f32,
+    _padStrength: vec3<f32>,
+`;
+    }
+    if (!isGradient) {
+        if (isGlow) {
+            uniformsStruct += `    color: vec4<f32>,
+`;
+        }
+        else {
+            uniformsStruct += `    highlightColor: vec4<f32>,
+    shadowColor: vec4<f32>,
+`;
+        }
+    }
+    uniformsStruct += "}";
+    let textureBindings = `
+@group(0) @binding(0) var<uniform> uniforms: BitmapFilterUniforms;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(${blurTextureBinding}) var blurTexture: texture_2d<f32>;`;
+    if (transformsBase) {
+        textureBindings += `
+@group(0) @binding(${baseTextureBinding}) var baseTexture: texture_2d<f32>;`;
+    }
+    if (isGradient) {
+        textureBindings += `
+@group(0) @binding(${gradientTextureBinding}) var gradientTexture: texture_2d<f32>;`;
+    }
+    let baseStatement = "";
+    if (transformsBase) {
+        baseStatement = `
+    let baseScale = uniforms.baseScale;
+    let baseOffset = uniforms.baseOffset;
+    let uv = input.texCoord * baseScale - baseOffset;
+    let base = mix(vec4<f32>(0.0), textureSample(baseTexture, sourceSampler, uv), isInside(uv));`;
+    }
+    let blurStatement = "";
+    if (transformsBlur) {
+        blurStatement = `
+    let blurScale = uniforms.blurScale;
+    let blurOffset = uniforms.blurOffset;
+    let st = input.texCoord * blurScale - blurOffset;
+    var blur = mix(vec4<f32>(0.0), textureSample(blurTexture, sourceSampler, st), isInside(st));`;
+    }
+    else {
+        blurStatement = `
+    var blur = textureSample(blurTexture, sourceSampler, input.texCoord);`;
+    }
+    let colorStatement = "";
+    if (isGlow) {
+        if (isInner) {
+            colorStatement += `
+    blur.a = 1.0 - blur.a;`;
+        }
+        if (appliesStrength) {
+            colorStatement += `
+    let strength = uniforms.strength;
+    blur.a = clamp(blur.a * strength, 0.0, 1.0);`;
+        }
+        if (isGradient) {
+            colorStatement += `
+    blur = textureSample(gradientTexture, sourceSampler, vec2<f32>(blur.a, 0.5));`;
+        }
+        else {
+            colorStatement += `
+    let color = uniforms.color;
+    blur = color * blur.a;`;
+        }
+    }
+    else {
+        if (transformsBlur) {
+            colorStatement += `
+    let pq = (vec2<f32>(1.0) - input.texCoord) * blurScale - blurOffset;
+    let blur2 = mix(vec4<f32>(0.0), textureSample(blurTexture, sourceSampler, pq), isInside(pq));`;
+        }
+        else {
+            colorStatement += `
+    let blur2 = textureSample(blurTexture, sourceSampler, vec2<f32>(1.0) - input.texCoord);`;
+        }
+        colorStatement += `
+    var highlightAlpha = blur.a - blur2.a;
+    var shadowAlpha = blur2.a - blur.a;`;
+        if (appliesStrength) {
+            colorStatement += `
+    let strength = uniforms.strength;
+    highlightAlpha = highlightAlpha * strength;
+    shadowAlpha = shadowAlpha * strength;`;
+        }
+        colorStatement += `
+    highlightAlpha = clamp(highlightAlpha, 0.0, 1.0);
+    shadowAlpha = clamp(shadowAlpha, 0.0, 1.0);`;
+        if (isGradient) {
+            colorStatement += `
+    blur = textureSample(gradientTexture, sourceSampler, vec2<f32>(
+        0.5019607843137255 - 0.5019607843137255 * shadowAlpha + 0.4980392156862745 * highlightAlpha,
+        0.5
+    ));`;
+        }
+        else {
+            colorStatement += `
+    let highlightColor = uniforms.highlightColor;
+    let shadowColor = uniforms.shadowColor;
+    blur = highlightColor * highlightAlpha + shadowColor * shadowAlpha;`;
+        }
+    }
+    let modeExpression = "";
+    switch (type) {
+        case "outer":
+            modeExpression = knockout
+                ? "blur - blur * base.a"
+                : "base + blur - blur * base.a";
+            break;
+        case "full":
+            modeExpression = knockout
+                ? "blur"
+                : "base - base * blur.a + blur";
+            break;
+        case "inner":
+        default:
+            modeExpression = "blur";
+            break;
+    }
+    const needsBase = transformsBase || (type === "outer" || type === "full" && !knockout);
+    let baseDecl = "";
+    if (needsBase && !transformsBase) {
+        baseDecl = `
+    let base = vec4<f32>(0.0);`;
+    }
+    return `
+${uniformsStruct}
+${textureBindings}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+}
+
+fn isInside(uv: vec2<f32>) -> f32 {
+    let inside = step(vec2<f32>(0.0), uv) * step(uv, vec2<f32>(1.0));
+    return inside.x * inside.y;
+}
+
+@vertex
+fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 6>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>(1.0, -1.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(1.0, -1.0),
+        vec2<f32>(1.0, 1.0)
+    );
+
+    var texCoords = array<vec2<f32>, 6>(
+        vec2<f32>(0.0, 1.0),
+        vec2<f32>(1.0, 1.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(1.0, 1.0),
+        vec2<f32>(1.0, 0.0)
+    );
+
+    var output: VertexOutput;
+    output.position = vec4<f32>(positions[vertexIndex], 0.0, 1.0);
+    output.texCoord = texCoords[vertexIndex];
+    return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+    ${baseDecl}
+    ${baseStatement}
+    ${blurStatement}
+    ${colorStatement}
+
+    return ${modeExpression};
+}
+`;
+};
+export const getBitmapFilterShaderKey = (transformsBase, transformsBlur, isGlow, type, knockout, appliesStrength, isGradient) => {
+    const key1 = transformsBase ? "y" : "n";
+    const key2 = transformsBlur ? "y" : "n";
+    const key3 = isGlow ? "g" : "b";
+    const key4 = knockout ? "k" : "n";
+    const key5 = appliesStrength ? "s" : "n";
+    const key6 = isGradient ? "gr" : "so";
+    return `bitmap_${key1}${key2}${key3}${type}${key4}${key5}${key6}`;
+};

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

@@ -0,0 +1,16 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description ブラーフィルターを適用
+ *              Apply blur filter
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} blurX - X方向のブラー量
+ * @param  {number} blurY - Y方向のブラー量
+ * @param  {number} quality - クオリティ (1-15)
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @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;