In the last post I introduced the series where I’ll be talking about the journey I’ve been going through to add skeletion data inside Dasher 360 (which is, of course, based on the Forge viewer).
The first step I took along this path was to find a way to add simple 3D geometry into an existing scene inside the viewer. This is something we do in a limited way inside Dasher – we use point clouds to represent the locations of sensors, for instance – but I wanted to work out the right approach for doing this for data that could show people’s bodies as they walk around. The eventual aim will be to have the skeletal positioning driven by the database – which has been populated by a neural network harnessing computer vision data – but the primary goal for the next few posts is to prove that the Forge viewer is capable of displaying skeletal geometry.
I came across this sample extension by Philippe Leefsma that turned out to be a useful starting point: it highlights the various mesh faces of the object you select in the viewer. There were a few changes I made to the way it works:
- Rather than adding the geometry to the scene I want to add it to a “render overlay” which is managed separately by the Forge viewer infrastructure.
- There’s commented code if you want to try adding geometry directly to the main scene.
- I found I had to change the way lines were rendered: a standard line material didn’t work for me, I had to create 3D geometry (a thin cylinder or box) to represent each line.
- We use TypeScript to implement Dasher 360, so I chose to use that (we also have our own set of extension-related features that I’ve made use of, so the code isn’t direct usable for people without them).
Here’s a quick image of the results:
We draw red spheres at the vertices and draw edges between them as green cylinders, as you can see from this animation:
Here’s the code that does it all:
In the next post we’re going to see how we can modify the geometry placement code to create a simple skeleton on the selected geometry.
