@next2d/webgpu 3.0.0 → 3.0.1

package/README.md

@@ -1,574 +1,233 @@
 # @next2d/webgpu
 
-WebGPU-based rendering engine for Next2D (Experimental / Work in Progress)
-
-WebGPU ベースのレンダリングエンジン（実験的 / 開発中）
-
----
-
-## ⚠️ Warning / 警告
-
-**This package is currently under development and NOT production-ready.**
-
-**本パッケージは現在開発中であり、本番環境での使用には対応していません。**
-
-- Many features are incomplete or placeholder implementations
-- APIs may change without notice
-- Performance has not been optimized
-- Testing is incomplete
-
----
+WebGPU-based rendering engine for Next2D Player / Next2D Player用のWebGPUベースレンダリングエンジン
 
 ## Overview / 概要
 
-This package provides a WebGPU-based rendering backend for Next2D Player, designed as an alternative to the existing WebGL implementation. WebGPU is a modern graphics API that offers better performance and more control over GPU resources.
+The `@next2d/webgpu` package is a rendering backend for Next2D Player, providing a high-performance, shader-based drawing pipeline built on WebGPU. This package handles all graphics rendering operations including vector shapes, bitmaps, filters, and effects.
 
-本パッケージは Next2D Player 向けの WebGPU ベースのレンダリングバックエンドを提供します。既存の WebGL 実装の代替として設計されており、WebGPU は優れたパフォーマンスと GPU リソースに対するより細かい制御を提供する最新のグラフィックス API です。
+`@next2d/webgpu`パッケージは、Next2D Playerのレンダリングバックエンドであり、WebGPU上に構築された高性能なシェーダーベースの描画パイプラインを提供します。このパッケージは、ベクター図形、ビットマップ、フィルター、エフェクトなど、すべてのグラフィックスレンダリング操作を処理します。
 
-### Key Features / 主な機能
+### Key Features / 主な特徴
 
-- WGSL (WebGPU Shading Language) shader implementations
-- Texture atlas management for efficient rendering
-- Instance-based batch rendering
-- Blend mode support
-- Mask rendering capabilities
-- Filter effects (Blur, Glow, Drop Shadow, Color Matrix)
+- **WebGPU-based rendering** - Hardware-accelerated graphics using modern WebGPU API / WebGPU APIを使用したハードウェアアクセラレーション
+- **Shader-based pipeline** - Efficient WGSL shader processing for all rendering operations / すべてのレンダリング操作に対する効率的なWGSLシェーダー処理
+- **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 / 複雑なクリッピングのためのステンシルバッファベースのマスキング
+- **Compute shaders** - GPU compute-based blur processing for high-performance filter effects / 高性能フィルターエフェクトのためのGPUコンピュートベースのブラー処理
 
