準備階段
基於ui的shader，先找到對應unity3d版本的內置shader包，下載下來之後找到UI-Default.shader，拷貝該文件修改名字為要編輯效果的名字。
調整shader 名稱為 OEngine/UI/TaiChi，創建材質球TaiChi.mat，設置shader為OEngine/UI/TaiChi。在場景中添加Image，並設置材質為TaiChi，調整顏色為黑色。
開始shader編輯
因為太極圖案需要兩種顏色，調整頂點函數顏色設置，去掉混合計算。如下操作注釋掉混合計算。
OUT.color = v.color ;//* _Color;
下面開始編輯frag函數，對圖片做上下分半，顏色區分顯示，在代碼中新增
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
//上下分色設置--新增代碼
float cc = lerp(1, 0, step( 0, IN.texcoord.y-0.5 )) ;
//插入計算代碼
color = lerp( IN.color, _Color , cc);
//--新增代碼結束
....
現在圖片展示成下面效果：
接下來我們再左右兩邊繪製兩內圓，控制第一、三象限做顏色設置，二、四象限顏色保留上一步設置，在插入代碼注釋下添加代碼
//大圓半徑
float radius = 0.5;
//左右內圓圓心
float2 center = float2(radius + step(0.5, IN.texcoord.x), 1) *0.5;
//圓心與當前點的向量
float2 dir = center-IN.texcoord.xy;
//左右內圓
cc= lerp(cc, smoothstep(radius*0.5 - _Factor ,radius*0.5, length(dir) ), step( 0, (IN.texcoord.x-0.5)*(IN.texcoord.y-0.5)));
效果如下：
很顯然這個效果的第一象限顏色不對，要做一次反轉顏色，
/對第一象限設置反轉
cc= lerp(cc, 1-cc, step(0,IN.texcoord.x-0.5)*step(0,IN.texcoord.y-0.5) );
好了，這裡得到我們想要的效果了，現在再對左右兩圓心做兩小小圓繪製。
很顯然，小小圓半徑範圍在0-0.25之間，_RadiusRang 0-1變化控制小圓大小
float r = radius*0.5*_RadiusRang;
//添加小小圓設置
cc= lerp(cc, 1-step(0, IN.texcoord.x-0.5), 1- smoothstep(r - _Factor ,r, length(dir) ));
得到下面效果：
效果出來了，最後繪製大圓，去掉邊上alpha，在
color = lerp( IN.color, _Color , cc); 後面添加代碼，
color.a =1- smoothstep(radius - _Factor ,radius, length(0.5 - IN.texcoord.xy) ) ;
最終效果太極圖案就繪製出來了。
整個frag代碼整合如下：
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
//大圓半徑
float radius = 0.5;
//小小圓半徑
float r = radius*0.5*_RadiusRang;
//左右內圓圓心
float2 center = float2(radius + step(0.5, IN.texcoord.x), 1) *0.5;
float2 dir = center-IN.texcoord.xy;
//上下分半
float cc = lerp(1, 0, step( 0, IN.texcoord.y-0.5 )) ;
//左右內圓
cc= lerp(cc, smoothstep(radius*0.5 - _Factor ,radius*0.5, length(dir) ), step( 0, (IN.texcoord.x-0.5)*(IN.texcoord.y-0.5)));
//對第一象限設置反轉
cc= lerp(cc, 1-cc, step(0,IN.texcoord.x-0.5)*step(0,IN.texcoord.y-0.5) );
//兩小圓
cc= lerp(cc, 1-step(0, IN.texcoord.x-0.5), 1- smoothstep(r - _Factor ,r, length(dir) ));
color = lerp( IN.color, _Color , cc);
//圓形
color.a =1- smoothstep(radius - _Factor ,radius, length(0.5 - IN.texcoord.xy) ) ;
//後面是原UI-Default的代碼