Highlight/Glow and Vertex Groups

Hi my friends,
I am motivated to learn more about Babylonjs:

  1. Are vertex groups even accessable in Babylonjs, without using Shape Keys and MorphTargetManager? Because I don’t need to deform the mesh, just access vertex group at best, by its name in Blender.
    The way I found uses mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind), but only returns an array and not an object (associated array)?
    Or is it possible to find out which array index is what vertex group name?
    Btw I’m using .glb/gltf-files.
    My source: Vertex Group from blender [solved] - #22 by JCPalmer

  2. Is it possible to highlight or glow on vertex groups? I want to use either one for OnPointerOverTrigger.

Jumping right to 2, I think you will want to look to having 2 meshes. One to highlight and not the other. Parent one to the other in Blender, so they move together. There is minor overhead having another mesh, but then things are much more straight forward.

Thanks for your time, JCPalmer.

To get you correctly:

  1. By 2 Meshes in Blender you mean like I would normally do, i. e. Set a Turret ChildOf a Tank bone of the Tank armature (Rig)?
  2. The highlight and not-highlight one are the exact same mesh (Turret-glow and Turret-no-glow) or just the Turret+Tank?
  3. Isn’t an additional mesh instead of using existing vertex group, bad in terms of performance and loading on large scale?

I checked again and seems I dont need glow / highlight on vertex group, instead I need a 2D GUI rectangle around the vertex group, that changes rectangle border color on hover, which seems possible to do, but I need the vertex group 2D coordinates or how would you solve this. I can show you an example pic:

  1. Click both, right click, parent. Bones have no meaning.
  2. They are 2 mesh. You just separated them in edit mode by selection, which you got by selecting by vertex group first.
  3. So, you are using .glb, your options are limited to having separate meshes / morph targets. There are not vertex groups in .glb (I think) so it is irrelevant whether BJS has them or not. No multi-materials as well in the .glb format.

With your edit, your problem is going to be getting those 2D coordinates, possibly every frame if either the camera or objects moves. Solve that first. I have no need to solve that.

1 Like

Hmmm let me see if I understood correctly, you have some parts of your mesh that, when the user mouses over them, you want to show this rectangle? If that’s what you want, then it’s a bit similar to the “hotspots” approach that is discussed on the e-commerce dev story: Chapter 1 - Art | Babylon.js Documentation (babylonjs.com) :smiley:

It is even simpler, just a hover over the mesh should display all rectangles (on certain submeshes or bones position) and a circle/ellipse is displayed if you hover over one of the mesh’s rectangles. Knowing this, you still believe I need hotspots?
I have come up with the idea using bones position that are on center of vertex groups, when its not a submesh. So either there is a Mesh given to determine position or a bone (if it is a vertex group), because I need the bones anyway.

Ooooh I see. Your approach looks pretty reasonable, do you still have issues with the Babylon side?

1 Like

I can use rectangle.linkWithMesh(mesh) if it is a mesh, does this work for bones instead of meshes too or is there another function?

Futhermore, is it possible to link position of two 2D GUI Elements (rectangle with stackpanel). The idea I have here would be using onBeforeCameraRenderObservable and set stackpanels 2D position to rectangle position. What do you think? Or maybe there is a way to observe if rectangle position (linkOffsets or top&left) has changed to be more precise?

Unfortunately, no, as linkWithMesh requires a TransformNode: Control | Babylon.js Documentation (babylonjs.com), while Bone is an instance of Node: Bone | Babylon.js Documentation (babylonjs.com). Another point to remember is that linkWithMesh requires your control to be at root level, so it can’t be parented to anything: Babylon.js/control.ts at cd948442ffe14809d6d8fc17cdb5b6baafac1f89 · BabylonJS/Babylon.js · GitHub

Futhermore, is it possible to link position of two 2D GUI Elements (rectangle with stackpanel).

You can parent one control to another, but it sounds like you want something like, if a control is moved, the other one has the same movement applied? If so, then you’ll have to do this by code.

Though, instead of linking the Control directly to the bone, if the bone has itself been linked to TransformNodes, you can link them to the Control :smiley: Bone hotspot test | Babylon.js Playground (babylonjs.com)

1 Like

I downloaded the glb of your PG and opened in Blender, but I can’t find where the bones are linked to TransformNodes?

First I thought it would be an empty plain axes, but none in your glb-model, so I am wondering. Is it the vertex group? Or are they created automatically in Babylon?

Oh, this GLB model is not mine, it’s part of the GLTF sample models repo KhronosGroup/glTF-Sample-Models: glTF Sample Models (github.com), so I hadn’t looked at it on Blender. @bghgary when we import a GLB with skeletons, do we automatically create the linked transform nodes?

Yes. Linked transform nodes is a feature because of glTF.


Do you know how when I use the Constraint “Child Of” on Mesh to Bone of Armature, will the Mesh (Child of Bone) be put on tail or head position of the bone? Or should I place the bone in the mid (center) of the mesh? Or more specific is the TransformNode in the center of the bone, tail or head position?

In your example the vertex groups are bound to bones by armature modifier on mesh. But I have a mix of vertex groups. Every vertex group has a corresponding bone (=same name), but not every bone has a corresponding vertex group or mesh. While again every mesh got its own bone or multiple.

Hmmm this would depend on how Blender does the exporting to GLB/GLTF.

I tested it out, it is the head of the bone: https://playground.babylonjs.com/#KGUCHZ#5

Btw: Have you ever seen a bone like this horizontal one in yellow next to a simple vertical bone?

I don’t remember seeing something like this before, but then I don’t have a lot of experience in rigging :thinking: