いや~、参りました。
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
それぞれの値により、取得できるコンテキストが異なります。
2d | CanvasRenderingContext2Dオブジェクト |
webgl | WebGLRenderingContextオブジェクト |
そして、今回は「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を捨てましたからね。
では、ブラウザ毎の最大数を確認しましょう。
ブラウザ | 最大数 |
Chrome | 15 |
Edge | 15 |
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コンテキストが最大数を超えた場合について説明しました。