寫在前面：
對(duì)Metal技術(shù)感興趣的同學(xué)，可以關(guān)注我的專題:Metal專輯
也可以關(guān)注我個(gè)人的簡(jiǎn)書賬號(hào)：張芳濤
所有的代碼存儲(chǔ)的Github地址是：Metal
正文
本篇文章只要介紹一些基本的數(shù)學(xué)函數(shù)在圖形繪制中的實(shí)際運(yùn)用。
我們還是使用playground來開發(fā)。先創(chuàng)建一個(gè)MetalView.swift。第一步，先把藍(lán)色的天空繪制出來：
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);" +
"}"
效果圖如下：
為了更逼真一些，我們需要一個(gè)漸變色。我們將當(dāng)前像素坐標(biāo)劃分為屏幕尺寸，我們得到UV - 一對(duì)浮點(diǎn)數(shù)（0-1）。然后我們將固定顏色與Y相乘- 其垂直分量UV為我們提供漸變：
" int width = o.get_width();" +
" int height = o.get_height();" +
" float2 uv = float2(gid) / float2(width, height);" +
" color *= uv.y;" +
效果圖：
看上去還可以，不過好像并不是很像真正的天空。讓我們使用顏色混合技術(shù)來模擬一個(gè)真正的黃昏時(shí)候的天空：
" float3 color = mix(float3(1.0, 0.6, 0.1), float3(0.5, 0.8, 1.0), sqrt(1 - uv.y));" +
效果圖：
接下來我們使用smootstep繪制一個(gè)內(nèi)部為黑色，外部為藍(lán)色且r與（r + 0.01）之間的混合顏色的圓形。將最后一行替換為：
" float r = 0.2;" +
" color *= smoothstep(r, r + 0.01, length(q));" +
效果圖：
因?yàn)槲覀兿Ｍ@個(gè)圓形區(qū)域內(nèi)部可以形成一些樹葉之類的形狀，如果我們對(duì)圓形周長(zhǎng)不滿意，我們可以通過使用cos和atan2等數(shù)學(xué)函數(shù)使其變得崎嶇不平。我們?cè)谶@里生成9個(gè)尖峰（frequency），尖峰長(zhǎng)度（amplitude）為0.1：
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0);" +
效果圖：
這更像是一朵花，而不是樹葉，通過如下代碼，讓圖形看起來更自然一些
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0 + 20.0 * q.x);" +
現(xiàn)在是垂直向下的效果，我們可以對(duì)這個(gè)圖形稍微旋轉(zhuǎn)一下，來使得看上去更逼真：
" float r = 0.2 + 0.1 * cos(atan2(q.x, q.y) * 9.0 + 20.0 * q.x + 1.0);" +
樹冠繪制完了，下面我們來繪制樹干：
" r = 0.015;" +
" color *= smoothstep(r, r + 0.002, abs(q.x));" +
我們可以通過在Y坐標(biāo)上使用另一個(gè)smoothstep來刪除不需要的部分：
" color *= 1.0 - (1.0 - smoothstep(r, r + 0.002, abs(q.x))) * smoothstep(0.0, 0.1, q.y);" +
效果圖：
由于樹冠和樹干都使用q，因此修改其值將同時(shí)移動(dòng)：
" float2 q = uv - float2(0.67, 0.29);" +
這可怎么辦？sin函數(shù)了解一下：sin函數(shù)可以用來彎曲樹干：我們用2.0的倍數(shù)來實(shí)現(xiàn)樹干的彎曲效果，0.25的振幅也可以讓樹根和樹干之間有平移：
" 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);" +!
如果你滿意的話，這樣也夠了。最起碼一棵樹顯示出來了，不過我們還可以對(duì)樹干進(jìn)行一下優(yōu)化，目前樹干太平滑了，我們需要讓樹干有點(diǎn)破浪裝的起伏，
cos函數(shù)可以解決這個(gè)問題：
" r = 0.015 + 0.002 * cos (120.0 * q.y);" +
最后再弄一個(gè)地面，這個(gè)效果需要用到exp函數(shù)
" r = 0.015 + 0.002 * cos (120.0 * q.y) + exp(-50.0 * (1.0 - uv.y));" +
我們可以通過使用sqrt函數(shù)增加第二種顏色的存在：
" float3 color = mix(float3(1.0, 0.6, 0.1), float3(0.5, 0.8, 1.0), sqrt(1 - uv.y));" +
總之，我們看到如何使用sqrt來形成過渡，然后使用cos來創(chuàng)建形狀的起伏變化，然后使用exp來創(chuàng)建曲線，然后使用smoothstep進(jìn)行閾值處理，然后使用abs進(jìn)行對(duì)稱并混合進(jìn)行混合。
根據(jù)上面的說明，繪制一個(gè)三葉草，下面的代碼可以實(shí)現(xiàn)：
"#include <metal_stdlib>\n" +
"using namespace metal;" +
"kernel void k(texture2d<float,access::write> o[[texture(0)]]," +
" uint2 gid[[thread_position_in_grid]]) {" +
" int width = o.get_width();" +
" int height = o.get_height();" +
" float2 uv = float2(gid) / float2(width, height);" +
" float2 q = uv - float2(0.5);" +
" float a = atan2(q.y, q.x) + 0.25;" +
" float s = 0.5 + 0.5 * sin(3.0 * a);" +
" float t = 0.15 + 0.5 * pow(s, 0.3) + 0.1 * pow(0.5 + 0.5 * cos(6.0 * a), 0.5);" +
" float h = sqrt(dot(q, q)) / t;" +
" float f = 0.0;" +
" if(h < 0.4) f = 1.0;" +
" float3 color = mix(float3(0.9), float3(0.5 * h, 0.5 + 0.5 * h, 0.0), f);" +
" o.write(float4(color, 1.0), gid);" +
"}"
效果圖：
