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

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

はじめに

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

今回の調査対象

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

■ WebGL Report
https://webglreport.com/

テスト環境一覧

OS とブラウザ	バージョン	GPU
Windows 11 バージョン23H2 + Edge 119	119.0.2151.97	GeForce RTX 2060
Windows 11 バージョン23H2 + Chrome 119	119.0.6045.200	GeForce RTX 2060
Windows 11 バージョン23H2 + Firefox 120	120.0.1	GeForce RTX 2060
macOS 14.1.2 + Safari	605.1.15	UHD Graphics 617
iOS 17.1.2 + Safari	605.1.15	Apple A11
iPadOS 17.1.2 + Safari	605.1.15	Apple A12Z

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

WebGL 1.0 の対応状況

項目	Edge 119	Chrome 119	Firefox 120	macOS 14.1	iOS 17.1	iPadOS 17.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	29個(36個)	29個(36個)	27個(28個)	28個	27個	27個

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

WebGL Extensions 項目	Edge 119	Chrome 119	Firefox 120	macOS 14.1	iOS 17.1	iPadOS 17.1
ANGLE_instanced_arrays	○	○	○	○	○	○
EXT_blend_func_extended	[○] (New)	[○] (New)
EXT_blend_minmax	○	○	○	○	○	○
EXT_clip_control	[○] (New)	[○] (New)
EXT_color_buffer_half_float	○	○	○	○	○	○
EXT_depth_clamp	[○] (New)	[○] (New)
EXT_disjoint_timer_query	○	○
EXT_float_blend	○	○	○	○	○	○
EXT_frag_depth	○	○	○	○	○	○
EXT_polygon_offset_clamp	[○] (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)
KHR_parallel_shader_compile	○	○		○	○	○
OES_element_index_uint	○	○	○	○	○	○
OES_fbo_render_mipmap	○	○	○		○	○
OES_standard_derivatives	○	○	○	○	○	○
OES_texture_float	○	○	○	○	○	○
OES_texture_float_linear	○	○	○	○	- (Delete)	- (Delete)
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					○	○
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)
WEBGL_provoking_vertex			○ (New)
WEBGL_video_texture	[○]	[○]
WEBGL_webcodecs_video_frame	- (Delete)	- (Delete)

※ 「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。また、ドラフト機能は「[○]」としています。
※ 昨年時点で iOS/iPadOS 16 の Safari で OES_texture_float_linear 拡張がサポート扱いになっていましたが実際は誤って報告してたということのようです。

WebGL 2.0 の対応状況

項目	Edge 119	Chrome 119	Firefox 120	macOS 14.1	iOS 17.1	iPadOS 17.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	20個(36個)	20個(36個)	14個(15個)	17(17)個	15(15)個	15(15)個

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

