float radius =
0.01
;//描邊的寬度
//在shader中顏色的範圍是0.0-1.0,下面這樣設定顏色也沒有問題
//只是有一點需要注意，就是臨近邊緣畫素他們的透明度可能會有不同，這個時候如果我們還是傳1.0過去，
//可能會導致顏色不是那麼綠，所以我使用了255.0
vec3 u_outlinecolor =
vec3
(0.0
,255.0
,1.0);
//描邊的顏色
float u_threshold =
1.0;
//描邊的模糊度
vec4 accum =
vec4
(0.0);
vec4 normal =
vec4
(0.0);
normal =
texture2d
(u_texture,
vec2
(v_uv.x, v_uv.y));
//對於png本身而言 那些透明區域的透明通道本身就是0,可以看到的部分透明通道都是不為0的
//下面這個公式的演算法就是 取乙個正方形，正方形的中心為當前要繪製的畫素中心，另外取四個拐角點
//想象一下，拿著這個正方形在png上滑動，
//只要有乙個拐角放在了可以顯示的畫素區域裡，那麼就說明這裡是有可能顯示描邊的顏色，但不一定顯示
//因為下方還有乙個判斷，就是正方形的中心點不能包含在有顏色的畫素裡，否則的話會以當前點的畫素顯示
//如果正方形的中心點也不在可以顯示的畫素區域裡的話，那麼就可以顯示描邊的顏色
//正方形的中心點到乙個拐角的距離，就是描邊的寬度
accum +
=texture2d
(u_texture,
vec2
(v_uv.x - radius, v_uv.y - radius));
//左下乙個點
accum +
=texture2d
(u_texture,
vec2
(v_uv.x + radius, v_uv.y - radius));
//右下乙個點
accum +
=texture2d
(u_texture,
vec2
(v_uv.x + radius, v_uv.y + radius));
//右上乙個點
accum +
=texture2d
(u_texture,
vec2
(v_uv.x - radius, v_uv.y + radius));
//左上乙個點
accum *
= u_threshold;
//模糊度
accum.rgb = u_outlinecolor * accum.a;
accum.a =
0.0;
//下面這個公式就是判斷當前的正方形中心區域不能落在可以顯示有顏色的畫素區域裡
normal =
( accum *
(1.0
-normal.a))+
(normal * normal.a);if
(normal.a>
0.01
)else
Unity菜鳥開發紀要 2D描邊
3d模型的描邊漫天飛，通過法線計算就行，但是2d還是雖然也有，但不是自己想要的，畢竟只是想調一下顏色，閾值，邊緣大小就行。之前是做影象處理的，用的波門處理，計算乙個畫素點與周圍的梯度值差異，大於閾值的就是邊緣點。求的邊緣點與邊緣色混合，再與原色混合輸出就可以。直接上 在這裡插入 片 shader u...
PS技巧 建立2D物件的描邊陰影
在本場景中，怪物死亡掉落寶袋。所以在玩家眼裡，寶袋是掉落在場景裡，而不是像其他介面的ui元素，懸浮在場景上的。所以，我們需要給寶袋新增陰影，增加它與場景之間的視覺過渡，比較簡單的辦法是使用陰影，正如我們在3d世界中，給物體新增陰影，讓其與地圖看起來更融合一樣。很明顯的，下圖有兩個寶袋，左邊乙個是沒有...
CSS之 基礎的2D轉換模組
2d轉換需要用到 transform屬性。transform本身就是改變的意思，所以2d轉換可以實現一些轉換，比如 旋轉 rotate 平移 translate 縮放 scale 等 分割線 旋轉的格式 transform rotate 45deg 旋轉45度，deg是單位。平移的格式 transf...