本系列文章是对 http://metalkit.org 上面MetalKit内容的全面翻译和学习.
让我们用Metal Shading Language (MSL)继续我们在神奇的着色器世界的旅程,接着第10部分 Part 10.用我们上次用的playground,我们接着会用MSL数学函数来制作技术图像,用到sin, cos, pow, abs, fmod, clamp, mix, step和smoothstep.
首先,让我们看看上次的"日食"代码.我们将从列表最后的函数开始,因为smoothstep函数正是我们修复上次没注意到的一个问题所需要的-我们输入的图像有锯齿(即走样),如果你放大来看就会很明显:
smoothstep函数依据是左边比右边小.这个函数输入一个真实的数x,当x小于等于左侧时输出0,当x大于等于右侧时输出1,否则在0到1之间平滑插值.step和smoothstep函数不同在于,step函数在边缘处突然从0跳到1.smoothstep函数在clamp后实现了立方Hermite插值.一个改进版,名为smootherstep,在x=0和x=1时一阶和二阶导数等于零,
smoothstep(X) = 3X^2 - 2X^3
smootherstep(X) = 6X^5 - 15X^4 + 10X^3
让我们实现smootherstep()函数:
float smootherstep(float e1, float e2, float x)
{
x = clamp((x - e1) / (e2 - e1), 0.0, 1.0);
return x * x * x * (x * (x * 6 - 15) + 10);
}
给定clamp()函数一个min值和max值,它会将点移到最接近的可用值.输入如果小了则采用min值,如果大了则采用max值,如果在中间则保留原值.我们的compute内核现在看起来像这样:
int width = output.get_width();
int height = output.get_height();
float2 uv = float2(gid) / float2(width, height);
uv = uv * 2.0 - 1.0;
float distance = distToCircle(uv, float2(0), 0.5);
float xMax = width/height;
float4 sun = float4(1, 0.7, 0, 1) * (1 - distance);
float4 planet = float4(0);
float radius = 0.5;
float m = smootherstep(radius - 0.005, radius + 0.005, length(uv - float2(xMax-1, 0)));
float4 pixel = mix(planet, sun, m);
output.write(pixel, gid);
在继续之前还有一个函数需要关注,就是mix.mix()函数在x和y之间执行线性插补,并用a来调节权重.返回值用x * (1 - w) + y * w计算.在本例中,planet颜色和sun颜色用smootherstep作为权重值来插补.如果你执行playground,输出图像现在已经反走样了,锯齿已经没有了:
下面我们要关注的函数是abs和fmod.abs()函数简单地返回绝对值,或者一个数和0的距离.换句话说,每个值失去符号,总是返回一个非负的值.fmod()函数返回浮点数的剩余小数部分(相当于整数的取模运算符%).让我们把这两个函数用起来,看看能得到什么:
float3 color = float3(0.7);
if(fmod(uv.x, 0.1) < 0.005 || fmod(uv.y, 0.1) < 0.005) color = float3(0,0,1);
float2 uv_ext = uv * 2.0 - 1.0;
if(abs(uv_ext.x) < 0.02 || abs(uv_ext.y) < 0.02) color = float3(1, 0, 0);
if(abs(uv_ext.x - uv_ext.y) < 0.02 || abs(uv_ext.x + uv_ext.y) < 0.02) color = float3(0, 1, 0);
output.write(float4(color, 1), gid);
输出图像看起来应该像这样
首先,我们绘制蓝色风格线,间距0.1,粗0.005.接下来,我们规格化屏幕坐标这样我们就可以工作在[-1,1]区间,然后用红色绘制X轴和Y轴,粗0.02.最后,我们绘制两个同样粗细的绿色对角线,记住x-y给我们了递减的斜率(对角线)而x+y则是递增的.
最后,让我们和讨论过的其它函数一起把sin(), cos(), fract(), dot()和pow()用起来:
float2 cc = 1.1 * float2(0.5 * cos(0.1) - 0.25 * cos(0.2), 0.5 * sin(0.1) - 0.25 * sin(0.2) );
float4 dmin = float4(1000.0);
float2 z = (-1.0 + 2.0*uv) * float2(1.7, 1.0);
for(int i=0; i<64; i++) {
z = cc + float2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);
dmin=min(dmin, float4(abs(0.0 + z.y + 0.5 * sin(z.x)), abs(1.0 + z.x + 0.5 * sin(z.y)), dot(z, z), length(fract(z) - 0.5)));
}
float3 color = float3(dmin.w);
color = mix(color, float3(1.00, 0.80, 0.60), min(1.0, pow(dmin.x * 0.25, 0.20)));
color = mix(color, float3(0.72, 0.70, 0.60), min(1.0, pow(dmin.y * 0.50, 0.50)));
color = mix(color, float3(1.00, 1.00, 1.00), 1.0 - min(1.0, pow(dmin.z * 1.00, 0.15)));
color = 1.25 * color * color;
color *= 0.5 + 0.5 * pow(16.0 * uv.x * (1.0 - uv.x) * uv.y * (1.0 - uv.y), 0.15);
output.write(float4(color, 1), gid);
sin()函数是角度的正弦,cos()函数显然是角度的余弦,fract()函数返回值的小数部分,dot()函数返回两个向量的叉积,还有pow()函数返回一个数的乘方.这段代码产生一个美丽的分形,一个Inigo Quilez艺术的真实片段.输出图像应该看起来像这样:
你的任务是试着理解魔法是如何工作的.如果你有任何问题,可以用博客中的联系方式来联系我.
源代码source code 已发布在Github上.
下次见!