WebGL 2.0 Extensions 項目	Edge 119	Chrome 119	Firefox 120	macOS 14.1	iOS 17.1	iPadOS 17.1
EXT_blend_func_extended	[○] (New)	[○] (New)	-	-	-	-
EXT_clip_control	[○] (New)	[○] (New)	-	-	-	-
EXT_color_buffer_float	○	○	○	〇	〇	〇
EXT_color_buffer_half_float	○	○	-	〇	〇	〇
EXT_conservative_depth	[○] (New)	[○] (New)	-	-	-	-
EXT_depth_clamp	[○] (New)	[○] (New)	-	-	-	-
EXT_disjoint_timer_query_webgl2	○	○		-	-	-
EXT_float_blend	○	○	〇	〇	-	-
EXT_polygon_offset_clamp	[○] (New)	[○] (New)	-	-	-	-
EXT_render_snorm	[○] (New)	[○] (New)	-	-	-	-
EXT_texture_compression_bptc	○	○	〇	〇	-	-
EXT_texture_compression_rgtc	○	○	〇	〇	-	-
EXT_texture_filter_anisotropic	○	○	○	〇	〇	〇
EXT_texture_mirror_clamp_to_edge	[○] (New)	[○] (New)	-	-	-	-
EXT_texture_norm16	○	○	-	〇	〇	〇
KHR_parallel_shader_compile	○	○		〇	〇	〇
NV_shader_noperspective_interpolation	[△] (New)	[△] (New)	-	-	-	-
OES_draw_buffers_indexed	○	○	○	〇	〇	〇
OES_sample_variables	[○] (New)	[○] (New)	-	-	-	-
OES_shader_multisample_interpolation	[○] (New)	[○] (New)	-	-	-	-
OES_texture_float	-	-	-	-	-	-
OES_texture_float_linear	○	○	○	〇	- (Delete)	- (Delete)
OES_texture_half_float	-	-	-	-	-	-
OES_texture_half_float_linear	-	-	-	-	-	-
OVR_multiview2	○	○	○	-	-	-
WEBGL_clip_cull_distance	○ (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	[○]	[○]	-	- (Delete)	- (Delete)	- (Delete)
WEBGL_polygon_mode	[○] (New)	[○] (New)	-	-	-	-
WEBGL_provoking_vertex	○ (New)	○ (New)	○ (New)	○ (New)	○ (New)	○ (New)
WEBGL_shader_pixel_local_storage	[○] (New)	[○] (New)	-	-	-	-
WEBGL_stencil_texturing	[○] (New)	[○] (New)	-	-	-	-
WEBGL_video_texture	[○]	[○]	-	-	-	-
WEBGL_webcodecs_video_frame	- (Delete)	- (Delete)	-	- (Delete)	- (Delete)	- (Delete)

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

まとめ

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

■ WebGL and WebGPU Updates / WebGL+WebGPU Meetup, Jan 31, 2023
https://www.khronos.org/developers/linkto/webgl-webgpu-updates-jan23

WebGLアップデート
下記の WebGL 拡張仕様と適合テストへの多数の追加:

WEBGL_provoking_vertex (以前は EXT_～)
getUniformIndices
ANGLE_shader_pixel_local_storage
圧縮フォーマット付きイミュータブルテクスチャ（Immutable textures）
OES_fbo_render_mipmap サンプルコード
sRGBおよび浮動小数点拡張によって有効になるFBOエンコーディングおよびコンポーネントタイプのクエリ

■ WebGL & WebGPU Updates / WebGL + WebGPU Meetup, July 7, 2023
https://www.khronos.org/developers/linkto/webgl-webgpu-updates-july-2023

WebGLアップデート

ブラウザは引き続き、WebGL実装の維持と強化を行っています
適合性テストやドラフト拡張への小さな修正
複数の小さなWebGL拡張が提案されており、含まれることを検討中
ピクセルローカルストレージ拡張の進行状況
AdobeやGoogle Earthを含むパートナーのためのパフォーマンス、正確性、セキュリティの修正

小規模拡張 - 概要

WebGL 1.0/2.0は、OpenGL ES 2.0/3.0に基づいており、後者の持つ多くの制限を受け継いでいますが、これらの制限は基盤となる実装ではもはや存在しないか、そもそも存在していないものもあります
WebGLには、ES 3.xの範囲内にあるいくつかのグラフィックスパイプライン機能が欠けており、これらをブラウザのフロントエンドで公開することで、開発者の生活の質と能力を大幅に向上させることができます
すべての適用可能なANGLEバックエンドでの実装（完了）
パススルーWebGLフロントエンド実装（進行中）

小規模拡張 — 特徴と起源

頂点シェーディング
- カスタムクリップ＆カルディスタンス（2006年、D3D10）
固定機能頂点ポストプロセッシング
- クリップ空間制御（2013年、ARB）
- 深度クリップ制御（2006年、D3D10）
固定機能ラスタライゼーション
- ワイヤーフレームポリゴンレンダリング（2001年、ARB）
- 深度バイアスクランプ（2006年、D3D10）
フラグメントシェーディング
- 保存的深度（2009年、D3D11）
- ノンパースペクティブ補間（2006年、D3D10）
- サンプル組み込み変数（2009年、D3D11）
- マルチサンプル補間（2009年、D3D11）
フラグメント単位の操作
- デュアルソースブレンディング（2006年、D3D10）
レンダリング可能なフォーマット
- 符号付き正規化バッファ（2006年、D3D10）
- 共有指数バッファ（2014年、Apple）
ステンシルテクスチャリング
- 組み合わせたDSからのサンプリング（2006年、D3D10）
追加のテクスチャラッピングモード
- ミラーリングクランプエッジ（2000年、D3D8）

小規模拡張 — 仕様

頂点シェーディング
- WEBGL_clip_cull_distance
固定機能頂点ポストプロセッシング
- EXT_clip_control
- EXT_depth_clamp
固定機能ラスタライゼーション
- WEBGL_polygon_mode
- EXT_polygon_offset_clamp
フラグメントシェーディング
フラグメント単位の操作
- EXT_blend_func_extended
レンダリング可能なフォーマット
- EXT_render_snorm
- WEBGL_render_shared_exponent
ステンシルテクスチャリング
- WEBGL_stencil_texturing
追加のテクスチャラッピングモード
- EXT_texture_mirror_clamp_to_edge

■ WebGL & WebGPU Updates / WebGL + WebGPU Meetup, Nov 7, 2023
https://www.khronos.org/developers/linkto/webgl-webgpu-updates-nov-23

小規模拡張 - 進捗状況

最近のミートアップで、いくつかの小規模なWebGL拡張が取り入れられることが議論されました
これらはすべて実装され、適合性テストが書かれています
現在、以下の5つがコミュニティによって承認されています：
- WEBGL_clip_cull_distance
  - Chromium 119とSafari 17.2でデフォルトで有効
- EXT_clip_control
- EXT_depth_clamp
- EXT_polygon_offset_clamp
- WEBGL_polygon_mode（ただし注意事項あり）
その他の拡張については議論を続けます

シェーダーピクセルローカルストレージのドラフト

Chris Dalton（Rive所属）がWEBGL_shader_pixel_local_storage拡張を開発中です

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

おわりに

早いもので WebGL の調査も今年で10年目になります。

正直なところ個人的に WebGL は保守フェーズに入っていて拡張はもうそれほど増えないんじゃないかなと思ってました。そんなところに、思いのほか新しい拡張が出てきて驚いてます。（まだ使えるものが無いか絞り出している感じでしょうか。）

今年は Chrome 113 で WebGPU が出荷され、新しいWebグラフィックスAPIが出てきていますが、
Firefox や Safari、またモバイル環境といった各プラットフォームへの展開には今しばらくかかるのではと思います。
その為、まだしばらくは WebGL の調査は続けていこうと思います。

その他、参考情報

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

過去の調査結果