When playing Battlefield 2042, I found a large screen simulating the display of RGB pixels: the content in the far view is a complete image, and the close view is a glowing RGB pixel. This effect is very interesting. It can be reproduced in Unity.
Effect achieved
screenshot
GIF
Contents included in this article
This article is implemented with Unity, but some of the content is referred to the Unreal Engine tutorial of Youtube/Jam2go.
There are some differences between the UE Material Editor and Unity's ShaderGraph, but the difference is not very big.
Main contents of this article:
- Realize RGB pixel display
- Solve the problem of moire pattern
Realize RGB pixel display
principle
The pixel display principle of LCD or CRT screen is simple: each complete pixel is composed of three refractive/light-emitting elements (sub pixels), each element (sub pixel) is responsible for one of the three RGB primary colors, and the three light-emitting elements (sub pixels) can adjust the light and shade independently. The RGB color of a complete pixel can be displayed when the light is mixed together.
According to the screen material and the different pixel geometry of the three RGB components (sub pixels), the standard RGB arrangement, RGB Delta arrangement, Pentile arrangement, diamond arrangement and other arrangements are derived.
Image transferred from Wikipedia by Pengo
Shader simulates this effect: first, separate the RGB colors sampled by the slice, and then display the three RGB colors according to the specified arrangement position.
Create a Pixel Map
Use the drawing tool to create one (or more) sub-pixel arrangement charts for subsequent sampling.
The requirements for this (or multiple) drawing are:
- Can represent the arrangement of sub pixels;
- Unlimited splicing;
- Leave enough offset for RGB pixels to display side by side.
This is a diagram I drew with PhotoShop:
Its parameters are: standard RGB arrangement, sub-pixel outer margin 20px, rounded corners.
Since the three subpixel arrangements are identical under the standard RGB arrangement, I only need one picture. When sampling later, you can add an Offset to the UV.
Prepare one or more drawings for other arrangements as appropriate.
Subpixel sampling arrangement diagram
In order to stagger the RGB display, I sampled the sub-pixel image three times and stagger the UVs through the Offset value. The three results are used for one color in RGB:
This paper uses standard RGB permutation. If other permutations are used, you need to adjust the Offset or sampling method to ensure that the three sub pixels can be separated and repeatedly spliced.
Subpixel Overlay Texture Color
Take three RGB colors and multiply them with three sub pixels:
Note: Simple multiplication here is inconsistent with the real world:
The single sub-pixel in the real world is integrated internally, and the area can no longer be subdivided to adjust the light and shade;
It is meaningless to pursue consistency with the real world here, which not only increases complex operations (such as the algorithm of selecting sub pixels "the most suitable light and shade"), but also makes little difference in appearance.
Add colors to get element color
When the slice element is located in the R sub-pixel area, the values of G and B are black （0，0，0） , other sub pixels are the same, so pixel color=R+G+B.
The results are as follows:
Moire
problem
Although the pixel effect has been introduced, when the camera is at some angle or distance, the image will produce moire:
Due to the existence of moire pattern, when the camera is far away, there is no I can't see pixels "Retinal screen".
Solve moire pattern&achieve clarity in the distance
We use an ingenious solution to solve the moire problem: according to the distance gradient, display pixels within X meters, gradually change to the original Texture color beyond X meters, and overlay a power control gradient transition.
In my subpixel arrangement diagram, there are more black colors (that is, the subpixel spacing is too large). In order to make the brightness of the gradient full image consistent with the pixel image, a Lerp black color controlled by parameters is superimposed on Texture.
If the subpixels are tightly arranged without gaps, they do not need to be darkened so much.
Conversely, the brightness of the lower pixel mode can also be improved.
In addition, clear requirements in the distance are also naturally realized.
effect
Near, middle and far transition (lower right corner to upper left corner)
Kinetograph
