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

WebGLで画像を表示する際の注意点(WebGLコンテキストの最大数) プログラミング

いや~、参りました。
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
  • webgl

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

2dCanvasRenderingContext2Dオブジェクト
webglWebGLRenderingContextオブジェクト

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

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

ブラウザ毎にWebGLコンテキストの最大数は異なる

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

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

  • Google Chrome 90.0.4430.93
  • Microsoft Edge 90.0.818.49 
  • Firefox 88.0

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

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

ブラウザ最大数
Chrome15
Edge15
Firefox

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

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コンテキストが最大数を超えた場合について説明しました。

タイトルとURLをコピーしました