# Which one should I use, \`Sprite\` or billboard plane?

**URL:** <https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828>\
**Category:** Questions\
**Tags:** sprite, billboard, picking\
**Created:** [June 22, 2023, 12:59am UTC](https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828 "2023-06-22T00:59:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fableswalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/fableswalker/32/33032_2.png) [@fableswalker](https://forum.babylonjs.com/u/fableswalker)\
**Post date:** [June 22, 2023, 12:59am UTC](https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828/1 "2023-06-22T00:59:21Z")

</div>

I’m planning to create a game which puts 2D sprites on 3D grid ground. Here’s the playground for the concept.

> **[Babylon.js Playground](https://playground.babylonjs.com/#1JAFVM)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

It’s looking good initially. However, when rotate camera upwards, so that “beta” is close to 0, sprites on sideways start to be off the grids.

Since I moved each sprite up a little bit so that the feet touch the grid, and each rotates itself around its center, it turns out the sprites spread a little bit wider than the grids when camera looks down on them.

I searched for a way to change their origin of rotation and found this.

> [@Sprite origin point](https://forum.babylonjs.com/t/sprite-origin-point/1469):
>
> Is there a way to set the origin point of a sprite? I want to set my sprite origin to the bottom center of the sprite, so that it rotates around that point instead of the center? I had a look at the pivots, and they don’t seem to be compatible with sprites either. Would this be something more suited to a plane mesh with a pivot point?

Which recommends using plane with billboard mode.

Well the concern is, I’m not sure if I would need more precise picking for sprites in my yet-abstract-game. Using Babylon.js’s sprite system, I can take into account transparency while picking where it’s appropriate. I couldn’t find a way to do the same for plane.

Now I’m considering one of these.

1. Keep using the sprite system, read the current beta value of camera before every rendering, and move each sprite accordingly. Changing the angle of camera shouldn’t occur often in my use case, so most of the time it should be a simple test.
2. Use plane with billboard mode instead, and if the needs arise, implement invisible hitbox for picking. I don’t think picking should be pixel perfect, so this could work, too. Perhaps I have to implement sprite animation too.

Is there a better way? If I have to choose between these, I want to know which one is better in terms of performance, and/or future-proofing.

---

<div class="post-metadata">

**Author:** ![fableswalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/fableswalker/32/33032_2.png) [@fableswalker](https://forum.babylonjs.com/u/fableswalker)\
**Post date:** [June 22, 2023, 2:19am UTC](https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828/2 "2023-06-22T02:19:07Z")

</div>

I’ve also checked defining a custom predicate for picking (when using plane) but it seems [the predicate function is only provided with the collided mesh](https://doc.babylonjs.com/features/featuresDeepDive/mesh/interactions/picking_collisions#predicate-function), thus making it impossible to do a texture-level thing.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 22, 2023, 9:34am UTC](https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828/3 "2023-06-22T09:34:46Z")

</div>

Sprites will be faster than billboards because they are rendered in a single drawing call.

In addition, texture-level picking for a plane billboard is not supported, so you should implement something like [GPU picking](https://forum.babylonjs.com/t/gpu-picking-demo/30507).

So, if you’re able to work with the limitations of sprites, you should probably stick with them.

---

<div class="post-metadata">

**Author:** ![fableswalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/fableswalker/32/33032_2.png) [@fableswalker](https://forum.babylonjs.com/u/fableswalker)\
**Post date:** [June 22, 2023, 1:41pm UTC](https://forum.babylonjs.com/t/which-one-should-i-use-sprite-or-billboard-plane/41828/4 "2023-06-22T13:41:31Z")

</div>

Thanks for the very helpful answer 🙂