WebGL 拡張機能を使用する

WebGL は姉妹 API (OpenGL や OpenGL ES) と同様に、拡張機能をサポートします。拡張機能の完全な一覧は khronos webgl extension registry で確認できます。

Canonical 拡張機能名とベンダー接頭辞と設定

拡張機能は公式に認められる前に、ブラウザベンダーがサポートする場合があります (ただし、草案段階にあるときに限ります)。このとき、拡張機能名にベンダー接頭辞 (MOZ_ や WEBKIT_ など) を付加するか、ブラウザの設定を切り替えた場合に限り使用できるようにする可能性があります。

最先端の拡張機能を使用したい場合、および公認されたときにも動作し続けるようにしたい (もちろん、その拡張機能が互換性を失うように変更されていないものとします) 場合は、ベンダー拡張機能名だけでなく canonical 拡張機能名も問い合わせます。例えば以下のようにします:

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 コンテキストは、使用できる拡張機能を問い合わせる機能をサポートしています。

var available_extensions = gl.getSupportedExtensions();

WebGLRenderingContext.getSupportedExtensions() メソッドは、サポートする拡張機能を収めた文字列配列を返します。

拡張機能一覧

現行の拡張機能の一覧:

拡張機能を有効化する

拡張機能を使用する前に、WebGLRenderingContext.getExtension() を使用して機能を有効化しなければなりません。例えば:

var float_texture_ext = gl.getExtension('OES_texture_float');

拡張機能をサポートしていない場合の戻り値は null、サポートしている場合の戻り値は拡張機能オブジェクトです。

拡張機能オブジェクト

WebGL のコア仕様で使用できないシンボルや関数を拡張機能で定義している場合は、gl.getExtension() の呼び出しによって返される拡張機能オブジェクトでそれらを使用できます。

ブラウザ実装状況

[1] about:config で設定項目 webgl.enable-draft-extensions を切り替えなければなりません。

[2] これより前のバージョンでは接頭辞付きの MOZ_EXT_texture_filter_anisotropic になっています。

関連情報

• WebGLRenderingContext.getSupportedExtensions()
• WebGLRenderingContext.getExtension()
• webglreport.com
• webglstats.com

--- 以降の内容は個別のページに移動する ---

EXT_texture_filter_anisotropic

異方性フィルタリングは、テクスチャを貼り付けた物体を斜めの角度から見る場合の、ミップマップテクスチャの品質を向上させます。ミップマップしか使用しないと、外見が全体的にグレーへ寄る傾向があります。

この拡張機能では 2 つのシンボルを定義しています:

• extension_object.MAX_TEXTURE_MAX_ANISOTROPY_EXT: これは gl.getParameter() の呼び出し用の pname パラメータであり、使用できる最大の異方性を返します。
• extension_object.TEXTURE_MAX_ANISOTROPY_EXT: これは gl.texParameter() や gl.getTexParameter{f,i}() の呼び出し用の pname パラメータであり、テクスチャに対して希望する異方性を設定します。

例

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
var ext = (
  gl.getExtension('EXT_texture_filter_anisotropic') ||
  gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
  gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
);
if (ext){
  var max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, max);
}

WEBGL_compressed_texture_s3tc

圧縮テクスチャは、GPU がテクスチャを保存するために必要なメモリ量を削減します。より高解像のテクスチャを使用する、あるいは同じ解像度でより多くのテクスチャを使用することができます。

この拡張機能では 4 種類のテクスチャタイプを新たに定義します:

• extension_object.COMPRESSED_RGB_S3TC_DXT1_EXT
• extension_object.COMPRESSED_RGBA_S3TC_DXT1_EXT
• extension_object.COMPRESSED_RGBA_S3TC_DXT3_EXT
• extension_object.COMPRESSED_RGBA_S3TC_DXT5_EXT

圧縮テクスチャのフォーマットは、2 つの関数で使用できます: compressedTexImage2D および compressedTexSubImage2D

例

var ext = (
  gl.getExtension("WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc")
);
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT5_EXT, 512, 512, 0, textureData); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);