本系列文章是对 http://metalkit.org 上面MetalKit内容的全面翻译和学习.
是的,正如标题所示,我们又有一个和数学有关的帖子了.有一天我在想,当我们通勤时间长达一小时左右,没有互联网没有笔记本电脑,只有一台iPad时,我们能做什么.幸运的是,现在iPad有了神奇的Swift Playgrounds应用了.
让我们以一个全新的playground开始,只运行基本的计算内核.因为当前版本的Swift Playgrounds不支持编辑Auxiliary Source Files辅助资源文件,就是我们通常存放Swift和Metal文件的地方,所以我们将不得不在playground主页面写代码,还好不太复杂.我们要做的是修改我们的MetalView初始化器,给它输入一个额外的参数-我们的着色器/内核代码.然后我们开始生成代码,只需给这个长的字符串添加几行就好.
让我们以一个亮蓝色的背景颜色开始:
let shader =
"#include <metal_stdlib>\n" +
"using namespace metal;" +
"kernel void k(texture2d<float,access::write> o[[texture(0)]]," +
" uint2 gid[[thread_position_in_grid]]) {" +
" float3 color = float3(0.5, 0.8, 1.0);" +
" o.write(float4(color, 1.0), gid);" +
"}"
如果你现在运行playground,输出图像会像这样:
下一步,我们绘制一个渐变.我们将当前像素坐标划分到屏幕尺寸上,得到UV-一对(0-1)之间的浮点数.然后将固定的颜色与Y相乘-UV的垂直分量会给我们一个渐变:
" int width = o.get_width();" +
" int height = o.get_height();" +
" float2 uv = float2(gid) / float2(width, height);" +
" color *= uv.y;" +
输出图像会像这样:
接下来我们换个更好的背景.一个看起来像日落的平滑渐变.我们可以用mix来混合颜色.我们告诉函数垂直混合颜色,用Y分量来切换颜色:
" float3 color = mix(float3(1.0, 0.6, 0.1), float3(0.5, 0.8, 1.0), sqrt(1 - uv.y));" +
输出图像会像这样:
从这里,我们就能画一个黑色的洞.我将用距离函数(length)在屏幕中间(0.5, 0.5)画黑色来实现,并在外面添加越来越多的颜色,直到屏幕角落达到最大值.把最后一行替换为:
" float2 q = uv - float2(0.5);" +
" color *= length(q);" +
输出图像会像这样:
下一步,我们用smootstep来绘制一个圆形,里面填充上黑色,外面蓝色,在r和(r + 0.01)之间用混合色.用下面替换最后一行:
" float r = 0.2;" +
" color *= smoothstep(r, r + 0.01, length(q));" +
输出图像会像这样:
如果我们对圆形边缘不满,可以用数学函数比如cos和atan2让它凹凸不平.我们产生了9个凸起(频率),凸起高度(振幅)是0.1:
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0);" +
输出图像会像这样:
添加X坐标到余弦相位,产生一个弯曲效果:
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0 + 20.0 * q.x);" +
输出图像会像这样:
你可以添加一个很小的值如0.1到余弦中来旋转它们:
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0 + 20.0 * q.x + 1.0);" +
输出图像会像这样:
你觉得这看起来像棕榈树的树冠了么,我也觉得像!我们可以用abs来画树干,这个函数给我们水平/垂直距离而不是欧几里得距离(对一个给定的点)如长度,所以让我们用X距离在原有基础上再添加几行代码(我们将重用r和color):
" r = 0.015;" +
" color *= smoothstep(r, r + 0.002, abs(q.x));" +
输出图像会像这样:
我们可以用另一个Y轴的smoothstep来移除不需要的树干部分:
" color *= 1.0 - (1.0 - smoothstep(r, r + 0.002, abs(q.x))) * smoothstep(0.0, 0.1, q.y);" +
输出图像会像这样:
因为树冠和树干都用到了q,修改这个值将会移动所有的图像:
" float2 q = uv - float2(0.67, 0.29);" +
输出图像会像这样:
通过引入一个sin函数我们可以弯曲树干.频率太小弯曲不够,但频率太高又弯曲太多,所以2.0正好. 2.5的振幅将树干的基准向屏幕边缘移动到正好的距离(把符号从+改成-会把基准向另一边移动):
" color *= 1.0 - (1.0 - smoothstep(r, r + 0.002, abs(q.x - 0.25 * sin(2.0 * q.y)))) * smoothstep(0.0, 0.1, q.y);" +
输出图像会像这样:
树干又太光滑了.再用cos来添加些不规则变化.高的频率低的振幅看上去正是我们想要的:
" r = 0.015 + 0.002 * cos (120.0 * q.y);" +
输出图像会像这样:
还有,树干根部通常会改变地面附近的形状,所以exp函数正是我们需要的,因为他在开始时增长缓慢,然后向着天空快速增长.我们用衰减因子为-50.0:
" r = 0.015 + 0.002 * cos (120.0 * q.y) + exp(-50.0 * (1.0 - uv.y));" +
输出图像会像这样:
我们可以用sqrt来得到一个更大的数(当用于小数时),用来增强第二种颜色的表现.日落即将完成:
" float3 color = mix(float3(1.0, 0.6, 0.1), float3(0.5, 0.8, 1.0), sqrt(1 - uv.y));" +
最终iPad上的图片应该看起来像:
总结,我们看到了如何用sqrt来塑造形状的过渡,用cos来在形状在创建凸起和凹陷,用exp来创造曲线,用smoothstep来处理阈值/临界点,abs来获得对称性,mix来获得混合.又在通勤路上了?为什么不来看看这个漂亮的三叶草是怎么创建的呢:
我要再次感谢Inigo Quilez,因为他激励我写下更多的关于用数学绘图的文章.本教程中的数学都归功于他.
源代码source code 已发布在Github上.
下次见!
