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

この記事は[Web グラフィックス Advent Calendar 2021](https://qiita.com/advent-calendar/2021/webgraphics)の5日目の記事です。

### はじめに

この記事は各ブラウザにおける WebGL 対応状況の調査結果（2021年12月時点）になります。

### 今回の調査対象

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

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

### テスト環境一覧

|OS とブラウザ                           |バージョン       |GPU            |
|:---------------------------------------|:---------------:|:-------------:|
|Windows 10 バージョン21H1 + IE 11       |11.0             |GeForce RTX 2060|
|Windows 10 バージョン21H1 + Edge 96     |96.0.4664.55     |GeForce RTX 2060|
|Windows 10 バージョン21H1 + Chrome 96   |96.0.4664.45     |GeForce RTX 2060|
|Windows 10 バージョン21H1 + Firefox 94  |94.0.2           |GeForce RTX 2060|
|macOS 12.0 + Safari                     |605.1.15         |UHD Graphics 617|
|iOS 15.1 + Safari                       |605.1.15         |Apple A11      |
|iPadOS 15.1 + Safari                    |605.1.15         |Apple A12Z     |

### WebGL 1.0 の対応状況

|項目                                                                 |IE 11                 |Edge 96               |Chrome 96        |Firefox 94       |macOS 12.0            |iOS 15.1              |iPadOS 15.1           |
|:--------------------------------------------------------------------|:--------------------:|:--------------------:|:---------------:|:---------------:|:--------------------:|:--------------------:|:--------------------:|
|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個                   |33個(35個)            |33個(35個)       |26個(27個)        |25個                  |24個                  |24個                  |

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

|WebGL Extensions 項目|IE 11     |Edge 96     |Chrome 96|Firefox 94|macOS 12.0    |iOS 15.1   |iPadOS 15.1|
|:--------------------|:--------:|:----------:|:-------:|:--------:|:---------:|:---------:|:---------:|
|[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/)                                                 |  |○       |○       |○     |○(New)|○(New)|○(New)|
|[EXT_frag_depth](https://www.khronos.org/registry/webgl/extensions/EXT_frag_depth/)                                                   |  |○       |○       |○     |○     |○(New)|○(New)|
|[EXT_shader_texture_lod](https://www.khronos.org/registry/webgl/extensions/EXT_shader_texture_lod/)                                   |  |○       |○       |○     |-(Delete)|-(Delete)|-(Delete)|
|[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_compression_rgtc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_rgtc/)                       |  |○       |○       |○(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/)                         |  |○       |○       |       |○(New)|○(New)|○(New)|
|[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)|       |       |       |
|[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/)                               |○|○       |○       |○     |○     |○(New)|○(New)|
|[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)                                |  |○       |○       |○     |○     |○(New)|○(New)|
|[WEBGL_compressed_texture_astc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/)                      |  |         |         |       |       |○     |○     |
|[WEBGL_compressed_texture_etc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/)                        |  |         |         |       |       |-(Delete)|-(Delete)|
|[WEBGL_compressed_texture_etc1](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                      |  |         |         |       |○(New)|○     |○     |
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                   |  |         |         |       |       |-(Delete)|-(Delete)|
|[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/)            |  |○       |○       |○     |○(New)|       |       |
|[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)|○(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/)                                               |  |○       |○       |       |○(New)|○(New)|○(New)|
|[WEBGL_video_texture](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_video_texture/)                               |  |[○]     |[○]     |       |       |       |       |
|[WEBGL_webcodecs_video_frame](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_webcodecs_video_frame/)               |  |[○]（New）|[○]（New）|   |       |       |       |

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

### WebGL 2.0 の対応状況

|項目                                                                 |Edge 96               |Chrome 96        |Firefox 94       |macOS 12.0            |iOS 15.1              |iPadOS 15.1           |
|:--------------------------------------------------------------------|:--------------------:|:---------------:|:---------------:|:--------------------:|:--------------------:|:--------------------:|
|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個(22個)            |17個(22個)       |13個(14個)       |13個                  |12個                  |12個                  |

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

|WebGL 2.0 Extensions 項目                                                                                                                                       |Edge 96     |Chrome 96|Firefox 94|macOS 12.0 |iOS 15.1   |iPadOS 15.1|
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------:|:-------:|:--------:|:---------:|:---------:|:---------:|
|[EXT_color_buffer_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_float/)                                                             |○          |○       |○        |〇         |〇(New)    |〇(New)    |
|[EXT_color_buffer_half_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_half_float/)                                                   |○          |○       |-(Delete) |〇(New)    |〇(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/)                                                                           |○          |○       |〇        |〇(New)    |〇(New)    |〇(New)    |
|[EXT_texture_compression_bptc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/)                                                 |○          |○       |〇        |-          |-          |-          |
|[EXT_texture_compression_rgtc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_rgtc/)                                                 |○          |○       |〇        |-          |-          |-          |
|[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/)                                                                     |○          |○       |-         |-          |-          |-          |
|[KHR_parallel_shader_compile](https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/)                                                   |○          |○       |          |〇(New)    |〇(New)    |〇(New)    |
|[OES_draw_buffers_indexed](https://www.khronos.org/registry/webgl/extensions/OES_draw_buffers_indexed/)                                                         |[○]        |[○]     |○        |-          |-          |-          |
|[OES_texture_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_float/)                                                                       |-           |-        |-         |-(Delete)  |-(Delete)  |-(Delete)  |
|[OES_texture_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_float_linear/)                                                         |○          |○       |○        |〇         |〇(New)    |〇(New)    |
|[OES_texture_half_float](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float/)                                                             |-           |-        |-         |-(Delete)  |-(Delete)  |-(Delete)  |
|[OES_texture_half_float_linear](https://www.khronos.org/registry/webgl/extensions/OES_texture_half_float_linear/)                                               |-           |-        |-         |-(Delete)  |-(Delete)  |-(Delete)  |
|[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/)                                                 |-           |-        |-         |-          |-(Delete)  |-(Delete)  |
|[WEBGL_compressed_texture_etc1](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                                               |-           |-        |-         |〇(New)    |〇         |〇         |
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                                             |-           |-        |-         |-          |-(Delete)  |-(Delete)  |
|[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/)                                     |○          |○       |○        |〇(New)    |-          |-          |
|[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/)                                                                   |-           |-        |-         |-(Delete)  |-(Delete)  |-(Delete)  |
|[WEBGL_draw_instanced_base_vertex_base_instance](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/)                                                                         |○          |○       |-         |〇(New)    |〇(New)    |〇(New)    |
|[WEBGL_multi_draw_instanced_base_vertex_base_instance](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_webcodecs_video_frame](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_webcodecs_video_frame/)                                         |[○]（New） |[○]（New）|-       |-          |-          |-          |

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

### まとめ

Khronos のプレゼン資料にもありますが、最近では以下のような改善が行われているようです。

■ WebGL Working Group Updates / WebGL Meetup, March 2021
https://www.khronos.org/assets/uploads/developers/library/2021-webgl-meetup/Khronos-Group-WebGL-WG-Updates.pdf

- 並列シェーダーコンパイル
    - [KHR_parallel_shader_compile](https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/)

■ WebGL Working Group Updates / WebGL Meetup, May 2021
https://www.khronos.org/assets/uploads/developers/presentations/WebGL-WG-Updates_May21.pdf

- iOS 及び MacOS における WebGL 関連の改善
    - iOS 及び MacOS における WebGL 2.0 のサポート
    - [EXT_color_buffer_half_float](https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_half_float/)
    - [ANGLEのMetalバックエンド対応](https://developer.apple.com/safari/technology-preview/release-notes/)

- ワーキンググループでの最近の合意
    - BaseVertex/BaseInstance 拡張をどのように公開するか
        - [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/)

■ WebGL and WebGPU Updates / WebGL+WebGPU Meetup, October 2021
https://www.khronos.org/assets/uploads/developers/presentations/WebGL__WebGPU_Updates.pdf

- Safari 15 が出荷され WebGL 2.0 が普遍的に使えるようになります。

■ WebGL 2.0 | Can I use... Support
https://caniuse.com/webgl2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/06c3e8dd-ecf7-27f5-338c-157895cb5975.png)

### おわりに

今年の目玉は、やはり Safari の WebGL 2.0 対応でしょう。
これで Edge/Chrome/Firefox とようやく足並みが揃った感じです。
今年実現した理由の１つとしては WebGPU 対応の前にベースラインとなるグラフィックAPIの底上げが急務であった為と考えられます。

WebGL 2.0 の技術情報もだいぶ揃ってきていますので、学びなおす・学び始めるのに良い機会かもしれません。
参考までに関連情報へのリンクを載せておきます（Google 検索でヒットしたものを並べただけですが・・）

■ サンプルで理解するWebGL 2.0 - WebGL 2.0の利点とは
https://ics.media/entry/16060/
■ WebGL 開発支援サイト | WebGL2
https://wgld.org/d/webgl2/
■ Subterranean Flower | WebGL2入門 基礎編
https://sbfl.net/blog/2016/09/04/webgl2-tutorial-basics/
■ WebGL2Fundamentals | WebGL2の基本
https://webgl2fundamentals.org/webgl/lessons/ja/
■ WebGL 2.0の概要 - Qiita
https://qiita.com/emadurandal/items/4c7bd2a26ef2d732d734
■ 初めてのWebGL 2 第2版 - JavaScriptで開発するリアルタイム3Dアプリケーション
https://www.amazon.co.jp/dp/4873119375/

### 過去の調査結果

[各ブラウザにおける WebGL 対応状況（2020年12月時点）](https://qiita.com/cx20/items/a63eaa9fa5e03693e72d)
[各ブラウザにおける 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)