3D Viewer

Posted on February 16th, 2016
Previous Article :: Next Article

Background Info

Example output

One of the things I specialize here at PIC-C is development of HTML5-based GUIs (such as the QCM Analyzer). The beauty of using HTML is that the GUI ends up being just a small text file which is opened by an application that even the most bare-bones systems will have: a web browser. And now WebGL gives us the ability to visualize complex 3D plots directly in the browser! Lately I’ve been working on adding this visualization capability to a GUI I’ve been working on. Normally, I use Paraview for visualization, but the idea here is to add a rudimentary visualization capability so that users of codes such as CTSP can monitor the simulation progress in real time. So I started developing a simple WebGL-based 3D viewer for surface mesh data in Paraview’s *.vtp or *.vtu format.


Unfortunately the code is quite buggy. The main issue seems to revolve around my total inability to grasp how to correctly set the webGL projection matrix. The idea is that when a file is loaded, the camera should be “zoomed-in” on the data and the rotation point should be the center of data. That is not the case. Secondly, the mouse interaction is quite off. The goal is to implement a “rollerball” rotation but this does not work properly. If the model is rotated 180o, the mouse interaction becomes “backwards”. Thirdly, this current version supports only triangular meshes and can be quite slow to load large data sets (likely due to using push() to expand arrays).

This brings me to why I am posting the code in the first place. I really would like to get the viewer working properly but I am currently swamped with multiple projects. So I wanted to reach out to the community and see if there are webGL experts out there who could help addressing these issues (namely 1 and 2, adding quads is something I can handle). Let me know! Oh, the “log” plotting option also doesn’t work yet.


Keeping in mind the bugs listed above, you can try the viewer by dropping in a .vtu or a .vtp file into the blue box. For instance, using the following example file chamber.vtp (right click to save on your computer), you should be able to get a plot as shown in the screenshot above.


If you are interested in taking a swing at the bugs, the entire distro is here: viewer3D.zip. The code uses gl-matrix helper functions.

Subscribe to the newsletter and follow us on Twitter. Send us an email if you have any questions.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile=""> In addition, you can use \( ...\) to include equations.