@next2d/webgpu 3.0.5 → 3.1.0

package/src/Mesh/usecase/MeshStrokeGenerateUseCase.js

@@ -1,24 +1,44 @@
 import { $context } from "../../WebGPUUtil";
 /**
  * @description Canvas 2Dコンテキスト（点が矩形内にあるか判定用）
+ *              Canvas 2D context for point-in-rectangle testing
  */
-const canvas = new OffscreenCanvas(1, 1);
-const $canvasContext = canvas.getContext("2d");
+const $canvas = new OffscreenCanvas(1, 1);
+/**
+ * @description 矩形内の点判定用2Dコンテキスト
+ *              2D context used for point-in-path detection
+ */
+const $canvasContext = $canvas.getContext("2d");
 /**
  * @description 再利用可能なPointオブジェクト（GC回避）
+ *              Reusable Point objects to avoid GC overhead
  */
 const $startPoint = { "x": 0, "y": 0 };
+/**
+ * @description 再利用可能な制御点オブジェクト（GC回避）
+ *              Reusable control point object to avoid GC overhead
+ */
 const $controlPoint = { "x": 0, "y": 0 };
+/**
+ * @description 再利用可能な終了点オブジェクト（GC回避）
+ *              Reusable end point object to avoid GC overhead
+ */
 const $endPoint = { "x": 0, "y": 0 };
+/**
+ * @description 再利用可能な前の点オブジェクト（GC回避）
+ *              Reusable previous point object to avoid GC overhead
+ */
 const $prevPoint = { "x": 0, "y": 0 };
 /**
  * @description 法線ベクトルを計算（WebGL版のMeshCalculateNormalVectorServiceと同じ）
- * @param {number} x - 方向ベクトルのx成分
- * @param {number} y - 方向ベクトルのy成分
- * @param {number} thickness - 線の太さ（半分の値）
- * @return {IPoint}
+ *              Calculate the normal vector (same as WebGL MeshCalculateNormalVectorService)
+ *
+ * @param  {number} x - 方向ベクトルのx成分 / X component of direction vector
+ * @param  {number} y - 方向ベクトルのy成分 / Y component of direction vector
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @return {IPoint} 法線ベクトル / Normal vector
  */
