koobas.hobune.stream
How to overwrite multiple semi-transparent 2D mesh layers?
Hello there,
Is it possible to render multiple semi-transparent 2D meshes (of different sizes) that overlap each other such that the top-most mesh overwrites any pixels underneath it and doesn't take them into consideration when calculating the transparency? For example, I have a Ship gameobject with a separate mesh rendered for each attack range (Short, Medium, Long), each with their own Sorting Layer. I have the Long range mesh rendered first, with a specific color and opacity. Next, the Medium range mesh would be rendered on top, finally followed by the Short range mesh. I want to ensure that the Short range mesh does NOT take into account any pixels it overlaps with the Long/Medium range meshes and only renders its own color & transparency value.
Is this possible? I've attached an image showing what I am trying to accomplish, but it appears that the Medium range mesh is taking into consideration any Long range mesh pixels underneath it and the Close range mesh is doing the same thing.
Well, for 2d that's possible and actually quite easy. You essentially need two things:
First you need to use a shader that actually writes into the depth buffer. Usually most transparent shaders do not.
Second you have to render your areas the other way round. So you should render the yellow area first, the blue one second and the red one last.
For this approach you can actually use vertex colors to color the bands and create the bands in one mesh. A mesh is rendered in order. So the triangles that appear first in the mesh are rendered first.
There are also alternatives to this approach if you can calculate your "bands" mathematically in a shader. This may be the best from a performance point of view since you don't need to generate complex mesh data. However you need to be able to describe your areas mathematically. It looks like you're looking for a circular distance from a line segment. The math for that would be the same as the code used over here. In addition you also want your cone shape. This could actually be achieved by rendering a single triangle that covers that shape. The bands could be simply defined by a distance / interval and the coloring can be done through a lookup texture.
Personally I would probably go with the pure shader solution. Not only does it produce the best results with "infinite" detail when you zoom in but it also is more scalable and does only require a single triangle (or a trapezoid == 2 triangles)
Thanks @Bunny83 for the reply - I haven't actually worked with shaders yet as right now I'm just calculating each mesh area and applying a material with a different color set for each, but it sounds like this is the approach to take as it has access to the depth buffer. Initially I was going to do the banded approach, but I needed to easily track collisions with each range's collider and the banded approach wouldn't let a long range attack register at close range (if that makes sense).
