@next2d/webgl 1.18.12 → 3.0.0

package/src/Mesh/usecase/MeshCalculateLineRectangleUseCase.js

@@ -0,0 +1,42 @@
+import { execute as meshCalculateNormalVectorService } from "../service/MeshCalculateNormalVectorService";
+/**
+ * @description 直線の矩形を計算
+ *              Calculate the rectangle of a line
+ *
+ * @param  {IPoint} start_point
+ * @param  {IPoint} end_point
+ * @param  {number} thickness
+ * @return {IPath}
+ * @method
+ * @protected
+ */
+export const execute = (start_point, end_point, thickness) => {
+    const vector = {
+        "x": end_point.x - start_point.x,
+        "y": end_point.y - start_point.y
+    };
+    const normal = meshCalculateNormalVectorService(vector.x, vector.y, thickness);
+    const shiftedUpStart = {
+        "x": start_point.x + normal.x,
+        "y": start_point.y + normal.y
+    };
+    const shiftedUpEnd = {
+        "x": end_point.x + normal.x,
+        "y": end_point.y + normal.y
+    };
+    const shiftedDownStart = {
+        "x": start_point.x - normal.x,
+        "y": start_point.y - normal.y
+    };
+    const shiftedDownEnd = {
+        "x": end_point.x - normal.x,
+        "y": end_point.y - normal.y
+    };
+    return [
+        shiftedUpStart.x, shiftedUpStart.y, false,
+        shiftedUpEnd.x, shiftedUpEnd.y, false,
+        shiftedDownEnd.x, shiftedDownEnd.y, false,
+        shiftedDownStart.x, shiftedDownStart.y, false,
+        shiftedUpStart.x, shiftedUpStart.y, false
+    ];
+};

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

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

package/src/Mesh/usecase/MeshFillGenerateUseCase.js

@@ -0,0 +1,44 @@
+import { execute as meshFillGenerateService } from "../service/MeshFillGenerateService";
+import { $getMeshTempBuffer } from "../../Mesh";
+import { $context, $viewportWidth, $viewportHeight } from "../../WebGLUtil";
+/**
+ * @description 塗りのメッシュを生成する
+ *              Generate a fill mesh
+ *
+ * @param  {IPath[]} vertices
+ * @return {IFillMesh}
+ * @method
+ * @protected
+ */
+export const execute = (vertices, style = "fill") => {
+    const colorStyle = style === "fill"
+        ? $context.$fillStyle
+        : $context.$strokeStyle;
+    const red = colorStyle[0];
+    const green = colorStyle[1];
+    const blue = colorStyle[2];
+    const alpha = colorStyle[3];
+    const matrix = $context.$matrix;
+    const width = $viewportWidth;
+    const height = $viewportHeight;
+    const a = matrix[0] / width;
+    const c = matrix[3] / width;
+    const tx = matrix[6] / width;
+    const b = matrix[1] / height;
+    const d = matrix[4] / height;
+    const ty = matrix[7] / height;
+    let length = 0;
+    for (let idx = 0; idx < vertices.length; ++idx) {
+        length += (vertices[idx].length / 3 - 2) * 51;
+    }
+    // 再利用可能なバッファを取得（GC回避）
+    const buffer = $getMeshTempBuffer(length);
+    let currentIndex = 0;
+    for (let idx = 0; idx < vertices.length; ++idx) {
+        currentIndex = meshFillGenerateService(vertices[idx], buffer, currentIndex, a, b, c, d, tx, ty, red, green, blue, alpha);
+    }
+    return {
+        "buffer": buffer.subarray(0, length),
+        "indexCount": currentIndex
+    };
+};

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

@@ -0,0 +1,15 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description 線と線の繋ぎ目を繋ぐ
+ *              Connect the connection between lines
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, r: number, rectangles: IPath[], is_last?: boolean) => void;

package/src/Mesh/usecase/MeshGenerateCalculateBevelJoinUseCase.js

