寫在前面：

對Metal技術感興趣的同學，可以關注我的專題:Metal專輯
也可以關注我個人的簡書賬號：張芳濤
所有的代碼存儲的Github地址是：Metal

正文

讓我們繼續使用Metal著色語言（MSL）繼續我們的著色世界之旅，在第11部分中選擇我們離開的地方。使用我們上次工作的同一個Playground，接下來我們將嘗試接近使用Metal著色語言 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函數在執行鉗位后實現三次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的值，并且如果介于兩者之間則保持其值。 我們的計算內核現在應該如下所示：

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（）函數使用它們之間的權重來執行x和y之間的線性插值。 返回值計算為x *（1-w）+ y * w。 在這種情況下，使用平滑步驟作為權重來插值行星顏色和太陽顏色。 如果您執行playground，輸出圖像現在具有抗鋸齒功能，并且鋸齒狀全部消失：

抗鋸齒圖像

我們看到的下一個功能是abs和fmod。 abs（）函數只返回絕對值，或者數字的距離為0.換句話說，任何值都會丟失其符號并始終返回非負值。fmod（）函數返回float的余數小數部分（相當于整數的模運算符％）。 讓我們將這兩個函數應用于某些值，看看我們能得到什么：

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提供。 輸出圖像應如下所示：

效果圖

源代碼在這里