mozilla

Revision 12083 of Using Extensions

  • Revision slug: WebGL/Using_Extensions
  • Revision title: Using Extensions
  • Revision id: 12083
  • Created:
  • Creator: pyalot
  • Is current revision? No
  • Comment forgotten ext suffix; 1 words added, 1 words removed

Revision Content

The extension mechanism

WebGL like it's sister APIs (OpenGL and OpenGL ES) supports extensions. A complete list is available in the khronos webgl extension registry.

A difference between WebGL and other GL APIs is that unless an extension is explicitly requested, it is not available.

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 instance: The vertex array objects 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 vendor prefix will be dropped by vendors upon ratification of the extension. So using an extension with a vendor prefix will only temporarily work. It would be best that if you wish to work with the bleeding edge of extensions 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 a list of strings.

Enabling an extension

Before an extension can be used it has to be enabled.

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

The return value will be 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.

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

Revision Source

<h2>The extension mechanism</h2>
<p>WebGL like it's sister APIs (OpenGL and OpenGL ES) supports extensions. A complete list is available in the <a class="external" href="http://www.khronos.org/registry/webgl/extensions/" title="http://www.khronos.org/registry/webgl/extensions/">khronos webgl extension registry</a>.</p>
<p>A difference between WebGL and other GL APIs is that unless an extension is explicitly requested, it is not available.</p>
<h3>Canonical extension names and vendor prefixes</h3>
<p>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 instance: The vertex array objects 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.</p>
<p>The vendor prefix will be dropped by vendors upon ratification of the extension. So using an extension with a vendor prefix will only temporarily work. It would be best that if you wish to work with the bleeding edge of extensions that you query the canonical extension name as well as the vendor extension name. For instance:</p>
<pre class="brush: js">var ext = (
    gl.getExtension('OES_vertex_array_object') ||
    gl.getExtension('MOZ_OES_vertex_array_object') ||
    gl.getExtension('WEBKIT_OES_vertex_array_object')
);</pre>
<h3>Querying available extensions</h3>
<p>The WebGL context supports querying what extensions are available.</p>
<pre class="brush: js">var available_extensions = gl.getSupportedExtensions();</pre>
<p>Which returns a list of strings.</p>
<h3>Enabling an extension</h3>
<p>Before an extension can be used it has to be enabled.</p>
<pre class="brush: js">var float_texture_ext = gl.getExtension('OES_texture_float');</pre>
<p>The return value will be null if the extension is not supported, or an extension object otherwise.</p>
<h3>Extension objects</h3>
<p>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.</p>
<h2>EXT_texture_filter_anisotropic</h2>
<p>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.</p>
<p>The extension defines two symbols:</p>
<ul> <li>extension_object.MAX_TEXTURE_MAX_ANISOTROPY_EXT: This is the pname argument to the gl.getParameter call, and it returns the maximum available anisotropy.</li> <li>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.</li>
</ul>
<h3>Example</h3>
<pre class="brush: js">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);
}</pre>
Revert to this revision