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

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

■ 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
- ANGLEのMetalバックエンド対応
ワーキンググループでの最近の合意
- BaseVertex/BaseInstance 拡張をどのように公開するか
  - WEBGL_draw_instanced_base_vertex_base_instance
  - 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

おわりに

今年の目玉は、やはり 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/

過去の調査結果