菜鸡shader:L9 屏幕UV及屏幕UV扰动

**菜鸡Shader:L9**

在本文中，我们将讨论如何实现一个简单的屏幕UV效果，并且添加一些随机扰动来使其更加生动。

### 屏幕UV首先，让我们了解一下什么是屏幕UV。屏幕UV是一种特殊的坐标系统，它将屏幕上的每个像素都映射到一个二维空间中。在这个空间中，每个像素都有一个唯一的UV值，代表了其在屏幕中的位置。

c// 屏幕UV函数vec2 screenUV() {
 vec2 uv = gl_FragCoord.xy / iResolution.xy;
 return uv;
}

c// 噪声函数float noise(vec2 st) {
 vec2 i = floor(st);
 vec2 f = fract(st);

 float a = rand(i);
 float b = rand(i + vec2(1.0,0.0));
 float c = rand(i + vec2(0.0,1.0));
 float d = rand(i + vec2(1.0,1.0));

 vec2 m = f * (b - a) + a;
 return m.x;
}

// 屏幕UV扰动函数vec2 screenUVNoise() {
 vec2 uv = gl_FragCoord.xy / iResolution.xy;
 float noiseValue = noise(uv);
 vec2 noisyUV = uv + vec2(noiseValue, noiseValue);
 return noisyUV;
}

c// Shader源码#extension GL_OES_standard_derivatives : enableuniform float iTime;

float rand(vec2 n) {
 return fract(sin(dot(n, vec2(12.9898,4.1414))) *43758.5453);
}

float noise(vec2 st) {
 vec2 i = floor(st);
 vec2 f = fract(st);

 float a = rand(i);
 float b = rand(i + vec2(1.0,0.0));
 float c = rand(i + vec2(0.0,1.0));
 float d = rand(i + vec2(1.0,1.0));

 vec2 m = f * (b - a) + a;
 return m.x;
}

vec2 screenUV() {
 vec2 uv = gl_FragCoord.xy / iResolution.xy;
 return uv;
}

vec2 screenUVNoise() {
 vec2 uv = gl_FragCoord.xy / iResolution.xy;
 float noiseValue = noise(uv);
 vec2 noisyUV = uv + vec2(noiseValue, noiseValue);
 return noisyUV;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 vec2 uv = screenUVNoise();
 vec3 col = vec3(0.0);

 // ...

 fragColor = vec4(col,1.0);
}