@next2d/webgpu 3.0.0

package/src/Compute/ComputePipelineManager.js

@@ -0,0 +1,313 @@
+/**
+ * @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

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

@@ -0,0 +1,81 @@
+/**
+ * @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/Context/service/ContextComputeBitmapMatrixService.d.ts

@@ -0,0 +1 @@
+export declare const execute: (bitmap_matrix: Float32Array, context_matrix: Float32Array) => Float32Array;

package/src/Context/service/ContextComputeBitmapMatrixService.js

@@ -0,0 +1,74 @@
+export const execute = (bitmap_matrix, context_matrix) => {
+    // ビットマップ行列 [a, b, c, d, tx, ty]
+    const ba = bitmap_matrix[0];
+    const bb = bitmap_matrix[1];
+    const bc = bitmap_matrix[2];
+    const bd = bitmap_matrix[3];
+    const btx = bitmap_matrix[4];
+    const bty = bitmap_matrix[5];
+    // コンテキスト行列 [a, b, 0, c, d, 0, tx, ty, 1]
+    const ca = context_matrix[0];
+    const cb = context_matrix[1];
+    const cc = context_matrix[3];
+    const cd = context_matrix[4];
+    const ctx = context_matrix[6];
+    const cty = context_matrix[7];
+    // Step 1: コンテキスト行列 × ビットマップ行列 を計算
+    // WebGLの$context.transform()と同じ順序: new = context × bitmap
+    // Flash Matrix乗算: C × B where
+    //   C = [ca, cb, cc, cd, ctx, cty], B = [ba, bb, bc, bd, btx, bty]
+    // 結果:
+    //   ma = ca*ba + cc*bb (x'のxからの係数)
+    //   mb = ca*bc + cc*bd (x'のyからの係数)
+    //   mc = cb*ba + cd*bb (y'のxからの係数)
+    //   md = cb*bc + cd*bd (y'のyからの係数)
+    const ma = ca * ba + cc * bb;
+    const mb = ca * bc + cc * bd;
+    const mc = cb * ba + cd * bb;
+    const md = cb * bc + cd * bd;
+    const mtx = ca * btx + cc * bty + ctx;
+    const mty = cb * btx + cd * bty + cty;
+    // Step 2: 合成行列の逆行列を計算
+    const det = ma * md - mb * mc;
+    if (Math.abs(det) < 1e-10) {
+        // 特異行列の場合は単位行列を返す
+        return new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    }
+    const invDet = 1 / det;
+    const ia = md * invDet;
+    const ib = -mb * invDet;
+    const ic = -mc * invDet;
+    const id = ma * invDet;
+    // Flash Matrix inverse translation:
+    // inv_tx = (c*ty - d*tx)/det = (mb*mty - md*mtx)/det
+    // inv_ty = (b*tx - a*ty)/det = (mc*mtx - ma*mty)/det
+    const itx = (mb * mty - md * mtx) * invDet;
+    const ity = (mc * mtx - ma * mty) * invDet;
+    // Step 3: 逆行列 × コンテキスト行列 を計算
+    // 逆行列変換: x' = ia*x + ib*y + itx, y' = ic*x + id*y + ity
+    // コンテキスト変換: x' = ca*x + cc*y + ctx, y' = cb*x + cd*y + cty
+    // 合成結果:
+    //   ra = ia*ca + ib*cb (x'のxからの係数)
+    //   rb = ia*cc + ib*cd (x'のyからの係数)
+    //   rc = ic*ca + id*cb (y'のxからの係数)
+    //   rd = ic*cc + id*cd (y'のyからの係数)
+    const ra = ia * ca + ib * cb;
+    const rb = ia * cc + ib * cd;
+    const rc = ic * ca + id * cb;
+    const rd = ic * cc + id * cd;
+    const rtx = ia * ctx + ib * cty + itx;
+    const rty = ic * ctx + id * cty + ity;
+    // 結果をFlash Matrix形式に変換
+    // ra = x'のxからの係数 = Flash a
+    // rb = x'のyからの係数 = Flash c
+    // rc = y'のxからの係数 = Flash b
+    // rd = y'のyからの係数 = Flash d
+    // 列優先形式で出力: col0=(a,b,0), col1=(c,d,0), col2=(tx,ty,1)
+    // WGSLのmat3x3は列優先で、各列が連続して格納される
+    // Flash変換: x' = a*x + c*y + tx, y' = b*x + d*y + ty
+    return new Float32Array([
+        ra, rc, 0, // col0: (Flash_a, Flash_b, 0)
+        rb, rd, 0, // col1: (Flash_c, Flash_d, 0)
+        rtx, rty, 1 // col2: (tx, ty, 1)
+    ]);
+};

package/src/Context/service/ContextComputeGradientMatrixService.d.ts

@@ -0,0 +1,4 @@
+export declare const execute: (gradientMatrix: Float32Array, _contextMatrix: Float32Array, type: number) => {
+    inverseMatrix: Float32Array;
+    linearPoints: Float32Array | null;
+};

package/src/Context/service/ContextComputeGradientMatrixService.js

@@ -0,0 +1,88 @@
+export const execute = (gradientMatrix, _contextMatrix, type) => {
+    // グラデーション行列
+    const ga = gradientMatrix[0];
+    const gb = gradientMatrix[1];
+    const gc = gradientMatrix[2];
+    const gd = gradientMatrix[3];
+    const gtx = gradientMatrix[4];
+    const gty = gradientMatrix[5];
+    if (type === 0) {
+        // === Linear gradient ===
+        // WebGL版と同じ: $linearGradientXY(matrix)で点a, bを計算
+        // 点を計算（グラデーション行列を使って）
+        // x0, y0: (-819.2, -819.2)を変換
+        // x1, y1: (819.2, -819.2)を変換
+        // x2, y2: (-819.2, 819.2)を変換
+        const x0 = -819.2 * ga - 819.2 * gc + gtx;
+        const x1 = 819.2 * ga - 819.2 * gc + gtx;
+        const x2 = -819.2 * ga + 819.2 * gc + gtx;
+        const y0 = -819.2 * gb - 819.2 * gd + gty;
+        const y1 = 819.2 * gb - 819.2 * gd + gty;
+        const y2 = -819.2 * gb + 819.2 * gd + gty;
+        let vx2 = x2 - x0;
+        let vy2 = y2 - y0;
+        const r1 = Math.sqrt(vx2 * vx2 + vy2 * vy2);
+        if (r1) {
+            vx2 = vx2 / r1;
+            vy2 = vy2 / r1;
+        }
+        else {
+            vx2 = 0;
+            vy2 = 0;
+        }
+        const r2 = (x1 - x0) * vx2 + (y1 - y0) * vy2;
+        // 点a, b（グラデーションの始点と終点）
+        // これらはグラデーション行列で変換された座標空間にある
+        const linearPoints = new Float32Array([
+            x0 + r2 * vx2, y0 + r2 * vy2, // 点a
+            x1, y1 // 点b
+        ]);
+        // WebGL版と同じ:
+        // v_uv = (inverse_matrix * uv_matrix * position).xy
+        // ここで inverse_matrix = inverse(context), uv_matrix = context
+        // つまり v_uv = inverse(context) * context * position = position (生の頂点座標)
+        //
+        // linearPointsはグラデーション行列変換後の座標空間にあり、
+        // フラグメントシェーダーで p = v_uv (生の頂点座標) と linearPoints を使って
+        // t = dot(ab, ap) / dot(ab, ab) を計算する
+        //
+        // シェーダーでは v_uv = inverseMatrix * position なので、
+        // inverseMatrix = 単位行列 にすることで v_uv = position になる
+        const inverseMatrix = new Float32Array([
+            1, 0, 0,
+            0, 1, 0,
+            0, 0, 1
+        ]);
+        return { inverseMatrix, linearPoints };
+    }
+    // === Radial gradient ===
+    // WebGPU版: グラデーション行列の逆行列のみを使用
+    // シェーダーでは v_uv = inverse(gradient) * position
+    // これにより、ローカル座標をグラデーション空間（-819.2 to 819.2）に変換
+    //
+    // 注意: WebGL版とは異なり、contextMatrixにはアトラスオフセットが含まれているため、
+    // contextMatrixを使った合成は行わない
+    // グラデーション行列の行列式
+    const det = ga * gd - gb * gc;
+    if (Math.abs(det) < 1e-10) {
+        return {
+            "inverseMatrix": new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]),
+            "linearPoints": null
+        };
+    }
+    const invDet = 1 / det;
+    // inverse(gradient) を計算
+    const invA = gd * invDet;
+    const invB = -gb * invDet;
+    const invC = -gc * invDet;
+    const invD = ga * invDet;
+    const invTx = (gc * gty - gd * gtx) * invDet;
+    const invTy = (gb * gtx - ga * gty) * invDet;
+    // 逆行列（シェーダーでは v_uv = inverseMatrix * position）
+    const inverseMatrix = new Float32Array([
+        invA, invB, 0,
+        invC, invD, 0,
+        invTx, invTy, 1
+    ]);
+    return { inverseMatrix, "linearPoints": null };
+};

package/src/Context/service/ContextFillSimpleService.d.ts

@@ -0,0 +1,2 @@
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (render_pass_encoder: GPURenderPassEncoder, pipeline_manager: PipelineManager, vertex_buffer: GPUBuffer, vertex_count: number, bind_group: GPUBindGroup, uniform_offset: number, use_atlas_target: boolean, use_stencil_pipeline?: boolean, _clip_level?: number) => void;

package/src/Context/service/ContextFillSimpleService.js

@@ -0,0 +1,28 @@
+import { $isMaskDrawing, $getMaskStencilReference } from "../../Mask";
+export const execute = (render_pass_encoder, pipeline_manager, vertex_buffer, vertex_count, bind_group, uniform_offset, use_atlas_target, use_stencil_pipeline = false, _clip_level = 1) => {
+    let pipelineName;
+    if (use_atlas_target) {
+        pipelineName = "fill";
+    }
+    else if (use_stencil_pipeline) {
+        if ($isMaskDrawing()) {
+            return;
+        }
+        pipelineName = "fill_bgra_stencil";
+    }
+    else {
+        pipelineName = "fill_bgra";
+    }
+    const pipeline = pipeline_manager.getPipeline(pipelineName);
+    if (!pipeline) {
+        console.error(`[WebGPU] ${pipelineName} pipeline not found`);
+        return;
+    }
+    render_pass_encoder.setPipeline(pipeline);
+    render_pass_encoder.setVertexBuffer(0, vertex_buffer);
+    render_pass_encoder.setBindGroup(0, bind_group, [uniform_offset]);
+    if (use_stencil_pipeline && !use_atlas_target && !$isMaskDrawing()) {
+        render_pass_encoder.setStencilReference($getMaskStencilReference());
+    }
+    render_pass_encoder.draw(vertex_count, 1, 0, 0);
+};

package/src/Context/service/ContextFillWithStencilMainService.d.ts

@@ -0,0 +1,2 @@
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (render_pass_encoder: GPURenderPassEncoder, pipeline_manager: PipelineManager, vertex_buffer: GPUBuffer, vertex_count: number, bind_group: GPUBindGroup, uniform_offset: number) => void;

package/src/Context/service/ContextFillWithStencilMainService.js

@@ -0,0 +1,19 @@
+export const execute = (render_pass_encoder, pipeline_manager, vertex_buffer, vertex_count, bind_group, uniform_offset) => {
+    // === Pass 1: ステンシル書き込み（両面を1回で処理） ===
+    const stencilWritePipeline = pipeline_manager.getPipeline("stencil_write_main");
+    if (stencilWritePipeline) {
+        render_pass_encoder.setPipeline(stencilWritePipeline);
+        render_pass_encoder.setStencilReference(0);
+        render_pass_encoder.setVertexBuffer(0, vertex_buffer);
+        render_pass_encoder.setBindGroup(0, bind_group, [uniform_offset]);
+        render_pass_encoder.draw(vertex_count, 1, 0, 0);
+    }
+    // === Pass 2: ステンシルフィル（色描画） ===
+    const fillPipeline = pipeline_manager.getPipeline("stencil_fill_main");
+    if (fillPipeline) {
+        render_pass_encoder.setPipeline(fillPipeline);
+        render_pass_encoder.setStencilReference(0);
+        render_pass_encoder.setBindGroup(0, bind_group, [uniform_offset]);
+        render_pass_encoder.draw(vertex_count, 1, 0, 0);
+    }
+};

package/src/Context/service/ContextFillWithStencilService.d.ts

@@ -0,0 +1,2 @@
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (render_pass_encoder: GPURenderPassEncoder, pipeline_manager: PipelineManager, vertex_buffer: GPUBuffer, vertex_count: number, bind_group: GPUBindGroup, uniform_offset: number) => void;

package/src/Context/service/ContextFillWithStencilService.js

@@ -0,0 +1,19 @@
+export const execute = (render_pass_encoder, pipeline_manager, vertex_buffer, vertex_count, bind_group, uniform_offset) => {
+    // === Pass 1: ステンシル書き込み（両面を1回で処理） ===
+    const stencilWritePipeline = pipeline_manager.getPipeline("stencil_write_atlas");
+    if (stencilWritePipeline) {
+        render_pass_encoder.setPipeline(stencilWritePipeline);
+        render_pass_encoder.setStencilReference(0);
+        render_pass_encoder.setVertexBuffer(0, vertex_buffer);
+        render_pass_encoder.setBindGroup(0, bind_group, [uniform_offset]);
+        render_pass_encoder.draw(vertex_count, 1, 0, 0);
+    }
+    // === Pass 2: ステンシルフィル（色描画） ===
+    const fillPipeline = pipeline_manager.getPipeline("stencil_fill_atlas");
+    if (fillPipeline) {
+        render_pass_encoder.setPipeline(fillPipeline);
+        render_pass_encoder.setStencilReference(0);
+        render_pass_encoder.setBindGroup(0, bind_group, [uniform_offset]);
+        render_pass_encoder.draw(vertex_count, 1, 0, 0);
+    }
+};

package/src/Context/usecase/ContextApplyFilterUseCase.d.ts

@@ -0,0 +1,5 @@
+import type { Node } from "@next2d/texture-packer";
+import type { IBlendMode } from "../../interface/IBlendMode";
+import type { ILocalFilterConfig } from "../../interface/ILocalFilterConfig";
+import type { BufferManager } from "../../BufferManager";
+export declare const execute: (node: Node, width: number, height: number, is_bitmap: boolean, matrix: Float32Array, color_transform: Float32Array, blend_mode: IBlendMode, bounds: Float32Array, params: Float32Array, config: ILocalFilterConfig, main_texture_view: GPUTextureView, buffer_manager: BufferManager) => void;