pixijs-core-concepts

PixiJS v8 がピクセルをスクリーンに表示する仕組みの基盤モデル：レンダラーがどの GPU バックエンドを使うかを決定し、レンダーループがフレームごとの処理を駆動し、環境レイヤーがブラウザ、Web Worker、SSR コンテキストに対応させます。シーングラフそのもの（Containers、transforms、destroy）については、pixijs-scene-core-concepts を参照してください。

クイックスタート

console.log(app.renderer.name); // 'webgl' | 'webgpu' | 'canvas'

app.ticker.add((ticker) => {
  sprite.rotation += 0.01 * ticker.deltaTime;
});

const tex = app.renderer.extract.texture({ target: app.stage });

app.renderer.render({ container: app.stage });

app.renderer は autoDetectRenderer によって選ばれた WebGLRenderer、WebGPURenderer、または CanvasRenderer です。TickerPlugin が自動的に renderer.render() を駆動します。autoStart: false の場合のみ手動で呼び出してください。バックエンド選択は Application.init({ preference }) で行われます。セットアップについては pixijs-application を参照してください。

関連スキル： pixijs-application（Application の構築とライフサイクル）、pixijs-ticker（フレーム単位のロジック、優先度、FPS キャップ）、pixijs-environments（Web Worker、SSR、strict CSP）、pixijs-custom-rendering（RenderPipe の記述）、pixijs-scene-core-concepts（シーングラフの基本）

トピック

トピック	リファレンス	対象
バックエンドの選択	references/renderers.md	優先度形式、レンダラーごとのオプション、システムとパイプ
フレームごとの実行	references/render-loop.md	優先度順、時間単位、手動レンダリング

各トピックの詳細については、対応するリファレンスファイルを開いてください。ブラウザ以外のターゲット（DOMAdapter、WebWorkerAdapter、カスタムアダプタ、strict CSP）は pixijs-environments スキルで説明されています。

判定ガイド

• Application をセットアップ中ですか？ pixijs-application から始めてください。このスキルはレンダラーが内部でどのように動作するかを説明します。
• WebGL と WebGPU のどちらかを選択していますか？ 優先度配列として ['webgpu', 'webgl'] を使用してください。WebGPU は利用可能な場所で最速です。WebGL は信頼できるフォールバックです。references/renderers.md を参照してください。
• Web Worker で実行していますか？ app.init の前に DOMAdapter.set(WebWorkerAdapter) を設定してください。完全なセットアップについては pixijs-environments スキルを参照してください。
• レンダリングが発生するタイミングに対して手動制御が必要ですか？ autoStart: false を設定し、独自のループから app.renderer.render(app.stage) を呼び出してください。references/render-loop.md を参照してください。
• 物理演算ライブラリと統合していますか？ UPDATE_PRIORITY.HIGH で更新を追加して、物理演算が LOW でのレンダーの前に実行されるようにしてください。references/render-loop.md を参照してください。
• カスタムレンダリング可能オブジェクトを記述していますか？ RenderPipe を実装してください。pixijs-custom-rendering スキルを参照してください。
• strict CSP の下で実行していますか？ 'pixi.js/unsafe-eval' をインポートしてください。pixijs-environments スキルを参照してください。

クイックコンセプト

レンダラー = システム + パイプ

各レンダラーは Systems（ライフサイクルサービス：テクスチャ、バッファ、状態、フィルター、マスク）と RenderPipes（レンダリング可能オブジェクトごとの命令ビルダー：sprite、graphics、mesh、particle、text、tiling）で構成されます。カスタムレンダリング可能オブジェクトを記述するには、RenderPipe を実装し、拡張機能経由で登録します。

レンダーループ

app.ticker.add(fn) はフレームごとに実行されるコールバックを登録します。TickerPlugin は UPDATE_PRIORITY.LOW で app.render() を登録するため、NORMAL または HIGH の ticker コールバックは描画の前に実行されます。手動制御の場合は autoStart: false でプラグインを無効にしてください。

環境

DOMAdapter は PixiJS が行うすべての DOM 呼び出し（キャンバス作成、画像ロード、fetch、XML パース）を抽象化します。Workers の場合は DOMAdapter.set(WebWorkerAdapter) で交換するか、Node/SSR 向けにカスタム Adapter を実装してください。Application.init の前に行う必要があります。

よくある間違い

[HIGH] init() が解決する前に app.renderer にアクセス

間違い：

const app = new Application();
app.init({ width: 800, height: 600 });
console.log(app.renderer.name); // undefined — init() は非同期

正しい：

const app = new Application();
await app.init({ width: 800, height: 600 });
console.log(app.renderer.name); // 'webgl' | 'webgpu' | 'canvas'

Application.init() は非同期です。app.renderer、app.canvas、app.screen はプロミスが解決されるまで存在しません。

[HIGH] Application.init の後に DOMAdapter を設定

間違い：

const app = new Application();
await app.init({ width: 800, height: 600 });
DOMAdapter.set(WebWorkerAdapter); // 遅すぎます — init は既にリソースを割り当てています

正しい：

DOMAdapter.set(WebWorkerAdapter);
const app = new Application();
await app.init({ width: 800, height: 600 });

アダプタはレンダラーの構築中に行われる DOM 呼び出しを抽象化します（キャンバス作成、画像ロード、fetch）。init() の前に交換するか、間違ったアダプタがレンダラーに組み込まれます。

[MEDIUM] preference を保証として扱う

間違い：

await app.init({ preference: "webgpu" });
// WebGPU がアクティブであると仮定
useWebGPUOnlyFeature(app.renderer);

正しい：

await app.init({ preference: "webgpu" });
if (app.renderer.name === "webgpu") {
  useWebGPUOnlyFeature(app.renderer);
}

preference はヒントであり、要求ではありません。ブラウザが WebGPU をサポートしていない場合、PixiJS は WebGL（または Canvas）にフォールバックします。バックエンド固有のコードには常に renderer.name で分岐してください。

API リファレンス

• autoDetectRenderer
• AbstractRenderer
• WebGLRenderer
• WebGPURenderer
• CanvasRenderer
• Application
• DOMAdapter