@next2d/webgpu 3.0.0

package/src/Context/usecase/ContextDrawIndirectUseCase.js

@@ -0,0 +1,154 @@
+import { getInstancedShaderManager } from "../../Blend/BlendInstancedManager";
+import { $currentBlendMode } from "../../Blend";
+import { renderQueue } from "@next2d/render-queue";
+import { $isMaskTestEnabled, $getMaskStencilReference } from "../../Mask";
+import { $getAtlasAttachmentObject } from "../../AtlasManager";
+let $cachedBindGroup = null;
+let $cachedAtlasView = null;
+export const execute = (device, commandEncoder, renderPassEncoder, mainAttachment, bufferManager, frameBufferManager, textureManager, pipelineManager, useIndirect = true, useStorageBuffer = true) => {
+    const shaderManager = getInstancedShaderManager();
+    if (shaderManager.count === 0) {
+        return renderPassEncoder;
+    }
+    // 既存のレンダーパスを終了
+    if (renderPassEncoder) {
+        renderPassEncoder.end();
+        renderPassEncoder = null;
+    }
+    const isMasked = $isMaskTestEnabled();
+    const maskReference = $getMaskStencilReference();
+    // 現在のブレンドモードを取得
+    const blendMode = $currentBlendMode;
+    // ブレンドモードに応じたパイプライン名を生成
+    const getPipelineName = (mode) => {
+        switch (mode) {
+            case "add":
+                return "instanced_add";
+            case "screen":
+                return "instanced_screen";
+            case "alpha":
+                return "instanced_alpha";
+            case "erase":
+                return "instanced_erase";
+            case "copy":
+                return "instanced_copy";
+            default:
+                // normal, layer
+                return "instanced";
+        }
+    };
+    const pipelineName = getPipelineName(blendMode);
+    const normalPipeline = pipelineManager.getPipeline(pipelineName);
+    const maskedPipeline = pipelineManager.getPipeline("instanced_masked");
+    const useStencil = isMasked && maskedPipeline
+        && (mainAttachment.msaaStencil?.view || mainAttachment.stencil?.view);
+    const pipeline = useStencil ? maskedPipeline : normalPipeline;
+    if (!pipeline) {
+        console.error("[WebGPU] Instanced pipeline not found");
+        return null;
+    }
+    // レンダーパスを作成
+    let passEncoder;
+    if (useStencil) {
+        // MSAA対応
+        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
+        const stencilView = useMsaa && mainAttachment.msaaStencil?.view
+            ? mainAttachment.msaaStencil.view : mainAttachment.stencil.view;
+        const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+        const renderPassDescriptor = frameBufferManager.createStencilRenderPassDescriptor(colorView, stencilView, "load", "load", resolveTarget);
+        passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    }
+    else {
+        // 通常のレンダーパス（MSAA対応）
+        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
+        const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+        const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+        passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    }
+    passEncoder.setPipeline(pipeline);
+    if (useStencil) {
+        passEncoder.setStencilReference(maskReference);
+    }
+    // インスタンスデータを準備
+    const instanceData = new Float32Array(renderQueue.buffer.buffer, renderQueue.buffer.byteOffset, renderQueue.offset);
+    // インスタンスバッファを作成または取得
+    let instanceBuffer;
+    if (useStorageBuffer) {
+        // Storage Buffer最適化: プールから再利用してメモリアロケーション削減
+        // Storage BufferはVERTEXフラグ付きで作成されているため、setVertexBufferで使用可能
+        instanceBuffer = bufferManager.acquireStorageBuffer(instanceData.byteLength);
+        bufferManager.writeStorageBuffer(instanceBuffer, instanceData);
+    }
+    else {
+        // 従来方式: プールから再利用
+        instanceBuffer = bufferManager.acquireVertexBuffer(instanceData.byteLength, instanceData);
+    }
+    // 頂点バッファ（矩形）を取得（キャッシュ済み）
+    const vertexBuffer = bufferManager.getUnitRectBuffer();
+    // アトラステクスチャをバインド（複数アトラス対応）
+    // AtlasManagerから取得、フォールバックとしてFrameBufferManagerから取得
+    const atlasAttachment = $getAtlasAttachmentObject() || frameBufferManager.getAttachment("atlas");
+    if (!atlasAttachment) {
+        console.error("[WebGPU] Atlas attachment not found");
+        passEncoder.end();
+        return null;
+    }
+    // アトラス用サンプラーを取得（キャッシュ済み）
+    const sampler = textureManager.createSampler("atlas_instanced_sampler", false);
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("instanced");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] Instanced bind group layout not found");
+        passEncoder.end();
+        return null;
+    }
+    // BindGroupキャッシュ: アトラスのテクスチャビューが同じなら再利用
+    const atlasView = atlasAttachment.texture.view;
+    if (!$cachedBindGroup || $cachedAtlasView !== atlasView) {
+        $cachedBindGroup = device.createBindGroup({
+            "layout": bindGroupLayout,
+            "entries": [
+                {
+                    "binding": 0,
+                    "resource": sampler
+                },
+                {
+                    "binding": 1,
+                    "resource": atlasView
+                }
+            ]
+        });
+        $cachedAtlasView = atlasView;
+    }
+    // 描画
+    passEncoder.setVertexBuffer(0, vertexBuffer);
+    passEncoder.setVertexBuffer(1, instanceBuffer);
+    passEncoder.setBindGroup(0, $cachedBindGroup);
+    if (useIndirect) {
+        // Indirect Drawing: CPU-GPU間のオーバーヘッドを削減
+        // 注意: 1フレーム内で複数回呼び出される場合があるため、
+        // 毎回新しいIndirect Bufferを作成する必要がある
+        // （共有バッファを使うとqueue.writeBufferの更新が全てGPU実行前に行われ、
+        // 全てのdrawIndirectが最後の更新値を使用してしまう）
+        const indirectBuffer = bufferManager.createIndirectBuffer(6, // vertexCount (2 triangles = 6 vertices)
+        shaderManager.count, // instanceCount
+        0, // firstVertex
+        0 // firstInstance
+        );
+        passEncoder.drawIndirect(indirectBuffer, 0);
+    }
+    else {
+        // 通常の描画
+        passEncoder.draw(6, shaderManager.count, 0, 0);
+    }
+    // レンダーパスを終了
+    passEncoder.end();
+    // 注意: Storage Bufferはここで解放しない
+    // GPUがまだ描画を実行していないため、同一フレーム内で再利用されると
+    // データが上書きされてしまう。
+    // フレーム終了時（clearFrameBuffers）でまとめて解放される。
+    // インスタンスデータをクリア
+    shaderManager.clear();
+    return null;
+};

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

