@next2d/webgl 1.18.12 → 3.0.0

package/src/Mesh.d.ts

@@ -0,0 +1,74 @@
+import type { IFillType } from "./interface/IFillType";
+/**
+ * @description 指定された値を2の累乗に切り上げます。
+ *              Rounds the specified value up to a power of two.
+ *
+ * @param  {number} v
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $upperPowerOfTwo: (v: number) => number;
+/**
+ * @description バッファを埋めるデータを返却
+ *              Returns the data to fill the buffer
+ *
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export declare const $getFillBuffer: () => Float32Array;
+/**
+ * @description バッファを埋めるデータのオフセットを返却
+ *              Returns the offset of the data to fill the buffer
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $getFillBufferOffset: () => number;
+/**
+ * @description バッファを埋めるデータを設定
+ *              Set the data to fill the buffer
+ *
+ * @param  {Float32Array} buffer
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $addFillBuffer: (buffer: Float32Array) => void;
+/**
+ * @description バッファを頂点数の配列
+ *              Array of the number of vertices in the buffer
+ *
+ * @type {number[]}
+ * @protected
+ */
+export declare const $fillBufferIndexes: number[];
+/**
+ * @description 塗りの種類の配列
+ *              Array of fill types
+ *
+ * @type {IFillType[]}
+ * @protected
+ */
+export declare const $fillTypes: IFillType[];
+/**
+ * @description 頂点情報の設定値を初期化
+ *              Initializes the setting value of the vertex information
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $clearFillBufferSetting: () => void;
+/**
+ * @description 必要なサイズの一時バッファを取得（必要に応じて拡張）
+ *              Get temporary buffer of required size (expand if necessary)
+ *
+ * @param  {number} size
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export declare const $getMeshTempBuffer: (size: number) => Float32Array;

package/src/Mesh.js

@@ -0,0 +1,126 @@
+/**
+ * @description 指定された値を2の累乗に切り上げます。
+ *              Rounds the specified value up to a power of two.
+ *
+ * @param  {number} v
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $upperPowerOfTwo = (v) => {
+    v--;
+    v |= v >> 1;
+    v |= v >> 2;
+    v |= v >> 4;
+    v |= v >> 8;
+    v |= v >> 16;
+    v++;
+    return v;
+};
+/**
+ * @type {Float32Array}
+ * @private
+ */
+let $fillBuffer = new Float32Array(128);
+/**
+ * @type {number}
+ * @private
+ */
+let $fillBufferOffset = 0;
+/**
+ * @description バッファを埋めるデータを返却
+ *              Returns the data to fill the buffer
+ *
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export const $getFillBuffer = () => {
+    return $fillBuffer;
+};
+/**
+ * @description バッファを埋めるデータのオフセットを返却
+ *              Returns the offset of the data to fill the buffer
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getFillBufferOffset = () => {
+    return $fillBufferOffset;
+};
+/**
+ * @description バッファを埋めるデータを設定
+ *              Set the data to fill the buffer
+ *
+ * @param  {Float32Array} buffer
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $addFillBuffer = (buffer) => {
+    const length = buffer.length + $fillBufferOffset;
+    if (length > $fillBuffer.length) {
+        const newBuffer = new Float32Array($upperPowerOfTwo(length));
+        newBuffer.set($fillBuffer);
+        newBuffer.set(buffer, $fillBufferOffset);
+        $fillBuffer = newBuffer;
+    }
+    else {
+        $fillBuffer.set(buffer, $fillBufferOffset);
+    }
+    $fillBufferOffset += buffer.length;
+};
+/**
+ * @description バッファを頂点数の配列
+ *              Array of the number of vertices in the buffer
+ *
+ * @type {number[]}
+ * @protected
+ */
+export const $fillBufferIndexes = [];
+/**
+ * @description 塗りの種類の配列
+ *              Array of fill types
+ *
+ * @type {IFillType[]}
+ * @protected
+ */
+export const $fillTypes = [];
+/**
+ * @description 頂点情報の設定値を初期化
+ *              Initializes the setting value of the vertex information
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $clearFillBufferSetting = () => {
+    $fillTypes.length = 0;
+    // fill
+    $fillBufferOffset = 0;
+    $fillBufferIndexes.length = 0;
+};
+/**
+ * @description メッシュ生成用の再利用可能な一時バッファ（GC回避）
+ *              Reusable temporary buffer for mesh generation (avoid GC)
+ *
+ * @type {Float32Array}
+ * @private
+ */
+let $meshTempBuffer = new Float32Array(32);
+/**
+ * @description 必要なサイズの一時バッファを取得（必要に応じて拡張）
+ *              Get temporary buffer of required size (expand if necessary)
+ *
+ * @param  {number} size
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export const $getMeshTempBuffer = (size) => {
+    if ($meshTempBuffer.length < size) {
+        $meshTempBuffer = new Float32Array($upperPowerOfTwo(size));
+    }
+    return $meshTempBuffer;
+};

package/src/PathCommand/service/PathCommandBeginPathService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description 現在操作中のパス配列を全てクリアします。
+ *              Clear all path arrays currently being operated.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/PathCommand/service/PathCommandBeginPathService.js

@@ -0,0 +1,16 @@
+import { $poolArray } from "../../WebGLUtil";
+import { $currentPath, $vertices } from "../../PathCommand";
+/**
+ * @description 現在操作中のパス配列を全てクリアします。
+ *              Clear all path arrays currently being operated.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $currentPath.length = 0;
+    while ($vertices.length) {
+        $poolArray($vertices.pop());
+    }
+};

package/src/PathCommand/service/PathCommandCreateRectVerticesService.d.ts

@@ -0,0 +1,14 @@
+import type { IPath } from "../../interface/IPath";
+/**
+ * @description 指定の座標とサイズで矩形を描画
+ *              Draw a rectangle with the specified coordinates and size
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {array}
+ * @method
+ * @public
+ */
+export declare const execute: (x: number, y: number, w: number, h: number) => IPath[];

