Happy Buddha and Altair HyperView®: Million Triangle Meshes

What if a person could play with huge online 3D models? What if you wanted to view the dynamic results of your analysis online? Wouldn’t it be great if you only needed to understand the mechanical analytics of the component, and didn’t need to install anything? What if there were a solution that allowed you to view H3D models (or any, for that matter), even in your mobile, without installation of any new plug-in or application, and without any concern regarding computational capabilities? Is this a futuristic vision, or soon to become reality?

Following Moore’s Law, the augmenting computing power of technology devices has unrolled an exciting avenue for interacting with complex and huge 3D datasets with much ease. As of 2014, it is possible to execute HyperView® Player on a web browser. There is a plug-in, which is a stand-alone utility that lets users visualize 3D CAE data. The major improvisation being, you do not even need a plug-in for achieving this feat. The WebGL API allows interactive 3D and 2D graphics rendering with GPU acceleration. This facilitates a seamless interaction with the CAE component, because at its core, it runs as a native graphics application. WebGL is supported by most of the modern browsers including Internet Explorer, Mozilla Firefox, Google Chrome, Safari, mobile browsers, etc. You can get a hands-on experience of WebGL using some of the already established frameworks like Three.js, OSGJS, Babylon.js etc. A list of different existing WebGL frameworks can be found here.

There are other technologies for achieving interactive online 3D content. However, in the end, after a profound scrutiny, it comes down to WebGL. Here are various technologies presently popular for graphical presentation in a web browser:

Alternative Technology Comments
JOGL (Java OpenGL)
  • Does not run on phones
  • Java Applet security concern
Google NACL
  • Runs native C/C++ on browser
  • Only for chrome
Canvas 2D
  • Much slower than WebGL
NPAPI Plug-in
  • Plug-in – security issue, blocked in future
  • Installation mandatory
Silverlight 3D
  • Needs plug-in installation
  • Does not run on mobiles
  • Poorly documented
Flash Stage 3D
  • Plug-in
  • Non-standard API
  • Flash shader language – Assembly Programming
  • Performance Issues
Emscripten
  • Converts native C/C++ and OpenGL to JS and WebGL

After comparing various technologies, it is evident that WebGL is the technological breakthrough in the field of 3D web graphics. It is a lightweight, zero-install client which can handle 2D plotting, 3D plotting, animation, text, texturing and advanced rendering. It is a cross-platform, royalty-free web standard. Web-enabled streaming and progressive loading with high performance are part of the technology.

As a snapshot of WebGL, following are its advantages and disadvantages: 

Advantages Disadvantages

1. No Installation

WebGL is not a plug-in.
It is part of the web browser implementation itself (12).
Thus user need not have to install anything.

1. No Installation

WebGL is not a plug-in. It is part of the
web browser implementation itself (12).
Thus user need not have to install anything.

2. GPU Acceleration

The vertex data passed to the browser is
directly copied to the vertex buffer.
This removes the overhead of browser figuring
out for itself where the vertices are. The WebGL
renderer takes care of tracking the vertices of all objects.
The GPU processes all the calculations. Once the rendering
data is uploaded to the WebGL data structures,
the rendering is really fast. WebGL is hardware accelerated. (1) (11)(12)

3. ANGLE

WebGL can run without OpenGL (Using the ANGLE library ) (10)

4. Automatic Memory Management

WebGL has Automatic Memory Management.
In OpenGL, memory is explicitly allocated and de-allocated.
In WebGL memory management is handled automatically. (13). In WebGL Automatic Memory Management is provided as part of the JavaScript Language (14). It follows the rules of scoping in JavaScript and memory is automatically de-allocated when it is no longer needed (17)

5. WebGL works for cross-platform and is royalty free web standard for low level 3D graphics (15). It can be successfully used to implement Hardware accelerated 3D graphics in Web (16)

6. WebGL is JavaScript based which makes it easier to integrate WebGL applications with other JavaScript libraries (such as JQuery and other HTML5 technologies) (17)

7. The performance of WebGL is comparable to equivalent standalone applications (with some exceptions). This happens due to the ability of WebGL to access the local graphics hardware (17)

1. ANGLE Limits

ANGLE is the WebGL rendering backend on Windows which uses DirectX9. It is default for both Chrome and Firefox, as many graphics cards have bad or non-existent OpenGL drivers.DirectX9 does not support wide lines directly.

