Question Efficient way to make 2D Edge Only Outlines? (100% transparent inside)

Hi,

I am trying to create a material of 'edge only outlines' (the inside being 100% transparent).

<--- like this (from tetris effect)


My mesh is 2D, and is dynamically generated at runtime. Here is an example of what it looks like:



I would like to convert this to only edge outlines, with the insides completely transparent.

From my understanding, popular Outline shaders like UnityFX.Outline will NOT work, because I require the inside to be transparent. In that case, how can I achieve this effect?

Thank you

 

I doubt there'll be any premade asset that'll do exactly what you want / need. However the general technique being used by many "highlight" style outline effects will actually work perfectly for what you want to accomplish.

The very short version of what's being done by the asset you linked to:

1. Render objects you want to have an outline to a render texture.
2. Blur render texture while rendering into a new render texture.
3. Blit blurred texture to screen, discarding pixels that have data in the original render texture.

Most of these assets will assume you only want to highlight visible objects, which in your case you don't want as you don't want the original mesh to be visible in the scene, only the outline. This is a script side only issue and can likely be easily worked around.

The other problem most of the scripts you'll find will assume it's rendering an opaque object that you ignore the color of. So it's just going to render a solid (or alpha tested) white to the render texture. You may want to render a full color image and blur that. Then instead of discarding the original render texture's pixels in the final blit, you want to subtract that pixel color from the blurred render texture.

There was an old tutorial on doing highlight outlines for Unity 5.2 that did exactly this. But unfortunately the example code all stopped working in Unity 5.4 and was never updated, and I think even the youtube video for it has since been removed.

 

Thanks for the response bgolus.

I am a beginner in game dev, so I will need to do more studying before I can tackle this.

To clarify, this would all be done within the shader?

 

The 3 steps I mentioned are done with a c# script creating temporary render textures and calling

Blit()

and multiple separate shaders, or more explicitly separate shader passes. You can try starting with the asset you linked to above and try to figure out how each part of it works.