A better toon outline shader?

Unity Engine
1

Hi,

Firstly I know very little about shaders, I am looking to learn but I need to find a quick solution to my problem.

I’m working on a project where I want to make it really obvious what objects can and can’t be interacted with. The toon outline shader seemed like the obvious option, but when applied I get this effect…

The gaps on the corner and above and below aren’t acceptable. I need the outline to be quite thick like this dodgy photoshop…

Does anyone know of such a shader? I only want this to work on certain objects, not the whole scene.

2

Increasing the objects smoothing angle should improve this.

3

No joy I’m afraid. The original “door” was a cube created inside Unity, so I created a “door” in Max and imported by FBX so I could change the smoothing angle, but it did nothing to a cube.

4

I agree with Daniel. The normals need to be perfectly smooth for the toon shader to give good results. Try setting the smoothing angle to 1 or 0 (and enable “Calculate Normals”).

5

Whoops… Look like someone didn’t hit “Apply” when he changed the smooth normals…

6

i also discovered another problem with the toon shader and that is that the outlines always ramain the same thickness.
I think the best way to solve this is to write a post proccessing effect for the outline but I first have to figure out how to do that.
See the problem here:

145398--5315--$toon_far_286.jpg
145398--5315--$toon_far_286.jpg1366×768 75.3 KB

145398--5316--$toon_close_162.jpg
145398--5316--$toon_close_162.jpg1366×768 52 KB

7

This modified shader has the z position taken out of the equation that determines the line thickness:

Shader "Toon/Basic Outline" {
	Properties {
		_Color ("Main Color", Color) = (.5,.5,.5,1)
		_OutlineColor ("Outline Color", Color) = (0,0,0,1)
		_Outline ("Outline width", Range (.002, 0.03)) = .005
		_MainTex ("Base (RGB)", 2D) = "white" { }
		_ToonShade ("ToonShader Cubemap(RGB)", CUBE) = "" { Texgen CubeNormal }
	}

	SubShader {
		Tags { "RenderType"="Opaque" }
		UsePass "Toon/Basic/BASE"
		Pass {
			Name "OUTLINE"
			Tags { "LightMode" = "Always" }
CGPROGRAM
#pragma vertex vert

struct appdata {
    float4 vertex;
    float3 normal;
};

struct v2f {
	float4 pos : POSITION;
	float4 color : COLOR;
	float fog : FOGC;
};
uniform float _Outline;
uniform float4 _OutlineColor;

v2f vert(appdata v) {
	v2f o;
	o.pos = mul(glstate.matrix.mvp, v.vertex);
	float3 norm = mul ((float3x3)glstate.matrix.modelview[0], v.normal);
	norm.x *= glstate.matrix.projection[0][0];
	norm.y *= glstate.matrix.projection[1][1];
	o.pos.xy += norm.xy * _Outline;
	
	o.fog = o.pos.z;
	o.color = _OutlineColor;
	return o;
}
ENDCG
			//Color (0,0,0,0)
			Cull Front
			ZWrite On
			ColorMask RGB
			Blend SrcAlpha OneMinusSrcAlpha
			SetTexture [_MainTex] { combine primary }
		}
	}
	
	Fallback "Toon/Basic"
}
8

This is an old thread I know… Still, this is a nice shader, great work antenna!

I tried using it on iOS, but it removes the outline :(…

I have zero experience on shaders. Is there any chance of making it work for iOS?

9

Normally, you need to set up your iOS project to use ‘OpenGL ES 2.0’ instead of OpenGL ES 1.x or earlier versions. This is because only 2.0 properly supports shaders.

Unfortunately, due to not knowing overly much about Unity, I can’t really help you with how to do it, but I hope it helps either way.

10

I know this is an old thread, but you can do this in your modelling package without having to delve in to shaders.

simply duplicate your mesh, apply a black material to it, use whatever function your modelling package has to push the mesh outwards based on normal angle, and reverse the normals.

Now when you bring it in to unity, you’ll have a perfect outline that’s whatever size you wanted it to be when you were in maya/max/blender/whatever

11

This will work, for sure, but will also double your triangles count. And if you work for mobile or “normal” PCs this will kill your game.