The development of „real“ 3D applications in the browser – preferably with hardware acceleration- has meanwhile become a complex topic in the world of 3D configurators. In the course of the HTML5 hype, is ist better to use WebGL as an open standard with native browser support but increased programming effort? Or, just to be on the safe side, do you still use the proprietary Flash plug-in in order not to completely exclude Internet Explorer? For online game development, powerful 3D modeling environments such as Blender with WebGL export plugin are also available. Below we give you an overview of current standards, frameworks and 3D engines to shed some light on the jungle.

3D Web

WebGL: Native third dimension in browser with JavaScript and OpenGL.

WebGL is the abbreviation for Web Graphics Library and is a component of most browsers – with the exception of Internet Explorer. Using WebGL, hardware-accelerated 3D graphics can be displayed natively directly in the browser without additional plug-ins. WebGL is not a 3D engine in the classical sense but a standardized low-level 3D graphics programming interface for web browsers, based on OpenGL ES version 2.0 and interacting with JavaScript. Since WebGL is a DOM API, it can be used from all DOM compatible programming languages like JavaScript, Java and Objective C.

WebGL is currently often mentioned in connection with HTML5, although it follows its own specification and is actually not part of HTML5 at all. However, you can use the HTML5 Canvas element to display WebGL content on it and integrate 3D content directly into HTML. WebGL is not a W3C standard either, but is developed by the Khronos Consortium within the WebGL Working Group. Four of the five major browser manufacturers Google, Opera, Mozilla, Apple and 3D developers are involved. Microsoft is the only one outside, so Internet Explorer does not yet support WebGL. Due to the rapid development of WebGL with the latest design specification datet January 6, 2012, it is to be hoped, however, that Microsoft will still come under pressure and soon give in – even if Internet Explorer still persistently refuses in the ninth version. To upgrade the 3D support, either Chrome Frame or the plugin IEWebGL must be installed. Both run under Internet Explorer 6 to 9. Even initial security concerns from Microsoft have not been confirmed.

Helpful framework against enormous programming effort.

One of the criticisms that keeps incoming up in relation to WebGL is the enormous programming effort that developers have to face. Familiarization with the OpenGL Shading Language (GLSL) as your own programming environment and mathematical know-how are essential. But frameworks that make the development of WebGL applications and the rendering of content much easier are springing up like mushrooms. Here are a few examples:

  • SceneJS creates objects via COLLADA files that can be controlled with JavaScript.
  • GLGE masks complicated WebGL access via its own API.
  • Three.js is a 3D environment in JavaScript for game developers.
  • C3DL offer fast Realtime-Rendering.
  • Copperlicht is for 3D games in the browser.
  • SpiderGL is similar to C3DL.
  • PhiloGL is a JavaScript framework designed for performance.
  • X3DOM integrates X3D content with interactive manipulation possibilities.
  • Google Angle is supposed to enable WebGL on Windows without OpenGL drivers.

Here is a light insight to WebGL programming:

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Datenschutzerklärung.
I Accept

If you don`t have it that way with programming, you can also create WebGL content using 3D modeling software such as the open source 3D software Blender or the commercial 3D visualization and animation program Maya from Autodesk. The 3D scenes are then exported to WebGL. This is possible e.g. with Inka3D, a WebGL export module for Maya or the Blender to WebGL Exporter.

Adobe and the third dimension.

And what about Adobe? For a long time there have been „fake“ 3D action script frameworks that actually only give us the impression of three-dimensional content. Technically speaking, three-dimensional scenes are rendered into two-dimensional images using the standard Flash Graphics API. Content generated in this way can be played in the browser with any Flash player version without any problems, but unfortunately its performance is also very limited. The redirection from 3D to 2D via Actionscript generates enormous CPU load and no hardware acceleration is available. Well-known Actionscript frameworks in this area are Papervision3D, Away3D or Alternativa3D. Some of these frameworks already integrate the new „real“ 3D-Stage API from Adobe with the code name Molehill.

Codename Molehill: Adobe Stage 3D API.

With Molehillm Adobe has now introduced a 3D API that helps to solve the performance problem mentioned above and brings the missing hardware acceleration with it. Even though Adobe has recently been caught in the crossfire because they have stopped developing Flash for mobile devices in favor of HTML5, there`s no getting around mentioning Adobe`s Stage 3D API when it comes to in-browser 3D rendering with hardware support alongside WebGL. With Flashplayer version 11, 3D content created using the Stage 3D API can now be played in the browser via the plugin. Molehill uses OpenGL for Mac OS X and DirectX für Windows. In addition, the Stage 3D API provides a fallback solution if no compatible graphics card is found and switches to software-supported rendering – even if the performance will the be moderated, WebGL has not yet been able to do so. A real downer at Molehill, however, is the lack of support for Linux, as can be seen from this post.

Other 3D Techniques and Frameworks.

Unity3D is an integrated authoring environment with a game engine for creating 3D games, other interactive content, visualization and real-time 3D animations. A browser plugin is required for Unity, but the creation of 3D content is much easier than with Molehill or WebGL. Additionally, there are ready-made character-controllers, water simulators, particle generators, a physics engine and more. Also iOS and Android apps are no problem. Unity3D is used for example by Disney and the BBC. As a basic version Unity3D is free of charge and can be used for own developments. The paid Pro version offers extended functionality.

Similar software solutions are e.g. Director, Blender, Virtools, Torque Game Builder or Gamestudio.

X3D.

Extensible 3D or short X3D is the successor of VRML, but has standardized interfaces and more possibilities. Since 2004 X3D is specified as ISO standard. X3D also requires a browser plugin. X3D us ab XML-based description language for 3D models that can be displayed on the web. Like WebGL, X3D is maintained by the Web3D Consortium. In 2001, X3D was adopted by the W3C Consortium as the official standard for 3D content on the Web.

Collada.

Collada (COLLAbortaive Design Activity) is an XML-based open exchange format for data between different 3D applications. In addition to models and textures, settings and applied modification steps can also be exported from program to program. Various manufacturers of 3D programs are involved in the development and specification on the format. Also communities, like those around the open source program Blender, were invited to support and extend the format. The structure of Collada files is defined by XML Schema.

CopperCube.

If you don`t want to commit to one delivery format when creating 3D web content, you can also use the converter fumctions of e. g. CopperCube to export a Molehill and a WebGL version based on 3D studio, Autocad or Collada files.

Conclusion.

Both Molehill and WebGL use low-level APIs to directly access the native capabilities of a computer`s graphics card. In terms of performance, there are hardly any differences to be expected between compiled Actionscript and JavaScript. Even though both technologies are very powerful for 3D development in the web, both are not easy to use – especially if you are nit a dedicated graphics card programmer. For WebGL and Molehill there are helpful frameworks like Three.js or Away3D, which hide a lot of low-level complexity – but the still topic still doesn`t remain without it. For complex 3D game development on the web, the use of a 3d modeling software can also be useful in order to remain format-independent for the first time via various exporters and to make work easier. With regard to mobile 3D applications, WebGL will probably be ahead in the long run, since most mobile browsers are based on the Webkit and WebGL implementation is secure here.