@next2d/webgpu 3.0.0

package/src/Mask/service/MaskUnionMaskService.js

@@ -0,0 +1,74 @@
+/**
+ * @description マスクの合成処理（ネストされたマスク対応）
+ *              WebGL版と同様に、レベル7を超えたステンシルビットをマージする
+ *
+ * @param {GPUDevice} device
+ * @param {GPURenderPassEncoder} renderPassEncoder
+ * @param {BufferManager} bufferManager
+ * @param {PipelineManager} pipelineManager
+ * @param {IAttachmentObject} currentAttachment
+ * @return {void}
+ * @method
+ * @protected
+ */
+// フルスクリーン矩形（4 floats/vertex: position + bezier）
+const $rectVertices = new Float32Array([
+    // Triangle 1
+    -1, -1, 0.5, 0.5,
+    1, -1, 0.5, 0.5,
+    -1, 1, 0.5, 0.5,
+    // Triangle 2
+    -1, 1, 0.5, 0.5,
+    1, -1, 0.5, 0.5,
+    1, 1, 0.5, 0.5
+]);
+// FillUniforms: identity matrix + white color (NDC座標なので変換不要)
+const $uniformData16 = new Float32Array([
+    1, 1, 1, 1, // color: white
+    0.5, 0, 0, 0, // matrix0: (0.5, 0, 0, pad) → identity-like for NDC passthrough
+    0, 0.5, 0, 0, // matrix1: (0, 0.5, 0, pad)
+    0.5, 0.5, 1, 0 // matrix2: (0.5, 0.5, 1, pad)
+]);
+export const execute = (device, renderPassEncoder, bufferManager, pipelineManager, currentAttachment) => {
+    if (!currentAttachment) {
+        return;
+    }
+    const clipLevel = currentAttachment.clipLevel;
+    const mask = 1 << clipLevel - 1;
+    const vertexBuffer = bufferManager.acquireVertexBuffer($rectVertices.byteLength, $rectVertices);
+    // Dynamic Uniform Bufferにデータを書き込み
+    const uniformOffset = bufferManager.dynamicUniform.allocate($uniformData16);
+    // Dynamic BindGroupを取得
+    const layout = pipelineManager.getBindGroupLayout("fill_dynamic");
+    if (!layout) {
+        return;
+    }
+    const bindGroup = device.createBindGroup({
+        "layout": layout,
+        "entries": [{
+                "binding": 0,
+                "resource": {
+                    "buffer": bufferManager.dynamicUniform.getBuffer(),
+                    "size": 256
+                }
+            }]
+    });
+    // === Pass 1: ステンシルビットのマージ ===
+    const mergePipeline = pipelineManager.getPipeline(`mask_union_merge_${clipLevel}`);
+    if (mergePipeline) {
+        renderPassEncoder.setPipeline(mergePipeline);
+        renderPassEncoder.setStencilReference(mask);
+        renderPassEncoder.setVertexBuffer(0, vertexBuffer);
+        renderPassEncoder.setBindGroup(0, bindGroup, [uniformOffset]);
+        renderPassEncoder.draw(6, 1, 0, 0);
+    }
+    // === Pass 2: 上位ビットのクリア ===
+    const clearPipeline = pipelineManager.getPipeline(`mask_union_clear_${clipLevel}`);
+    if (clearPipeline) {
+        renderPassEncoder.setPipeline(clearPipeline);
+        renderPassEncoder.setStencilReference(0);
+        renderPassEncoder.setVertexBuffer(0, vertexBuffer);
+        renderPassEncoder.setBindGroup(0, bindGroup, [uniformOffset]);
+        renderPassEncoder.draw(6, 1, 0, 0);
+    }
+};

package/src/Mask/usecase/MaskBindUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description マスクOn/Offに合わせたバインド処理
+ *              Binding process according to mask On/Off
+ *
+ * @param  {boolean} mask
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (mask: boolean) => void;

package/src/Mask/usecase/MaskBindUseCase.js

