WebGL 2.0 の有効化
メジャーブラウザの対応状況
WebGL 2.0 の対応状況は、本記事の執筆時点（2016 年 11 月）ではまだまだこれからというのが現状です。
当サイトでは Google Chrome を実行環境に想定していますが、現時点での最新版 Chrome(ver.54) では、既定の状態では WebGL 2.0 は利用できません。しかし、Chrome の元となっている Chromium では WebGL 2.0 がデフォルトで有効化されることがアナウンスされましたので、遠からず、Chrome にも WebGL 2.0 のデフォルト有効化がくるでしょう。
現時点で Google Chrome を使って WebGL 2.0 の開発、および実行を行うためには、フラグを有効化してやる必要があります。また、Firefox などのその他のモダンブラウザについても、順次対応が進められている最中です。
WebGL 2.0 デフォルトで有効化（2017 年 1 月現在）
2017 年 1 月、ついに WebGL 2.0 が Chrome と Firefox で有効化されました。
両者のいずれかのブラウザを利用している場合であれば、そのまま特に設定などを変更すること無く、WebGL 2.0 を利用したアプリケーションを動作させることができます。
めでたい。
WebGL 2.0 有効化手順（2016 年 11 月現在）
Google Chrome
設定から WebGL 2.0 を有効化するフラグを立てます。まず chrome://flags/ にアクセスし、サイト内検索などを使って WebGL 2.0 の有効化の項目を探し「WebGL 2.0 プロトタイプ」を有効化します。最後に Chrome をいったん終了し再起動します。
Firefox
基本的には Chrome と似ています。Firefox の場合は about:config から、キーワード webgl などでフラグを検索します。一覧で表示された検索結果の中から webgl.enable-prototype-webgl2 を有効化します。Chrome と同様に再起動すると、WebGL 2.0 に対応した状態で起動します。
その他のブラウザを含む対応状況： Can I use... WebGL 2.0
WebGL 2.0 を利用できるか確認する
WebGL はそのバージョンに関わりなく、GPU やそれを管理するドライバに影響を受けます。ですから、ブラウザが仮に WebGL 2.0 を実行できる状態になっていたとしても、ハードウェアの制約によりその実行が制限されたり、あるいは結果に変化が生まれたりする場合があります。
いわゆる一般的な JavaScript でさえ、ブラウザによって挙動が違ったりするのは日常茶飯事ですが、WebGL の場合はそこからさらに GPU やドライバとの相性という点についても留意しなければなりません。
これらのことを踏まえた上で、まず WebGL 2.0 が実行できるのかどうかを確認するには WebGL2RenderingContext が正しく初期化できるかどうかを調べます。
WebGL2RenderingContext の初期化
var gl = canvas.getContext('webgl2');
if(!gl){
console.log('webgl2 unsupported');
return;
}WebGL 1.0 の場合と同様に、canvas エレメントの getContext メソッドを使って WebGL コンテキストの初期化を試みます。従来は 'webgl' という文字列を使って初期化を行っていたかと思いますが、これを 'webgl2' というように変更しています。
このように getContext メソッドを使った初期化が正しく行えれば、ひとまず WebGL 2.0 が有効になった状態だと言えます。初期化自体は非常に簡単ですね。
まとめ
WebGL 2.0 はまだまだこれからという状況であり、なかなか気軽に使っていくには難しい部分も多いのが現状です。しかし、フラグを立てるだけで普通に使えると考えれば、むしろ低レイヤーな API にしては意外に普通に動くなあという印象です。
WebGL 1.0 のとき（というか今現在）も、やはりモバイル端末などで普通に動くようにならないと実案件に使っていくのは難しいという見方が多かったですが、WebGL 2.0 がまともに使えるようになるのはだいぶ先のことだと考えたほうがいいでしょう。
とは言え、WebGL 2.0 になって追加された機能のうちのいくつかは、即効性もあるかなり強力なものです。ハッキリ言って、WebGL と本気で向き合っていくのであれば、2.0 は避けては通れない存在として考えたほうがいいですし、今のうちからしっかりと基礎を固めておくことをおすすめします。
WebGL 2.0 の場合は GLSL のバージョンも上がりますし、若干ですが、実装に対する作法が変わってきます。まずは「とりあえず動かせる環境」から、しっかりと準備しておきましょう。
WebGL 2.0 を初期化するだけのサンプルですが、以下のリンクから実行できますので試してみてください。
実行しても canvas にはポリゴン一枚すら描かれません。コンテキストを初期化し、背景を黒でリセットするだけの実装です。もし仮に WebGL 2.0 が初期化できない状態で実行すると、このリセットするためのクリア処理すら実行できないので、透明な空っぽの canvas エレメントが表示されるはずです。