package/src/PathCommand/service/PathCommandCreateRectVerticesService.js

@@ -0,0 +1,16 @@
+import { $getArray } from "../../WebGLUtil";
+/**
+ * @description 指定の座標とサイズで矩形を描画
+ *              Draw a rectangle with the specified coordinates and size
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {array}
+ * @method
+ * @public
+ */
+export const execute = (x, y, w, h) => {
+    return $getArray($getArray(x, y, false, x + w, y, false, x + w, y + h, false, x, y + h, false));
+};

package/src/PathCommand/service/PathCommandEqualsToLastPointService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description 最終の頂点情報と指定の(x,y)座標が一致するかどうかを判定します。
+ *              Determines whether the last vertex information matches the specified (x, y) coordinates.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number) => boolean;

package/src/PathCommand/service/PathCommandEqualsToLastPointService.js

@@ -0,0 +1,17 @@
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 最終の頂点情報と指定の(x,y)座標が一致するかどうかを判定します。
+ *              Determines whether the last vertex information matches the specified (x, y) coordinates.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export const execute = (x, y) => {
+    const length = $currentPath.length;
+    const lastX = +$currentPath[length - 3];
+    const lastY = +$currentPath[length - 2];
+    return x === lastX && y === lastY;
+};

package/src/PathCommand/service/PathCommandPushCurrentPathToVerticesService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description 現在操作中のパス配列を全てverticesに統合します
+ *              Integrate all path arrays currently being operated into vertices
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/PathCommand/service/PathCommandPushCurrentPathToVerticesService.js

