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

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

### はじめに

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

### 今回の調査対象

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

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

### テスト環境一覧

|OS とブラウザ                           |バージョン       |GPU            |
|:---------------------------------------|:---------------:|:-------------:|
|Windows 11 バージョン22H2 + Edge 108    |108.0.1462.54    |GeForce RTX 2060|
|Windows 11 バージョン22H2 + Chrome 108  |108.0.5359.125   |GeForce RTX 2060|
|Windows 11 バージョン22H2 + Firefox 108 |108.0.1          |GeForce RTX 2060|
|macOS 13.0.1 + Safari                   |605.1.15         |UHD Graphics 617|
|iOS 16.2 + Safari                       |605.1.15         |Apple A11      |
|iPadOS 16.2 + Safari                    |605.1.15         |Apple A12Z     |

※ Chrome 101 以降ではユーザーエージェントのマイナーバージョン等の情報は「0.0.0」で固定されるようになりました。代わりにヘルプのバージョン情報にて調査しています。
※ IE11 は 2022年6月のサポート終了に伴い調査対象から除外するようにしました。

### WebGL 1.0 の対応状況

|項目                                                                 |Edge 108              |Chrome 108       |Firefox 108      |macOS 13.0            |iOS 16.2              |iPadOS 16.2           |
|:--------------------------------------------------------------------|:--------------------:|:---------------:|:---------------:|:--------------------:|:--------------------:|:--------------------:|
|Vendor                                                               |WebKit                |WebKit           |Mozilla          |WebKit                |WebKit                |WebKit                |
|Renderer                                                             |WebKit WebGL          |WebKit WebGL     |Mozilla          |WebKit WebGL          |WebKit WebGL          |WebKit WebGL          |
|GL Version                                                           |WebGL 1.0             |WebGL 1.0        |WebGL 1.0        |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 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/)|29個(31個)            |29個(31個)       |26個(27個)       |28個                  |28個                  |28個                  |

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

|WebGL Extensions 項目                                                                                                                 |Edge 108    |Chrome 108|Firefox 108|macOS 13.0 |iOS 16.2   |iPadOS 16.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/)                         |○          |○        |○         |○         |○         |○         |
|[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/)                                   |○          |○        |○         |○(Restore)|○(Restore)|○(Restore)|
|[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)    |           |           |
|[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/)                         |○          |○        |           |○         |○         |○         |
|[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/)                      |            |          |           |           |○         |○         |
|[WEBGL_compressed_texture_etc](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/)                        |            |          |           |           |○(Restore)|○(Restore)|
|[WEBGL_compressed_texture_etc1](http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                      |            |          |           |-(Delete)  |○         |○         |
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                   |            |          |           |           |○(Restore)|○(Restore)|
|[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/)                                           |○          |○        |○         |○         |○         |○         |
|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_webcodecs_video_frame](https://www.khronos.org/registry/webgl/extensions/proposals/WEBGL_webcodecs_video_frame/)               |[○]        |[○]      |           |           |           |           |

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

### WebGL 2.0 の対応状況

|項目                                                                 |Edge 108              |Chrome 108       |Firefox 108      |macOS 13.0            |iOS 16.2              |iPadOS 16.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個(22個)            |17個(22個)       |13個(14個)       |16(18)個              |15(17)個              |15(17)個              |

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

|WebGL 2.0 Extensions 項目                                                                                                                                       |Edge 108    |Chrome 108|Firefox 108|macOS 13.0 |iOS 16.2   |iPadOS 16.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/)                                                   |○          |○        |-(Delete)  |〇         |〇         |〇         |
|[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/)                                                                           |○          |○        |〇         |〇         |-(Delete)  |-(Delete)  |
|[EXT_texture_compression_bptc](https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/)                                                 |○          |○        |〇         |〇(New)    |-          |-          |
|[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/)                                             |○          |○        |○         |〇         |〇         |〇         |
|[EXT_texture_norm16](https://www.khronos.org/registry/webgl/extensions/EXT_texture_norm16/)                                                                     |○          |○        |-          |〇(New)    |〇(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)    |〇(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/)                                                 |-           |-         |-          |-          |〇(Restore |〇(Restore)|
|[WEBGL_compressed_texture_etc1](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/)                                               |-           |-         |-          |-(Delete)  |〇         |〇         |
|[WEBGL_compressed_texture_pvrtc](https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/)                                             |-           |-         |-          |-          |〇(Restore |〇(Restore)|
|[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/)             |[○]        |[○]      |           |-          |-          |-          |
|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)  |[○](New)  |
|[WEBGL_provoking_vertex](https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/)                                                                 |-           |-         |-          |-          |-          |-          |
|[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)  |[○](New)  |

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

### まとめ

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

■ WebGL and WebGPU Updates / WebGL+WebGPU Meetup, July 12, 2022
https://www.khronos.org/assets/uploads/developers/presentations/WebGL__WebGPU_Updates_Jul_22.pdf
- WebKit の WebGL 関連の改善
    - 追加
        - [EXT_texture_norm16](https://registry.khronos.org/webgl/extensions/EXT_texture_norm16/)
        - [EXT_texture_compression_bptc](https://registry.khronos.org/webgl/extensions/EXT_texture_compression_bptc/)
        - [OES_draw_buffers_indexed](https://registry.khronos.org/webgl/extensions/OES_draw_buffers_indexed/)
    - フラグで有効化
        - [Base Vertex/Base Instance](https://registry.khronos.org/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/)
        - [Multi-Draw Variation](https://registry.khronos.org/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/)

- Chromium の WebGL 関連の改善
    - パフォーマンス改善
        - [Multi-Draw Variation](https://registry.khronos.org/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/)
    - ANGLE の Metal バックエンド対応
 
■ WebGL & WebGPU Updates / WebGL + WebGPU Meetup, October 4, 2022
https://www.khronos.org/assets/uploads/developers/presentations/WebGL__WebGPU_Updates_October_2022.pdf

- WebGL conformance suite（WebGL 適合テスト）の改善

- WebGL に関する一般的な更新
    - WebGL コンテキストの復元機能の改善

- プロトタイプ機能
    - [ANGLE_shader_pixel_local_storage](https://chromium.googlesource.com/angle/angle/+/main/extensions/ANGLE_shader_pixel_local_storage.txt)
    - [EXT_provoking_vertex](https://registry.khronos.org/webgl/extensions/EXT_provoking_vertex/)

- ANGLE の Metal バックエンド対応関連
    - 作業進行中
    - 安定化に向けた取り組み
    - バグ修正

■ 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/dab3fbbb-d03d-7fbc-c708-f24eb467a534.png)

### おわりに

今年、印象に残った WebGL 関連の話題としては IE11 のサポート終了でしょうか。
10年近く情報を追っていた身としては少し感慨深いものがあります。

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/
■ WebGL2Fundamentals | WebGL2の新機能
https://webgl2fundamentals.org/webgl/lessons/ja/webgl2-whats-new.html
■ WebGL2Fundamentals | WebGL1からWebGL2への移行
https://webgl2fundamentals.org/webgl/lessons/ja/webgl1-to-webgl2.html
■ WebGL 2.0の概要 - Qiita
https://qiita.com/emadurandal/items/4c7bd2a26ef2d732d734
■ 初めてのWebGL 2 第2版 - JavaScriptで開発するリアルタイム3Dアプリケーション
https://www.amazon.co.jp/dp/4873119375/

### 過去の調査結果

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