@next2d/webgpu 3.0.4 → 3.1.0

package/src/Compute/ComputePipelineManager.js

@@ -1,313 +0,0 @@
-/**
- * @description Compute Pipeline Manager
- *              Compute Shaderパイプラインの管理
- *
- * Compute Shaderは並列処理に最適で、フィルター処理を高速化。
- * 特に大きなブラー半径（64+）の場合、20-35%の高速化が期待できる。
- *
- * @class
- */
-export class ComputePipelineManager {
-    /**
-     * @constructor
-     * @param {GPUDevice} device - WebGPU device
-     */
-    constructor(device) {
-        Object.defineProperty(this, "device", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "pipelines", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "bindGroupLayouts", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.device = device;
-        this.pipelines = new Map();
-        this.bindGroupLayouts = new Map();
-        this.initializeBlurPipelines();
-    }
-    /**
-     * @description ブラー用Compute Pipelineを初期化
-     * @private
-     */
-    initializeBlurPipelines() {
-        // ブラーCompute Shader用のBindGroupLayoutを作成
-        const blurBindGroupLayout = this.device.createBindGroupLayout({
-            "label": "blur_compute_bind_group_layout",
-            "entries": [
-                {
-                    // 入力テクスチャ
-                    "binding": 0,
-                    "visibility": GPUShaderStage.COMPUTE,
-                    "texture": {
-                        "sampleType": "float"
-                    }
-                },
-                {
-                    // 出力テクスチャ（Storage Texture）
-                    "binding": 1,
-                    "visibility": GPUShaderStage.COMPUTE,
-                    "storageTexture": {
-                        "access": "write-only",
-                        "format": "rgba8unorm"
-                    }
-                },
-                {
-                    // パラメータ（方向、ブラー半径など）
-                    "binding": 2,
-                    "visibility": GPUShaderStage.COMPUTE,
-                    "buffer": {
-                        "type": "uniform"
-                    }
-                }
-            ]
-        });
-        this.bindGroupLayouts.set("blur_compute", blurBindGroupLayout);
-        // 水平/垂直ブラーパイプラインを作成
-        // 同じシェーダーを使用し、方向はuniformで制御
-        this.createBlurComputePipeline("blur_compute_horizontal");
-        this.createBlurComputePipeline("blur_compute_vertical");
-        // 共有メモリ版（大半径用）
-        this.createBlurComputePipeline("blur_compute_shared_horizontal", true);
-        this.createBlurComputePipeline("blur_compute_shared_vertical", true);
-    }
-    /**
-     * @description ブラーCompute Pipelineを作成
-     * @param {string} name - パイプライン名
-     * @private
-     */
-    createBlurComputePipeline(name, useSharedMemory = false) {
-        const shaderModule = this.device.createShaderModule({
-            "label": `${name}_shader`,
-            "code": useSharedMemory ? this.getSharedBlurComputeShaderCode() : this.getBlurComputeShaderCode()
-        });
-        const pipelineLayout = this.device.createPipelineLayout({
-            "label": `${name}_layout`,
-            "bindGroupLayouts": [this.bindGroupLayouts.get("blur_compute")]
-        });
-        const pipeline = this.device.createComputePipeline({
-            "label": name,
-            "layout": pipelineLayout,
-            "compute": {
-                "module": shaderModule,
-                "entryPoint": "main"
-            }
-        });
-        this.pipelines.set(name, pipeline);
-    }
-    /**
-     * @description ブラーCompute Shaderコードを生成
-     *              ボックスブラー（均一加重平均）を使用。Fragment Shaderと同一出力。
-     * @return {string} WGSLシェーダーコード
-     * @private
-     */
-    getBlurComputeShaderCode() {
-        return `
-struct BlurParams {
-    direction: vec2<f32>,  // (1,0) or (0,1)
-    radius: f32,           // ブラー半径
-    fraction: f32,         // 端ピクセルのブレンド割合
-    texSize: vec2<f32>,    // テクスチャサイズ
-    samples: f32,          // サンプル数
-    padding: f32,          // パディング（16バイトアライメント）
-}
-
-@group(0) @binding(0) var inputTexture: texture_2d<f32>;
-@group(0) @binding(1) var outputTexture: texture_storage_2d<rgba8unorm, write>;
-@group(0) @binding(2) var<uniform> params: BlurParams;
-
-const WORKGROUP_SIZE: u32 = 16u;
-
-@compute @workgroup_size(16, 16, 1)
-fn main(
-    @builtin(global_invocation_id) globalId: vec3<u32>
-) {
-    let texSize = vec2<u32>(u32(params.texSize.x), u32(params.texSize.y));
-    let radius = i32(params.radius);
-
-    let outCoord = globalId.xy;
-
-    if (outCoord.x >= texSize.x || outCoord.y >= texSize.y) {
-        return;
-    }
-
-    let direction = vec2<i32>(i32(params.direction.x), i32(params.direction.y));
-    let samples = params.samples;
-    let fraction = params.fraction;
-
-    var color = vec4<f32>(0.0);
-
-    for (var i = -radius; i <= radius; i = i + 1) {
-        var sampleCoord = vec2<i32>(outCoord) + direction * i;
-
-        sampleCoord.x = clamp(sampleCoord.x, 0, i32(texSize.x) - 1);
-        sampleCoord.y = clamp(sampleCoord.y, 0, i32(texSize.y) - 1);
-
-        let sample = textureLoad(inputTexture, vec2<u32>(sampleCoord), 0);
-
-        // 端ピクセルにfraction重みを適用（Fragment Shaderと同じロジック）
-        if (i == -radius || i == radius) {
-            color = color + sample * fraction;
-        } else {
-            color = color + sample;
-        }
-    }
-
-    color = color / samples;
-
-    textureStore(outputTexture, outCoord, color);
-}
-`;
-    }
-    /**
-     * @description 共有メモリ版ブラーCompute Shaderコードを生成
-     *              ワークグループ共有メモリでテクスチャ読み込みの重複を排除。
-     *              radius >= 8 で通常版より高速。
-     * @return {string} WGSLシェーダーコード
-     * @private
-     */
-    getSharedBlurComputeShaderCode() {
-        return `
-struct BlurParams {
-    direction: vec2<f32>,
-    radius: f32,
-    fraction: f32,
-    texSize: vec2<f32>,
-    samples: f32,
-    padding: f32,
-}
-
-@group(0) @binding(0) var inputTexture: texture_2d<f32>;
-@group(0) @binding(1) var outputTexture: texture_storage_2d<rgba8unorm, write>;
-@group(0) @binding(2) var<uniform> params: BlurParams;
-
-const TILE: u32 = 16u;
-const MAX_APRON: u32 = 24u;
-const SHARED_W: u32 = TILE + 2u * MAX_APRON;
-
-var<workgroup> tile: array<vec4<f32>, ${(16 + 2 * 24) * 16}>;
-
-@compute @workgroup_size(16, 16, 1)
-fn main(
-    @builtin(global_invocation_id) globalId: vec3<u32>,
-    @builtin(local_invocation_id) localId: vec3<u32>,
-    @builtin(workgroup_id) workgroupId: vec3<u32>
-) {
-    let texSize = vec2<u32>(u32(params.texSize.x), u32(params.texSize.y));
-    let radius = u32(params.radius);
-    let apron = min(radius, MAX_APRON);
-    let isHorizontal = params.direction.x > 0.5;
-    let fraction = params.fraction;
-    let samples = params.samples;
-
-    let threadIdx = localId.x + localId.y * TILE;
-    let totalThreads = TILE * TILE;
-
-    if (isHorizontal) {
-        let sharedWidth = TILE + 2u * apron;
-        let baseX = workgroupId.x * TILE;
-        let y = globalId.y;
-        let clampedY = clamp(y, 0u, max(texSize.y, 1u) - 1u);
-
-        // 全スレッドが協調ロード（範囲外スレッドもclampされた座標でロード）
-        var idx = threadIdx;
-        loop {
-            if (idx >= sharedWidth) { break; }
-            let gx = i32(baseX) + i32(idx) - i32(apron);
-            let cx = u32(clamp(gx, 0, i32(max(texSize.x, 1u)) - 1));
-            tile[localId.y * SHARED_W + idx] = textureLoad(inputTexture, vec2<u32>(cx, clampedY), 0);
-            idx += totalThreads;
-        }
-
-        // 全スレッドがバリアに到達（早期returnなし）
-        workgroupBarrier();
-
-        // 範囲内のスレッドのみ出力
-        let outX = globalId.x;
-        if (outX < texSize.x && y < texSize.y) {
-            let iRadius = i32(radius);
-            var color = vec4<f32>(0.0);
-            for (var i = -iRadius; i <= iRadius; i = i + 1) {
-                let tileIdx = i32(localId.x) + i32(apron) + i;
-                let s = tile[localId.y * SHARED_W + u32(clamp(tileIdx, 0, i32(sharedWidth) - 1))];
-                if (i == -iRadius || i == iRadius) {
-                    color += s * fraction;
-                } else {
-                    color += s;
-                }
-            }
-            textureStore(outputTexture, vec2<u32>(outX, y), color / samples);
-        }
-    } else {
-        let sharedHeight = TILE + 2u * apron;
-        let baseY = workgroupId.y * TILE;
-        let x = globalId.x;
-        let clampedX = clamp(x, 0u, max(texSize.x, 1u) - 1u);
-
-        // 全スレッドが協調ロード（範囲外スレッドもclampされた座標でロード）
-        var idx = threadIdx;
-        loop {
-            if (idx >= sharedHeight) { break; }
-            let gy = i32(baseY) + i32(idx) - i32(apron);
-            let cy = u32(clamp(gy, 0, i32(max(texSize.y, 1u)) - 1));
-            tile[idx * TILE + localId.x] = textureLoad(inputTexture, vec2<u32>(clampedX, cy), 0);
-            idx += totalThreads;
-        }
-
-        // 全スレッドがバリアに到達（早期returnなし）
-        workgroupBarrier();
-
-        // 範囲内のスレッドのみ出力
-        let outY = globalId.y;
-        if (x < texSize.x && outY < texSize.y) {
-            let iRadius = i32(radius);
-            var color = vec4<f32>(0.0);
-            for (var i = -iRadius; i <= iRadius; i = i + 1) {
-                let tileIdx = i32(localId.y) + i32(apron) + i;
-                let s = tile[u32(clamp(tileIdx, 0, i32(sharedHeight) - 1)) * TILE + localId.x];
-                if (i == -iRadius || i == iRadius) {
-                    color += s * fraction;
-                } else {
-                    color += s;
-                }
-            }
-            textureStore(outputTexture, vec2<u32>(x, outY), color / samples);
-        }
-    }
-}
-`;
-    }
-    /**
-     * @description パイプラインを取得
-     * @param {string} name - パイプライン名
-     * @return {GPUComputePipeline | undefined}
-     */
-    getPipeline(name) {
-        return this.pipelines.get(name);
-    }
-    /**
-     * @description BindGroupLayoutを取得
-     * @param {string} name - レイアウト名
-     * @return {GPUBindGroupLayout | undefined}
-     */
-    getBindGroupLayout(name) {
-        return this.bindGroupLayouts.get(name);
-    }
-    /**
-     * @description リソースを破棄
-     */
-    destroy() {
-        this.pipelines.clear();
-        this.bindGroupLayouts.clear();
-    }
-}

package/src/Compute/service/ComputeExecuteBlurService.d.ts

@@ -1,21 +0,0 @@
-import type { IAttachmentObject } from "../../interface/IAttachmentObject";
-import type { ComputePipelineManager } from "../ComputePipelineManager";
-/**
- * @description Compute Shaderでブラーを実行（ボックスブラー）
- *              Execute box blur using Compute Shader
- *
- * Fragment Shaderと同一のボックスブラーアルゴリズムを使用。
- *
- * @param {GPUDevice} device - WebGPU device
- * @param {GPUCommandEncoder} commandEncoder - コマンドエンコーダー
- * @param {ComputePipelineManager} computePipelineManager - Compute Pipeline Manager
- * @param {IAttachmentObject} source - 入力アタッチメント
- * @param {IAttachmentObject} dest - 出力アタッチメント
- * @param {boolean} isHorizontal - 水平ブラーかどうか
- * @param {number} blur - ブラー量（bufferBlurX/Y相当）
- * @param {object} [bufferManager] - バッファマネージャー（プール化用）
- * @return {void}
- */
-export declare const execute: (device: GPUDevice, commandEncoder: GPUCommandEncoder, computePipelineManager: ComputePipelineManager, source: IAttachmentObject, dest: IAttachmentObject, isHorizontal: boolean, blur: number, bufferManager?: {
-    acquireAndWriteUniformBuffer(data: Float32Array, byteLength?: number): GPUBuffer;
-}) => void;

package/src/Compute/service/ComputeExecuteBlurService.js

@@ -1,81 +0,0 @@
-/**
- * @description プリアロケートされたFloat32Array (サイズ8)
- */
-const $params8 = new Float32Array(8);
-/**
- * @description プリアロケートされたBindGroupEntry配列 (バインディング3つ)
- */
-const $computeEntries3 = [
-    { "binding": 0, "resource": null },
-    { "binding": 1, "resource": null },
-    { "binding": 2, "resource": { "buffer": null } }
-];
-/**
- * @description プリアロケートされたComputePassDescriptor
- */
-const $labelH = { "label": "blur_compute_pass_h" };
-const $labelV = { "label": "blur_compute_pass_v" };
-/**
- * @description Compute Shaderでブラーを実行（ボックスブラー）
- *              Execute box blur using Compute Shader
- *
- * Fragment Shaderと同一のボックスブラーアルゴリズムを使用。
- *
- * @param {GPUDevice} device - WebGPU device
- * @param {GPUCommandEncoder} commandEncoder - コマンドエンコーダー
- * @param {ComputePipelineManager} computePipelineManager - Compute Pipeline Manager
- * @param {IAttachmentObject} source - 入力アタッチメント
- * @param {IAttachmentObject} dest - 出力アタッチメント
- * @param {boolean} isHorizontal - 水平ブラーかどうか
- * @param {number} blur - ブラー量（bufferBlurX/Y相当）
- * @param {object} [bufferManager] - バッファマネージャー（プール化用）
- * @return {void}
- */
-export const execute = (device, commandEncoder, computePipelineManager, source, dest, isHorizontal, blur, bufferManager) => {
-    // radius 8～24 の場合は共有メモリ版を使用（MAX_APRON=24の制限）
-    const halfBlur = Math.ceil(blur * 0.5);
-    const useShared = halfBlur >= 8 && halfBlur <= 24;
-    const pipelineName = useShared
-        ? isHorizontal ? "blur_compute_shared_horizontal" : "blur_compute_shared_vertical"
-        : isHorizontal ? "blur_compute_horizontal" : "blur_compute_vertical";
-    const pipeline = computePipelineManager.getPipeline(pipelineName);
-    const bindGroupLayout = computePipelineManager.getBindGroupLayout("blur_compute");
-    if (!pipeline || !bindGroupLayout) {
-        return;
-    }
-    // ボックスブラーパラメータ（Fragment ShaderのcalculateDirectionalBlurParamsと同一ロジック）
-    const fraction = 1 - (halfBlur - blur * 0.5);
-    const samples = 1 + blur;
-    $params8[0] = isHorizontal ? 1.0 : 0.0; // direction.x
-    $params8[1] = isHorizontal ? 0.0 : 1.0; // direction.y
-    $params8[2] = halfBlur; // radius (halfBlur)
-    $params8[3] = fraction; // fraction
-    $params8[4] = source.width; // texSize.x
-    $params8[5] = source.height; // texSize.y
-    $params8[6] = samples; // samples
-    $params8[7] = 0.0; // padding
-    const paramsBuffer = bufferManager
-        ? bufferManager.acquireAndWriteUniformBuffer($params8)
-        : (() => {
-            const buf = device.createBuffer({
-                "size": $params8.byteLength,
-                "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-            });
-            device.queue.writeBuffer(buf, 0, $params8);
-            return buf;
-        })();
-    $computeEntries3[0].resource = source.texture.view;
-    $computeEntries3[1].resource = dest.texture.view;
-    $computeEntries3[2].resource.buffer = paramsBuffer;
-    const bindGroup = device.createBindGroup({
-        "layout": bindGroupLayout,
-        "entries": $computeEntries3
-    });
-    const computePass = commandEncoder.beginComputePass(isHorizontal ? $labelH : $labelV);
-    computePass.setPipeline(pipeline);
-    computePass.setBindGroup(0, bindGroup);
-    const workgroupsX = Math.ceil(dest.width / 16);
-    const workgroupsY = Math.ceil(dest.height / 16);
-    computePass.dispatchWorkgroups(workgroupsX, workgroupsY, 1);
-    computePass.end();
-};

package/src/Filter/BevelFilterShader.d.ts

@@ -1,2 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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;