【UWP】初試 SkiaSharp 中的 Runtime Effect

SkiaSharp 是跨平臺圖形庫 skia 的 .net 封裝。在 skia 的 m81 版本中，SkRuntimeEffect 變成了一個公開的 API。而 SkRuntimeEffect 有什麼用呢，根據說明，可以使用 Skia 專門的着色器語言來編寫着色器。而着色器這個相對來說還是挺好理解的，就是給一個面添加顏色。

目前最新版本的 SkiaSharp 還是基於 m80 版本進行的封裝。我們需要用到預覽版的 SkiaSharp 纔行，打開 VS，更改 nuget 包源：

 

接下來創建 UWP 項目，添加 SkiaSharp 和 SkiaSharp.Views 引用。注意這裏可能會等很久或者失敗，建議禾鬥學上網，或者手動下載 SkiaSharp 的這個 nuget 包到本地，然後再更改 nuget 包源指向本地文件夾。包下載地址：https://nugetized.blob.core.windows.net/skiasharp-eap/flatcontainer/skiasharp/2.84.0-preview.2/skiasharp.2.84.0-preview.2.nupkg

版本號中的 84 表明是根據 skia m84 這個版本封裝的。

 

接下來修改 xaml，添加 SKSwapChainPanel 並訂閱 PaintSurface 事件。

編寫 PaintSurface 事件處理函數：

        private void SKSwapChainPanel_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
        {
            var renderTarget = e.BackendRenderTarget;

            var surface = e.Surface;
            var canvas = surface.Canvas;

            canvas.Clear();

            const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    fragColor = half4(1.0,0.0,0.0,1.0);
}";

            using (var effect = SKRuntimeEffect.Create(sksl, out var errors))
            {
                using (var paint = new SKPaint())
                {
                    var shader = effect.ToShader(false);

                    paint.Shader = shader;

                    canvas.DrawRect(0, 0, renderTarget.Width, renderTarget.Height, paint);
                }
            }
        }

接下來我們一行行說明一下每行代碼的作用。

var renderTarget = e.BackendRenderTaget;

從事件對象中獲取渲染的目標，從這裏我們可以獲取到渲染目標的大小。

var surface  = e.Surface;
var canvas = surface.Canvas;

獲取繪製畫布。

canvas.Clear();

清空畫布，因爲 PaintSurface 事件是有可能不斷觸發的（例如改變控件大小），如果不清空的話，內容就會不斷疊加上去。

const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    fragColor = half4(1.0,0.0,0.0,1.0);
}";

聲明 skia 着色器語言（SKSL）。SKSL 的說明可以看這裏：https://skia.googlesource.com/skia/+/master/src/sksl/README 或者 Github 鏡像地址：https://github.com/google/skia/blob/master/src/sksl/README

而 shader 語言中需要像 c 語言一樣聲明一個 main 函數。SKSL 類似於 GLSL，但還是有一點點區別。

在 https://medium.com/cavalry-animation/sksl-in-cavalry-932d503c889e 這篇文章中，我們可以知道 SKSL 的 main 函數的簽名：

也就是：

void main(float2 fragCoord, inout half4 fragColor)

float2 代表包含兩個單精度浮點數 float 的結構體，half4 代表包含四個半精度浮點數 half 的結構體。inout 表明這個參數是輸入輸出，類似 C# 裏的 ref。根據參數名，我們知道第一個參數 fragCoord 是某個像素點的座標，而 fragColor 則是這個點的顏色（rgba）。

接下來我們返回紅色，也就是 fragColor = half4(1.0, 0.0, 0.0, 1.0)。至於這裏爲什麼不用 255 來代表全紅，而用 1.0，我理解是因爲 255 包含的色域還不夠多，而用這種百分比的方式則能夠顯示更多的顏色。

using (var effect = SKRuntimeEffect.Create(sksl, out var errors))

這裏就是根據 SKSL 動態編譯出一個 effect，如果沒有編譯錯誤的話，errors 將會是 null。

using (var paint = new SKPaint())

創建了一個畫筆。

var shader = effect.ToShader(false);

paint.Shader = shader;

將 effect 轉換成 shader，並附着到畫筆上。ToShader 的參數名是 isOpaque，翻譯過來就是：是否是不透明的。這裏我們可能需要 alpha 通道，所以傳 false。

canvas.DrawRect(0, 0, renderTarget.Width, renderTarget.Height, paint);

最後就是在畫布上畫一個和畫布一樣大小的矩形了，這樣相當於填充了整個矩形。

 

運行之後我們可以看到如下效果：

 

看上去用 Shader 比直接設置畫筆顏色畫矩形複雜多了。這裏我再舉一個小例子：

const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    float scale = 10;
    float x = fragCoord.x / scale;
    float y = fragCoord.y / scale;

    if (int(mod(x, 2.0)) == 0 ^^ int(mod(y, 2.0)) == 0)
    {
        fragColor = half4(1.0,0.0,0.0,1.0);
    }
    else
    {
        fragColor = half4(0.0,1.0,0.0,1.0);
    }
}";

出來的效果是這樣的：

這個雖然效果用傳統的設置像素的方式也能做，但性能就會相差很多了。更別說其它高級的效果了。