Embedding WebGL documents in SVG

Author: Federico Strazzullo


Federico Strazzullo is a graduate in graphic arts at Creapole, Paris. He is a member of the Dotuscomus crew since February 2010 and he is in charge of the company's 3D department.


The objective of this presentation is to show how it is possible to mix SVG and WebGL –3D document in the Collada format– into one single SVG document and demonstrating some level of interactivity. The demonstration will be made using SVG and WebGL libraries.

Table of Contents

  1. 1. What is WebGL?
  2. 2. Functioning and purposes
    1. 2.1 The environment
    2. 2.2 The method employed
  3. 3. Demonstration
  4. 4. Resources
    1. 4.1 Bibliography
    2. 4.2 API documentations
    3. 4.3 Libraries
    4. 4.4 Demos
    5. 4.5 Browsers
1. What is WebGL?

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.

2. Functioning and purposes
The environment

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.

The method employed

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:

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.

3. Demonstration

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.

4. Resources

Andrew Glassner: Principles of Digital Image Synthesis — The Morgan Kaufmann Series in Computer Graphics.

D. Luebke, M. Reddy, J. Cohen, A. Varshney, B. Watson, R. Huebner: Level of Detail for 3D Graphics — The Morgan Kaufmann Series in Computer Graphics.

API documentations