How to movable mannequin with transparent skeleton?

Hi!

I need to create this kind mannequin
Š—Š°ŠæŠøсь эŠŗрŠ°Š½Š° 2020-08-18 Š² 15.21.481

I was trying to get information from docs, but was not succeed. Now I have few questions:

  1. how can I create transparent skeleton only with borders?
  2. how can I manage to move parts of this skeleton with mouse?
    And the main question:
  3. Is it possible to make this with babylon?

Thank you in advance for your answers, links or any comments!

Hey @Online_Zakaz, welcome to the Babylon family!

Short answerā€¦yes this is all possible with Babylon.js.

With most things related to 3D, thereā€™s no one single way to go about accomplishing something.

The way Iā€™d personally approach this project would be to use real geometry for the mannequin, but then use a custom shader to make it transparent/with the dotted edges like you see here.

If youā€™re not familiar with our Node Material Editor for creating custom shaders, then youā€™ll wanna check out these resources:
https://doc.babylonjs.com/how_to/node_material

Also note that at the bottom of this documentation page links to a number of video tutorials that go over how to use the Node Material Editor to create custom shaders.

As for the interactionā€¦againā€¦no one way to accomplish something, but we have a number of resources and examples on how you can go about interacting with elements in your scene.

This doc is a good one to get started with:
https://doc.babylonjs.com/how_to/interactions

And this playground example might be particularly helpful:
https://www.babylonjs-playground.com/#7CBW04

I hope this helps point you in a direction :slight_smile:

2 Likes

Hi @PirateJC, thank you for your reply.

I tried to play a bit with custom mannequin (my playground https://playground.babylonjs.com/#CN4KJL#2) and found few questions I canā€™t figure out:

  1. (SOLVED - I created my own mannequin) I tried to get pickResult.pickedMesh, but it always shows me Skin when I click on mannequin. Is it only problem with this exact dummy? Can I do smth with this exact dummy to have opportunity to select bone, not skin?
  2. How can I rotate bone always in current Z axis. For example as a temporary workaround (since I canā€™t select exact bone, only skin) I added button to rotate shoulder. When I click it right after page loaded it rotates on Z axis (itā€™s ok), but later, when I rotate screen it still rotates depending on previous Z axis, but I need it to be always depending on current Z axis (graphicaly it should be always the same size). I think it happens because of BABYLON.Axis.Z here skeleton.bones[10].rotate(BABYLON.Axis.Z, pos, BABYLON.Space.WORLD, mesh);, how can I change this depending on rotation of screen?
  3. How can I manage bone intersection (how can I stop bone rotation if some part of it is on another bone?)

Thank you in advance!

Hi,

Iā€™m also studying this right now and Iā€™m basing it on his 2 PG which is more of what can get you where you want to go I think.

BoneIKController :
https://www.babylonjs-playground.com/#1EVNNB#15
BoneLookController :
https://www.babylonjs-playground.com/#1B1PUZ#15

Please feel free to share your progress with a PG, I would be very interested in seeing how you get there.

1 Like