How do I achieve this glowing edge shader?

How do I achieve this glowing edge shader?

I came across this example, and wanted to know how to achieve a shader that will give me similar results, i.e. the glowing edges.
How do I achieve this sort of shader?

Solutions/Answers:

Answer 1:

It looks like this particular effect is applied in texture space, rather than a runtime post-process effect. Here’s one way to generate such a texture:

  1. Set up a pair of RenderTextures of your desired texture resolution (or larger – you can always downsample the result later, which can help smooth out artifacts)

  2. Use Graphics.DrawMeshNow to draw your model into the first RenderTexture, using a custom shader that…

    • Has a vertex shader that transforms vertices to their UV coordinates, rather than using the typical model-view-projection matrices to project them from the camera’s viewpoint. This will let you render a UV net of the object.

    • Has a fragment shader that outputs the face’s object space normal as a colour, effectively rendering a normal map for the object.

      (This will let us distinguish coplanar triangles that are a part of a single larger polygonal facet, or triangles with a smoothed edge between them, versus triangles that meet along a sharply folded edge.

  3. Use Graphics.Blit to copy the first RenderTexture into the second, with an image effect shader that performs edge detection (eg. using a Sobel-Feldman operator). With appropriate contrast & thresholds, this will give us a texture with bright lines at the UV seams and hard edges of the model.

  4. Blit back and forth once or more, using a blur image effect shader to bloom out these bright lines.

  5. Finally, do one last blit that reads both your bloomed edge RenderTexture and your model’s texture, brightening the edges of the texture where the RenderTexture is bright (eg. using additive, screen, dodge, or overlay blending formulae, or creating your own variation).

  6. Save the resulting texture to a file, so you don’t need to re-generate it every time you want to use it.

Here’s an example where I used a similar method to detect UV seams in a model and add “rails” to the texture along these lines.

Answer 2:

This can be done with an edge detection shader. A simple one consists of a post processing fragment shader, which marks as edge all fragments that have normals too different from the neighborn ones in the input image. Your shader should change the fragment color when It is detected as edge. From that, you could also blur the edges’ neigborhood in order to avoid aliasing.

References