@@ -0,0 +1,52 @@
+import { execute as meshFindOverlappingPathsService } from "../service/MeshFindOverlappingPathsService";
+import { execute as meshIsPointInsideRectangleService } from "../service/MeshIsPointInsideRectangleService";
+/**
+ * @description 線と線の繋ぎ目を繋ぐ
+ *              Connect the connection between lines
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, r, rectangles, is_last = false) => {
+    const indexA = is_last ? 0 : rectangles.length - 1;
+    const indexB = is_last ? rectangles.length - 1 : rectangles.length - 2;
+    // 曲線矩形同士の接合ではjoinを追加しない
+    // 曲線は滑らかに接続されているため、joinジオメトリは不要
+    const isRectACurve = rectangles[indexA].length > 15;
+    const isRectBCurve = rectangles[indexB].length > 15;
+    if (isRectACurve && isRectBCurve) {
+        return;
+    }
+    const pathsA = meshFindOverlappingPathsService(x, y, r, rectangles[indexA]);
+    const pathsB = meshFindOverlappingPathsService(x, y, r, rectangles[indexB]);
+    // パスが並行であれば終了
+    if (pathsA[0] === pathsB[0] && pathsA[1] === pathsB[1]
+        || pathsA[0] === pathsB[2] && pathsA[1] === pathsB[3]) {
+        return;
+    }
+    // 矩形Aの点が矩形Bの外にあるか確認
+    const pointA = meshIsPointInsideRectangleService(pathsA, rectangles[indexB]);
+    if (!pointA) {
+        // 全ての点が矩形B内にある = 隙間がない
+        return;
+    }
+    // 矩形Bの点が矩形Aの外にあるか確認
+    const pointB = meshIsPointInsideRectangleService(pathsB, rectangles[indexA]);
+    if (!pointB) {
+        // 全ての点が矩形A内にある = 隙間がない
+        return;
+    }
+    // 隙間がある場合のみbevel joinを追加
+    rectangles.splice(-1, 0, [
+        x, y, false,
+        pointA[0], pointA[1], false,
+        pointB[0], pointB[1], false,
+        x, y, false
+    ]);
+};

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

@@ -0,0 +1,17 @@
+import type { IPath } from "../../interface/IPath";
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 線と線の繋ぎ目をmiterで繋ぐ
+ *              Connect the connection between lines with miter
+ *
+ * @param  {IPoint} start_point
+ * @param  {IPoint} end_point
+ * @param  {IPoint} prev_point
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (start_point: IPoint, end_point: IPoint, prev_point: IPoint, r: number, rectangles: IPath[], is_last?: boolean) => void;

package/src/Mesh/usecase/MeshGenerateCalculateMiterJoinUseCase.js

@@ -0,0 +1,84 @@
+import { execute as meshFindOverlappingPathsService } from "../service/MeshFindOverlappingPathsService";
+import { execute as meshIsPointInsideRectangleService } from "../service/MeshIsPointInsideRectangleService";
+/**
+ * @description 線と線の繋ぎ目をmiterで繋ぐ
+ *              Connect the connection between lines with miter
+ *
+ * @param  {IPoint} start_point
+ * @param  {IPoint} end_point
+ * @param  {IPoint} prev_point
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (start_point, end_point, prev_point, r, rectangles, is_last = false) => {
+    const indexA = is_last ? 0 : rectangles.length - 1;
+    const indexB = is_last ? rectangles.length - 1 : rectangles.length - 2;
+    // 曲線矩形同士の接合ではjoinを追加しない
+    // 曲線は滑らかに接続されているため、joinジオメトリは不要
+    const isRectACurve = rectangles[indexA].length > 15;
+    const isRectBCurve = rectangles[indexB].length > 15;
+    if (isRectACurve && isRectBCurve) {
+        return;
+    }
+    const pathsA = meshFindOverlappingPathsService(start_point.x, start_point.y, r, rectangles[indexA]);
+    const pathsB = meshFindOverlappingPathsService(start_point.x, start_point.y, r, rectangles[indexB]);
+    // パスが並行であれば終了
+    if (pathsA[0] === pathsB[0] && pathsA[1] === pathsB[1]
+        || pathsA[0] === pathsB[2] && pathsA[1] === pathsB[3]) {
+        return;
+    }
+    // 矩形Aの点が矩形Bの外にあるか確認
+    const pointA = meshIsPointInsideRectangleService(pathsA, rectangles[indexB]);
+    if (!pointA) {
+        // 全ての点が矩形B内にある = 隙間がない
+        return;
+    }
+    // 矩形Bの点が矩形Aの外にあるか確認
+    const pointB = meshIsPointInsideRectangleService(pathsB, rectangles[indexA]);
+    if (!pointB) {
+        // 全ての点が矩形A内にある = 隙間がない
+        return;
+    }
+    // Miter join: 外側の点を延長して交点を求める
+    const aVx = end_point.x - start_point.x;
+    const aVy = end_point.y - start_point.y;
+    const lengthA = Math.hypot(aVx, aVy);
+    const normalizeA = {
+        "x": aVx / lengthA,
+        "y": aVy / lengthA
+    };
+    const bVx = prev_point.x - start_point.x;
+    const bVy = prev_point.y - start_point.y;
+    const lengthB = Math.hypot(bVx, bVy);
+    const normalizeB = {
+        "x": bVx / lengthB,
+        "y": bVy / lengthB
+    };
+    const d1x = normalizeA.x, d1y = normalizeA.y;
+    const d2x = normalizeB.x, d2y = normalizeB.y;
+    const denom = d1x * d2y - d1y * d2x;
+    if (denom === 0) {
+        // 平行な場合は単純な三角形で接続
+        rectangles.splice(-1, 0, [
+            start_point.x, start_point.y, false,
+            pointA[0], pointA[1], false,
+            pointB[0], pointB[1], false
+        ]);
+        return;
+    }
+    const t = ((pointB[0] - pointA[0]) * d2y - (pointB[1] - pointA[1]) * d2x) / denom;
+    const ix = pointA[0] + t * d1x;
+    const iy = pointA[1] + t * d1y;
+    rectangles.splice(-1, 0, [
+        start_point.x, start_point.y, false,
+        pointA[0], pointA[1], false,
+        ix, iy, false,
+        start_point.x, start_point.y, false,
+        pointB[0], pointB[1], false,
+        ix, iy, false
+    ]);
+};

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

@@ -0,0 +1,15 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description 線と線の繋ぎ目を丸くする
+ *              Make the connection between lines round
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, r: number, rectangles: IPath[], is_last?: boolean) => void;

package/src/Mesh/usecase/MeshGenerateCalculateRoundJoinUseCase.js

@@ -0,0 +1,63 @@
+import { execute as meshFindOverlappingPathsService } from "../service/MeshFindOverlappingPathsService";
+import { execute as meshIsPointInsideRectangleService } from "../service/MeshIsPointInsideRectangleService";
+/**
+ * @description 線と線の繋ぎ目を丸くする
+ *              Make the connection between lines round
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} r
+ * @param  {IPath[]} rectangles
+ * @param  {boolean} [is_last=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, r, rectangles, is_last = false) => {
+    const indexA = is_last ? 0 : rectangles.length - 1;
+    const indexB = is_last ? rectangles.length - 1 : rectangles.length - 2;
+    // 曲線矩形同士の接合ではjoinを追加しない
+    // 曲線は滑らかに接続されているため、joinジオメトリは不要
+    const isRectACurve = rectangles[indexA].length > 15;
+    const isRectBCurve = rectangles[indexB].length > 15;
+    if (isRectACurve && isRectBCurve) {
+        return;
+    }
+    const pathsA = meshFindOverlappingPathsService(x, y, r, rectangles[indexA]);
+    const pathsB = meshFindOverlappingPathsService(x, y, r, rectangles[indexB]);
+    const pointA = meshIsPointInsideRectangleService(pathsA, rectangles[indexB]);
+    if (!pointA) {
+        return;
+    }
+    const pointB = meshIsPointInsideRectangleService(pathsB, rectangles[indexA]);
+    if (!pointB) {
+        return;
+    }
+    const angleA = Math.atan2(pointA[1] - y, pointA[0] - x);
+    const angleB = Math.atan2(pointB[1] - y, pointB[0] - x);
+    // 角度差を正規化して180度以下にする
+    let angleDiff = angleB - angleA;
+    if (angleDiff > Math.PI) {
+        angleDiff -= 2 * Math.PI;
+    }
+    else if (angleDiff < -Math.PI) {
+        angleDiff += 2 * Math.PI;
+    }
+    // 角度差が小さい場合または180度に近い場合はスキップ
+    // 小さい角度差: 曲線の閉じたパスでは不要
+    // 180度に近い場合: 外側と内側の点を間違えて選んでいる
+    const absAngleDiff = Math.abs(angleDiff);
+    if (absAngleDiff < 0.1 || absAngleDiff > Math.PI - 0.1) {
+        return;
+    }
+    const segment = 8;
+    const step = angleDiff / segment;
+    const points = [x, y, false];
+    for (let idx = 0; idx <= segment; idx++) {
+        const angle = angleA + idx * step;
+        const dx = x + r * Math.cos(angle);
+        const dy = y + r * Math.sin(angle);
+        points.push(dx, dy, false);
+    }
+    rectangles.splice(-1, 0, points);
+};

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

@@ -0,0 +1,12 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description 線の外周を算出して塗りのフォーマットで返却
+ *              Calculate the outer circumference of the line and return it in the format of the fill
+ *
+ * @param  {IPath} vertices
+ * @param  {number} thickness
+ * @return {IPath[]}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertices: IPath, thickness: number) => IPath[];

package/src/Mesh/usecase/MeshGenerateStrokeOutlineUseCase.js

@@ -0,0 +1,124 @@
+import { execute as meshCalculateLineRectangleUseCase } from "./MeshCalculateLineRectangleUseCase";
+import { execute as meshCalculateCurveRectangleUseCase } from "./MeshCalculateCurveRectangleUseCase";
+import { execute as meshGenerateCalculateRoundJoinUseCase } from "./MeshGenerateCalculateRoundJoinUseCase";
+import { execute as meshGenerateCalculateBevelJoinUseCase } from "./MeshGenerateCalculateBevelJoinUseCase";
+import { execute as meshGenerateCalculateRoundCapService } from "../service/MeshGenerateCalculateRoundCapService";
+import { execute as meshGenerateCalculateSquareCapService } from "../service/MeshGenerateCalculateSquareCapService";
+import { execute as meshGenerateCalculateMiterJoinUseCase } from "../usecase/MeshGenerateCalculateMiterJoinUseCase";
+import { $context } from "../../WebGLUtil";
+/**
+ * @description 再利用可能なPointオブジェクト（GC回避）
+ *              Reusable Point objects (avoid GC)
+ *
+ * @type {IPoint}
+ * @private
+ */
+const $startPoint = { "x": 0, "y": 0 };
+const $controlPoint = { "x": 0, "y": 0 };
+const $endPoint = { "x": 0, "y": 0 };
+const $prevPoint = { "x": 0, "y": 0 };
+/**
+ * @description 線の外周を算出して塗りのフォーマットで返却
+ *              Calculate the outer circumference of the line and return it in the format of the fill
+ *
+ * @param  {IPath} vertices
+ * @param  {number} thickness
+ * @return {IPath[]}
+ * @method
+ * @protected
+ */
+export const execute = (vertices, thickness) => {
+    // 再利用可能なオブジェクトを使用
+    const startPoint = $startPoint;
+    startPoint.x = vertices[0];
+    startPoint.y = vertices[1];
+    const controlPoint = $controlPoint;
+    controlPoint.x = 0;
+    controlPoint.y = 0;
+    const endPoint = $endPoint;
+    endPoint.x = 0;
+    endPoint.y = 0;
+    const prevPoint = $prevPoint;
+    prevPoint.x = 0;
+    prevPoint.y = 0;
+    const rectangles = [];
+    for (let idx = 3; idx < vertices.length; idx += 3) {
+        const x = vertices[idx];
+        const y = vertices[idx + 1];
+        if (vertices[idx + 2]) {
+            controlPoint.x = x;
+            controlPoint.y = y;
+            continue;
+        }
+        endPoint.x = x;
+        endPoint.y = y;
+        if (vertices[idx - 1]) {
+            rectangles.push(meshCalculateCurveRectangleUseCase(startPoint, controlPoint, endPoint, thickness));
+        }
+        else {
+            rectangles.push(meshCalculateLineRectangleUseCase(startPoint, endPoint, thickness));
+        }
+        if (rectangles.length > 1) {
+            switch ($context.joints) {
+                case 0: // bevel
+                    meshGenerateCalculateBevelJoinUseCase(startPoint.x, startPoint.y, thickness, rectangles);
+                    break;
+                case 1: // miter
+                    prevPoint.x = vertices[idx - 6];
+                    prevPoint.y = vertices[idx - 5];
+                    meshGenerateCalculateMiterJoinUseCase(startPoint, endPoint, prevPoint, thickness, rectangles);
+                    break;
+                case 2: // round
+                    meshGenerateCalculateRoundJoinUseCase(startPoint.x, startPoint.y, thickness, rectangles);
+                    break;
+            }
+        }
+        startPoint.x = endPoint.x;
+        startPoint.y = endPoint.y;
+    }
+    // 始点と終点が繋がっているかどうかをチェック（浮動小数点誤差を考慮）
+    const closedStartX = vertices[0];
+    const closedStartY = vertices[1];
+    const closedEndX = vertices[vertices.length - 3];
+    const closedEndY = vertices[vertices.length - 2];
+    const closedEpsilon = 0.0001;
+    const isClosed = Math.abs(closedStartX - closedEndX) < closedEpsilon
+        && Math.abs(closedStartY - closedEndY) < closedEpsilon
+        && rectangles.length > 1;
+    if (isClosed) {
+        // 始点と終点が繋がっている時はjointsの設定を適用
+        switch ($context.joints) {
+            case 0: // bevel
+                meshGenerateCalculateBevelJoinUseCase(closedStartX, closedStartY, thickness, rectangles, true);
+                break;
+            case 1: // miter
+                startPoint.x = closedStartX;
+                startPoint.y = closedStartY;
+                endPoint.x = vertices[3];
+                endPoint.y = vertices[4];
+                prevPoint.x = vertices[vertices.length - 6];
+                prevPoint.y = vertices[vertices.length - 5];
+                meshGenerateCalculateMiterJoinUseCase(startPoint, endPoint, prevPoint, thickness, rectangles, true);
+                break;
+            case 2: // round
+                meshGenerateCalculateRoundJoinUseCase(closedStartX, closedStartY, thickness, rectangles, true);
+                break;
+            default:
+                break;
+        }
+    }
+    else {
+        // 始点と終点が繋がってない時はcapsの設定を適用
+        switch ($context.caps) {
+            case 1: // round
+                meshGenerateCalculateRoundCapService(vertices, thickness, rectangles);
+                break;
+            case 2: // square
+                meshGenerateCalculateSquareCapService(vertices, thickness, rectangles);
+                break;
+            default:
+                break;
+        }
+    }
+    return rectangles;
+};

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

