# グラフィックスコンテキストが消えることを計画する

> 失われた WebGL コンテキストを検出し、ゲームの状態を GPU オブジェクトとは別に保存し、意図的なレンダラーの回復パスをテストします。

- URL: https://oneshotgems.ai/ja/topics/webgl-context-loss
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

WebGL コンテキストは、ブラウザーまたはシステムがグラフィックス リソースを再利用したり、ドライバーが変更されたり、GPU の作業が停止したりすると失われる可能性があります。かつてテクスチャ、バッファ、プログラムを参照していた GPU ハンドルは、失われると安全に使用できなくなります。堅牢なゲームは、ゲームの正規の状態とプレーヤーの状態をこれらのリソースの外部に保持するため、ゲームを完全に再起動することなくレンダラーを再構築できます。コンテキストの損失は、意図的に実行する価値のあるエッジケースであり、テストせずに放置できるイベントではありません。

## レンダリングを停止し、回復可能な状態を表示する

キャンバス上で webglcontextlost をリッスンし、復元をサポートする場合はデフォルトの動作を防止し、コンテキストが使用できない間は描画呼び出しの発行を停止します。回復に時間がかかる可能性がある場合は、プレイヤーに抑制的なメッセージを表示しますが、現在のゲーム状態を保持し、これを新しいレベルまたは失われたセーブとして扱うことは避けてください。

ソース イメージ、シェーダー テキスト、バッファー データなどのリソースの説明を、WebGL ハンドルとは独立して利用できるようにします。復元時には、これらの記述から GPU オブジェクトの新しいセットを作成し、アトリビュートとユニフォームを再接続し、ビューポートとレンダリング状態を復元し、既知の小さなシーンが正しく描画された後にのみ再開します。

## 実際のインタラクション中の損失をシミュレートする

開発中に WEBGL_lose_context 拡張機能を使用して、シーンのロード後に損失をトリガーします。テクスチャの追加中、プレーヤーの移動中、および表示されているタブに戻った後にコンテキストが失われることをテストします。復元パスが必要なすべてのリソースを再作成し、保留中の非同期ロードが安全に再適用されるか破棄されることを確認します。

MDN では、コンテキスト損失イベントとテスト用拡張機能について文書化しています。また、失敗したグラフィックス操作を通常のシェーダーまたはアセット エラーとして解釈する前に、isContextLost() を確認してください。開発診断で何が起こったかを記録して、回復バグと通常のレンダリングの失敗を区別できるようにします。

## よくある質問

**コンテキストを復元するとテクスチャが元に戻りますか?** いいえ。新しいコンテキストを新しい GPU リソースが必要なものとして扱います。ソース データまたはそれを再ロードする方法を保存し、コンテキストが復元されたときにテクスチャやその他のオブジェクトを再作成します。

**実際の障害を待たずにコンテキスト損失をテストするにはどうすればよいでしょうか?** MDN の webglcontextlost ドキュメントでは、意図的に損失をトリガーして回復パスを実行できる WEBGL_lose_context 拡張機能を示しています。

## 気になることを、もっと

- [ブラウザ ゲームのメモリ リークを追跡する](https://oneshotgems.ai/ja/topics/game-memory-leaks): 反復可能なプレイとクリーンアップ チェックを使用して、時間の経過とともに蓄積される保持されたゲーム シーン、リスナー、タイマー、アセットを見つけます。
- [キャンバス レンダリングのボトルネックを見つける](https://oneshotgems.ai/ja/topics/canvas-game-performance): 繰り返し可能なシーンを含む 2D キャンバス ゲームをプロファイリングし、フレームが費やされる場所を測定した後でのみ、コストのかかる描画作業を削減します。

## 関連情報

- [MDN: webglcontextlost イベント](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event)
- [MDN: isContextLost()](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/isContextLost)

---
正規ページ: https://oneshotgems.ai/ja/topics/webgl-context-loss