@@ -0,0 +1,18 @@
+import { $currentPath, $vertices } from "../../PathCommand";
+/**
+ * @description 現在操作中のパス配列を全てverticesに統合します
+ *              Integrate all path arrays currently being operated into vertices
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    // 最低1頂点(3要素)が必要（フィルタリングは$getVerticesで行う）
+    if ($currentPath.length < 3) {
+        $currentPath.length = 0;
+        return;
+    }
+    $vertices.push($currentPath.slice(0));
+    $currentPath.length = 0;
+};

package/src/PathCommand/service/PathCommandPushPointToCurrentPathService.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description 現在のパスに頂点情報を追加します。
+ *              Add vertex information to the current path.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {boolean} is_control_point
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, is_control_point: boolean) => void;

package/src/PathCommand/service/PathCommandPushPointToCurrentPathService.js

@@ -0,0 +1,15 @@
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 現在のパスに頂点情報を追加します。
+ *              Add vertex information to the current path.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {boolean} is_control_point
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, is_control_point) => {
+    $currentPath.push(x, y, is_control_point);
+};

package/src/PathCommand/usecase/PathCommandArcUseCase.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description 円弧を描画します。
+ *              Draw an arc.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} radius
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, radius: number) => void;

package/src/PathCommand/usecase/PathCommandArcUseCase.js

@@ -0,0 +1,20 @@
+import { execute as pathCommandBezierCurveToUseCase } from "./PathCommandBezierCurveToUseCase";
+/**
+ * @description 円弧を描画します。
+ *              Draw an arc.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} radius
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, radius) => {
+    const r = radius;
+    const k = radius * 0.5522847498307936;
+    pathCommandBezierCurveToUseCase(x + r, y + k, x + k, y + r, x, y + r);
+    pathCommandBezierCurveToUseCase(x - k, y + r, x - r, y + k, x - r, y);
+    pathCommandBezierCurveToUseCase(x - r, y - k, x - k, y - r, x, y - r);
+    pathCommandBezierCurveToUseCase(x + k, y - r, x + r, y - k, x + r, y);
+};

package/src/PathCommand/usecase/PathCommandBezierCurveToUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description 3次ベジェ曲線を描画します。適応的テッセレーションにより曲率に応じた分割を行います。
+ *              Draw a cubic Bezier curve. Uses adaptive tessellation based on curvature.
+ *
+ * @param  {number} cx1
+ * @param  {number} cy1
+ * @param  {number} cx2
+ * @param  {number} cy2
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number) => void;

package/src/PathCommand/usecase/PathCommandBezierCurveToUseCase.js

@@ -0,0 +1,38 @@
+import { execute as pathCommandMoveToUseCase } from "./PathCommandMoveToUseCase";
+import { execute as pathCommandEqualsToLastPointService } from "../service/PathCommandEqualsToLastPointService";
+import { execute as pathCommandQuadraticCurveToUseCase } from "./PathCommandQuadraticCurveToUseCase";
+import { execute as bezierConverterAdaptiveCubicToQuadUseCase } from "../../BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase";
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 3次ベジェ曲線を描画します。適応的テッセレーションにより曲率に応じた分割を行います。
+ *              Draw a cubic Bezier curve. Uses adaptive tessellation based on curvature.
+ *
+ * @param  {number} cx1
+ * @param  {number} cy1
+ * @param  {number} cx2
+ * @param  {number} cy2
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (cx1, cy1, cx2, cy2, x, y) => {
+    if (!$currentPath.length) {
+        pathCommandMoveToUseCase(0, 0);
+    }
+    if (pathCommandEqualsToLastPointService(x, y)) {
+        return;
+    }
+    const length = $currentPath.length;
+    const fromX = +$currentPath[length - 3];
+    const fromY = +$currentPath[length - 2];
+    // 適応的テッセレーション: 曲率に基づいて分割数を動的に決定
+    // Adaptive tessellation: dynamically determine subdivision count based on curvature
+    const result = bezierConverterAdaptiveCubicToQuadUseCase(fromX, fromY, cx1, cy1, cx2, cy2, x, y);
+    const buffer = result.buffer;
+    const count = result.count;
+    for (let idx = 0; idx < count * 4;) {
+        pathCommandQuadraticCurveToUseCase(buffer[idx++], buffer[idx++], buffer[idx++], buffer[idx++]);
+    }
+};

package/src/PathCommand/usecase/PathCommandClosePathUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description パスを閉じる
+ *              Close the path
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/PathCommand/usecase/PathCommandClosePathUseCase.js

@@ -0,0 +1,22 @@
+import { execute as pathCommandEqualsToLastPointService } from "../service/PathCommandEqualsToLastPointService";
+import { execute as pathCommandPushPointToCurrentPathService } from "../service/PathCommandPushPointToCurrentPathService";
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description パスを閉じる
+ *              Close the path
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    if ($currentPath.length < 7) {
+        return;
+    }
+    const x = +$currentPath[0];
+    const y = +$currentPath[1];
+    if (pathCommandEqualsToLastPointService(x, y)) {
+        return;
+    }
+    pathCommandPushPointToCurrentPathService(x, y, false);
+};

package/src/PathCommand/usecase/PathCommandLineToUseCase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description 現在の座標から指定の(x,y)座標に直線を描画します。
+ *              Draws a straight line from the current coordinates to the specified (x, y) coordinates.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number) => void;

package/src/PathCommand/usecase/PathCommandLineToUseCase.js

@@ -0,0 +1,26 @@
+import { execute as pathCommandPushPointToCurrentPathService } from "../service/PathCommandPushPointToCurrentPathService";
+import { execute as pathCommandEqualsToLastPointService } from "../service/PathCommandEqualsToLastPointService";
+import { execute as pathCommandMoveToUseCase } from "./PathCommandMoveToUseCase";
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 現在の座標から指定の(x,y)座標に直線を描画します。
+ *              Draws a straight line from the current coordinates to the specified (x, y) coordinates.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y) => {
+    // 現在のパスが存在しない場合はMoveToを実行
+    if (!$currentPath.length) {
+        pathCommandMoveToUseCase(x, y);
+    }
+    // 追加する座標が最終の座標と一致する場合は何もしない
+    if (pathCommandEqualsToLastPointService(x, y)) {
+        return;
+    }
+    // 新しいパスに座標を追加
+    pathCommandPushPointToCurrentPathService(x, y, false);
+};

package/src/PathCommand/usecase/PathCommandMoveToUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 指定の(x,y)座標に移動となる頂点情報を追加します。
+ *              Add vertex information that moves to the specified (x, y) coordinates.
+ *
+ * @param  {array} current_path
+ * @param  {array} vertices
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number) => void;

package/src/PathCommand/usecase/PathCommandMoveToUseCase.js

@@ -0,0 +1,31 @@
+import { execute as pathCommandPushPointToCurrentPathService } from "../service/PathCommandPushPointToCurrentPathService";
+import { execute as pathCommandEqualsToLastPointService } from "../service/PathCommandEqualsToLastPointService";
+import { execute as pathCommandPushCurrentPathToVerticesService } from "../service/PathCommandPushCurrentPathToVerticesService";
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 指定の(x,y)座標に移動となる頂点情報を追加します。
+ *              Add vertex information that moves to the specified (x, y) coordinates.
+ *
+ * @param  {array} current_path
+ * @param  {array} vertices
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y) => {
+    // 現在のパスが存在しない場合は初期処理を行って終了
+    if (!$currentPath.length) {
+        pathCommandPushPointToCurrentPathService(x, y, false);
+        return;
+    }
+    // 追加する座標が最終の座標と一致する場合は何もしない
+    if (pathCommandEqualsToLastPointService(x, y)) {
+        return;
+    }
+    // 現在のパスをverticesに追加して新しいパスを作成
+    pathCommandPushCurrentPathToVerticesService();
+    // 新しいパスに座標を追加
+    pathCommandPushPointToCurrentPathService(x, y, false);
+};

package/src/PathCommand/usecase/PathCommandQuadraticCurveToUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 二次曲線を描画
+ *              Draw a quadratic curve
+ *
+ * @param  {number} cx
+ * @param  {number} cy
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (cx: number, cy: number, x: number, y: number) => void;

package/src/PathCommand/usecase/PathCommandQuadraticCurveToUseCase.js

@@ -0,0 +1,26 @@
+import { execute as pathCommandMoveToUseCase } from "./PathCommandMoveToUseCase";
+import { execute as pathCommandEqualsToLastPointService } from "../service/PathCommandEqualsToLastPointService";
+import { execute as pathCommandPushPointToCurrentPathService } from "../service/PathCommandPushPointToCurrentPathService";
+import { $currentPath } from "../../PathCommand";
+/**
+ * @description 二次曲線を描画
+ *              Draw a quadratic curve
+ *
+ * @param  {number} cx
+ * @param  {number} cy
+ * @param  {number} x
+ * @param  {number} y
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (cx, cy, x, y) => {
+    if (!$currentPath.length) {
+        pathCommandMoveToUseCase(0, 0);
+    }
+    if (pathCommandEqualsToLastPointService(x, y)) {
+        return;
+    }
+    pathCommandPushPointToCurrentPathService(cx, cy, true);
+    pathCommandPushPointToCurrentPathService(x, y, false);
+};

package/src/PathCommand.d.ts

@@ -0,0 +1,27 @@
+import type { IPath } from "./interface/IPath";
+/**
+ * @description 現在操作中のパス配列
+ *              Current path array being operated
+ *
+ * @type {array}
+ * @protected
+ */
+export declare const $currentPath: IPath;
+/**
+ * @description 頂点配列
+ *              Vertex array
+ *
+ * @type {array}
+ * @protected
+ */
+export declare const $vertices: IPath[];
+/**
+ * @description 頂点配列を取得
+ *              Get the vertex array
+ *
+ * @param  {boolean} [stroke=false]
+ * @return {array}
+ * @method
+ * @public
+ */
+export declare const $getVertices: (stroke?: boolean) => IPath[];

