研究

踏み込んだ技術記事です。ブラウザの中で物事がどう動いているのかを実測し、再現できる手法とデータとともにまとめています。ハウツーや比較はブログをご覧ください。

自分をだまさずに 2D レンダラーをベンチマークする
2026-10-20 · Benchmarking
2dbench がレンダラーのベンチマークを公正に保つ方法を紹介します。共通のシミュレーション、ピクセル一致ゲート、GPU 完了までの計測、ばらつき調査から決めたラウンドの交互実行、ソフトウェア GPU の拒否、そして私たち自身の利益相反への向き合い方。あなた自身のベンチマークに活かせるポイントも添えて。

スプライトレンダラーでレイキャスティング：Wolfenstein 風のストレステスト
2026-10-20 · Spryte
2dbench がレトロな一人称視点のレイキャスターをすべて 2D テクスチャのスライスとして描画する方法、それがスプライトレンダラーにとって厳しいストレステストになる理由、そしてすべてのクアッドがアトラスの別々の場所から来るときに spryte と PixiJS で何が違うのかを紹介します。

spryte の内側：そのレンダラーは PixiJS とどう違うのか
2026-10-20 · Spryte
spryte のアーキテクチャを PixiJS 8 と並べて技術的にたどります。イミディエイトモード対シーングラフ、GPU インスタンシング対 CPU で組み立てる頂点、8 バイトの一括コピー、そして WebGL2 とピクセル単位で一致する Canvas 2D フォールバック。

最も人気のある 2D レンダラーより 2〜4 倍速いレンダラーを作るまで
2026-10-19 · Spryte
debuff のスタンドアロン 2D レンダラー spryte の裏側にある研究です。プロファイリングで何がわかったのか、なぜ一括 API と 8 バイトのインスタンス形式が突破口になったのか、出力をピクセル単位でどう確かめたのか、そして敵対的レビューで結果をどう検証したのかを紹介します。

ゲーム開発者のための Long Animation Frames：そのフレームを遅くしたのはどのコード？
2026-10-19 · Myaku
Chrome の Long Animation Frames API は、遅いフレームの裏にあるスクリプトを教えてくれます。エントリーに何が含まれているか、ゲームでの二つの落とし穴（50 ms のしきい値と、ゲームループが一つのコールバックであること）、そして Myaku がそれをどう判定に変えるのかを、実際の Phaser ゲームで計測しながら紹介します。