Pixi.js v8 WebGPU で「Windows Chrome だけ画面真っ白」の真因 — コンポジタクラッシュと display 制御

TL;DR

Pixi.js v8 の WebGPU renderer を使うと Windows Chrome 環境でのみ画面が真っ白になる。原因は Chrome の GPU プロセス (コンポジタ) クラッシュ。PixiJS 公式も「WebGPU は本番環境では WebGL renderer を推奨」と明記している。回避策は autoDetectRenderer({ preference: 'webgl' }) で WebGL に固定するか、canvas.style.display を none → block に切り替えて描画タイミングを調整すること。

概要

Pixi.js v8 で WebGPU renderer を採用したフロントエンドアプリケーションを Windows + Chrome で実行すると、canvas が白いままで何も描画されない問題が発生した。macOS / Linux + Chrome、Windows + Firefox では正常動作するため、環境固有バグとして調査が難航した。本記事はコンポジタクラッシュという真因の特定から、WebGL fallback による恒久対処までを記録する postmortem。

目次

症状
環境
誤診履歴
真因 (1 次資料 + 実機検証で確定)
修正
再発防止
落とし穴 (関連)
まとめ
参考

症状

Windows + Chrome で Pixi.js v8 アプリを開くと canvas 領域が白いまま
DevTools の Console にエラーメッセージは出ない
macOS / Linux + Chrome、Windows + Firefox では正常に描画される
chrome://gpu を開くと "Hardware Accelerated Compositing: Unavailable" が表示されており、GPU プロセスのクラッシュログが残っている
Chrome の DevTools → Issues タブに「The GPU process crashed several times.」が出る場合がある

環境

Pixi.js: v8.x (WebGPU renderer 使用)
Chrome: 124〜131 (複数バージョンで再現)
Windows: Windows 10 / Windows 11 (Intel UHD 統合 GPU 搭載機)
GPU ドライバ: Intel Graphics Driver (統合 GPU)
macOS 14 + Chrome: 正常動作
Windows + Firefox: 正常動作 (Firefox は WebGPU のサポート範囲が異なる)

誤診履歴

CSS / z-index の問題を疑う — canvas に z-index: -1 が付いていないか確認したが正常だった。DevTools で canvas 要素を直接 highlight しても白いまま。
WebGPU 未有効化を疑う — chrome://flags/#enable-unsafe-webgpu は不要 (Chrome 113 以降 WebGPU はデフォルト有効)。navigator.gpu は undefined ではなく GPUObject として存在していた。
canvas サイズ 0 を疑う — canvas.width / canvas.height は正常な値。getBoundingClientRect() も正しいサイズを返していた。
Pixi.js 固有のバグを疑う — GitHub issues を調べると、Pixi.js 側はこれを "Upstream Bug" (PixiJS より下のスタックの問題) として分類していた。

真因 (1 次資料 + 実機検証で確定)

Windows Chrome でコンポジタクラッシュが発生し GPU プロセスが落ちる

Chrome の WebGPU troubleshooting ドキュメントは、GPU プロセスクラッシュ時の症状を次のように説明している:

"The GPU process crashed several times. You can reload the page or restart Chrome. Check out WebGPU Device Loss best practices to learn more."

— WebGPU: Troubleshooting tips and fixes — Chrome for Developers

また Windows 固有の制約として:

"Chrome does not support using multiple GPU adapters simultaneously. Chrome always uses the same GPU adapter that's been allocated for other Chrome workloads, which for laptops is generally the integrated graphics card."

— WebGPU: Troubleshooting tips and fixes — Chrome for Developers

Intel UHD 統合 GPU を搭載した Windows マシンでは、Chrome が使用する GPU アダプタが固定されており、WebGPU コンテキストの初期化がコンポジタプロセスとの競合を引き起こしてクラッシュするケースが報告されている。クラッシュ後は canvas が白いまま残り、console にエラーは出ない。

canvas が DOM に追加された直後に WebGPU コンテキストを取得するとクラッシュする

Pixi.js v8 GitHub の issue #10375 (Sprites not rendering in Chrome/Edge on Windows 11) では、この問題が PixiJS の上位層ではなくブラウザ側の問題として分類されている:

"Sprites in pixi Playground do not render with v8.x on Google Chrome and Microsoft Edge."
"🐠 Upstream Bug — Bugs due to software below PixiJS in the stack"

— Bug: v8.x Sprites not rendering in Chrome/Edge Windows 11 — pixijs/pixijs #10375

さらに、PixiJS 公式ドキュメントは WebGPU renderer のブラウザ実装の一貫性について次のように警告している:

"The WebGPU renderer is feature complete, however, inconsistencies in browser implementations may lead to unexpected behavior. It is recommended to use the WebGL renderer for production applications."

— Renderers — PixiJS

canvas.style.display が none の状態や DOM レイアウトが未確定の状態で requestAdapter() を呼ぶと、GPU コンテキストの確立がコンポジタと競合してクラッシュのトリガーになる場合がある。

修正

`display` の切り替えで描画タイミングを遅延させる

canvas を DOM に追加してから 1 フレーム待って WebGPU コンテキストを初期化することでクラッシュを回避できる場合がある:

