Unity3D 卡通描邊之控制線條粗細

1、前言

以前我發表過一篇Unity3D 卡通渲染 基於退化四邊形的實時描邊，最重要的實時描邊已經實現了，本文接下來要完善一下它。

在以前的實時描邊中，使用了幾何着色器中的LineStream來進行繪製線條的，這樣繪製線條是沒法脫離底層特性來在全部平臺上通用式地控制線條的粗細，這就須要咱們再作文章。

 

2、原理

關於圖形學中如何控制線條粗細這個問題，其實早就有人作了研究，文章在這。

借用該文章的一張圖

原理看圖就一目瞭然，在裁剪空間中，e0和e1是線條的2個頂點，以後依次計算出二維向量ext和n，在經過這2個向量計算出4個點，再用這4個點繪製出2個三角形便可拼出這個四邊形。

本文在此基礎上作了一點調整，以下圖所示。

簡單來講就是以線的2點爲中線，來繪製四邊形，而不是做爲四邊形的一條邊，由於2個點的位置順序在本文中的幾何着色器中獲取到的是無序的，多是e1誤被當初e0，也可能e0被誤當成e1，若是要讓它們變得有序那會變得複雜，而以此爲中線繪製四邊形，那麼就會變得很簡單。接下來只要計算出四邊形的4個點，再由幾何着色器分裂出2個三角形，便可獲得此四邊形。

n和ext在unity3D的Shader中是這樣計算的：

float PctExtend = 0.01;
float2 ext = PctExtend * (e1.xy - e0.xy);
float2 v = normalize(float3(e1.xy - e0.xy, 0)).xy;
float2 n = float2(-v.y, v.x) * 線條寬度;

從上述代碼能夠看出，寬度是在n的計算中控制的，咱們能夠把這個參數提取出來，讓使用者隨意調整。

 

3、編碼

之前的代碼寫得比較亂，爲了方便就再也不整理了，編碼略複雜，請自行整理。

這裏附上源碼

 

4、運行

效果還不錯，性能作不評價，unity3d貌似內部作了優化，幀數不知爲啥時高時低。

Enjoy It，本文到此結束，謝謝！