Using WebGL extensions

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

Canonical extension names, vendor prefixes and preferences

Extensions may be supported by browser vendors before being officially ratified (but only when they are in draft stage). In that case, their name can be prefixed by the vendor prefix (MOZ_, WEBKIT_, etc.) or the extension is only available once a browser preference has been toggled.

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

Vendor prefix have been discouraged more and more and thus most browser implement experimental extensions behind a feature flag rather than vendor prefix.

The feature flags are:

• webgl.enable-draft-extensions in Firefox
• chrome://flags/#enable-webgl-draft-extensions in Chromium based browsers (Chrome, Opera).

Querying available extensions

The WebGL context supports querying what extensions are available.

var available_extensions = gl.getSupportedExtensions();

The WebGLRenderingContext.getSupportedExtensions() method returns an array of strings, one for each supported extension.

Extension list

The current extensions are:

Enabling an extension

Before an extension can be used it has to be enabled using WebGLRenderingContext.getExtension(). 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 available on the extension object returned by the call to gl.getExtension().

Compatibility of extensions

[1] Toggling the webgl.enable-draft-extensions preference in about:config is required.

[2] This was prefixed as MOZ_EXT_texture_filter_anisotropic in prior versions.

See also

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

--- move the following to dedicated extension pages ---

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