WebGL & SVG

Federico Strazzullo
Dotuscomus
Play (15min) Download: MP4 | MP3

The objective of this presentation is to show how it is possible to combine SVG and WebGL –3D file in the .dae format– into one single SVG document and demonstrating some level of interactivity.

This presentation would require a slot of 5 to 15 minutes. It is articulated around three major points:

– What is WebGL

– How it functions

– How a Collada document can be embedded into a SVG document and made to work.

The demonstration will be made using the GEMï Web OS version 2 and the WebGL document will run into one of its windows.

WebGL is a specification based on Open GL ES 2.0, with JavaScript binding. It is designed to display 3D content on the web without the need of a plug–in. Nightly builds of web browsers like Minefield (Firefox), Chromium (Chrome), Webkit (Safari) and soon Opera, are able to render 3D.

WebGL enabled browsers use the computer’s hardware resources for rendering 3D contents. This is currently not available for SVG contents. Whole scenes like those in 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, the mouse to look around, etc.). At time of writing there are already several libraries, most of which are free, to help authors integrate their works with WebGL.

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.

Follows then the demonstration, which will show the chosen WebGL document embedded within GEMï and wrapped into one of its windows. I will then use the keyboard and the mouse to control the 3D scene, the window’s zoom and pan tools which will act concurrently, while not having negative effects, with the 3D scene, as well as the window’s commands (minimize, restore, full, close) and the menu commands reopen closed document.

The WebGL document format that will be used is Collada (.dae), an XML dialect, which seems to be the most recurrent format used to import models and which is able to incorporate all the scene’s elements.

The demo will be shown in the latest available build of Minefield (Firefox) and possibly Chromium.