pixijs-core-concepts

PixiJS v8 が画面にピクセルを描画する仕組みの基礎です。レンダラーが使用する GPU バックエンドを決定し、レンダーループがフレームごとの処理を実行します。また、環境レイヤーがライブラリをブラウザー、Web Worker、SSR の各コンテキストに適応させます。シーングラフそのもの（Containers、変換、破棄）については、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、厳格な CSP）、pixijs-custom-rendering（RenderPipe の作成）、pixijs-scene-core-concepts（シーングラフの基本）。

トピック

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

各トピックの詳細については、対応するリファレンスファイルを開いてください。ブラウザー以外のターゲット（DOMAdapter、WebWorkerAdapter、カスタムアダプター、厳格な 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 を参照してください。
• 物理ライブラリと統合しますか？ 物理処理が LOW の描画より前に実行されるよう、更新処理を UPDATE_PRIORITY.HIGH に追加してください。references/render-loop.md を参照してください。
• カスタムのレンダリング可能オブジェクトを作成しますか？ RenderPipe を実装してください。pixijs-custom-rendering スキルを参照してください。
• テクスチャやカスタムのレンダーターゲットに描画しますか？ renderer.render() に target を渡すか、カラーアタッチメントと深度アタッチメントを明示した RenderTarget を作成してください。references/renderers.md を参照してください。
• 厳格な CSP のもとで実行しますか？ 'pixi.js/unsafe-eval' をインポートしてください。pixijs-environments スキルを参照してください。

クイックコンセプト

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

各レンダラーは、Systems（テクスチャ、バッファー、ステート、フィルター、マスクなどのライフサイクルサービス）と RenderPipes（スプライト、グラフィックス、メッシュ、パーティクル、テキスト、タイリングなど、レンダリング可能オブジェクトごとの命令を構築するもの）で構成されています。カスタムのレンダリング可能オブジェクトを作成するには、RenderPipe を実装し、拡張機能を通じて登録します。バックエンド固有のシステムとパイプは、レンダラーローダー拡張機能（WebGLLoader、WebGPULoader、CanvasLoader）を通じて動的にインポートできます。references/renderers.md を参照してください。

レンダーループ

app.ticker.add(fn) は、毎フレーム実行されるコールバックを登録します。TickerPlugin は app.render() を UPDATE_PRIORITY.LOW で登録するため、NORMAL または HIGH のティッカーコールバックは描画より前に実行されます。手動で制御するには、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() is async

正しい例：

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 は、Promise が解決するまで存在しません。

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

誤り：

const app = new Application();
await app.init({ width: 800, height: 600 });
DOMAdapter.set(WebWorkerAdapter); // too late — init already allocated resources

正しい例：

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

アダプターは、レンダラーの構築中に行われる DOM 呼び出し（キャンバスの作成、画像の読み込み、fetch）を抽象化します。init() の前に切り替えないと、誤ったアダプターがレンダラーに組み込まれてしまいます。

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

誤り：

await app.init({ preference: "webgpu" });
// assume WebGPU is active
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