fbpx

Asset color customization with shader graph and color masks

For quite a long time Unity was unavailable to the part of users, who didn’t deal with coding like e.g. graphic designers but still wanted to show more in their projects than just standard solutions connected for instance with materials. Everything changed when Unity added a shader graph as a standard engine tool.

Shader graph serves for visual shader scripting – you can create very advanced or simple shaders adapted to your project’s needs while using nodes and cords without the necessity of coding.

The following tutorial shows how to create a shader that allows us to freely change the asset’s color, without the need of generating hundreds of textures or materials.

See how to create a shader step by step

Meet RoboHelper who will assist me with this tutorial:

Photo1

At the moment RoboHelper has a standard material with a set of textures:

Photo2

As you can see, the color change is possible but in most cases really useless:

Create a new shader graph

For comparison purposes, I’ll create a friend for RoboHelper – RoboHelper 2

Photo3

In order to create a new shader graph, do the right-click right on the appropriate folder and choose to Create >> Shader  >> PBR Shader (shader graph is only available for unity projects in URP and HDRP rendering pipelines)

Photo4

First, I’ll be presenting the features of a standard shader:

create shader graph tutorial ex1 create shader graph tutorial ex2 create shader graph tutorial ex3

Next, you have to get rid of the colors from the albedo channel, which can be done via the saturation node in the shader graph.

create shader graph tutorial ex4

Alternatively, you can use an already prepared texture:

create shader graph tutorial ex5

I will be using the prepared texture, as there is no need to overload the shader with unnecessary calculations.

create shader graph tutorial texture example

Afterward, I will be using masks for specific colors.

Those had to be prepared earlier in a graphic or texture mapping software.

create shader graph tutorial ex6

The base, discolored texture albedo will be blended with colors (multiply) and I’ll set the new color’s location while using the LERP node and the mask color as alpha.

create shader graph tutorial ex7

That needs to be repeated for each mask color:

Then, I’ll add an optional mask in a similar way but this time, I won’t be merging them into one texture.

 

SEE ALSO:  Post-processing for VR and mobile devices

The next step is to add parameters, which will allow us to add optional details:

create shader graph tutorial ex8

Finally, I will add one more mask, this time a universal one that will serve as a logo. In order to use a mask this way, I had to draw up an additional UV map for RoboHelper in a 3D graphic software (blender) beforehand:

UV map for RoboHelper in a 3D graphic software

This is how the final graph looks like:

create shader graph tutorial final example

Although I only limited myself to colors here, you can obviously use the mask to set other parameters, like e.g. metallic & smoothness. As you can see, an appropriately set up shader gives us unlimited possibilities, without sacrificing quality.

Share with:


Jacek Janik - 08/12/2020 - Technology / Tutorials - 0 Comments - tutorial

Leave a comment


This site uses Akismet to reduce spam. Learn how your comment data is processed.


PL OFFICE:
ul. Widok 5
43-300 Bielsko-Biała, PL
NIP/VAT ID:PL547-215-50-20
REGON:362196623
KRS: 0000574950

US OFFICE:
350 S. Northwest Highway SUITE 300 Park Ridge, Illinois, 60068, USA

4e_logo

Copyright 4experience ©  All Rights Reserved | Privacy & Policy