Happy Buddha and Altair HyperView®: Million Triangle Meshes
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) |
|
Google NACL |
|
Canvas 2D |
|
NPAPI Plug-in |
|
Silverlight 3D |
|
Flash Stage 3D |
|
Emscripten |
|
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
- https://www.scirra.com/blog/58/html5-2d-gaming-performance-analysis
- http://stackoverflow.com/questions/8462421/difference-between-webgl-and-opengl
- http://stackoverflow.com/questions/1480982/how-to-render-primitives-in-wireframe-in-open-gl-es
- http://stackoverflow.com/questions/3539205/is-there-a-substitute-for-glpolygonmode-in-open-gl-es-webgl
- http://stackoverflow.com/questions/14503600/what-are-webgls-draw-primitives
- http://stackoverflow.com/questions/9748340/face-colors-not-unique-when-using-8-indexed-vertices
- http://code.google.com/p/angleproject/
- https://github.com/mrdoob/three.js/issues/309
- http://www.irrlicht3d.org/pivot/entry.php?id=1255
- http://codeflow.org/entries/2013/feb/02/why-you-should-use-webgl/
- https://hacks.mozilla.org/2013/04/the-concepts-of-webgl/
- http://bjartr.blogspot.in/2009/10/webgl-what-is-it-and-how-can-i-use-it_04.html
- http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL
- http://en.wikipedia.org/wiki/WebGL
- http://www.khronos.org/webgl/
- http://news.cnet.com/8301-30685_3-10416966-264.html
- “WebGL Beginner’s Guide“ (2012), Diego Cantor, Brandon Jones
- https://web.eecs.umich.edu/~sugih/courses/eecs487/common/notes/APITables.xml
- http://alteredqualia.com/tmp/webgl-maxparams-test/
- http://blog.hvidtfeldts.net/index.php/2012/07/double-precision-in-opengl-and-webgl/