云层渲染

    在Avatar引擎中采用了一种比较简单的方式生成比较真实的云效果，全部在shader中进行生成渲染。效率和效果都非常好，并具有动态效果。如图

注意两张的变化

    注意整个云层就是渲染在一个平面上的，实现的fragment shader如下

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec3 uSkyColor;
uniform vec3 uCloudColor;
uniform float uCloudSize;
uniform float uTime;

varying vec2 vTexCoord;

float rand(vec2 n)
{
	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

float noise(vec2 n)
{
	const vec2 d = vec2(0.0, 1.0);
	vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}

void main()
{
	// 柏林噪声
	float total = 0.0;
	vec2 pos = vTexCoord * uCloudSize;
	total += noise(pos * 1.0 + vec2(uTime * 2.0, 0.0));
	total += noise(pos * 2.0 + vec2(0.0, uTime * 3.0)) * 0.5;
	total += noise(pos * 4.0 + vec2(uTime * 4.0, 0.0)) * 0.25;
	total += noise(pos * 8.0 + vec2(0.0, uTime * 5.0)) * 0.125;
	vec3 color = mix(uSkyColor, uCloudColor, total);

	// 越边缘越透明
	vec2 alpha = 1.0 - abs(vTexCoord - vec2(0.5)) * 2.0;
	gl_FragColor = vec4(color, alpha.x * alpha.y);
}

云层通过柏林噪声实现，通过混合云和天空的颜色得到最终的云层。并通过引入uTime变量得到动态效果，注意在叠加不同频率的噪声时，各频率的噪声相位随时间按不同方向和不同速度移动，因此得到的云层变换更接近真实的云层。