The cause analysis and solution of game texture jitter

the cause analysis and solution of game texture jitter

Recently tried the next Unity, in the process of development found a problem, in the process of moving the camera with the protagonist, found that the details of the map is constantly flashing, very annoying, so the problem is studied. Thus became this article.

First, the question

The video is a good demonstration of the problem. We use the grass picture to do the background, the image filter mode is set to Point, and then let the camera slowly move along the X axis, you can see in the movement, some parts of the picture is shaking very badly, This level of jitter for the general game is not acceptable, so there are some solutions, but most people do not understand the cause of jitter, this article will first analyze the cause of jitter, and then briefly introduce the solution of the jitter.

ii. causes of formation

I always like to put the conclusion in front, so that no interested students can directly skip the following most of the analysis: The cause of the jitter:

1. The screen is actually a sampler that samples the image

2. According to the Nyquist sampling theorem, the sampling frequency must be at least twice times the image frequency, and the sampled image will represent the original image intact.

From here we can know that the lower the screen resolution, the higher the high-frequency signal, the more prone to jitter phenomenon, such as the image instead of a monochrome image, obviously will not send jitter.

OK, the following begins the specific analysis, we put the image through the screen display of the process of mathematical modeling, the image is displayed to people in front of the screen display, in fact, is divided into two steps:

1. Sampling: The image processor selects one or more point averages from the image, obtains an RGBA value, and samples are implemented in shader with the tex2d function, OpenGL There are several sampling methods Gl_nearest, Gl_linear and the Gl_linear_mipmap_linear , respectively, corresponding Unity of the Point , Bilinear and the trilinear three sampling modes.

2. Filter: The sampled Rgba value is illuminated by the pixel, this is a low-pass filter, a non-size rgba value is displayed as a pixel-size point of light, you may not have a clear experience of this step, However, this does have a low-pass filtering process, otherwise people can only see a Dirac function array on the screen.

For the sake of narrative convenience, we confine our discussion to one-dimensional space. We will discuss a process on one-dimensional screen for a segment with a length of 1, a height (RGBA value) of 1 , and a change in the frequency domain when the segment is moved. Shows the spatial and frequency domain flowchart of small squares after sampling and low-pass filtering on screen imaging:

Figure (1)

In the figure, the width is 1, and the small square located in the center of the coordinate is sampled by a sampling function with a width of 0.1 ( sampling frequency of 10Hz) followed by a low pass filter function. The final rendering is on the screen. As you can see, in the airspace, the last appearance of the small square and the initial appearance of the width of the change, in the frequency domain, the high-frequency component of the small block is weakened.

From, we also very easy to understand the Nyquist sampling theorem, the small square is sampled in the frequency domain is a plurality of peaks superimposed, the distance between the peaks is a sampling frequency, if the spectrum between the two peaks is required to not stack, then the maximum frequency of 2 times must not be greater than the sampling frequency.

Let's move the small squares along the x - axis to see what the sampled spectrum looks like. Suppose that the spatial function of a small square is p (x), and after Fourier transform, its frequency domain function is obtained:

Sampling function sampled at a sampling frequency of 10Hz :

Obviously, if you want the small squares to remain constant in the frequency domain before and after moving, you can make the following:

The frequency domain size is:

That is, as long as the small squares in integer times the sampling period of motion, then the small square sampling frequency domain will remain unchanged, this is the conclusion of this article, we have pulled so much, nothing but to say that this conclusion is mathematically based.

Third, inUnityin the application

In fact, we may be most concerned about this: how to "Shake", a simple way is to reduce the frequency of the image (note that the frequency is not a resolution), this can be from two aspects:

1. Use various filter functions to blur the image in the process of making the image resources;

2. Set the filter mode to bilinear or trilinearwhen importing resources.

However, these two methods sometimes do not completely solve the jitter phenomenon, especially when the image shrinks, then the frequency domain will expand, ignoring the filter.

We have to think of another way, according to the conclusion of the second section, as long as the small squares with an integer times the sampling period of motion, its frequency domain size is unchanged, so long as the image is moved in integer multiples pixel size, there will be no jitter. There are two current general practices :

1. Unity 's sprites/default This shader with a Pixel snap option, select this option ,when thesprite is rendered, its vertex position snaps to an integer-pixel position, guaranteeing the entire sprite Can be moved in integer multiples of pixel size.

Figure (2)

2. Snap the displacement to an integer pixel size in the script. This is a convenient way to move the camera, just add a script to the camera, you can solve the problem satisfactorily. The attachment has this script, and it's simple.

Iv. Summary

In fact, for some of the screen resolution is relatively high, do not need to reduce the image, with the bilinear filter mode is almost, this is probably not the question of how many people mentioned why it.

Jitter issues are not limited to screen sampling, and when a game object passes through a series of transformations, the truncation error (a sampling process) of its operations is magnified and can be displayed on the screen, creating problems.

Accessories:CameraController.cs

using Unityengine;

using System. collections;

using unityengine. UI;

Public class cameralcontroller : monobehaviour {

Public BOOL Snaptopixel;

Public float speed = 1f;

Public int right = 1;

Public float margin = 1;

Public float x = 0;

Public float Pixelperunit;

Public Text text;

Use this for initialization

void Start () {

x = transform. position. x;

pixelperunit = pixelperunit();

text. text = "Pixelperunit:" + pixelperunit;

}

float Snaptopixel (float x)

{

int pixels = (int) (pixelperunit * x);

return pixels / pixelperunit;

}

float Pixelperunit ()

{

float camerawidthsize = Camera. main. orthographicsize * Camera. main. Aspect * 2;

return screen. width / camerawidthsize;

}

Update is called once per frame

void Update () {

pixelperunit = pixelperunit();

text. text = "Pixelperunit:" + pixelperunit();

x = speed * time. deltatime * right + x;

if ( right = = 1)

{

if (x >= margin)

{

right =-1;

}

}

Else

{

if (x <=-margin)

{

right = 1;

}

}

Vector3 p = transform. position;

if (snaptopixel)

{

P. x = snaptopixel (x);

}

Else

{

P. x = x;

}

transform. position = P;

}

}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

The cause analysis and solution of game texture jitter