@@ -0,0 +1,14 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description ベジェ曲線を指定回数分割する
+ *              Divides a Bezier curve a specified number of times
+ *
+ * @param {IPoint} start_point
+ * @param {IPoint} control_point
+ * @param {IPoint} end_point
+ * @param {number} [n = 4]
+ * @return {Array<IPoint[]>}
+ * @method
+ * @protected
+ */
+export declare const execute: (start_point: IPoint, control_point: IPoint, end_point: IPoint, n?: number) => Array<IPoint[]>;

package/src/Mesh/usecase/MeshSplitBezierMultipleTimesUseCase.js

@@ -0,0 +1,32 @@
+import { execute as meshSplitQuadraticBezierUseCase } from "./MeshSplitQuadraticBezierUseCase";
+/**
+ * @description ベジェ曲線を指定回数分割する
+ *              Divides a Bezier curve a specified number of times
+ *
+ * @param {IPoint} start_point
+ * @param {IPoint} control_point
+ * @param {IPoint} end_point
+ * @param {number} [n = 4]
+ * @return {Array<IPoint[]>}
+ * @method
+ * @protected
+ */
+export const execute = (start_point, control_point, end_point, n = 4) => {
+    // 初期リスト：1本だけ
+    let segments = [[start_point, control_point, end_point]];
+    for (let idx = 0; idx < n; ++idx) {
+        const newSegments = [];
+        for (let idx = 0; idx < segments.length; ++idx) {
+            const seg = segments[idx];
+            if (!seg) {
+                continue;
+            }
+            // seg = [s0, s1, s2]
+            const splitted = meshSplitQuadraticBezierUseCase(seg[0], seg[1], seg[2], 0.5);
+            newSegments.push(splitted[0], splitted[1]);
+        }
+        segments = newSegments;
+    }
+    // segmentsには 2^n 本の [x,y]が入る
+    return segments; // [[p0,p1,p2], [p0,p1,p2], ...]
+};

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

