From VRML to WebGL: Part IV

Continued from Part I, Part II and Part III

The tools are organized in two parts. In this post we list tools intended for designers with some programming skills. If this is not your case you can skip to Part V but will be interesting and useful to look at the demos here, they enlighten about the power of WebGL.

In this part we present some of the JavaScript middleware libraries for WebGL. They are fundamental tools, intended mainly for creators with some programming skills, to convert and create WebGL content for the on going virtual Web.

4 - Tools for designers with some programming skills

WebGL is a low level programming language, this means its code appears very technical and without a layer of helpful abstraction to assist in reading and learning the syntax. It may frustrate designers with low programming skills who want to produce creative, 3D interactive scenes for webpages, Thankfully a good number of developers have already produced tools and JavaScript libraries to help increase the accessibility of WebGL (a popular one is Three.js). These javascript “wrappers” provide an alternative set of commands for creating objects in 3D space. For creators with low programming skills, but that don't fear coding, these libraries simplify the development of WebGL applications and the conversion from other 3D formats to WebGL

X3DOM
Web3D Consortium's member, Fraunhofer, using WebGL has developed a JavaScript based interface for X3D intended as a useful framework for WebGL development and transition from X3D. It runs in any HTML 5 browser and supports native X3D within an HTML page. Former VRML/X3D creators will find X3DOM interesting since it converts VRML/X3D objects and scenes scenes to WebGL using a X3D interpreter written in JavaScript. It works well for static scenes and simple animations but, as far as we could dig, does not implement the full X3D spec; that would be a major undertaking.

• http://www.x3dom.org
• To convert simple scenes and objects you will appreciate their handy online converter :
  http://www.x3dom.org/?p=1729  (it converts both VRML and X3D files)
  • Example 1: A rope around a tronc. The WebGL object was converted from the original x3d file.
  • Example 2: the scene below, Dijon 3D by Lornet-Design, was previously converted from a X3D original file:
    http://dijon.tourisme-3d.com/dijon-3d/dijon3d.xhtml

This has been a fine development as the projects available in the site demonstrate. The major interest of X3DOM is for X3D developers.

Other JavaScript middleware libraries for WebGL

• Three.js (http://threejs.org), is the most popular and has become the de facto platform for WebGL development.
  A quick browse of its demos page shows how powerful and practical this library is. Threejs can also convert to WebGL from many popular formats including VRML. Look at this (on the fly) VRML conversion example (on the demos page) or this larger one.
  Try three.js with these fine and easy illustrated lessons: WebGL With Three.js
   
• A list of other Javascript libraries for WebGL:
  http://www.webgl-game-engines.com/
   

In the final part (part V) we review 3D graphical editors to create WebGL content for the on going virtual Web.

Vitor Cardoso