WebGL: A Look At Current 3D Web Technologies

In March of this year WebGL was released as a specification for rendering 3D content in a browser.  WebGL stands for “web-based graphics library”.  It extends JavaScript using the HTML5 canvas element.  WebGL allows hardware-accelerated 3D graphics to run in the browser without a plug-in.

WebGL is based on the OpenGL and OpenGL ES APIs which power the graphics behind many modern desktop applications and most mobile device platforms (like Apple’s iOS and Google’s Android).  With WebGL, web developers can finally harness the power of your computer’s GPU.

I think it is important to point out here that I’m not talking about the kind of 3D that you need special glasses to see (stereoscopic imaging). I am referring to 3D computer graphics, as in graphics that are designed in three dimensions and can be interacted with in 360°.

What are people doing with WebGL?

There are plenty of 3d WebGL based games and interesting visual distractions out there on the web.  But I’m really interested in how people are using WebGl in the academic and scientific fields.  Here are a few interesting WebGL examples I have found:

Please note that you must have a WebGL capable browser to view the examples below, click here for a list of WebGL ready browsers

  • Brain Surface and Tractography Viewer allows researchers to very rapidly explore processed MRI data in real-time within the web browser using WebGL.
  • BioDigital Human allows for the 3D exploration of human anatomy and conditions using search filters, bookmarking, and cross sections.
  • ChemDoodle lets the user search the Protein Data Bank to load, view, and rotate protein ribbon models and nucleic acid based macromolecules in 3D.
  • Heart Browser visualizes patient specific 4D heart data using WebGL. The application allows users to view the 3D anatomy of the heart with fiber tracts along the epicardium (outer layer of the wall of the heart) and the endocardium (inner layer of the wall of the heart).
  • If you haven’t already noticed, Google maps is now using WebGL to render 3D buildings, smoother transitions between imagery, and the ability to instantly “swoop” into Street View, plugin free.
  • And as an honorable mention check out this  WebGL Bookcase. It lets you browse over 10,000 titles from the Google Books collection.  It was designed like an infinite 3D helix, you can spin it side to side and up and down with your mouse.

Looks Cool, But Is It Safe?

Although lots of praise has been given to WebGL for bringing cutting edge graphics to the browser, much attention has also been drawn to WebGL’s security vulnerabilities.  WebGL is based on OpenGL and is a low-level API that lets untrusted code run on the GPU.  Your graphics card and drivers don’t know the difference between a website running WebGL and a program that you installed running OpenGL.

The issue here is that for a program to execute OpenGL, you have to explicitly install it, whereas WebGL can be executed by simply opening a web page.  Once the web page is loaded, an attacker could potentially freeze a computer (denial of service, or DoS attack) by flooding the GPU with an unending torrent of 3D instructions.  Or, a site could potentially be designed to steal content that is being rendered on the computer’s display, like personal or banking information.

Fortunately these vulnerabilities are only exposed with certain combinations of video card and chipset drivers.  This does not, however, diminish the fact that these remain significant security issues. Of course it is not unusual or unexpected to have security vulnerablities in a new technology.  I can only hope the issues that have been identified are addressed in the next version of WebGL.

3rd Party Technologies

Flash Stage3d (previously known as “Molehill”)

Stage3D is a new application programming interface (API) developed by Adobe for Flash that allows hardware-accelerated 2d/3d content in Flash.  There are commercial and open source frameworks available, they all require a good understanding of Action Script programming to develop a project.  Viewing Stage3D content, of course, requires Flash Player 11.

Unity3d

Unity3D is a standalone application for developing 3d games, although many educational and scientific projects have been developed with it. Unity has become quite popular over the last few years because it allows a developer to develop once and then publish across many platforms. You can publish your entire project to a web ready format that can be viewed in most browsers pending that the Unity-WebPlayer plugin is installed on the system.  It can also publish your project to a standalone application, or the iOS and Android platforms, all the popular consoles, and coming soon, Flash.

Unreal Engine

The Unreal engine has been very popular in the gaming world, but until now, has had no presence on the web.  Epic Games (the developer of the Unreal engine) has recently announced that the Unreal Engine editor will soon support publishing to the Flash format.

Almost There

3D graphics on the web have come a long way. There are many competing technologies out there, all fighting to be the king of the 3D web. It can become very difficult to choose one from the varying tools and file formats for your project.  It still remains to be seen which one, if any, become standardized.

3D web content can be expensive in terms of computational power.  In the past, 3D content in a browser would be rendered by the CPU and could not benefit from your computer’s dedicated graphics processing unit (GPU). Furthermore, If the content was loaded into a website as opposed to generated on the user’s CPU, textures, meshes, animation data, and audio would slow down load times, making the experience less than optimal.

Today’s graphics cards enable hundreds of thousands of polygons to be rendered on your screen in real-time, full-screen, with astonishing fidelity.  I have been looking forward to seeing this level of fidelity come to interactive 3d content on the web for some time.  Not until recently has 3D for the web been able to reach the maturity that we see in modern 3D desktop graphics.  I’m excited to see where the 3D web will take us.


Photos by: ccarlstead and minipixel, Flickr

About the Author

 Avatar

Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens