Novel method of 3D geometry visualization

This week me and one colleague were playing with the idea of visualizing sonar data (we both work in development of data visualization tools).

At first, it sounded like a really simple application for 2D heatmaps, where X coordinate represent time, Y coordinate represents sonar angle, or the horizontal axis relative to the boat, for example and the color represents depth.

I initially wanted to make some kind of data generator that simulates a real life sonar scenario but it struck me real fast that there are a lot of ways to complicate the matter. I really didn’t have the motivation or need to create any proper solution, but a spark of inspiration hit us which led to me creating a novel solution which enabled simple sonar visualization simulation.

Me, a software developer with no prior experience in 3D modeling or design, downloaded Blender, a free 3D modeling software and within half an hour I had in front of me a 3D model of a waterbed.

Next, I exported the model to OBJ format, which I had general understanding of from my previous life. What I was particularly interested with the OBJ format was that it contained a list of all geometry coordinates and it was easy to parse. I then wrote a Node.js script that
1. Loads the OBJ file.
2. Parses all geometry coordinates of the model.
3. Scans the Y coordinates of the model to a XZ grid, effectively forming a height map (matrix that contains a number “height” value for each column/grid).

What followed was a glorious moment (at least for good old me, who was having a quality Friday evening after work)— I input the height map into our web data visualization software and was met with this:

It actually worked! Ultimately, I had to also try to simulate the data being recorded in real-time to really get the feeling of sonar scanning — this end result, I was really happy with even if its far from a real sonar application.

During this hour long adventure I also made some happy accidents which I found looked really cool (some were intentional, some not).
Here’s the result with some vertices flipped in the height map scanning stage (side projection):

And here’s a 3D version (instead of using color for depicting height, actual 3D geometry is used for visualization):

Find the code, application and tools at the GitHub project, here.