首先实现一个简单的噪声效果

实现原理也很简单，只是在每个线程使用随机函数获得一个随机值

float random (float2 pt) {
    const float a = 12.9898;
    const float b = 78.233;
    const float c = 43758.543123;
    return frac(sin(dot(pt, float2(a, b))) * c );
}

[numthreads(8,8,1)]
void CSMain (uint3 id : SV_DispatchThreadID)
{
    float4 white = 1;
    Result[id.xy] = random(((float2)id.xy)/(float)texResolution) * white;

接着要实现变化的噪声，只需要加上时间对随机函数的影响，呈现出类似于老式电视屏幕上的噪音的效果

float random (float2 pt,float seed) {
    const float a = 12.9898;
    const float b = 78.233;
    const float c = 43758.543123;
    return frac(sin(dot(pt, float2(a, b))+seed) * c );
}

[numthreads(8,8,1)]
void CSMain (uint3 id : SV_DispatchThreadID)
{
    float4 white = 1;
    Result[id.xy] = random(((float2)id.xy)/(float)texResolution,time) * white;
}

另外在下面的链接里有很棒的噪声函数库

GitHub - ashima/webgl-noise: Procedural Noise Shader Routines compatible with WebGL

这里直接输出perlin噪声的结果看看