PixiJS v8のベータ版リリースにより、2Dウェブグラフィックスの未来を垣間見ることができることに興奮しています。まだ最終版ではありませんが、このベータ版には、パフォーマンスの向上と新機能が満載されており、すぐにでも使い始めていただきたいと思っています！
10年—そうです、10年—にわたって、PixiJSエンジンに大きな変更を加えてきました。しかし、この新しいリリースでの進歩は、これまでに実現した中でも最も重要なものの1つです！
コードベースとレンダリングパイプラインをv8で再設計するにあたって、2つの推進要因がありました。
1. 😍 WebGPUの採用
新顔のWebGPUは、前身のWebGLよりも大幅なパフォーマンス向上を実現します。Web上の計算とグラフィックスを新たな時代へと導き、より効率的で堅牢なAPIを提供します。まもなく、Web上のほとんどのGPU対応コンテンツをレンダリングするための主要な方法となるでしょう。
この変化は、PixiJSの最初のリリースを彷彿とさせます。当時、WebGLは新しく、一部のデスクトップブラウザでのみ利用可能でしたが、Canvasは広く普及していました。PixiJSの際立った特徴は、最初にWebGLでレンダリングを試み、Plan BとしてCanvasにフォールバックできる点でした。このアプローチにより、WebGLが普及するにつれて、PixiJSコンテンツはすぐに恩恵を受けることができました。現在では、WebGLはブラウザの95％で利用可能になっています。
WebGPUでも歴史が繰り返されています。現在、一部のデスクトップブラウザと、およそ市場の27％でしかサポートされていません。しかし、それが普遍的にサポートされるのは時間の問題です。PixiJSは同じフォールバック戦略を実行することを目指しており、コードを書き直す必要なく、常に利用可能な最良のテクノロジーを活用できるようにします。これがまさにバージョン8で実現したことであり、今後10年間も私たちが作るすべてのものを将来にわたって対応させます:D
2. 🚀 パフォーマンスの向上
PixiJSは、常に高速で高性能なグラフィックスを代名詞としてきました。v8では、静的および動的レンダリングの両方を最適化するためにアーキテクチャを見直しました。v7は高速ですが、やや「ナイーブ」なレンダラーとして動作します。
v7のアプローチ
- シーングラフをトラバースして、すべての変換が正しいことを確認します。
- シーングラフを2回目にトラバースして、次の処理を行います。
- レンダリングするためのバッチを作成します。
- データをGPUにアップロードします。
- バッチを画面に描画します。
v8のアプローチ
- 変更されたものだけの変換を更新します。
- シーングラフをトラバースして、一連の命令を構築します。
- すべてのシーンデータを一度にGPUにアップロードします。
- 命令に基づいてレンダリングを実行します。
このループには、パフォーマンスを向上させる3つの重要な変更点があります。
- まず、変更された要素のみを更新します。何も移動していない場合は、コードは実行されず、計算オーバーヘッドが最適化されます。
- 次に、シーングラフが後続のフレームで変更されない場合、既存のレンダリング命令を再利用します。これにより、各フレームでこれらの命令を再構築するオーバーヘッドが回避されます。
- 3点目として、シーン内の要素の位置が変化しない場合、データアップロードステップ（ステップ3）は完全にスキップされ、帯域幅を節約し、計算作業をさらに削減します。
これらの改善の純粋な効果は何ですか？さまざまなユースケース全体で、相当なパフォーマンスの向上が見られます。
**CPU** = CPUが1フレームのレンダリングに費やす時間 **GPU** = GPUが1フレームのレンダリングに費やす時間
| ウサギの状況 | V7 CPU | V8 CPU | CPU差 | V7 GPU | V8 GPU | GPU差 |
|---|---|---|---|---|---|---|
| 10万個のスプライトすべてが移動 | 約50ms | 約15ms | 233% | 約9ms | 約2ms | 350% |
| 10万個のスプライトが移動しない | 約21ms | 約0.12ms | 17417% | 約9ms | 約0.5ms | 1700% |
| 10万個のスプライト（シーン構造が変化する） | 約50ms | 約24ms | 108% | 約9ms | 約2ms | 350% |
これらのベンチマーク数値は、自分で試すことができるこのBunnymarkテストに基づいています！
ぜひお試しください。URLのパラメータを調整してウサギの数を変更できます。皆さんがどのような数値を得るのか興味があります！
何より素晴らしいのは、これらの改善がWebGPUとWebGLレンダラーの両方に適用されることです。PixiJSのすべての素晴らしい機能と同様に、これはすべて自動的に行われます:D
でも、まだあります！
このオーバーホールの2つの主要な推進要因はパフォーマンスと使いやすさでしたが、そこで止まりませんでした。この機会を利用して、APIを強化し、エンジンに数多くの新機能を追加しました—1つの投稿では網羅しきれません！
今後のブログ投稿で、これらの追加の改善とAPIの改良について詳しく説明し、さらに素晴らしいプロジェクトを作成できるようにします。新機能の包括的な概要については、リリースノートをご覧ください。
重要な注意点として、PixiJS v8は、内部的に大幅なアップデートが行われたにもかかわらず、使い慣れたAPIの大部分を保持しています。私たちの変更は、PixiJSをより堅牢でユーザーフレンドリーにすることを目的としています。変更に遭遇した場合は、v7の方法論は引き続き機能することをご安心ください。最適な方法へのガイドとして非推奨警告が表示されるだけです。
皆さんに託します！
リリース候補に向けて進むにつれて、今こそv8に飛び込んで探求する絶好の機会です。この段階での皆様からのフィードバックは、エンジンの微調整に非常に役立ちます。良い点、悪い点、そして醜い点を問わず、ご意見をお聞かせいただき、バグを報告し、コードに貢献していただくことをお願いいたします。共に、PixiJSをかつてない高みへと引き上げましょう。
👇 今すぐ試してみましょう！ GitHubでPixiJS v8のコードベースを探索する
インストール手順
npm経由で、次のようにベータ版をインストールできます。
npm install pixi.js@prerelease-v8
その後、新しいautoDetectRenderer関数を使用して、最適なレンダラーを作成できます。
import { autoDetectRenderer } from "pixi.js";
async function init()
{
const renderer = await autoDetectRenderer({
// any settings
}); // will return a WebGL or WebGPU renderer
}
今日からPixiJS v8ベータ版を試してみて、2Dウェブグラフィックスの未来を共に形作っていきましょう！🎉
連絡を取り合いましょう！
最新情報を入手するには、Doormat23とPixiJSをソーシャルメディアでフォローしてください。すぐにさらにエキサイティングなアップデートを発表します。あるいは、Discordで活気のあるコミュニティに参加して、直接交流し、リアルタイムで会話することができます。