This shader is implemented in Unreal Engine 5, following the workflow in Cross-Hatching material Post Process [UE5, valid for UE4].
Adjusted Screen UVs
Because the line patterns are generated from UVs, we must compensate for the viewport’s aspect ratio to prevent distortion when the view size changes. I applied a Frac node so we can have better visialization of it. Notice that no matter how we change the width of the view, it has no effect on the value along y axis.
Next step, we need to move the UV origin to the center of the screen, and flip the G channel (Y axis, the height). I’ll explain later why we need to do this.
The final results of our adjusted screen UVs are shown below, as long as the shader nodes.
Screen Relative Light Vector
The hatching lines are generated using both the adjusted UVs and the main directional light. Since the UVs are in view space, the light direction must also be transformed into view space for consistent calculations.
This can be done by using TransformVector node. After the transformation, we only use the R and G channels(x and y), since the view space is in 2D dimension. Finally, we normalized the vector for the later computations.
Cross Hatching Lines
Line Pattern Generation
Now we can generate our cross hatching line patterns. We start by taking the dot product of our Adjusted Screen UVs and Screen Relative Light Vector. This produces a smooth gradient ranging from black to white, depending on how aligned the UV direction is with the light direction.
Next, we multiply this result by the line density, which controls how frequently the lines reapt. Finally, we apply the Frac node. Since Frac outputs only the fractional portion of the input value(a value between 0 and 1), which is exactly the color range from black to white. Thus, we get a neat, evenly spaced line patterns.
If you are confused about how the dot product works here, try replacing the light vector with a custom float2 node. By manually changing its direction, you can clearly observe how the orientation of the light vector directly influences the direction and appearance of the cross hatching lines.
Right now, our lines are pretty jaggy, that’s because at boundaries of each small gradient segment, the value abruptly jumps between 0 and 1. This causes the visible aliasing in the pattern. To smooth it out, we can remap the value from (0, 1) to (-1, 1), then take its absolute value. Now we will have a nice and smooth line patterns.
