1. Visual Inspiration
During the visual development of Rushing Place, I wanted to explore an experimental black-and-white style made entirely of dots.
This test was inspired by Halftone art, which uses dots of different sizes to represent light and shadow, creating a visual effect similar to newspaper printing.
My idea was to first convert the image into greyscale, then use variations in dot size to represent different brightness levels. Darker areas have larger dots, making them appear denser, while lighter areas have smaller dots with more white space.
Through this approach, I wanted to simplify the image into a more abstract and graphic style while still keeping the basic shapes and three-dimensional forms of the objects.
2. Technical Development
I created this effect in Unreal Engine 5 (UE5) using a Post Process Material. This allows me to change the appearance of the entire scene without having to modify each object’s material individually.
First, I used the SceneTexture node to capture the scene image. I then used HLSL code inside a Custom node to calculate the brightness of the image and convert the colour information into greyscale values.
Next, I used the Screen Position node to get the screen coordinates. The image was divided into a regular grid, with a circular dot generated inside each grid cell.
The size of each dot changes automatically based on the brightness of the original image:
* Darker areas: Larger dots cover more space, making these areas appear denser and darker.
* Lighter areas: Smaller dots leave more empty space, making these areas appear lighter.
In this way, smooth changes in brightness are replaced by dots of different sizes, creating a halftone effect similar to traditional printing.
To make the effect more flexible, I added two main adjustable parameters:
Dot Density
This controls the number and spacing of dots across the image. Increasing the value creates more dots with smaller gaps, allowing the image to show more detail. Lowering the value creates fewer dots and a more abstract appearance.
Contrast
This controls how strongly the image brightness affects the dot sizes. Higher contrast creates a clearer difference between light and dark areas, while lower contrast produces a softer transition.
I also used a Noise node, combined with Step and Lerp nodes, to add a subtle grainy texture. By adjusting the noise scale and strength, I can introduce small variations to the regular dot pattern, making the image feel more like a printed texture.
Finally, I adjusted the black-and-white output in the Custom node to create two versions: white dots on a black background and black dots on a white background.
Both versions use the same post-process material setup, allowing me to adjust the parameters and test different results directly in UE5.
3. Visual Tests
For this experiment, I created two different versions of the halftone effect.
Version 01: Black Background / White Dots
The first version uses a black background with white dots to represent the light and dark areas of the image.
This version has stronger visual contrast and creates a more abstract, digital appearance.
Version 02: White Background / Black Dots
The second version uses a white background with black dots to represent the objects.
Compared with the first version, this effect is closer to traditional newspaper printing and creates a cleaner, more minimal visual style.
Adjustable Parameters
To make future development easier, I added parameters that can be adjusted at any time.
Dot Density: Controls the number and spacing of dots, allowing the image to appear more detailed or abstract.
Contrast: Controls the variation in dot sizes, making the differences between light and dark areas stronger or softer.
By adjusting these parameters, I can change the dot sizes, visual density, and overall appearance to suit different scenes without rebuilding the material.
4. Reflection
Through this test, I successfully created a halftone effect that transforms a regular 3D scene into a black-and-white image made of dots.
This style keeps the basic shapes of the objects while creating a more graphic and abstract appearance, which fits the experimental visual direction of Rushing Place.