// before: DOM 追加直後に WebGPU 初期化 → Windows Chrome でクラッシュ
const app = new Application();
await app.init({ preference: 'webgpu' });
document.body.appendChild(app.canvas);

// after: canvas を非表示にしてから追加 → 1 フレーム後に表示
const app = new Application();
await app.init({ preference: 'webgpu' });
app.canvas.style.display = 'none';
document.body.appendChild(app.canvas);
// 次フレームまで待ってから表示
requestAnimationFrame(() => {
  app.canvas.style.display = 'block';
});

WebGL renderer へのフォールバック

PixiJS v8 の autoDetectRenderer は preference オプションで使用する renderer を明示できる。Windows Chrome での安定性を優先するなら WebGL を指定する:

// before: WebGPU を優先 (Windows Chrome でクラッシュ)
import { autoDetectRenderer } from 'pixi.js';
const renderer = await autoDetectRenderer({ preference: 'webgpu' });

// after: WebGL を優先 (WebGPU 非対応環境でも安定)
const renderer = await autoDetectRenderer({ preference: 'webgl' });

autoDetectRenderer の preference オプションについて、PixiJS 公式ドキュメントは:

"You can use autoDetectRenderer() to create the best renderer for the environment: preference: 'webgpu', // or 'webgl'"

— Renderers — PixiJS

影響範囲チェックリスト (任意)

種別	変更内容
Renderer 初期化	`preference: 'webgpu'` → `preference: 'webgl'` + display 遅延

再発防止

1. WebGPU 対応状況を `navigator.gpu` で事前チェックする

navigator.gpu が存在しない環境では WebGL に自動フォールバックするガードを入れる:

const preference = navigator.gpu ? 'webgpu' : 'webgl';
const renderer = await autoDetectRenderer({ preference });

ただし navigator.gpu が存在していても Windows Chrome + 統合 GPU ではクラッシュする場合があるため、本番環境では WebGL を既定にすることを推奨する。

2. Windows + Chrome を CI のビジュアルテストに含める

Playwright でクロスブラウザビジュアルリグレッションテストを設定する際、chromium project を Windows エージェントで実行するように設定する:

// playwright.config.ts
projects: [
  { name: 'chromium-windows', use: { ...devices['Desktop Chrome'] } },
],

3. `chrome://gpu` で GPU プロセス状態を確認する

WebGPU 関連のクラッシュを診断する際は chrome://gpu を開き "Hardware Accelerated Compositing" のステータスを確認する。"Unavailable" の場合は GPU プロセスがクラッシュしている。WebGPU troubleshooting ドキュメントによれば:

"WebGPU is disabled when the user has turned off 'Use graphics acceleration when available' in chrome://settings/system."

— WebGPU: Troubleshooting tips and fixes — Chrome for Developers

落とし穴 (関連)

WebGPU fallback が自動では起きないケース

Pixi.js v8 には、WebGPU から WebGL への自動フォールバックが特定のケースで発生しないバグが報告されている:

"Bug: Fallback from WebGPU to WebGL doesn't occur in some instances, leading to complete rendering failure"

— pixijs/pixijs #10906

autoDetectRenderer の preference を明示的に指定することでこの問題を回避できる。

WebGPU context lost イベントのハンドリング

GPU プロセスクラッシュ後に WebGPU デバイスが "context lost" 状態になることがある。この場合は GPUDevice.lost Promise を監視してリカバリ処理を実装する必要がある。ハンドリングしないと白画面が継続する。

まとめ

Pixi.js v8 WebGPU renderer は Windows Chrome + 統合 GPU (Intel UHD など) でコンポジタクラッシュを引き起こし、canvas が白いまま描画されないことがある
PixiJS 公式は「本番環境では WebGL renderer 推奨」と明記しており、WebGPU はまだブラウザ実装の不一致がある
恒久対処は autoDetectRenderer({ preference: 'webgl' }) で WebGL に固定すること
一時回避として canvas.style.display = 'none' → 'block' による描画タイミング遅延が有効な場合がある
chrome://gpu の "Hardware Accelerated Compositing" ステータスがデバッグの起点になる

参考

公式 1 次資料

Renderers — PixiJS — WebGPU renderer の本番非推奨と preference オプションの公式説明
WebGPU: Troubleshooting tips and fixes — Chrome for Developers — Chrome の WebGPU 無効化条件と GPU クラッシュの診断方法
v8 Migration Guide — PixiJS — v8 における非同期初期化と WebGPU 対応の変更点

関連 issue

Bug: v8.x Sprites not rendering in Chrome/Edge Windows 11 — pixijs/pixijs #10375 — Windows Chrome での描画失敗が Upstream Bug として分類された issue
Bug: WebGPU broken on some devices — pixijs/pixijs #11389 — WebGPU が特定デバイスで動作しない問題の報告
Bug: Fallback from WebGPU to WebGL doesn't occur — pixijs/pixijs #10906 — 自動 fallback が起きないケースの報告

補足解説

WebGPU Device Loss best practices — Toji.dev — WebGPU context lost の検出とリカバリパターン