WebGL 拡張機能の使用
WebGL は姉妹 API (OpenGL や OpenGL ES) と同様に、拡張機能に対応しています。拡張機能の完全な一覧は Khronos WebGL Extension レジストリーで確認できます。
メモ: 他の GL API とは異なり、WebGL の拡張機能は明示的に要求した場合に限り使用できます。
正規拡張機能名とベンダー接頭辞と設定
拡張機能は公式に認められる前に、ブラウザーベンダーが対応する場合があります(ただし、草案段階にあるときに限ります)。このとき、拡張機能名にベンダー接頭辞(MOZ_
や WEBKIT_
など)を付加するか、ブラウザーの設定を切り替えた場合に限り使用できるようにする可能性があります。
最先端の拡張機能を使用したい場合、および公認されたときにも動作し続けるようにしたい(もちろん、その拡張機能が互換性を失うように変更されていないものとします)場合は、ベンダー拡張機能名だけでなく正規拡張機能名も問い合わせます。例えば以下のようにします。
var ext =
gl.getExtension("OES_vertex_array_object") ||
gl.getExtension("MOZ_OES_vertex_array_object") ||
gl.getExtension("WEBKIT_OES_vertex_array_object");
ベンダー接頭辞は次第に採用されなくなっており、ほとんどのブラウザーは実験的な拡張機能をベンダー接頭辞ではなく機能フラグで制御するように実装しています。
機能フラグは以下のようなものです。
- Firefox では
webgl.enable-draft-extensions
- Chromium ベースのブラウザー (Chrome、Opera) では
chrome://flags/#enable-webgl-draft-extensions
名前付けの慣習
WebGL 拡張機能には、 "ANGLE", "OES", "EXT", "WEBGL" という接頭辞が付きます。これらの接頭辞は、由来や意図を反映しています。
ANGLE_
: ANGLE ライブラリー の作者によって書かれた拡張機能です。OES_
とKHR_
: OpenGL ES (OES) または OpenGL API 拡張の機能をミラーする拡張で、それぞれのアーキテクチャ検討委員会 (Khronos) によって承認されたものです。OVR_
: 仮想現実に最適化した拡張機能です。EXT_
: 他の OpenGL ES や OpenGL API の拡張をミラーリングする拡張機能です。WEBGL_
: WebGL に特化した拡張機能で、複数のウェブブラウザーに対応することを意図しています。また、 OpenGL ES や OpenGL API を起源とし、その動作が大幅に変更された拡張機能にも使用されます。
利用可能な拡張機能の問い合わせ
WebGL コンテキストは、利用できる拡張機能を問い合わせる機能に対応しています。
var available_extensions = gl.getSupportedExtensions();
WebGLRenderingContext.getSupportedExtensions()
メソッドは、サポートする拡張機能を収めた文字列配列を返します。
拡張機能一覧
現行の拡張機能の一覧:
拡張機能
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_float_blend
ExperimentalEXT_frag_depth
EXT_shader_texture_lod
EXT_sRGB
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_norm16
KHR_parallel_shader_compile
OES_element_index_uint
OES_fbo_render_mipmap
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
OVR_multiview2
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_lose_context
WEBGL_multi_draw
拡張機能の有効化
拡張機能を使用する前に、 WebGLRenderingContext.getExtension()
を使用して機能を有効化しなければなりません。例えば以下のようにします。
var float_texture_ext = gl.getExtension("OES_texture_float");
拡張機能に対応していない場合の戻り値は null
、対応している場合の返値は拡張機能オブジェクトです。
拡張機能オブジェクト
WebGL のコア仕様で使用できないシンボルや関数を拡張機能で定義している場合は、gl.getExtension()
の呼び出しによって返される拡張機能オブジェクトでそれらを使用できます。