2025.10.06 アーキテクチャ

PixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8対応で解説

PixiJSは、ブラウザのGPUを使って2Dグラフィックスを高速に描画するオープンソースのJavaScriptライブラリです。低レベルなWebGL/WebGPUのコードを書かずに、スプライト・図形・テキスト・フィルターといったリッチな2D表現を、シンプルなAPIで実装できます。ゲームのブラウザ版、インタラクティブ広告、データ可視化などプロの制作現場で使われており、商用を含めてMITライセンスで無償利用できます。この記事では、2024年に大きく刷新された最新のv8系を前提に、位置づけ・導入・基本的な使い方・イベント処理・パフォーマンス最適化・他ライブラリ連携までを、実際に動くコードとともに整理します。

まとめ：PixiJSの要点

  • PixiJSはWebGL/WebGPUベースの2D専用描画エンジン。3D主体ならThree.jsなど別ライブラリを選ぶ。
  • v8（2024年3月〜、2026年7月時点の最新は8.19.0）でWebGPUをコアに統合。環境に応じてWebGL/WebGPUを自動選択する。
  • v8では初期化が非同期になり、await app.init() が必須。Graphics APIも circle().fill() 形式に変わった。
  • 基本は「オブジェクトを作る→stageに追加→必要ならtickerで毎フレーム更新」の3ステップ。
  • 大量描画はスプライトシート・ParticleContainer・カリングで最適化する。SpineやReact（@pixi/react）とも公式に連携できる。

PixiJSの位置づけと得意分野

PixiJSがしていることは、要約すると「WebGL/WebGPUの高速描画を、書きやすいAPIで包む」ことです。ブラウザでリッチな2D表現をしようとすると、本来は <canvas> 要素やWebGLを直接操作する必要があり、オブジェクト数が増えるほどコードも性能も破綻しがちです。PixiJSは描画をGPUに任せつつ、開発者にはスプライトや図形を組み合わせるだけのシンプルなインターフェースを提供します。

PixiJSは2D専用で、3D表現は扱いません。その分2Dに最適化されており軽量・高速です。立体的なシーンやカメラを扱いたい場合は、WebGLベースの3DライブラリであるThree.jsの概要と魅力など別の選択肢が向きます。逆に、大量のスプライトを滑らかに動かす2Dゲームやアニメーション、UIであればPixiJSが第一候補になります。

ライセンスはMITで、商用サイトやスマホゲームのブラウザ版、デジタルサイネージなどでも採用実績があります。必要な機能だけをimportすればツリーシェイキングでバンドルを小さく保てるため、導入コストも抑えられます。

PixiJS v8の主な変更点

v8は2024年3月にリリースされたメジャーアップデートで、内部構造から大きく作り直されています。v7以前のコードをそのまま持ち込むと動かない箇所があるため、主要な変更点を先に押さえます。

WebGPUのコア統合と自動選択

v8では、WebGLに加えて次世代のグラフィックスAPIであるWebGPUをエンジンのコアに統合しました。WebGPUは2026年時点でChrome・Edge・Safariでは既定で有効、FirefoxもWindowsとApple Silicon版macOSで既定有効になっています（Linux・Androidなどは開発中で環境により異なります）。PixiJSは対応環境で自動的にWebGPUを、非対応環境ではWebGLを選ぶため、開発者側でコードを分岐させる必要はありません。ブラウザの対応状況はFirefox 147の新機能のような最新版情報でも変化するため、WebGPU固有機能に依存する場合は公式の対応状況を確認しておくと安全です。

単一パッケージ化とツリーシェイキング

v7では @pixi/sprite や @pixi/graphics のように機能ごとに分割されていたパッケージが、v8では pixi.js 一つに再統合されました。必要なクラスは次のように一括でimportします。使っていない機能はビルド時のツリーシェイキングで除外され、バンドルサイズを抑えられます。

import { Application, Graphics, Sprite, Assets } from 'pixi.js';

初期化の非同期化（await app.init()）

