WebGL is a specification based on OpenGL ES 2.0. This is a JavaScript API which gives direct access to OpenGL ES. OpenGL ES now enables fully programmable 3D graphics. It consists of well-defined subsets of desktop OpenGL, creating a flexible and powerful low-level interface between software and graphics acceleration. It is designed to display 3D content in a browser without the need of a plug–in.

Nightly builds of web browsers like Minefield (Firefox), Chromium (Chrome), Safari and soon Opera, are WebGL enabled. It is also possible to use hardware accelerated 2D and 3D applications, still with no plug-ins.

WebGL enabled browsers are capable to use the computer's hardware resources for rendering 3D contents. Whole scenes like those in animation movies and video games can be rendered, and the interactivity with Human Interface Devices is fully implemented (keyboard for navigating in the scene or for changing parameters, and the mouse to look around).

At this time there are already several libraries, most of which open source, to help authors integrate their works with WebGL. The library I'm using here is GLGE.

It is very easy to anticipate on the terrific possibilities that can result by combining the two technologies: powerful applications in the scientific, educational, architecture or any other domain. For example, the creation of real life places for virtual visit, combining the SVG and WebGL animation and transformation tools. Instead of targeting desktop environments only, web browsers of the next generation will do the job, without the need of installing anything.

Two libraries are used for this work, the Pergola SVG library and the GLGE WebGL library.

The Pergola library is used for creating a window with zoom and pan tools, capable of loading, in remote or local mode, another SVG document containing the Collada document. The 3D file is embedded in a HTML5 <canvas> element through the <foreignObject> element.

The GLGE library has been chosen for giving good overall results, while being relatively easy to use.

The GLGE library carries out the following tasks:

• build the 3D scene, with cameras, lighting, and so forth
• manage the translations, rotations and scaling
• map the keyboard and mouse for navigating in the scene, as well as other functions
• import the specific Collada documents

Firefox has been chosen for giving the most satisfactory results. Note however that not all nightly builds of Minefield will actually render the demos. We found the 4.0b2 build of Firefox to be the most consistent build. WebGl must be enabled through about:config.

I will show how the SVG transformation tools interact with the keyboard and mouse commands of the GLGE library.

Time to see what it all looks like. We are going to see two examples. The first, an animal, would be appropriate in a game or animation context; the second, a molecule, relates more to the scientific applications domain.

The objects are presented spinning, and I am going to show how to navigate in the scene, without attaining nevertheless the richness of 3D software functions and commands.

Additionally, other SVG elements can be added to the 3D scene or anywhere in the User Space (development with demonstration follows).

During the demonstration the techniques, the structure and the organization of the files will be examined in detail, time permitting.

http://www.khronos.org/
http://www.collada.org/

http://www.dotuscomus.com/Pergola/
http://www.glge.org/
http://www.ambiera.com/copperlicht/index.html
http://www.c3dl.org/

Shark: http://www.dotuscomus.com/pergola/download/pergola_1.1/Examples/SVG-WebGL/Shark/loader.svg
Chiral: http://www.dotuscomus.com/pergola/download/pergola_1.1/Examples/SVG-WebGL/Chiral/loader.svg
Package: http://www.dotuscomus.com/pergola/download/pergola_1.1/Examples/SVG-WebGL/SVG-WebGL.zip

Firefox 4.0b2