TrackNode and pivot on exported mesh with canvas2d

[Gil]

Hello everyone,

I'm trying to get a label system which could work like https://jig.space/view?jig=v4Ga2VKw
I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label.

Maybe there is a better way to do it.

When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used.

It looks like it might not event been exported (I attached the file) since the pivotMatrix is null.

 

Maybe I'm missing something ?

Infos.babylon

[Wingnut]

Hi Gil, welcome aboard.  Canvas2D system has been a little grumpy on the newer versions of BJS, but forum friend and inventor @Rolento has a lines'n'labels playround that has overlap-avoidance... and it's pretty nice.  All I have is a 2.5 version.  http://www.babylonjs-playground.com/index2_5.html#1B1LNW#26

The 2.6+ version... has a Canvas2D error that perhaps @Nockawa or @adam might need to investigate (endTriCap is undefined).

On the subject of imported mesh, the ORIGIN property of a mesh within the .babylon file... is likely more important than pivotMatrix.  I think pivotMatrix = null... is normal.  I THINK ... if your mesh (localSpace?) origin is at 0, 0, 0... Canvas2D trackNode feature SHOULD center-up on it.

I do not have a canvas2d test scene with imported mesh... for ScreenSpaceCanvas2D/group2d/rect2d, etc.  BUT, I DO have one... with imported mesh... using a WORLDSpaceCanvas2D.  Although it was difficult to get the label SMALL... it got placed at 0,0,0 of my box, by default.

Here is my simple worldSpace mesh label, with no offset-from-mesh distance set.  https://www.babylonjs-playground.com/index.html#2C8LVE#15

In center!  Yay!    Set line 32 to true to make label ALWAYS face camera.

It is working OK in newest BJS... but... label was SO BIG.     Difficult to shrink. 

Here is a demo from the docs... using a ScreenSpaceCanvas2D for labels.  Non-imported mesh, though, so, a bit off-topic.  Notice that their lower left corners... are aligned with mesh origin.  I'm not sure if auto-centering-on-mesh-origin is available for ScreenSpaceCanvas2D primitives... yet.  Likely soon, but it is a measuring challenge, I hear. 

Try to make sure your mesh (localSpace?) origin is 0,0,0... in 3ds Max.  There could be a bug in the exporter, too... we'll look carefully at this.  Report findings, please.  Wingnut still learning.  Let's ping .babylon-file-examining-expert @gryff, too, what the heck.  He's primarily a Blender guy, but he knows importing quite well.

Feel free to make edits and more saves... in those playgrounds.  Perhaps others will comment.  Be well, talk soon.

[Gil]

@Wingnut First of all, thank you !

I'm currently working on 3.0 first because it was the latest version but and more important it just got the morpher working which I need for my project.
I'm really glad they just released it :).

The playground is already really cool, I will need to implement the checkLabelCollision() for sure.

 

Regarding the imported mesh, I did not find the origin property inside my babylon file. I really think the pivot should be accessible and used when setting the trackNode.
I also tried to reset x form the objects to be sure to have something clean, even on a simple box.

 

As a solution, I used an alternative and created a face that I rotate to place the info inside the 3D space.
I'm facing new issue but it looks like that's the best way to add labels and display them when the meshes are facing the camera.

That's something I need to have a screen clean.

 

[Wingnut]

Interesting!  *nod*.  You can set plane.billboardMode = BABYLON.Mesh.billboardmode_ALL; to make label planes or ANY mesh... always face camera.  (if you need that).  Also, mesh have a .lookAt(something) function, too, which I believe will ONLY lookAt other mesh, not cameras or lights.  (I could be wrong about that).  But you can parent an invisible plane or box to a camera or light, and then make your mesh.lookAt(invisibleMesh).

You could be correct about that pivot thing... I'm certainly no expert.  I should probably let smarter people than I... answer. 

Anyway, here is a playground that uses a setPivotMatrix in line 39.  Perhaps you could set your own pivot point on the imported mesh.

I'm not sure if @Nockawa uses pivot points for Canvas2D primitive positioning, or not.  More likely, he uses the "extends" of the mesh boundingBox, and determines mesh-center using that.  In fact, I think there IS a tool on boundingBoxes... for retrieving the center of them.  http://doc.babylonjs.com/classes/2.5/boundingbox#center-vector3-classes-2-5-vector3-

Perhaps you could call that function on your Max mesh, and see what value it reports.  There are a few playgrounds available... that use boundingBox.center, so you can see how it is used.

Anyway, you have a few more tools to do some experiments-with, now.  You can set your own pivot points.  AND... did you see line 33... "the bake"?  You can rotate, position, and scale a mesh, and then call "the bake"... and it leaves the mesh the same, but (re-)sets .rotation and .position "back-to" 0,0,0, and (re-)sets .scaling back-to 1,1,1.  You could think of it as "permanent-ize all the current transforms", right?  Handy and fun, and perhaps useful for your issue.  I permanent-ized the wheel's rotation. 

Hopefully, smarter people than I... will comment soon.  We are waiting for Nockawa to return... he is out of town for a bit.  But there are LOTS of great brains around here.  Not that many are 3ds Max drivers, though.  Anyway, glad to hear you found a solution.  IF you DO try more experiments/tests with canvas2d primitive centering, could you report your discoveries?  Thanks!

If I may restate the issue for others... Gil is seeing Group2D's with trackNode... not being centered... when placed upon mesh imported from 3ds Max. 

Issue open, ideas/help warmly welcomed.  (thx) 

[Wingnut]

Oops, I had an incorrect URL in that "line 39" link... in previous post.  Link fixed now.  Sorry.  http://www.babylonjs-playground.com/#H7V1D#63