WebGPU対応にともない、レンダラーの初期化が非同期になりました。Application を生成した後、await app.init() で初期化完了を待たないと描画が始まりません。v7ではコンストラクタに渡していたサイズや背景色などのオプションも、v8では init() に渡します。これはv7からの移行で最も引っかかりやすい変更点です。

Graphics APIの刷新

図形描画のGraphics APIはv8で最も変わった部分です。v7の「塗り色を決めてから図形を描く」流れ（beginFill() → drawCircle() → endFill()）は廃止され、v8では「図形を描いてから塗る/線を引く」流れに変わりました。旧メソッドは非推奨で、新しくは次のように書きます。

const g = new Graphics();
g.circle(0, 0, 50).fill(0xff0000);   // 半径50の赤い円
g.rect(0, 0, 100, 40).fill(0x00aaff).stroke({ width: 2, color: 0x003366 });

あわせて drawRect() は rect() に、線は「Line」から「Stroke」という呼称に整理され、穴あけは cut() になりました。v7時代のサンプルコードをコピーすると動かないため注意してください。

描画性能とParticleContainerの刷新

レンダリングループが「毎フレーム必要な更新だけを行う」方式に最適化され、WebGL利用時でもv7より高速になりました。公式ベンチマークでは、10万個のスプライトを動かす処理のCPU時間が約50ms→約15ms、GPU時間が約9ms→約2msに短縮されています。大量の小さなオブジェクトを扱う ParticleContainer も作り直され、用途によっては100万規模のパーティクルでも実用的なフレームレートを狙えます。

導入と初期化の手順

PixiJS v8の導入方法は大きく2通り、CDN読み込みとnpmインストールです。試すだけならCDN、実プロジェクトに組み込むならnpmが基本です。

CDN読み込み

手軽に試すなら、CDN上のビルドをHTMLに読み込むだけで PIXI グローバルが使えます。バージョンは固定して指定し、最新版は公式で確認してください（2026年7月時点の最新は8.19.0）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.19.0/pixi.min.js"></script>

npmインストール