@@ -0,0 +1,4 @@
+import type { IPath } from "../../interface/IPath";
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, path_vertices: IPath[], context_matrix: Float32Array, fill_style: Float32Array, type: number, stops: number[], gradient_matrix: Float32Array, spread: number, interpolation: number, focal: number, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline?: boolean, _clip_level?: number) => GPUTexture | null;

package/src/Context/usecase/ContextGradientFillUseCase.js

@@ -0,0 +1,230 @@
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { generateGradientLUT, getAdaptiveResolution } from "../../Gradient/GradientLUTGenerator";
+import { execute as contextComputeGradientMatrixService } from "../service/ContextComputeGradientMatrixService";
+import { $getLUTFromCache, $putLUTToCache } from "../../Gradient/GradientLUTCache";
+import { $acquireFillTexture } from "../../FillTexturePool";
+import { $isMaskDrawing, $getMaskStencilReference } from "../../Mask";
+let $gradientSampler = null;
+const $uniformData36 = new Float32Array(36);
+const $stencilData16 = new Float32Array(16);
+let $stencilDynamicBindGroup = null;
+let $stencilDynamicBuffer = null;
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, path_vertices, context_matrix, fill_style, type, stops, gradient_matrix, spread, interpolation, focal, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline = false, _clip_level = 1) => {
+    // MeshFillGenerateUseCaseで頂点データを生成（4 floats/vertex: position + bezier）
+    const mesh = meshFillGenerateUseCase(path_vertices);
+    if (mesh.indexCount === 0) {
+        return null;
+    }
+    // 頂点バッファを取得（プールから再利用）
+    const vertexBuffer = buffer_manager.acquireVertexBuffer(mesh.buffer.byteLength, mesh.buffer);
+    // グラデーションLUTテクスチャを取得（キャッシュ優先）
+    let lutTexture;
+    let lutView;
+    const cachedLUT = $getLUTFromCache(stops, spread, interpolation);
+    if (cachedLUT) {
+        lutTexture = cachedLUT.texture;
+        lutView = cachedLUT.view;
+    }
+    else {
+        const lutData = generateGradientLUT(stops, spread, interpolation);
+        const stopsLength = stops.length / 5;
+        const lutResolution = getAdaptiveResolution(stopsLength);
+        lutTexture = $acquireFillTexture(device, lutResolution, 1);
+        device.queue.writeTexture({ "texture": lutTexture }, lutData, { "bytesPerRow": lutResolution * 4, "rowsPerImage": 1 }, { "width": lutResolution, "height": 1 });
+        lutView = lutTexture.createView();
+        $putLUTToCache(stops, spread, interpolation, lutTexture, lutView);
+    }
+    // WebGL版と同じ計算でグラデーション変換データを取得
+    const gradientData = contextComputeGradientMatrixService(gradient_matrix, context_matrix, type);
+    // グラデーション描画では色は白（1, 1, 1, alpha）を使用
+    const alpha = fill_style[3] > 0 ? fill_style[3] : 1;
+    // 行列を取得
+    const a = context_matrix[0];
+    const b = context_matrix[1];
+    const c = context_matrix[3];
+    const d = context_matrix[4];
+    const tx = context_matrix[6];
+    const ty = context_matrix[7];
+    // Uniformバッファを作成
+    // GradientUniforms構造体:
+    // - inverseMatrix: mat3x3<f32> (各列がvec4にパディング = 48 bytes)
+    // - gradientType, focal, spread, radius (16 bytes)
+    // - linearPoints: vec4<f32> (16 bytes)
+    // - color: vec4<f32> (16 bytes)
+    // - contextMatrix0/1/2: vec4<f32> x3 (48 bytes)
+    // 合計: 144 bytes = 36 floats → 使用する配列は32 floats（パディング込み）
+    $uniformData36[0] = gradientData.inverseMatrix[0]; // column 0, row 0 (a)
+    $uniformData36[1] = gradientData.inverseMatrix[3]; // column 0, row 1 (c)
+    $uniformData36[2] = 0; // column 0, row 2 (0)
+    $uniformData36[3] = 0; // padding
+    $uniformData36[4] = gradientData.inverseMatrix[1]; // column 1, row 0 (b)
+    $uniformData36[5] = gradientData.inverseMatrix[4]; // column 1, row 1 (d)
+    $uniformData36[6] = 0; // column 1, row 2 (0)
+    $uniformData36[7] = 0; // padding
+    $uniformData36[8] = gradientData.inverseMatrix[6]; // column 2, row 0 (tx)
+    $uniformData36[9] = gradientData.inverseMatrix[7]; // column 2, row 1 (ty)
+    $uniformData36[10] = 1; // column 2, row 2 (1)
+    $uniformData36[11] = 0; // padding
+    // グラデーションパラメータ
+    $uniformData36[12] = type; // gradientType
+    $uniformData36[13] = Math.max(-0.975, Math.min(0.975, focal)); // focal
+    $uniformData36[14] = spread; // spread (0: reflect, 1: repeat, 2: pad)
+    $uniformData36[15] = 819.2; // radius（Radial用、WebGL版と同じ定数）
+    // Linear用の点a, b
+    if (gradientData.linearPoints) {
+        $uniformData36[16] = gradientData.linearPoints[0]; // a.x
+        $uniformData36[17] = gradientData.linearPoints[1]; // a.y
+        $uniformData36[18] = gradientData.linearPoints[2]; // b.x
+        $uniformData36[19] = gradientData.linearPoints[3]; // b.y
+    }
+    else {
+        $uniformData36[16] = 0;
+        $uniformData36[17] = 0;
+        $uniformData36[18] = 0;
+        $uniformData36[19] = 0;
+    }
+    // color (白 + alpha)
+    $uniformData36[20] = 1; // red
+    $uniformData36[21] = 1; // green
+    $uniformData36[22] = 1; // blue
+    $uniformData36[23] = alpha;
+    // contextMatrix（viewport正規化済み）
+    $uniformData36[24] = a / viewport_width;
+    $uniformData36[25] = b / viewport_height;
+    $uniformData36[26] = 0;
+    $uniformData36[27] = 0;
+    $uniformData36[28] = c / viewport_width;
+    $uniformData36[29] = d / viewport_height;
+    $uniformData36[30] = 0;
+    $uniformData36[31] = 0;
+    // contextMatrix2
+    $uniformData36[32] = tx / viewport_width;
+    $uniformData36[33] = ty / viewport_height;
+    $uniformData36[34] = 1;
+    $uniformData36[35] = 0;
+    const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniformData36);
+    // サンプラーを作成（キャッシュ済み）
+    if (!$gradientSampler) {
+        $gradientSampler = device.createSampler({
+            "magFilter": "linear",
+            "minFilter": "linear",
+            "addressModeU": "clamp-to-edge",
+            "addressModeV": "clamp-to-edge"
+        });
+    }
+    const sampler = $gradientSampler;
+    // バインドグループを作成
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("gradient_fill");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] gradient_fill bind group layout not found");
+        return null;
+    }
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = lutView;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    // ステンシル書き込みパス用のDynamic BindGroup + offsetを作成
+    // stencil_write_atlas / stencil_write_main はFillUniforms（color+matrix）を期待する
+    const createStencilDynamic = () => {
+        const dynamicLayout = pipeline_manager.getBindGroupLayout("fill_dynamic");
+        if (!dynamicLayout) {
+            return null;
+        }
+        // FillUniformsと同じレイアウト: color(16) + matrix0(16) + matrix1(16) + matrix2(16) = 64 bytes
+        $stencilData16[0] = 1; // red
+        $stencilData16[1] = 1; // green
+        $stencilData16[2] = 1; // blue
+        $stencilData16[3] = alpha;
+        $stencilData16[4] = a / viewport_width;
+        $stencilData16[5] = b / viewport_height;
+        $stencilData16[6] = 0;
+        $stencilData16[7] = 0;
+        $stencilData16[8] = c / viewport_width;
+        $stencilData16[9] = d / viewport_height;
+        $stencilData16[10] = 0;
+        $stencilData16[11] = 0;
+        $stencilData16[12] = tx / viewport_width;
+        $stencilData16[13] = ty / viewport_height;
+        $stencilData16[14] = 1;
+        $stencilData16[15] = 0;
+        const offset = buffer_manager.dynamicUniform.allocate($stencilData16);
+        const currentBuffer = buffer_manager.dynamicUniform.getBuffer();
+        if (!$stencilDynamicBindGroup || $stencilDynamicBuffer !== currentBuffer) {
+            $stencilDynamicBindGroup = device.createBindGroup({
+                "layout": dynamicLayout,
+                "entries": [{
+                        "binding": 0,
+                        "resource": {
+                            "buffer": currentBuffer,
+                            "size": 256
+                        }
+                    }]
+            });
+            $stencilDynamicBuffer = currentBuffer;
+        }
+        return { "bindGroup": $stencilDynamicBindGroup, "offset": offset };
+    };
+    // アトラス描画時：2パスステンシルフィル（WebGL版と同じアルゴリズム）
+    // これにより中抜き描画（hollow shape）が正しく機能する
+    if (use_atlas_target) {
+        // === Pass 1: ステンシル書き込み ===
+        const stencilWritePipeline = pipeline_manager.getPipeline("stencil_write_atlas");
+        if (stencilWritePipeline) {
+            const stencilDynamic = createStencilDynamic();
+            render_pass_encoder.setPipeline(stencilWritePipeline);
+            render_pass_encoder.setStencilReference(0);
+            render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+            if (stencilDynamic) {
+                render_pass_encoder.setBindGroup(0, stencilDynamic.bindGroup, [stencilDynamic.offset]);
+            }
+            render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+        }
+        // === Pass 2: グラデーション描画（ステンシルテスト付き） ===
+        const gradientPipeline = pipeline_manager.getGradientPipeline("gradient_fill_stencil_atlas", type, spread);
+        if (gradientPipeline) {
+            render_pass_encoder.setPipeline(gradientPipeline);
+            render_pass_encoder.setStencilReference(0);
+            render_pass_encoder.setBindGroup(0, bindGroup);
+            render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+        }
+        return null;
+    }
+    // キャンバスへの直接描画
+    if (use_stencil_pipeline && $isMaskDrawing()) {
+        return null;
+    }
+    // === メインキャンバス直接描画: 2パスステンシルフィル ===
+    // === Pass 1: ステンシル書き込み ===
+    const stencilWritePipeline = pipeline_manager.getPipeline("stencil_write_main");
+    if (stencilWritePipeline) {
+        const stencilDynamic = createStencilDynamic();
+        render_pass_encoder.setPipeline(stencilWritePipeline);
+        render_pass_encoder.setStencilReference(0);
+        render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+        if (stencilDynamic) {
+            render_pass_encoder.setBindGroup(0, stencilDynamic.bindGroup, [stencilDynamic.offset]);
+        }
+        render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    }
+    // === Pass 2: グラデーション描画（ステンシルテスト付き） ===
+    const pipelineName = use_stencil_pipeline
+        ? "gradient_fill_bgra_stencil_masked"
+        : "gradient_fill_stencil_main";
+    const gradientPipeline = pipeline_manager.getGradientPipeline(pipelineName, type, spread);
+    if (gradientPipeline) {
+        render_pass_encoder.setPipeline(gradientPipeline);
+        render_pass_encoder.setStencilReference(use_stencil_pipeline ? $getMaskStencilReference() : 0);
+        render_pass_encoder.setBindGroup(0, bindGroup);
+        render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    }
+    // LUTテクスチャはキャッシュ管理
+    return null;
+};

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

