WebGLが使用できるかのチェック

WebGLのどのバージョンが使用できるかをチェックするHTMLを書いてみました。

WebGL 1.0のチェック

WebGL 2.0のチェック

最近のブラウザであればcanvasタグには対応しているでしょう。canvasタグはWebGLなどが描画する場所でこれがないと描画することができません。
これがあって、レンダリングコンテキストを取得できればWebGLが使えるということになります。

WebGL 2.0は2016年の11月にChromeで有効になり、2017年1月末にFirefoxで利用できるようになりました。ここらへんはKhronos GroupのWebGL関連のニュースで載っていました。かなり新しめの技術になりますが、もう1年も経つので1.0から2.0向けのものを作っても大丈夫になっていくはずです。

ブラウザとGPU(グラフィックドライバ)が揃ってWebGLが動く条件が整うようなので、チェックしてみないと動くかはわかりにくいようです。

WebGL 2.0に対応しているPCでもスクリプトの書き方によってはレンダリングコンテキストが取得できないことがありました。

var gl1 = canvas.getContext(‘webgl’);

var gl2 = canvas.getContext(‘webgl2’);

こんな風に連続で取得するように書いたら、gl1だけ取得でき、gl2はnullになりました。gl1とgl2の行を入れ替えると、逆にgl2だけ取得でき、gl1はnullになりました。違う種類のレンダリングコンテキストが取得できないとか、メモリが足らないとかの制限があるのかも知れませんね。