モジュールバンドラを使うプロジェクトでは、npmで追加してimportします。v7から移行する場合は、@pixi/* 名前空間のimportを pixi.js からの一括importに書き換えます。

npm install pixi.js

Applicationの初期化

読み込めたら、描画領域を管理する Application を生成し、await app.init() で初期化します。生成される <canvas> は app.canvas から取得できます（v7の app.view は非推奨）。

import { Application } from 'pixi.js';

const app = new Application();

// v8では init が非同期。オプションはここで渡す
await app.init({
  resizeTo: window,
  background: 0xffffff,
  antialias: true,
});

// 生成された canvas を DOM に配置
document.body.appendChild(app.canvas);

await を忘れると初期化前に描画コードが走り、何も表示されません。トップレベルawaitが使えない環境では async 関数の中で呼び出すか、app.init().then(...) を使います。

基本的な使い方：図形とスプライトを描く

PixiJSの基本は「表示オブジェクトを作る→app.stage に追加する→必要なら app.ticker で毎フレーム更新する」の3ステップです。まず、赤い円を左右にバウンドさせる例です。

import { Graphics } from 'pixi.js';

// 1. 図形を作って塗る（v8のGraphics API）
const circle = new Graphics();
circle.circle(0, 0, 50).fill(0xff0000);
circle.x = 50;
circle.y = 100;

// 2. ステージに追加
app.stage.addChild(circle);

// 3. 毎フレーム移動し、端で反転
let speed = 3;
app.ticker.add(() => {
  circle.x += speed;
  if (circle.x + 50 >= app.screen.width || circle.x - 50 <= 0) {
    speed *= -1;
  }
});

ticker はデフォルトで自動起動するので、app.ticker.add() に登録した関数が毎フレーム呼ばれます。次に画像を表示するスプライトの例です。画像の読み込みはv8で Assets に一本化され、v7の Loader は使いません。

import { Assets, Sprite } from 'pixi.js';

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const bunny = new Sprite(texture);
bunny.anchor.set(0.5);                 // 基準点を中央に
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);

// 回転などの変形はプロパティを変えるだけ
app.ticker.add(() => { bunny.rotation += 0.02; });

座標・回転・スケールといった変形はプロパティを書き換えるだけでエンジンが描画に反映します。補間を伴う本格的なアニメーションは、後述するGSAPなどのライブラリと組み合わせます。

WebGLとGPU描画の仕組み

「WebGLは3D用では？」と思われがちですが、WebGL（元になったOpenGL）は三角形の描画とテクスチャ貼り付けを高速に行うAPIであり、2Dにも応用できます。画像表示は四角形にテクスチャを貼る処理、図形の塗りは三角形の集合で近似する処理であり、いずれもGPUで並列に処理できます。

PixiJSでは、スプライト1つがWebGL上のテクスチャ付き四辺形として扱われ、同じテクスチャを使う多数のスプライトはまとめて一度に描画されます（バッチ描画）。CPUがオブジェクトを1つずつ描く場合と比べて桁違いに速くなるのが、PixiJSが大量描画に強い理由です。開発者はGPUやシェーダーの詳細を意識せず、2Dに特化したAPIに集中できます。

クリック・タッチのイベント処理

PixiJSはマウス・タッチ・ペンを統一した「ポインタイベント」を扱えます。v8では、対象をインタラクティブにする指定が interactive = true から eventMode プロパティに変わりました。

const button = new Sprite(texture);
button.eventMode = 'static';   // 自身がヒットテスト対象になる
button.cursor = 'pointer';     // ホバー時のカーソル

button.on('pointerdown', () => {
  console.log('クリック/タップされました');
});

eventMode は 'static'（動かない対象向け）、'dynamic'（毎フレーム位置が変わる対象向け）、'passive'（自分は無視して子だけ）、'none'（非インタラクティブ）などから選びます。イベントは pointerdown / pointerup / pointertap を使えばPCとモバイルの両方に対応できます。ドラッグは専用イベントがないため、pointerdown→pointermove→pointerup を組み合わせて実装します。

多数のオブジェクトにイベントを付けるとヒットテストが重くなるため、入力が不要なコンテナは eventMode = 'none' にして探索をスキップさせると負荷を減らせます。

表示順の制御とパフォーマンス最適化

PixiJSでは、すべての表示物が app.stage をルートとするシーングラフ（親子ツリー）で管理されます。親を動かせば子もまとめて動き、親の透明度（alpha）や表示状態は子に乗算的に継承されます。

表示順（描画順）の制御

同じ親を持つ子は addChild した順に描画され、後から追加したものほど手前に表示されます。順序を動的に変えたい場合は、コンテナの sortableChildren = true を有効にし、各オブジェクトに zIndex を設定すると、値の大きい順に前面へ自動ソートされます。ゲームで「奥にいるキャラほど背面」といった奥行き表現に使えますが、子が多いと毎フレームのソートが負荷になるため必要な場面に絞ります。

大量描画の最適化

デフォルトでも十分高速ですが、スプライトが数千〜数万規模になると次の工夫が効きます。

  • スプライトシート（テクスチャアトラス）：複数画像を1枚にまとめ、テクスチャ切り替え（ドローコール）を減らす。異なるテクスチャ間の描画はバッチが分割され遅くなるため、まとめておくほど有利。
  • ParticleContainer：数万以上の小さなスプライトには、機能を絞った軽量な ParticleContainer を使う。個別の回転やアルファ変更が苦手な代わりに描画が大幅に速い。
  • カリング：画面外のオブジェクトを描画から外す。cullable = true で領域外の子を自動スキップできる（GPU負荷が高い場面で有効）。
  • キャッシュ：動かない複雑な図形は cacheAsTexture()（v7の cacheAsBitmap 相当）で一度テクスチャ化し、再描画コストを省く。

他ライブラリ・フレームワークとの連携

PixiJSは描画エンジンに徹しているため、アニメーションやUIフレームワークと組み合わせて使うのが一般的です。用途別に代表的な連携先を挙げます。

Spine（スケルタルアニメーション）

キャラクターのボーンアニメーションには、Spineの公式ランタイム @esotericsoftware/spine-pixi-v8 を使います。これはPixiJS作者とEsoteric Softwareが共同でメンテナンスするv8対応の公式ランタイムで、WebGL・WebGPU・Canvasのいずれでも描画できます。キャラクターのボーンアニメーションをブラウザで滑らかに動かす需要は高く、Spine連携はその王道です。

npm install @esotericsoftware/spine-pixi-v8

Lottie（After Effects製アニメーション）

After EffectsからJSON書き出ししたLottieアニメーションは、PixiJS単体では解釈できません。堅実なのは、lottie-web に非表示の <canvas> へ描かせ、その canvas を Texture.from(canvas) でテクスチャ化し、毎フレーム texture.update() でスプライトを更新する方法です。プラグイン（例：pixi-lottie系）もありますが、PixiJSのバージョン互換に左右されやすいため、導入前に対応バージョンを確認してください。

GSAP（トゥイーンアニメーション）

座標・スケール・アルファをイージング付きで補間したいときは、トゥイーンライブラリのGSAPが定番です。PixiJSのオブジェクトのプロパティを直接ターゲットにできます。GSAPと他ライブラリの違いはAnime.js v4とGSAPの比較が参考になります。

React（@pixi/react）

Reactアプリに組み込むなら、公式ラッパーの @pixi/react v8を使います。v8系はReact 19以降とPixiJS 8.2.6以降を前提に作り直されており、extend で使うコンポーネントを明示的に登録してJSXとして書けます（登録した分だけバンドルに含まれるため肥大化しにくい設計）。既存のReactアプリにPixiJSの描画を組み込みたいケースは多く、状態に応じた描画を宣言的に書けるのが利点です。

v8でよくあるハマりどころ

v8は変更が大きいぶん、v7の知識やコードのまま進めると詰まりやすいポイントがあります。

  • app.init() の呼び忘れ：「画面が真っ黒」「動かない」の最頻原因。await app.init() を待ってから addChild する。
  • イベント指定の変更：interactive = true や buttonMode は非推奨。eventMode と cursor に置き換える。
  • Graphics APIの変更：beginFill()/drawCircle()/endFill() は廃止。circle().fill() 形式に書き換える。
  • BaseTextureの廃止：低レベルでテクスチャを扱っていた場合、BaseTexture は TextureSource に一本化された。
  • WebGPU前提のコードを書かない：多くの環境で使えるようになったが、古い端末では引き続きWebGLにフォールバックする。自動検出に任せ、WebGPU専用機能への依存は避ける。

移行に詰まったら、まずブラウザのコンソールのエラーを確認し、公式のv8マイグレーションガイドで該当する変更点を照合するのが近道です。

よくある質問

PixiJSとは何ですか？

WebGL/WebGPUを使ってブラウザ上で2Dグラフィックスを高速に描画する、オープンソースのJavaScriptライブラリです。スプライト・図形・テキスト・フィルターなどを簡単なAPIで扱え、ゲームや広告、可視化などに使われます。3Dは扱わない2D専用エンジンです。

Pixiの使い方は？

基本は「表示オブジェクト（SpriteやGraphics）を作る→app.stage.addChild() で追加する→必要なら app.ticker で毎フレーム更新する」の3ステップです。v8ではまず await app.init() でアプリを初期化してから描画します。

PixiJSは無料で商用利用できますか？

はい。PixiJSはMITライセンスのオープンソースで、商用を含めて無償で利用できます。ライセンス表記を残せば、キャンペーンサイトやゲームなど商用プロジェクトにも組み込めます。

PixiJSとThree.jsはどう違いますか？

PixiJSは2D描画に特化し、Three.jsは3Dシーンやカメラ、ライティングを扱う3D向けです。平面的なUI・2Dゲーム・大量スプライトのアニメーションならPixiJS、立体表現ならThree.jsが向きます。どちらもWebGL/WebGPUをベースにしています。

PixiJSはReactで使えますか？

使えます。公式ラッパーの @pixi/react v8を使うと、PixiJSの描画をJSXコンポーネントとして書けます。v8系はReact 19以降とPixiJS 8.2.6以降が前提です。

関連記事

資料請求

RELATED POSTS 関連記事

一覧へ戻る