mozilla

Using Extensions

The extension mechanism

WebGL, like its sister APIs (OpenGL and OpenGL ES), supports extensions. A complete list of extensions is available in the khronos webgl extension registry.

Note: In WebGL, unlike in other GL APIs, extensions are only available if explicitly requested.
Gecko 27 note
(Firefox 27 / Thunderbird 27 / SeaMonkey 2.24)

Starting with Firefox 27, MOZ_ prefixed WebGL extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension strings instead. (bug 924176)

Canonical extension names and vendor prefixes

Extensions may be supported by browser vendors before being officially ratified (but only when they are in draft stage). In that case, their name is prefixed by the vendor prefix (MOZ_, WEBKIT_, etc.). For example, the vertex array object's canonical name is OES_vertex_array_object, but since this extension is at draft stage at the time of writing it can only be obtained with MOZ_OES_vertex_array_object in Firefox.

The vendorprefix will be dropped by vendors upon ratification of the extension. So using an extension with a vendor prefix will only work temporarily.

If you wish to work with the bleeding edge of extensions, and want to keep working on upon ratification (assuming, of course, that the extension doesn't change in incompatible ways), that you query the canonical extension name as well as the vendor extension name. For instance:

var ext = (
  gl.getExtension('OES_vertex_array_object') ||
  gl.getExtension('MOZ_OES_vertex_array_object') ||
  gl.getExtension('WEBKIT_OES_vertex_array_object')
);

Querying available extensions

The WebGL context supports querying what extensions are available.

var available_extensions = gl.getSupportedExtensions();

Which returns an array of strings, one for each supported extension.

Enabling an extension

Before an extension can be used it has to be enabled. For example:

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

The return value is null if the extension is not supported, or an extension object otherwise.

Extension objects

If an extension defines specific symbols or functions that are not available in the core specification of WebGL, they will be availableon the extension object returned by the call to gl.getExtension().

EXT_texture_filter_anisotropic

Anisotropic filtering improves the quality of mipmapped texture access when viewing a textured primitive at an oblique angle. Using just mipmapping, these lookups have a tendency to average to grey.

The extension defines two symbols:

  • extension_object.MAX_TEXTURE_MAX_ANISOTROPY_EXT: This is the pname argument to the gl.getParameter() call, and it returns the maximum available anisotropy.
  • extension_object.TEXTURE_MAX_ANISOTROPY_EXT: This is the pname argument to the gl.texParameter() and gl.getTexParameter{f,i}() call and sets the desired maximum anisotropy for a texture.

Example

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

Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.

The extension defines four new texture types:

  • 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

These compressed texture formats can be used in two functions: compressedTexImage2D and compressedTexSubImage2D.

Example

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);

Document Tags and Contributors

Contributors to this page: Sheppy, fscholz, Jeremie, bjacob, jbuck, pyalot, ethertank, kohei.yoshino
Last updated by: fscholz,