Using the Layered Lit Shaders to mix Texture Maps in Unity3D
If materials in general weren’t amazing enough in their own right, consider the fact that you can mix multiple layers of textures into one material with the Layered Lit Shader in Unity3D.
Before jumping into the good stuff, I am going to grab some more fantastic assets from the Filebase asset library, courtesy of GameDevHQ. Enter the texture or 3D object that your heart desires into the search field, and see what is available there. I grabbed ground textures for Dirt, Grass and Sand for later.
After importing, the new assets are now visible in the Assets folder.
I create a new material called StoneGrass, with the intentions of blending stone and grass into one material.
The Shader needs to be set to the HDRP/Layered Lit option.
Under Surface Inputs, the Layer Count can be adjusted to include up to 4 maximum layers. For a coding analogy, think of this as a texture array with a minimum value of 2, because anything less is defeating the purpose, and a maximum value of 4 (inclusive).
Enclosed within the Layer List dialogue box, lies the layer assignments for your Surface Inputs. In this image, there are two unassigned layers.
If the Layer Count is maxed out at a value of 4…
…you will see four assignment layers, each with a color corresponding RGB channel for reference.
The Stone texture is the more dominant visual in the scene, so assign it by dragging the material into the Main Layer in the Inspector with the StoneGrass material selected.
The Grass material can now be dragged into the Layer 1 assignment slot on the StoneGrass material.
I drag and drop the StoneGrass material on to the floor plane game object in the scene view. It turns white because I needed to upgrade one of my materials to be HDRP/Layered Lit.
After making sure my Shader is set to HDRP/Lit, you can see that the grass, which is the underlying layer, is all that is visible.
This happens because there is no Layer Mask to differentiate between the two textures.
If you drop down the Main Layer box, you can access all of the individual controls that you would expect from the standard HDRP Lit Shader.
This also applies to each subsequent layer you add, up to 4 as a maximum value of course.
Let’s take the Height Map from the Stone texture and open it in Photoshop. Pressing Ctrl + L, or navigating to Image>Adjustments>Levels, will open your Levels adjustments. Each of the three sliders represents your overall light, dark and mid tones. Pushing them all to towards each other will produce some excessive contrast, which is what I want.
You can see the levels adjustment at work here in real time.
The dark parts of the image will let the top layer of our Layered Lit material show through, while the light areas will show the secondary layer. I press ctrl + A to select the entire image, and then ctrl + I to inverse the selection. This way the stone shapes will be black, which is what I need to have the top stone layer show through there. This file is saved as a PNG (ctrl + shift + S) into the same file location on my hard drive as the other stone textures.
I saved one regular and one inversed just to have some different masking options. There are now visible in the Assets folder in Unity.
With the new StoneGrass texture selected in the Hierarchy, the PNG we just created can be dragged into the Layer Mask assignment in the inspector.
Now the stone texture finally appears in the dark areas of the Layer Mask, while letting the grass show through the light areas.
The Tiling values can be adjusted to add or decrease the density of the texture pattern. Bringing the value up from one to two here doubles the density of the stone texture.
There are a lot more smaller stones now showing with the denser texture.
The Tiling value on the grass is also increased to add some much needed details into the grass texture.
While there does appear to be a lot of depth going on, if I get really close to the ground, you can see that this is still just a flat plane.
I could add some pixel displacement, or I can change the Shader on my StoneGrass material to be HDRP/LayeredLitTessellation. This opens up the same options for these layers as discussed in my last article about Tessellation.
The Displacement Mode needs to be set to Tessellation Displacement.
I didn’t go too far with this example, but the ground mesh now has some added geometry and raised tessellation!
Enabling the selection Selection Wire Gizmo really shows how much geometry has been added to the mesh here, so keep that in mind and try to use this sparingly.
There are plenty of settings to play with, so I hope you dive in and have fun in your own projects.
I think this stone is looking nice and wet, like it just stopped raining. Thanks for reading along and I hope you join me in my next article about adding the Sky in Unity’s HDRP.