この記事はWeb グラフィックス Advent Calendar 2020の8日目の記事です。
はじめに
この記事は各ブラウザにおける WebGL 対応状況の調査結果(2020年12月時点)になります。
今回の調査対象
WebGL の対応状況については、以下のサイトにて確認を行いました。
■ WebGL Report
https://webglreport.com/
テスト環境一覧
OS とブラウザ | バージョン | GPU |
---|---|---|
Windows 10 IP Build 20201 + IE 11 | 11.1.20201.0 | GeForce GTX 660 |
Windows 10 IP Build 20201 + Edge 87 | 87.0.4280.88 | GeForce GTX 660 |
Windows 10 IP Build 20201 + Chrome 87 | 87.0.4280.88 | GeForce GTX 660 |
Windows 10 IP Build 20201 + Firefox 84 | 84.0 | GeForce GTX 660 |
macOS 10.16 + Safari | 605.1.15 | UHD Graphics 617 |
iOS 14.2 + Safari | 605.1.15 | Apple A11 |
iPadOS 14.2 + Safari | 605.1.15 | Apple A12Z |
WebGL 1.0 の対応状況
項目 | IE 11 | Edge 87 | Chrome 87 | Firefox 84 | macOS 10.16 | iOS 14.2 | iPadOS 14.2 |
---|---|---|---|---|---|---|---|
Vendor | Microsoft | WebKit | WebKit | Mozilla | WebKit | WebKit | WebKit |
Renderer | Internet Explorer | WebKit WebGL | WebKit WebGL | Mozilla | WebKit WebGL | WebKit WebGL | WebKit WebGL |
GL Version | WebGL 0.94 | WebGL 1.0 | WebGL 1.0 | WebGL 1.0 | WebGL 1.0 | WebGL 1.0 | WebGL 1.0 |
Shading Language Version | WebGL GLSL ES 0.94 | WebGL GLSL ES 1.0 | WebGL GLSL ES 1.0 | WebGL GLSL ES 1.0 | WebGL GLSL ES 1.0 | WebGL GLSL ES 1.0 | WebGL GLSL ES 1.0 |
WebGL Extensions | 8個 | 29個(30個) | 29個(30個) | 22個(25個) | 21個 | 19個 | 20個 |
※ カッコ内の個数はドラフト機能を有効化した場合の個数です。
※ 「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。また、ドラフト機能は「[○]」としています。
WebGL 2.0 の対応状況
項目 | Edge 87 | Chrome 87 | Firefox 84 | macOS 10.16 | iOS 14.2 | iPadOS 14.2 |
---|---|---|---|---|---|---|
Vendor | WebKit | WebKit | Mozilla | (WebKit) | (WebKit) | (WebKit) |
Renderer | WebKit WebGL | WebKit WebGL | Mozilla | (WebKit WebGL) | (WebKit WebGL) | (WebKit WebGL) |
GL Version | WebGL 2.0 | WebGL 2.0 | WebGL 2.0 | (WebGL 2.0) | (WebGL 2.0) | (WebGL 2.0) |
Shading Language Version | WebGL GLSL ES 3.0 | WebGL GLSL ES 3.0 | WebGL GLSL ES 3.0 | (WebGL GLSL ES 3.0) | (WebGL GLSL ES 3.0) | (WebGL GLSL ES 3.0) |
WebGL Extensions | 17個(21個) | 17個(21個) | 12個(13個) | (11個) | (12個) | (12個) |
※ カッコ内の個数はドラフト機能を有効化した場合の個数です。
※ 「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。また、ドラフト機能は「[○]」としています。
まとめ
Khronos のプレゼン資料にもありますが、最近では以下のような改善が行われているようです。
■ WebGL Working Group Updates / WebGL Meetup
https://www.khronos.org/assets/uploads/developers/library/2020-virtual-webgl-meetup/01%20WebGL%20WG%20Updates.pdf
-
圧縮テクスチャのサポート BPTC (BC6H / BC7) 及び RGTC (BC4 / BC5)
-
高ビット深度テクスチャのサポート
-
ジオメトリのバッチ処理の改善
残念ながら Chrome Canary で実験的に実装されていた WebGL のコンピュートシェーダ機能は取り除かれることが決まったようです。macOS に容易には移植できないことが分かった為のようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1131991&q=enable-webgl2-compute-context&can=2
かわりに Chrome Canary では WebGPU のコンピュートシェーダが試せるようですので、興味がある方はそちらを調べてみてください。
おわりに
かつて WebGL 1.0 がそうであったように、WebGL 2.0 もようやく「どこでも使える」という状況になりそうです。
残すところは Safari でしょうか。Safari は昨年より ANGLE チームと協力して WebGL 2.0 の実装にあたっており、最近、Technology Preview でデフォルト有効化するようになりました。
現状の実装は、OpenGL ES をバックエンドで実装しており、最終的には、Metal をバックエンドに切り替えることを目標としているようです。
実装状況が気になる方は下記をチェックしてみてください。
■ use ANGLE as the backend for WebKit's WebGL implementation
https://bugs.webkit.org/show_bug.cgi?id=198948
■ WebGL 2 support
https://bugs.webkit.org/show_bug.cgi?id=126404
■ Google / ANGLE
https://github.com/google/angle
過去の調査結果
各ブラウザにおける WebGL 対応状況(2019年12月時点)
Microsoft Edge(2018年2月)における WebGL 対応状況
Microsoft Edge(2016年7月)における WebGL 対応状況
Microsoft Edge(2015年11月)における WebGL 対応状況
Microsoft Edge(2015年7月)における WebGL 対応状況
IE11(2015年5月)における WebGL 対応状況
IE11(2014年12月)における WebGL 対応状況
IE11(2014年4月)における WebGL 対応状況
IE11(2013年10月)における WebGL 対応状況
IE11 Preview 版における WebGL 対応状況