-const calculateNormalVector = (x, y, thickness) => {
+const $calculateNormalVector = (x, y, thickness) => {
     const magnitude = Math.sqrt(x * x + y * y);
     if (magnitude === 0) {
         return { "x": 0, "y": 0 };
@@ -30,15 +50,25 @@ const calculateNormalVector = (x, y, thickness) => {
 };
 /**
  * @description 線形補間（lerp）
+ *              Linear interpolation between two points
+ *
+ * @param  {IPoint} p0 - 始点 / Start point
+ * @param  {IPoint} p1 - 終点 / End point
+ * @param  {number} t - 補間パラメータ（0〜1） / Interpolation parameter (0-1)
+ * @return {IPoint} 補間された点 / Interpolated point
  */
-const lerp = (p0, p1, t) => ({
+const $lerp = (p0, p1, t) => ({
     "x": p0.x + (p1.x - p0.x) * t,
     "y": p0.y + (p1.y - p0.y) * t
 });
 /**
  * @description ベクトルの正規化
+ *              Normalize a vector to unit length
+ *
+ * @param  {IPoint} point - 正規化する点 / Point to normalize
+ * @return {IPoint} 正規化された点 / Normalized point
  */
-const normalize = (point) => {
+const $normalize = (point) => {
     const length = Math.sqrt(point.x * point.x + point.y * point.y);
     return length === 0
         ? { "x": 0, "y": 0 }
@@ -46,25 +76,46 @@ const normalize = (point) => {
 };
 /**
  * @description 二次ベジェ曲線上の座標を計算
+ *              Calculate a point on a quadratic Bezier curve
+ *
+ * @param  {number} t - 曲線パラメータ（0〜1） / Curve parameter (0-1)
+ * @param  {IPoint} s0 - 始点 / Start point
+ * @param  {IPoint} s1 - 制御点 / Control point
+ * @param  {IPoint} s2 - 終点 / End point
+ * @return {IPoint} 曲線上の座標 / Point on the curve
  */
-const getQuadraticBezierPoint = (t, s0, s1, s2) => ({
+const $getQuadraticBezierPoint = (t, s0, s1, s2) => ({
     "x": (1 - t) ** 2 * s0.x + 2 * (1 - t) * t * s1.x + t ** 2 * s2.x,
     "y": (1 - t) ** 2 * s0.y + 2 * (1 - t) * t * s1.y + t ** 2 * s2.y
 });
 /**
  * @description 二次ベジェ曲線上の接線ベクトルを計算
+ *              Calculate the tangent vector on a quadratic Bezier curve
+ *
+ * @param  {number} t - 曲線パラメータ（0〜1） / Curve parameter (0-1)
+ * @param  {IPoint} s0 - 始点 / Start point
+ * @param  {IPoint} s1 - 制御点 / Control point
+ * @param  {IPoint} s2 - 終点 / End point
+ * @return {IPoint} 接線ベクトル / Tangent vector
  */
-const getQuadraticBezierTangent = (t, s0, s1, s2) => ({
+const $getQuadraticBezierTangent = (t, s0, s1, s2) => ({
     "x": 2 * (1 - t) * (s1.x - s0.x) + 2 * t * (s2.x - s1.x),
     "y": 2 * (1 - t) * (s1.y - s0.y) + 2 * t * (s2.y - s1.y)
 });
 /**
  * @description 二次ベジェ曲線を分割
+ *              Split a quadratic Bezier curve at a given parameter
+ *
+ * @param  {IPoint} s0 - 始点 / Start point
+ * @param  {IPoint} s1 - 制御点 / Control point
+ * @param  {IPoint} s2 - 終点 / End point
+ * @param  {number} t - 分割パラメータ / Split parameter
+ * @return {Array<IPoint[]>} 分割された2つの曲線 / Two split curves
  */
-const splitQuadraticBezier = (s0, s1, s2, t = 0.5) => {
-    const M0 = lerp(s0, s1, t);
-    const M1 = lerp(s1, s2, t);
-    const M01 = lerp(M0, M1, t);
+const $splitQuadraticBezier = (s0, s1, s2, t = 0.5) => {
+    const M0 = $lerp(s0, s1, t);
+    const M1 = $lerp(s1, s2, t);
+    const M01 = $lerp(M0, M1, t);
     return [
         [s0, M0, M01],
         [M01, M1, s2]
@@ -72,13 +123,20 @@ const splitQuadraticBezier = (s0, s1, s2, t = 0.5) => {
 };
 /**
  * @description ベジェ曲線を複数回分割
+ *              Split a Bezier curve multiple times
+ *
+ * @param  {IPoint} s0 - 始点 / Start point
+ * @param  {IPoint} s1 - 制御点 / Control point
+ * @param  {IPoint} s2 - 終点 / End point
+ * @param  {number} n - 分割回数 / Number of splits
+ * @return {Array<IPoint[]>} 分割されたセグメント配列 / Array of split segments
  */
-const splitBezierMultipleTimes = (s0, s1, s2, n = 4) => {
+const $splitBezierMultipleTimes = (s0, s1, s2, n = 4) => {
     let segments = [[s0, s1, s2]];
     for (let i = 0; i < n; i++) {
         const newSegments = [];
         for (const seg of segments) {
-            const splitted = splitQuadraticBezier(seg[0], seg[1], seg[2], 0.5);
+            const splitted = $splitQuadraticBezier(seg[0], seg[1], seg[2], 0.5);
             newSegments.push(splitted[0], splitted[1]);
         }
         segments = newSegments;
@@ -87,14 +145,21 @@ const splitBezierMultipleTimes = (s0, s1, s2, n = 4) => {
 };
 /**
  * @description 2次ベジェのオフセットを計算
+ *              Calculate offset of a quadratic Bezier curve
+ *
+ * @param  {IPoint} s0 - 始点 / Start point
+ * @param  {IPoint} s1 - 制御点 / Control point
+ * @param  {IPoint} s2 - 終点 / End point
+ * @param  {number} offset - オフセット距離 / Offset distance
+ * @return {IPoint[]} オフセットされた点配列 / Array of offset points
  */
-const approximateOffsetQuadratic = (s0, s1, s2, offset) => {
+const $approximateOffsetQuadratic = (s0, s1, s2, offset) => {
     const tValues = [0, 0.5, 1];
     const newPoints = [];
     for (const t of tValues) {
-        const pos = getQuadraticBezierPoint(t, s0, s1, s2);
-        const tan = getQuadraticBezierTangent(t, s0, s1, s2);
-        const n = normalize({ "x": -tan.y, "y": tan.x });
+        const pos = $getQuadraticBezierPoint(t, s0, s1, s2);
+        const tan = $getQuadraticBezierTangent(t, s0, s1, s2);
+        const n = $normalize({ "x": -tan.y, "y": tan.x });
         newPoints.push({
             "x": pos.x + n.x * offset,
             "y": pos.y + n.y * offset
@@ -104,15 +169,22 @@ const approximateOffsetQuadratic = (s0, s1, s2, offset) => {
 };
 /**
  * @description カーブの矩形を計算（WebGL版のMeshCalculateCurveRectangleUseCaseと同じ）
+ *              Calculate curve rectangle (same as WebGL MeshCalculateCurveRectangleUseCase)
+ *
+ * @param  {IPoint} start_point - 始点 / Start point
+ * @param  {IPoint} control_point - 制御点 / Control point
+ * @param  {IPoint} end_point - 終点 / End point
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @return {IPath} カーブ矩形パス / Curve rectangle path
  */
-const calculateCurveRectangle = (startPoint, controlPoint, endPoint, thickness) => {
+const $calculateCurveRectangle = (start_point, control_point, end_point, thickness) => {
     // WebGL版と同じ分割数（5回分割 = 32セグメント）
-    const segments = splitBezierMultipleTimes(startPoint, controlPoint, endPoint, 5);
+    const segments = $splitBezierMultipleTimes(start_point, control_point, end_point, 5);
     const leftCurves = [];
     const rightCurves = [];
     for (const seg of segments) {
-        leftCurves.push(approximateOffsetQuadratic(seg[0], seg[1], seg[2], +thickness));
-        rightCurves.push(approximateOffsetQuadratic(seg[0], seg[1], seg[2], -thickness));
+        leftCurves.push($approximateOffsetQuadratic(seg[0], seg[1], seg[2], +thickness));
+        rightCurves.push($approximateOffsetQuadratic(seg[0], seg[1], seg[2], -thickness));
     }
     // セグメント間の連続性を確保：各セグメントの終点を次のセグメントの始点に強制一致
     // これにより内側の曲線のつなぎめの隙間を解消
@@ -147,32 +219,34 @@ const calculateCurveRectangle = (startPoint, controlPoint, endPoint, thickness)
 };
 /**
  * @description 直線の矩形を計算（WebGL版のMeshCalculateLineRectangleUseCaseと同じ）
- * @param {IPoint} startPoint - 開始点
- * @param {IPoint} endPoint - 終了点
- * @param {number} thickness - 線の太さ（半分の値）
- * @return {IPath} 矩形パス
+ *              Calculate line rectangle (same as WebGL MeshCalculateLineRectangleUseCase)
+ *
+ * @param  {IPoint} start_point - 開始点 / Start point
+ * @param  {IPoint} end_point - 終了点 / End point
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @return {IPath} 矩形パス / Rectangle path
  */
-const calculateLineRectangle = (startPoint, endPoint, thickness) => {
+const $calculateLineRectangle = (start_point, end_point, thickness) => {
     const vector = {
-        "x": endPoint.x - startPoint.x,
-        "y": endPoint.y - startPoint.y
+        "x": end_point.x - start_point.x,
+        "y": end_point.y - start_point.y
     };
-    const normal = calculateNormalVector(vector.x, vector.y, thickness);
+    const normal = $calculateNormalVector(vector.x, vector.y, thickness);
     const shiftedUpStart = {
-        "x": startPoint.x + normal.x,
-        "y": startPoint.y + normal.y
+        "x": start_point.x + normal.x,
+        "y": start_point.y + normal.y
     };
     const shiftedUpEnd = {
-        "x": endPoint.x + normal.x,
-        "y": endPoint.y + normal.y
+        "x": end_point.x + normal.x,
+        "y": end_point.y + normal.y
     };
     const shiftedDownEnd = {
-        "x": endPoint.x - normal.x,
-        "y": endPoint.y - normal.y
+        "x": end_point.x - normal.x,
+        "y": end_point.y - normal.y
     };
     const shiftedDownStart = {
-        "x": startPoint.x - normal.x,
-        "y": startPoint.y - normal.y
+        "x": start_point.x - normal.x,
+        "y": start_point.y - normal.y
     };
     return [
         shiftedUpStart.x, shiftedUpStart.y, false,
@@ -184,9 +258,16 @@ const calculateLineRectangle = (startPoint, endPoint, thickness) => {
 };
 /**
  * @description メッシュのパスの中で指定座標が含まれる線を探す
+ *              Find paths overlapping with specified coordinates
  *              WebGL版のMeshFindOverlappingPathsServiceと同じ
+ *
+ * @param  {number} x - 中心x座標 / Center x coordinate
+ * @param  {number} y - 中心y座標 / Center y coordinate
+ * @param  {number} r - 半径 / Radius
+ * @param  {IPath} paths - パスデータ / Path data
+ * @return {number[]} 重複する座標配列 / Array of overlapping coordinates
  */
-const findOverlappingPaths = (x, y, r, paths) => {
+const $findOverlappingPaths = (x, y, r, paths) => {
     const points = [];
     // 浮動小数点誤差を考慮した許容範囲（非常に小さい値）
     const epsilon = 0.0001;
@@ -208,9 +289,14 @@ const findOverlappingPaths = (x, y, r, paths) => {
 };
 /**
  * @description 矩形内に含まれてない座標を返却
+ *              Return coordinates that are not inside the rectangle
  *              WebGL版のMeshIsPointInsideRectangleServiceと同じ
+ *
+ * @param  {number[]} points - 判定対象の座標配列 / Array of points to test
+ * @param  {IPath} rectangle - 矩形パス / Rectangle path
+ * @return {number[] | null} 矩形外の座標またはnull / Point outside rectangle or null
  */
-const findPointOutsideRectangle = (points, rectangle) => {
+const $findPointOutsideRectangle = (points, rectangle) => {
     $canvasContext.beginPath();
     $canvasContext.moveTo(rectangle[0], rectangle[1]);
     for (let idx = 3; idx < rectangle.length; idx += 3) {
@@ -235,23 +321,31 @@ const findPointOutsideRectangle = (points, rectangle) => {
 };
 /**
  * @description ベベル結合を生成（WebGL版のMeshGenerateCalculateBevelJoinUseCaseと同じ）
+ *              Generate bevel join (same as WebGL MeshGenerateCalculateBevelJoinUseCase)
+ *
+ * @param  {number} x - 結合点のx座標 / Join point x coordinate
+ * @param  {number} y - 結合点のy座標 / Join point y coordinate
+ * @param  {number} r - 半径 / Radius
+ * @param  {IPath[]} rectangles - 矩形パス配列 / Array of rectangle paths
+ * @param  {boolean} is_last - 最後の結合かどうか / Whether this is the last join
+ * @return {void}
  */
-const generateBevelJoin = (x, y, r, rectangles, isLast = false) => {
+const $generateBevelJoin = (x, y, r, rectangles, is_last = false) => {
     // WebGL版と同じ: isLastフラグでインデックスを切り替え
-    const indexA = isLast ? 0 : rectangles.length - 1;
-    const indexB = isLast ? rectangles.length - 1 : rectangles.length - 2;
-    const pathsA = findOverlappingPaths(x, y, r, rectangles[indexA]);
-    const pathsB = findOverlappingPaths(x, y, r, rectangles[indexB]);
+    const indexA = is_last ? 0 : rectangles.length - 1;
+    const indexB = is_last ? rectangles.length - 1 : rectangles.length - 2;
+    const pathsA = $findOverlappingPaths(x, y, r, rectangles[indexA]);
+    const pathsB = $findOverlappingPaths(x, y, r, rectangles[indexB]);
     // パスが並行であれば終了
     if (pathsA[0] === pathsB[0] && pathsA[1] === pathsB[1]
         || pathsA[0] === pathsB[2] && pathsA[1] === pathsB[3]) {
         return;
     }
-    const pointA = findPointOutsideRectangle(pathsA, rectangles[indexB]);
+    const pointA = $findPointOutsideRectangle(pathsA, rectangles[indexB]);
     if (!pointA) {
         return;
     }
-    const pointB = findPointOutsideRectangle(pathsB, rectangles[indexA]);
+    const pointB = $findPointOutsideRectangle(pathsB, rectangles[indexA]);
     if (!pointB) {
         return;
     }
@@ -264,18 +358,26 @@ const generateBevelJoin = (x, y, r, rectangles, isLast = false) => {
 };
 /**
  * @description ラウンド結合を生成（WebGL版のMeshGenerateCalculateRoundJoinUseCaseと同じ）
+ *              Generate round join (same as WebGL MeshGenerateCalculateRoundJoinUseCase)
+ *
+ * @param  {number} x - 結合点のx座標 / Join point x coordinate
+ * @param  {number} y - 結合点のy座標 / Join point y coordinate
+ * @param  {number} r - 半径 / Radius
+ * @param  {IPath[]} rectangles - 矩形パス配列 / Array of rectangle paths
+ * @param  {boolean} is_last - 最後の結合かどうか / Whether this is the last join
+ * @return {void}
  */
-const generateRoundJoin = (x, y, r, rectangles, isLast = false) => {
+const $generateRoundJoin = (x, y, r, rectangles, is_last = false) => {
     // WebGL版と同じ: isLastフラグでインデックスを切り替え
-    const indexA = isLast ? 0 : rectangles.length - 1;
-    const indexB = isLast ? rectangles.length - 1 : rectangles.length - 2;
-    const pathsA = findOverlappingPaths(x, y, r, rectangles[indexA]);
-    const pathsB = findOverlappingPaths(x, y, r, rectangles[indexB]);
-    const pointA = findPointOutsideRectangle(pathsA, rectangles[indexB]);
+    const indexA = is_last ? 0 : rectangles.length - 1;
+    const indexB = is_last ? rectangles.length - 1 : rectangles.length - 2;
+    const pathsA = $findOverlappingPaths(x, y, r, rectangles[indexA]);
+    const pathsB = $findOverlappingPaths(x, y, r, rectangles[indexB]);
+    const pointA = $findPointOutsideRectangle(pathsA, rectangles[indexB]);
     if (!pointA) {
         return;
     }
-    const pointB = findPointOutsideRectangle(pathsB, rectangles[indexA]);
+    const pointB = $findPointOutsideRectangle(pathsB, rectangles[indexA]);
     if (!pointB) {
         return;
     }
@@ -302,34 +404,43 @@ const generateRoundJoin = (x, y, r, rectangles, isLast = false) => {
 };
 /**
  * @description マイター結合を生成（WebGL版のMeshGenerateCalculateMiterJoinUseCaseと同じ）
+ *              Generate miter join (same as WebGL MeshGenerateCalculateMiterJoinUseCase)
+ *
+ * @param  {IPoint} start_point - 結合点 / Join point
+ * @param  {IPoint} end_point - 終了点 / End point
+ * @param  {IPoint} prev_point - 前の点 / Previous point
+ * @param  {number} r - 半径 / Radius
+ * @param  {IPath[]} rectangles - 矩形パス配列 / Array of rectangle paths
+ * @param  {boolean} is_last - 最後の結合かどうか / Whether this is the last join
+ * @return {void}
  */
-const generateMiterJoin = (startPoint, endPoint, prevPoint, r, rectangles, isLast = false) => {
-    const indexA = isLast ? 0 : rectangles.length - 1;
-    const indexB = isLast ? rectangles.length - 1 : rectangles.length - 2;
-    const pathsA = findOverlappingPaths(startPoint.x, startPoint.y, r, rectangles[indexA]);
-    const pathsB = findOverlappingPaths(startPoint.x, startPoint.y, r, rectangles[indexB]);
+const $generateMiterJoin = (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;
+    const pathsA = $findOverlappingPaths(start_point.x, start_point.y, r, rectangles[indexA]);
+    const pathsB = $findOverlappingPaths(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;
     }
-    const pointA = findPointOutsideRectangle(pathsA, rectangles[indexB]);
+    const pointA = $findPointOutsideRectangle(pathsA, rectangles[indexB]);
     if (!pointA) {
         return;
     }
-    const pointB = findPointOutsideRectangle(pathsB, rectangles[indexA]);
+    const pointB = $findPointOutsideRectangle(pathsB, rectangles[indexA]);
     if (!pointB) {
         return;
     }
-    const aVx = endPoint.x - startPoint.x;
-    const aVy = endPoint.y - startPoint.y;
+    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 = prevPoint.x - startPoint.x;
-    const bVy = prevPoint.y - startPoint.y;
+    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,
@@ -340,7 +451,7 @@ const generateMiterJoin = (startPoint, endPoint, prevPoint, r, rectangles, isLas
     const denom = d1x * d2y - d1y * d2x;
     if (denom === 0) {
         rectangles.splice(-1, 0, [
-            startPoint.x, startPoint.y, false,
+            start_point.x, start_point.y, false,
             pointA[0], pointA[1], false,
             pointB[0], pointB[1], false
         ]);
@@ -350,18 +461,24 @@ const generateMiterJoin = (startPoint, endPoint, prevPoint, r, rectangles, isLas
     const ix = pointA[0] + t * d1x;
     const iy = pointA[1] + t * d1y;
     rectangles.splice(-1, 0, [
-        startPoint.x, startPoint.y, false,
+        start_point.x, start_point.y, false,
         pointA[0], pointA[1], false,
         ix, iy, false,
-        startPoint.x, startPoint.y, false,
+        start_point.x, start_point.y, false,
         pointB[0], pointB[1], false,
         ix, iy, false
     ]);
 };
 /**
  * @description ラウンドキャップを生成（WebGL版のMeshGenerateCalculateRoundCapServiceと同じ）
+ *              Generate round cap (same as WebGL MeshGenerateCalculateRoundCapService)
+ *
+ * @param  {IPath} vertices - パス頂点 / Path vertices
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @param  {IPath[]} rectangles - 矩形パス配列 / Array of rectangle paths
+ * @return {void}
  */
-const generateRoundCap = (vertices, thickness, rectangles) => {
+const $generateRoundCap = (vertices, thickness, rectangles) => {
     // 始点のキャップ
     // WebGL版と同じく隣接頂点を直接使用（制御点でもそのまま使用する）
     // カーブの場合、制御点への方向が正しい接線方向となる
@@ -393,8 +510,14 @@ const generateRoundCap = (vertices, thickness, rectangles) => {
 };
 /**
  * @description スクエアキャップを生成（WebGL版のMeshGenerateCalculateSquareCapServiceと同じ）
+ *              Generate square cap (same as WebGL MeshGenerateCalculateSquareCapService)
+ *
+ * @param  {IPath} vertices - パス頂点 / Path vertices
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @param  {IPath[]} rectangles - 矩形パス配列 / Array of rectangle paths
+ * @return {void}
  */
-const generateSquareCap = (vertices, thickness, rectangles) => {
+const $generateSquareCap = (vertices, thickness, rectangles) => {
     // 始点のキャップ
     // WebGL版と同じく隣接頂点を直接使用（制御点でもそのまま使用する）
     const startX = vertices[0];
@@ -446,9 +569,9 @@ const generateSquareCap = (vertices, thickness, rectangles) => {
  * @description 線の外周を算出して塗りのフォーマットで返却（WebGL版と同じ）
  *              Calculate the outer circumference of the line and return it in the format of the fill
  *
- * @param {IPath} vertices - パス頂点 [x, y, isCurve, ...]
- * @param {number} thickness - 線の太さ（半分の値）
- * @return {IPath[]} パス配列
+ * @param  {IPath} vertices - パス頂点 [x, y, isCurve, ...] / Path vertices
+ * @param  {number} thickness - 線の太さ（半分の値） / Half line thickness
+ * @return {IPath[]} パス配列 / Array of paths
  */
 export const generateStrokeOutline = (vertices, thickness) => {
     // 再利用可能なオブジェクトを使用
@@ -476,23 +599,23 @@ export const generateStrokeOutline = (vertices, thickness) => {
         endPoint.x = x;
         endPoint.y = y;
         if (vertices[idx - 1]) {
-            rectangles.push(calculateCurveRectangle(startPoint, controlPoint, endPoint, thickness));
+            rectangles.push($calculateCurveRectangle(startPoint, controlPoint, endPoint, thickness));
         }
         else {
-            rectangles.push(calculateLineRectangle(startPoint, endPoint, thickness));
+            rectangles.push($calculateLineRectangle(startPoint, endPoint, thickness));
         }
         if (rectangles.length > 1) {
             switch ($context.joints) {
                 case 0: // bevel
-                    generateBevelJoin(startPoint.x, startPoint.y, thickness, rectangles);
+                    $generateBevelJoin(startPoint.x, startPoint.y, thickness, rectangles);
                     break;
                 case 1: // miter
                     prevPoint.x = vertices[idx - 6];
                     prevPoint.y = vertices[idx - 5];
-                    generateMiterJoin(startPoint, endPoint, prevPoint, thickness, rectangles);
+                    $generateMiterJoin(startPoint, endPoint, prevPoint, thickness, rectangles);
                     break;
                 case 2: // round
-                    generateRoundJoin(startPoint.x, startPoint.y, thickness, rectangles);
+                    $generateRoundJoin(startPoint.x, startPoint.y, thickness, rectangles);
                     break;
             }
         }
@@ -512,7 +635,7 @@ export const generateStrokeOutline = (vertices, thickness) => {
         // 始点と終点が繋がっている時はjointsの設定を適用（WebGL版と同じ）
         switch ($context.joints) {
             case 0: // bevel
-                generateBevelJoin(startX, startY, thickness, rectangles, true);
+                $generateBevelJoin(startX, startY, thickness, rectangles, true);
                 break;
             case 1: // miter
                 startPoint.x = startX;
@@ -521,10 +644,10 @@ export const generateStrokeOutline = (vertices, thickness) => {
                 endPoint.y = vertices[4];
                 prevPoint.x = vertices[vertices.length - 6];
                 prevPoint.y = vertices[vertices.length - 5];
-                generateMiterJoin(startPoint, endPoint, prevPoint, thickness, rectangles, true);
+                $generateMiterJoin(startPoint, endPoint, prevPoint, thickness, rectangles, true);
                 break;
             case 2: // round
-                generateRoundJoin(startX, startY, thickness, rectangles, true);
+                $generateRoundJoin(startX, startY, thickness, rectangles, true);
                 break;
             default:
                 break;
@@ -534,10 +657,10 @@ export const generateStrokeOutline = (vertices, thickness) => {
         // 始点と終点が繋がってない時はcapsの設定を適用
         switch ($context.caps) {
             case 1: // round
-                generateRoundCap(vertices, thickness, rectangles);
+                $generateRoundCap(vertices, thickness, rectangles);
                 break;
             case 2: // square
-                generateSquareCap(vertices, thickness, rectangles);
+                $generateSquareCap(vertices, thickness, rectangles);
                 break;
             default:
                 break;
@@ -547,9 +670,11 @@ export const generateStrokeOutline = (vertices, thickness) => {
 };
 /**
  * @description ストロークメッシュを生成（WebGL版のMeshStrokeGenerateUseCaseと同じ）
- * @param {IPath[]} vertices - パス頂点配列
- * @param {number} thickness - 線の太さ（フル値、内部で/2される）
- * @return {IPath[]}
+ *              Generate stroke mesh (same as WebGL MeshStrokeGenerateUseCase)
+ *
+ * @param  {IPath[]} vertices - パス頂点配列 / Array of path vertices
+ * @param  {number} thickness - 線の太さ（フル値、内部で/2される） / Full line thickness (halved internally)
+ * @return {IPath[]} 塗りフォーマットのパス配列 / Array of fill-format paths
  */
 export const generateStrokeMesh = (vertices, thickness) => {
     // WebGL版と同じ: 内部で半分にする
@@ -566,43 +691,3 @@ export const generateStrokeMesh = (vertices, thickness) => {
     }
     return fillVertices;
 };
-/**
- * @description IPoint[][]形式からストロークメッシュを生成（後方互換用）
- * @param {IPoint[][]} paths - パス配列
- * @param {number} thickness - 線の太さ
- * @return {Float32Array}
- */
-export const generateStrokeMeshFromPoints = (paths, thickness) => {
-    const triangles = [];
-    // WebGL版と同じ: 内部で半分にする
-    const halfThickness = thickness / 2;
-    for (const path of paths) {
-        if (path.length < 2) {
-            continue;
-        }
-        // 各線分に対して矩形を生成
-        for (let i = 0; i < path.length - 1; i++) {
-            const startPoint = path[i];
-            const endPoint = path[i + 1];
-            const vector = {
-                "x": endPoint.x - startPoint.x,
-                "y": endPoint.y - startPoint.y
-            };
-            const normal = calculateNormalVector(vector.x, vector.y, halfThickness);
-            // 矩形の4頂点
-            const p0x = startPoint.x + normal.x;
-            const p0y = startPoint.y + normal.y;
-            const p1x = endPoint.x + normal.x;
-            const p1y = endPoint.y + normal.y;
-            const p2x = endPoint.x - normal.x;
-            const p2y = endPoint.y - normal.y;
-            const p3x = startPoint.x - normal.x;
-            const p3y = startPoint.y - normal.y;
-            // Triangle 1: p0, p1, p2
-            triangles.push(p0x, p0y, 0, 0, p1x, p1y, 0, 0, p2x, p2y, 0, 0);
-            // Triangle 2: p0, p2, p3
-            triangles.push(p0x, p0y, 0, 0, p2x, p2y, 0, 0, p3x, p3y, 0, 0);
-        }
-    }
-    return new Float32Array(triangles);
-};