ウェブの可能性の限界を押し広げる準備をしましょう！PixiJS v8が登場し、ゲームチェンジャーとなっています。10年にわたるイノベーションの推進を祝して、最新の技術的進歩によりPixiJSを強化し、より高速で、より堅牢で、驚くほど強力なものにしました。WebGPUのシームレスな統合から、よりスムーズな開発のための最新のJavaScriptの活用まで、PixiJS v8は、驚くようなウェブ体験を簡単に作成できるようにすることを目的としています。単なるアップデートではありません。今日の2Dウェブグラフィックスの未来です。PixiJS v8に飛び込み、プロジェクトをかつてない高みに引き上げましょう。ピクセル一つ一つを大切に、ウェブをより美しい場所にしていきましょう。
🚀 ウェブグラフィックスに革命を起こす：PixiJS v8へようこそ
PixiJSがオープンソースコミュニティの一員になって10年も経ったとは信じがたいことです。その間に、デジタル環境は劇的に進化し、PixiJSも同様に進化してきました。TypeScriptへの移行のような重要なアップデートが行われ、アセットの読み込みやWebGLの統合など、エンジンの主要部分を全面的に見直しました。
そして今、これまでで最も重要なアップデートと言えるPixiJS v8を発表できることを嬉しく思います。このリリースは、これまで私たちによく役立ってきたv7の欠点を反映しただけでなく、常に改善の余地があるという認識に基づいています。時とともに、私たち全員が、より洗練させたいと思うコードの部分に出くわしました。多くの場合、最適なソリューションと洞察は、問題から一歩後退し、全体像を把握することで初めて得られます。
PixiJS v8では、コードのレイヤーを追加するのではなく、PixiJSの基盤を見直し、強化することを目指しました。
v8に対する私たちのビジョンは明確でした。
- 長期的な利用可能性：v8は、今後10年間も関連性と堅牢性を維持することを想定して設計されました。
- WebGPUによるイノベーション：最新のレンダリング技術を採用し、既存のWebGLレンダラーへのアドオンではなく、コアパラダイムとしてWebGPUをシームレスに統合しました。これにより、WebGLが段階的に廃止されても、PixiJSは最先端を維持します。
- 最新のJavaScriptの活用：JavaScriptの進歩により、開発が大幅に簡素化されました。オブジェクトの分割代入やオプションなどの機能を使用して、v8をよりクリーンで強力なものにしました。
- 過去の過失の修正：すべてのプロジェクトには教訓があります。v8では、PixiJSの特定の側面に対処し、再設計することで、複雑さを軽減し、機能性を強化しました。（テクスチャなど、過去に過剰設計されていた部分を見直しました）。
- パフォーマンスの向上：PixiJSはすでにその速度で知られています。v8では、さらに優れたパフォーマンスを実現し、v7と比べて全般的に高速化しました。
私たちはPixiJS v8を非常に誇りに思っており、皆様に改善点と新機能をご紹介できることを楽しみにしています。APIの破壊的変更がいくつかありますが、移行ガイドを用意し、可能な限りv7との互換性を確保しました。PixiJS v8で次世代の2Dレンダリングを体験しましょう！
🔗 クイックリンク
🎁 新機能?
議論すべきアップデートは数多くあり、1つの投稿では網羅できません！以下は、重要なハイライトです。これらの変更の詳細については、上記に示されたリンクに従ってください。
📈 新しいパフォーマンスバー
v8のパフォーマンスは、**両方の**レンダラーで高速化されています。つまり、v8とWebGLレンダラーを使用することで、すべての速度向上が適用されます！これは主に、必要なものだけを更新するより反応性の高いレンダーループを作成することに細心の注意を払ったためです。ここにある数値をご覧ください。
- CPU = 1フレームのレンダリングにCPUが費やす時間
- GPU = 1フレームのレンダリングにGPUが費やす時間
| バニーシチュエーション | 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テストに基づいています。
🖥️ WebGPUレンダラー
レンダリング用のWebGPUバックエンドを実装しました。これは、より優れたグラフィックスパラダイムを内部的に作成し、リッチなウェブコンテンツの未来に向けて準備を整えましたが、WebGPUはすべてのシナリオでWebGLよりもパフォーマンスが向上することを自動的に保証するわけではないことに注意することが重要です。PixiJSは多くの場合、GPUよりもCPU側の制限に多く遭遇するためです。ただし、フィルター、マスク、ブレンドモードなど、多くのバッチブレークがあるシーンでは、WebGPUはより現代的なレンダリング手法であるため、パフォーマンスが向上する可能性があります。WebGPUはまだ比較的新しいため、WebGLの開発と同様に、時間の経過とともに速度が向上することが期待されています。これは、将来の進歩のための堅実な基盤となります。
📦 新しいパッケージ構造
もう「lerna」はありません。PixiJSは現在、1つのインポートルートを持つ1つのパッケージです。`import {stuff} from ‘pixi.js’`。この変更により、アプリのコンパイル中にツリーシェイキングが大幅に向上し、インポートされない場合はバンドルサイズが削減されます。
旧バージョン
import { Sprite } from "@pixi/sprite";
import { Graphic } from "@pixi/graphics";
新バージョン
import { Sprite, Graphic } from "pixi.js";
✨ レンダラーが動作することを保証します
レンダラーを初期化する場合、このプロセスは非同期になります。これには2つの目的があります。まず、必要なレンダラーコードを特定して読み込むことで、ユーザーに読み込むものを最小限に抑えることです。ユーザーが使用しているバックエンドのみを読み込みます。ユーザーがWebGPUを使用している場合に、すべてのWebGL関連のものを読み込む必要はありません。第二に、WebGPU自体の初期化は非同期プロセスであるため、どこかにPromiseが必要になります！
import { Application, autoDetectRenderer } from "pixi.js";
const app = new Application();
(async () => {
await app.init({
// application options
});
// or
const renderer = await autoDetectRenderer({}); // WebGL or WebGPU
// do pixi things
})();
🌟 シーンのアップグレード
- レンダーグループの概念が導入され、コンテナがGPUを変換に使用できるようになりました。これにより、真の2Dハードウェアアクセラレーションカメラを実現し、3D環境でカメラが移動する方法と同様に、世界自体を移動するのではなく、パンとズームによって大きな静的な世界をナビゲートするのに最適です。このアプローチにより、パフォーマンスを大幅に向上させることができます。
const container = new Container({
isRenderGroup:true // this containers transform is now handled on the GPU!
})
- もう1つのクールな新機能は、変換やアルファと同様に、ブレンドモードと色付けが継承されるようになったことです。つまり、コンテナの色付けを簡単に変更でき、すべての子にも色付けが適用されます。ブレンドモードも同様で、次のように簡単です。
// will make all the children tinted red
container.tint = 'red'
// will make all the children have the add blend mode
container.blendMode = 'add'
アンチエイリアシングを使用したテクスチャへのレンダリングが簡素化されました。レンダリングテクスチャの作成時またはフィルターの適用時に、新しいアンチエイリアシングプロパティをtrueに設定するだけで有効にできます。これは、レンダラーの作成に使用されるプロセスと同様です。
const texture = RenderTexture.create({
width:100,
height:100,
antialias:true // easy as that
})
- また、幅広いPhotoshopのようなフィルターのサポートを追加しました。これにより、レンダリングを次のレベルに引き上げることができます！すべての定番を含んでいます。
- ColorBlend、ColorBurnBlend、ColorDodgeBlend、DarkenBlend、DifferenceBlend、DivideBlend、ExclusionBlend、HardLightBlend、HardMixBlend、LightenBlend、LinearBurnBlend、LinearDodgeBlend、LinearLightBlend、LuminosityBlend、NegationBlend、OverlayBlend、PinLightBlend、SaturationBlend、SoftLightBlend、SubtractBlend、VividLightBlend。
- これらは基本的にコアでフィルターであるため、潜在的な速度低下を回避するために、過剰に使用しないように注意することが重要です。
import `pixi.js/advanced-blend-modes` // make sure to include them in you lib! (or cherry pick one!)
myContainer.blendMode = 'color-burn` // easy!
🎨 グラフィックスのアップグレード
Graphics APIは、HTML Canvas 2DコンテキストAPIに似た、より直感的で使いやすいものになるように変更されました。たとえば、長方形の描画と塗りつぶしは次のように簡素化されました。
graphics
.rect(50, 50, 100, 100)
.fill('blue');GraphicsContextが導入され、すべてのグラフィックス操作を制御します。1つのテクスチャを多くのスプライトで使用できるのと同様に、1つのGraphicsContextを複数のGraphicsオブジェクトで使用できるようになり、効率性と柔軟性が向上しました。SVG描画のサポートが追加されました。たとえば
graphics.svg('M 100 350 q 150 -300 300 0');現在、線形グラデーションに限定されていますが、グラデーション塗りつぶしのサポートが導入され、より視覚的に魅力的なデザインが可能になりました。
新しい
GraphicsPathクラスにより、シェイプの描画と共有が可能になりました。この機能は、buildGeometryFromPath関数を使用してパスをメッシュジオメトリに変換できるため、特に複雑で詳細なグラフィックデザインに役立ちます。
const path = new GraphicsPath()
.rect(-50, -50, 100, 100)
// create geometry from the path:
const geometry = buildGeometryFromPath({
path,
});
const mesh = new Mesh({
geometry,
texture: Texture.WHITE,
});
これらのグラフィックスのアップグレードの詳細と、強化されたGraphics APIへの適応方法については、移行ガイドを参照するか、いくつかのサンプルを試してみてください。
📝 テキストのアップグレード
テキストは、パフォーマンスと使いやすさを向上させるためにアップグレードされました！また、HTMLTextをv8に標準として統合しました。
BitmapFontsは、必要に応じて動的に生成したり、事前にインストールしたりできます。フォントのグリフが必要になったときに動的に文字を追加するため、メモリを節約できます。Bitmapテキストのレイアウトは、デフォルトのテキストのレイアウトとほぼ同じになったため、ニーズに応じて2つの間を簡単に切り替えることができます。
const myText = new BitmapText({
text: 'hello im a bitmap font!',
// font will be dynamically created
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: 'red',
}
})
テキストの塗りつぶしとストロークは、グラフィックスと同じ塗りつぶしとストロークに従うようになりました。つまり、グラフィックスを塗りつぶしてストロークできる楽しい方法すべてをテキストに適用できるようになりました。
const myText = new Text({
text: 'hello im some fancy text',
// font will be dynamically created!
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: { texture, color:'red'} // same as graphics api fills
stroke: { width:3, color:'blue' } // same as graphics api strokes
}
})
🤝 今後の取り組み：参加しましょう！
PixiJS v8 が世界にデビューした今、皆様からのフィードバックと貢献によって成長していくことを楽しみにしています。完璧ではないことは承知していますが、GitHubとDiscordで発生する問題への迅速な対応に尽力し、皆様からのご意見を大切に、PixiJSをさらに改善していきます。
v8 の限界に挑戦してくださった初期導入者の方々（こちらの皆様）へ、そして献身的に貢献してくださった皆様、チームメンバーの皆様へ心から感謝申し上げます。皆様の努力と洞察は、私たちにとってかけがえのないものです。皆様がいなければ、ここまで到達することはできませんでした！
このリリースを実現するためにサポートしてくださった PlayCo にも改めて感謝いたします！
これからも共に革新を続け、ウェブグラフィックスの可能性を広げていきましょう。皆様の関与が PixiJS の進化の鍵であり、皆様のお力添えによってどこまで到達できるのか、とても楽しみにしています。
📲 最新情報はこちら
最新情報を受け取るには、Doormat23とPixiJS をソーシャルメディアでフォローしてください。近日中にさらにエキサイティングなアップデートを発表する予定です。あるいは、Discordで活気あふれるコミュニティに参加して、直接的な交流やリアルタイムのチャットをお楽しみください。