PixiJS とは｜ブラウザで2Dを描く無料の描画ライブラリ
PixiJS は、ブラウザで2Dの絵を描くためのライブラリです。ブラウザだけで動く内容を作るためのエンジンで、画面を描く2つの仕組みのどちらでも使えます。
- 分類
- ゲームエンジン・フレームワーク
- 日本語対応
- 日本語非対応
- 費用
- 無料
- 公式サイト
- https://pixijs.com/
PixiJS の概要
PixiJS（ピクシージェイエス）は、ブラウザで2Dの絵を描くためのライブラリです。公式サイトは、HTML5 のための制作エンジンだと掲げ、続けて「もっとも速い2Dの WebGPU／WebGL の描画で、美しいゲーム・アプリ・対話できるデジタルの内容を作る」と書いています。
WebGL とは
WebGL は、ブラウザの中で GPU（画像の計算を専門に行う部品）を使って画を描くための仕組みです。
WebGPU とは
WebGPU は、WebGL のあとに定められた、ブラウザから GPU を使うための新しい仕組みです。PixiJS は、この2つの両方で描けます。
公式のリポジトリは、PixiJS を「ウェブで使える2Dのライブラリのうち、もっとも速く、もっとも軽いもの」とし、あらゆる機械の上で動き、WebGL と WebGPU を使って中身の濃い対話的なグラフィックと環境をまたぐアプリケーションを作れると書いています。公式サイトの著作権表示は「© 2026 PixiJS.」で、PixiJS のチームが作っていると記されています。
PixiJS の特徴
PixiJS が扱う次元
PixiJS が描くのは2Dです。公式サイトは PixiJS を2Dの WebGPU／WebGL の描画と掲げていて、3Dの機能は挙げていません。公式ドキュメントには、PixiJS と Three.js を混ぜて使う場合の解説が別に置かれています。
PixiJS の使用言語
書くのは JavaScript です。公式のリポジトリ（ソースコードの置き場所）は、npm から入れる形を示しています。新しく始めるときは npm create pixi.js@latest、すでにある企画に足すときは npm install pixi.js です。
PixiJS が標準で使える機能
公式ドキュメントの Architecture は、PixiJS を組み立てている主な部品を並べています。
| 部品 | 何をするか |
|---|---|
| Renderer | 場面の木を画面に描きます。WebGPU と WebGL のどちらを使うかは自動で決まります |
| Container | 描く対象の木（場面グラフ）を作る、中心の場面の部品です |
| Assets | 画像や音のファイルを非同期で読み込みます |
| Ticker | 時計にもとづいて周期的に呼び出します。複数を同時に使えます |
| Application | Loader・Ticker・Renderer を1つにまとめた補助の部品です |
| Events | ポインタによる操作に対応します（押せるようにする、重なったときの反応など） |
| Accessibility | キーボードとスクリーンリーダーに対応するための仕組みです |
| Filters | 独自のシェーダー（画面の見え方を決める小さなプログラム）を含む効果をかけます |
画面に置く部品として公式ドキュメントが節を立てているのは、Container・Sprite・NineSlice Sprite・Tiling Sprite・Graphics・Text・Mesh・Particle Container です。このほかに、イベントと操作、フィルタとブレンドモード、数学、アクセシビリティ、色、Ticker の解説があります。
公式のリポジトリが機能として並べているのは次のとおりです。
| 区分 | 機能 |
|---|---|
| 描画の土台 | WebGL と WebGPU の2つの描画 |
| 素材 | 素材の読み込みの仕組み（Asset Loader） |
| 入力 | マウスと複数指のタッチへの対応 |
| 文字 | 自由度の高い文字の描画 |
| 図形 | 基本の図形と SVG の描画 |
| 画像 | 動的なテクスチャ |
| 加工 | マスク／フィルタ／進んだブレンドモード |
PixiJS が読み込める形式
素材を扱うのは Assets の仕組みです。公式ドキュメントは、読み込みの拡張（LoadParser）が扱うものとして画像・JSON・動画を挙げています。Assets 自体の説明では、画像と音のファイルを非同期で読み込むとされています。
素材まわりの拡張は4つに分かれています。読み込みを行う LoadParser、素材の URL を読み込みに使える形へ直す ResolveParser、キャッシュの扱いを決める CacheParser、その環境がどの形式に対応しているかを見分ける DetectionParser です。
PixiJS の拡張
公式ドキュメントは、PixiJS の v8 が全体として「拡張」という考え方の上に作られていて、どの仕組みも部品として差し替えられる拡張として実装されていると書いています。ただし、第三者のライブラリを作る場合や PixiJS 自体に手を入れる場合を除けば、拡張の仕組みを直に触る必要はないとも書かれています。
拡張の種類は、素材まわりのほか、描画（WebGL・WebGPU・Canvas それぞれのシステム、描画のパイプ、その適合層）、Application の一生に関わるもの（TickerPlugin・ResizePlugin など）、環境ごとの振る舞いを見分けるもの（Environment）に分かれています。
関連するライブラリとして、React 向けの実装、レイアウト、Spine、フィルタ、サウンド、UI が公式サイトの Ecosystem に並んでいて、一式として DevTools・AssetPack・Storybook・Text Style Editor も案内されています。
PixiJS の動作環境
動くのはブラウザです。描画には WebGL と WebGPU を使い、どちらを使うかは PixiJS が自動で決めます。
環境を見分ける拡張（Environment）の説明には、Node.js・Web Workers・ブラウザといった環境に合わせて設定する用途が挙げられています。
PixiJS の費用とライセンス
PixiJS は無料です。公式のリポジトリは、ライセンスを MIT ライセンスとしています。
MIT ライセンスとは
MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | MIT ライセンス |
| ソースコード | GitHub で公開（pixijs/pixijs） |
公式サイトには Sponsor の入口があり、企画を支える形も用意されています。
PixiJS は npm から導入できます。公式のリポジトリは、新しく始めるときは npm create pixi.js@latest、すでにある企画に足すときは npm install pixi.js を示しています。
資料は公式サイトの Docs と Guides に、API の資料は v8.x と v7.x に分かれて置かれています。質問の場として Discussions と Discord が案内されています。
- PixiJS を手に入れるhttps://pixijs.com/
情報源
- PixiJS — 公式サイト（掲げている文言・資料と関連ライブラリの構成）https://pixijs.com/確認日 2026-09-13
- PixiJS — 公式リポジトリ（自らの説明・機能の一覧・導入の手順・ライセンス）https://github.com/pixijs/pixijs確認日 2026-09-13
- PixiJS — Architecture（主な部品・拡張の仕組みと種類・場面に置く部品）https://pixijs.com/8.x/guides/concepts/architecture確認日 2026-09-17