UI Images together with 3D Mesh - culling - need input if this is a good trick...

Hello,

my upcoming online game is created mostly with UI Canvas - however for effects I am using the Particle System - which works great in conjunction with Screen Space - Camera Render mode.

Now I wonder if the following is a good way to do some tricky rendering when combining 3D Mesh with my UI Images.

I have a Particle effect which consists of a 3D sphere mesh. With this effect I want to show some kind of shield rotating around the ui image. It looks fine except that the whole sphere is either rendering in front of the UI Image or behind (depending on Z order - which is understandable) - but it is ignoring the "canvas panel". I guess its because the UI renderer and or Mesh renderer are not aware of each other... So what I needed to do now is that I create a Mesh from this UI image (which can easily be done with putting the same ui image on a sprite renderer) - so it will magically and automatically cull all particle system effects behind this mesh. Thus it looks like the shield is truly rotating around the ui image.

Here you can see that the sphere is culling correctly (even though you wont notice without animation - but particles behind the UI image and the sprite renderer mesh of this sphere are not visible anymore.


This is kind of hacky though - because the sole purpose of the sprite renderer is to create a simple mesh of the ui image - I can even leave the sprite renderers material empty - since there is no need for it to be rendered (i will put it behind the ui canvas anyway - so there are always other objects in front already (background etc.) - so this object is not seen anywhere else. Its sole purpose is to make it cull the particle system behind the ui image.

Now that works totally great - still I am not sure about the performance implications of this. And since I love to use the best way possible I wanted to know if this trick is actually a good one or if there are even easier/better ways or if I should dive into some special shaders (where I have no knowledge of) or any other methods in order to provide some true "depth culling" on my opaque pixels of the UI image.

So I would be happy about some input or ideas.

Thanks,
Oliver