简介
又换方向做图形相关的工作了，门槛确实有一点，数学、图形什么的都要学，算轨迹用到力学什么的也是基本操作。大力出奇迹，跟着shadertoy里的众多大神学起来。本篇学习内容来自于:
源码注释
// noise from https://www.shadertoy.com/view/4sc3z2
vec3 hash33(vec3 p3)
{
p3 = fract(p3 * vec3(.1031,.11369,.13787));
p3 += dot(p3, p3.yxz+19.19);
return -1.0 + 2.0 * fract(vec3(p3.x+p3.y, p3.x+p3.z, p3.y+p3.z)*p3.zyx);
}
// 随机数
float snoise3(vec3 p)
{
const float K1 = 0.333333333;
const float K2 = 0.166666667;
vec3 i = floor(p + (p.x + p.y + p.z) * K1);
vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
vec3 e = step(vec3(0.0), d0 - d0.yzx);
vec3 i1 = e * (1.0 - e.zxy);
vec3 i2 = 1.0 - e.zxy * (1.0 - e);
vec3 d1 = d0 - (i1 - K2);
vec3 d2 = d0 - (i2 - K1);
vec3 d3 = d0 - 0.5;
vec4 h = max(0.6 - vec4(dot(d0, d0), dot(d1, d1), dot(d2, d2), dot(d3, d3)), 0.0);
vec4 n = h * h * h * h * vec4(dot(d0, hash33(i)), dot(d1, hash33(i + i1)), dot(d2, hash33(i + i2)), dot(d3, hash33(i + 1.0)));
return dot(vec4(31.316), n);
}
vec4 extractAlpha(vec3 colorIn)
{
vec4 colorOut;
float maxValue = min(max(max(colorIn.r, colorIn.g), colorIn.b), 1.0);
if (maxValue > 1e-5)
{
colorOut.rgb = colorIn.rgb * (1.0 / maxValue);
colorOut.a = maxValue;
}
else
{
colorOut = vec4(0.0);
}
return colorOut;
}
#define BG_COLOR (vec3(sin(iTime)*0.5+0.5) * 0.0 + vec3(0.0))
#define time iTime
const vec3 color1 = vec3(0.611765, 0.262745, 0.996078);
const vec3 color2 = vec3(0.298039, 0.760784, 0.913725);
const vec3 color3 = vec3(0.062745, 0.078431, 0.600000);
const float innerRadius = 0.6;
const float noiseScale = 0.65;
float light1(float intensity, float attenuation, float dist)
{
return intensity / (1.0 + dist * attenuation);
}
float light2(float intensity, float attenuation, float dist)
{
return intensity / (1.0 + dist * dist * attenuation);
}
void draw( out vec4 _FragColor, in vec2 vUv )
{
vec2 uv = vUv;
float ang = atan(uv.y, uv.x);
float len = length(uv);
float v0, v1, v2, v3, cl;
float r0, d0, n0;
float r, d;
// ring
// 生成随机数
n0 = snoise3( vec3(uv * noiseScale, time * 0.5) ) * 0.5 + 0.5;
// 动态变化的圆半径，呈现呼吸感，这个是灵魂
r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
// 与圆边界的距离. r0==len时为0
d0 = distance(uv, r0 / len * uv);
// 光线(颜色)随距离(距离圆边界)变化
v0 = light1(1.0, 10.0, d0);
// 裁掉 r0*1.05 距离外的颜色
v0 *= smoothstep(r0 * 1.05, r0, len);
// 颜色混合参数，根据时间变化
cl = cos(ang + time * 2.0) * 0.5 + 0.5;
// high light
// 控制高亮光线顺时针变化
float a = time * -1.0;
// 当前高亮位置的坐标
vec2 pos = vec2(cos(a), sin(a)) * r0;
// 与高亮位置的距离
d = distance(uv, pos);
// 光线衰减，环形
v1 = light2(1.5, 5.0, d);
// 光线衰减，距离边界。(沿边界快速衰减)
v1 *= light1(1.0, 50.0 , d0);
// back decay
// 实心圆
v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
// hole
// 圆环
v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
// color
//vec3 c = mix(color1, color2, cl);
// 根据时间变化的颜色值
vec3 col = mix(color1, color2, cl);
// 随距离与color3颜色混合
col = mix(color3, col, v0);
// 高亮，交集圆环
col = (col + v1) * v2 * v3 ;
//col.rgb = clamp(col.rgb, 0.0, 1.0);
// 调整颜色，同时将原色中rgb中最大的值作为alpha，后续作为颜色融合的参数.
// 经过试验：没有这一步以及后面的颜色混合，效果也跟最终效果差不多，从前面的代码逻辑也可以看出
// 如果有这一步，因为extractAlpha函数内部对rgb做了放大，反而后面必须跟mix,相当于是个逆操作
_FragColor = extractAlpha(col);
}
// 入口函数
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// 变换到[-1,1]范围的坐标系。(注意除的是界面x y轴短的那根轴)
vec2 uv = (fragCoord*2.-iResolution.xy)/iResolution.y;
vec4 col;
draw(col, uv);
vec3 bg = BG_COLOR;
// 这里用到一个小技巧，使用col.a作为颜色融合的参数
// 颜色融合，否则背景、前景界限明显
fragColor.rgb = mix(bg, col.rgb, col.a); //normal blend
}
关键步骤
从上面的代码逻辑看，一个动态变化的光晕，有几个关键步骤：
1 动态变化的半径，细微变化。
2 动态变化的颜色，通过简单的颜色融合就能取得不错的效果。
3 逆时针或者顺时针变化的高亮区域。
4 沿圆边界或高亮区衰减的颜色。
总结
本篇shader代码整洁，很适合我这种初学者学习入门。从代码结构很容易看出关键的实现思路，里面也有些技巧，值得反复学习，比如沿边界衰减的方式、不同的衰减方法、高亮色的计算、以及圆环的实现方式等。
