a new high speed and high quality 3D game anti aliasing - ACM anti aliasing

Discussion created by sulinhuang on Jul 15, 2020

GitHub complete source code:


This demo program is written in actionscrpt3 script language. It takes about 55-75ms to process a 1920x1080 bitmap. If written in C, the estimated performance can be between X90 and X100. It takes about 1ms. 1000-1200fps + (it is recommended to load the PNG lossless image without anti aliasing for testing)


Alpha computing mix anti aliasing transparency calculating color blending anti aliasing


As a matter of fact, the description that the display resolution causes aliasing is wrong. Refer to the image below, there is no saw tooth in the limited image resolution. (see this picture for anti aliasing)


The computational performance of current computers is limited. In the real-time game, we should render the real-time image at a very fast speed. So performance is our main concern (quality is also important). We want anti aliasing fast enough and good quality.


This paper proposes an anti aliasing scheme using alpha image blending.


Advantages: this anti aliasing method is very fast and has good quality (when the slope is closer to 0 / 90 degree, its quality is higher than 256x SSAA). Sharpness can be controlled. The impact on game FPS is negligible in terms of existing graphics cards. This anti aliasing method achieves high quality anti aliasing with very small performance overhead.


Disadvantages: unknown.


The appearance of sawtooth is mainly due to the loss of some color information in the image, resulting in sudden changes, such as from black to white. There is no transition in the middle. In fact, the color information in the middle of the image is not displayed, which leads to aliasing (not mainly because of the resolution. Of course, the higher the resolution, the less obvious the sawtooth is)




If we want to represent a one pixel black line. We can draw 1 pixel lines on the monitor. So what if we were to draw a black line 1 / 16 pixels wide? If we have enough resolution. For example, if you have 16 times horizontal resolution and 16 times vertical resolution, you can also draw a 1 pixel line. So how to draw a 1 / 16 width line in the current limited resolution?


The answer is to draw a black line with a transparency of 100% / 16 = 6.25%. Mix the foreground color (black) with the background color (white). The mixing ratio was 6.25%.


Here an important idea of the whole article is extended. Use the transparency of the foreground color as a percentage of the virtual area to blend the two colors to represent this transition (antialiasing) at limited resolution. That is to say, the color of a pixel should contain the mixture of all colors within the pixel area. The blending ratio is the percentage of the area of the foreground color occupying the background color. Here the percentage is 1 / 16 of the area.



The area calculation and display method of triangle bevel are similar





This area can be quickly approximated at the hypotenuse if the hypotenuse spans four pixels horizontally. Then the alpha mixing percentage is 80% 60% 40% 20%


4/(4+1) = 0.8

3/(4+1) = 0.6

2/(4+1) = 0.4

1/(4+1) = 0.2



If the hypotenuse spans nine pixels horizontally. Then the alpha mixing percentages are: 90% 80% 70% 60% 50% 40% 30% 20% 10%




For drawing lines, such as the prospect cable in 3D games. The method is similar to this, except that the calculation method of area is different. The display method is still to mix the cable color and background color according to the alpha ratio of the cable area to the area ratio of a single pixel.


In the final display color of a monochromatic pixel, the final alpha blending color of all objects passing through the pixel should be represented. The alpha ratio is the area occupied by the object. In other words, the final display color of the pixel includes all the color information of the object passing through the pixel (after mixing).


When the DPI of the display with limited resolution is not high enough, there may still be a bit of sawtooth in some slopes. We can make the sawtooth less obvious by increasing the transition area: for example, in the case of M = 9 above, we can expand 9px to 11px to control the degree of sharpening / blurring (of course, the more the increase, the more blurry, the sharper the decrease)


The actual effect is shown in the figure: (comparison of anti aliasing switch)









If only half the number of pixels is processed, a high-speed, half quality mode can be provided, and the anti aliasing quality is still acceptable at half the quality:






The attachment contains an EXE run file that can be used to test images and its source code. The image edge detection of NOAA is based on the L value of lab color space.




And fxaa:



Comparison with fxaa and TAA in the same picture:

Acmaa uses image pixel edge detection to realize the performance of battlefield 1 game running screen:


More battlefield 1 image processing performance: