@next2d/webgl 1.18.12 → 3.0.0

package/README.md

@@ -1,11 +1,212 @@
-@next2d/webgl
-=============
+# @next2d/webgl
 
-## Installation
+WebGL2-based rendering engine for Next2D Player / Next2D Player用のWebGL2ベースレンダリングエンジン
 
-```
+## Overview / 概要
+
+The `@next2d/webgl` package is the main rendering backend for Next2D Player, providing a high-performance, shader-based drawing pipeline built on WebGL2. This package handles all graphics rendering operations including vector shapes, bitmaps, filters, and effects.
+
+`@next2d/webgl`パッケージは、Next2D Playerのメインレンダリングバックエンドであり、WebGL2上に構築された高性能なシェーダーベースの描画パイプラインを提供します。このパッケージは、ベクター図形、ビットマップ、フィルター、エフェクトなど、すべてのグラフィックスレンダリング操作を処理します。
+
+### Key Features / 主な特徴
+
+- **WebGL2-based rendering** - Hardware-accelerated graphics using modern WebGL2 API / WebGL2 APIを使用したハードウェアアクセラレーション
+- **Shader-based pipeline** - Efficient GLSL shader processing for all rendering operations / すべてのレンダリング操作に対する効率的なGLSLシェーダー処理
+- **Texture atlas management** - Optimized texture packing and management / 最適化されたテクスチャパッキングと管理
+- **Advanced filters** - Full support for color matrix, blur, glow, displacement map and more / カラーマトリックス、ブラー、グロー、ディスプレースメントマップなどのフルサポート
+- **Blend modes** - Multiple blend mode support with stencil operations / ステンシル操作による複数のブレンドモードサポート
+- **Masking system** - Stencil buffer-based masking for complex clipping / 複雑なクリッピングのためのステンシルバッファベースのマスキング
+
+## Installation / インストール
+
+```bash
 npm install @next2d/webgl
 ```
 
-## License
+## Directory Structure / ディレクトリ構造
+
+```
+src/
+├── Context.ts                      # Main rendering context / メインレンダリングコンテキスト
+├── Context/
+│   ├── service/                    # Context services / コンテキストサービス
+│   └── usecase/                    # Context use cases / コンテキストユースケース
+├── AtlasManager.ts                 # Texture atlas management / テクスチャアトラス管理
+├── FrameBufferManager.ts           # Framebuffer object management / フレームバッファオブジェクト管理
+├── Blend.ts                        # Blend mode handling / ブレンドモード処理
+├── Mask.ts                         # Stencil-based masking / ステンシルベースのマスキング
+├── Mesh.ts                         # Mesh generation for fills and strokes / 塗りと線のメッシュ生成
+├── PathCommand.ts                  # Path command processing / パスコマンド処理
+├── Filter.ts                       # Filter base functionality / フィルター基本機能
+├── Filter/                         # Filter implementations / フィルター実装
+│   ├── BevelFilter/                # Bevel filter / ベベルフィルター
+│   ├── BitmapFilter/               # Bitmap filter / ビットマップフィルター
+│   ├── BlurFilter/                 # Blur filter / ブラーフィルター
+│   ├── ColorMatrixFilter/          # Color matrix filter / カラーマトリックスフィルター
+│   ├── ConvolutionFilter/          # Convolution filter / コンボリューションフィルター
+│   ├── DisplacementMapFilter/      # Displacement map filter / ディスプレースメントマップフィルター
+│   ├── DropShadowFilter/           # Drop shadow filter / ドロップシャドウフィルター
+│   ├── GlowFilter/                 # Glow filter / グローフィルター
+│   ├── GradientBevelFilter/        # Gradient bevel filter / グラデーションベベルフィルター
+│   └── GradientGlowFilter/         # Gradient glow filter / グラデーショングローフィルター
+├── Shader/                         # GLSL shader system / GLSLシェーダーシステム
+│   ├── Fragment/                   # Fragment shaders / フラグメントシェーダー
+│   ├── Vertex/                     # Vertex shaders / バーテックスシェーダー
+│   ├── ShaderManager.ts            # Shader program management / シェーダープログラム管理
+│   ├── ShaderInstancedManager.ts   # Instanced rendering manager / インスタンスレンダリング管理
+│   ├── GradientLUTGenerator.ts     # Gradient LUT generation / グラデーションLUT生成
+│   └── Variants/                   # Shader variants / シェーダーバリアント
+├── VertexArrayObject.ts            # VAO management / VAO管理
+├── TextureManager.ts               # Texture management / テクスチャ管理
+├── ColorBufferObject.ts            # Color buffer management / カラーバッファ管理
+├── StencilBufferObject.ts          # Stencil buffer management / ステンシルバッファ管理
+├── Stencil.ts                      # Stencil operations / ステンシル操作
+├── Gradient.ts                     # Gradient processing / グラデーション処理
+├── Grid.ts                         # Grid system for rendering / レンダリング用グリッドシステム
+├── Bitmap.ts                       # Bitmap handling / ビットマップ処理
+├── BezierConverter.ts              # Bezier curve conversion / ベジェ曲線変換
+├── WebGLUtil.ts                    # WebGL utility functions / WebGLユーティリティ関数
+└── interface/                      # TypeScript interfaces / TypeScript インターフェース
+```
+
+## Rendering Pipeline / レンダリングパイプライン
+
+The WebGL package implements a sophisticated rendering pipeline that processes graphics commands through multiple stages:
+
+WebGLパッケージは、複数のステージを通じてグラフィックスコマンドを処理する洗練されたレンダリングパイプラインを実装しています:
+
+```mermaid
+flowchart TB
+    Start([Start Rendering])
+    Context[Context<br/>レンダリングコンテキスト]
+    PathCommand[PathCommand<br/>パスコマンド処理]
+    Mesh[Mesh<br/>メッシュ生成]
+    Shader[Shader<br/>シェーダー実行]
+    FrameBuffer[FrameBuffer<br/>フレームバッファ]
+    Atlas[AtlasManager<br/>テクスチャアトラス]
+    Filter[Filter<br/>フィルター処理]
+    Blend[Blend<br/>ブレンド処理]
+    Mask[Mask<br/>マスク処理]
+    Output([Output to Canvas])
+
+    Start --> Context
+    Context --> PathCommand
+    PathCommand --> Mesh
+    Mesh --> Shader
+    Shader --> FrameBuffer
+
+    Context -.-> Atlas
+    Atlas -.-> Shader
+
+    FrameBuffer --> Filter
+    Filter --> Blend
+    Blend --> Mask
+    Mask --> Output
+
+    style Context fill:#e1f5ff
+    style Shader fill:#fff4e1
+    style FrameBuffer fill:#f0e1ff
+    style Atlas fill:#e1ffe1
+```
+
+### Pipeline Stages / パイプラインステージ
+
+1. **Context**: Main rendering context that manages the WebGL state and coordinates all rendering operations
+   - **コンテキスト**: WebGL状態を管理し、すべてのレンダリング操作を調整するメインレンダリングコンテキスト
+
+2. **PathCommand**: Processes vector path commands (moveTo, lineTo, curveTo, etc.) into renderable primitives
+   - **パスコマンド**: ベクターパスコマンド（moveTo、lineTo、curveToなど）をレンダリング可能なプリミティブに処理
+
+3. **Mesh**: Generates triangle meshes from path data for fills and strokes
+   - **メッシュ**: 塗りと線のパスデータから三角形メッシュを生成
+
+4. **Shader**: Executes GLSL shaders to render meshes with appropriate materials and effects
+   - **シェーダー**: 適切なマテリアルとエフェクトでメッシュをレンダリングするGLSLシェーダーを実行
+
+5. **FrameBuffer**: Manages render targets and intermediate rendering buffers
+   - **フレームバッファ**: レンダーターゲットと中間レンダリングバッファを管理
+
+6. **AtlasManager**: Optimizes texture usage through texture atlas packing
+   - **アトラスマネージャー**: テクスチャアトラスパッキングによりテクスチャ使用を最適化
+
+7. **Filter**: Applies post-processing effects (blur, glow, color matrix, etc.)
+   - **フィルター**: ポストプロセスエフェクト（ブラー、グロー、カラーマトリックスなど）を適用
+
+8. **Blend**: Handles blend mode operations for compositing
+   - **ブレンド**: 合成のためのブレンドモード操作を処理
+
+9. **Mask**: Implements stencil-based masking for clipping and complex shapes
+   - **マスク**: クリッピングと複雑な形状のためのステンシルベースのマスキングを実装
+
+## Atlas-Based Rendering Approach / アトラスベースのレンダリングアプローチ
+
+The WebGL package uses a texture atlas system to optimize rendering performance:
+
+WebGLパッケージは、レンダリングパフォーマンスを最適化するためにテクスチャアトラスシステムを使用しています:
+
+### Benefits / 利点
+
+- **Reduced draw calls**: Multiple textures are packed into a single atlas, reducing the number of texture bindings
+  - **描画コールの削減**: 複数のテクスチャが単一のアトラスにパックされ、テクスチャバインディングの数が削減されます
+
+- **Memory efficiency**: Optimal packing algorithm minimizes wasted GPU memory
+  - **メモリ効率**: 最適なパッキングアルゴリズムにより、無駄なGPUメモリが最小化されます
+
+- **Cache coherency**: Better GPU cache utilization through spatial locality
+  - **キャッシュコヒーレンシー**: 空間的局所性による優れたGPUキャッシュ利用
+
+### Atlas Management / アトラス管理
+
+The `AtlasManager` component uses the `@next2d/texture-packer` package to:
+
+`AtlasManager`コンポーネントは`@next2d/texture-packer`パッケージを使用して以下を実行します:
+
+- Dynamically pack textures into optimal atlas layouts
+  - テクスチャを最適なアトラスレイアウトに動的にパック
+- Track texture usage and automatically manage atlas allocation
+  - テクスチャ使用状況を追跡し、アトラス割り当てを自動管理
+- Support multiple atlas instances when texture requirements exceed single atlas capacity
+  - テクスチャ要件が単一のアトラス容量を超える場合、複数のアトラスインスタンスをサポート
+
+### Rendering with Atlases / アトラスを使用したレンダリング
+
+1. Textures are uploaded to GPU and registered with the atlas manager
+   - テクスチャがGPUにアップロードされ、アトラスマネージャーに登録されます
+
+2. The atlas manager assigns UV coordinates for each texture region
+   - アトラスマネージャーが各テクスチャ領域のUV座標を割り当てます
+
+3. Shaders use these UV coordinates to sample from the correct atlas region
+   - シェーダーがこれらのUV座標を使用して正しいアトラス領域からサンプリングします
+
+4. Multiple objects can be rendered in a single draw call using the same atlas
+   - 同じアトラスを使用して複数のオブジェクトを単一の描画コールでレンダリング可能
+
+## Architecture Patterns / アーキテクチャパターン
+
+The codebase follows a clean architecture approach with clear separation of concerns:
+
+コードベースは、関心事の明確な分離を伴うクリーンアーキテクチャアプローチに従っています:
+
+### Service Layer / サービス層
+
+Services contain low-level operations and business logic. They are pure functions that perform specific tasks.
+
+サービスは低レベルの操作とビジネスロジックを含みます。特定のタスクを実行する純粋な関数です。
+
+### Use Case Layer / ユースケース層
+
+Use cases orchestrate multiple services to accomplish higher-level operations. They represent application-specific business rules.
+
+ユースケースは、より高レベルの操作を達成するために複数のサービスを調整します。アプリケーション固有のビジネスルールを表します。
+
+## Dependencies / 依存関係
+
+- `@next2d/texture-packer`: Texture atlas packing and management / テクスチャアトラスのパッキングと管理
+- `@next2d/render-queue`: Rendering operation queue management / レンダリング操作キュー管理
+
+## License / ライセンス
+
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
+
+このプロジェクトは[MITライセンス](https://opensource.org/licenses/MIT)の下でライセンスされています - 詳細は[LICENSE](LICENSE)ファイルを参照してください。

package/package.json

@@ -1,26 +1,18 @@
 {
   "name": "@next2d/webgl",
-  "version": "1.18.12",
-  "description": "Next2D Webgl Packages",
-  "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
+  "version": "3.0.0",
+  "description": "Next2D Webgl Package",
+  "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
   "homepage": "https://next2d.app",
   "bugs": "https://github.com/Next2D/Player/issues",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "import": "./src/index.js",
+      "require": "./src/index.js"
     }
   },
   "keywords": [
@@ -31,7 +23,8 @@
     "type": "git",
     "url": "git+https://github.com/Next2D/Player.git"
   },
-  "peerDependencies": {
-    "@next2d/share": "1.18.12"
+  "dependencies": {
+    "@next2d/texture-packer": "3.0.0",
+    "@next2d/render-queue": "3.0.0"
   }
 }

package/src/AtlasManager/service/AtlasManagerCreateNodeService.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description 指定サイズのキャッシュ座標を生成、二分木構造を利用して座標を取得します。
+ *              Generate cache coordinates of the specified size and get the coordinates using a binary tree structure.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Node}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => Node;

package/src/AtlasManager/service/AtlasManagerCreateNodeService.js

@@ -0,0 +1,41 @@
+import { $rootNodes } from "../../AtlasManager";
+import { $RENDER_MAX_SIZE } from "../../WebGLUtil";
+import { TexturePacker } from "@next2d/texture-packer";
+import { $activeAtlasIndex, $setActiveAtlasIndex } from "../../AtlasManager";
+/**
+ * @description 指定サイズのキャッシュ座標を生成、二分木構造を利用して座標を取得します。
+ *              Generate cache coordinates of the specified size and get the coordinates using a binary tree structure.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Node}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    const index = $activeAtlasIndex;
+    if (!$rootNodes[index]) {
+        $rootNodes[index] = new TexturePacker(index, $RENDER_MAX_SIZE, $RENDER_MAX_SIZE);
+    }
+    const rootNode = $rootNodes[index];
+    const node = rootNode.insert(width, height);
+    if (node) {
+        return node;
+    }
+    for (let idx = 0; idx < 10; idx++) {
+        if (index === idx) {
+            continue;
+        }
+        $setActiveAtlasIndex(idx);
+        const rootNode = $rootNodes[idx];
+        if (!rootNode) {
+            return execute(width, height);
+        }
+        const node = rootNode.insert(width, height);
+        if (!node) {
+            continue;
+        }
+        return node;
+    }
+    return execute(width, height);
+};

package/src/AtlasManager/service/AtlasManagerRemoveNodeService.d.ts

@@ -0,0 +1,11 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description アトラスの座標情報ノードを削除
+ *              Remove the coordinate information node of the atlas
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node) => void;

package/src/AtlasManager/service/AtlasManagerRemoveNodeService.js

@@ -0,0 +1,17 @@
+import { $rootNodes } from "../../AtlasManager";
+/**
+ * @description アトラスの座標情報ノードを削除
+ *              Remove the coordinate information node of the atlas
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node) => {
+    const rootNode = $rootNodes[node.index];
+    if (!rootNode) {
+        return;
+    }
+    rootNode.dispose(node.x, node.y, node.w, node.h);
+};

package/src/AtlasManager/usecase/AtlasManagerResetUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description アトラス専用の座標マップ、フレームバッファをリセット
+ *              Reset the coordinate map and frame buffer dedicated to the atlas
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/AtlasManager/usecase/AtlasManagerResetUseCase.js

@@ -0,0 +1,19 @@
+import { execute as frameBufferManagerReleaseAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerReleaseAttachmentObjectUseCase";
+import { $rootNodes, $setActiveAtlasIndex, $getAtlasAttachmentObjects } from "../../AtlasManager";
+/**
+ * @description アトラス専用の座標マップ、フレームバッファをリセット
+ *              Reset the coordinate map and frame buffer dedicated to the atlas
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $rootNodes.length = 0;
+    $setActiveAtlasIndex(0);
+    const atlasAttachmentObjects = $getAtlasAttachmentObjects();
+    for (let idx = 0; idx < atlasAttachmentObjects.length; idx++) {
+        frameBufferManagerReleaseAttachmentObjectUseCase(atlasAttachmentObjects[idx]);
+    }
+    atlasAttachmentObjects.length = 0;
+};

package/src/AtlasManager.d.ts

@@ -0,0 +1,16 @@
+import type { IAttachmentObject } from "./interface/IAttachmentObject";
+import type { TexturePacker } from "@next2d/texture-packer";
+import type { ITextureObject } from "./interface/ITextureObject";
+export declare let $activeAtlasIndex: number;
+export declare const $setActiveAtlasIndex: (index: number) => void;
+export declare const $getAtlasAttachmentObjects: () => IAttachmentObject[];
+export declare const $setAtlasAttachmentObject: (attachment_object: IAttachmentObject) => void;
+export declare const $getAtlasAttachmentObject: () => IAttachmentObject;
+export declare const $hasAtlasAttachmentObject: () => boolean;
+export declare const $rootNodes: TexturePacker[];
+export declare let $atlasTexture: ITextureObject | null;
+export declare const $getAtlasTextureObject: () => ITextureObject;
+export declare const $getActiveTransferBounds: (index: number) => Float32Array;
+export declare const $clearTransferBounds: () => void;
+export declare let $currentAtlasIndex: number;
+export declare const $setCurrentAtlasIndex: (index: number) => void;

package/src/AtlasManager.js

@@ -0,0 +1,59 @@
+import { execute as textureManagerCreateAtlasTextureUseCase } from "./TextureManager/usecase/TextureManagerCreateAtlasTextureUseCase";
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "./FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+import { $RENDER_MAX_SIZE } from "./WebGLUtil";
+const $MAX_VALUE = Number.MAX_VALUE;
+const $MIN_VALUE = -Number.MAX_VALUE;
+export let $activeAtlasIndex = 0;
+export const $setActiveAtlasIndex = (index) => {
+    $activeAtlasIndex = index;
+};
+const $atlasAttachmentObjects = [];
+export const $getAtlasAttachmentObjects = () => {
+    return $atlasAttachmentObjects;
+};
+export const $setAtlasAttachmentObject = (attachment_object) => {
+    $atlasAttachmentObjects[$activeAtlasIndex] = attachment_object;
+};
+export const $getAtlasAttachmentObject = () => {
+    if (!($activeAtlasIndex in $atlasAttachmentObjects)) {
+        $setAtlasAttachmentObject(frameBufferManagerGetAttachmentObjectUseCase($RENDER_MAX_SIZE, $RENDER_MAX_SIZE, true));
+    }
+    return $atlasAttachmentObjects[$activeAtlasIndex];
+};
+export const $hasAtlasAttachmentObject = () => {
+    return $activeAtlasIndex in $atlasAttachmentObjects;
+};
+export const $rootNodes = [];
+export let $atlasTexture = null;
+export const $getAtlasTextureObject = () => {
+    if (!$atlasTexture) {
+        $atlasTexture = textureManagerCreateAtlasTextureUseCase();
+    }
+    return $atlasTexture;
+};
+const $transferBounds = [];
+export const $getActiveTransferBounds = (index) => {
+    if (!(index in $transferBounds)) {
+        $transferBounds[index] = new Float32Array([
+            $MAX_VALUE,
+            $MAX_VALUE,
+            $MIN_VALUE,
+            $MIN_VALUE
+        ]);
+    }
+    return $transferBounds[index];
+};
+export const $clearTransferBounds = () => {
+    for (let idx = 0; idx < $transferBounds.length; ++idx) {
+        const bounds = $transferBounds[idx];
+        if (!bounds) {
+            continue;
+        }
+        bounds[0] = bounds[1] = $MAX_VALUE;
+        bounds[2] = bounds[3] = $MIN_VALUE;
+    }
+};
+export let $currentAtlasIndex = 0;
+export const $setCurrentAtlasIndex = (index) => {
+    $currentAtlasIndex = index;
+};

package/src/BezierConverter/service/BezierConverterSplit2CubicService.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description 3次ベジェに分割
+ *              Split cubic Bezier
+ *
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} p4
+ * @param  {number} p5
+ * @param  {number} p6
+ * @param  {number} p7
+ * @param  {number} offset1
+ * @param  {number} offset2
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (p0: number, p1: number, p2: number, p3: number, p4: number, p5: number, p6: number, p7: number, offset1: number, offset2: number) => void;

package/src/BezierConverter/service/BezierConverterSplit2CubicService.js

@@ -0,0 +1,41 @@
+import { $bezierBuffer } from "../../BezierConverter";
+/**
+ * @description 3次ベジェに分割
+ *              Split cubic Bezier
+ *
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} p4
+ * @param  {number} p5
+ * @param  {number} p6
+ * @param  {number} p7
+ * @param  {number} offset1
+ * @param  {number} offset2
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (p0, p1, p2, p3, p4, p5, p6, p7, offset1, offset2) => {
+    const mx = (p0 + 3 * (p2 + p4) + p6) * 0.125;
+    const my = (p1 + 3 * (p3 + p5) + p7) * 0.125;
+    const dx = (p6 + p4 - p2 - p0) * 0.125;
+    const dy = (p7 + p5 - p3 - p1) * 0.125;
+    $bezierBuffer[offset1] = p0;
+    $bezierBuffer[offset1 + 1] = p1;
+    $bezierBuffer[offset1 + 2] = (p0 + p2) * 0.5;
+    $bezierBuffer[offset1 + 3] = (p1 + p3) * 0.5;
+    $bezierBuffer[offset1 + 4] = mx - dx;
+    $bezierBuffer[offset1 + 5] = my - dy;
+    $bezierBuffer[offset1 + 6] = mx;
+    $bezierBuffer[offset1 + 7] = my;
+    $bezierBuffer[offset2] = mx;
+    $bezierBuffer[offset2 + 1] = my;
+    $bezierBuffer[offset2 + 2] = mx + dx;
+    $bezierBuffer[offset2 + 3] = my + dy;
+    $bezierBuffer[offset2 + 4] = (p4 + p6) * 0.5;
+    $bezierBuffer[offset2 + 5] = (p5 + p7) * 0.5;
+    $bezierBuffer[offset2 + 6] = p6;
+    $bezierBuffer[offset2 + 7] = p7;
+};

package/src/BezierConverter/service/BezierConverterSplit2QuadService.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description 2次ベジェを分割
+ *              Split quadratic Bezier
+ *
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} p4
+ * @param  {number} p5
+ * @param  {number} p6
+ * @param  {number} p7
+ * @param  {number} offset
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (p0: number, p1: number, p2: number, p3: number, p4: number, p5: number, p6: number, p7: number, offset: number) => void;

package/src/BezierConverter/service/BezierConverterSplit2QuadService.js

@@ -0,0 +1,31 @@
+import { $bezierBuffer } from "../../BezierConverter";
+/**
+ * @description 2次ベジェを分割
+ *              Split quadratic Bezier
+ *
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} p4
+ * @param  {number} p5
+ * @param  {number} p6
+ * @param  {number} p7
+ * @param  {number} offset
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (p0, p1, p2, p3, p4, p5, p6, p7, offset) => {
+    const mx = (p0 + 3 * (p2 + p4) + p6) * 0.125;
+    const my = (p1 + 3 * (p3 + p5) + p7) * 0.125;
+    // 2次ベジェの始点の値は不要なので含めない
+    $bezierBuffer[offset] = p0 * 0.25 + p2 * 0.75;
+    $bezierBuffer[offset + 1] = p1 * 0.25 + p3 * 0.75;
+    $bezierBuffer[offset + 2] = mx;
+    $bezierBuffer[offset + 3] = my;
+    $bezierBuffer[offset + 4] = p4 * 0.75 + p6 * 0.25;
+    $bezierBuffer[offset + 5] = p5 * 0.75 + p7 * 0.25;
+    $bezierBuffer[offset + 6] = p6;
+    $bezierBuffer[offset + 7] = p7;
+};

package/src/BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase.d.ts

@@ -0,0 +1,18 @@
+import type { ICubicConverterReturnObject } from "../../interface/ICubicConverterReturnObject";
+/**
+ * @description 3次ベジェ曲線を適応的に2次ベジェ曲線に分割
+ *              Adaptively split cubic Bezier curve into quadratic Bezier curves
+ *
+ * @param  {number} from_x
+ * @param  {number} from_y
+ * @param  {number} cx1
+ * @param  {number} cy1
+ * @param  {number} cx2
+ * @param  {number} cy2
+ * @param  {number} x
+ * @param  {number} y
+ * @return {ICubicConverterReturnObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (from_x: number, from_y: number, cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number) => ICubicConverterReturnObject;