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

この記事は[WebGL Advent Calendar 2019](http://qiita.com/advent-calendar/2019/webgl)の8日目の記事です。

### はじめに

この記事は各ブラウザにおける WebGL 対応状況の調査結果（2019年12月時点）になります。
来年には Chromium 版の Edge が登場しますので、旧Edge としては最後の調査になります。

### 今回の調査対象

いつものブラウザに加えて Chromium 版 Edge（Dev Channel版）の WebGL 対応状況を調べてみました。今回から WebGL 2.0 についても追加しています。
調査した環境は Windows 10 Insider Preview Build 19037 (バージョン2004) になります。

WebGL の対応状況については、以下のサイトにて確認を行いました。

> ■ WebGL Report
> http://webglreport.com/

### テスト環境一覧

|OS とブラウザ                            |バージョン       |GPU            |
|:---------------------------------------|:---------------:|:-------------:|
|Windows 10 IP Build 19037 + Chrome 79   |79.0.3945.79     |GeForce GTX 660|
|Windows 10 IP Build 19037 + Firefox 71  |71.0             |GeForce GTX 660|
|Windows 10 IP Build 19037 + IE 11       |11.1.19037.0     |GeForce GTX 660|
|Windows 10 IP Build 19037 + Edge 18(旧) |44.19037.1.0     |GeForce GTX 660|
|Windows 10 IP Build 19037 + Edge 80(新) |80.0.355.1       |GeForce GTX 660|
|iOS 13.2.3 + Safari                     |605.1.5          |Apple A11      |

### WebGL 1.0 の対応状況

|項目                                                                 |Chrome 79        |Firefox 71       |IE 11                 |Edge 18(旧)           |Edge 80(新)           |iOS 13.2.3            |
|:--------------------------------------------------------------------|:---------------:|:---------------:|:--------------------:|:--------------------:|:--------------------:|:--------------------:|
|Vendor                                                               |WebKit           |Mozilla          |Microsoft             |Microsoft             |WebKit                |WebKit                |
|Renderer                                                             |WebKit WebGL     |Mozilla          |Internet Explorer     |Microsoft Edge        |WebKit WebGL          |WebKit WebGL          |
|GL Version                                                           |WebGL 1.0        |WebGL 1.0        |WebGL 0.94            |WebGL 1.0             |WebGL 1.0             |WebGL 1.0             |
|Shading Language Version                                             |WebGL GLSL ES 1.0|WebGL GLSL ES 1.0|WebGL GLSL ES 0.94    |WebGL GLSL ES 1.0     |WebGL GLSL ES 1.0     |WebGL GLSL ES 1.0     |
|[WebGL Extensions](http://www.khronos.org/registry/webgl/extensions/)|29個(32個)       |22個(25個)        |8個                  |19個                  |29個(31個)            |16個                  |

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

|WebGL Extensions 項目|Chrome 79|Firefox 71|IE 11     |Edge 18(旧) |Edge 80(新) |iOS 13.2.3 |
|:--------------------|:-------:|:--------:|:--------:|:----------:|:----------:|:---------:|
|[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/)                         |○     |○     |  |○     |○     |       |
|[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/)                       |       |[〇]   |  |       |       |       |
|[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/)                         |○(New)|       |  |       |○     |       |
|[OES_element_index_uint](https://www.khronos.org/registry/webgl/extensions/OES_element_index_uint/)                                   |○     |○     |○|○     |○     |○     |
|[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_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/)                             |○     |○     |○|○     |○     |○     |
|[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_buffers](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/)                                           |○     |○     |  |○(New)|○     |       |
|WEBGL_explicit_present                                                                                                                |       |[○]   |  |       |       |       |
|[WEBGL_lose_context](https://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/)                                           |○     |○     |  |○(New)|○     |○     |
|[WEBGL_multi_draw](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw/)                                               |[○]   |       |  |       |[○]   |       |
|[WEBGL_multi_draw_instanced](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/) |[○]   |       |  |       |       |       |
|[WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)                               |[○]   |       |  |       |[○]   |       |

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

### WebGL 2.0 の対応状況

|項目                                                                 |Chrome 79        |Firefox 71       |IE 11                 |Edge 18(旧)           |Edge 80(新)           |iOS 13.2.3            |
|:--------------------------------------------------------------------|:---------------:|:---------------:|:--------------------:|:--------------------:|:--------------------:|:--------------------:|
|Vendor                                                               |WebKit           |Mozilla          |-                     |-                     |WebKit                |(WebKit)              |
|Renderer                                                             |WebKit WebGL     |Mozilla          |-                     |-                     |WebKit WebGL          |(WebKit WebGL)        |
|GL Version                                                           |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 1.0)   |
|[WebGL Extensions](http://www.khronos.org/registry/webgl/extensions/)|11個(15個)       |8個(12個)        |-                     |-                     |12個(16個)             |(4個)                |

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

|WebGL 2.0 Extensions 項目                                                                                                             |Chrome 79|Firefox 71|IE 11     |Edge 18(旧) |Edge 80(新) |iOS 13.2.3 |
|:-------------------------------------------------------------------------------------------------------------------------------------|:-------:|:--------:|:--------:|:----------:|:----------:|:---------:|
|[EXT_color_buffer_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_float/)                                   |○       |○        |-         |-           |○          |-          |
|[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/)                       |         |[〇]      |-         |-           |            |-          |
|[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_texture_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_float_linear/)                               |○       |○        |-         |-           |○          |-          |
|[OVR_multiview2](https://www.khronos.org/registry/webgl/extensions/OVR_multiview2/)                                                   |[○]     |[○]      |-         |-           |○          |-          |
|[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_draw_instanced](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/)             |         |          |-         |-           |[○]        |-          |
|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](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/) |[○]     |          |-         |-           |[○]        |-          |
|[WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)                               |[○]     |          |-         |-           |[○]        |-          |

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

### まとめ

Khronos のプレゼン資料にもありますが、最近では以下のような機能が追加されているようです。

■ GDC 2019 / WebGL Developer Day 
https://www.khronos.org/assets/uploads/developers/library/2019-gdc/WebGL-Dev-Day_GDC_Mar19.pdf
■ SIGGRAPH 2019 / WebGL BOF
https://www.khronos.org/assets/uploads/developers/library/2019-siggraph/WebGL-01-Introduction-SIGGRAPH_Jul19.pdf

- [WebGL 2.0 Compute](https://www.khronos.org/registry/webgl/specs/latest/2.0-compute/) ドラフト仕様
- WebGL 拡張の追加
 - [KHR_parallel_shader_compile](https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/) 
 - [WEBGL_multi_draw](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw/) および [WEBGL_multi_draw_instanced](https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/)
 - [WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)
- WebAssembly での WebGL マルチスレッドサポート

あとは VR 周りの拡張 [OVR_multiview2](https://www.khronos.org/registry/webgl/extensions/OVR_multiview2/) あたりでしょうか。

来年には Chromium 版 Edge の登場が控えてますし WebGL 2.0 の浸透にも期待したいですね。
風の噂では、WebKit が WebGL 2.0 を2020年の目標に入れているようです。ANGLE の Metal 実装が開発中のようなので、その進捗次第だと思いますが。。
以下は噂の出所になります。興味がある方は、今後の動向についてウォッチしてみて下さい。

https://trac.webkit.org/wiki/WebKitGoalsfor2020
https://bugs.webkit.org/show_bug.cgi?id=198948
https://github.com/google/angle

### 過去の調査結果

[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)