INDIE INDEX

PixiJS とは？｜ブラウザで2Dを描くオープンソースの描画ライブラリ

公開 2026-09-13更新 2026-09-13PixiJS

PixiJS は、ブラウザで2Dの絵を描くためのライブラリです。公式サイトは、これをブラウザだけで動く内容を作るためのエンジンと掲げ、画面を描く2つの仕組みのどちらでも使えると説明しています。

PixiJS のページの中身
  1. PixiJS とは何か
  2. PixiJS でなにが作れますか
  3. PixiJS の費用とライセンス
  4. PixiJS を手に入れる場所
  5. このページの情報源

PixiJS とは何か

PixiJS（ピクシージェイエス）は、ブラウザで2Dの絵を描くためのライブラリです。公式サイトは「The HTML5 Creation Engine」を掲げ、続けて「Create beautiful games, apps, and interactive digital content with the fastest 2D WebGPU/WebGL renderer.（もっとも速い2Dの WebGPU／WebGL の描画で、美しいゲーム・アプリ・対話できるデジタルの内容を作る）」と書いています。

WebGL とは

WebGL は、ブラウザの中で GPU（画像の計算を専門に行う部品）を使って画を描くための仕組みです。

WebGPU とは

WebGPU は、WebGL のあとに定められた、ブラウザから GPU を使うための新しい仕組みです。PixiJS は、この2つの両方で描けます。

公式のリポジトリは、PixiJS を「ウェブで使える2Dのライブラリのうち、もっとも速く、もっとも軽いもの」とし、あらゆる機械の上で動き、WebGL と WebGPU を使って中身の濃い対話的なグラフィックと環境をまたぐアプリケーションを作れると書いています。公式サイトの著作権表示は「© 2026 PixiJS.」で、PixiJS のチームが作っていると記されています。

PixiJS でなにが作れますか

PixiJS では、ブラウザで動く2Dの表現を組み立てられます。公式のリポジトリが機能として並べているのは次のとおりです。

区分 公式のリポジトリが挙げている機能
描画の土台 WebGL と WebGPU の2つの描画
素材 素材の読み込みの仕組み（Asset Loader）
入力 マウスと複数指のタッチへの対応
文字 自由度の高い文字の描画
図形 基本の図形と SVG の描画
画像 動的なテクスチャ
加工 マスク／フィルタ／進んだブレンドモード

公式サイトには、Docs・Guides・Tutorials・Examples・Playground・Showcase が置かれています。関連するライブラリとして、React 向けの実装、レイアウト、Spine、フィルタ、サウンド、UI が公式サイトの Ecosystem に並んでいて、一式として DevTools・AssetPack・Storybook・Text Style Editor も案内されています。

公式のリポジトリには、画面を作って画像を読み込み、中央に置いて回し続けるまでの短い作例が載っています。

PixiJS の費用とライセンス

PixiJS は無料です。公式のリポジトリは、ライセンスを MIT ライセンスとしています。

MIT ライセンスとは

MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。

項目 内容
費用 無料
ライセンス MIT ライセンス
ソースコード GitHub で公開（pixijs/pixijs）

公式サイトには Sponsor の入口があり、企画を支える形も用意されています。

PixiJS を手に入れる場所

PixiJS は npm から導入できます。公式のリポジトリは、新しく始めるときは npm create pixi.js@latest、すでにある企画に足すときは npm install pixi.js を示しています。

資料は公式サイトの Docs と Guides に、API の資料は v8.x と v7.x に分かれて置かれています。質問の場として Discussions と Discord が案内されています。

このページの情報源

PixiJS のページに出た言葉

PixiJS と同じ分類のほかのツールエンジン 全40件

エンジンの一覧を見る

関連するページ