search
LoginSignup
7

More than 1 year has passed since last update.

posted at

updated at

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

この記事は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

残念ながら 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

過去の調査結果

各ブラウザにおける WebGL 対応状況(2019年12月時点)
Microsoft Edge(2018年2月)における WebGL 対応状況
Microsoft Edge(2016年7月)における WebGL 対応状況
Microsoft Edge(2015年11月)における WebGL 対応状況
Microsoft Edge(2015年7月)における WebGL 対応状況
IE11(2015年5月)における WebGL 対応状況
IE11(2014年12月)における WebGL 対応状況
IE11(2014年4月)における WebGL 対応状況
IE11(2013年10月)における WebGL 対応状況
IE11 Preview 版における WebGL 対応状況

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7