[MetalKit]17-Using-MetalKit-part-11使用MetalKit11

本系列文章是對 metalkit.org 上面MetalKit內容的全面翻譯和學習.

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

下次見!