Streamlines in the Forge viewer

One more feature inspired by Project Dasher has made its way into the Forge viewer’s Data Visualization Extension (Project Hyperion): streamlines. This is something I’ve talked about a few times in the past, and I’m happy to see it make its way into the Forge platform. Streamlines are a great mechanism for indicating movement – of people or assets – through an architectural space, or perhaps something like a toolpath in a manufacturing context.

The way we implemented them originally inside Dasher wasn’t ideal, in all fairness: I used the MeshLine.js library to be able to display lines with thickness in the Forge viewer. The Hyperion team implemented their own shader to do the work for this, which is much better.

The new StreamLine object is quite easy to use – it adds itself to an appropriate overlay scene when you create it via the StreamLineBuilder object, and then removes itself from said scene when you destroy it. I had a particular use for this shiny new feature, which was to display the paths created by VASA inside a Forge scene: I’ve created Emscripten bindings for the underlying C++ VASA library so that we could build a WebAssembly (WASM) package, and use it with triangles from the loaded scene in the Forge viewer to find paths between the entrance of a building to various exits. The fact the below workflow is shown inside Dasher is merely a convenience: it was an easy way for me to prototype the use of VASA with Forge, and also the use of the new StreamLine object to display the resulting path(s).

By default the StreamLines get occluded by the building itself:

But this easy to change by going in and toggling the depthWrite property on the associated StreamLineMaterial. Here’s the same shot with “X-ray mode” enabled:

Here’s a side view – of the same path – still in X-ray mode:

If we go back to the previous view, it’s interesting to see that selecting a destination point close-by leads to a very different path being followed through the building, as it’s marginally shorter to take that path than the previous one.

But this post isn’t really about VASA – it’s about the new StreamLine object that’s available in the Forge viewer (as of v7.50 or so, I believe). Here’s a snippet of JavaScript code provided by the Hyperion team that will create a simple StreamLine and add it to your Forge viewer scene.

const points = [ 10, 10, 10, 20, 20, 20, ... ];

 

const streamLineData = {

    points: new Float32Array(points)

};

 

const streamLineSpecs = {

    lineWidth: 8.0,

    lineColor: new THREE.Color(0xff0080),

    opacity: 1.0,

    lineData: streamLineData

};

 

const streamLineBuilder = dataVizExtension.streamLineBuilder;

const streamLine = streamLineBuilder.createStreamLine(streamLineSpecs);

The main thing to note are the points passed in are in a flattened array: three items in the array contribute to an individual vertex of the StreamLine, of course. Otherwise it should be fairly obvious how it works.

Destroying the StreamLine – which, as I said before, removes it from the scene – is very simple:

streamLineBuilder.destroyStreamLine(streamLine);

I’ll dig into more advanced capabilities of the StreamLine object in future posts. I hope you find interesting uses for them in the meantime!