この記事はWeb グラフィックス Advent Calendar 2022の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	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	○	○	○	○	○	○
EXT_blend_minmax	○	○	○	○	○	○
EXT_color_buffer_half_float	○	○	○	○	○	○
EXT_disjoint_timer_query	○	○
EXT_float_blend	○	○	○	○	○	○
EXT_frag_depth	○	○	○	○	○	○
EXT_shader_texture_lod	○	○	○	○(Restore)	○(Restore)	○(Restore)
EXT_sRGB	○	○	○	○	○	○
EXT_texture_compression_bptc	○	○	○	○(New)
EXT_texture_compression_rgtc	○	○	○	○(New)
EXT_texture_filter_anisotropic	○	○	○	○	○	○
KHR_parallel_shader_compile	○	○		○	○	○
OES_element_index_uint	○	○	○	○	○	○
OES_fbo_render_mipmap	○	○	○		○(New)	○(New)
OES_standard_derivatives	○	○	○	○	○	○
OES_texture_float	○	○	○	○	○	○
OES_texture_float_linear	○	○	○	○	○	○
OES_texture_half_float	○	○	○	○	○	○
OES_texture_half_float_linear	○	○	○	○	○	○
OES_vertex_array_object	○	○	○	○	○	○
WEBGL_color_buffer_float	○	○	○	○	○	○
WEBGL_compressed_texture_astc					○	○
WEBGL_compressed_texture_etc					○(Restore)	○(Restore)
WEBGL_compressed_texture_etc1				-(Delete)	○	○
WEBGL_compressed_texture_pvrtc					○(Restore)	○(Restore)
WEBGL_compressed_texture_s3tc	○	○	○	○
WEBGL_compressed_texture_s3tc_srgb	○	○	○	○
WEBGL_debug_renderer_info	○	○	○	○	○	○
WEBGL_debug_shaders	○	○	○	○	○	○
WEBGL_depth_texture	○	○	○	○	○	○
WEBGL_draw_buffers	○	○	○	○	○	○
WEBGL_explicit_present			[○]
WEBGL_lose_context	○	○	○	○	○	○
WEBGL_multi_draw	○	○		○	○	○
WEBGL_video_texture	[○]	[○]
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	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	○	○	○	〇	〇	〇
EXT_color_buffer_half_float	○	○	-(Delete)	〇	〇	〇
EXT_disjoint_timer_query_webgl2	○	○		-	-	-
EXT_float_blend	○	○	〇	〇	-(Delete)	-(Delete)
EXT_texture_compression_bptc	○	○	〇	〇(New)	-	-
EXT_texture_compression_rgtc	○	○	〇	〇(New)	-	-
EXT_texture_filter_anisotropic	○	○	○	〇	〇	〇
EXT_texture_norm16	○	○	-	〇(New)	〇(New)	〇(New)
KHR_parallel_shader_compile	○	○		〇	〇	〇
OES_draw_buffers_indexed	○	○	○	〇(New)	〇(New)	〇(New)
OES_texture_float	-	-	-	-	-	-
OES_texture_float_linear	○	○	○	〇	〇	〇
OES_texture_half_float	-	-	-	-	-	-
OES_texture_half_float_linear	-	-	-	-	-	-
OVR_multiview2	○	○	○	-	-	-
WEBGL_compressed_texture_astc	-	-	-	-	〇	〇
WEBGL_compressed_texture_etc	-	-	-	-	〇(Restore	〇(Restore)
WEBGL_compressed_texture_etc1	-	-	-	-(Delete)	〇	〇
WEBGL_compressed_texture_pvrtc	-	-	-	-	〇(Restore	〇(Restore)
WEBGL_compressed_texture_s3tc	○	○	○	〇	-	-
WEBGL_compressed_texture_s3tc_srgb	○	○	○	〇	-	-
WEBGL_debug_renderer_info	○	○	○	〇	〇	〇
WEBGL_debug_shaders	○	○	○	〇	〇	〇
WEBGL_depth_texture	-	-	-	-	-	-
WEBGL_draw_instanced_base_vertex_base_instance	[○]	[○]		-	-	-
WEBGL_explicit_present	-	-	[○]	-	-	-
WEBGL_lose_context	○	○	○	〇	〇	〇
WEBGL_multi_draw	○	○	-	〇	〇	〇
WEBGL_multi_draw_instanced_base_vertex_base_instance	[○]	[○]	-	○	○	○
WEBGL_provoking_vertex	-	-	-	-	-	-
WEBGL_video_texture	[○]	[○]	-	-	-	-
WEBGL_webcodecs_video_frame	[○]	[○]	-	○	○	○

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

まとめ

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 関連の改善
- 追加
- フラグで有効化
  - Base Vertex/Base Instance
  - Multi-Draw Variation
Chromium の WebGL 関連の改善
- パフォーマンス改善
  - Multi-Draw Variation
- 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
- EXT_provoking_vertex
ANGLE の Metal バックエンド対応関連
- 作業進行中
- 安定化に向けた取り組み
- バグ修正

■ WebGL 2.0 | Can I use... Support
https://caniuse.com/webgl2

おわりに

今年、印象に残った 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/

過去の調査結果