nixie-fx-runtime について
NixieFX Runtimeは、コンパイル済みのNixieFXビジュアルエフェクトをThree.jsまたはPixiJSのアプリに組み込むスキルです。バンドルの読み込み、ホスト側のアセット提供、フレーム更新、診断、解放を扱います。
主な機能
- 01コンパイル済みVFXエクスポートの読み込み
- 02Three.jsまたはPixiJSとの統合
- 03ホスト側プロバイダーによるアセット解決
- 04フレームごとに一度のエフェクト更新
- 05対応状況と不足リソースの確認
- 06ランタイムリソースの解放
活用シーン
- 01Three.jsシーンでエクスポート済みエフェクトを表示
- 02PixiJSの2Dインターフェースでエフェクトを使用
- 03不足アセットとバックエンド対応状況を確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ azakhary/ nixie-fx --skill nixie-fx-runtimeインストール後、Claude Code で/nixie-fx-runtimeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlreferences/export-bundles.mdpixi.mdthree.md詳細
NixieFX ランタイム
生成された out/vfx アーティファクトを統合します。ゲーム内でオーサリングプロジェクトのファイルを直接読み込まないでください。
ワークフロー
-
ホストのレンダラー、レンダーループ、アセットパイプライン、カメラまたは投影方式、クリーンアップのライフサイクルを確認します。
-
選択したオプションのピア依存関係のみをインストールします。
npm install nixie-fx three # or npm install nixie-fx pixi.js -
export-bundles.md を読み、
nixie-fx/export(loadVfxExportBundle)を使ってコンパイル済みバンドル全体を読み込みます。 -
タスクで両方が必要な場合を除き、バックエンドガイドを1つだけ読みます。
-
ホストアプリケーションが所有する、注入されたプロバイダーを通じてテクスチャ、マテリアルグラフ、メッシュ、サブエフェクトを解決します。
-
レンダラーとエフェクトインスタンスを作成し、ホストの各フレームにつき1回だけレンダラーを更新します。
-
マニフェストのサポートレポートと、ランタイムの不足リソース統計を提示します。一部または未対応の動作を、完全に対応しているものとして黙って扱わないでください。
-
ホストのスコープが終了したら、インスタンス、レンダラー所有のオブジェクト、プロバイダーのリソースを破棄します。
パッケージの境界
パブリックなエントリーポイントのみを使用します。
- バックエンドに依存しないコントラクトとサポートデータには
nixie-fx。 - PixiJS との統合には
nixie-fx/pixi。 - Three.js との統合には
nixie-fx/three。 - マテリアルグラフのコントラクトには
nixie-fx/materials。 - ブラウザーで安全に使えるエクスポートスキーマと読み込みには
nixie-fx/export。 - Node のファイルシステムを使ったエクスポートツールには
nixie-fx/export/nodeのみ。
nixie-fx/src/** を深い階層からインポートしたり、ランタイムのソースを利用側にコピーしたり、使用しないレンダラーバックエンドをインポートしたりしないでください。
その他のエンジン
エクスポート形式はエンジンに依存しない JSON で、Three.js と PixiJS 向けの公式ランタイムが用意されています。プロジェクトが別のエンジンを対象とする場合、これらのアダプターを無理に導入しないでください。共有シミュレーション(リポジトリ内の src/engine/particles.ts)はレンダラーに依存せず、Three アダプターのソースは移植時の参考実装として使えるほどコンパクトです。
ランタイムのルール
- アプリケーション、シーン、カメラ、クロック、URL、キャッシュ、エラー報告はゲーム側で管理します。
- エフェクトを生成する前に非同期アセットをプリロードします。レンダリング中に使うプロバイダーのゲッターは同期処理でなければなりません。
renderer.update(deltaSeconds)を1回呼び出します。同じフレーム内でinstance.update(deltaSeconds)も呼び出さないでください。- オーサリング時のパスはバンドル相対の検索キーとして扱います。ホストのプロバイダーで URL またはアトラスフレームにマッピングします。
- 決定論的な再生が必要な場合は、固定シードを使います。
- 非アクティブなランタイムは一時停止または破棄します。非表示のシーンで更新を続けないでください。
- Three.js のパフォーマンスを最適化する場合は、エミッターごとの描画回数を確認し、ホストの最終的な透過描画順序にパブリックな
ThreeVfxBatcherを統合します。three.md のバッチ処理の節を読んでください。マテリアルを共有するだけでは描画呼び出しは統合されません。また、カスタムマテリアルを指定すると、現在は標準のインスタンス化高速パスが無効になります。 - 対象のレンダラーで実際にエクスポートしたエフェクトを確認するまでは、エディターとの同等性を主張しないでください。
完了確認
- 他方のピア依存関係をインストールせずに、選択したバックエンドをインポートできます。
- ローダーがマニフェスト、必須のエフェクト ID、選択したバックエンドを受け付けます。
- 選択したバックエンドに対して、マニフェストのエントリーがブロックされていません。
- テクスチャ、マテリアルグラフ、メッシュ、サブエフェクトが、不足参照の統計を発生させずに解決されます。
- シミュレーションはフレームごとに1回進行し、ティアダウン後に停止します。
- 実際のホストアプリケーションでエフェクトを目視確認します。