@@ -0,0 +1,20 @@
+import { execute as maskEndMaskService } from "../service/MaskEndMaskService";
+import { $isMaskDrawing, $setMaskDrawing } from "../../Mask";
+/**
+ * @description マスクOn/Offに合わせたバインド処理
+ *              Binding process according to mask On/Off
+ *
+ * @param  {boolean} mask
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (mask) => {
+    if (!mask && $isMaskDrawing()) {
+        $setMaskDrawing(false);
+    }
+    else if (mask && !$isMaskDrawing()) {
+        $setMaskDrawing(true);
+        maskEndMaskService();
+    }
+};

package/src/Mask/usecase/MaskLeaveMaskUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description マスクの終了処理
+ *              End mask processing
+ *
+ * WebGL版と同じ:
+ * - 単体マスク終了時: ステンシルバッファをクリア
+ * - ネストマスク終了時: 上位レベルのステンシルビットをクリア
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/usecase/MaskLeaveMaskUseCase.js

@@ -0,0 +1,51 @@
+import { execute as maskEndMaskService } from "../service/MaskEndMaskService";
+import { $setMaskDrawing, $setMaskTestEnabled, $setMaskStencilReference, $clipBounds, $clipLevels } from "../../Mask";
+import { $context, $poolFloat32Array4 } from "../../WebGPUUtil";
+/**
+ * @description マスクの終了処理
+ *              End mask processing
+ *
+ * WebGL版と同じ:
+ * - 単体マスク終了時: ステンシルバッファをクリア
+ * - ネストマスク終了時: 上位レベルのステンシルビットをクリア
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    const clipLevel = currentAttachmentObject.clipLevel;
+    const bounds = $clipBounds.get(clipLevel);
+    if (bounds) {
+        // レベルと描画範囲を削除
+        $clipBounds.delete(clipLevel);
+        $poolFloat32Array4(bounds);
+    }
+    $clipLevels.delete(clipLevel);
+    // 単体のマスクであれば終了
+    --currentAttachmentObject.clipLevel;
+    if (!currentAttachmentObject.clipLevel) {
+        currentAttachmentObject.mask = false;
+        $setMaskDrawing(false);
+        // マスクテストを無効化
+        $setMaskTestEnabled(false);
+        $setMaskStencilReference(0);
+        // WebGL版と同じ: ステンシルバッファをクリア
+        // WebGPUでは次のレンダーパス開始時にステンシルがクリアされる
+        // ステンシルクリアフラグを設定
+        currentAttachmentObject.needsStencilClear = true;
+        $clipLevels.clear();
+        $clipBounds.clear();
+        return;
+    }
+    // ネストされたマスクの場合、上位レベルのステンシルビットをクリア
+    // WebGL版と同じ: stencilMask(1 << clipLevel), stencilOp(REPLACE, REPLACE, REPLACE)
+    // ステンシルクリアフラグを設定（特定のビットのみクリア）
+    currentAttachmentObject.pendingStencilClearLevel = currentAttachmentObject.clipLevel;
+    // 親マスクの設定に戻す
+    maskEndMaskService();
+};

package/src/Mask.d.ts

@@ -0,0 +1,12 @@
+export declare const $setMaskDrawing: (state: boolean) => void;
+export declare const $isMaskDrawing: () => boolean;
+export declare const $setMaskTestEnabled: (enabled: boolean) => void;
+export declare const $isMaskTestEnabled: () => boolean;
+export declare const $setMaskStencilReference: (value: number) => void;
+export declare const $getMaskStencilReference: () => number;
+export declare const $pushMaskAttachment: (attachment: any) => void;
+export declare const $popMaskAttachment: () => any;
+export declare const $hasMaskAttachment: () => boolean;
+export declare const $clipBounds: Map<number, Float32Array>;
+export declare const $clipLevels: Map<number, number>;
+export declare const $resetMaskState: () => void;

package/src/Mask.js

@@ -0,0 +1,41 @@
+let $maskDrawingState = false;
+export const $setMaskDrawing = (state) => {
+    $maskDrawingState = state;
+};
+export const $isMaskDrawing = () => {
+    return $maskDrawingState;
+};
+let $maskTestEnabled = false;
+let $maskStencilReference = 0;
+export const $setMaskTestEnabled = (enabled) => {
+    $maskTestEnabled = enabled;
+};
+export const $isMaskTestEnabled = () => {
+    return $maskTestEnabled;
+};
+export const $setMaskStencilReference = (value) => {
+    $maskStencilReference = value;
+};
+export const $getMaskStencilReference = () => {
+    return $maskStencilReference;
+};
+const $maskAttachmentStack = [];
+export const $pushMaskAttachment = (attachment) => {
+    $maskAttachmentStack.push(attachment);
+};
+export const $popMaskAttachment = () => {
+    return $maskAttachmentStack.pop();
+};
+export const $hasMaskAttachment = () => {
+    return $maskAttachmentStack.length > 0;
+};
+export const $clipBounds = new Map();
+export const $clipLevels = new Map();
+export const $resetMaskState = () => {
+    $maskDrawingState = false;
+    $maskTestEnabled = false;
+    $maskStencilReference = 0;
+    $maskAttachmentStack.length = 0;
+    $clipBounds.clear();
+    $clipLevels.clear();
+};

package/src/Mesh/service/MeshFillGenerateService.d.ts

@@ -0,0 +1,19 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description 塗りのメッシュを生成する（Loop-Blinn方式対応）
+ *              Generate a fill mesh with Loop-Blinn method support
+ *
+ * 頂点フォーマット（4 floats per vertex）:
+ * - position: x, y (2 floats)
+ * - bezier: u, v (2 floats) - Loop-Blinn用の暗黙的関数座標
+ *
+ * color/matrixはuniform bufferで供給される
+ *
+ * @param  {IPath} vertex
+ * @param  {Float32Array} buffer
+ * @param  {number} index - 現在の頂点インデックス
+ * @return {number} 新しい頂点インデックス
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex: IPath, buffer: Float32Array, index: number) => number;

package/src/Mesh/service/MeshFillGenerateService.js

@@ -0,0 +1,76 @@
+/**
+ * @description 塗りのメッシュを生成する（Loop-Blinn方式対応）
+ *              Generate a fill mesh with Loop-Blinn method support
+ *
+ * 頂点フォーマット（4 floats per vertex）:
+ * - position: x, y (2 floats)
+ * - bezier: u, v (2 floats) - Loop-Blinn用の暗黙的関数座標
+ *
+ * color/matrixはuniform bufferで供給される
+ *
+ * @param  {IPath} vertex
+ * @param  {Float32Array} buffer
+ * @param  {number} index - 現在の頂点インデックス
+ * @return {number} 新しい頂点インデックス
+ * @method
+ * @protected
+ */
+export const execute = (vertex, buffer, index) => {
+    const length = vertex.length - 5;
+    for (let idx = 3; idx < length; idx += 3) {
+        let position = index * 4;
+        if (vertex[idx + 2]) {
+            // 座標A
+            buffer[position++] = vertex[idx - 3];
+            buffer[position++] = vertex[idx - 2];
+            buffer[position++] = 0;
+            buffer[position++] = 0;
+            // 座標B
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0;
+            // 座標C
+            buffer[position++] = vertex[idx + 3];
+            buffer[position++] = vertex[idx + 4];
+            buffer[position++] = 1;
+            buffer[position++] = 1;
+        }
+        else if (vertex[idx + 5]) {
+            // 座標A
+            buffer[position++] = vertex[0];
+            buffer[position++] = vertex[1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標B
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標C
+            buffer[position++] = vertex[idx + 6];
+            buffer[position++] = vertex[idx + 7];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+        }
+        else {
+            // 座標A
+            buffer[position++] = vertex[0];
+            buffer[position++] = vertex[1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標B
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標C
+            buffer[position++] = vertex[idx + 3];
+            buffer[position++] = vertex[idx + 4];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+        }
+        index += 3;
+    }
+    return index;
+};

package/src/Mesh/service/MeshLerpService.d.ts

@@ -0,0 +1,13 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 線形補間
+ *              Linear interpolation
+ *
+ * @param  {IPoint} pointA
+ * @param  {IPoint} pointB
+ * @param  {number} t
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export declare const execute: (pointA: IPoint, pointB: IPoint, t: number) => IPoint;

package/src/Mesh/service/MeshLerpService.js

@@ -0,0 +1,17 @@
+/**
+ * @description 線形補間
+ *              Linear interpolation
+ *
+ * @param  {IPoint} pointA
+ * @param  {IPoint} pointB
+ * @param  {number} t
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export const execute = (pointA, pointB, t) => {
+    return {
+        "x": pointA.x + (pointB.x - pointA.x) * t,
+        "y": pointA.y + (pointB.y - pointA.y) * t
+    };
+};

package/src/Mesh/service/MeshStrokeFillGenerateService.d.ts

@@ -0,0 +1,19 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description ストローク塗りつぶし用のメッシュを生成する（bezier座標は常に0.5, 0.5）
+ *              Generate a mesh for stroke fill (bezier coordinates are always 0.5, 0.5)
+ *
+ * 頂点フォーマット（4 floats per vertex）:
+ * - position: x, y (2 floats)
+ * - bezier: u, v (2 floats) - 常に (0.5, 0.5) を設定
+ *
+ * color/matrixはuniform bufferで供給される
+ *
+ * @param  {IPath} vertex
+ * @param  {Float32Array} buffer
+ * @param  {number} index - 現在の頂点インデックス
+ * @return {number} 新しい頂点インデックス
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex: IPath, buffer: Float32Array, index: number) => number;

package/src/Mesh/service/MeshStrokeFillGenerateService.js

@@ -0,0 +1,76 @@
+/**
+ * @description ストローク塗りつぶし用のメッシュを生成する（bezier座標は常に0.5, 0.5）
+ *              Generate a mesh for stroke fill (bezier coordinates are always 0.5, 0.5)
+ *
+ * 頂点フォーマット（4 floats per vertex）:
+ * - position: x, y (2 floats)
+ * - bezier: u, v (2 floats) - 常に (0.5, 0.5) を設定
+ *
+ * color/matrixはuniform bufferで供給される
+ *
+ * @param  {IPath} vertex
+ * @param  {Float32Array} buffer
+ * @param  {number} index - 現在の頂点インデックス
+ * @return {number} 新しい頂点インデックス
+ * @method
+ * @protected
+ */
+export const execute = (vertex, buffer, index) => {
+    const length = vertex.length - 5;
+    for (let idx = 3; idx < length; idx += 3) {
+        let position = index * 4;
+        if (vertex[idx + 2]) {
+            // 座標A (始点)
+            buffer[position++] = vertex[idx - 3];
+            buffer[position++] = vertex[idx - 2];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標B (制御点)
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標C (終点)
+            buffer[position++] = vertex[idx + 3];
+            buffer[position++] = vertex[idx + 4];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+        }
+        else if (vertex[idx + 5]) {
+            // 座標A (基点)
+            buffer[position++] = vertex[0];
+            buffer[position++] = vertex[1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標B (現在点)
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標C (次の次の点)
+            buffer[position++] = vertex[idx + 6];
+            buffer[position++] = vertex[idx + 7];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+        }
+        else {
+            // 座標A (基点)
+            buffer[position++] = vertex[0];
+            buffer[position++] = vertex[1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標B (現在点)
+            buffer[position++] = vertex[idx];
+            buffer[position++] = vertex[idx + 1];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+            // 座標C (次の点)
+            buffer[position++] = vertex[idx + 3];
+            buffer[position++] = vertex[idx + 4];
+            buffer[position++] = 0.5;
+            buffer[position++] = 0.5;
+        }
+        index += 3;
+    }
+    return index;
+};

package/src/Mesh/usecase/MeshBitmapStrokeGenerateUseCase.d.ts

@@ -0,0 +1,13 @@
+import type { IPath } from "../../interface/IPath";
+import type { IMeshResult } from "../../interface/IMeshResult";
+/**
+ * @description ビットマップストローク用のメッシュを生成する
+ *              Generate a mesh for bitmap stroke
+ *
+ * @param  {IPath[]} vertices
+ * @param  {number} thickness
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertices: IPath[], thickness: number) => IMeshResult;

package/src/Mesh/usecase/MeshBitmapStrokeGenerateUseCase.js

@@ -0,0 +1,65 @@
+import { generateStrokeOutline } from "./MeshStrokeGenerateUseCase";
+import { execute as meshStrokeFillGenerateService } from "../service/MeshStrokeFillGenerateService";
+/**
+ * @description メッシュ生成用の再利用可能な一時バッファ（GC回避）
+ */
+let $meshTempBuffer = new Float32Array(32);
+const $upperPowerOfTwo = (v) => {
+    v--;
+    v |= v >> 1;
+    v |= v >> 2;
+    v |= v >> 4;
+    v |= v >> 8;
+    v |= v >> 16;
+    v++;
+    return v;
+};
+/**
+ * @description ビットマップストローク用のメッシュを生成する
+ *              Generate a mesh for bitmap stroke
+ *
+ * @param  {IPath[]} vertices
+ * @param  {number} thickness
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export const execute = (vertices, thickness) => {
+    const halfThickness = thickness / 2;
+    // 各パスのアウトラインを生成
+    const fillVertices = [];
+    for (const path of vertices) {
+        const outlines = generateStrokeOutline(path, halfThickness);
+        for (const outline of outlines) {
+            fillVertices.push(outline);
+        }
+    }
+    // 頂点数を計算（各パスの三角形数 × 3）
+    let totalVertices = 0;
+    for (const vertex of fillVertices) {
+        const length = vertex.length - 5;
+        for (let idx = 3; idx < length; idx += 3) {
+            totalVertices += 3;
+        }
+    }
+    if (totalVertices === 0) {
+        return {
+            "buffer": new Float32Array(0),
+            "indexCount": 0
+        };
+    }
+    // バッファを確保（4 floats per vertex、再利用可能バッファ）
+    const requiredSize = totalVertices * 4;
+    if ($meshTempBuffer.length < requiredSize) {
+        $meshTempBuffer = new Float32Array($upperPowerOfTwo(requiredSize));
+    }
+    const buffer = $meshTempBuffer;
+    let index = 0;
+    for (const vertex of fillVertices) {
+        index = meshStrokeFillGenerateService(vertex, buffer, index);
+    }
+    return {
+        "buffer": buffer.subarray(0, index * 4),
+        "indexCount": index
+    };
+};

package/src/Mesh/usecase/MeshFillGenerateUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { IPath } from "../../interface/IPath";
+import type { IMeshResult } from "../../interface/IMeshResult";
+/**
+ * @description 塗りのメッシュを生成する
+ *              Generate a fill mesh
+ *
+ * @param  {IPath[]} vertices
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertices: IPath[]) => IMeshResult;

package/src/Mesh/usecase/MeshFillGenerateUseCase.js

@@ -0,0 +1,48 @@
+import { execute as meshFillGenerateService } from "../service/MeshFillGenerateService";
+/**
+ * @description メッシュ生成用の再利用可能な一時バッファ（GC回避）
+ */
+let $meshTempBuffer = new Float32Array(32);
+const $upperPowerOfTwo = (v) => {
+    v--;
+    v |= v >> 1;
+    v |= v >> 2;
+    v |= v >> 4;
+    v |= v >> 8;
+    v |= v >> 16;
+    v++;
+    return v;
+};
+/**
+ * @description 塗りのメッシュを生成する
+ *              Generate a fill mesh
+ *
+ * @param  {IPath[]} vertices
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export const execute = (vertices) => {
+    // 頂点数を計算（各パスの三角形数 × 3）
+    let totalVertices = 0;
+    for (const vertex of vertices) {
+        const length = vertex.length - 5;
+        for (let idx = 3; idx < length; idx += 3) {
+            totalVertices += 3;
+        }
+    }
+    // バッファを確保（4 floats per vertex、再利用可能バッファ）
+    const requiredSize = totalVertices * 4;
+    if ($meshTempBuffer.length < requiredSize) {
+        $meshTempBuffer = new Float32Array($upperPowerOfTwo(requiredSize));
+    }
+    const buffer = $meshTempBuffer;
+    let index = 0;
+    for (const vertex of vertices) {
+        index = meshFillGenerateService(vertex, buffer, index);
+    }
+    return {
+        "buffer": buffer.subarray(0, index * 4),
+        "indexCount": index
+    };
+};

package/src/Mesh/usecase/MeshGradientStrokeGenerateUseCase.d.ts

@@ -0,0 +1,13 @@
+import type { IPath } from "../../interface/IPath";
+import type { IMeshResult } from "../../interface/IMeshResult";
+/**
+ * @description グラデーションストローク用のメッシュを生成する
+ *              Generate a mesh for gradient stroke
+ *
+ * @param  {IPath[]} vertices
+ * @param  {number} thickness
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertices: IPath[], thickness: number) => IMeshResult;

package/src/Mesh/usecase/MeshGradientStrokeGenerateUseCase.js

@@ -0,0 +1,65 @@
+import { generateStrokeOutline } from "./MeshStrokeGenerateUseCase";
+import { execute as meshStrokeFillGenerateService } from "../service/MeshStrokeFillGenerateService";
+/**
+ * @description メッシュ生成用の再利用可能な一時バッファ（GC回避）
+ */
+let $meshTempBuffer = new Float32Array(32);
+const $upperPowerOfTwo = (v) => {
+    v--;
+    v |= v >> 1;
+    v |= v >> 2;
+    v |= v >> 4;
+    v |= v >> 8;
+    v |= v >> 16;
+    v++;
+    return v;
+};
+/**
+ * @description グラデーションストローク用のメッシュを生成する
+ *              Generate a mesh for gradient stroke
+ *
+ * @param  {IPath[]} vertices
+ * @param  {number} thickness
+ * @return {IMeshResult}
+ * @method
+ * @protected
+ */
+export const execute = (vertices, thickness) => {
+    const halfThickness = thickness / 2;
+    // 各パスのアウトラインを生成
+    const fillVertices = [];
+    for (const path of vertices) {
+        const outlines = generateStrokeOutline(path, halfThickness);
+        for (const outline of outlines) {
+            fillVertices.push(outline);
+        }
+    }
+    // 頂点数を計算（各パスの三角形数 × 3）
+    let totalVertices = 0;
+    for (const vertex of fillVertices) {
+        const length = vertex.length - 5;
+        for (let idx = 3; idx < length; idx += 3) {
+            totalVertices += 3;
+        }
+    }
+    if (totalVertices === 0) {
+        return {
+            "buffer": new Float32Array(0),
+            "indexCount": 0
+        };
+    }
+    // バッファを確保（4 floats per vertex、再利用可能バッファ）
+    const requiredSize = totalVertices * 4;
+    if ($meshTempBuffer.length < requiredSize) {
+        $meshTempBuffer = new Float32Array($upperPowerOfTwo(requiredSize));
+    }
+    const buffer = $meshTempBuffer;
+    let index = 0;
+    for (const vertex of fillVertices) {
+        index = meshStrokeFillGenerateService(vertex, buffer, index);
+    }
+    return {
+        "buffer": buffer.subarray(0, index * 4),
+        "indexCount": index
+    };
+};