@next2d/webgpu 3.0.0

package/src/Filter/BlurFilterUseCase.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @description ブラーフィルター適用のユースケース
+ *              Apply blur filter use case
+ */
+/**
+ * @description ブラーフィルターパラメータを計算
+ * @param {Float32Array} matrix - 変換行列
+ * @param {number} blurX - X方向のブラー量
+ * @param {number} blurY - Y方向のブラー量
+ * @param {number} quality - クオリティ (1-15)
+ * @param {number} devicePixelRatio - デバイスピクセル比
+ * @return {object}
+ */
+export declare const calculateBlurParams: (matrix: Float32Array, blurX: number, blurY: number, quality: number, devicePixelRatio: number) => {
+    baseBlurX: number;
+    baseBlurY: number;
+    offsetX: number;
+    offsetY: number;
+    bufferScaleX: number;
+    bufferScaleY: number;
+};
+/**
+ * @description 方向ブラーのパラメータを計算
+ * @param {boolean} isHorizontal - 水平方向かどうか
+ * @param {number} blur - ブラー量
+ * @param {number} textureWidth - テクスチャ幅
+ * @param {number} textureHeight - テクスチャ高さ
+ * @return {object}
+ */
+export declare const calculateDirectionalBlurParams: (isHorizontal: boolean, blur: number, textureWidth: number, textureHeight: number) => {
+    offsetX: number;
+    offsetY: number;
+    fraction: number;
+    samples: number;
+    halfBlur: number;
+};

package/src/Filter/BlurFilterUseCase.js

@@ -0,0 +1,85 @@
+/**
+ * @description ブラーフィルター適用のユースケース
+ *              Apply blur filter use case
+ */
+/**
+ * @description ブラー計算用のステップ値
+ *              Step values for blur calculation
+ */
+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 - デバイスピクセル比
+ * @return {object}
+ */
+export const calculateBlurParams = (matrix, blurX, blurY, quality, devicePixelRatio) => {
+    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 offsetX = Math.round(baseBlurX * step);
+    const offsetY = Math.round(baseBlurY * step);
+    // バッファスケールを計算（大きなブラーの場合はダウンスケール）
+    let bufferScaleX = 1;
+    let bufferScaleY = 1;
+    if (baseBlurX > 128) {
+        bufferScaleX = 0.0625;
+    }
+    else if (baseBlurX > 64) {
+        bufferScaleX = 0.125;
+    }
+    else if (baseBlurX > 32) {
+        bufferScaleX = 0.25;
+    }
+    else if (baseBlurX > 16) {
+        bufferScaleX = 0.5;
+    }
+    if (baseBlurY > 128) {
+        bufferScaleY = 0.0625;
+    }
+    else if (baseBlurY > 64) {
+        bufferScaleY = 0.125;
+    }
+    else if (baseBlurY > 32) {
+        bufferScaleY = 0.25;
+    }
+    else if (baseBlurY > 16) {
+        bufferScaleY = 0.5;
+    }
+    return {
+        baseBlurX,
+        baseBlurY,
+        offsetX,
+        offsetY,
+        bufferScaleX,
+        bufferScaleY
+    };
+};
+/**
+ * @description 方向ブラーのパラメータを計算
+ * @param {boolean} isHorizontal - 水平方向かどうか
+ * @param {number} blur - ブラー量
+ * @param {number} textureWidth - テクスチャ幅
+ * @param {number} textureHeight - テクスチャ高さ
+ * @return {object}
+ */
+export const calculateDirectionalBlurParams = (isHorizontal, blur, textureWidth, textureHeight) => {
+    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;
+    return {
+        offsetX,
+        offsetY,
+        fraction,
+        samples,
+        halfBlur
+    };
+};

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

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

package/src/Filter/ColorMatrixFilter/FilterApplyColorMatrixFilterUseCase.js