OpenGL allows more capabilities of the graphics card than DirectX9, one of which is setting larger line widths.

The WebGL maximum parameter list can be obtained from here (19)

ALIASED_LINE_WIDTH_RANGE gives the limit for line width. If the range is 1-1 then the line width is fixed to only 1.0 ALIASED_LINE_WIDTH_RANGE: 1 – 1 (7)(8)

2. WebGL is limited to the dynamic nature of JavaScript (9

3. WebGL rendering data must first be uploaded to special WebGL data structures. This means copying the data from general memory to WebGL specific memory (buffer objects). The data uploading is generally slow. (11)

4. Double precision is not supported in WebGL in the current version.(20)

 

Astonishingly, WebGL can accommodate huge data models as well as a native graphics client application. HappyBuddha is an excellent example demonstrating WebGL efficiency, handling a mesh of 1 million triangles. This high performance level has been attained by incorporating a compact mesh compression algorithm. Large mesh performance trials are being conducted extensively with positive results from WebGL. We can implement the WebGL API for all CAE applications, for example HyperView Player and solidThinking®. However, though WebGL with present power can support a million triangle mesh size, it probably cannot operate with huge CFD models. The power of an LLVM-to-JavaScript Compiler, Emscripten, which converts C/C++ to JS, could be used to a great extent. This is a prominent compiler which compiles native code to WebGL without a lot of rework from the ground up.

In conclusion, based on ongoing research and great performance results from WebGL, this technology has the potential to dominate web-based 3D graphics. In a world where cloud is the buzzword, this technology works as a password for 3D-Cloud.


References

  1. https://www.scirra.com/blog/58/html5-2d-gaming-performance-analysis
  2. http://stackoverflow.com/questions/8462421/difference-between-webgl-and-opengl
  3. http://stackoverflow.com/questions/1480982/how-to-render-primitives-in-wireframe-in-open-gl-es
  4. http://stackoverflow.com/questions/3539205/is-there-a-substitute-for-glpolygonmode-in-open-gl-es-webgl
  5. http://stackoverflow.com/questions/14503600/what-are-webgls-draw-primitives
  6. http://stackoverflow.com/questions/9748340/face-colors-not-unique-when-using-8-indexed-vertices
  7. http://code.google.com/p/angleproject/
  8. https://github.com/mrdoob/three.js/issues/309
  9. http://www.irrlicht3d.org/pivot/entry.php?id=1255
  10. http://codeflow.org/entries/2013/feb/02/why-you-should-use-webgl/
  11. https://hacks.mozilla.org/2013/04/the-concepts-of-webgl/
  12. http://bjartr.blogspot.in/2009/10/webgl-what-is-it-and-how-can-i-use-it_04.html
  13. http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL
  14. http://en.wikipedia.org/wiki/WebGL
  15. http://www.khronos.org/webgl/
  16. http://news.cnet.com/8301-30685_3-10416966-264.html
  17. “WebGL Beginner’s Guide“ (2012), Diego Cantor, Brandon Jones
  18. http://web.eecs.umich.edu/~sugih/courses/eecs487/common/notes/APITables.xml
  19. http://alteredqualia.com/tmp/webgl-maxparams-test/
  20. http://blog.hvidtfeldts.net/index.php/2012/07/double-precision-in-opengl-and-webgl/
Gontu Rajesh

Gontu Rajesh

Software Engineer at Altair
Gontu is a Software Engineer in the EBU Department. Since 2013, he has been working on Web Integration of HyperView Player. He developed an experimental lite web version of the HyperView Player using WebGL, a 3D graphics API. He graduated from Indian Institute of Technology, Bombay in 2013 with a Double-Degree in Mechanical Engineering with specialization in Computer Integrated Manufacturing.
Gontu Rajesh

Latest posts by Gontu Rajesh (see all)

Gontu Rajesh

About Gontu Rajesh

Gontu is a Software Engineer in the EBU Department. Since 2013, he has been working on Web Integration of HyperView Player. He developed an experimental lite web version of the HyperView Player using WebGL, a 3D graphics API. He graduated from Indian Institute of Technology, Bombay in 2013 with a Double-Degree in Mechanical Engineering with specialization in Computer Integrated Manufacturing.