Material tricks

Scratch decals

I wanted to add scratches to the painted metal sheet furniture in the garage, to show the raw metal where the paint was scraped off. I made a deferred decal material with the Translucent decal blending mode because the DBuffer variants didn’t offer the metallic property. However the result was off: closer inspection revealed that this fully metallic decal looks more like an extra layer of clear-coat: shiny alright but the color set in the material only affects the reflections, not the diffuse of the underlying surface.

Decal hack material tricks Material tricks ScratchDecalHack01 300x289

After some experimentation I found that the DBuffer Translucent Color Roughness decal blend mode does change the diffuse color but can’t modify Metallic. The hackfix is using both of these decal materials at the same time: one sets the color while the other adds the metallic reflections. I made a blueprint which contains two decal components and has a material instance property: Based on that it creates and sets up the two dynamic material instances used by the two components.

Decal hack material tricks Material tricks ScratchDecalHack02 300x289
Scratches on a cupboard material tricks Material tricks ScratchDecalHack03 300x178
Scorch mark decals

The hover mines leave behind a scorch mark decal when they explode. Using a texture atlas of 2×2 or 4×4 images and randomly picking one would have been trivial to implement but I was curious to see if I can do a smarter material producing a much wider set of different scorch marks. As it turns out it’s not difficult.

The random scorch marks material tricks Material tricks ScorchMarkDecal

The first step is adding a Random Seed scalar parameter which is then used to pick a random value from a texture containing random noise. The sampler’s UVs are generated simply by using the seed as U coordinate and multiplying it by a constant for V. The random seed parameter’s value of course will be randomized when a unique dynamic material instance is created for an explosion. The reason I used a random scalar to get a random RGB color from a texture is because I needed 3 random values to drive scaling, rotation and offset. I could have used 3 material parameters for that but the Effect class which manages these decals is kept as simple and generic as possible so it only sets a single random seed.

The random offset, rotation and scale are applied to the texture seen on the right. The image’s bottom is always offset to the center so the smudges radiate outward form the epicenter of the explosion.

Scorch decal texture material tricks Material tricks ScorchMarkDecal01 300x300

This branch of the node tree is cloned two more times to get three texture samples. The red, green and blue channels are extracted from those samples and the three grayscale data added together to produce the base of the scorch mask.

The scorch decal material material tricks Material tricks ScorchMarkDecal02 300x187

The center often ends up a bit too empty so the combination of a radial gradient and some Perlin noise texture used there to add blobs. A radial gradient with slightly different contrast settings makes sure that the decal fades at the edges.

The scorch decal material material tricks Material tricks ScorchMarkDecal03 300x187
Render UMG to texture

Drone Alone has a few displays in the game world: Clocks on the wall, the on-board projector, the mission giver computer’s screen and the LCD display of the charging station. The textures for them are generated by a scene capture actor rendering UMG widgets into an image. The reason for this is that all the texts needed further processing before they could be shown to the player

The captured UMG widgets material tricks Material tricks UMGCapture01 300x106

The lack of MIP mapping on the captured texture was clearly an issue on the wall clock. To work around it an 8 tap blur is used where the offset is controlled by the Camera Depth Fade node: the bigger the distance from the camera the more the samples are spread out.

The same trick is used for the Minitel screen where I also added interlacing and retrace effects.

Wall clock at different distances material tricks Material tricks Clock

For the charging station’s I wanted to emulate and old LCD with a high response time. To achieve that I added a plane in front of the UMG widget. That plane shows the captured texture, what the widget looked like in the previous frame, with decreased brightness. This “video feedback” produces the desired blur.

High response time LCD material tricks Material tricks LCD
Detail maps

In first person view the camera can get really close to surfaces so I used detail maps like the one on the right. The image is produced by a Filter Forge filter which takes the source image and subtracts it from the image’s average color. Then (0.5, 0.5, 0.5) is added to the result to offset the values so the final texture ends up storing a full range of relative color differences.