----
+## Installation / インストール
+
+```bash
+npm install @next2d/webgpu
+```
 
 ## Directory Structure / ディレクトリ構造
 
 ```
 src/
-├── Context.ts                    # Main rendering context (WebGPU版のメインコンテキスト)
-├── WebGPUUtil.ts                 # Utility functions and global state management
-│
-├── Managers / マネージャー
-│   ├── AtlasManager.ts           # Atlas texture management (アトラステクスチャ管理)
-│   ├── AttachmentManager.ts      # Offscreen attachment/FBO management (オフスクリーンアタッチメント管理)
-│   ├── BufferManager.ts          # Vertex/Uniform buffer management (バッファ管理)
-│   ├── DrawManager.ts            # Drawing operations helper (描画操作ヘルパー)
-│   ├── FrameBufferManager.ts     # Framebuffer management (フレームバッファ管理)
-│   └── TextureManager.ts         # Texture and sampler management (テクスチャ/サンプラー管理)
-│
-├── Core Components / コアコンポーネント
-│   ├── PathCommand.ts            # Path drawing commands (moveTo, lineTo, bezierCurveTo, etc.)
-│   │   ├── PathCommandState.ts               # Path command state management
-│   │   ├── service/
-│   │   │   ├── PathCommandBeginPathService.ts
-│   │   │   ├── PathCommandEqualsToLastPointService.ts
-│   │   │   ├── PathCommandPushCurrentPathToVerticesService.ts
-│   │   │   └── PathCommandPushPointToCurrentPathService.ts
-│   │   └── usecase/
-│   │       ├── PathCommandArcUseCase.ts
-│   │       ├── PathCommandBezierCurveToUseCase.ts
-│   │       ├── PathCommandClosePathUseCase.ts
-│   │       ├── PathCommandLineToUseCase.ts
-│   │       ├── PathCommandMoveToUseCase.ts
-│   │       └── PathCommandQuadraticCurveToUseCase.ts
-│   ├── Mesh.ts                   # Mesh data structures and utilities
-│   │   ├── service/
-│   │   │   ├── MeshCalculateNormalVectorService.ts
-│   │   │   ├── MeshFillGenerateService.ts
-│   │   │   ├── MeshGetQuadraticBezierPointService.ts
-│   │   │   ├── MeshGetQuadraticBezierTangentService.ts
-│   │   │   └── MeshLerpService.ts
-│   │   └── usecase/
-│   │       ├── MeshBitmapStrokeGenerateUseCase.ts
-│   │       ├── MeshFillGenerateUseCase.ts
-│   │       ├── MeshGradientStrokeGenerateUseCase.ts
-│   │       ├── MeshSplitQuadraticBezierUseCase.ts
-│   │       └── MeshStrokeGenerateUseCase.ts
-│   ├── BezierConverter.ts        # Bezier curve conversion utilities
-│   │   ├── service/
-│   │   │   ├── BezierConverterCubicToQuadService.ts
-│   │   │   └── BezierConverterSplitCubicService.ts
-│   │   └── usecase/
-│   │       └── BezierConverterAdaptiveCubicToQuadUseCase.ts
-│   ├── Blend.ts                  # Blend mode state management
-│   ├── Mask.ts                   # Mask rendering state management
-│   └── Grid.ts                   # Grid/9-slice system
-│
-├── Shader/ シェーダー関連
-│   ├── ShaderSource.ts           # WGSL shader source code
-│   ├── PipelineManager.ts        # Render pipeline management
-│   ├── ShaderInstancedManager.ts # Instance rendering shader management
-│   ├── BlendModeShader.ts        # Blend mode shader implementations
-│   └── GradientLUTGenerator.ts   # Gradient lookup table generation
-│       ├── service/
-│       │   ├── GradientLUTCalculateResolutionService.ts
-│       │   ├── GradientLUTGeneratePixelsService.ts
-│       │   ├── GradientLUTInterpolateColorService.ts
-│       │   └── GradientLUTParseStopsService.ts
-│       └── usecase/
-│           └── GradientLUTGenerateDataUseCase.ts
-│
-├── Gradient/ グラデーション関連
-│   ├── GradientLUTCache.ts       # Gradient LUT cache management
-│   └── GradientLUTGenerator.ts   # Gradient LUT generation
-│
-├── Filter/ フィルター実装
-│   ├── index.ts                  # Filter exports
-│   ├── BlurFilterShader.ts       # Blur filter implementation
-│   ├── BlurFilterUseCase.ts      # Blur filter use case
-│   ├── GlowFilterShader.ts       # Glow filter implementation
-│   ├── DropShadowFilterShader.ts # Drop shadow filter implementation
-│   ├── ColorMatrixFilterShader.ts # Color matrix filter implementation
-│   ├── BevelFilter/
-│   │   └── FilterApplyBevelFilterUseCase.ts
-│   ├── BlurFilter/
-│   │   └── FilterApplyBlurFilterUseCase.ts
-│   ├── ColorMatrixFilter/
-│   │   └── FilterApplyColorMatrixFilterUseCase.ts
-│   ├── ConvolutionFilter/
-│   │   └── FilterApplyConvolutionFilterUseCase.ts
-│   ├── DisplacementMapFilter/
-│   │   └── FilterApplyDisplacementMapFilterUseCase.ts
-│   ├── DropShadowFilter/
-│   │   └── FilterApplyDropShadowFilterUseCase.ts
-│   ├── GlowFilter/
-│   │   └── FilterApplyGlowFilterUseCase.ts
-│   ├── GradientBevelFilter/
-│   │   └── FilterApplyGradientBevelFilterUseCase.ts
-│   └── GradientGlowFilter/
-│       └── FilterApplyGradientGlowFilterUseCase.ts
-│
-├── Blend/ ブレンド関連
-│   ├── BlendInstancedManager.ts  # Instance-based blend rendering
-│   ├── service/
-│   │   ├── BlendAddService.ts
-│   │   ├── BlendAlphaService.ts
-│   │   ├── BlendEraseService.ts
-│   │   ├── BlendGetStateService.ts
-│   │   ├── BlendOneZeroService.ts
-│   │   ├── BlendResetService.ts
-│   │   ├── BlendScreenService.ts
-│   │   └── BlendSetModeService.ts
-│   └── usecase/
-│       ├── BlendApplyComplexBlendUseCase.ts
-│       └── BlendOperationUseCase.ts
-│
-├── Mask/ マスク関連
-│   ├── service/
-│   │   ├── MaskBeginMaskService.ts
-│   │   ├── MaskEndMaskService.ts
-│   │   ├── MaskSetMaskBoundsService.ts
-│   │   └── MaskUnionMaskService.ts
-│   └── usecase/
-│       ├── MaskLeaveMaskUseCase.ts
-│       └── MaskBindUseCase.ts
-│
-└── interface/ 型定義
-    ├── IAttachmentObject.ts      # Attachment object interface
-    ├── IBlendMode.ts             # Blend mode types
-    ├── IBounds.ts                # Bounds rectangle interface
-    ├── IFillType.ts              # Fill type definitions
-    ├── IPath.ts                  # Path interface
-    ├── IPoint.ts                 # Point interface
-    └── ITextureObject.ts         # Texture object interface
+├── Context.ts                      # Main rendering context / メインレンダリングコンテキスト
+├── Context/
+│   ├── service/                    # Context services / コンテキストサービス
+│   └── usecase/                    # Context use cases / コンテキストユースケース
+├── AtlasManager.ts                 # Texture atlas management / テクスチャアトラス管理
+├── FrameBufferManager.ts           # Render target management / レンダーターゲット管理
+├── AttachmentManager.ts            # Color/stencil attachment management / カラー/ステンシルアタッチメント管理
+├── BufferManager.ts                # Vertex/Uniform buffer management / 頂点/Uniformバッファ管理
+├── TextureManager.ts               # Texture management / テクスチャ管理
+├── TexturePool.ts                  # Temporary texture pooling / 一時テクスチャプーリング
+├── FillTexturePool.ts              # Fill/gradient texture pooling / 塗り/グラデーションテクスチャプーリング
+├── SamplerCache.ts                 # GPU sampler caching / GPUサンプラーキャッシュ
+├── Blend.ts                        # Blend mode handling / ブレンドモード処理
+├── Blend/
+│   └── BlendInstancedManager.ts    # Blend instanced rendering / ブレンドインスタンスレンダリング
+├── Mask.ts                         # Stencil-based masking / ステンシルベースのマスキング
+├── Mesh/                           # Mesh generation / メッシュ生成
+│   ├── service/                    # Mesh services / メッシュサービス
+│   └── usecase/                    # Mesh use cases (fill, stroke, gradient stroke) / メッシュユースケース
+├── PathCommand.ts                  # Path command processing / パスコマンド処理
+├── Compute/                        # GPU compute shader execution / GPUコンピュートシェーダー実行
+│   ├── ComputePipelineManager.ts   # Compute pipeline management / コンピュートパイプライン管理
+│   └── ComputeExecuteBlurService.ts # Blur compute execution / ブラーコンピュート実行
+├── Filter/                         # Filter implementations / フィルター実装
+│   ├── FilterGradientLUTCache.ts   # Gradient LUT cache / グラデーションLUTキャッシュ
+│   ├── FilterOffset.ts             # Filter offset calculation / フィルターオフセット計算
+│   ├── BitmapFilterShader.ts       # Bitmap filter shader / ビットマップフィルターシェーダー
+│   ├── BevelFilter/                # Bevel 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 / グラデーショングローフィルター
+├── Gradient/
+│   └── GradientLUTGenerator.ts     # Gradient LUT generation and caching / グラデーションLUT生成とキャッシュ
+├── Shader/                         # WGSL shader system / WGSLシェーダーシステム
+│   ├── PipelineManager.ts          # Render pipeline management / レンダーパイプライン管理
+│   ├── ShaderSource.ts             # Shader source management / シェーダーソース管理
+│   ├── ShaderInstancedManager.ts   # Instanced rendering manager / インスタンスレンダリング管理
+│   ├── BlendModeShader.ts          # Blend mode shader definitions / ブレンドモードシェーダー定義
+│   ├── GradientLUTGenerator/        # Gradient LUT generation / グラデーションLUT生成
+│   │   ├── service/                # LUT generation services / LUT生成サービス
+│   │   └── usecase/                # LUT generation use cases / LUT生成ユースケース
+│   └── wgsl/                       # WGSL shader sources / WGSLシェーダーソース
+│       ├── vertex/                 # Vertex shaders / バーテックスシェーダー
+│       ├── fragment/               # Fragment shaders / フラグメントシェーダー
+│       └── common/                 # Shared WGSL utilities / 共有WGSLユーティリティ
+├── Grid.ts                         # Grid system for rendering / レンダリング用グリッドシステム
+├── BezierConverter/                # Bezier curve conversion / ベジェ曲線変換
+│   ├── BezierConverter.ts          # Main class / メインクラス
+│   ├── service/                    # BezierConverter services / サービス
+│   └── usecase/                    # BezierConverter use cases / ユースケース
+├── TexturePool/                    # Temporary texture pooling services / 一時テクスチャプーリングサービス
+│   ├── service/                    # TexturePool services / サービス
+│   └── usecase/                    # TexturePool use cases / ユースケース
+├── WebGPUUtil.ts                   # WebGPU utility functions / WebGPUユーティリティ関数
+└── interface/                      # TypeScript interfaces / TypeScript インターフェース
 ```
 
