In the first post in this series we looked at an approach for exporting Forma geometry to an STL file that can be loaded into Dynamo and analysed using VASA, our Voxel-based Architectural Space Analysis toolkit. The overall goal is to be able to use VASA for urban-scale analysis of the site context. (Later on I hope we’ll also be able to work with more detailed architectural geometry as the level of detail in Forma evolves.)
In that post I also alluded to something that’s coming soon which will streamline the above workflow: you’ll hear more about that at AU 2023 if you’re lucky enough to be attending that event.
Today I wanted to talk about a prototype integration of VASA directly into Forma. Using the same approach as the “Export STL” extension we saw last time - an Embedded View that displays an HTML-based dialog inside one of Forma’s two panels - we can host VASA’s WebAssembly package and use it directly within the Forma browser environment.
I’ve talked about VASA’s WebAssembly package before: the first time was 2 years ago, in the context of displaying streamlines in the APS (or Forge, at the time) Viewer, and soon after about how it was possible to use it directly inside FormIt to solve mazes.
For those of you who aren’t familiar with WebAssembly (or Wasm), it’s a way to package code - very often written in languages that have direct memory management such as C++ or Rust, rather than memory managed (typically garbage collected) languages - into a form that can be loaded and used in a browser, which really means called from your traditional Javascript code. In our case we’ve used Emscripten to take our low-level C++ toolkit (the same one that is exposed via Dynamo nodes in the public package) to build a Wasm file and accompanying Javascript loader. I first started playing with Emscripten back in 2015 but VASA is the first “real” project I’ve had the chance to use it with.
The Wasm version of VASA weighs in at around 800KB and performs surprisingly well. I’ll demo it at our AU class on VASA, but have included some videos in today’s post. We don’t currently have plans for this to move beyond research: the point of showing these videos is to provide some inspiration for how VASA might be used in more integrated workflows but also to show the flexibility of the Forma extension system and Embedded View SDK.
To get things rolling with the project we integrated pathfinding into Forma. There's a sequence of steps that get represented by buttons in this version: getting the scene geometry, then triangulating and voxellising it.
You’ll notice that the user is having to manipulate a point using sliders, rather than interacting directly with the Forma canvas. This is a near-term workaround until that particular capability gets implemented, but it’s actually quite OK once you get used to it.
In the next version it's mostly about streamlining the UX: the path redraw is smoother and the sliders are colour-coded.
Being reasonably happy with the state of pathfinding, it was time to turn to visibility. The idea here was to show the voxels of the visibility calculated from a point (which would once again be manipulated using sliders, along with an additional one for the maximum visibility distance).
I was actually really happy with this! Apart from one thing: when the visibility is clipped by a building (which is, after all, the whole point of showing a visibility dome) it's hard to see where the dome is cut away.
I was chatting about this with my old friend Simon Breslav, who suggested darkening the color based on the distance from the centre of the sphere (the visibility point).
Here are a few of the fun results I got on the way there:
The only issue with the above was the fact that - due to a quirk of the code I used to colour the dome - it was being coloured per triangle rather than per vertex.
When I fixed that issue, the dome was shaded perfectly, but perhaps too perfectly: I liked the glitchiness of the previous implementation - in terms of the way it made the curvature of the dome more obvious - so I introduced an additional “roughness” slider that created a cork-like effect on the outside of the dome by adding a random darkness factor to the outer triangles.
Here’s a video of the “final” (this may evolve as new thoughts occur, of course) version that has a further streamlined UI (fewer buttons, more toggles) and the visualization features I wanted.This is the version we'll be seeing in our VASA class in Las Vegas, although probably with a Forma project showing The Strip rather than my home town.
I admit I've been very impressed with the potential for integrating WebAssembly with our various web-based environments (whether inside a Forma extension or a web-site embedding the APS Viewer or Tandem SDK). Just as the AutoCAD team has found with their groundbreaking work on AutoCAD Web (also built from C++ to target the browser via Wasm) it's a great solution for executing complex code in browser-based environments where you want the code to execute locally rather than relying on server-side computation.