@@ -0,0 +1,4 @@
+import type { IPath } from "../../interface/IPath";
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, vertices: IPath[], thickness: number, context_matrix: Float32Array, stroke_style: Float32Array, type: number, stops: number[], gradient_matrix: Float32Array, spread: number, interpolation: number, focal: number, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline: boolean) => GPUTexture | null;

package/src/Context/usecase/ContextGradientStrokeUseCase.js

@@ -0,0 +1,138 @@
+import { execute as meshGradientStrokeGenerateUseCase } from "../../Mesh/usecase/MeshGradientStrokeGenerateUseCase";
+import { generateGradientLUT, getAdaptiveResolution } from "../../Gradient/GradientLUTGenerator";
+import { execute as contextComputeGradientMatrixService } from "../service/ContextComputeGradientMatrixService";
+import { $getLUTFromCache, $putLUTToCache } from "../../Gradient/GradientLUTCache";
+import { $acquireFillTexture } from "../../FillTexturePool";
+let $gradientSampler = null;
+const $uniformData36 = new Float32Array(36);
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, vertices, thickness, context_matrix, stroke_style, type, stops, gradient_matrix, spread, interpolation, focal, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline) => {
+    // グラデーションストローク用メッシュを生成（4 floats/vertex: position + bezier）
+    const mesh = meshGradientStrokeGenerateUseCase(vertices, thickness);
+    if (mesh.indexCount === 0) {
+        return null;
+    }
+    // 頂点バッファを取得（プールから再利用）
+    const vertexBuffer = buffer_manager.acquireVertexBuffer(mesh.buffer.byteLength, mesh.buffer);
+    // グラデーションLUTテクスチャを取得（キャッシュ優先）
+    let lutTexture;
+    let lutView;
+    const cachedLUT = $getLUTFromCache(stops, spread, interpolation);
+    if (cachedLUT) {
+        lutTexture = cachedLUT.texture;
+        lutView = cachedLUT.view;
+    }
+    else {
+        const lutData = generateGradientLUT(stops, spread, interpolation);
+        const stopsLength = stops.length / 5;
+        const lutResolution = getAdaptiveResolution(stopsLength);
+        lutTexture = $acquireFillTexture(device, lutResolution, 1);
+        device.queue.writeTexture({ "texture": lutTexture }, lutData, { "bytesPerRow": lutResolution * 4, "rowsPerImage": 1 }, { "width": lutResolution, "height": 1 });
+        lutView = lutTexture.createView();
+        $putLUTToCache(stops, spread, interpolation, lutTexture, lutView);
+    }
+    // WebGL版と同じ計算でグラデーション変換データを取得
+    const gradientData = contextComputeGradientMatrixService(gradient_matrix, context_matrix, type);
+    // 色とmatrix
+    const alpha = stroke_style[3] > 0 ? stroke_style[3] : 1;
+    const a = context_matrix[0];
+    const b = context_matrix[1];
+    const c = context_matrix[3];
+    const d = context_matrix[4];
+    const tx = context_matrix[6];
+    const ty = context_matrix[7];
+    // Uniformバッファを作成（GradientUniforms: 36 floats = 144 bytes）
+    $uniformData36[0] = gradientData.inverseMatrix[0]; // column 0, row 0 (a)
+    $uniformData36[1] = gradientData.inverseMatrix[3]; // column 0, row 1 (c)
+    $uniformData36[2] = 0; // column 0, row 2 (0)
+    $uniformData36[3] = 0; // padding
+    $uniformData36[4] = gradientData.inverseMatrix[1]; // column 1, row 0 (b)
+    $uniformData36[5] = gradientData.inverseMatrix[4]; // column 1, row 1 (d)
+    $uniformData36[6] = 0; // column 1, row 2 (0)
+    $uniformData36[7] = 0; // padding
+    $uniformData36[8] = gradientData.inverseMatrix[6]; // column 2, row 0 (tx)
+    $uniformData36[9] = gradientData.inverseMatrix[7]; // column 2, row 1 (ty)
+    $uniformData36[10] = 1; // column 2, row 2 (1)
+    $uniformData36[11] = 0; // padding
+    // グラデーションパラメータ
+    $uniformData36[12] = type; // gradientType
+    $uniformData36[13] = Math.max(-0.975, Math.min(0.975, focal)); // focal
+    $uniformData36[14] = spread; // spread (0: reflect, 1: repeat, 2: pad)
+    $uniformData36[15] = 819.2; // radius
+    // Linear用の点a, b
+    if (gradientData.linearPoints) {
+        $uniformData36[16] = gradientData.linearPoints[0]; // a.x
+        $uniformData36[17] = gradientData.linearPoints[1]; // a.y
+        $uniformData36[18] = gradientData.linearPoints[2]; // b.x
+        $uniformData36[19] = gradientData.linearPoints[3]; // b.y
+    }
+    else {
+        $uniformData36[16] = 0;
+        $uniformData36[17] = 0;
+        $uniformData36[18] = 0;
+        $uniformData36[19] = 0;
+    }
+    // color (白 + alpha)
+    $uniformData36[20] = 1;
+    $uniformData36[21] = 1;
+    $uniformData36[22] = 1;
+    $uniformData36[23] = alpha;
+    // contextMatrix（viewport正規化済み）
+    $uniformData36[24] = a / viewport_width;
+    $uniformData36[25] = b / viewport_height;
+    $uniformData36[26] = 0;
+    $uniformData36[27] = 0;
+    $uniformData36[28] = c / viewport_width;
+    $uniformData36[29] = d / viewport_height;
+    $uniformData36[30] = 0;
+    $uniformData36[31] = 0;
+    $uniformData36[32] = tx / viewport_width;
+    $uniformData36[33] = ty / viewport_height;
+    $uniformData36[34] = 1;
+    $uniformData36[35] = 0;
+    const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniformData36);
+    // サンプラーを取得（キャッシュ済み）
+    if (!$gradientSampler) {
+        $gradientSampler = device.createSampler({
+            "magFilter": "linear",
+            "minFilter": "linear",
+            "addressModeU": "clamp-to-edge",
+            "addressModeV": "clamp-to-edge"
+        });
+    }
+    const sampler = $gradientSampler;
+    // バインドグループを作成
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("gradient_fill");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] gradient_fill bind group layout not found");
+        return null;
+    }
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = lutView;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    // ストロークのメッシュは各セグメントが独立した凸多角形のため、
+    // フィルのような2パスステンシル描画は不要で、直接描画で正しく描画される。
+    // ステンシル付きレンダーパスの場合はステンシル互換パイプライン（compare: always）を使用する。
+    const pipelineName = use_stencil_pipeline
+        ? use_atlas_target ? "gradient_stroke_atlas" : "gradient_stroke_bgra"
+        : use_atlas_target ? "gradient_fill" : "gradient_fill_bgra";
+    const pipeline = pipeline_manager.getGradientPipeline(pipelineName, type, spread);
+    if (!pipeline) {
+        console.error(`[WebGPU] ${pipelineName} pipeline not found`);
+        return null;
+    }
+    render_pass_encoder.setPipeline(pipeline);
+    render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+    render_pass_encoder.setBindGroup(0, bindGroup);
+    render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    // LUTテクスチャはキャッシュ管理
+    return null;
+};

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

@@ -0,0 +1,6 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { BufferManager } from "../../BufferManager";
+import type { FrameBufferManager } from "../../FrameBufferManager";
+import type { TextureManager } from "../../TextureManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, commandEncoder: GPUCommandEncoder, mainAttachment: IAttachmentObject | null, frameBufferManager: FrameBufferManager, textureManager: TextureManager, pipelineManager: PipelineManager, bufferManager: BufferManager) => void;