WebGLで画像を表示する際の注意点（WebGLコンテキストの最大数）

いや～、参りました。
WebGLで画像を表示しようとしたら、次の画像が表示されました。

結論から言うと、WebGLコンテキスト数の制限にひかかりました。
WebGLコンテキスト数が多くなると、アウトのようです。

本記事の内容

それでは、上記に沿って解説していきます。

WebGLコンテキストとは？

WebGLコンテキストとは、WebGLのコンテンツを描画するインスタンスのことです。
言葉で説明より、コードをもとに説明します。

WebGL 入門
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

上記ページより、WebGLコンテキストを作成するコードを抜粋。

  const canvas = document.querySelector("#glCanvas");
  // GL コンテキストを初期化する
  const gl = canvas.getContext("webgl");

CamvasオブジェクトのgetContext()により、WebGLコンテキストを取得しています。

getContext()の構文

context = canvas.getContext( contextId )

contextIdには、以下の二つを指定できます。

それぞれの値により、取得できるコンテキストが異なります。

2d	CanvasRenderingContext2Dオブジェクト
webgl	WebGLRenderingContextオブジェクト

そして、今回は「webgl」を指定して作成したコンテキストに関する話です。
正確には、WebGLコンテキストの最大数に関する話と言えます。

以上、WebGLコンテキストについて説明しました。
次は、ブラウザ毎に異なるWebGLコンテキストの最大数を確認します。

WebGLコンテキストの最大数は、ブラウザ毎に異なります。

検証したブラウザは、以下の3つです。
現時点（2021年4月末）では、すべて最新バージョンになります。

検証PCがWindowsであるので、上記のブラウザになります。
IEに関しては、もう検証する価値がないと判断しています。
開発元のマイクロソフトが、IEを捨てましたからね。

では、ブラウザ毎の最大数を確認しましょう。

ちなみに、すべてデフォルト設定のままです。
設定で増やしたり、減らしたりしたことはありません。

Edgeは、Chromeをベースに開発されています。
そのため、Chromeと同じ最大数であることは納得です。

FireFoxは、限界を確認できませんでした。
100個までは、確認できました。

なお、EdgeでWebGLコンテキストを表示できない場合は次の画像が表示されます。

この画像は、Chromeの場合（記事冒頭の画像）とは異なるんですね。
Chromeの場合は、「もう無理～、助けて！！」という印象を受けます。
Edgeの場合は、無表情なのかやる気がないのかという感じです。

以上、ブラウザ毎にWebGLコンテキストの最大数が異なることを説明しました。
次は、最大数を超えた場合の状況を説明します。

Chrome DevToolsに以下の警告が出ます。

WARNING: Too many active WebGL contexts. Oldest context will be lost.

「Oldest context will be lost.」
このメッセージによると、古いWebGLコンテキストが失われる仕様のようです。

最終的には、最大で15個のWebGLコンテキストが有効ということになります。

例えば、20個のWebGコンテキストを作成しようとします。
この場合、最新のWebGコンテキスト15個だけが有効になっています。

古い（最初の方に作成された）5個は、無効化されるということになります。
つまり、以下の画像が最初の方に5個存在しているということです。

以上、 WebGLコンテキストが最大数を超えた場合について説明しました。