HOWTOlabs  
 Services     Software     Commentary     Design     Astral Musings   
three.js
Add 3D graphics to almost any web page

rickatech 2015-08-31

three.js

Related [edit]

Elsewhere

  
  
  
  
  

The concept of straight forward 3D graphics enhanced web pages has been around for a while, at least since the advent of VRML in the 1990's.  However, 3D graphics without tight dynamic integration with other web page elements has been a critical weakness.  For static 3D content on a web page, it has been much more straight forward to simply inline a repeating movie, avoiding 3D graphics entirely - its looks great and is easy to add to a web page.  For real 3D graphics to be useful it has to integrate tightly with other elements on the page.  Until robust widespread javascript support established itself, adding 3D graphics to web pages simply was just not practical.

Although WebGL has been around for at least a decade, the inclusion of more sophistical graphics engine support in popular web browsers (thank you Mozilla!) and helping expose 3D graphics elements to javascript has revolutionized what it means to incorporate 3D into a web page.  More recently since 2014, all late model iOS and Android mobile devices support accelerated 3D WebGL as well.

To be sure, a hand coded application that carefully takes over computer resources for sophisticated games, science, and industrial applications will always be superior to what a web browser can achieve.  However WebGL is now available to any web developer who can operate a text editor, and the ubiquity of web applications that can now rely on solid 3D graphics features is at hand.

Scene Rendering

Elsewhere

Typically 3D objects are added to a master scene object before rendering is triggered.  Ideally javascript requestAnimationFrame directive is used to frequently trigger rendering while browser window is visible, and which withholds rendering otherwise.  This means any real time scene adjustments will need to use a separate update mechanism to adjust scene accordingly (e.g. timers, asynchronous server requests, ...). 

zap technologies
tablet | printable