@next2d/webgl 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/README.md +206 -5
  2. package/package.json +3 -3
  3. package/src/AtlasManager/service/AtlasManagerCreateNodeService.js +20 -6
  4. package/src/AtlasManager.d.ts +2 -118
  5. package/src/AtlasManager.js +10 -179
  6. package/src/BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase.d.ts +18 -0
  7. package/src/BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase.js +193 -0
  8. package/src/BezierConverter.d.ts +88 -0
  9. package/src/BezierConverter.js +158 -0
  10. package/src/Blend/service/BlendAddService.js +2 -2
  11. package/src/Blend/service/BlendAlphaService.js +2 -2
  12. package/src/Blend/service/BlendEraseService.js +2 -2
  13. package/src/Blend/service/BlendOneZeroService.js +2 -2
  14. package/src/Blend/service/BlendResetService.js +2 -2
  15. package/src/Blend/service/BlendScreenService.js +2 -2
  16. package/src/Blend/service/BlendSourceAtopService.js +2 -2
  17. package/src/Blend/service/BlendSourceInService.js +2 -2
  18. package/src/Blend/usecase/BlnedDrawArraysInstancedUseCase.js +2 -2
  19. package/src/Blend/usecase/BlnedDrawDisplayObjectUseCase.js +10 -20
  20. package/src/Blend.d.ts +2 -36
  21. package/src/Blend.js +2 -58
  22. package/src/Context/service/ContextBeginNodeRenderingService.js +3 -3
  23. package/src/Context/service/ContextCreateImageBitmapService.js +30 -10
  24. package/src/Context/service/ContextEndNodeRenderingService.js +2 -2
  25. package/src/Context/service/ContextUpdateTransferBoundsService.js +2 -2
  26. package/src/Context/usecase/ContextApplyFilterUseCase.js +16 -10
  27. package/src/Context/usecase/ContextBindUseCase.js +3 -3
  28. package/src/Context/usecase/ContextClearRectUseCase.js +3 -3
  29. package/src/Context/usecase/ContextClipUseCase.js +3 -3
  30. package/src/Context/usecase/ContextContainerBeginLayerUseCase.d.ts +18 -0
  31. package/src/Context/usecase/ContextContainerBeginLayerUseCase.js +31 -0
  32. package/src/Context/usecase/ContextContainerDrawCachedFilterUseCase.d.ts +16 -0
  33. package/src/Context/usecase/ContextContainerDrawCachedFilterUseCase.js +36 -0
  34. package/src/Context/usecase/ContextContainerEndLayerUseCase.d.ts +18 -0
  35. package/src/Context/usecase/ContextContainerEndLayerUseCase.js +171 -0
  36. package/src/Context/usecase/ContextDrawFillUseCase.js +9 -5
  37. package/src/Context/usecase/ContextGradientStrokeUseCase.js +1 -1
  38. package/src/Context/usecase/ContextLinearGradientFillUseCase.js +16 -14
  39. package/src/Context/usecase/ContextNormalFillUseCase.js +10 -12
  40. package/src/Context/usecase/ContextPatternBitmapFillUseCase.d.ts +2 -2
  41. package/src/Context/usecase/ContextPatternBitmapFillUseCase.js +13 -14
  42. package/src/Context/usecase/ContextRadialGradientFillUseCase.js +16 -14
  43. package/src/Context.d.ts +5 -626
  44. package/src/Context.js +31 -636
  45. package/src/Filter/BevelFilter/usecase/FilterApplyBevelFilterUseCase.js +2 -2
  46. package/src/Filter/BlurFilter/usecase/FilterApplyBlurFilterUseCase.js +2 -2
  47. package/src/Filter/DisplacementMapFilter/usecase/FilterApplyDisplacementMapFilterUseCase.d.ts +1 -2
  48. package/src/Filter/DisplacementMapFilter/usecase/FilterApplyDisplacementMapFilterUseCase.js +3 -9
  49. package/src/Filter/DropShadowFilter/usecase/FilterApplyDropShadowFilterUseCase.js +2 -2
  50. package/src/Filter/GradientBevelFilter/usecase/FilterApplyGradientBevelFilterUseCase.js +2 -2
  51. package/src/Filter/GradientGlowFilter/usecase/FilterApplyGradientGlowFilterUseCase.js +2 -2
  52. package/src/FrameBufferManager/service/FrameBufferManagerBindAttachmentObjectService.js +8 -2
  53. package/src/FrameBufferManager/service/FrameBufferManagerTransferAtlasTextureService.js +12 -25
  54. package/src/FrameBufferManager/service/FrameBufferManagerUnBindAttachmentObjectService.js +2 -2
  55. package/src/FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase.js +2 -2
  56. package/src/FrameBufferManager/usecase/FrameBufferManagerGetTextureFromNodeUseCase.js +7 -9
  57. package/src/FrameBufferManager.d.ts +8 -137
  58. package/src/FrameBufferManager.js +8 -199
  59. package/src/Mask/service/MaskBeginMaskService.js +2 -2
  60. package/src/Mask/service/MaskEndMaskService.js +2 -2
  61. package/src/Mask/service/MaskSetMaskBoundsService.js +2 -2
  62. package/src/Mask/usecase/MaskBindUseCase.js +4 -4
  63. package/src/Mask/usecase/MaskLeaveMaskUseCase.js +4 -4
  64. package/src/Mesh/service/MeshFindOverlappingPathsService.d.ts +2 -1
  65. package/src/Mesh/service/MeshFindOverlappingPathsService.js +7 -3
  66. package/src/Mesh/service/MeshIsPointInsideRectangleService.js +14 -11
  67. package/src/Mesh/usecase/MeshFillGenerateUseCase.js +7 -5
  68. package/src/Mesh/usecase/MeshGenerateCalculateBevelJoinUseCase.js +15 -3
  69. package/src/Mesh/usecase/MeshGenerateCalculateMiterJoinUseCase.js +17 -3
  70. package/src/Mesh/usecase/MeshGenerateCalculateRoundJoinUseCase.js +14 -2
  71. package/src/Mesh/usecase/MeshGenerateStrokeOutlineUseCase.js +39 -23
  72. package/src/Mesh/usecase/MeshStrokeGenerateUseCase.js +12 -4
  73. package/src/Mesh.d.ts +10 -0
  74. package/src/Mesh.js +23 -0
  75. package/src/PathCommand/service/PathCommandPushCurrentPathToVerticesService.d.ts +1 -2
  76. package/src/PathCommand/service/PathCommandPushCurrentPathToVerticesService.js +3 -4
  77. package/src/PathCommand/usecase/PathCommandBezierCurveToUseCase.d.ts +2 -2
  78. package/src/PathCommand/usecase/PathCommandBezierCurveToUseCase.js +9 -5
  79. package/src/PathCommand.js +18 -3
  80. package/src/Shader/Fragment/Filter/FragmentShaderSourceBlurFilter.d.ts +0 -6
  81. package/src/Shader/Fragment/Filter/FragmentShaderSourceBlurFilter.js +0 -6
  82. package/src/Shader/Fragment/Filter/FragmentShaderSourceColorMatrixFilter.d.ts +0 -5
  83. package/src/Shader/Fragment/Filter/FragmentShaderSourceColorMatrixFilter.js +0 -5
  84. package/src/Shader/Fragment/Filter/FragmentShaderSourceConvolutionFilter.d.ts +0 -10
  85. package/src/Shader/Fragment/Filter/FragmentShaderSourceConvolutionFilter.js +0 -10
  86. package/src/Shader/Fragment/Filter/FragmentShaderSourceDisplacementMapFilter.d.ts +0 -9
  87. package/src/Shader/Fragment/Filter/FragmentShaderSourceDisplacementMapFilter.js +8 -18
  88. package/src/Shader/Fragment/Filter/FragmentShaderSourceFilter.d.ts +0 -14
  89. package/src/Shader/Fragment/Filter/FragmentShaderSourceFilter.js +0 -99
  90. package/src/Shader/Fragment/FragmentShaderLibrary.d.ts +0 -17
  91. package/src/Shader/Fragment/FragmentShaderLibrary.js +9 -23
  92. package/src/Shader/Fragment/FragmentShaderSource.d.ts +0 -40
  93. package/src/Shader/Fragment/FragmentShaderSource.js +9 -47
  94. package/src/Shader/Fragment/FragmentShaderSourceBlend.d.ts +0 -7
  95. package/src/Shader/Fragment/FragmentShaderSourceBlend.js +0 -87
  96. package/src/Shader/Fragment/FragmentShaderSourceGradient.d.ts +0 -10
  97. package/src/Shader/Fragment/FragmentShaderSourceGradient.js +7 -41
  98. package/src/Shader/Fragment/FragmentShaderSourceGradientLUT.d.ts +0 -11
  99. package/src/Shader/Fragment/FragmentShaderSourceGradientLUT.js +0 -11
  100. package/src/Shader/Fragment/FragmentShaderSourceTexture.d.ts +0 -11
  101. package/src/Shader/Fragment/FragmentShaderSourceTexture.js +2 -13
  102. package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGenerateShapeTextureUseCase.d.ts +4 -0
  103. package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGenerateShapeTextureUseCase.js +14 -7
  104. package/src/Shader/GradientLUTGenerator.d.ts +23 -0
  105. package/src/Shader/GradientLUTGenerator.js +43 -6
  106. package/src/Shader/ShaderInstancedManager.d.ts +0 -26
  107. package/src/Shader/ShaderInstancedManager.js +0 -26
  108. package/src/Shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService.js +3 -3
  109. package/src/Shader/ShaderManager/service/ShaderManagerSetFillUniformService.js +3 -3
  110. package/src/Shader/ShaderManager/service/ShaderManagerSetGradientFillUniformService.js +3 -3
  111. package/src/Shader/ShaderManager/service/ShaderManagerSetMaskUniformService.js +3 -3
  112. package/src/Shader/ShaderManager/service/ShaderManagerSetMatrixTextureUniformService.js +3 -3
  113. package/src/Shader/ShaderManager/service/ShaderManagerSetMatrixTextureWithColorTransformUniformService.js +3 -3
  114. package/src/Shader/ShaderManager/service/ShaderManagerSetTextureUniformService.js +3 -3
  115. package/src/Shader/ShaderManager.d.ts +3 -71
  116. package/src/Shader/ShaderManager.js +22 -80
  117. package/src/Shader/Variants/Filter/service/VariantsBitmapFilterShaderService.js +2 -1
  118. package/src/Shader/Variants/GradientLUT/service/VariantsGradientLUTShaderService.d.ts +2 -2
  119. package/src/Shader/Variants/GradientLUT/service/VariantsGradientLUTShaderService.js +9 -6
  120. package/src/Shader/Variants/GradientLUTVariants.d.ts +21 -0
  121. package/src/Shader/Variants/GradientLUTVariants.js +63 -0
  122. package/src/Shader/Vertex/VertexShaderLibrary.d.ts +0 -17
  123. package/src/Shader/Vertex/VertexShaderLibrary.js +1 -18
  124. package/src/Shader/Vertex/VertexShaderSource.d.ts +0 -25
  125. package/src/Shader/Vertex/VertexShaderSource.js +0 -25
  126. package/src/Shader/Vertex/VertexShaderSourceFill.d.ts +0 -65
  127. package/src/Shader/Vertex/VertexShaderSourceFill.js +0 -65
  128. package/src/Stencil/service/StencilDisableSampleAlphaToCoverageService.d.ts +1 -0
  129. package/src/Stencil/service/StencilDisableSampleAlphaToCoverageService.js +8 -0
  130. package/src/Stencil/service/StencilEnableSampleAlphaToCoverageService.d.ts +1 -0
  131. package/src/Stencil/service/StencilEnableSampleAlphaToCoverageService.js +8 -0
  132. package/src/Stencil/service/StencilResetService.d.ts +9 -0
  133. package/src/Stencil/service/StencilResetService.js +14 -0
  134. package/src/Stencil/service/StencilSetFillModeService.d.ts +1 -0
  135. package/src/Stencil/service/StencilSetFillModeService.js +13 -0
  136. package/src/Stencil/service/StencilSetMaskModeService.d.ts +1 -0
  137. package/src/Stencil/service/StencilSetMaskModeService.js +14 -0
  138. package/src/Stencil.d.ts +9 -0
  139. package/src/Stencil.js +17 -0
  140. package/src/StencilBufferObject/usecase/StencilBufferObjectAcquireObjectUseCase.js +15 -7
  141. package/src/TextureManager/usecase/TextureManagerGetMainTextureFromBoundsUseCase.js +6 -7
  142. package/src/VertexArrayObject/service/VertexArrayObjectCreateFillObjectService.js +2 -3
  143. package/src/VertexArrayObject/usecase/VertexArrayObjectBindAttributeUseCase.js +4 -2
  144. package/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.js +3 -1
  145. package/src/VertexArrayObject/usecase/VertexArrayObjectCreateInstancedVertexArrayObjectUseCase.js +5 -3
  146. package/src/VertexArrayObject/usecase/VertexArrayObjectCreateRectVertexArrayObjectUseCase.js +2 -2
  147. package/src/VertexArrayObject.d.ts +0 -9
  148. package/src/VertexArrayObject.js +0 -16
  149. package/src/WebGLUtil.d.ts +10 -262
  150. package/src/WebGLUtil.js +45 -316
  151. package/src/interface/ICubicConverterReturnObject.d.ts +4 -0
  152. package/src/interface/ICubicConverterReturnObject.js +1 -0
  153. package/src/interface/IVertexArrayObject.d.ts +1 -1
  154. package/src/Context/service/ContextUpdateAllTransferBoundsService.d.ts +0 -11
  155. package/src/Context/service/ContextUpdateAllTransferBoundsService.js +0 -21
package/README.md CHANGED
@@ -1,11 +1,212 @@
1
- @next2d/webgl
2
- =============
1
+ # @next2d/webgl
3
2
 
4
- ## Installation
3
+ WebGL2-based rendering engine for Next2D Player / Next2D Player用のWebGL2ベースレンダリングエンジン
5
4
 
6
- ```
5
+ ## Overview / 概要
6
+
7
+ 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.
8
+
9
+ `@next2d/webgl`パッケージは、Next2D Playerのメインレンダリングバックエンドであり、WebGL2上に構築された高性能なシェーダーベースの描画パイプラインを提供します。このパッケージは、ベクター図形、ビットマップ、フィルター、エフェクトなど、すべてのグラフィックスレンダリング操作を処理します。
10
+
11
+ ### Key Features / 主な特徴
12
+
13
+ - **WebGL2-based rendering** - Hardware-accelerated graphics using modern WebGL2 API / WebGL2 APIを使用したハードウェアアクセラレーション
14
+ - **Shader-based pipeline** - Efficient GLSL shader processing for all rendering operations / すべてのレンダリング操作に対する効率的なGLSLシェーダー処理
15
+ - **Texture atlas management** - Optimized texture packing and management / 最適化されたテクスチャパッキングと管理
16
+ - **Advanced filters** - Full support for color matrix, blur, glow, displacement map and more / カラーマトリックス、ブラー、グロー、ディスプレースメントマップなどのフルサポート
17
+ - **Blend modes** - Multiple blend mode support with stencil operations / ステンシル操作による複数のブレンドモードサポート
18
+ - **Masking system** - Stencil buffer-based masking for complex clipping / 複雑なクリッピングのためのステンシルバッファベースのマスキング
19
+
20
+ ## Installation / インストール
21
+
22
+ ```bash
7
23
  npm install @next2d/webgl
