Glitch Art effect of UnityShader

Posted May 27, 20206 min read

[Natural History]UWA aims to recommend new, easy-to-use, and interesting open source projects for developers, to help you discover popular projects, cutting-edge technologies, or amazing visual effects in the world while researching and developing projects. The feasibility of applying it to your own projects. Many times, we do n t know what we want until one day we meet it.

For more exciting content, please pay attention: lab.uwa4d.com


Introduction

The TV signal is disturbed, resulting in picture jitter, color drift and other phenomena. The effect of this electronic device imaging failure is used in cyberpunk and other science fiction video game works. It gradually became a unique style art:Glitch Art. Ubisoft frequently used this expression in its 3A masterpiece "Watchdog" series. KinoGlitch, an open source library project of the well-known Unity master Keijiro in Japan, emulates this style.

The project mainly simulated two types of effects:Analog Glitch and Digital Glitch.
Please enter a picture description
(Scene without special effects)

Open source library link: https://lab.uwa4d.com/lab/5b5d1c86d7f10a201feaa37f


Analog Glitch

This type of Glitch effect can be divided into the following four effects:

1, Scan Line Jitter
Please enter a picture description
(When \ _scanLineJitter is set to 0.5, renderings)

This effect stretches the object horizontally and stretches the object to varying degrees to form jitter. It can be achieved through post-processing. When sampling in Shader, the sampling point is the point where the original image is laterally offset. The offset can be controlled by a variable of type float.
Please enter a picture description
(When \ _scanLineJitter is set to 1, renderings)

The focus of this effect is on the randomness of sampling, so that the effect of jitter is more realistic. And the offset is within a limited range, even the jitter can basically see the original model appearance. The author has designed a more complex operation to simulate random effects and limits the offset to a specific range:

//The variable set in AnalogGlitch.cs is used to control the offset
[SerializeField, Range(0, 1)]
float _scanLineJitter = 0;

//AnalogGlitch.shader
//Calculate the specific offset
float jitter = nrand(v, _Time.x) * 2-1;
jitter * = step(_ScanLineJitter.y, abs(jitter)) * _ScanLineJitter.x;

float nrand(float x, float y) {
  return frac(sin(dot(float2(x, y), float2(12.9898, 78.233))) * 43758.5453);
}
//Sampling based on offset
half4 src1 = tex2D(_MainTex, frac(float2(u + jitter, v)));

2, Horizontal Shake

This effect is used for horizontal dithering, by setting a float type offset. Sampling according to the offset when drawing:

//The variable set in AnalogGlitch.cs is used to control the offset
_material.SetFloat("_ HorizontalShake", _horizontalShake * 0.2f);
//AnalogGlitch.shader
//Calculate specific offset
float shake =(nrand(_Time.x, 2)-0.5) * _HorizontalShake;

float nrand(float x, float y) {
  return frac(sin(dot(float2(x, y), float2(12.9898, 78.233))) * 43758.5453);
//Sampling based on offset
half4 src1 = tex2D(_MainTex, frac(float2(u + shake, v)));

3, Color Drift
Please enter a picture description
(Effect picture)

This effect is mainly used to simulate the situation where the color display is disordered, shifted, or ghosted when the machine malfunctions. It can be achieved by talking about the separation and reorganization of RGB channels.

//The variable set in AnalogGlitch.cs is used to control the offset
var cd = new Vector2(_colorDrift * 0.04f, Time.time * 606.11f);
_material.SetVector("_ ColorDrift", cd);
//AnalogGlitch.shader
//Calculate specific offset
float drift = sin(jump + _ColorDrift.y) * _ColorDrift.x;

//Sampling original image & sampling according to offset
half4 src1 = tex2D(_MainTex, frac(float2(u, v)));
half4 src2 = tex2D(_MainTex, frac(float2(u + drift, v)));

//Mix the above sampling results
return half4(src1.r, src2.g, src1.b, 1);

4, Vertical Jump
Please enter a picture description
(Effect picture)

This effect is used to simulate the situation of longitudinal jump when the machine is malfunctioning. The simulation of this situation is relatively simple, you can set the vertical offset and sample the original image:

(Effect picture)

On this basis, interpolation can be used to achieve the effect of collecting only partial pictures during the sampling process:
Please enter a picture description
(Effect picture after interpolation)

The specific code is as follows:

//The variable set in AnalogGlitch.cs is used to control the offset
_verticalJumpTime + = Time.deltaTime * _verticalJump * 11.3f;
 var vj = new Vector2(_verticalJump, _verticalJumpTime);
_material.SetVector("_ VerticalJump", vj);

//AnalogGlitch.shader
//Interpolate
float jump = lerp(v, frac(v + _VerticalJump.y), _VerticalJump.x);
//Sampling based on offset
half4 src1 = tex2D(_MainTex, frac(float2(u, jump)));

The above four realization effects can be combined:

half4 src1 = tex2D(_MainTex, frac(float2(u + jitter + shake, jump)));
half4 src2 = tex2D(_MainTex, frac(float2(u + jitter + shake + drift, jump)));
return half4(src1.r, src2.g, src1.b, 1);

So as to get some complicated effects:
Please enter a picture description
(Effect Picture)


Digital Glitch:Block Damage


(Effect picture)

This type of effect is to display color patches of a certain size and color on the image, which is used to simulate the effect that the defective part of the electronic device cannot be displayed normally.

A noise image can be used to assist in the production. First, randomly generate a noise image:

void UpdateNoiseTexture() {
var color = RandomColor();
for(var y = 0; y <_noiseTexture.height; y ++) {
  for(var x = 0; x <_noiseTexture.width; x ++) {
    if(Random.value> 0.89f)
      color = RandomColor();
    _noiseTexture.SetPixel(x, y, color);
    }
  }
   _noiseTexture.Apply();
}

Set a float type variable \ _intensity to control the effect intensity.

The author has designed a set of operations in the fragment shader to ensure that when \ _intensity = 1, all areas of the image produce this effect:

On the contrary, when \ _intensity = 0, there is no effect.

Specific samples include:normal images, images from the previous refresh, and noise images. The areas obtained by these three types of images are mixed and superimposed to obtain the effect:
Please enter a picture description


Performance evaluation

We optimize the project and replace all Standard Shaders used by the model in the scene with Diffuse Shader.(Everyone should pay attention to the huge overhead brought by their Standard Shader when using case tests).

Using Huawei 8Plus, turn on multi-threaded rendering, and turn on two effects at the same time, use GOT Online to test the performance, FPS can reach about 30 frames.

Readers can try to apply this effect to the mobile terminal. The application can be further optimized, such as simplifying the algorithm, reducing the use of sin, dot, pow and other functions, using other algorithms to simulate randomness, etc.


Quickly use UWA Lab to compile Mark good projects!
Please enter a picture description

Today s recommendation is here, or it can be used directly, or it needs your polish, or it inspired your ideas ...

Please don't skimp on your likes and reposts, let us know what we are doing right. Of course, if you can leave a message to give valuable advice, we will do better.