@@ -0,0 +1,90 @@
+/**
+ * @description プリアロケートされたFloat32Array
+ */
+const $uniform20 = new Float32Array(20);
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
+ */
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+/**
+ * @description カラーマトリックスフィルターを適用
+ *              Apply color matrix filter
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ（アタッチメント）
+ * @param  {Float32Array} matrix - 4x5カラーマトリックス (20 floats)
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export const execute = (sourceAttachment, matrix, config) => {
+    const { device, commandEncoder, frameBufferManager, pipelineManager, textureManager } = config;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(sourceAttachment.width, sourceAttachment.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;
+    }
+    // サンプラーを作成
+    const sampler = textureManager.createSampler("color_matrix_sampler", true);
+    // ユニフォームバッファを作成
+    // 4x4 matrix (64 bytes) + offset vec4 (16 bytes) = 80 bytes
+    // WebGPUのmat4x4は列優先なので、入力の4x5行列を変換
+    // 入力: [r0, r1, r2, r3, r4, g0, g1, g2, g3, g4, b0, b1, b2, b3, b4, a0, a1, a2, a3, a4]
+    // 出力: mat4x4 (row-wise to column-wise) + offset vec4
+    // Column 0: R coefficients
+    $uniform20[0] = matrix[0];
+    $uniform20[1] = matrix[5];
+    $uniform20[2] = matrix[10];
+    $uniform20[3] = matrix[15];
+    // Column 1: G coefficients
+    $uniform20[4] = matrix[1];
+    $uniform20[5] = matrix[6];
+    $uniform20[6] = matrix[11];
+    $uniform20[7] = matrix[16];
+    // Column 2: B coefficients
+    $uniform20[8] = matrix[2];
+    $uniform20[9] = matrix[7];
+    $uniform20[10] = matrix[12];
+    $uniform20[11] = matrix[17];
+    // Column 3: A coefficients
+    $uniform20[12] = matrix[3];
+    $uniform20[13] = matrix[8];
+    $uniform20[14] = matrix[13];
+    $uniform20[15] = matrix[18];
+    // Offset values (R, G, B, A) - normalized to 0-1 range (input is 0-255)
+    $uniform20[16] = matrix[4] / 255;
+    $uniform20[17] = matrix[9] / 255;
+    $uniform20[18] = matrix[14] / 255;
+    $uniform20[19] = matrix[19] / 255;
+    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);
+    }
+    // バインドグループを作成
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = sourceAttachment.texture.view;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    // レンダーパスを実行
+    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();
+    // Note: uniformBuffer is not destroyed here - it will be garbage collected after GPU submission
+    return destAttachment;
+};

package/src/Filter/ColorMatrixFilterShader.d.ts

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

package/src/Filter/ColorMatrixFilterShader.js

@@ -0,0 +1,51 @@
+export class ColorMatrixFilterShader {
+    static getFragmentShader() {
+        return /* wgsl */ `
+            struct VertexOutput {
+                @builtin(position) position: vec4<f32>,
+                @location(0) texCoord: vec2<f32>,
+            }
+
+            struct ColorMatrixUniforms {
+                matrix: mat4x4<f32>,
+                offset: vec4<f32>,
+            }
+
+            @group(0) @binding(0) var<uniform> uniforms: ColorMatrixUniforms;
+            @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 color = textureSample(textureData, textureSampler, input.texCoord);
+
+                var result = uniforms.matrix * color + uniforms.offset;
+
+                result = clamp(result, vec4<f32>(0.0), vec4<f32>(1.0));
+
+                return result;
+            }
+        `;
+    }
+    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/ConvolutionFilter/FilterApplyConvolutionFilterUseCase.d.ts

@@ -0,0 +1,6 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description コンボリューションフィルターを適用
+ */
+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;

package/src/Filter/ConvolutionFilter/FilterApplyConvolutionFilterUseCase.js

@@ -0,0 +1,144 @@
+import { ShaderSource } from "../../Shader/ShaderSource";
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
+ */
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "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 コンボリューションフィルターを適用
+ */
+export const execute = (sourceAttachment, matrixX, matrixY, matrix, divisor, bias, preserveAlpha, clamp, color, alpha, config) => {
+    const { device, commandEncoder, frameBufferManager, textureManager } = config;
+    const width = sourceAttachment.width;
+    const height = sourceAttachment.height;
+    // 出力アタッチメントを作成
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    // パイプラインをキャッシュから取得または作成
+    const cacheKey = `${matrixX},${matrixY},${preserveAlpha},${clamp}`;
+    let cached = $pipelineCache.get(cacheKey);
+    if (!cached) {
+        const shaderCode = ShaderSource.getConvolutionFilterFragmentShader(matrixX, matrixY, preserveAlpha, clamp);
+        const shaderModule = device.createShaderModule({ "code": shaderCode });
+        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": {}
+                }
+            ]
+        });
+        const pipelineLayout = device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const pipeline = device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": shaderModule,
+                "entryPoint": "vs_main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": shaderModule,
+                "entryPoint": "fs_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("convolution_sampler", true);
+    // ユニフォームバッファを作成
+    const matrixSize = matrixX * matrixY;
+    const matrixArraySize = Math.ceil(matrixSize / 4);
+    const [r, g, b, a] = intToRGBA(color, alpha);
+    // マトリクスを4要素ごとにまとめる
+    const paddedMatrix = new Float32Array(matrixArraySize * 4);
+    for (let i = 0; i < matrixSize; i++) {
+        paddedMatrix[i] = matrix[i];
+    }
+    const uniformSize = 32 + matrixArraySize * 16;
+    const uniformData = new Float32Array(uniformSize / 4);
+    uniformData[0] = 1 / width; // rcpSize.x
+    uniformData[1] = 1 / height; // rcpSize.y
+    uniformData[2] = divisor !== 0 ? 1 / divisor : 1; // rcpDivisor
+    uniformData[3] = bias / 255; // bias (normalize to 0-1)
+    uniformData[4] = r; // substituteColor.r
+    uniformData[5] = g; // substituteColor.g
+    uniformData[6] = b; // substituteColor.b
+    uniformData[7] = a; // substituteColor.a
+    // matrix array starts at index 8
+    for (let i = 0; i < paddedMatrix.length; i++) {
+        uniformData[8 + i] = paddedMatrix[i];
+    }
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer(uniformData)
+        : device.createBuffer({
+            "size": uniformData.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+    }
+    // バインドグループを作成
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = sourceAttachment.texture.view;
+    const bindGroup = device.createBindGroup({
+        "layout": cached.bindGroupLayout,
+        "entries": $entries3
+    });
+    // レンダーパスを実行
+    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();
+    return destAttachment;
+};

