Skeleton viewer overlay and bones influence heatmap

Hi there,

I’m building a 3d viewer for a client, and one of the requirements is to see bones, bones influence heatmap and to be able to select a specific bone by clicking on it and control it (rotate it, as it can be done in the inspector).

It might be important to mentioned that .glb files will be loaded.

We’ve managed to create a demo where we enabled a skeleton viewer, you select a bone by clicking on it, a sphere is attached to a clicked bone marking it as active and then you can control it via slider gui components for each axis (again, as in inspector). It works but it’s not that pretty, also it’s done with Dude.babylon model, it wouldn’t work with glb files). What we would like is to add an overlay to a skeleton viewer so it is similar to what you can see in Blender or Skechfab 3D viewer

How this can be done, keeping in mind that it (overlay) should follow bones when it’s controlled/animated?
Another question is how can bone influence heatmap can be calculated and displayed?

Since I’m new to Babylon js and 3D in general I need a starting point, concept for approaching a problem, I do not expect a complete solution :slight_smile:


Hello! we do have a skeleton debugger that could be used:

from there:

It used that:SkeletonViewer - Babylon.js Documentation

Hi @Deltakosh, thank you for feedback!

However, I might need a little more help than that :slight_smile:

This is what I’ve done so far: Babylon.js Playground
You can click on the bone and move it with sliders.

What I would like to achieve is to see color of the bone change on hover/click, so I can see which bone is selected. As I can see it can’t be done with skeleton viewer, so I attached screenshot above as the possible solution, but I don’t know how to achieve that.

I think You could totally inspire yourself from the SkeletonViewer to tweak it as you see fit ???

Also maybe creating a node material would be the way to go to display the bones influences ?

It sounds like a really cool project.

1 Like

Yep, I agree with that :slight_smile: I’ll use SkeletonViewer as a starting point, bones influence stuff will wait but I’ll do some reading on node materials and how I should use those.

Tnx for help. It is a fun project, had a lot of fun working on it, also enjoying working with babylon.js it’s a great piece of software with the awesome community :muscle:

I can not wait to see it working as we could even potentially reuse it as the default tool in babylon :slight_smile:

I’d like to see that happen, I’ll keep you posted on progress!



This might give you a good baseline.


@Pryme8 Wow, this is awesome, thanks a lot!

@Pryme8 and @Nikola_Nedic we need this as our default skeleton viewer this looks stunning dunno how I could have missed this post :slight_smile:


Im in a middle of a cross town move so all I have is my phone for a couple days! This can go on the list of Todo after my spritemap upgrades im cooking up.