WebGL

Table of contents

  1. 1. Development topics
  2. 2. Resources
  3. 3. Browser compatibility
Page Notifications Off

Introduced in Gecko 2.0

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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 present in Firefox 4 and Google Chrome 9.

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

  • Desktop
  • Mobile

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 4.0 (2.0) 9 -- -- Nightly build
Context name experimental-webgl experimental-webgl n/a n/a experimental-webgl
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
Context name ? ? ? ? ?

HTML5 Documentation
HTML Audio/Video Canvas WebGL SVG MathML LinkRel WebForms Microformats SemanticTags
Javascript Storage IndexDB WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS NewSelectors Typography Visual Effects

Tags (1)

WebGL

Attachments (0)

 

Attach file