package/src/PathCommand.js

@@ -0,0 +1,46 @@
+import { $getArray } from "./WebGLUtil";
+/**
+ * @description 現在操作中のパス配列
+ *              Current path array being operated
+ *
+ * @type {array}
+ * @protected
+ */
+export const $currentPath = $getArray();
+/**
+ * @description 頂点配列
+ *              Vertex array
+ *
+ * @type {array}
+ * @protected
+ */
+export const $vertices = $getArray();
+/**
+ * @description 頂点配列を取得
+ *              Get the vertex array
+ *
+ * @param  {boolean} [stroke=false]
+ * @return {array}
+ * @method
+ * @public
+ */
+export const $getVertices = (stroke = false) => {
+    // stroke: 最低2頂点(6要素)が必要、fill: 最低3頂点(9要素)が必要
+    const minVertices = stroke ? 6 : 9;
+    // 現在のパスをverticesに追加
+    if ($currentPath.length >= minVertices) {
+        $vertices.push($currentPath.slice(0));
+    }
+    $currentPath.length = 0;
+    // minVertices未満のパスを除外した配列を返す
+    const result = [];
+    for (let idx = 0; idx < $vertices.length; idx++) {
+        const path = $vertices[idx];
+        if (path.length >= minVertices) {
+            result.push(path);
+        }
+    }
+    // $verticesをクリア（beginPathで再利用される）
+    $vertices.length = 0;
+    return result;
+};