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生成设计之网格噪声

<