グラフィックス全般Advent Calendar 2024

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

Posted at 2024-12-08

この記事はグラフィックス全般 Advent Calendar 2024（※）の8日目の記事です。

はじめに

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

今回の調査対象

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

■ WebGL Report
https://webglreport.com/

テスト環境一覧

OS とブラウザ	バージョン	GPU
Windows 11 バージョン24H2 + Edge 131	131.0.2903.86	GeForce RTX 2060
Windows 11 バージョン24H2 + Chrome 131	131.0.6778.109	GeForce RTX 2060
Windows 11 バージョン24H2 + Firefox 133	133.0	GeForce RTX 2060
macOS 14.7.1 + Safari	605.1.15	UHD Graphics 617
iOS 18.1.1 + Safari	605.1.15	Apple A11
iPadOS 18.1.1 + Safari	605.1.15	Apple A12Z

※ Chrome 101 以降はユーザーエージェントのマイナーバージョンが非表示となっている為、Edge/Chrome のバージョン情報はヘルプメニューにて調査しています。

WebGL 1.0 の対応状況

項目	Edge 131	Chrome 131	Firefox 133	macOS 14.7	iOS 18.1	iPadOS 18.1
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	35個	35個	27個(28個)	34個	32個	32個

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

WebGL Extensions 項目	Edge 131	Chrome 131	Firefox 133	macOS 14.7	iOS 18.1	iPadOS 18.1
ANGLE_instanced_arrays	○	○	○	○	○	○
EXT_blend_minmax	○	○	○	○	○	○
EXT_clip_control	○	○		○ (New)	○ (New)	○ (New)
EXT_color_buffer_half_float	○	○	○	○	○	○
EXT_depth_clamp	○	○		○ (New)	○ (New)	○ (New)
EXT_disjoint_timer_query	○	○
EXT_float_blend	○	○	○	○	- (Delete)	- (Delete)
EXT_frag_depth	○	○	○	○	○	○
EXT_polygon_offset_clamp	○	○		○ (New)	○ (New)	○ (New)
EXT_shader_texture_lod	○	○	○	○	○	○
EXT_sRGB	○	○	○	○	○	○
EXT_texture_compression_bptc	○	○	○	○
EXT_texture_compression_rgtc	○	○	○	○
EXT_texture_filter_anisotropic	○	○	○	○	○	○
EXT_texture_mirror_clamp_to_edge	○	○		○ (New)	○ (New)	○ (New)
KHR_parallel_shader_compile	○	○		○	○	○
OES_element_index_uint	○	○	○	○	○	○
OES_fbo_render_mipmap	○	○	○	○ (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_blend_func_extended	○ (New)	○ (New)		○ (New)	○ (New)	○ (New)
WEBGL_color_buffer_float	○	○	○	○	○	○
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_buffers	○	○	○	○	○	○
WEBGL_explicit_present			[○]
WEBGL_lose_context	○	○	○	○	○	○
WEBGL_multi_draw	○	○		○	○	○
WEBGL_polygon_mode	○	○		○ (New)	○ (New)	○ (New)
WEBGL_provoking_vertex			○
WEBGL_video_texture	- (Delete)	- (Delete)
WEBGL_webcodecs_video_frame

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

WebGL 2.0 の対応状況

項目	Edge 131	Chrome 131	Firefox 133	macOS 14.7	iOS 18.1	iPadOS 18.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	35個	35個	14個(15個)	31個	30個	30個

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

WebGL 2.0 Extensions 項目	Edge 131	Chrome 131	Firefox 133	macOS 14.7	iOS 18.1	iPadOS 18.1
EXT_clip_control	○	○	-	○ (New)	○ (New)	○ (New)
EXT_color_buffer_float	○	○	○	○	○	○
EXT_color_buffer_half_float	○	○	-	○	○	○
EXT_conservative_depth	○	○	-	○ (New)	○ (New)	○ (New)
EXT_depth_clamp	○	○	-	○ (New)	○ (New)	○ (New)
EXT_disjoint_timer_query_webgl2	○	○		-	-	-
EXT_float_blend	○	○	○	○	-	-
EXT_polygon_offset_clamp	○	○	-	○ (New)	○ (New)	○ (New)
EXT_render_snorm	○	○	-	○ (New)	○ (New)	○ (New)
EXT_texture_compression_bptc	○	○	○	○	-	-
EXT_texture_compression_rgtc	○	○	○	○	-	-
EXT_texture_filter_anisotropic	○	○	○	○	○	○
EXT_texture_mirror_clamp_to_edge	○	○	-	○ (New)	○ (New)	○ (New)
EXT_texture_norm16	○	○	-	○	○	○
KHR_parallel_shader_compile	○	○		○	○	○
NV_shader_noperspective_interpolation	△	△	-	△ (New)	△ (New)	△ (New)
OES_draw_buffers_indexed	○	○	○	○	○	○
OES_sample_variables	○	○	-	○ (New)	○ (New)	○ (New)
OES_shader_multisample_interpolation	○	○	-	○ (New)	○ (New)	○ (New)
OES_texture_float	-	-	-	-	-	-
OES_texture_float_linear	○	○	○	○	-	-
OES_texture_half_float	-	-	-	-	-	-
OES_texture_half_float_linear	-	-	-	-	-	-
OVR_multiview2	○	○	○	-	-	-
WEBGL_blend_func_extended	○ (New)	○ (New)	-	○ (New)	○ (New)	○ (New)
WEBGL_clip_cull_distance	○	○	-	○ (New)	○ (New)	○ (New)
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_polygon_mode	○	○	-	○ (New)	○ (New)	○ (New)
WEBGL_provoking_vertex	○	○	○	○	○	○
WEBGL_shader_pixel_local_storage	○	○	-	-	-	-
WEBGL_render_shared_exponent	○	○	-	○ (New)	○ (New)	○ (New)
WEBGL_stencil_texturing	-	-	-	-	○ (New)	○ (New)
WEBGL_video_texture	- (Delete)	- (Delete)	-	-	-	-
WEBGL_webcodecs_video_frame	- (Delete)	- (Delete)	-	-	-	-

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

まとめ

WebGLの動向は仕様策定元のKhronos Groupsにより定期的にオンラインミートアップが開かれ資料が公開されています。
資料より主な更新内容について抜き出してみました。

■ WebGL and WebGPU Updates / WebGL+WebGPU Meetup, July 23, 2024
https://www.khronos.org/developers/linkto/webgl-webgpu-updates-july-2024

WebGLアップデート
下記の WebGL 拡張仕様がコミュニティ承認に昇格:

OES_sample_variables : サンプル変数を使用可能にする拡張
OES_shader_multisample_interpolation : マルチサンプル補間機能の提供
EXT_render_snorm: 符号付き正規化数値の描画をサポート

ANGLEのMetalバックエンド

macOS/iOS上でWebKitのWebGL実装に使用されており、まもなくmacOS上のChromiumでも使用予定
WebGL 2.0.1適合スイートに完全にパス

■ WebGL and WebGPU Updates / WebGL+WebGPU Meetup, November 5, 2024
https://www.khronos.org/developers/linkto/webgl-webgpu-updates-november-2024

ANGLEのMetalバックエンド

macOS/iOS上のWebKitのWebGL実装で使用され、Apple Silicon Mac上のChromiumで利用可能
まもなくIntel Mac上のChromiumでも利用可能予定

おわりに

2024年の主だった変更箇所としては

MacOS 版の Chromium として ANGLE / Metal バックエンドの実装が進行
Safari について 2023年に引き続き小規模なWebGL拡張の追加が継続
といったところでしょうか。

Firefox の WebGL 拡張の実装が Chromium / Safari に比べて遅れ気味なのが少し気がかりです。もしかしたら WebGPU の実装を優先しているのかもしれませんね。

その他、参考情報

■ サンプルで理解する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/

過去の調査結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up