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

蘋果API搬運工發表於2017-12-14

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

MetalKit系統文章目錄

讓我們用Metal Shading Language (MSL)繼續我們在神奇的著色器世界的旅程,接著第10部分 Part 10.用我們上次用的playground,我們接著會用MSL數學函式來製作技術影像,用到sin, cos, pow, abs, fmod, clamp, mix, step和smoothstep.

首先,讓我們看看上次的"日食"程式碼.我們將從列表最後的函式開始,因為smoothstep函式正是我們修復上次沒注意到的一個問題所需要的-我們輸入的影像有鋸齒(即走樣),如果你放大來看就會很明顯:

chapter11_1.png

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,輸出影像現在已經反走樣了,鋸齒已經沒有了:

chapter11_2.png

下面我們要關注的函式是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);
複製程式碼

輸出影像看起來應該像這樣

chapter11_3.png

首先,我們繪製藍色風格線,間距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藝術的真實片段.輸出影像應該看起來像這樣:

chapter11_4.png

你的任務是試著理解魔法是如何工作的.如果你有任何問題,可以用部落格中的聯絡方式來聯絡我. 原始碼source code 已釋出在Github上.

下次見!

相關文章