← ソースコード説明書
VRM（
packages/web - PixiJS WebGL エンジン
作成日: 2026-03-06 ／ 更新日: 2026-06-10
概要
PixiJS + Filament.js ベースの Web エンジン。Op 命令の実行、スプライト・テキスト・UI のレンダリング、VRM 3D キャラクター（表情 / SpringBone / 独自トゥーン・Filament）、Live2D キャラクター、48 種のスクリーンフィルター、ゲームシステム（セーブ/ロード、バックログ、設定）を提供する。プレビューエンジン (:5175) として動作。
ディレクトリ構成
packages/web/
├── src/
│ ├── engine/
│ │ ├── KscRunner.ts # KSC 実行ループ (80+行)
│ │ ├── KscHostAdapter.ts # KSC→IOpHandler ブリッジ (300+行)
│ │ ├── resolveScenarioConfig.ts # シナリオ設定解決
│ │ └── _deprecated/WebEngine.ts # 旧エンジン
│ ├── renderer/
│ │ ├── WebOpHandler.ts # メイン Op 実行器 (1000+行)
│ │ ├── LayerManager.ts # レイヤー階層管理
│ │ ├── TextWindow.ts # テキスト描画
│ │ ├── ChoiceOverlay.ts # 選択肢 UI
│ │ ├── BacklogStore.ts # 対話履歴
│ │ ├── ScreenFilter.ts # フィルター管理
│ │ ├── screenFx.ts # 画面エフェクト (フラッシュ、フェード)
│ │ ├── shake.ts # 画面揺れ
│ │ ├── fadeTo.ts # フェード遷移
│ │ ├── lerpPosition.ts # 位置補間
│ │ ├── easing.ts # イージング関数
│ │ ├── PC98Filter.ts # PC-98 レトロフィルター
│ │ ├── filters/ # カスタムフィルター
│ │ │ ├── BloomFilter.ts
│ │ │ ├── ChromaticAberrationFilter.ts
│ │ │ ├── ColorTintFilter.ts
│ │ │ ├── CRTFilter.ts
│ │ │ ├── FocusBlurFilter.ts
│ │ │ ├── GameBoyFilter.ts
│ │ │ ├── GlitchFilter.ts
│ │ │ ├── NightFilter.ts
│ │ │ ├── NoiseFilter.ts
│ │ │ ├── OldFilmFilter.ts
│ │ │ ├── PixelateFilter.ts
│ │ │ ├── RainFilter.ts
│ │ │ ├── UnderwaterFilter.ts
│ │ │ ├── VignetteFilter.ts
│ │ │ └── shaderUtils.ts
│ │ └── ui/
│ │ ├── BacklogScreen.ts # バックログ画面
│ │ ├── SaveLoadScreen.ts # セーブ/ロード画面
│ │ ├── MenuScreen.ts # メニュー画面
│ │ ├── SettingsScreen.ts # 設定画面
│ │ ├── TitleScreen.ts # タイトル画面
│ │ ├── EndScreen.ts # エンド画面
│ │ ├── EquipmentScreen.ts # 装備画面
│ │ └── ShopScreen.ts # ショップ画面
│ ├── systems/
│ │ ├── FlagSystem.ts # フラグ管理
│ │ └── InventorySystem.ts # アイテムインベントリ
│ ├── audio/
│ │ └── AudioManager.ts # Web Audio API ラッパー (60+行)
│ ├── input/
│ │ └── InputManager.ts # ポインター/キーボード入力
│ ├── storage/
│ │ └── StorageManager.ts # IndexedDB セーブ/ロード
│ ├── ui/
│ │ ├── LoadingScreen.ts # ローディング画面
│ │ ├── SkeletonUI.ts # スケルトン UI
│ │ └── DiagnosticsOverlay.ts # 診断オーバーレイ
│ ├── utils/
│ │ ├── Logger.ts # ログ出力
│ │ └── LRUCache.ts # LRU キャッシュ
│ ├── config/
│ │ └── UserConfig.ts # ユーザー設定
│ ├── main.ts # エントリポイント
│ ├── ksc-demo.ts # デモスクリプトローダー
│ ├── timeline-demo.ts # タイムラインデモ
│ └── ksc-demo.html # デモ HTML
├── test/
│ ├── game-systems.e2e.test.ts
│ └── KscRunner.e2e.test.ts
├── package.json
├── vite.config.ts # ポート 5175
└── vitest.config.ts
主要ファイル
| ファイル | 行数 | 役割 |
|---|---|---|
| WebOpHandler.ts | 1000+ | Op 実行の中核。スプライト管理、テキスト描画、音声制御、画面状態管理 |
| KscHostAdapter.ts | 300+ | KSC VM の HostAPI 実装。KSC コマンド → WebOpHandler メソッド変換 |
| KscRunner.ts | 80+ | KSC 実行ループ。ソースコード → コンパイル → VM 実行 |
| ScreenFilter.ts | — | フィルター管理。48 種のカスタムフィルター切り替え |
| AudioManager.ts | 60+ | Web Audio API。BGM/SE/VOICE カテゴリ別音量管理 |
レイヤー構成
Stage
├── Background Layer (z: 0) # 背景画像
├── Character Layer (z: 1) # キャラクタースプライト
├── Overlay Layer (z: 2) # オーバーレイ画像
└── UI Layer (z: 3) # テキストウィンドウ、選択肢、メニュー
WebOpHandler の主要メソッド
| メソッド | Op 型 | 説明 |
|---|---|---|
| textAppend | TEXT_APPEND | テキスト表示 (文字送り) |
| bgSet | BG_SET | 背景画像設定 (cover スケーリング) |
| chSet | CH_SET | キャラクター表示 (L/C/R 位置) |
| chHide | CH_HIDE | キャラクター非表示 |
| chMove | CH_MOVE | キャラクター移動アニメ |
| choice | CHOICE | 選択肢 UI 表示 |
| bgmPlay | BGM_PLAY | BGM 再生 |
| sePlay | SE_PLAY | SE 再生 |
| voicePlay | VOICE_PLAY | ボイス再生 |
| waitMs / waitClick / waitVoiceEnd | WAIT_MS / WAIT_CLICK / WAIT_VOICE_END | 待機 (時間/クリック/ボイス終了) |
| overlaySet / overlayHide | OVERLAY_SET / OVERLAY_HIDE | オーバーレイ表示・非表示 |
| screenFilter | SCREEN_FILTER | スクリーンフィルター適用 |
| colorAdjust | COLOR_ADJUST | 色調補正 |
| fadeBlack / fadeWhite | FADE_BLACK / FADE_WHITE | 黒/白フェード |
メソッド名は
IOpHandler（packages/core）の実定義に準拠。JUMP/VAR_SET等の制御系 Op はIOpHandlerメソッドではなくOpRunner側で処理される。WAIT/MOVE/FADE/OVL_SETといった単一 Op は存在しない（上記の分割名が実体）。
スクリーンフィルター (48 種)
| フィルター | 効果 |
|---|---|
| Bloom | グロー / 発光 |
| ChromaticAberration | 色収差 |
| ColorTint | 色調変更 |
| CRT | CRT モニター風 |
| FocusBlur | フォーカスブラー |
| GameBoy | ゲームボーイ風 |
| Glitch | グリッチ / ノイズ |
| Night | 夜景 / 暗転 |
| Noise | ノイズ |
| OldFilm | 古いフィルム風 |
| Pixelate | ピクセル化 |
| Rain | 雨エフェクト |
| Underwater | 水中エフェクト |
| Vignette | ビネット (周辺減光) |
| PC98 | PC-98 レトロ風 |
ゲームシステム
| システム | ファイル | 説明 |
|---|---|---|
| セーブ/ロード | StorageManager.ts, SaveLoadScreen.ts | IndexedDB にセーブデータ保存 |
| バックログ | BacklogStore.ts, BacklogScreen.ts | 対話履歴の保存・表示 |
| 設定 | UserConfig.ts, SettingsScreen.ts | テキスト速度、音量、フルスクリーン |
| メニュー | MenuScreen.ts | ゲームメニュー |
| フラグ | FlagSystem.ts | ブール型フラグの管理 |
| インベントリ | InventorySystem.ts | アイテム管理 |
| タイトル | TitleScreen.ts | タイトル画面 |
| エンド | EndScreen.ts | エンディング画面 |
VRM / Live2D キャラクター
3D（VRM）と Live2D の実装。仕組み・コマンドの概要は VRM・Live2D キャラクター を参照。
VRM（src/renderer/vrm/）
| ファイル | 役割 |
|---|---|
VrmRenderer.ts | Filament エンジンのラッパー。canvas/scene/camera/light を遅延初期化し、PixiJS の上（z-index）に合成。viewport / resize / transform を制御 |
vrmAsset.ts | VRM ローダー本体。GLB 展開、humanoid ボーン解決、表情（preset + custom）解析、toon マテリアル差し替え、springBone 初期化 |
VrmDelegate.ts | WebVrmDelegate（Web）/ NoopVrmDelegate（非対応）の抽象。レンダラを遅延生成 |
nodeConstraints.ts | VRMC_node_constraint 1.0（roll / aim）の評価。袖・ツイスト（J_Roll / J_Aim）を駆動 |
springbone.ts | VRMC_springBone 1.0（Verlet 積分）。髪・スカートの揺れ。コライダーは未対応 |
humanoid.ts | humanoid ボーンのレストポーズ保持、setLocalAxisAngle() / aimChildToWorldDir() ポーズ駆動 |
- 描画は Filament（WebGL）。トゥーンは独自マテリアル
toon.filamat（MToon 拡張ではない）。 - VRM 1.0 フル / 0.x レガシー。
@sceneMode 2d|vrmでシーン切替。 - ネイティブ側も
packages/native-engineに VRM 実装あり：macOS / Windows / Android は各 CMake（top-level /windows//android/app/jni/）が Filament ライブラリ検出時にVrmRendererFilament.cpp＋src/engine/vrm/*（VrmGltf / Humanoid / PosePresets / Expression / SpringBone）をビルド。Filament 不在時と iOS はVrmRendererStub.cppにフォールバック。
Live2D
| ファイル | 役割 |
|---|---|
src/renderer/Live2DCharacter.ts | モデルラッパー。モーショングループ、表情、リップシンク（ParamMouthOpenY / speak）、まばたき・呼吸 |
src/renderer/delegates/Live2DDelegate.ts | Op ハンドラ（live2dSet / live2dHide / live2dMotion / live2dExpression、fade 対応） |
- ライブラリ:
untitled-pixi-live2d-engine（Cubism 3/4/5）。Web のみ（ネイティブ未対応）。
3 系統共通ハンドラ
src/renderer/delegates/CharacterDelegate.ts が CH_EXPR / CH_LIP / CH_MOTION をキャラ種別（static / live2d / kanim）で振り分ける。Op 型は packages/core/src/types/Op.ts、コマンドは packages/compiler/src/registry/commandRegistry.ts、エディタブロックは apps/editor/src/components/blocks/（VrmBlockCard / Live2DBlockCard）。
依存関係
内部パッケージ
@kaedevn/core(Op 型、タイムライン型)@kaedevn/compiler(.ks コンパイル)@kaedevn/ksc-compiler(.ksc コンパイル + VM)@kaedevn/battle(バトルシステム)
主要外部ライブラリ
pixi.js— WebGL レンダリングvite— 開発サーバー
データフロー
[KSC スクリプト]
↓
[KscRunner] → [ksc-compiler] → IR
↓
[VM] → HostAPI コールバック
↓
[KscHostAdapter] → WebOpHandler メソッド呼び出し
↓
[WebOpHandler] → PixiJS スプライト操作
↓
[LayerManager] → Stage 描画
テスト
test/game-systems.e2e.test.ts— ゲームシステム E2E テストtest/KscRunner.e2e.test.ts— KSC 実行ループの E2E テスト
Ad: stickyBottom (728x90)