How to overwrite multiple semi-transparent 2D mesh layers?

Question

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.

alt text

Answer 1

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)

How to overwrite multiple semi-transparent 2D mesh layers?

1 Reply

Your answer

Follow this Question

Related Questions