material tricks Material tricks DetailMap01b
material tricks Material tricks DetailMap01a

16 of these textures are assembled into an atlas and used in my Detail Map node shown on the right. (The input parameters should be self explanatory.)

The Detail Map node material tricks Material tricks DetailMap02

Use the sliders in the following comparisons to see the effect of the detail maps on cardboard, plaster and carpet.

material tricks Material tricks DetailMap03b
material tricks Material tricks DetailMap03a
material tricks Material tricks DetailMap05b
material tricks Material tricks DetailMap05a
material tricks Material tricks DetailMap04b
material tricks Material tricks DetailMap04a

There is a related node called Detail Map Multi which takes 2 more index parameters and a grayscale mask texture. A simple logic modifies the mask texture so it can drive a single Detail Map node’s Detail Index parameter: Areas with 0 to 0.3 brightness become Detail Index 1 while 0.3 to 0.6 becomes index 2 and the rest index 3. Additionally the detail map will not have any effect at all on black mask texels.

 

Using this node it’s easy to apply detail maps to assets which have different kinds of surfaces baked into the same texture. The mask texture is also baked, along with other textures, using the Auxiliary material channel of my Unreal Shader.

Faceted UVs

I really don’t like how blurry textures become when scaled up too much. While detail maps help they can’t cover up the boring, overly smooth features of the underlying textures. While I was working on the detail map mechanics I realized that similar, high frequency details could be added to the UV coordinates to break them up.

On the right you can see a comparison of the usual bi-linear filtered look and the faceted UVs on the close up of the carpet.

material tricks Material tricks DetailMap06b
material tricks Material tricks DetailMap06a

The texture for it is generated in Filter Forge. The colors in each cell are basically coordinates relative to the center of the cell. When scaled based on tiling and subtracted from the UV coordinates each cell becomes a single UV coordinate, a uniform vector 2 value instead of a gradient. When these coordinates are used for texture sampling the texture starts to look “faceted” as each cell becomes a single color.

 

There are a few different patterns that I used, from resembling brush strokes to a bunch of pointy triangles.

Faceted UV texture material tricks Material tricks FacetedUVs02 300x300
material tricks Material tricks FacetedUVs05b
material tricks Material tricks FacetedUVs05a
material tricks Material tricks FacetedUVs04b
material tricks Material tricks FacetedUVs04a
material tricks Material tricks FacetedUVs03b
material tricks Material tricks FacetedUVs03a
Relay nodes

While Blueprints have reroute nodes the material editor lacks this crucial building block so I made a bunch of relay node material functions to help managing wires. They come in scalar, vector2, vector3, vector4 flavors and are empty inside.

The relay node material tricks Material tricks RelayNode 162x300
4 Way Comparison node

A simple node to help debugging values. It displays 4 colors side by side.

4 Way Comparison node material tricks Material tricks 4WayComparison 300x204
Debug Time Triangle node

I often use this helper node as alpha for Lerp nodes when I’m tweaking the parameters to constantly check the range of values.

Debug Time Triangle node material tricks Material tricks DebugTimeTriangle 300x92
Gradient Range Mask node

With this node one can create a mask of a value range: pixels will be white only for values which are in the defined range.

Gradient Range Mask material tricks Material tricks GradientRangeMask 300x67
Quantize Scalar node

This node is basically a “snap to grid”. Can be used on UV coordinates to pixelize images, with colors to get a posterize effect and so on.

Quantize Scalar material tricks Material tricks QuantizeScalar 300x132
Tiling Sub Image UV node

Makes a sub image in a texture atlas tile. I used it with the detail maps mentioned above.

Tiling Sub Image UV material tricks Material tricks TilingSubImageUV 300x92

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/zoltanec/public_html/pages/wp-includes/functions.php on line 4552

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/zoltanec/public_html/pages/wp-includes/functions.php on line 4552