mozilla

Revision 6147 of WebGL

  • Revision slug: WebGL
  • Revision title: WebGL
  • Revision id: 6147
  • Created:
  • Creator: zorkzero
  • Is current revision? No
  • Comment fixed link to WebGL specification; 8 words removed

Revision Content

{{ gecko_minversion_header("2.0") }}

WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 canvas elements. Support for WebGL is coming in Firefox 4; you can try it the Firefox 4 betas or in trunk builds.

Note: The specification for WebGL is still in draft form and is subject to change.

Development topics

Getting started with WebGL
How to set up a WebGL context.
Adding 2D content to a WebGL context
How to render simple flat shapes using WebGL.
Using shaders to apply color in WebGL
Demonstrates how to add color to shapes using shaders.
Animating objects with WebGL
Shows how to rotate and translate objects to create simple animations.
Creating 3D objects using WebGL
Shows how to create and animate a 3D object (in this case, a cube).
Using textures in WebGL
Demonstrates how to map textures onto the faces of an object.
Lighting in WebGL
How to simulate lighting effects in your WebGL context.
Animating textures in WebGL
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.

Resources

WebGL Specification
The WebGL specification.
Khronos WebGL site
The main web site for WebGL at the Khronos Group.
Learning WebGL
A site with tutorials on how to use WebGL.
The WebGL Cookbook
A web site with handy recipes for writing WebGL code.
Sylvester
An open source library for manipulating vectors and matrices.
Planet WebGL
A feed aggregator for people involved in the WebGL community.

Browser compatibility

Browser Basic support .getContext(context)
Internet Explorer --- ---
Firefox (Gecko) 4.0 (2) experimental-webgl
Opera --- ---
Chrome 9 experimental-webgl
Safari 6 (in Safari nightlies) experimental-webgl

{{ HTML5ArticleTOC() }}

{{ languages( { "es": "es/WebGL", "de": "de/WebGL" } ) }}

Revision Source

<p>{{ gecko_minversion_header("2.0") }}</p>
<p>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <a href="/en/HTML/Canvas" title="En/html/canvas"><code>canvas</code></a> elements. Support for WebGL is coming in <a href="/en/Firefox_4_for_developers" title="en/Firefox 4 for developers">Firefox 4</a>; you can try it the <a class=" external" href="http://firefox.com/beta" title="http://firefox.com/beta">Firefox 4 betas</a> or in <a class=" external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">trunk builds</a>.</p>
<div class="note"><strong>Note:</strong> The specification for WebGL is still in draft form and is subject to change.</div>
<table class="mainpage-table"> <tbody> <tr> <td width="50%"> <h2>Development topics</h2> <dl> <dt><a href="/en/WebGL/Getting_started_with_WebGL" title="en/WebGL/Getting started with WebGL">Getting started with WebGL</a></dt> <dd>How to set up a WebGL context.</dd> <dt><a href="/en/WebGL/Adding_2D_content_to_a_WebGL_context" title="en/WebGL/Adding 2D content to a WebGL context">Adding 2D content to a WebGL context</a></dt> <dd>How to render simple flat shapes using WebGL.</dd> <dt><a href="/en/WebGL/Using_shaders_to_apply_color_in_WebGL" title="en/WebGL/Using shaders to apply color in WebGL">Using shaders to apply color in WebGL</a></dt> <dd>Demonstrates how to add color to shapes using shaders.</dd> <dt><a href="/en/WebGL/Animating_objects_with_WebGL" title="en/WebGL/Animating objects with WebGL">Animating objects with WebGL</a></dt> <dd>Shows how to rotate and translate objects to create simple animations.</dd> <dt><a href="/en/WebGL/Creating_3D_objects_using_WebGL" title="en/WebGL/Creating 3D objects using WebGL">Creating 3D objects using WebGL</a></dt> <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd> <dt><a href="/en/WebGL/Using_textures_in_WebGL" title="en/WebGL/Using textures in WebGL">Using textures in WebGL</a></dt> <dd>Demonstrates how to map textures onto the faces of an object.</dd> <dt><a href="/en/WebGL/Lighting_in_WebGL" title="en/WebGL/Lighting in WebGL">Lighting in WebGL</a></dt> <dd>How to simulate lighting effects in your WebGL context.</dd> <dt><a href="/en/WebGL/Animating_textures_in_WebGL" title="en/WebGL/Animating textures in WebGL">Animating textures in WebGL</a></dt> <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> </dl> </td> <td width="50%"> <h2>Resources</h2> <dl> <dt><a class=" link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL Specification</a></dt> <dd>The WebGL specification.</dd> <dt><a class=" external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a></dt> <dd>The main web site for WebGL at the Khronos Group.</dd> <dt><a class=" external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> <dd>A site with tutorials on how to use WebGL.</dd> <dt><a class=" external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt> <dd>A web site with handy recipes for writing WebGL code.</dd> <dt><a class=" external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> <dd>An open source library for manipulating vectors and matrices.</dd> <dt><a class=" external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> <dd>A feed aggregator for people involved in the WebGL community.</dd> </dl> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Basic support</th> <th><code>.getContext(<em>context</em>)</code></th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>4.0</strong> (2)</td> <td>experimental-webgl</td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Chrome</td> <td>9</td> <td>experimental-webgl</td> </tr> <tr> <td>Safari</td> <td>6 (in Safari nightlies)</td> <td>experimental-webgl</td> </tr> </tbody>
</table>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "es": "es/WebGL", "de": "de/WebGL" } ) }}</p>
Revert to this revision