Hey JetGuys in this chapter we are going to create a little Outline shader both for our 3D objects and for sprite renders. This outline is going to be cartoon style and
we will develop it in Unity 2019.1. Inside the Visual effects folder
I have created a sub-folder called "Outline", this one contains three folders inside: "Obj" for 3D objects, "Sprite" for sprite renders
and "Tex" for our textures. To generate our effect,
we create a new unlit shader, we call it Outline and then we create a material
which we call the same way. We open the shader, we change its location; In ShaderLab, we delete Tags, LOD and all accesses to FOG
since we will not use them. To generate our outline effect,
we are going to need two passes: the first one is for the outline effect and the second one corresponds to the
final color of the texture. In our Outline pass we create a function, where we pass the position of the vertices
in object-space and the thickness of the outline. The purpose of this function is to
increase the scale of the mesh by multiplying a new
scale by the position of the vertices. We go back to our code and the first thing we are going to do is
to duplicate the initial pass, to do this, we select the entire pass, copy and paste. We call the first pass "outline pass" and call the second one "texture pass". To start creating the "outline" function
we are going to need two properties: _OutColor, we call it Outline Color, and it will be white by default, and finally _OutValue, we call it "Outline Value" and it has to have a range between 0.0 and 0.2. We are going to use these properties
only in our Outline Pass for that reason, we add the connection
variable only in this pass. We are going to use the "Outline" function
on the vertex shader stage since we are going to use an array
to change the position of the vertices, for that reason,
we position ourselves on this stage, we create a four-dimensional vector, we call it "outline" and as an argument we pass the position
of the vertices and the value of the outline. The vertexPos argument is a
four dimensional vector, this is because we will pass
the vertices of the vertex input which also correspond to
a four-dimensional vector. The outValue argument is a
floating value of one dimension, this is because we are going to connect it with the _OutValue property,
which returns a range between 0.0 and 0.2. Before continuing, I want to tell you that we are
developing the "Shader Bible in Unity" that will have all the information
necessary to generate high-end effects Did you know that in Unity the shaders
are written in HLSL language? In the "Shader Bible in Unity" you will be able to understand
the difference between types of rendering pipeline, introduce to the programming language, understand its syntax,
properties, functions and more, everything explained
in detail for beginners. Get free access to the first chapter
following the link that I leave you in the description. Within our function,
we create a four-dimensional matrix, we call it "scale" and then add the outValue to the scale of the matrix. We return the multiplication between
the scale and position of the vertices. In order to appreciate the outline effect,
we have to go to the "vertex shader stage", we create a four-dimensional vector, we call it "vertexPos" and we make it the same as our "outline" function, as arguments we pass the
vertices input and the _OutValue property. Finally, in UnitiObjectToClipPos, we pass the new coordinates,
replacing the vertices input with "vertexPos". We save and return to our project. We assign the shader to the material, we drag the Chest and ball to the scene, and we also create a sprite render. Remember that you can find all
these files on our Patreon. I leave you the link in the description. We duplicate the material, we rename and finally assign each
material to its respective object. In the case of the "Sprite Render",
we use our Sword_sprite as a sprite and in its property of
material we assign the material outline. If we select one of the materials
we are going to notice that the color property and the outline value have
been added correctly, however the color is not yet
connected in our shader and the outline value is
only scaling the objects, Why is this happening? let's remember
that we are using two passes and what we are climbing
currently it's the outline pass, if we go to "shading mode" in
our scene and we switch to "wireframe", we are going to notice that our pass of
texture is inside our object and we're just scaling the outline pass. to be able to appreciate this in a better way,
we have to go back to our code and in the fragment shader stage of the outline pass,
we only return _OutColor. If we save we return to our project, we can appreciate better our outline, however there are still details in it. In our 3D geometries the texture is not visible and in the sprite render is being generated z-fighting, Why does this occur? It is because both passes are using
the same depth position in the z-buffer. to solve this problem,
we have to go back to our code and the first thing we do is to add Tags both in the outline pass and in the texture pass. In both we use "Queue Transparent" but in the case of Texture pass we add +1 to make sure that the texture is being rendered
last in the Render Pipeline. Then we enable Blend SrcAlpha
OneMinusScrAlpha in both passes to obtain transparency layers, and finally in our outline pass we deactivate the z-buffer
using the Zwrite Off command. Then we go to the fragment shader stage and return a four-dimensional vector. In its RGB values
we pass the _OutColor property and we make the value of alpha equal to the
alpha of the texture so that the outline keeps the same shape on the scale. If we save and return to our project, we are going to notice that our shader
now it's working perfectly. If we position any element in front of another, we are going to notice that the outline merges
due to the depth in the z-buffer, if you want to see the full effect
of the outline on each object, the only thing you have to do is
change the Render Queue from the Inspector Material to Transparent. Our effect is ready. I invite you to modify the values
to find different results. Thanks for joining us, Jettelly wishes you
success in your professional career. Te invito a modificar los valores
para encontrar resultados distintos. Gracias por acompañarnos, Jettelly te desea
éxito en tu carrera profesional.