@@ -0,0 +1,14 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 二次ベジェ曲線を分割する
+ *              Split a quadratic Bezier curve
+ *
+ * @param  {IPoint} start_point
+ * @param  {IPoint} control_point
+ * @param  {IPoint} end_point
+ * @param  {number} [t = 0.5]
+ * @return {Array<IPoint[]>}
+ * @method
+ * @protected
+ */
+export declare const execute: (start_point: IPoint, control_point: IPoint, end_point: IPoint, t?: number) => Array<IPoint[]>;

package/src/Mesh/usecase/MeshSplitQuadraticBezierUseCase.js

@@ -0,0 +1,28 @@
+import { execute as meshLerpService } from "../service/MeshLerpService";
+/**
+ * @description 二次ベジェ曲線を分割する
+ *              Split a quadratic Bezier curve
+ *
+ * @param  {IPoint} start_point
+ * @param  {IPoint} control_point
+ * @param  {IPoint} end_point
+ * @param  {number} [t = 0.5]
+ * @return {Array<IPoint[]>}
+ * @method
+ * @protected
+ */
+export const execute = (start_point, control_point, end_point, t = 0.5) => {
+    // 二次ベジエ曲線の分割
+    // M0  = lerp(P0, P1, t)
+    // M1  = lerp(P1, P2, t)
+    // M01 = lerp(M0, M1, t)
+    const M0 = meshLerpService(start_point, control_point, t);
+    const M1 = meshLerpService(control_point, end_point, t);
+    const M01 = meshLerpService(M0, M1, t);
+    // 左サブ (0...t): [P0,  M0, M01]
+    // 右サブ (t...1): [M01, M1, P2]
+    return [
+        [start_point, M0, M01],
+        [M01, M1, end_point]
+    ];
+};

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

