Sprite "planting" (i.e. sprite origin at the bottom)

Questions
#1

Hello,

I’m trying to write an engine similar to the game Don’t Starve, basically a tiled ground with sprite “planted” on it.

It seems that Sprite does not support setting the origin used as the pivot for the sprite rotation toward the camera, so when the camera move and look more or less downward, the sprite appears to “float” over the ground.

I’m having hard time finding a workaround for that.

  • Is there any plan for including such feature to Sprite in Babylon? In the near future?
  • Should I start over using regular plane mesh, ditching all the cool stuff of the Sprite*Manager?
  • Is there anyone that have already achieved something similar? It would be nice to have some advices and feedbacks!
  • Hypothetically, would the Babylon.js team accept a PR for that? (not sure I’m skilled enough, I’m usually a back-end Node.js dev, I have limited knowledge in shader-programming, and no knowledge at all in low-level webGL)
#2

Hello!
Maybe you could use mesh billboarding then?
https://www.babylonjs-playground.com/#0720FC#26

#3

Yes, that’s the alternative but I would have to write my own sprite sheet code.
So it’s a “no” for the first (and the fourth) question?

#4

I would say no for 1 and yes for 4 :smiley:

#5

Ok, I will have to think which alternative is easier…

Also, I failed to understand how .setPivotPoint() works, it has no effect: playground. The coin is not “planted” on the ground like expected.

#6

setPivotPoint is not used in the billboard mode code.

I don’t know how to achieve what you want to do… BILLBOARDMODE_Y does work, but you do have a rotation to the plane to make it work.

#7

Damn… even using mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z), false), which is supposed to change the local origin along with the pivot point (when the 2nd parameter is set to false) has no effect on this… playground.

#8

The thing is that when using billboard mode there’s no pivot used: the rotation part of the camera is simply copied into the rotation part of the billboard matrix (when billboard = all).

#9

I finally found a workaround, using mesh.bakeTransformIntoVertices(BABYLON.Matrix.Translation(-x, -y, -z)), this way I really change the vertices position and can force the plane origin to be where I want it to be. See the last playground.

Is it an acceptable way to solve this issue?

#10

You can use the onAfterWorldMatrixUpdateObservable event instead to update the world matrix, which is cleaner in my opinion:

https://www.babylonjs-playground.com/#0720FC#33

I wonder if we should add a usePivotForBillboardMode property that would do this automatically (the pivot point would come from the pivot matrix)? @Deltakosh / @sebavan ?

#11

I think this is pretty niche honestly and the solution to bake data is better as we don’t need to recompute it on every frame

The compute world matrix code is already pretty complex

1 Like
#12

Ok, I will probably bake data. Thanks @Evgeni_Popov and @Deltakosh :wink:

1 Like