----
-
-## Implementation Status / 実装状況
-
-### ✅ Implemented / 実装済み
-
-#### Core Rendering / コア描画機能
-- ✅ Basic initialization and device setup (基本的な初期化とデバイスセットアップ)
-- ✅ Canvas context configuration (キャンバスコンテキストの設定)
-- ✅ Frame lifecycle management (beginFrame/endFrame) (フレームライフサイクル管理)
-- ✅ Transform matrix operations (save/restore/setTransform/transform) (変換行列操作)
-- ✅ Background color fill (背景色の塗りつぶし)
-- ✅ Resize handling (リサイズ処理)
-
-#### Path Drawing / パス描画
-- ✅ Path commands (beginPath, moveTo, lineTo, closePath) (パスコマンド)
-- ✅ Bezier curves (quadraticCurveTo, bezierCurveTo) (ベジェ曲線)
-- ✅ Arc drawing (円弧描画)
-- ✅ Fill operations with solid colors (単色塗りつぶし)
-- ✅ Stroke operations with mesh generation (ストローク描画とメッシュ生成)
-- ✅ Vertex triangulation for path filling (パス塗りつぶし用の頂点三角形分割)
-
-#### Texture & Atlas Management / テクスチャ・アトラス管理
-- ✅ Atlas texture creation (4096x4096) (アトラステクスチャ作成)
-- ✅ Node allocation in texture atlas (テクスチャアトラスのノード割り当て)
-- ✅ Texture from pixels/ImageBitmap (ピクセル/ImageBitmapからのテクスチャ作成)
-- ✅ Sampler creation (linear, nearest, repeat) (サンプラー作成)
-- ✅ Texture pool management (テクスチャプール管理)
-
-#### Buffer Management / バッファ管理
-- ✅ Vertex buffer creation and management (頂点バッファ作成と管理)
-- ✅ Uniform buffer creation and updates (Uniformバッファ作成と更新)
-- ✅ Rectangle vertex generation (矩形頂点生成)
-
-#### Offscreen Rendering / オフスクリーンレンダリング
-- ✅ Attachment object pool (アタッチメントオブジェクトプール)
-- ✅ Bind/unbind attachment operations (アタッチメントのバインド/アンバインド)
-- ✅ Render target switching (レンダーターゲットの切り替え)
-- ✅ Stencil texture creation (ステンシルテクスチャ作成)
-
-#### Shader Pipelines / シェーダーパイプライン
-- ✅ Fill pipeline (solid color) (単色塗りつぶしパイプライン)
-- ✅ Mask pipeline (Bezier curve anti-aliasing) (マスクパイプライン - ベジェ曲線アンチエイリアス)
-- ✅ Basic pipeline (基本パイプライン)
-- ✅ Texture pipeline (テクスチャパイプライン)
-- ✅ Instanced rendering pipeline (インスタンス描画パイプライン)
-- ✅ Gradient pipeline structure (グラデーションパイプライン構造)
-- ✅ Blend mode pipeline structure (ブレンドモードパイプライン構造)
-
-#### Instance Rendering / インスタンス描画
-- ✅ Instance data management (インスタンスデータ管理)
-- ✅ Display object to instance array conversion (表示オブジェクトのインスタンス配列変換)
-- ✅ Batch rendering with instancing (インスタンシングによるバッチ描画)
-- ✅ Color transform (multiply/add) (カラー変換 - 乗算/加算)
-
-#### Image Operations / 画像操作
-- ✅ Draw pixels to atlas node (アトラスノードへのピクセル描画)
-- ✅ Draw OffscreenCanvas/ImageBitmap to atlas (OffscreenCanvas/ImageBitmapのアトラス描画)
-- ✅ Create ImageBitmap from GPU texture (GPUテクスチャからのImageBitmap作成)
-- ✅ Premultiplied alpha conversion (プリマルチプライドアルファ変換)
-
-### 🚧 Partially Implemented / 部分的に実装
-
-#### Drawing Operations / 描画操作
-- 🚧 Gradient fill (gradientFill) - Placeholder, falls back to solid fill
-  - グラデーション塗りつぶし - プレースホルダー実装、単色塗りつぶしにフォールバック
-- 🚧 Bitmap fill (bitmapFill) - Texture creation works, shader integration pending
-  - ビットマップ塗りつぶし - テクスチャ作成は動作、シェーダー統合は保留
-- 🚧 Gradient stroke (gradientStroke) - Placeholder
-  - グラデーションストローク - プレースホルダー実装
-- 🚧 Bitmap stroke (bitmapStroke) - Placeholder
-  - ビットマップストローク - プレースホルダー実装
-
-#### Masking / マスク処理
-- 🚧 Clip operations (clip) - Basic structure, stencil buffer integration needed
-  - クリッピング操作 - 基本構造はあるが、ステンシルバッファ統合が必要
-- 🚧 Mask begin/end (beginMask, endMask, setMaskBounds, leaveMask) - Service layer exists
-  - マスク開始/終了 - サービス層は存在
-
-#### Filters / フィルター
-- 🚧 applyFilter - Framework exists, filter shaders created but not integrated
-  - フィルター適用 - フレームワークは存在、フィルターシェーダーは作成済みだが統合されていない
-  - BlurFilterShader, GlowFilterShader, DropShadowFilterShader, ColorMatrixFilterShader
-
-### ❌ TODO / 未実装
-
-#### Core Features / コア機能
-- ❌ Cache clearing implementation (resize時のキャッシュクリア)
-- ❌ clearRect with scissor/clear operations (シザー/クリア操作によるclearRect)
-- ❌ 9-slice grid transformation (useGrid) (9スライスグリッド変換)
-
-#### Advanced Rendering / 高度なレンダリング
-- ❌ Complete gradient LUT texture generation (完全なグラデーションLUTテクスチャ生成)
-- ❌ Gradient shader parameter passing (グラデーションシェーダーのパラメータ渡し)
-- ❌ Bitmap fill/stroke shader integration (ビットマップ塗りつぶし/ストロークシェーダー統合)
-- ❌ Stencil buffer-based clipping (ステンシルバッファベースのクリッピング)
-- ❌ Two-pass rendering for masks (マスク用の2パスレンダリング)
-
-#### Blend Modes / ブレンドモード
-- ❌ Full blend mode integration (multiply, screen, add, etc.)
-  - 完全なブレンドモード統合（乗算、スクリーン、加算など）
-- ❌ Advanced blend modes (overlay, hard-light, soft-light, etc.)
-  - 高度なブレンドモード（オーバーレイ、ハードライト、ソフトライトなど）
-
-#### Filters / フィルター
-- ❌ Filter parameter binding and execution (フィルターパラメータバインディングと実行)
-- ❌ Multi-pass filter rendering (複数パスフィルターレンダリング)
-- ❌ Convolution filter (コンボリューションフィルター)
-- ❌ Displacement map filter (ディスプレイスメントマップフィルター)
-
-#### Optimization / 最適化
-- ❌ Buffer reuse and pooling optimization (バッファ再利用とプール最適化)
-- ❌ Command encoder reuse (コマンドエンコーダー再利用)
-- ❌ Pipeline state caching (パイプライン状態キャッシング)
-- ❌ Batch draw call optimization (バッチ描画コール最適化)
-
-#### Testing & Documentation / テストとドキュメント
-- ❌ Unit tests (ユニットテスト)
-- ❌ Integration tests (統合テスト)
-- ❌ Performance benchmarks (パフォーマンスベンチマーク)
-- ❌ API documentation (API ドキュメント)
-
----
-
-## Context.ts - Implementation Analysis / Context.ts 実装分析
-
-The `Context.ts` file is the main entry point for the WebGPU rendering engine. Here's a detailed breakdown of its implementation status:
-
-`Context.ts` ファイルは WebGPU レンダリングエンジンのメインエントリーポイントです。実装状況の詳細な内訳は以下の通りです：
-
-### Fully Implemented Methods / 完全実装済みメソッド
-
-| Method | Status | Notes |
-|--------|--------|-------|
-| `constructor` | ✅ Complete | Device, context, format initialization |
-| `save` / `restore` | ✅ Complete | Matrix stack operations |
-| `setTransform` / `transform` | ✅ Complete | 2D transformation matrix |
-| `reset` | ✅ Complete | Reset context state |
-| `beginPath` / `moveTo` / `lineTo` | ✅ Complete | Path command delegation |
-| `quadraticCurveTo` / `bezierCurveTo` | ✅ Complete | Bezier curve support |
-| `arc` / `closePath` | ✅ Complete | Path operations |
-| `fillStyle` / `strokeStyle` | ✅ Complete | Color style setters |
-| `fill` | ✅ Complete | Solid color fill with pipeline |
-| `stroke` | ✅ Complete | Stroke with mesh generation |
-| `updateBackgroundColor` | ✅ Complete | Background color update |
-| `fillBackgroundColor` | ✅ Complete | Clear with background color |
-| `resize` | ✅ Complete | Canvas resize (cache clear TODO) |
-| `beginFrame` / `endFrame` | ✅ Complete | Frame lifecycle management |
-| `bindAttachment` / `unbindAttachment` | ✅ Complete | Offscreen rendering |
-| `getAttachmentObject` / `releaseAttachment` | ✅ Complete | Attachment management |
-| `createNode` / `removeNode` | ✅ Complete | Atlas node management |
-| `drawPixels` / `drawElement` | ✅ Complete | Pixel/element to atlas |
-| `drawDisplayObject` | ✅ Complete | Instance array addition |
-| `drawArraysInstanced` | ✅ Complete | Batch instance rendering |
-| `clearArraysInstanced` | ✅ Complete | Clear instance data |
-| `createImageBitmap` | ✅ Complete | GPU→ImageBitmap conversion |
-| `beginMask` / `setMaskBounds` / `endMask` / `leaveMask` | ✅ Complete | Mask service delegation |
-
-### Placeholder / Incomplete Methods / プレースホルダー/不完全なメソッド
-
-| Method | Status | Notes |
-|--------|--------|-------|
-| `clearRect` | 🚧 Partial | Has console.log, needs scissor+clear implementation |
-| `gradientFill` | 🚧 Placeholder | console.log + falls back to fill() |
-| `bitmapFill` | 🚧 Partial | Creates texture but falls back to fill() |
-| `gradientStroke` | 🚧 Placeholder | console.log + falls back to stroke() |
-| `bitmapStroke` | 🚧 Placeholder | console.log + falls back to stroke() |
-| `clip` | 🚧 Placeholder | console.log + falls back to fill() |
-| `useGrid` | 🚧 Placeholder | console.log, 9-slice not implemented |
-| `applyFilter` | 🚧 Placeholder | console.log, filter shaders not integrated |
-
-### Debug Markers / デバッグマーカー
-
-The code contains multiple `console.log` statements indicating work-in-progress areas:
-
-コードには開発中の領域を示す複数の `console.log` 文が含まれています：
-
-- Line 250: `clearRect()` - "TODO: シザーとクリアを使用した実装"
-- Line 228: `resize()` - "TODO: キャッシュクリア実装"
-- Line 270: `clearRect()` - "TODO: シザーとクリアを使用した実装"
-- Line 781: `gradientFill()` - "TODO: グラデーションLUTテクスチャを生成"
-- Line 790: `gradientFill()` - "TODO: グラデーション用のシェーダーを使用"
-- Line 847: `bitmapFill()` - "TODO: ビットマップ塗りつぶし用のシェーダーを使用"
-- Line 876: `gradientStroke()` - "TODO: グラデーションストローク実装"
-- Line 901: `bitmapStroke()` - "TODO: ビットマップストローク実装"
-- Line 918: `clip()` - "TODO: ステンシルバッファを使用したクリッピング実装"
-- Line 962: `useGrid()` - "TODO: Grid/9-slice transformation implementation"
-- Line 1312-1320: `applyFilter()` - Multiple filter TODOs
-- Line 1660: `leaveMask()` - "TODO: WebGPU版のインスタンス描画を実装後に追加"
-
----
-
-## Shader Implementation / シェーダー実装
-
-### WGSL Shaders in ShaderSource.ts / ShaderSource.ts の WGSL シェーダー
-
-The package includes complete WGSL shader implementations for:
-
-パッケージには以下の完全な WGSL シェーダー実装が含まれています：
-
-1. **Fill Shader** (単色塗りつぶし)
-   - WebGL-compatible vertex transformation
-   - Premultiplied alpha blending
-   - Viewport normalization
-
-2. **Mask Shader** (マスク)
-   - Bezier curve rendering with anti-aliasing
-   - Partial derivative-based edge smoothing
-
-3. **Texture Shader** (テクスチャ)
-   - Sampled texture rendering
-   - Color modulation
-
-4. **Instanced Shader** (インスタンス描画)
-   - Per-instance transformation matrices
-   - Color transform (multiply + add)
-   - Atlas texture sampling
-   - Unpremultiply → transform → premultiply workflow
-
-5. **Gradient Shader** (グラデーション) - Structure only
-   - Linear/Radial gradient support
-   - LUT-based color lookup
-
-6. **Blend Shader** (ブレンド) - Structure only
-   - Normal, Multiply, Screen, Add modes
-   - Dual texture sampling
-
----
-
-## Pipeline Architecture / パイプラインアーキテクチャ
-
-The `PipelineManager` creates and manages 6 render pipelines:
-
-`PipelineManager` は 6 つのレンダーパイプラインを作成・管理します：
-
-1. **fill** - Solid color fill (単色塗りつぶし)
-2. **mask** - Stencil/clip operations (ステンシル/クリップ操作)
-3. **basic** - Simple color rendering (シンプルカラーレンダリング)
-4. **texture** - Textured quad rendering (テクスチャ付き矩形レンダリング)
-5. **instanced** - Batch instance rendering (バッチインスタンス描画)
-6. **gradient** - Gradient fill (グラデーション塗りつぶし) - Not yet integrated
-7. **blend** - Blend mode operations (ブレンドモード操作) - Not yet integrated
-
-All pipelines use:
-- Premultiplied alpha blending
-- Triangle list topology
-- No backface culling
-
-すべてのパイプラインは以下を使用：
-- プリマルチプライドアルファブレンディング
-- トライアングルリストトポロジー
-- バックフェースカリング無効
+## Rendering Pipeline / レンダリングパイプライン
+
+The WebGPU package implements a sophisticated rendering pipeline that processes graphics commands through multiple stages:
+
+WebGPUパッケージは、複数のステージを通じてグラフィックスコマンドを処理する洗練されたレンダリングパイプラインを実装しています:
+
+```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 / パイプラインステージ
 
-## Known Limitations / 既知の制限事項
+1. **Context**: Main rendering context that manages the WebGPU state and coordinates all rendering operations
+   - **コンテキスト**: WebGPU状態を管理し、すべてのレンダリング操作を調整するメインレンダリングコンテキスト
 
-1. **Stencil Operations** - Depth-stencil attachment configuration incomplete
-   - ステンシル操作 - Depth-stencilアタッチメント設定が不完全
+2. **PathCommand**: Processes vector path commands (moveTo, lineTo, curveTo, etc.) into renderable primitives
+   - **パスコマンド**: ベクターパスコマンド（moveTo、lineTo、curveToなど）をレンダリング可能なプリミティブに処理
 
-2. **Filter Effects** - Shader code exists but parameter passing not implemented
-   - フィルター効果 - シェーダーコードは存在するがパラメータ渡しが未実装
+3. **Mesh**: Generates triangle meshes from path data for fills and strokes
+   - **メッシュ**: 塗りと線のパスデータから三角形メッシュを生成
 
-3. **Blend Modes** - Only normal blend mode fully functional
-   - ブレンドモード - ノーマルブレンドモードのみ完全に機能
+4. **Shader**: Executes WGSL shaders to render meshes with appropriate materials and effects
+   - **シェーダー**: 適切なマテリアルとエフェクトでメッシュをレンダリングするWGSLシェーダーを実行
 
-4. **Gradient Rendering** - LUT generation incomplete
-   - グラデーションレンダリング - LUT生成が不完全
+5. **FrameBuffer**: Manages render targets and intermediate rendering buffers
+   - **フレームバッファ**: レンダーターゲットと中間レンダリングバッファを管理
 
-5. **Performance** - No optimization for buffer reuse, pipeline caching
-   - パフォーマンス - バッファ再利用、パイプラインキャッシングの最適化なし
+6. **AtlasManager**: Optimizes texture usage through texture atlas packing
+   - **アトラスマネージャー**: テクスチャアトラスパッキングによりテクスチャ使用を最適化
 
-6. **Error Handling** - Limited validation and error recovery
-   - エラーハンドリング - 検証とエラー回復が制限的
+7. **Filter**: Applies post-processing effects (blur, glow, color matrix, etc.)
+   - **フィルター**: ポストプロセスエフェクト（ブラー、グロー、カラーマトリックスなど）を適用
 
----
+8. **Blend**: Handles blend mode operations for compositing
+   - **ブレンド**: 合成のためのブレンドモード操作を処理
 
-## Development Notes / 開発ノート
+9. **Mask**: Implements stencil-based masking for clipping and complex shapes
+   - **マスク**: クリッピングと複雑な形状のためのステンシルベースのマスキングを実装
 
-### Architecture / アーキテクチャ
+## Atlas-Based Rendering Approach / アトラスベースのレンダリングアプローチ
 
-The package follows a manager-based architecture similar to the WebGL implementation:
+The WebGPU package uses a texture atlas system to optimize rendering performance:
 
-パッケージは WebGL 実装と同様のマネージャーベースアーキテクチャに従います：
+WebGPUパッケージは、レンダリングパフォーマンスを最適化するためにテクスチャアトラスシステムを使用しています:
 
-- **Context**: Main rendering interface (メインレンダリングインターフェース)
-- **Managers**: Resource lifecycle management (リソースライフサイクル管理)
-- **Services/UseCases**: Business logic separation (ビジネスロジック分離)
-- **Shaders**: WGSL source and pipeline configuration (WGSL ソースとパイプライン設定)
+### Benefits / 利点
 
-### Frame Lifecycle / フレームライフサイクル
+- **Reduced draw calls**: Multiple textures are packed into a single atlas, reducing the number of texture bindings
+  - **描画コールの削減**: 複数のテクスチャが単一のアトラスにパックされ、テクスチャバインディングの数が削減されます
 
-```
-clearTransferBounds()
-  → beginFrame()
-  → [drawing operations]
-  → endFrame()/transferMainCanvas()
-```
+- **Memory efficiency**: Optimal packing algorithm minimizes wasted GPU memory
+  - **メモリ効率**: 最適なパッキングアルゴリズムにより、無駄なGPUメモリが最小化されます
 
-### Rendering Flow / レンダリングフロー
+- **Cache coherency**: Better GPU cache utilization through spatial locality
+  - **キャッシュコヒーレンシー**: 空間的局所性による優れたGPUキャッシュ利用
 
-1. Acquire canvas texture (once per frame) (キャンバステクスチャ取得 - フレーム毎に1回)
-2. Create command encoder (コマンドエンコーダー作成)
-3. Begin render pass with load/clear (ロード/クリアでレンダーパス開始)
-4. Set pipeline and bind resources (パイプライン設定とリソースバインド)
-5. Draw commands (描画コマンド)
-6. End render pass (レンダーパス終了)
-7. Submit commands to queue (コマンドをキューに送信)
+### Atlas Management / アトラス管理
 
----
+The `AtlasManager` component uses the `@next2d/texture-packer` package to:
 
-## Browser Compatibility / ブラウザ互換性
+`AtlasManager`コンポーネントは`@next2d/texture-packer`パッケージを使用して以下を実行します:
 
-WebGPU support is required. As of 2024:
+- 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
+  - テクスチャ要件が単一のアトラス容量を超える場合、複数のアトラスインスタンスをサポート
 
-WebGPU サポートが必要です。2024年時点：
+### Rendering with Atlases / アトラスを使用したレンダリング
 
-- ✅ Chrome/Edge 113+
-- ✅ Firefox 131+ (experimental)
-- ✅ Safari 18+ (experimental)
-- ❌ Older browsers (need WebGL fallback)
+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座標を割り当てます
 
-## Usage / 使用方法
+3. Shaders use these UV coordinates to sample from the correct atlas region
+   - シェーダーがこれらのUV座標を使用して正しいアトラス領域からサンプリングします
 
-```typescript
-import { Context } from "@next2d/webgpu";
+4. Multiple objects can be rendered in a single draw call using the same atlas
+   - 同じアトラスを使用して複数のオブジェクトを単一の描画コールでレンダリング可能
 
-// Get WebGPU adapter and device
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+## Architecture Patterns / アーキテクチャパターン
 
-// Get canvas context
-const canvas = document.getElementById("canvas") as HTMLCanvasElement;
-const context = canvas.getContext("webgpu") as GPUCanvasContext;
+The codebase follows a clean architecture approach with clear separation of concerns:
 
-// Get preferred format
-const format = navigator.gpu.getPreferredCanvasFormat();
+コードベースは、関心事の明確な分離を伴うクリーンアーキテクチャアプローチに従っています:
 
-// Create rendering context
-const ctx = new Context(device, context, format);
+### Service Layer / サービス層
 
-// Rendering
-ctx.clearTransferBounds(); // Begin frame
-ctx.fillStyle(1, 0, 0, 1); // Red
-ctx.beginPath();
-ctx.arc(100, 100, 50);
-ctx.fill();
-ctx.transferMainCanvas(); // End frame and submit
-```
+Services contain low-level operations and business logic. They are pure functions that perform specific tasks.
 
----
+サービスは低レベルの操作とビジネスロジックを含みます。特定のタスクを実行する純粋な関数です。
 
-## Contributing / 貢献
+### Use Case Layer / ユースケース層
 
-As this package is work in progress, contributions are welcome! Priority areas:
+Use cases orchestrate multiple services to accomplish higher-level operations. They represent application-specific business rules.
 
-このパッケージは開発中のため、貢献を歓迎します！優先領域：
+ユースケースは、より高レベルの操作を達成するために複数のサービスを調整します。アプリケーション固有のビジネスルールを表します。
 
-1. Completing gradient and bitmap fill/stroke shaders
-2. Implementing filter parameter binding
-3. Stencil-based masking operations
-4. Performance optimization (buffer pooling, pipeline caching)
-5. Comprehensive testing
+## Dependencies / 依存関係
 
----
+- `@next2d/texture-packer`: Texture atlas packing and management / テクスチャアトラスのパッキングと管理
+- `@next2d/render-queue`: Rendering operation queue management / レンダリング操作キュー管理
 
 ## License / ライセンス
 
-MIT License
-
-Copyright (c) 2021 Next2D
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
-## Related Packages / 関連パッケージ
-
-- `@next2d/texture-packer` - Texture atlas management
-- `@next2d/render-queue` - Render queue for batch operations
-
----
-
-**Last Updated**: 2024-12-08
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
 
-**Status**: 🚧 Experimental - Active Development
+このプロジェクトは[MITライセンス](https://opensource.org/licenses/MIT)の下でライセンスされています - 詳細は[LICENSE](LICENSE)ファイルを参照してください。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/webgpu",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Next2D WebGPU Package",
   "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "dependencies": {
-    "@next2d/texture-packer": "3.0.0",
-    "@next2d/render-queue": "3.0.0"
+    "@next2d/texture-packer": "3.0.1",
+    "@next2d/render-queue": "3.0.1"
   }
 }