100多行代码实现纯算法云海效果

准备工作

我们采用shadertoy作为工具，在它上面编写代码，查看效果。打开shadertoy，在右上角直接点击新建，即可创建一个新的着色器，可以看到如下的初始代码：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    // Output to screen
    fragColor = vec4(col,1.0);
}

显示结果如下：

其中mainImage是入口函数，参数fragColor是输出结果，fragCoord是当前的像素坐标。将代码修改如下(后面带// new的表示新增代码)：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   
    vec2 uv = fragCoord / iResolution.xy;
    uv = 2.0 * uv - 1.0; // new
    uv.x *= iResolution.x / iResolution.y; // new
    
    fragColor = vec4(1.0);
}

由于画布的宽高是不一样的，也为了方便计算，所以新增了两行代码先将uv转换到[-1, 1]范围内，再根据宽高比对x的值进行调整。

光线步进

游戏采用的一般是光栅化的方式进行渲染，现在部分显卡和引擎也支持了光线追踪，光线步进的思路和追踪很相似，都是从观察点发射一束光线，然后计算它最终的颜色，只不过追踪采用的是几何体交叉判断，而步进采用的是有符号距离函数(SDF)来判断。
SDF的返回值d表示当前位置距离几何体的最近距离，其含义如下：

• d > 0，当前位置在几何体外，距离几何体表面最近距离为d
• d == 0，当前位置正好在几何体表面
• d < 0, 当前位置在几何体内，距离几何体表面最近距离为-d

我们参考光线步进的做法，但是将SDF的含义修改一下，让其返回值表示当前位置的云的密度。如果小于0，则表示在云层外，如果大于0则表示当前位置云层的密度，后续我们根据这个密度来计算当前位置的颜色。我们添加一个getDensity函数来计算密度，和一个render函数来计算颜色：

float getDensity(in vec3 pos) {
   
	return 1.0;
}

// ori：观察位置
// dir：观察方向
vec4 render(in vec3 ori, in vec3 dir) {
   
    return vec4(1.0);
}

在主函数中调用render函数：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   
    vec2 uv = fragCoord/iResolution.xy;
    uv = 2.0 * uv - 1.0; // new
    uv.x *= iResolution.x / iResolution.y; // new
    
    vec3 ori = 4.0 * vec3(0.0, 0.3, -1.0); // new
    vec3 dir = normalize(vec3(uv.xy, 1.5)); // new
    
    fragColor = render(ori, dir); // new
}

此时的渲染结果应为一个纯白的画布，接下来首先来完成getDensity函数。

分数噪声

getDensity决定了云的形状，一般通过噪声贴图来实现，但由于我们不使用任何纹理，所以可以通过噪声函数来生成，普通的噪声离散性较强，与云的形状不符合，我们采用分数噪声函数来生成云的形状，其基本原理如下图所示：

修改代码如下：

float hash(vec3 p) 
{
   
    p  = fract(p * 0.3183099 + .1);
	p *= 17.0;
    return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
}

float noise(in vec3 x)
{
   
    vec3 i = floor(x);
    vec3 f = fract(x);
    f = f * f * (3.0 - 2.0 * f);
	
    return mix(mix(mix( hash(i+vec3(0,0,0)), 
                        hash(i+vec3(1,0,0)),f.x),
                   mix( hash(i+vec3(0,1,0)), 
                        hash(i+vec3(1,1,0)),f.x),f.y),
               mix(mix( hash(i+vec3(0,0,1)), 
                        hash(i+vec3(1,0,1)),f.x),
                   mix( hash(i+vec3(0,1,1)), 
                        hash(i+vec3(1,1,1)),f.x),f.y),f.z);
}

float getDensity(in vec3 pos) {
   
    vec3 q = pos;
    float g = 0.5 + 0.5 * noise(q * 0.3);
    
	float f  = 0.60000 * noise(q); q <