@@ -0,0 +1,12 @@
+import type { IFillMesh } from "../../interface/IFillMesh";
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description ストロークのメッシュを生成
+ *              Generate a stroke mesh
+ *
+ * @param  {IPath[]} vertices
+ * @return {IFillMesh}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertices: IPath[]) => IFillMesh;

package/src/Mesh/usecase/MeshStrokeGenerateUseCase.js

@@ -0,0 +1,29 @@
+import { execute as meshGenerateStrokeOutlineUseCase } from "./MeshGenerateStrokeOutlineUseCase";
+import { execute as meshFillGenerateUseCase } from "./MeshFillGenerateUseCase";
+import { $context, $getArray, $poolArray } from "../../WebGLUtil";
+/**
+ * @description ストロークのメッシュを生成
+ *              Generate a stroke mesh
+ *
+ * @param  {IPath[]} vertices
+ * @return {IFillMesh}
+ * @method
+ * @protected
+ */
+export const execute = (vertices) => {
+    const thickness = $context.thickness / 2;
+    // プールから配列を取得して再利用
+    const fillVertices = $getArray();
+    for (let idx = 0; idx < vertices.length; ++idx) {
+        const vertex = meshGenerateStrokeOutlineUseCase(vertices[idx], thickness);
+        // スプレッド演算子の代わりにループで追加（より効率的）
+        for (let i = 0; i < vertex.length; ++i) {
+            fillVertices.push(vertex[i]);
+        }
+    }
+    const result = meshFillGenerateUseCase(fillVertices, "stroke");
+    // 配列をプールに戻す
+    fillVertices.length = 0;
+    $poolArray(fillVertices);
+    return result;
+};