@next2d/webgpu 3.0.0

package/src/Filter/DisplacementMapFilter/FilterApplyDisplacementMapFilterUseCase.js

@@ -0,0 +1,172 @@
+import { ShaderSource } from "../../Shader/ShaderSource";
+/**
+ * @description プリアロケートされたFloat32Array (サイズ12: 最大48バイト)
+ */
+const $uniform12 = new Float32Array(12);
+/**
+ * @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 パイプラインキャッシュ（キー: componentX,componentY,mode）
+ */
+const $pipelineCache = new Map();
+/**
+ * @description ディスプレイスメントマップフィルターを適用
+ */
+export const execute = (sourceAttachment, _matrix, bitmapBuffer, bitmapWidth, bitmapHeight, mapPointX, mapPointY, componentX, componentY, scaleX, scaleY, mode, color, alpha, _devicePixelRatio, config) => {
+    const { device, commandEncoder, frameBufferManager, textureManager } = config;
+    const width = sourceAttachment.width;
+    const height = sourceAttachment.height;
+    // WebGL版と同じ: baseWidth/baseHeightはビットマップサイズを使用
+    const baseWidth = bitmapWidth;
+    const baseHeight = bitmapHeight;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    // マップテクスチャを作成
+    const mapTexture = device.createTexture({
+        "size": { "width": bitmapWidth, "height": bitmapHeight },
+        "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 });
+    // パイプラインをキャッシュから取得または作成
+    const cacheKey = `${componentX},${componentY},${mode}`;
+    let cached = $pipelineCache.get(cacheKey);
+    if (!cached) {
+        const fragmentShaderCode = ShaderSource.getDisplacementMapFilterFragmentShader(componentX, componentY, mode);
+        const vertexShaderModule = device.createShaderModule({
+            "code": ShaderSource.getBlurFilterVertexShader()
+        });
+        const fragmentShaderModule = device.createShaderModule({
+            "code": fragmentShaderCode
+        });
+        const bindGroupLayout = device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                },
+                {
+                    "binding": 3,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        const pipelineLayout = device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const pipeline = device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        cached = { pipeline, bindGroupLayout };
+        $pipelineCache.set(cacheKey, cached);
+    }
+    // サンプラーを作成
+    const sampler = textureManager.createSampler("displacement_sampler", true);
+    // ユニフォームバッファを作成
+    const needsSubstituteColor = mode === 1;
+    const uniformSize = needsSubstituteColor ? 48 : 32;
+    // uvToStScale
+    $uniform12[0] = baseWidth / bitmapWidth;
+    $uniform12[1] = baseHeight / bitmapHeight;
+    // uvToStOffset
+    $uniform12[2] = mapPointX / bitmapWidth;
+    $uniform12[3] = (baseHeight - bitmapHeight - mapPointY) / bitmapHeight;
+    // scale
+    $uniform12[4] = scaleX / baseWidth;
+    $uniform12[5] = scaleY / baseHeight;
+    // padding
+    $uniform12[6] = 0;
+    $uniform12[7] = 0;
+    // substituteColor (mode === 1 の場合)
+    if (needsSubstituteColor) {
+        const [r, g, b, a] = intToRGBA(color, alpha);
+        $uniform12[8] = r;
+        $uniform12[9] = g;
+        $uniform12[10] = b;
+        $uniform12[11] = a;
+    }
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform12, uniformSize)
+        : device.createBuffer({
+            "size": uniformSize,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, $uniform12, 0, uniformSize / 4);
+    }
+    // バインドグループを作成
+    $entries4[0].resource.buffer = uniformBuffer;
+    $entries4[1].resource = sampler;
+    $entries4[2].resource = sourceAttachment.texture.view;
+    $entries4[3].resource = mapTexture.createView();
+    const bindGroup = device.createBindGroup({
+        "layout": cached.bindGroupLayout,
+        "entries": $entries4
+    });
+    // レンダーパスを実行
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(destAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(cached.pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    // クリーンアップ（mapTextureはsubmit後に遅延破棄）
+    config.frameTextures.push(mapTexture);
+    return destAttachment;
+};

package/src/Filter/DisplacementMapFilterShader.d.ts

@@ -0,0 +1,2 @@
+export declare const getDisplacementMapFilterFragmentShader: (componentX: number, componentY: number, mode: number) => string;
+export declare const getDisplacementMapFilterShaderKey: (componentX: number, componentY: number, mode: number) => string;

package/src/Filter/DisplacementMapFilterShader.js

@@ -0,0 +1,114 @@
+const getComponentExpression = (component) => {
+    switch (component) {
+        case 1:
+            return "mapColor.r";
+        case 2:
+            return "mapColor.g";
+        case 4:
+            return "mapColor.b";
+        case 8:
+            return "mapColor.a";
+        default:
+            return "0.5";
+    }
+};
+const getModeStatement = (mode) => {
+    switch (mode) {
+        case 0:
+            return `
+    let sourceColor = textureSample(sourceTexture, sourceSampler, uv);`;
+        case 1:
+            return `
+    let substituteColor = uniforms.substituteColor;
+    let sourceColor = mix(substituteColor, textureSample(sourceTexture, sourceSampler, uv), isInside(uv));`;
+        case 3:
+            return `
+    let fallbackUv = mix(input.texCoord, uv, step(abs(uv - vec2<f32>(0.5)), vec2<f32>(0.5)));
+    let sourceColor = textureSample(sourceTexture, sourceSampler, fallbackUv);`;
+        case 2:
+        default:
+            return `
+    let sourceColor = textureSample(sourceTexture, sourceSampler, fract(uv));`;
+    }
+};
+export const getDisplacementMapFilterFragmentShader = (componentX, componentY, mode) => {
+    const cx = getComponentExpression(componentX);
+    const cy = getComponentExpression(componentY);
+    const modeStatement = getModeStatement(mode);
+    const hasSubstituteColor = mode === 1;
+    return `
+struct DisplacementMapUniforms {
+    uvToStScale: vec2<f32>,
+    uvToStOffset: vec2<f32>,
+    scale: vec2<f32>,
+    _pad: vec2<f32>,
+${hasSubstituteColor ? "    substituteColor: vec4<f32>," : ""}
+}
+
+@group(0) @binding(0) var<uniform> uniforms: DisplacementMapUniforms;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(3) var mapTexture: texture_2d<f32>;
+
+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;
+}
+
+var<private> input: VertexOutput;
+
+@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(fragInput: VertexOutput) -> @location(0) vec4<f32> {
+    input = fragInput;
+
+    let uvToStScale = uniforms.uvToStScale;
+    let uvToStOffset = uniforms.uvToStOffset;
+    let scale = uniforms.scale;
+
+    let st = input.texCoord * uvToStScale - uvToStOffset;
+    let mapColor = textureSample(mapTexture, sourceSampler, st);
+
+    let offset = vec2<f32>(${cx}, ${cy}) - 0.5;
+    let uv = input.texCoord + offset * scale;
+
+    ${modeStatement}
+
+    let originalColor = textureSample(sourceTexture, sourceSampler, input.texCoord);
+    return mix(originalColor, sourceColor, isInside(st));
+}
+`;
+};
+export const getDisplacementMapFilterShaderKey = (componentX, componentY, mode) => {
+    return `displacement_${componentX}_${componentY}_${mode}`;
+};

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

@@ -0,0 +1,24 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description ドロップシャドウフィルターを適用
+ *              Apply drop shadow filter
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @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} strength - シャドウ強度
+ * @param  {number} quality - クオリティ
+ * @param  {boolean} inner - インナーシャドウ
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {boolean} hideObject - 元オブジェクトを隠す
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IDropShadowConfig} 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;

package/src/Filter/DropShadowFilter/FilterApplyDropShadowFilterUseCase.js

@@ -0,0 +1,179 @@
+import { $offset } from "../FilterOffset";
+import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
+/**
+ * @description 度からラジアンへの変換係数
+ */
+const DEG_TO_RAD = Math.PI / 180;
+/**
+ * @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 drop shadow filter
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @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} strength - シャドウ強度
+ * @param  {number} quality - クオリティ
+ * @param  {boolean} inner - インナーシャドウ
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {boolean} hideObject - 元オブジェクトを隠す
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IDropShadowConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export const execute = (sourceAttachment, matrix, distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject, 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 offsetDiffX = blurOffsetX - baseOffsetX;
+    const offsetDiffY = blurOffsetY - baseOffsetY;
+    // 変換行列からスケールを取得
+    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 shadowX = Math.cos(radian) * distance * (xScale / devicePixelRatio);
+    const shadowY = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    // 出力キャンバスのサイズを計算
+    const w = inner ? baseWidth : blurWidth + Math.max(0, Math.abs(shadowX) - offsetDiffX);
+    const h = inner ? baseHeight : blurHeight + Math.max(0, Math.abs(shadowY) - offsetDiffY);
+    const width = Math.ceil(w);
+    const height = Math.ceil(h);
+    const fractionX = (width - w) / 2;
+    const fractionY = (height - h) / 2;
+    // テクスチャの位置を計算（WebGL版と同じ）
+    const baseTextureX = inner ? 0 : Math.max(0, offsetDiffX - shadowX) + fractionX;
+    const baseTextureY = inner ? 0 : Math.max(0, offsetDiffY - shadowY) + fractionY;
+    const blurTextureX = inner ? shadowX - blurOffsetX : (shadowX > 0 ? Math.max(0, shadowX - offsetDiffX) : 0) + fractionX;
+    const blurTextureY = inner ? shadowY - blurOffsetY : (shadowY > 0 ? Math.max(0, shadowY - offsetDiffY) : 0) + fractionY;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    // タイプとノックアウト状態を決定
+    const isInner = inner;
+    let isKnockout = knockout;
+    let isHideObject = hideObject;
+    if (inner) {
+        isKnockout = knockout || hideObject;
+    }
+    else if (!knockout && hideObject) {
+        // フルモード（シャドウのみ表示）
+        isKnockout = true;
+        isHideObject = true;
+    }
+    const pipeline = pipelineManager.getFilterPipeline("drop_shadow_filter", {
+        "IS_INNER": isInner ? 1 : 0,
+        "IS_KNOCKOUT": isKnockout ? 1 : 0,
+        "IS_HIDE_OBJECT": isHideObject ? 1 : 0
+    });
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("drop_shadow_filter");
+    if (!pipeline || !bindGroupLayout) {
+        console.error("[WebGPU DropShadowFilter] Pipeline not found");
+        frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+        return sourceAttachment;
+    }
+    // サンプラーを作成
+    const sampler = textureManager.createSampler("drop_shadow_sampler", true);
+    // ユニフォームバッファを作成
+    // color: vec4<f32> (16 bytes)
+    // baseScale: vec2<f32> (8 bytes)
+    // baseOffset: vec2<f32> (8 bytes)
+    // blurScale: vec2<f32> (8 bytes)
+    // blurOffset: vec2<f32> (8 bytes)
+    // strength: f32 (4 bytes)
+    // inner: f32 (4 bytes)
+    // knockout: f32 (4 bytes)
+    // hideObject: f32 (4 bytes)
+    // Total: 64 bytes
+    const [r, g, b, a] = intToRGBA(color, alpha);
+    // WebGL版と同じUV変換方式:
+    // uv = texCoord * scale - offset
+    // WebGPU: texCoord.y=0がトップ、テクスチャ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;
+    $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] = isInner ? 1.0 : 0.0;
+    $uniform16[14] = isKnockout ? 1.0 : 0.0;
+    $uniform16[15] = isHideObject ? 1.0 : 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/DropShadowFilterShader.d.ts

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

package/src/Filter/DropShadowFilterShader.js

@@ -0,0 +1,93 @@
+export class DropShadowFilterShader {
+    static getFragmentShader() {
+        return /* wgsl */ `
+            struct VertexOutput {
+                @builtin(position) position: vec4<f32>,
+                @location(0) texCoord: vec2<f32>,
+            }
+
+            struct DropShadowUniforms {
+                shadowColor: vec4<f32>,
+                offset: vec2<f32>,
+                distance: f32,
+                angle: f32,
+                strength: f32,
+                inner: f32,
+                knockout: f32,
+                hideObject: f32,
+            }
+
+            @group(0) @binding(0) var<uniform> uniforms: DropShadowUniforms;
+            @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 radian = uniforms.angle * 3.14159265 / 180.0;
+                let offsetX = cos(radian) * uniforms.distance / 100.0;
+                let offsetY = sin(radian) * uniforms.distance / 100.0;
+
+                let shadowCoord = vec2<f32>(
+                    input.texCoord.x + offsetX,
+                    input.texCoord.y + offsetY
+                );
+
+                var shadowAlpha = textureSample(textureData, textureSampler, shadowCoord).a;
+
+                var shadowColor = vec4<f32>(
+                    uniforms.shadowColor.rgb,
+                    shadowAlpha * uniforms.shadowColor.a * uniforms.strength
+                );
+
+                if (uniforms.inner > 0.5) {
+                    let alpha = originalColor.a;
+                    shadowColor.a *= alpha;
+
+                    if (uniforms.knockout > 0.5) {
+                        return shadowColor;
+                    } else {
+                        return mix(shadowColor, originalColor, alpha);
+                    }
+                } else {
+                    if (uniforms.hideObject > 0.5) {
+                        return shadowColor * (1.0 - originalColor.a);
+                    } else if (uniforms.knockout > 0.5) {
+                        return shadowColor;
+                    } else {
+                        let combinedAlpha = originalColor.a + shadowColor.a * (1.0 - originalColor.a);
+                        if (combinedAlpha > 0.0) {
+                            let rgb = (originalColor.rgb * originalColor.a +
+                                      shadowColor.rgb * shadowColor.a * (1.0 - originalColor.a)) / combinedAlpha;
+                            return vec4<f32>(rgb, combinedAlpha);
+                        } else {
+                            return vec4<f32>(0.0);
+                        }
+                    }
+                }
+            }
+        `;
+    }
+    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/FilterGradientLUTCache.d.ts

@@ -0,0 +1,29 @@
+import type { IAttachmentObject } from "../interface/IAttachmentObject";
+/**
+ * @description GPUDeviceを設定
+ *              Set GPUDevice
+ *
+ * @param  {GPUDevice} device
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setFilterGradientLUTDevice: (device: GPUDevice) => void;
+/**
+ * @description フィルター用グラデーションLUTのAttachmentObjectを返却
+ *              Returns AttachmentObject for filter gradient LUT
+ *
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export declare const $getFilterGradientAttachmentObject: () => IAttachmentObject;
+/**
+ * @description フィルター用グラデーションLUTの共有アタッチメントを破棄してクリア
+ *              Destroy and clear filter gradient LUT shared attachment
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $clearFilterGradientAttachment: () => void;