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 colorvec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));// Output to screenfragColor = 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; // newuv.x *= iResolution.x / iResolution.y; // newfragColor = 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; // newuv.x *= iResolution.x / iResolution.y; // newvec3 ori = 4.0 * vec3(0.0, 0.3, -1.0); // newvec3 dir = normalize(vec3(uv.xy, 1.5)); // newfragColor = 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 = q  *