1. Visual Inspiration
Following my Halftone experiment, I began exploring another black-and-white visual style: Cross-Hatching.
The reference image uses overlapping lines in different directions to create tonal variations. Lighter areas contain fewer lines and more white space, while darker areas are built up through dense, intersecting strokes, creating a printmaking or pen-and-ink aesthetic.
Compared to the dot-based structure of Halftone, Cross-Hatching emphasises line direction and repetition. This structured and repetitive visual language connects with the themes of urban order, repetitive behaviour, and psychological pressure in Rushing Place.
I therefore experimented with recreating this traditional drawing technique in a 3D environment using UE5’s procedural material system.
2. Technical Development
This experiment uses a Post Process Material in Unreal Engine 5 to generate screen-space hatching patterns and control their distribution based on scene brightness.
Grayscale Conversion
First, I used SceneTexture (PostProcessInput0) to capture the rendered scene and connected its Color output to Desaturation, setting the Fraction to 1 to remove all colour.
I then used Component Mask (R) to extract the grayscale information for brightness calculations.
Node connection:
SceneTexture → Desaturation → Component Mask (R)
Procedural Hatching
I used ScreenPosition to obtain screen coordinates and applied different mathematical operations to generate three sets of lines.
First Layer: Diagonal Lines
ScreenPosition (R + G) → Add → Multiply → Frac → Step
Second Layer: Opposite Diagonal Lines
ScreenPosition (R − G) → Subtract → Multiply → Frac → Step
Third Layer: Horizontal Lines
ScreenPosition (G) → Multiply → Frac → Step
The main nodes control different aspects of the pattern:
* Multiply: Controls line density using HatchDensity (150).
* Frac: Creates repeating patterns from continuous screen coordinates.
* Step: Converts the patterns into black-and-white lines using HatchWidth (0.37).
* OneMinus (1-x): Inverts the black-and-white values of selected patterns.
Combining these three directional patterns creates the cross-hatching effect.
Layered Shading
To control the hatching based on scene brightness, I created three grayscale thresholds:
* Layer1Threshold: 0.25
* Layer2Threshold: 0.50
* Layer3Threshold: 0.90
The Step nodes compare the scene’s grayscale values with these thresholds. The results are then combined with the hatching patterns using Multiply nodes.
Multiple Lerp nodes blend white, light grey, and medium grey values, allowing different brightness regions to display different combinations of lines.
Finally, the combined result is connected to Emissive Color and applied to the scene through a Post Process Volume.
3. Visual Experiment
After building the material, I focused on testing three parameters:
HatchDensity: Controls the frequency of the lines. Higher values produce denser patterns and finer textures.
HatchWidth: Controls line thickness. Thicker lines create stronger black-and-white contrast but may obscure details.
LayerThreshold: Controls how different hatching patterns are combined across brightness levels, affecting the overall tonal distribution.
Adjusting these parameters allowed me to explore different results, from simple line patterns to more complex overlapping textures.
4. Reflection
This experiment helped me better understand how mathematical nodes in UE5 can recreate traditional drawing techniques through procedural rendering.
Compared to Halftone, Cross-Hatching offers stronger directional patterns and a more hand-drawn appearance. The repeated and overlapping lines can also create visual tension, which relates to the themes of Rushing Place.
However, the technique has some limitations. Since the lines are generated using screen coordinates, they do not naturally follow object surfaces. Dense hatching can also reduce the readability of complex scenes.
Additionally, the procedural lines appear highly regular, lacking the natural variation of hand-drawn strokes.
Overall, this experiment expanded my exploration of black-and-white NPR styles and encouraged me to consider how to balance visual expression, readability, and emotional impact.