In this tutorial we will create an outline effect using Unity's Unlit Shader.
Create two objects (sphere),
Scale one sphere a little large (1.2, 1.2, 1.2), and color it black.
Reposition these sphere's to center.
That's how an outline effect works.
Now Lets perform this in Unity.
Add 2 sphere's in your scene, apply separate unlit shader on both sphere's.
Like shaderone on sphere 1, and shadertwo on sphere 2.
Apply a colourful texture to sphere 1, and black texture to sphere 2.
scale sphere 2 a little bigger (1.1, 1.1, 1.1).
Now reposition these sphere's to center.
Instead of creating an outline, the larger sphere is covering the smaller sphere.
There is a command in Unity shader programming "Cull Front" if you add it in black sphere's shader code. (Mentioned with orange cell) It will not draw the front side of black sphere, and it behaves like an outline.
basically the sphere have polygons, and "Cull Front" command does not draw/render the polygons that are facing the camera.
" If dot(.) product of polygons normal vector with the camera forward vector is greater than 0 then that polygon will not draw. "
Currently we are using 2 shader & 2 sphere to create the outline effect, next will use only 1 shader & 1 sphere to do that work.
That could be done, by using 2 passes instead of 1, now the question is what is a pass ?.
To avoid complexity and following the general track/path/road of learning, just consider this "statement",
"A pass contains instructions for the GPU to draw an object. Vertex function, fragment function and Cull Front could be consider as instructions"
A shader could have more than 1 pass, for example the shader have 2 passes that simply means we are drawing two objects with different instructions, with only 1 shader.
That is what we are going to do now, we will use 2 passes.
Now delete these 2 sphere's (1 & 2).
Create a new sphere and apply a new unlit shader on it, and apply a colourful texture to it.
Open the unlit shader in visual studio.
Just copy the current pass and paste it just below it. (Left image below)
And delete these lines mentioned with yellow cell.
In the first pass we will not change anything, it will draw the small colourful sphere with texture.
In the second pass we deleted the texture stuff, and set color to white, It will draw the outline.
Further explained in the next section.
Output is white sphere, because in the second pass we are sending instructions to GPU to draw a second sphere of white color at the same position.
Write Cull Front in the second pass, and scale the white sphere by scalling the vertices in the second pass. (Mentioned with orange cell)
In the second pass we are scalling the white (outline) sphere by just displacing/moving the vertices.
How that's working?
For example, we have a 2D vector having coordinates (5.0, 5.0). (Shown in left image below)
If we want to displace/move the 2D vector in the direction, the 2D vector is pointing, we just have to multiply it with a number.
Multiply 1.5 with the 2D vector and it will displace to (7.5, 7.5), e.g (5, 5) * 1.5 = (7.5, 7.5)
Sphere is made up of vertices, and each vertex on the Sphere has a position defined by 3 parameters (x, y, z).
Each vertex(point) is also a 3D vector with origin at the center of the Sphere.
So if we multiply 1.1 with the vertices it will displace/move them in the direction, these 3D vector's are pointing, result in increases size of outline sphere.
