Unity: Outline shader

Hello again. I’m back with another shader blog post. This time we will take a look at how to make a simple outline shader for your characters.

unlitCharacterFirst let’s take a look at our character with the default unlit unity shader. The character kind of blends in with the map and doesn’t stand out enough. We thought about ways of fixing this. We could for example try to play with shadows a bit or change the color scheme of the map and/or the character. We like it this way so we decided to try and make an outline for them and see how it goes.

One of the ways to make an outline is to use our models normal vectors. Normal vectors are vectors that are perpendicular to their surface (pointing away from the surface). The trick here is to split your character model into two parts. The vertices that are facing the camera and the vertices that are facing away from the camera. We will call them FRONT and BACK respectively. For the outline we take our BACK vertices and move them slightly in the direction of their normal vectors. Think about it like making the part of our character that is facing away from the camera a little fatter. After we have that done, we assign them a color of our choice and we have a nice outline.

outlineCharacterHere is a similar picture with our outline shader. As you can see the character is now easily distinguishable from the map. This effect is even more apparent when you actually play the game and the characters are moving around. It also adds a kind of cartoony effect to them which we like.

To use our shader you have to specify a texture, an outline color and outline thickness (in the unity material after you select the shader). Lets look into the shader code a little.

The shader has two pass-es, which means that we loop through the model data twice. The first pass (lines 38-65) draws the outline. The second pass (lines 67-95) draws the front of the character.

Line 41: The “Cull Front” setting tells the shader to perform a culling on the front facing vertices. It means that we will ignore all the front facing vertices in this pass. We are left with the BACK side that we want to manipulate a little.

Lines 51-53: The math of moving vertices along their normal vectors.

Line 54: Setting the vertex color to our color of choice defined in the shaders properties.

The second pass is more or less the default unlit shader. The added line “Cull Back” is there to make it more explicit that this is the camera facing part of the character. You can leave it out since that is the default culling setting anyways.

As always questions, comments, suggestions and ideas are welcome.

If you want some more outline shader examples you can get them from the unity wiki (http://wiki.unity3d.com/index.php/Silhouette-Outlined_Diffuse). Some of them have extra effects or also handle the lighting of your models.

 

2 thoughts on “Unity: Outline shader

Leave a Reply

Your email address will not be published. Required fields are marked *