Best approach for movable logos

Questions
1

Hey there!

I am trying to figure out the best way to place multiple, movable png logos onto this mesh:

Screenshot 2021-03-11 at 17.53.18

My ideas so far:

  1. Multiple, slightly larger meshes on top of one another, each containing one logo texture. So kind of like an onion. The possible problems I see is that I am not sure if I can select lower meshes with the raycaster in order to reposition them. I am also not sure about the performance impact of layering many meshes on top of one another.

  2. Using decals. However, I am not sure how I could move the decals once placed while adapting them to the changing topology underneath. Creating a new decal for every mouse movement seems quite expensive.

Are there any other ways that I didn’t think oft?

If you think either of the two ways I named would work, I would also be glad about some pointers on how to implement it. Preferably but not necessarily even with react-three-fiber. I’m quite the beginner and a lot of things are still confusing to me.

Edit 1: @Mugen87 Might this answer of yours be the way to go?

2

Rendering decals is actually more performant than rendering multiple meshes (since you would have to render the entire geometry for each logo). Depending on the complexity of the geometry, the decal generation isn’t too costly. It should be possible to do this per frame. The texture decode and upload overhead of a logo texture is more critical. However, you would do this only once.

3

Thanks for the insight! I’ll give decals a chance and check the performance.