Screenshots
Overview
概要
PixiJSはWebGL/WebGPUを抽象化した高速な2Dレンダラです。本サイトは「PixiJSで何ができるのか」を一目で伝えるショーケースとして、数十万スプライトの描画、自作GLSLシェーダ、フィルタ合成、RenderTextureの残像、メッシュ変形までを8つのデモにまとめました。外部画像アセットには一切依存せず、テクスチャもすべてコードで生成しています。
How to use
遊び方・使い方
上部のタブ、または下部のギャラリーからデモを選びます。各デモはキャンバス上でポインタ（マウス/タッチ）に反応し、右側のコントロールパネルでパラメータをリアルタイムに変更できます。キーボードの左右キーで前後のデモ、数字キー1〜8で直接切り替え、URLの#particles等のハッシュで特定デモを直接開けます。キャンバス左上にFPSと要素数のライブ統計を表示します。
Tech stack
技術スタック
PixiJS v8Next.js 16React 19TypeScriptGLSL
Next.js 16のApp Routerで構築。PixiJSはWebGL/windowに依存するためサーバー側では読み込まず、メタ情報のみSSRし、レンダラはクライアントの動的importで初期化しています。各デモはApplicationのライフサイクルをラップした共通のStageコンポーネントが管理します。
Highlights
工夫した点
- 8デモ（パーティクル/自作GLSLプラズマ/バニーマーク/フィルタ合成/RenderTexture残像/メッシュ変形/パララックス/ハーモノグラフ）で、PixiJSの強みを機能別に提示
- 外部アセットゼロ。スプライト・ノイズ・グリッド等のテクスチャはすべてCanvas/Graphicsからコード生成
- デモはmeta（pixi非依存）とcreate関数を分離した拡張しやすい基盤で実装し、ディープリンク・キーボード操作・OGP画像・端末性能に応じた解像度調整まで作り込み
To improve
改善したい点
- モバイルでコントロールパネルをドロワー化すると、キャンバスをより広く使える
- 低FPSが続いた際のトースト警告や、初期パラメータの一段踏み込んだ自動調整余地
- WebGPUバックエンドへの切り替えトグルは未対応
What's next
今後の展望
- Bloom発光やテキストの粒子化など、さらに映えるデモの追加
- 各デモのソースコード表示トグルや、スクショ・GIF書き出し
- サウンド連動（WebAudio）による視聴覚デモ