各ブラウザにおける WebGL 対応状況（2020年12月時点）

この記事は[Web グラフィックス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webgraphics)の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](http://www.khronos.org/registry/webgl/extensions/)|8個                   |29個(30個)            |29個(30個)       |22個(25個)       |21個                  |19個                  |20個                  |

※ カッコ内の個数はドラフト機能を有効化した場合の個数です。

|WebGL Extensions 項目|IE 11     |Edge 87     |Chrome 87|Firefox 84|macOS 10.16   |iOS 14.2   |iPadOS 14.2|
|:--------------------|:--------:|:----------:|:-------:|:--------:|:---------:|:---------:|:---------:|
|[ANGLE_instanced_arrays](https://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays/)                                   |○|○     |○     |○     |○     |○     |○     |
|[EXT_blend_minmax](https://www.khronos.org/registry/webgl/extensions/EXT_blend_minmax/)                                               |  |○     |○     |○     |○     |○     |○     |
|[EXT_color_buffer_half_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_half_float/)                         |  |○     |○     |○     |○     |       |○(New)|
|[EXT_disjoint_timer_query](https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query/)                               |  |○     |○     |○     |       |       |       |
|[EXT_float_blend](https://www.khronos.org/registry/webgl/extensions/EXT_float_blend/)                                                 |  |○     |○     |○     |       |       |       |
|[EXT_frag_depth](https://www.khronos.org/registry/webgl/extensions/EXT_frag_depth/)                                                   |  |○     |○     |○     |○     |       |       |
|[EXT_shader_texture_lod](https://www.khronos.org/registry/webgl/extensions/EXT_shader_texture_lod/)                                   |  |○     |○     |○     |○     |○     |○     |
|[EXT_sRGB](https://www.khronos.org/registry/webgl/extensions/EXT_sRGB/)                                                               |  |○     |○     |○     |○     |○     |○     |
|[EXT_texture_compression_bptc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/)                       |  |〇(New)|〇(New)|〇     |       |       |       |
|[EXT_texture_compression_rgtc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_rgtc/)                       |  |〇(New)|〇(New)|       |       |       |       |
|[EXT_texture_filter_anisotropic](https://www.khronos.org/registry/webgl/extensions/EXT_texture_filter_anisotropic/)                   |○|○     |○     |○     |○     |○     |○     |
|[KHR_parallel_shader_compile](https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/)                         |  |○     |○     |       |       |       |       |
|[OES_element_index_uint](https://www.khronos.org/registry/webgl/extensions/OES_element_index_uint/)                                   |○|○     |○     |○     |○     |○     |○     |
|[OES_fbo_render_mipmap](https://www.khronos.org/registry/webgl/extensions/OES_fbo_render_mipmap/)                                     |  |○(New)|○(New)|       |       |       |       |
|[OES_standard_derivatives](https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/)                               |○|○     |○     |○     |○     |○     |○     |
|[OES_texture_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_float/)                                             |○|○     |○     |○     |○     |○     |○     |
|[OES_texture_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_float_linear/)                               |○|○     |○     |○     |○     |       |       |
|[OES_texture_half_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float/)                                   |  |○     |○     |○     |○     |○     |○     |
|[OES_texture_half_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float_linear/)                     |  |○     |○     |○     |○     |○     |○     |
|[OES_vertex_array_object](https://www.khronos.org/registry/webgl/extensions/OES_vertex_array_object/)                                 |  |○     |○     |○     |○     |○     |○     |
|[WEBGL_color_buffer_float](https://www.khronos.org/registry/webgl/extensions/WEBGL_color_buffer_float)                                |  |○     |○     |○     |○     |       |       |
|[WEBGL_compressed_texture_astc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/)                      |  |       |       |       |       |○(New)|○(New)|
|[WEBGL_compressed_texture_etc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/)                        |  |       |       |       |       |○(New)|○(New)|
|[WEBGL_compressed_texture_etc1](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                      |  |       |       |       |       |○(New)|○(New)|
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                   |  |       |       |       |       |△     |△     |
|[WEBGL_compressed_texture_s3tc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/)                      |○|○     |○     |○     |○     |       |       |
|[WEBGL_compressed_texture_s3tc_srgb](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc_srgb/)            |  |○     |○     |○     |       |       |       |
|[WEBGL_debug_renderer_info](https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/)                             |○|○     |○     |○     |○     |○(New)|○(New)|
|[WEBGL_debug_shaders](https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_shaders/)                                         |  |○     |○     |○     |○     |○(New)|○(New)|
|[WEBGL_depth_texture](https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)                                         |  |○     |○     |○     |○     |○     |○     |
|[WEBGL_draw_buffers](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/)                                           |  |○     |○     |○     |○     |       |       |
|WEBGL_explicit_present                                                                                                                |  |       |       |[○]   |       |       |       |
|[WEBGL_lose_context](https://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/)                                           |  |○     |○     |○     |○     |○     |○     |
|[WEBGL_multi_draw](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw/)                                               |  |○     |○     |       |       |       |       |
|[WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)                               |  |[○]   |[○]   |       |       |       |       |

※ 「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。また、ドラフト機能は「[○]」としています。

### 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](http://www.khronos.org/registry/webgl/extensions/)|17個(21個)            |17個(21個)       |12個(13個)       |(11個)                |(12個)                |(12個)                |

※ カッコ内の個数はドラフト機能を有効化した場合の個数です。

|WebGL 2.0 Extensions 項目                                                                                                                                       |Edge 87     |Chrome 87|Firefox 84|macOS 10.16|iOS 14.2   |iPadOS 14.2|
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------:|:-------:|:--------:|:---------:|:---------:|:---------:|
|[EXT_color_buffer_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_float/)                                                             |○          |○       |○        |[〇]       |-          |-          |
|[EXT_color_buffer_half_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_half_float/)                                                   |○(New)     |○(New)  |○        |-          |-          |-          |
|[EXT_disjoint_timer_query_webgl2](https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/)                                           |○          |○       |          |-          |-          |-          |
|[EXT_float_blend](https://www.khronos.org/registry/webgl/extensions/EXT_float_blend/)                                                                           |○          |○       |〇        |-          |-          |-          |
|[EXT_texture_compression_bptc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/)                                                 |○(New)     |○(New)  |〇        |-          |-          |-          |
|[EXT_texture_compression_rgtc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_rgtc/)                                                 |○(New)     |○(New)  |〇        |-          |-          |-          |
|[EXT_texture_filter_anisotropic](https://www.khronos.org/registry/webgl/extensions/EXT_texture_filter_anisotropic/)                                             |○          |○       |○        |[〇]       |[〇]       |[〇]       |
|[EXT_texture_norm16](https://www.khronos.org/registry/webgl/extensions/EXT_texture_norm16/)                                                                     |○(New)     |○(New)  |-         |-          |-          |-          |
|[KHR_parallel_shader_compile](https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/)                                                   |○          |○       |          |-          |-          |-          |
|[OES_draw_buffers_indexed](https://www.khronos.org/registry/webgl/extensions/OES_draw_buffers_indexed/)                                                         |[○](New)   |[○](New)|○        |-          |-          |-          ||
|[OES_texture_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_float/)                                                                       |-           |-        |-         |[〇]       |[〇]       |[〇]       |
|[OES_texture_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_float_linear/)                                                         |○          |○       |○        |[〇]       |-          |-          ||
|[OES_texture_half_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float/)                                                             |-           |-        |-         |[〇]       |[〇]       |[〇]       |
|[OES_texture_half_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float_linear/)                                               |-           |-        |-         |[〇]       |[〇]       |[〇]       |
|[OVR_multiview2](https://www.khronos.org/registry/webgl/extensions/OVR_multiview2/)                                                                             |○          |○       |○        |-          |-          |-          |
|[WEBGL_compressed_texture_astc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/)                                               |-           |-        |-         |-          |[〇]       |[〇]       |
|[WEBGL_compressed_texture_etc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/)                                                 |-           |-        |-         |-          |[〇]       |[〇]       |
|[WEBGL_compressed_texture_etc1](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                                               |-           |-        |-         |-          |[〇]       |[〇]       |
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                                             |-           |-        |-         |-          |[△]       |[△]       |
|[WEBGL_compressed_texture_s3tc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/)                                               |○          |○       |○        |[〇]       |-          |-          |
|[WEBGL_compressed_texture_s3tc_srgb](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc_srgb/)                                     |○          |○       |○        |-          |-          |-          |
|[WEBGL_debug_renderer_info](https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/)                                                       |○          |○       |○        |[〇]       |[〇]       |[〇]       |
|[WEBGL_debug_shaders](https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_shaders/)                                                                   |○          |○       |○        |[〇]       |[〇]       |[〇]       |
|[WEBGL_depth_texture](https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)                                                                   |-           |-        |-         |[〇]       |[〇]       |[〇]       |
|[WEBGL_draw_instanced_base_vertex_base_instance](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/)             |[○](New)   |[○](New)|          |-          |-          |-          |
|WEBGL_explicit_present                                                                                                                                          |-           |-        |[○]      |-          |-          |-          |
|[WEBGL_lose_context](https://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/)                                                                     |○          |○       |○        |[〇]       |[〇]       |[〇]       |
|[WEBGL_multi_draw](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw/)                                                                         |○          |○       |-         |-          |-          |-          |
|[WEBGL_multi_draw_instanced_base_vertex_base_instance](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/) |[○](New)   |[○](New)|-         |-          |-          |-          |
|[WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)                                                         |[○]        |[○]     |-         |-          |-          |-          |

※ 「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。また、ドラフト機能は「[○]」としています。

### まとめ

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)

- 高ビット深度テクスチャのサポート
  - [EXT_texture_norm16](https://www.khronos.org/registry/webgl/extensions/EXT_texture_norm16/) 

- ジオメトリのバッチ処理の改善
  - [WEBGL_multi_draw](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw/) 
  - [WEBGL_draw_instanced_base_vertex_base_instance](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/) 
  - [WEBGL_multi_draw_instanced_base_vertex_base_instance](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/) 

残念ながら 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月時点）](https://qiita.com/cx20/items/c30df869be6a9d421b7c)
[Microsoft Edge（2018年2月）における WebGL 対応状況](https://qiita.com/cx20/items/3e4e1874166358852b61)
[Microsoft Edge（2016年7月）における WebGL 対応状況](https://qiita.com/cx20/items/0fa5f4cbf2af3bde9a41)
[Microsoft Edge（2015年11月）における WebGL 対応状況](https://qiita.com/cx20/items/9c572f86790667c3fc8a)
[Microsoft Edge（2015年7月）における WebGL 対応状況](https://qiita.com/cx20/items/6c02794c3a841be5de8d)
[IE11（2015年5月）における WebGL 対応状況](https://qiita.com/cx20/items/830fbea8335d5a24133a)
[IE11（2014年12月）における WebGL 対応状況](https://qiita.com/cx20/items/39826348a059a2f235ba)
[IE11（2014年4月）における WebGL 対応状況](https://qiita.com/cx20/items/fce18d859b815cdc6cd1)
[IE11（2013年10月）における WebGL 対応状況](https://qiita.com/cx20/items/952ee9aa7d8fca9ff983)
[IE11 Preview 版における WebGL 対応状況](https://qiita.com/cx20/items/7083218cdd6d70744b94)