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

この記事はWeb グラフィックス Advent Calendar 2020の8日目の記事です。

はじめに

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

今回の調査対象

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

■ WebGL Report
https://webglreport.com/

テスト環境一覧

OS とブラウザ	バージョン	GPU
Windows 10 IP Build 20201 + IE 11	11.1.20201.0	GeForce GTX 660
Windows 10 IP Build 20201 + Edge 87	87.0.4280.88	GeForce GTX 660
Windows 10 IP Build 20201 + Chrome 87	87.0.4280.88	GeForce GTX 660
Windows 10 IP Build 20201 + Firefox 84	84.0	GeForce GTX 660
macOS 10.16 + Safari	605.1.15	UHD Graphics 617
iOS 14.2 + Safari	605.1.15	Apple A11
iPadOS 14.2 + Safari	605.1.15	Apple A12Z

WebGL 1.0 の対応状況

項目	IE 11	Edge 87	Chrome 87	Firefox 84	macOS 10.16	iOS 14.2	iPadOS 14.2
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個	29個(30個)	29個(30個)	22個(25個)	21個	19個	20個

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

WebGL Extensions 項目	IE 11	Edge 87	Chrome 87	Firefox 84	macOS 10.16	iOS 14.2	iPadOS 14.2
ANGLE_instanced_arrays	○	○	○	○	○	○	○
EXT_blend_minmax		○	○	○	○	○	○
EXT_color_buffer_half_float		○	○	○	○		○(New)
EXT_disjoint_timer_query		○	○	○
EXT_float_blend		○	○	○
EXT_frag_depth		○	○	○	○
EXT_shader_texture_lod		○	○	○	○	○	○
EXT_sRGB		○	○	○	○	○	○
EXT_texture_compression_bptc		〇(New)	〇(New)	〇
EXT_texture_compression_rgtc		〇(New)	〇(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						○(New)	○(New)
WEBGL_compressed_texture_etc						○(New)	○(New)
WEBGL_compressed_texture_etc1						○(New)	○(New)
WEBGL_compressed_texture_pvrtc						△	△
WEBGL_compressed_texture_s3tc	○	○	○	○	○
WEBGL_compressed_texture_s3tc_srgb		○	○	○
WEBGL_debug_renderer_info	○	○	○	○	○	○(New)	○(New)
WEBGL_debug_shaders		○	○	○	○	○(New)	○(New)
WEBGL_depth_texture		○	○	○	○	○	○
WEBGL_draw_buffers		○	○	○	○
WEBGL_explicit_present				[○]
WEBGL_lose_context		○	○	○	○	○	○
WEBGL_multi_draw		○	○
WEBGL_video_texture		[○]	[○]

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

WebGL 2.0 の対応状況

項目	Edge 87	Chrome 87	Firefox 84	macOS 10.16	iOS 14.2	iPadOS 14.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個(21個)	17個(21個)	12個(13個)	(11個)	(12個)	(12個)

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

WebGL 2.0 Extensions 項目	Edge 87	Chrome 87	Firefox 84	macOS 10.16	iOS 14.2	iPadOS 14.2
EXT_color_buffer_float	○	○	○	[〇]	-	-
EXT_color_buffer_half_float	○(New)	○(New)	○	-	-	-
EXT_disjoint_timer_query_webgl2	○	○		-	-	-
EXT_float_blend	○	○	〇	-	-	-
EXT_texture_compression_bptc	○(New)	○(New)	〇	-	-	-
EXT_texture_compression_rgtc	○(New)	○(New)	〇	-	-	-
EXT_texture_filter_anisotropic	○	○	○	[〇]	[〇]	[〇]
EXT_texture_norm16	○(New)	○(New)	-	-	-	-
KHR_parallel_shader_compile	○	○		-	-	-
OES_draw_buffers_indexed	○	○	○	-	-	-
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	-	-	-	-	[〇]	[〇]
WEBGL_compressed_texture_etc1	-	-	-	-	[〇]	[〇]
WEBGL_compressed_texture_pvrtc	-	-	-	-	[△]	[△]
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_video_texture	[○]	[○]	-	-	-	-

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

まとめ

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

■ WebGL Working Group Updates / WebGL Meetup
https://www.khronos.org/assets/uploads/developers/library/2020-virtual-webgl-meetup/01%20WebGL%20WG%20Updates.pdf

圧縮テクスチャのサポート BPTC (BC6H / BC7) 及び RGTC (BC4 / BC5)
高ビット深度テクスチャのサポート
- EXT_texture_norm16
ジオメトリのバッチ処理の改善

残念ながら Chrome Canary で実験的に実装されていた WebGL のコンピュートシェーダ機能は取り除かれることが決まったようです。macOS に容易には移植できないことが分かった為のようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1131991&q=enable-webgl2-compute-context&can=2

かわりに Chrome Canary では WebGPU のコンピュートシェーダが試せるようですので、興味がある方はそちらを調べてみてください。

おわりに

かつて WebGL 1.0 がそうであったように、WebGL 2.0 もようやく「どこでも使える」という状況になりそうです。
残すところは Safari でしょうか。Safari は昨年より ANGLE チームと協力して WebGL 2.0 の実装にあたっており、最近、Technology Preview でデフォルト有効化するようになりました。
現状の実装は、OpenGL ES をバックエンドで実装しており、最終的には、Metal をバックエンドに切り替えることを目標としているようです。
実装状況が気になる方は下記をチェックしてみてください。

■ use ANGLE as the backend for WebKit's WebGL implementation
https://bugs.webkit.org/show_bug.cgi?id=198948
■ WebGL 2 support
https://bugs.webkit.org/show_bug.cgi?id=126404
■ Google / ANGLE
https://github.com/google/angle

過去の調査結果