WebGL is an open standard for creating 3D graphics. It can create 2D graphics but most likely if you are creating 2D graphics you will wish to use another specification. A the moment it is not supported in Internet Explorer. It is not clear when support will become available. WebGL uses the same standard as OpenGL ES 2.0. If you are used to creating OpenGL applications you will be right at home. If you are not used to OpenGL there may be a sharp learning curve. WebGL, however, will allow you to create 3D graphics that are not possible using any other formats.

WebGL uses the same Canvas element as Canvas2D. This time a different ’3D’ context is retrieved. The 3D context conforms to the WebGL standard run by the Khronos group.

Examples:
Chrome experiments
Water demo

Tutorials:
NeHe ports
Khronos introduction

CSS was previously used to described a static layout. Now, it can used to add transitions, transforms and most interestingly, animations.

CSS animations are based around ‘keyframing’. This is very similar to ‘tweening’ in Flash. Markers are set for values of an object at a given time. Transitions with easing equations will then describe the type of movement between them.

This appears to be very useful for web designers to add fades and animations to their web pages. The main drawback is that it is not as widely supported as SVG or Canvas2D.

There is a tool currently in preview release from Adobe called “Edge”. Adobe Edge allows you to build up very complex animation using this type of key-framing. It is very intuitive and certainly worth investigation by Flash animators.

Examples:
CSS3 image gallery
CSS3 Spiderman Animation
3D cube

Tutorials:
CSS keyframes
The principals of animation in CSS

Scalar Vector Graphics is at a fundamentally higher level than canvas, a level we are more used to dealing with on the Flash platform.

Each drawn shape is remembered as an object in the SVG document, similar to the display list, which is subsequently rendered to the screen. Each object can have animations, filters and events attached to it, in a similar way to one might expect with ActionScript object.

Child Objects are usually described within the HTML page, however, they can be added and removed at run-time using JavaScript. The JavaScript is then used to perform operations to alter the objects. CSS can also be applied to the objects.

SVG is particularly useful for full page graphics, charts and event driven animations.

Examples:
SVG-WOW
SVG filter example

Tutorials:
iProgrammer
A list apart

Canvas 2D is based on a simple tag within your markup. Once it is added you can call a ‘context’ for this tag in your JavaScript. This context gives you a list of methods you can use to alter a 2D pixel grid. Using canvas is like having a bitmap image, where you can change the pixels in that bitmap at any time.

Canvas is relatively low level compared with Flash. There is no display list equivalent but complex shapes, images and text can all be drawn. If you wish to use a display list, there are ‘scene graph’ libraries for canvas. For example, try ‘EaselJS’ by Grant Skinner.

On initial investigation, it appears to be good for small screen sizes and for small but complex animations. This particularly includes particle systems, lightning generators and other cg snippets. Full 2D games can also be easily created.

Examples:
Pirates Love Daisies
The browser Fountain

Tutorials:
Mozilla Canvas Tutorial

When we are referring to ‘HTML 5’ we actually mean additions three main technologies used for creating web pages. Firstly, HTML5 is a new extension of the markup language used to define what present is on the page. Secondly, CSS3 is a new version of the language used to describe how theses objects appear on the page. JavaScript, the open standard page script which is very similar to ActionScript has also had one or two calls added. These new calls are centred around the Document object model. This simply refers to a hierarchy of how JavaScript sees the page. It is very similar to the display list in Flash.

The emerging new standard is a platform with multiple separate API’s. A well formulated presentation listing all new elements of HTML5 with examples can be found at HTML5 rocks. There are many other non-graphics features which may be useful when planning a project. To get a full overview of the graphics capabilities available there are a variety of technologies on which we need to focus. These include:

Cavnas2D
SVG
CSS3 Transitions, Transformations and Animations.
WebGL

Another invaluable resource is caniuse. It is a site where you can search for any HTML feature and see in which browsers it is supported or will be supported.

There will be 4 more parts to this group of posts. Each will give a 30 second overview to one of the 4 API’s listed above.