[MetalKit]28-Using-MetalKit-part-2-3^2使用MetalKit18

本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习.

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上.

下次见!