Toon Outline but with Diffuse surface

Graphics Shaders & Materials
1

Hi all

I have been looking through the shader documentation as well as the code in the built in shaders.

It is definitely something I am going to have to spend some time on. In the mean time for my immediate need I would like to know if anyone has ever tried to get the outline feature of the Toony/Basic Outlined shader and have the actual face have a simple diffuse texture instead of the solid bright toon surface.

Below is the screenshot I managed to make. It is the exact effect I want.

I was only able to get this to display by applying the Toony/Basic Outline and then in script changing the shader to Diffuse on a mouse click.

2

:shock:
I can’t believe I know the answer to this one. I wanted this too, and made a modified Toon shader to do it. Simple, really. Just swap out the toon shader UsePass call with one to the diffuse shader, tidy up the code, and you’re done!

Well, here ya’ go, free of charge:

Shader "Outlined Diffuse"
{
	Properties
	{
		_Color ("Main Color", Color) = (.5,.5,.5,1)
		_OutlineColor ("Outline Color", Color) = (0,1,0,1)
		_Outline ("Outline width", Range (0.002, 0.03)) = 0.01
		_MainTex ("Base (RGB)", 2D) = "white" { }
		//Not needed
		//_ToonShade ("ToonShader Cubemap(RGB)", CUBE) = "" { Texgen CubeNormal }
	}

	SubShader
	{
		Tags { "RenderType"="Opaque" }
		//Minor switch
		//UsePass "Toon/Basic/BASE"
		UsePass "Diffuse/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 * o.pos.z * _Outline;
	
				o.fog = o.pos.z;
				o.color = _OutlineColor;
				return o;
			}
			ENDCG
			
			Cull Front
			ZWrite On
			ColorMask RGB
			Blend SrcAlpha OneMinusSrcAlpha
			//? -Note: I don't remember why I put a "?" here
			SetTexture [_MainTex] { combine primary }
		}
	}
	
	Fallback "Diffuse"
}
3

Awesome!

Thanks a ton for the reply that is exactly what I am needing

L

4

This looks great.

Is there a possibility to write a shader which can nicely display ALL edges ?

At this moment if you look at the outer edges, then they are outlined in black, but the lines between the red/yellow , then yellow/blue and red/blue don’t have an outline.

Is this possible so they all have an outline ?

Second question, is there maybe a way to make sure that you can setup in your model (static in the model) which edges should get an outline and which not?

Kind regards,

Bart

5

Please put it up on the wiki, or I will. :slight_smile:

@EducaSoft
I’d just do textures that include a dark line where you want it. It won’t be perfect because the lines are going to taper due to perspective, but I think the only other way would be some sort of two pass thing where you draw the model and then have a second model rendered with ALL of its lines rendering (otherwise I’m not sure how you’d choose which lines are the important ones.) I only have limited knowledge of shaders, though. I could be wrong.

Neil Carter with his Pheonix Final game uses the lines in the texture method to cool effect (not exactly what you want, but close?)
http://www.nether.org.uk/phoenix_final/torpedoes.html

Also, I like that archer in your avatar Omega.

6

AaronSullivan,

Maybe this is indeed the best way to solve it for me.
I’ll have a try thanks for hints

7

@ EducaSoft
The shader I posted can’t work on all the edges, since all the default toon shader it does is move the faces out along their normals (with some scaling correction), color them, then draw the normal object on top of it. This becomes visible when one turns the distance waaaaaayyyy up on a non-sphere. (Try the cube!)

To get all the lines, um, “lined” one either has to write a shader to (somehow) stroke the geometry, “stroke” the mesh with a line renderer, (but that could produce a fair amount of geometry in addition to another object), or bake it into the texture (as Aaron suggested). When going with the last one, just don’t hide the UV map texture (which I’m sure you exported from your 3d program of choice) and you’re 9/10 there.

@Aaron
Thanks! He’s Hunter the Cheetah from Spyro. That particular image I found on Wikia and touched up somewhat.

8

speaking of wikis… do I need to put that shader up for you? I’d rather you did it because you can put up a screenie and an example.

9

Just to point out that as at least one other person wants to use this (me), I strongly suggest someone put it up on that wiki.

:wink:

(thanks for the great info)

10

In the Shader Replacement Project there is an Edge Detection image effect which looks at the differences in normals and depth for neighbouring pixels and where the difference is big - colours the pixels black. E.g. look at the rocks here: PuzzleBloom.

11

That could be a great solution to the Educasoft’s problem. :smile:

Made good on my threat (which I had forgotten about) and posted that original shader to the wiki. It’s pretty bare bones and could use a picture if anyone is up to it.
http://www.unifycommunity.com/wiki/index.php?title=OutlinedDiffuse

12

This is some great stuff, I was thinking of modifying this for a sort of holographic/Tron-esque look.

EDIT: I’ve used this for a Tron-esque look. I use a single directional light, I just dropped its strength to 0.162 (1/10 of Phi, my favorite number to use), and played with the edge settings. My way of covering up the awful programmer art I made.

260550--9370--$gameplay_tronesque1_128.jpg

13

Hi guys,

This thread was a life-saver for me. As a result of Omega’s script, I created a little hybrid shader that allow for highlighted object picking as in eg. Dungeon Siege – see separate thread with the new shader source.

Thank you for sharing! Great community we’ve got here. 8)

14

Used your shader code and other codes out there but im trying to achieve an effect like this

1024×768 206 KB

Judging by what other people have done you need some sort of cubemap to get the lighting to appear to show the light and dark sides on a character. I’m a bit lost since I’m an artist and know nothing of shaders :slight_smile: Any help is appreciated thanks guys

15

This can be done with the built-in toon shader.

-Mouf

16

How hard is it to add a bump map to this? I am looking for an outlined Bumped Specular and Bumped Diffuse Shader. I have looked into using different passes but couldn’t figure out how to do it myself. :?

17

Is it possible to access material’s Outline Color by script? I could change the material’s color by renderer.material.color, but could not find a way to manipulate the outline color.

18

This helped a lot, thank you.

19

This shader doesn’t seem to work with an Orthographic camera. Any idea why?

20

I can’t seem to get this shader working in Unity 3. Can anyone shed some light on it?