8
24
  ```
9
25
 
10
- ## License
26
+ ## Directory Structure / ディレクトリ構造
27
+
28
+ ```
29
+ src/
30
+ ├── Context.ts # Main rendering context / メインレンダリングコンテキスト
31
+ ├── Context/
32
+ │ ├── service/ # Context services / コンテキストサービス
33
+ │ └── usecase/ # Context use cases / コンテキストユースケース
34
+ ├── AtlasManager.ts # Texture atlas management / テクスチャアトラス管理
35
+ ├── FrameBufferManager.ts # Framebuffer object management / フレームバッファオブジェクト管理
36
+ ├── Blend.ts # Blend mode handling / ブレンドモード処理
37
+ ├── Mask.ts # Stencil-based masking / ステンシルベースのマスキング
38
+ ├── Mesh.ts # Mesh generation for fills and strokes / 塗りと線のメッシュ生成
39
+ ├── PathCommand.ts # Path command processing / パスコマンド処理
40
+ ├── Filter.ts # Filter base functionality / フィルター基本機能
41
+ ├── Filter/ # Filter implementations / フィルター実装
42
+ │ ├── BevelFilter/ # Bevel filter / ベベルフィルター
43
+ │ ├── BitmapFilter/ # Bitmap filter / ビットマップフィルター
44
+ │ ├── BlurFilter/ # Blur filter / ブラーフィルター
45
+ │ ├── ColorMatrixFilter/ # Color matrix filter / カラーマトリックスフィルター
46
+ │ ├── ConvolutionFilter/ # Convolution filter / コンボリューションフィルター
47
+ │ ├── DisplacementMapFilter/ # Displacement map filter / ディスプレースメントマップフィルター
48
+ │ ├── DropShadowFilter/ # Drop shadow filter / ドロップシャドウフィルター
49
+ │ ├── GlowFilter/ # Glow filter / グローフィルター
50
+ │ ├── GradientBevelFilter/ # Gradient bevel filter / グラデーションベベルフィルター
51
+ │ └── GradientGlowFilter/ # Gradient glow filter / グラデーショングローフィルター
52
+ ├── Shader/ # GLSL shader system / GLSLシェーダーシステム
53
+ │ ├── Fragment/ # Fragment shaders / フラグメントシェーダー
54
+ │ ├── Vertex/ # Vertex shaders / バーテックスシェーダー
55
+ │ ├── ShaderManager.ts # Shader program management / シェーダープログラム管理
56
+ │ ├── ShaderInstancedManager.ts # Instanced rendering manager / インスタンスレンダリング管理
57
+ │ ├── GradientLUTGenerator.ts # Gradient LUT generation / グラデーションLUT生成
58
+ │ └── Variants/ # Shader variants / シェーダーバリアント
59
+ ├── VertexArrayObject.ts # VAO management / VAO管理
60
+ ├── TextureManager.ts # Texture management / テクスチャ管理
61
+ ├── ColorBufferObject.ts # Color buffer management / カラーバッファ管理
62
+ ├── StencilBufferObject.ts # Stencil buffer management / ステンシルバッファ管理
63
+ ├── Stencil.ts # Stencil operations / ステンシル操作
64
+ ├── Gradient.ts # Gradient processing / グラデーション処理
65
+ ├── Grid.ts # Grid system for rendering / レンダリング用グリッドシステム
66
+ ├── Bitmap.ts # Bitmap handling / ビットマップ処理
67
+ ├── BezierConverter.ts # Bezier curve conversion / ベジェ曲線変換
68
+ ├── WebGLUtil.ts # WebGL utility functions / WebGLユーティリティ関数
69
+ └── interface/ # TypeScript interfaces / TypeScript インターフェース
70
+ ```
71
+
72
+ ## Rendering Pipeline / レンダリングパイプライン
73
+
74
+ The WebGL package implements a sophisticated rendering pipeline that processes graphics commands through multiple stages:
75
+
76
+ WebGLパッケージは、複数のステージを通じてグラフィックスコマンドを処理する洗練されたレンダリングパイプラインを実装しています:
77
+
78
+ ```mermaid
79
+ flowchart TB
80
+ Start([Start Rendering])
81
+ Context[Context<br/>レンダリングコンテキスト]
82
+ PathCommand[PathCommand<br/>パスコマンド処理]
83
+ Mesh[Mesh<br/>メッシュ生成]
84
+ Shader[Shader<br/>シェーダー実行]
85
+ FrameBuffer[FrameBuffer<br/>フレームバッファ]
86
+ Atlas[AtlasManager<br/>テクスチャアトラス]
87
+ Filter[Filter<br/>フィルター処理]
88
+ Blend[Blend<br/>ブレンド処理]
89
+ Mask[Mask<br/>マスク処理]
90
+ Output([Output to Canvas])
91
+
92
+ Start --> Context
93
+ Context --> PathCommand
94
+ PathCommand --> Mesh
95
+ Mesh --> Shader
96
+ Shader --> FrameBuffer
97
+
98
+ Context -.-> Atlas
99
+ Atlas -.-> Shader
100
+
101
+ FrameBuffer --> Filter
102
+ Filter --> Blend
103
+ Blend --> Mask
104
+ Mask --> Output
105
+
106
+ style Context fill:#e1f5ff
107
+ style Shader fill:#fff4e1
108
+ style FrameBuffer fill:#f0e1ff
109
+ style Atlas fill:#e1ffe1
110
+ ```
111
+
112
+ ### Pipeline Stages / パイプラインステージ
113
+
114
+ 1. **Context**: Main rendering context that manages the WebGL state and coordinates all rendering operations
115
+ - **コンテキスト**: WebGL状態を管理し、すべてのレンダリング操作を調整するメインレンダリングコンテキスト
116
+
117
+ 2. **PathCommand**: Processes vector path commands (moveTo, lineTo, curveTo, etc.) into renderable primitives
118
+ - **パスコマンド**: ベクターパスコマンド(moveTo、lineTo、curveToなど)をレンダリング可能なプリミティブに処理
119
+
120
+ 3. **Mesh**: Generates triangle meshes from path data for fills and strokes
121
+ - **メッシュ**: 塗りと線のパスデータから三角形メッシュを生成
122
+
123
+ 4. **Shader**: Executes GLSL shaders to render meshes with appropriate materials and effects
124
+ - **シェーダー**: 適切なマテリアルとエフェクトでメッシュをレンダリングするGLSLシェーダーを実行
125
+
126
+ 5. **FrameBuffer**: Manages render targets and intermediate rendering buffers
127
+ - **フレームバッファ**: レンダーターゲットと中間レンダリングバッファを管理
128
+
129
+ 6. **AtlasManager**: Optimizes texture usage through texture atlas packing
130
+ - **アトラスマネージャー**: テクスチャアトラスパッキングによりテクスチャ使用を最適化
131
+
132
+ 7. **Filter**: Applies post-processing effects (blur, glow, color matrix, etc.)
133
+ - **フィルター**: ポストプロセスエフェクト(ブラー、グロー、カラーマトリックスなど)を適用
134
+
135
+ 8. **Blend**: Handles blend mode operations for compositing
136
+ - **ブレンド**: 合成のためのブレンドモード操作を処理
137
+
138
+ 9. **Mask**: Implements stencil-based masking for clipping and complex shapes
139
+ - **マスク**: クリッピングと複雑な形状のためのステンシルベースのマスキングを実装
140
+
141
+ ## Atlas-Based Rendering Approach / アトラスベースのレンダリングアプローチ
142
+
143
+ The WebGL package uses a texture atlas system to optimize rendering performance:
144
+
145
+ WebGLパッケージは、レンダリングパフォーマンスを最適化するためにテクスチャアトラスシステムを使用しています:
146
+
147
+ ### Benefits / 利点
148
+
149
+ - **Reduced draw calls**: Multiple textures are packed into a single atlas, reducing the number of texture bindings
150
+ - **描画コールの削減**: 複数のテクスチャが単一のアトラスにパックされ、テクスチャバインディングの数が削減されます
151
+
152
+ - **Memory efficiency**: Optimal packing algorithm minimizes wasted GPU memory
153
+ - **メモリ効率**: 最適なパッキングアルゴリズムにより、無駄なGPUメモリが最小化されます
154
+
155
+ - **Cache coherency**: Better GPU cache utilization through spatial locality
156
+ - **キャッシュコヒーレンシー**: 空間的局所性による優れたGPUキャッシュ利用
157
+
158
+ ### Atlas Management / アトラス管理
159
+
160
+ The `AtlasManager` component uses the `@next2d/texture-packer` package to:
161
+
162
+ `AtlasManager`コンポーネントは`@next2d/texture-packer`パッケージを使用して以下を実行します:
163
+
164
+ - Dynamically pack textures into optimal atlas layouts
165
+ - テクスチャを最適なアトラスレイアウトに動的にパック
166
+ - Track texture usage and automatically manage atlas allocation
167
+ - テクスチャ使用状況を追跡し、アトラス割り当てを自動管理
168
+ - Support multiple atlas instances when texture requirements exceed single atlas capacity
169
+ - テクスチャ要件が単一のアトラス容量を超える場合、複数のアトラスインスタンスをサポート
170
+
171
+ ### Rendering with Atlases / アトラスを使用したレンダリング
172
+
173
+ 1. Textures are uploaded to GPU and registered with the atlas manager
174
+ - テクスチャがGPUにアップロードされ、アトラスマネージャーに登録されます
175
+
176
+ 2. The atlas manager assigns UV coordinates for each texture region
177
+ - アトラスマネージャーが各テクスチャ領域のUV座標を割り当てます
178
+
179
+ 3. Shaders use these UV coordinates to sample from the correct atlas region
180
+ - シェーダーがこれらのUV座標を使用して正しいアトラス領域からサンプリングします
181
+
182
+ 4. Multiple objects can be rendered in a single draw call using the same atlas
183
+ - 同じアトラスを使用して複数のオブジェクトを単一の描画コールでレンダリング可能
184
+
185
+ ## Architecture Patterns / アーキテクチャパターン
186
+
187
+ The codebase follows a clean architecture approach with clear separation of concerns:
188
+
189
+ コードベースは、関心事の明確な分離を伴うクリーンアーキテクチャアプローチに従っています:
190
+
191
+ ### Service Layer / サービス層
192
+
193
+ Services contain low-level operations and business logic. They are pure functions that perform specific tasks.
194
+
195
+ サービスは低レベルの操作とビジネスロジックを含みます。特定のタスクを実行する純粋な関数です。
196
+
197
+ ### Use Case Layer / ユースケース層
198
+
199
+ Use cases orchestrate multiple services to accomplish higher-level operations. They represent application-specific business rules.
200
+
201
+ ユースケースは、より高レベルの操作を達成するために複数のサービスを調整します。アプリケーション固有のビジネスルールを表します。
202
+
203
+ ## Dependencies / 依存関係
204
+
205
+ - `@next2d/texture-packer`: Texture atlas packing and management / テクスチャアトラスのパッキングと管理
206
+ - `@next2d/render-queue`: Rendering operation queue management / レンダリング操作キュー管理
207
+
208
+ ## License / ライセンス
209
+
11
210
  This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
211
+
212
+ このプロジェクトは[MITライセンス](https://opensource.org/licenses/MIT)の下でライセンスされています - 詳細は[LICENSE](LICENSE)ファイルを参照してください。
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@next2d/webgl",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Next2D Webgl Package",
5
5
  "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
6
6
  "license": "MIT",
@@ -24,7 +24,7 @@
24
24
  "url": "git+https://github.com/Next2D/Player.git"
25
25
  },
26
26
  "dependencies": {
27
- "@next2d/texture-packer": "2.0.0",
28
- "@next2d/render-queue": "2.0.0"
27
+ "@next2d/texture-packer": "3.0.0",
28
+ "@next2d/render-queue": "3.0.0"
29
29
  }
30
30
  }
@@ -1,7 +1,7 @@
1
1
  import { $rootNodes } from "../../AtlasManager";
2
2
  import { $RENDER_MAX_SIZE } from "../../WebGLUtil";
3
3
  import { TexturePacker } from "@next2d/texture-packer";
4
- import { $getActiveAtlasIndex, $setActiveAtlasIndex } from "../../AtlasManager";
4
+ import { $activeAtlasIndex, $setActiveAtlasIndex } from "../../AtlasManager";
5
5
  /**
6
6
  * @description 指定サイズのキャッシュ座標を生成、二分木構造を利用して座標を取得します。
7
7
  * Generate cache coordinates of the specified size and get the coordinates using a binary tree structure.
@@ -13,15 +13,29 @@ import { $getActiveAtlasIndex, $setActiveAtlasIndex } from "../../AtlasManager";
13
13
  * @protected
14
14
  */
15
15
  export const execute = (width, height) => {
16
- const index = $getActiveAtlasIndex();
16
+ const index = $activeAtlasIndex;
17
17
  if (!$rootNodes[index]) {
18
18
  $rootNodes[index] = new TexturePacker(index, $RENDER_MAX_SIZE, $RENDER_MAX_SIZE);
19
19
  }
20
20
  const rootNode = $rootNodes[index];
21
21
  const node = rootNode.insert(width, height);
22
- if (!node) {
23
- $setActiveAtlasIndex(index + 1);
24
- return execute(width, height);
22
+ if (node) {
23
+ return node;
25
24
  }
26
- return node;
25
+ for (let idx = 0; idx < 10; idx++) {
26
+ if (index === idx) {
27
+ continue;
28
+ }
29
+ $setActiveAtlasIndex(idx);
30
+ const rootNode = $rootNodes[idx];
31
+ if (!rootNode) {
32
+ return execute(width, height);
33
+ }
34
+ const node = rootNode.insert(width, height);
35
+ if (!node) {
36
+ continue;
37
+ }
38
+ return node;
39
+ }
40
+ return execute(width, height);
27
41
  };
@@ -1,132 +1,16 @@
1
1
  import type { IAttachmentObject } from "./interface/IAttachmentObject";
2
2
  import type { TexturePacker } from "@next2d/texture-packer";
3
3
  import type { ITextureObject } from "./interface/ITextureObject";
4
- /**
5
- * @description アクティブなアトラスインデックスをセット
6
- * Set the active atlas index
7
- *
8
- * @param {number} index
9
- * @return {void}
10
- * @method
11
- * @protected
12
- */
4
+ export declare let $activeAtlasIndex: number;
13
5
  export declare const $setActiveAtlasIndex: (index: number) => void;
14
- /**
15
- * @description アクティブなアトラスインデックスを返却
16
- * Return the active atlas index
17
- *
18
- * @returns {number}
19
- * @method
20
- * @protected
21
- */
22
- export declare const $getActiveAtlasIndex: () => number;
23
- /**
24
- * @description アトラス専用のフレームバッファ配列
25
- * Array of frame buffers dedicated to the atlas
26
- *
27
- * @return {IAttachmentObject[]}
28
- * @method
29
- * @protected
30
- */
31
6
  export declare const $getAtlasAttachmentObjects: () => IAttachmentObject[];
32
- /**
33
- * @description アトラステクスチャオブジェクトをセット
34
- * Set the atlas texture object
35
- *
36
- * @param {IAttachmentObject} attachment_object
37
- * @return {void}
38
- * @method
39
- * @protected
40
- */
41
7
  export declare const $setAtlasAttachmentObject: (attachment_object: IAttachmentObject) => void;
42
- /**
43
- * @description アトラステクスチャオブジェクトを返却
44
- * Return the atlas texture object
45
- *
46
- * @returns {IAttachmentObject}
47
- * @method
48
- * @protected
49
- */
50
8
  export declare const $getAtlasAttachmentObject: () => IAttachmentObject;
51
- /**
52
- * @description アトラステクスチャオブジェクトが存在するか
53
- * Does the atlas texture object exist?
54
- *
55
- * @return {boolean}
56
- * @method
57
- * @protected
58
- */
59
9
  export declare const $hasAtlasAttachmentObject: () => boolean;
60
- /**
61
- * @description ルートノードの配列
62
- * Array of root nodes
63
- *
64
- * @type {TexturePacker[]}
65
- * @protected
66
- */
67
10
  export declare const $rootNodes: TexturePacker[];
68
- /**
69
- * @description アトラス専用のテクスチャ
70
- * Texture for atlas only
71
- *
72
- * @type {ITextureObject | null}
73
- * @private
74
- */
75
11
  export declare let $atlasTexture: ITextureObject | null;
76
- /**
77
- * @description アトラステクスチャオブジェクトを返却
78
- * Return the atlas texture object
79
- *
80
- * @return {ITextureObject}
81
- * @method
82
- * @protected
83
- */
84
12
  export declare const $getAtlasTextureObject: () => ITextureObject;
85
- /**
86
- * @description アトラステクスチャの転送範囲を返却
87
- * Return the transfer range of the atlas texture
88
- *
89
- * @param {number} index
90
- * @return {Float32Array}
91
- * @method
92
- * @protected
93
- */
94
13
  export declare const $getActiveTransferBounds: (index: number) => Float32Array;
95
- /**
96
- * @description アトラステクスチャの切り替え時の転送範囲を返却
97
- * Return the transfer range when switching the atlas texture
98
- *
99
- * @param {number} index
100
- * @return {Float32Array}
101
- * @method
102
- * @protected
103
- */
104
- export declare const $getActiveAllTransferBounds: (index: number) => Float32Array;
105
- /**
106
- * @description アトラステクスチャの転送範囲をクリア
107
- * Clear the transfer range of the atlas texture
108
- *
109
- * @return {void}
110
- * @method
111
- * @protected
112
- */
113
14
  export declare const $clearTransferBounds: () => void;
114
- /**
115
- * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値をセット
116
- * Set the index value of the currently set atlas attachment object
117
- *
118
- * @param {number} index
119
- * @return {void}
120
- * @method
121
- * @protected
122
- */
15
+ export declare let $currentAtlasIndex: number;
123
16
  export declare const $setCurrentAtlasIndex: (index: number) => void;
124
- /**
125
- * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値を返却
126
- * Returns the index value of the currently set atlas attachment object
127
- *
128
- * @return {number}
129
- * @method
130
- * @protected
131
- */
132
- export declare const $getCurrentAtlasIndex: () => number;
@@ -1,228 +1,59 @@
1
1
  import { execute as textureManagerCreateAtlasTextureUseCase } from "./TextureManager/usecase/TextureManagerCreateAtlasTextureUseCase";
2
2
  import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "./FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
3
3
  import { $RENDER_MAX_SIZE } from "./WebGLUtil";
4
- /**
5
- * @description アクティブなアトラスインデックス
6
- * Active atlas index
7
- *
8
- * @type {number}
9
- * @private
10
- */
11
- let $activeAtlasIndex = 0;
12
- /**
13
- * @description アクティブなアトラスインデックスをセット
14
- * Set the active atlas index
15
- *
16
- * @param {number} index
17
- * @return {void}
18
- * @method
19
- * @protected
20
- */
4
+ const $MAX_VALUE = Number.MAX_VALUE;
5
+ const $MIN_VALUE = -Number.MAX_VALUE;
6
+ export let $activeAtlasIndex = 0;
21
7
  export const $setActiveAtlasIndex = (index) => {
22
8
  $activeAtlasIndex = index;
23
9
  };
24
- /**
25
- * @description アクティブなアトラスインデックスを返却
26
- * Return the active atlas index
27
- *
28
- * @returns {number}
29
- * @method
30
- * @protected
31
- */
32
- export const $getActiveAtlasIndex = () => {
33
- return $activeAtlasIndex;
34
- };
35
- /**
36
- * @description アトラステクスチャのアタッチメントオブジェクト
37
- * Attachment object of atlas texture
38
- *
39
- * @type {IAttachmentObject[]}
40
- * @private
41
- */
42
10
  const $atlasAttachmentObjects = [];
43
- /**
44
- * @description アトラス専用のフレームバッファ配列
45
- * Array of frame buffers dedicated to the atlas
46
- *
47
- * @return {IAttachmentObject[]}
48
- * @method
49
- * @protected
50
- */
51
11
  export const $getAtlasAttachmentObjects = () => {
52
12
  return $atlasAttachmentObjects;
53
13
  };
54
- /**
55
- * @description アトラステクスチャオブジェクトをセット
56
- * Set the atlas texture object
57
- *
58
- * @param {IAttachmentObject} attachment_object
59
- * @return {void}
60
- * @method
61
- * @protected
62
- */
63
14
  export const $setAtlasAttachmentObject = (attachment_object) => {
64
15
  $atlasAttachmentObjects[$activeAtlasIndex] = attachment_object;
65
16
  };
66
- /**
67
- * @description アトラステクスチャオブジェクトを返却
68
- * Return the atlas texture object
69
- *
70
- * @returns {IAttachmentObject}
71
- * @method
72
- * @protected
73
- */
74
17
  export const $getAtlasAttachmentObject = () => {
75
18
  if (!($activeAtlasIndex in $atlasAttachmentObjects)) {
76
19
  $setAtlasAttachmentObject(frameBufferManagerGetAttachmentObjectUseCase($RENDER_MAX_SIZE, $RENDER_MAX_SIZE, true));
77
20
  }
78
21
  return $atlasAttachmentObjects[$activeAtlasIndex];
79
22
  };
80
- /**
81
- * @description アトラステクスチャオブジェクトが存在するか
82
- * Does the atlas texture object exist?
83
- *
84
- * @return {boolean}
85
- * @method
86
- * @protected
87
- */
88
23
  export const $hasAtlasAttachmentObject = () => {
89
24
  return $activeAtlasIndex in $atlasAttachmentObjects;
90
25
  };
91
- /**
92
- * @description ルートノードの配列
93
- * Array of root nodes
94
- *
95
- * @type {TexturePacker[]}
96
- * @protected
97
- */
98
26
  export const $rootNodes = [];
99
- /**
100
- * @description アトラス専用のテクスチャ
101
- * Texture for atlas only
102
- *
103
- * @type {ITextureObject | null}
104
- * @private
105
- */
106
27
  export let $atlasTexture = null;
107
- /**
108
- * @description アトラステクスチャオブジェクトを返却
109
- * Return the atlas texture object
110
- *
111
- * @return {ITextureObject}
112
- * @method
113
- * @protected
114
- */
115
28
  export const $getAtlasTextureObject = () => {
116
29
  if (!$atlasTexture) {
117
30
  $atlasTexture = textureManagerCreateAtlasTextureUseCase();
118
31
  }
119
32
  return $atlasTexture;
120
33
  };
121
- /**
122
- * @type {Float32Array[]}
123
- * @private
124
- */
125
34
  const $transferBounds = [];
126
- /**
127
- * @description アトラステクスチャの転送範囲を返却
128
- * Return the transfer range of the atlas texture
129
- *
130
- * @param {number} index
131
- * @return {Float32Array}
132
- * @method
133
- * @protected
134
- */
135
35
  export const $getActiveTransferBounds = (index) => {
136
36
  if (!(index in $transferBounds)) {
137
37
  $transferBounds[index] = new Float32Array([
138
- Number.MAX_VALUE,
139
- Number.MAX_VALUE,
140
- -Number.MAX_VALUE,
141
- -Number.MAX_VALUE
38
+ $MAX_VALUE,
39
+ $MAX_VALUE,
40
+ $MIN_VALUE,
41
+ $MIN_VALUE
142
42
  ]);
143
43
  }
144
44
  return $transferBounds[index];
145
45
  };
146
- /**
147
- * @type {Float32Array[]}
148
- * @private
149
- */
150
- const $allTransferBounds = [];
151
- /**
152
- * @description アトラステクスチャの切り替え時の転送範囲を返却
153
- * Return the transfer range when switching the atlas texture
154
- *
155
- * @param {number} index
156
- * @return {Float32Array}
157
- * @method
158
- * @protected
159
- */
160
- export const $getActiveAllTransferBounds = (index) => {
161
- if (!(index in $allTransferBounds)) {
162
- $allTransferBounds[index] = new Float32Array([
163
- Number.MAX_VALUE,
164
- Number.MAX_VALUE,
165
- -Number.MAX_VALUE,
166
- -Number.MAX_VALUE
167
- ]);
168
- }
169
- return $allTransferBounds[index];
170
- };
171
- /**
172
- * @description アトラステクスチャの転送範囲をクリア
173
- * Clear the transfer range of the atlas texture
174
- *
175
- * @return {void}
176
- * @method
177
- * @protected
178
- */
179
46
  export const $clearTransferBounds = () => {
180
47
  for (let idx = 0; idx < $transferBounds.length; ++idx) {
181
48
  const bounds = $transferBounds[idx];
182
49
  if (!bounds) {
183
50
  continue;
184
51
  }
185
- bounds[0] = bounds[1] = Number.MAX_VALUE;
186
- bounds[2] = bounds[3] = -Number.MAX_VALUE;
187
- }
188
- for (let idx = 0; idx < $allTransferBounds.length; ++idx) {
189
- const bounds = $allTransferBounds[idx];
190
- if (!bounds) {
191
- continue;
192
- }
193
- bounds[0] = bounds[1] = Number.MAX_VALUE;
194
- bounds[2] = bounds[3] = -Number.MAX_VALUE;
52
+ bounds[0] = bounds[1] = $MAX_VALUE;
53
+ bounds[2] = bounds[3] = $MIN_VALUE;
195
54
  }
196
55
  };
197
- /**
198
- * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値
199
- * Index value of the currently set atlas attachment object
200
- *
201
- * @type {number}
202
- * @default 0
203
- * @private
204
- */
205
- let $currentAtlasIndex = 0;
206
- /**
207
- * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値をセット
208
- * Set the index value of the currently set atlas attachment object
209
- *
210
- * @param {number} index
211
- * @return {void}
212
- * @method
213
- * @protected
214
- */
56
+ export let $currentAtlasIndex = 0;
215
57
  export const $setCurrentAtlasIndex = (index) => {
216
58
  $currentAtlasIndex = index;
217
59
  };
218
- /**
219
- * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値を返却
220
- * Returns the index value of the currently set atlas attachment object
221
- *
222
- * @return {number}
223
- * @method
224
- * @protected
225
- */
226
- export const $getCurrentAtlasIndex = () => {
227
- return $currentAtlasIndex;
228
- };
@@ -0,0 +1,18 @@
1
+ import type { ICubicConverterReturnObject } from "../../interface/ICubicConverterReturnObject";
2
+ /**
3
+ * @description 3次ベジェ曲線を適応的に2次ベジェ曲線に分割
4
+ * Adaptively split cubic Bezier curve into quadratic Bezier curves
5
+ *
6
+ * @param {number} from_x
7
+ * @param {number} from_y
8
+ * @param {number} cx1
9
+ * @param {number} cy1
10
+ * @param {number} cx2
11
+ * @param {number} cy2
12
+ * @param {number} x
13
+ * @param {number} y
14
+ * @return {ICubicConverterReturnObject}
15
+ * @method
16
+ * @protected
17
+ */
18
+ export declare const execute: (from_x: number, from_y: number, cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number) => ICubicConverterReturnObject;