shader实现星空效果

整体效果

星星在屏幕里随机分布位置，周期明灭，周期运动。

伪随机

float random (float x) {
//fract函数用来取小数部分
return fract(sin(x) * 323434.34344);
}

参考glsl生成设计之随机

屏幕网格

要让屏幕中出现多个星星，只需要把一个星星，“复制”成多份，让星星在不同的格子里面产生不同的运动轨迹。这就是屏幕网格的意义。

shader 程序中，屏幕内任意一点的坐标是用 uv 表示的，uv 是一个 x 和 y 是 0 到 1 的二维数组。把 uv 放大数倍，再对每个片段 shader 取小数部分拿来当新的 uv 用，这样就是在屏幕上产生了多个 xy 是 0 到 1 的区域。

 void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    //生成屏幕UV (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv *= 10.0;//横向纵向都扩大10倍
    vec2 ipos = floor(uv);  // 整数部分组成二维数组：网格的坐标
    vec2 fpos = fract(uv);  // 小数部分组成二维数组：网格内的UV   
}

参考glsl生成设计之网格噪声

生成星星

既然有了屏幕网格，我们就可以给每个格子产生不同的效果。对于每个格子内的每一个片段，都有一个不变的属性，那就是格子的“坐标”，也就是放大后的uv的整数部分。

利用这个坐标和伪随机，我们把网格内做成同样的颜色，就会产生这样的效果。

//新的伪随机函数，接受一个vec2，产生一个0到1的数
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(565656.233,123123.2033))) * 323434.34344);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    //生成屏幕UV (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv *= 10.0;//横向纵向都扩大10倍
    vec2 ipos = floor(uv);  // 整数部分组成二维数组：网格的坐标
    vec2 fpos = fract(uv);  // 小数部分组成二维数组：网格内的UV
    vec3 color = vec3(random(ipos));//同一个格子坐标，产生同一个颜色
    fragColor = vec4(color, 1.0);
}

那么如何确定星星的位置呢？前面已经讲过，屏幕内的坐标是通过 uv 表示，网格内也是同样如此。我们只需要通过格子的坐标，进行伪随机，生成一个 uv，就可以当做星星的位置。

再升级一下随机函数，让它可以通过网格坐标产生一个 x 和 y 是 0 到 1 的二维数组。
这样一来星星的坐标就有了，接下来就是把它显示出来的时候。对每个个格子里的片段，都计算一下到这个坐标点的距离，只有靠近目标点的，才显示成白色，其他地方就显示成黑色。这里可以使用 step 函数，第二个参数小于第一个参数，那么就会返回 0，反之返回 1。

//新的伪随机函数，接受一个vec2，产生一个0到1的数
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(565656.233,123123.2033))) * 323434.34344);
}

//升级版伪随机，接受一个vec2，产生x和y都是0到1的vec2
vec2 random2( vec2 p ) {
    return fract(sin(vec2(dot(p,vec2(234234.1,54544.7)), sin(dot(p,vec2(33332.5,18563.3))))) *323434.34344);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   //生成屏幕UV (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv *= 10.0;//横向纵向都扩大10倍
    vec2 ipos = floor(uv);  // 整数部分组成二维数组：网格的坐标
    vec2 fpos = fract(uv);  // 小数部分组成二维数组：网格内的UV
    // 通过坐标，生成星星的uv坐标
    vec2 targetPoint = random2(ipos);    
    float dist = length(fpos - targetPoint);//当前uv坐标到星星uv坐标的距离
    vec3 color = vec3(1. - step(0.013, dist));//距离大于0.013就显示成黑色

    fragColor = vec4(color,1.0);
}

动起来

首先是让星星周期运动。只需要通过 sin 函数和时间变量，改变星星的坐标，就能产生出周期运动的效果。这里第一个 0.5 的作用是把中点放到网格中间。

但是你会发现星星移动到网格边界好像被切断了，我们只需要让星星不会移动到边界即可。给sin的结果乘以 0.4，产生的结果就不会让星星移动到边界了。

最后我们给星星加上周期的明暗。同样也是通过 sin 函数处理。

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(565656.233,123123.2033))) * 323434.34344);
}

vec2 random2( vec2 p ) {
    return fract(sin(vec2(dot(p,vec2(234234.1,54544.7)), sin(dot(p,vec2(33332.5,18563.3))))) *323434.34344);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
	uv *= 10.0;
    vec2 ipos = floor(uv);  // get the integer coords
    vec2 fpos = fract(uv);  // get the fractional coords
	
    // Assign a random value based on the integer coord
    vec2 targetPoint = random2(ipos);
    float speed = 0.2;
    targetPoint = 0.5 + 0.4*sin(iTime*speed + 6.2831*targetPoint);

    
    float dist = length(fpos - targetPoint);

    float brightness = sin(iTime*speed + 6.2831*targetPoint.x);

    vec3 color = vec3(1. - step(0.013, dist))* brightness;

    fragColor = vec4(color,1.0);
}