Shader step函式實現線條拼色

細節說明

線條為綠色紅色兩種拼接而成，非兩種顏色疊加。可以理解成紅色和綠色覆蓋疊加，然後紅色在中間的區域（綠色部分）被摳掉了，然後填充上綠色了。（下面有gif效果圖證明）

基礎線條載體就是linerenderer元件。先在場景中建立乙個空物件，然後掛在linerenderer元件，保持預設設定就好。設定線條起點(-7,0,0)和終點(7,0,0)，線條寬度0.5，以及線條顏色。

如圖：

建立shader。首先建立乙個unlitshader模板，命名為linegradualcolor.shader。接著建立乙個材質球，命名為linegradualcolor。

開啟linegradualcolor.shader，修改第一行shader名稱為shader 「shadershub/linegradualcolor」；

設定剛剛建立的材質球的shader為shadershub/linegradualcolor(即剛剛建立的shader)；

shader "shadershub/laserbeam"
subshader
lod 100
blend srcalpha oneminussrcalpha
zwrite off
pass
;struct v2f
;fixed4 _middlecolor;
fixed4 _edgecolor;
float _middlewidth;
float _edgewidth;
fixed4 frag (v2f i) : sv_target
endcg}}
}

我們直接來看頂點著色器部分。

fixed4 frag (v2f i) : sv_target

注意，上面的第一行**是注釋的，第二行**是開啟的，這裡為了說明知識點，特做此處理。這時的效果應該是這樣的。

我們先看下step函式:

step(a, x) <=> if(x >= a) return 1; else return 0。

step(x, a) <=> if(x <= a) return 1; else return 0。

現在設定的是_middlewidth = 0.85，_edgewidth = 0，centerness值就是uv.y值，然後代入計算：

float middle = step(_middlewidth, centerness)中，當uv.y>=0.85時，middle>=1。可以理解成此時middle才生效。

float edge = step(_edgewidth, centerness) - middle中，當uv.y>=0時，middle>=1。可以理解成此時middle才生效。

當 uv.y>0.85時，step(_edgewidth, centerness)和middle都生效。

這裡有個減法(float edge = step(_edgewidth, centerness) - middle)，兩個step作用的表示式，在同時生效（step函式值不為0）時，fixed4 col = _middlecolor * middle + _edgecolor * edge中的edge因子為0。圖形意義就是當 uv.y>0.85時，剔除邊緣色（edge）。所以一開始我說，「非兩種顏色疊加」。

我們調節_middlewidth從0.85變大時，綠色(線條中心顏色)會變寬。我們再調節_edgewidth，會發現值變大時，紅色(線條邊緣色)變窄。

為了再次證明是middle和edge兩種顏色的拼接，而非覆蓋疊加，我們看下面的動態圖。途中當middle顏色透明度為0時，綠色部分就空出來了。

上面的綠色(線條中心色)一直是在底下，我們需要它正確顯示在中間部位。這時我們就需要乙個根據uv.y能夠對稱分布的公式，這時最簡單的就是用上絕對值。這個表示式就是half centerness = 1 - abs(i.uv.y - .5) * 2，值域在[0,1]。我們可以畫出它的函式影象：

此時，我們可以用half centerness = 1 - abs(i.uv.y - .5) * 2;替換half centerness = i.uv.y ;，直接用一開始的原始碼也是一樣的。這時，我們發現，線條的綠色居中了。

接下來我想修改下上面的函式影象，做點標註，方便我講解。

圖中我們將_edgewidth設定成0.5，_middlewidth設定成0.85。下文中，我將float middle = step(_middlewidth, centerness);稱為中間色表示式，float edge = step(_edgewidth, centerness) - middle;稱為邊緣色表示式。

上圖中，我們只需要將順時針旋轉90°，就可以對應上我們的執行時效果圖了。座標圖中的兩個色塊就對應執行時的線條。此時我們調節綠色直線會直接影響圖中的淺綠色方塊的大小，也就是影響中間色帶的寬度；調節紅色直線會直接影響紅色方塊的大小，也就是影響邊緣色帶的寬度。讀者可以結合文中的影象和實際執行時動態調值來更好地理解。

本篇至此完結，歡迎指正交流(或郵件[email protected])！

Shader step函式實現線條拼色

layer list 實現EditText線性背景

opencv 實現等值線繪製等值線

PCB Genesis加郵票孔線與線實現演算法

Shader step函式實現線條拼色

layer list 實現EditText線性背景

opencv 實現等值線 繪製等值線

PCB Genesis加郵票孔 線與線 實現演算法

相關推薦

opencv 實現等值線繪製等值線

PCB Genesis加郵票孔線與線實現演算法