package/src/Filter/ConvolutionFilterShader.d.ts

@@ -0,0 +1,2 @@
+export declare const getConvolutionFilterFragmentShader: (matrixX: number, matrixY: number, preserveAlpha: boolean, clamp: boolean) => string;
+export declare const getConvolutionFilterShaderKey: (matrixX: number, matrixY: number, preserveAlpha: boolean, clamp: boolean) => string;

package/src/Filter/ConvolutionFilterShader.js

@@ -0,0 +1,115 @@
+export const getConvolutionFilterFragmentShader = (matrixX, matrixY, preserveAlpha, clamp) => {
+    const halfX = Math.floor(matrixX * 0.5);
+    const halfY = Math.floor(matrixY * 0.5);
+    const size = matrixX * matrixY;
+    let matrixStatement = "";
+    for (let idx = 0; idx < size; idx++) {
+        matrixStatement += `
+    result = result + getWeightedColor(${idx}, getMatrixWeight(${idx}));`;
+    }
+    const preserveAlphaStatement = preserveAlpha
+        ? "result.a = textureSample(sourceTexture, sourceSampler, input.texCoord).a;"
+        : "";
+    const clampStatement = clamp
+        ? ""
+        : `
+    let substituteColor = uniforms.substituteColor;
+    color = mix(substituteColor, color, isInside(uv));`;
+    return `
+struct ConvolutionUniforms {
+    rcpSize: vec2<f32>,
+    rcpDivisor: f32,
+    bias: f32,
+    substituteColor: vec4<f32>,
+    matrix: array<vec4<f32>, ${Math.ceil(size / 4)}>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: ConvolutionUniforms;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var sourceTexture: 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;
+}
+
+fn getMatrixWeight(index: i32) -> f32 {
+    let vecIndex = index / 4;
+    let component = index % 4;
+    let vec = uniforms.matrix[vecIndex];
+
+    if (component == 0) { return vec.x; }
+    else if (component == 1) { return vec.y; }
+    else if (component == 2) { return vec.z; }
+    else { return vec.w; }
+}
+
+fn getWeightedColor(i: i32, weight: f32) -> vec4<f32> {
+    let rcpSize = uniforms.rcpSize;
+
+    let iDivX = i / ${matrixX};
+    let iModX = i - ${matrixX} * iDivX;
+    let offset = vec2<f32>(f32(iModX - ${halfX}), f32(${halfY} - iDivX));
+    var uv = input.texCoord + offset * rcpSize;
+
+    var color = textureSample(sourceTexture, sourceSampler, uv);
+    color = vec4<f32>(color.rgb / max(0.0001, color.a), color.a);
+    ${clampStatement}
+
+    return color * weight;
+}
+
+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 rcpDivisor = uniforms.rcpDivisor;
+    let bias = uniforms.bias;
+
+    var result = vec4<f32>(0.0);
+    ${matrixStatement}
+
+    result = clamp(result * rcpDivisor + bias, vec4<f32>(0.0), vec4<f32>(1.0));
+    ${preserveAlphaStatement}
+
+    result = vec4<f32>(result.rgb * result.a, result.a);
+    return result;
+}
+`;
+};
+export const getConvolutionFilterShaderKey = (matrixX, matrixY, preserveAlpha, clamp) => {
+    return `convolution_${matrixX}x${matrixY}_${preserveAlpha ? "pa" : "npa"}_${clamp ? "c" : "nc"}`;
+};

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

@@ -0,0 +1,6 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IFilterConfig } from "../../interface/IFilterConfig";
+/**
+ * @description ディスプレイスメントマップフィルターを適用
+ */
+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;