[MetalKit]31-Shadows-in-Metal-part-1陰影1

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

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

MetalKit系統文章目錄

lighting and shadows光照和陰影是Computer Graphics計算機圖形學中一個相當重要的話題.本文是關於Metal中Shadow陰影系列文章的第一篇.我們將使用第15部分Using metal part 15中playground的程式碼.讓我們建立一個基礎場景:

float differenceOp(float d0, float d1) {
    return max(d0, -d1);
}

float distanceToRect( float2 point, float2 center, float2 size ) {
    point -= center;
    point = abs(point);
    point -= size / 2.;
    return max(point.x, point.y);
}

float distanceToScene( float2 point ) {
    float d2r1 = distanceToRect( point, float2(0.), float2(0.45, 0.85) );
    float2 mod = point - 0.1 * floor(point / 0.1);
    float d2r2 = distanceToRect( mod, float2( 0.05 ), float2(0.02, 0.04) );
    float diff = differenceOp(d2r1, d2r2);
    return diff;
}
複製程式碼

我們首先建立differenceOp() 函式,它返回兩個有符號距離間的差異.這為我們在物體表面雕刻出形狀提供了便利.下一步,我們建立distanceToRect() 函式,它確定一個給定的點是在四邊形內部或外部.在1st行,我們用給定的中心來偏移當前座標系.在2nd行我們得到當前點的對稱座標.在3rd行我們得到到兩邊的距離.然後我們建立distanceToScene() 函式,它給出了到場景中任意物體的最近距離.注意在MSL中fmod()函式使用的是trunc()而不是floor(),因為我們還想要使用負值,所以我們需要建立一個自定義的mod運算子,所以我們使用了GLSL中mod()的定義x - y * floor(x/y).我們需要modulus運算來繪製大量小三角形,它們彼此距離0.1且互為映象.最後,我們全這些函式來生成一個形狀,它看起來有點像有窗戶的高樓:

kernel void compute(texture2d<float, access::write> output [[texture(0)]],
                    constant float &timer [[buffer(0)]],
                    uint2 gid [[thread_position_in_grid]])
{
    int width = output.get_width();
    int height = output.get_height();
    float2 uv = float2(gid) / float2(width, height);
    uv = uv * 2.0 - 1.0;
    float d2scene = distanceToScene(uv);
    bool i = d2scene < 0.0;
    float4 color = i ? float4( .1, .5, .5, 1. ) : float4( .7, .8, .8, 1. );
    output.write(color, gid);
}
複製程式碼

如果你現在執行playground,你會看到類似的影像:

shadows_1.png

要產生陰影,我們需要第一-得到光源距離,第二-得到光源方向,第三-朝著該方向前進直到我們碰到光源或物體.所以讓我們在lightPos處建立一個光源,為了有趣我們將讓它動起來.我們使用從主機(API)程式碼傳遞過來的,原來的timeruniform引數.然後,我們得到任意給定點到lightPos的距離,並根據到光源的距離給畫素著色-只要不在物體內部.我們想讓離光源近的顏色亮,遠的顏色暗.我們用max()函式來避免燈光亮度出現負值.用下面幾行程式碼替換核心中的最後一行:

float2 lightPos = float2(1.3 * sin(timer), 1.3 * cos(timer));
float dist2light = length(lightPos - uv);
color *= max(0.0, 2. - dist2light );
output.write(color, gid);
複製程式碼

如果你現在執行playground,你會看到類似的影像:

shadows_2.png

我們已經完成了前兩步(燈光位置和方向),所以繼續處理第三步-真實的陰影函式:

float getShadow(float2 point, float2 lightPos) {
    float2 lightDir = lightPos - point;
    float dist2light = length(lightDir);
    for (float i=0.; i < 300.; i++) {
        float distAlongRay = dist2light * (i / 300.);
        float2 currentPoint = point + lightDir * distAlongRay;
        float d2scene = distanceToScene(currentPoint);
        if (d2scene <= 0.) { return 0.; }
    }
    return 1.;
} 
複製程式碼

讓我們一行一行看看程式碼.我們首先得到從點指向燈光的方向.下一步,我們得出到燈光的距離,這樣我們就知道了我們需要沿著燈光射線移動多遠.然後,我們用一個迴圈來將射線分成許多小步.如果步數不夠多,可能會跳過去我們的物體,這會導致陰影中出現"破洞".下一步,我們計算出當前沿射線前進了多遠,並沿射線前進同樣距離來找到空間中的取樣點.然後,我們看看我們離平面上的那個點還有多遠,並測試我們是否在物體內部.如果在,因為我們在陰影中就返回0,否則射線沒有碰到任何物體就返回1.終於快到了觀看陰影的時間了!在核心中,用下面幾行替換最後一行:

float shadow = getShadow(uv, lightPos);
shadow = shadow * 0.5 + 0.5;
color *= shadow;
output.write(color, gid);
複製程式碼

我們用0.5來衰減陰影效果,當然,也可以設定為其它值試試效果.如果你現在執行playground,你會看到類似的影像:

shadows_3.png

現在每迴圈只前進一畫素,效能很不好.我們可以通過加速沿射線方向的前進來改善效能.我們並不需要前進那麼小的步長.我們可以大步前進只要不跨越我們的物體就行.我們可以安全地向任何方向步進一個到場景的距離而不是一個固定步長,這樣我們可以快速路過空白區域!當找到到最近曲面的距離後,我們並不知道曲面的方向,所以實際上我們有了一個和場景中最近部分相交的圓的半徑.我們可以追蹤射線,它總是會遇到圓的邊緣,當圓的半徑變成0時就意味著它是和曲面的相交點.對了,這就是我們上次學習的raymarching技術!只需簡單地用下面幾行替換**getShadow()**函式中的內容:

float2 lightDir = normalize(lightPos - point);
float dist2light = length(lightDir);
float distAlongRay = 0.0;
for (float i=0.0; i < 80.; i++) {
    float2 currentPoint = point + lightDir * distAlongRay;
    float d2scene = distanceToScene(currentPoint);
    if (d2scene <= 0.001) { return 0.0; }
    distAlongRay += d2scene;
    if (distAlongRay > dist2light) { break; }
}
return 1.;
複製程式碼

在raymarching中步長取決於到曲面的距離.在空白區域,它跳過一大段距離,可以跑得更長.但是,如果平行於物體並離得很近,距離就會很小,跳過的長度也很小.這就意味著射線跑得很慢.當使用固定步長時,它跑不遠.用80或更多步,我就應該主可以不產生陰影中的"破洞"了.如果你再執行playground,影像看上去幾乎沒變,但陰影現在更快了.要看這份程式碼的動畫效果,我在下面使用一個Shadertoy嵌入式播放器.只要把滑鼠懸浮在上面,並單擊播放按鈕就能看到動畫:<譯者注:不支援嵌入播放器,我用gif代替https://www.shadertoy.com/embed/lt3SzB>

shadow1.mov.gif

這種型別的陰影被稱為hard shadows硬陰影.下次我們將學習soft shadows軟陰影,它看起來更真實更好看. 原始碼source code已釋出在Github上.

下次見!

相關文章