Normal Edge Decal Tutorial HQ PDF + Unity Shader
Normal Edge Decal Tutorial HQ PDF + Unity Shader
INTRO
DISCLAIMER: This technique appears in many games nowadays, I consider IOI one of the first pioneers
of adequately using this technique in Hitman Absolution that was in development in 2009, so:
Back in the days, words like deferred rendering (see the end of the tutorial for more info about it), render,
deferred shading pipeline, buffer, trim sheets etc were words only for super technical monsters of the
industry :). Nowadays we are living in a time where a lot of information is in what people call the internet,
and because of that that people in the industry are learning and getting more and more technical than
artists years ago used to be, with that said information becomes easier to understand and to apply. At the
end of this pdf, you will find all the links and references that can help you expand and better understand
this topic but also all the information that is present in this tutorial scattered around.
Wrapping up I’m just tidily putting together understandable information that will help you understand the
topic sourcing what is already present in various tutorials and articles online.
Ideally, with this, I want you to quickly learn the technical stuff that the job requires so that you can focus
more on the art rather than finding solutions or fixing problems.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
NORMAL EDGE DECALS
NORMAL EDGE DECALS are very useful when you want to break the rigidity of the geometrical lines
that compose an object. These are commonly applied to architectural elements and props that use
tileable textures. This allows you to keep the tileable material untouched whilst achieving some extra
details such as scratches or minor destruction.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
If you pay attention, you will find normal edge decals in pretty much all the
next gen games you play as well as some oldy buy goldy ones.
Here are some examples:
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Let’s have a look at the most obvious ones:
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
PLAN IT FIRST
Search for reference and plan what edge decals you want to create.
Ideally, you want enough variations to cover the majority of the tileable
materials you are going to use on big scale objects such as architectural
meshes: Walls corners, stairs, trims. These examples vary based on the type
of project you are working on.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Based on the project you are working on and the number of details you want
to get, you have two different directions when planning the trim:
PLASTERS CONCRETES
WOODS METALS
WELDS PLASTICS
PRO
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
THE TRUTH LIES SOMEWHERE IN THE MIDDLE
+
with the state of destruction and not just changing the intensity ;)
PLASTER CONCRETE WOOD METAL WELD PLASTER CONCRETE WOOD METAL WELD
With this option, you have a wide range of destructions type for most of the conventional materials whilst
ensuring that the number of textures is low. NOTE: I OBVIOUSLY CHOOSE THESE MATERIALS AS THEY
ARE THE MOST COMMON GENERIC TYPE OF MATERIALS
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
HOW TO CREATE A NORMAL SHEET
Our final goal is to reach a map that look like this (left), to do that divide
the texture in 5 (or more) slots A, B, C, D, E and get the normal
information map in the center of each slot giving enough room to fade
before reaching in the near slots. NOTE: THE TRIMS HAVE BEEN OBVIOUSLY
PLACE VERTICAL BECAUSE IT MAKE SENSE SINCE WE ARE GOING TO APPLY MAINLY
ON VERTICLA CORNERS, FEEL FREE TO PLACE DIAGONALLY IF YOU FEEL LIKE IT :)
A B C D E
!
WE ONLY CREATE ONE (OR TWO DEPENDING WHAT YOU
PLANNED) NORMAL SHEET, FOR EVERYTHING ONCE.
YOU SHOULDN'T CREATE A NEW ONE FOR EACH ASSET
YOU MAKE; INSTEAD, YOU SHOULD RE-USE THIS ONE.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
A B C D E
A B C D E
Simply create some primitive meshes and sculpt the corners the way you
want the normal map on the decal to look like. Then create the low poly
version of that corner. Make sure that you cover the area of each slot with a
lowpoly mesh (see "low poly and bake" page).
NOTE: THERE ARE DIFFERENT WAYS TO ACHIEVE THIS, THAT?S THE ONE THAT IT'S MOST STRAIGHT FORWARD TO UNDERSTAND
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
ZBRUSH WORKFLOW 101
OPTION A OPTION B
Import your mesh in ZBrush and under Alternatively, you can subdivide your mesh a few
Geometry press divide few times (5-6 times) times with the SMT (smooth) option disabled
then activate SMT (smooth) option and press and then under Deformation you play with the
other few times so that you can smooth a bit first deformers. This will allow you to have better
the edges which will help when sculpting it control over the smoothness of the edge.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Here are some of the brushes that I used to create the normal map for this tutorial. There are
endless ways to achieve the same thing in ZBrush.
WOOD AND PLASTIC CONCRETE METAL WELD
TO ACHIEVE A
BETTER WELD I’D SUGGEST
TO SMOOTH A BIT THE
+ + CORNER YOU ARE GOING
TO SCULPT BEFORE
STARTING
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
HOW TO CREATE WELD ALPHA IN PHOTOSHOP
This technique can be applied to other software such as Substance Designer
A B C D E F G H I J
Create a new document (A), Using the gradient layer you can create a spherical shape with a smooth black
outline, might be better to set the background mid-grey to see the dark ring around the circle (B), Remove the
background and rasterise the layer (C). Duplicate the layers vertically to fill the whole image like in the image D
and merge all the layer then press Ctrl+A and from the top menu press Image > Crop. At this point go to Filter >
Other > Offset and set horizontal at 0 and vertical offset half of the size (512 px ). If you get a seam you can easily
remove it with the Clone Stamp Tool you can remove it (E). Now go to Filter > Blur > Gaussian Blur and try to get
the result I got (G). Now create a new gradient layer (H) and set the blending mode to Multiply on top of
everything. The last step is to reduce the intensity of the map with some level (I). You should get something like
mine (J). Depends on the type of weld you want to deform more the shapes as well as adding more variation on it.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
LOW POLYS AND BAKE LOW POLY CONSIDERATION
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Finally bake the high poly on the low poly (if you don’t know how to do https://goo.gl/HDWhd5
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Time to fix the seams. You can quickly fix that with photoshop or similar software.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Now we need to adjust the texture a bit. Since we baked from a 3d model on a
smooth mesh, we need to flatten a bit the area between the different corner dents
so that when we applied the normal decal, the transition will be more seamless
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
To get this result open it
with photoshop (or
similar) and create a
new layer. Then with a
soft brush make some
strokes in the gaps. Use
the colour for the flat
normal map.
HEX: 7E7DFD
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
SIMPLE
+ COMPLEX
Last thing we need to create an alpha texture to mask out the part of the normal we don't need it. You can also
create a more complex alpha if you see some problems in the way the normal decal is blending with the other
normals. Both should work nicely, the complex one is more accurate but at the same time if not correctly done
could bring some other problems. My advice is to start with the simple one, and if the edge decal normal map is
not blending nicely, You can try to make a more precise mask. You create them with the brush tool in photoshop,
and the channels of the normal map can help you to extrapolate some shapes
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
HOW TO ADD NORMAL EDGE DECAL
ON YOUR MODEL
What you need to create is just a corner mesh which I’m going to call trim mesh from now on.
The faces need to be slightly offset from the original mesh in order to avoid visual issues.
The width of the faces can vary based on the scale of the edge normal decal wanted.
The uvs of the corner mesh need to be mapped correctly on top of one of the slots you have.
The mesh needs to have one smoothing group (in other words the edge needs to be a soften edge)
TOP VIEW
+ =
SMALL MARGIN BETWEEN
MESH AND TRIM
+ =
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
“ISSUE” SOLUTIONS
MESH
MESH
TRIM MESH
VERTEX NORMAL
of the trim at the base, you are (by default) You delete the hidden
straightening the vertex normal, which face, and you rotate by
means that the normal map (that has been 45 degrees the lowest
created along the average normal of the B vertex normal towards
corner of those two faces) will perform NORMAL MAP
the bottom.
incorrectly, and it will lean out trying to bend
DIRECTION
around a missing old average vertex normal. FINAL PRO: Single face
TRIM LOOK
MESH
TRIM MESH
VERTEX NORMAL
CON: Slow
You can purposely remove the face if you are trying
to achieve something like the example above :) TRIM MESH
VERTEX NORMAL
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
UVs wise for the trims you are going to get something like the following image. You want to
offset some UV islands in order to map the trim on a different part of the texture so that you
can achieve more variation.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Not only Maya has the feature to offset uvs, here the spae option on other softwares
ABSOLUTE
RELATIVE
In 3ds Max after opening the uv editor, there In Modo in the uv editor, you select the In Blender after opend the uv ediotor press In Houdini you create an uvedit (or when you
are two options absolute values and the trim uv you want to move, select “N” to get the right bar with the proprieties. are making the uv), you open the uv editor (
relative values, you can cange them by Transform tool and in the Transform The values are absolute so you need to add space + 5) and select the uv then add or
pressing the icon. I’d reccomend to use the proprieties you have the U and V value. or subtract the offset you want. In my case subtract 0.2 (in my case) in the transform
realtive mode: and in my case I use 0.2 or You can offset by adding or substracting 50 units proprieties
-0.2 to move the uv to the next or previous 0.2 (in my case)
slot.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
SOME WAYS TO CHANGE THE SCALE OF THE DECAL DETAILS
The first thing first, we should take into consideration one important thing: We should ALWAYS REDUCE THE PART OF THE MESH THAT IS GOING TO BE
TRANSPARENT based on the Alpha we generated earlier. For two reasons: First becasue the amount of transparent area we are rendering: less transparent
is cheaper. Second reason is that by reducing the unnecessary mesh area, we are reduceing the size of the trim mesh, which will reduce the draw distance,
that means the trim mesh is rendered only up-close. The following are some of the available options you have if you want to scale details, choose wisely :)
B C
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
NORMAL DECAL IN UNREAL (SIMPLE)
In very short, the reason why is not working with the static lights is that the normal maps are
used for faking the lighting of bumps and destructions by making the rays bouncing in
different directions from the actual geometry. If you bake the lighting (static) you are baking
the light as a map onto the meshes which means that you are not going to have rays which
means that the normal map can’t work properly in the way I’m explaining with this tutorial
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Here a comparason in unreal engine. I applied some tileable material as well to simulate more
the resoult you will get. Normal edge decal sill work even if the surface is completrly flat
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
NORMAL DECAL IN UNITY
With this tutorial, you also get the shader you need to
use to get the deferred normal decal functionality.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
Once you have the shader, Create a new In order to see the normal decals,
Material and apply the new shader. Then you will have to set your camera or
assign the texture you create earlier project. “Rendering Path” as Deferred
(Normal map and alpha)
The normal edge decals only work with lights set as Real-time or Mixed.
(This is a copy paste of the Unreal section if you read that you can
skip this one) In very short, the reason why is not working with the
static lights is that the normal maps are used for faking the lighting
of bumps and dents by making the rays bouncing in a different
direction from the actual geometry. If you bake the lighting (baked)
you are baking the light as a map onto the meshes which means
that you are not going to have rays which means that the normal
map can’t work properly
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
EDGE NORMAL DECAL
+ VERTEX PAINTING IN UNREAL
All good but it comes with a price when you use vertex
colour you might face some LOD issue since this workflow
relay on vertex density which is something that you want to
reduce in your LODS.
You can add colours to your vertex in Unreal Engine with the
paint tool as well as in your 3d software (Maya, Max, Modo etc)
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
BLENDING USAGE MASKING USAGE
In this usage, you can use vertex colours as a way to blend In this case, I’m using the vertex colours to mask the normal
between two different normal edge decals. For example, you edge decals to break that repetitiveness and add some variation.
can have soft concrete dents combining with a destroyed As you can see from the wireframe, I added some vertex in order
concrete. In this example, I’m overlapping the two decals in the to have more control when using the vertex colour. The
center part, and I’m erasing the red colour from the last two disadvantage or proper you might face with this technique is the
vertexes that are overlapping. In this case, you shouldn't have LOD popping out. If you generate LOD automatically, Unreal,
significant LOD popping issues since you have two different Sympligon or whatever tool you are using they will remove
meshes made of very few faces. vertexes which means that you are going to lose density of your
mesh in the generated LOD leading to poping.
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
PRO AND CONS
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
UNDERSTAND WHAT YOU ARE DOING
ROUGHNESS
FINAL IMAGE
POST TONE
GEOMETRY
SPECULAR
PRE TONE
METALLIC
NORMAL
WORLD
COLOR
+ + DEPTH + + + + + + =
In a very simplified way, showing only a few of the passes, this is what happens in the buffer
every time you're rendering a frame with the Deferred Shading pipeline. Through shaders we
can access all of these layers and override or change proprieties for each of them
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
When we create the shader (in Unreal), we select Deferred Decal as “Material
Domain”. Basically we are saying to the shader to go affect one or more of the
passes previusly shown. How do we choose which pass we want to affect?
When selecting Deferred Decal, you are going to get “Decal Blend Mode”
enabled. From there you can pick the different way the decal will blend, in our
case we have “NORMAL” WHICH MEANS THAT WILL ONLY AFFECT THE
NORMAL OF THE OBJECT. If we want some colour variation ( for example dry
blood decals, or paint marks), you may choose Stain, and if the full material is
needed you just leave it on “Translucent” (for example better paint decals with
rough variation).
DEFERRED DECAL
SET TO NORMAL
ROUGHNESS
FINAL IMAGE
POST TONE
GEOMETRY
SPECULAR
PRE TONE
METALLIC
NORMAL
WORLD
COLOR
DEPTH
+ + + + + + + + + =
Everythong come with a cost. As you can tell in this “flow chart”, we added an extra pass that the buffer needs to go
through every frame. Ideally, it is not a big deal. The problems start when you overlap many deferred decals on top of
each other which is very likely to happen since they are so cooool :) so be careful!
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
WRAPPING UP
Now that you learned how this technology works and how cool the normal
edge decals are. Try to think of other ways you can use this workflow for
different stuff.
For example, imagine if you want to add a patch with a tiny drop on a tiled
floor. Or you want to enrich your storytelling with some scratches on a wall. Or
even add some footprints marks on a muddy floor.
All of these examples are achievable with the same tools I showed you in this
tutorial. But I want you to stretch your mind and get to the solution by yourself
so that by trying you will master this workflow. If you really can’t think of
anything feel free to drop me a message tho :)
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
LINKS AND REFERENCE
https://gfycat.com/InconsequentialObeseClam#Inspiration
https://www.reddit.com/r/Unity3D/comments/7ertg2/shader_which_only_writes_to_normal_buffer_for/
https://geofflester.wordpress.com/tag/substance-painter-2/
https://geofflester.files.wordpress.com/2016/10/substancepainterdecalscene.png
https://docs.cryengine.com/plugins/servlet/mobile#content/view/1310733
https://simonschreibt.de/gat/fallout-3-edges/
https://polycount.com/discussion/155894/decal-technique-from-star-citizen/p3
https://www.youtube.com/watch?v=iNdZ2LKih9I
http://www.richterdesigns.co.uk/mobilesite/scripting.html
http://www.richterdesigns.co.uk/graphics/decal_generator.png
https://answers.unrealengine.com/questions/75508/is-it-possible-to-use-custom-geometry-decals.html
https://docs.unrealengine.com/en-us/Resources/ContentExamples/Decals/1_2
https://pastebin.com/g5RYj45H
https://forum.unity.com/threads/how-do-i-write-a-normal-decal-shader-using-a-newly-added-unity-5-2-finalgbuffer-modifier.356644/
https://en.wikipedia.org/wiki/Deferred_shading
https://learnopengl.com/Advanced-Lighting/Deferred-Shading
http://blog.digital-horror.com/introduction-to-deferred-rendering/
https://simonschreibt.de/gat/renderhell-book1/
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM
IF YOU LIKED THIS TUTORIAL
If you liked this tutorial please push the “thump up” and let me know in the comment on Artstation what you
think was good, bad or unclear, as well as if you have any suggestion feedback or ideas for the next ones,
feel free to spread it around with your friend or colleague by sharing this link:
https://goo.gl/zMhqUK
This page is part of a tutorial made by Leonardo Iezzi about Normal edge decal. If you have any question, feedback or suggestion, please get in touch with me at LEONANO.COM