Shader筆記4-描邊

? ? 描邊原理:在片段著色器里面,對于每個像素:1. 如果它是不透明的像素矾踱,則不管,維持原本顏色疏哗;2. 如果透明呛讲,是360度判斷它四周有沒有不透明的像素,如果有返奉,則把它設(shè)成描邊顏色贝搁,否則保持透明。

頂點著色器 Outline.vert

attribute vec4 a_position;

attribute vec2 a_texCoord;

attribute vec4 a_color;

//varying 頂點shader和片段shader之間相互傳遞的參數(shù)芽偏。

varying vec4 v_fragmentColor;

varying vec2 v_texCoord;

void main()

{

? ? ? ? gl_Position = CC_PMatrix * a_position;

? ? ? ? v_fragmentColor = a_color;

? ? ? ? v_texCoord = a_texCoord;

}


片段著色器Outline.frag

varying vec4 v_fragmentColor; // vertex shader傳入雷逆,setColor設(shè)置的顏色

varying vec2 v_texCoord; // 紋理坐標

uniform float outlineSize; // 描邊寬度,以像素為單位

uniform vec3 outlineColor; // 描邊顏色

uniform vec2 textureSize; // 紋理大形畚尽(寬和高)膀哲,為了計算周圍各點的紋理坐標往产,必須傳入它,因為紋理坐標范圍是0~1

// 判斷在這個角度上距離為outlineSize那一點是不是透明

int getIsStrokeWithAngel(float angel)

{

? ? int stroke = 0;

? ? float rad = angel * 0.01745329252; // 這個浮點數(shù)是 pi / 180某宪,角度轉(zhuǎn)弧度

? ? vec2 unit = 1.0 / textureSize.xy;//單位坐標

? ? vec2 offset = vec2(outlineSize * cos(rad) * unit.x, outlineSize * sin(rad) * unit.y); //偏移量

? ? float a = texture2D(CC_Texture0, v_texCoord + offset).a;

? ? if (a >= 0.5)// 我把alpha值大于0.5都視為不透明仿村,小于0.5都視為透明

? ? {

? ? ? ? stroke = 1;

? ? }

? ? return stroke;

}

void main()

{

? ? ?//先判斷當(dāng)前像素是否透明,如果不透明則直接返回兴喂。

? ? vec4 myC = texture2D(CC_Texture0, v_texCoord); // 正在處理的這個像素點的顏色

? ? if (myC.a >= 0.5) // 不透明蔼囊,不管,直接返回

? ? {

? ? ? ? gl_FragColor = v_fragmentColor * myC;

? ? ? ? return;

? ? ?}

? ? //如果是透明像素衣迷,就判斷這個點周圍12個方向畏鼓,每個方向距離當(dāng)前像素距離是outlineSize的像素點是否透明,

? ? //只要有一個是非透明像素壶谒,就把當(dāng)前像素點設(shè)為描邊的顏色滴肿,并設(shè)置成非透明。

? ?int strokeCount = 0;

? ? for (int i = 0; i < 12; i++)

? ? {

? ? ? ? ? ? strokeCount += getIsStrokeWithAngel(i * 30);

? ? }

? ? if (strokeCount > 0) // 四周圍至少有一個點是不透明的佃迄,這個點要設(shè)成描邊顏色

? ? {

? ? ? ? ? myC.rgb = outlineColor;

? ? ? ? ? myC.a = 1.0;

? ? }

? ? gl_FragColor = v_fragmentColor * myC;

}

? ? ? ? 先判斷當(dāng)前像素是否透明泼差,如果不透明則直接返回。如果是透明像素呵俏,就判斷這個點周圍12個方向堆缘,每個方向距離當(dāng)前像素距離是outlineSize的像素點是否透明,只要有一個是非透明像素普碎,就把當(dāng)前像素點設(shè)為描邊的顏色吼肥,并設(shè)置成非透明。

使用示例

//精靈

auto splash = Sprite::create("grossini.png");

splash->setPosition(100, 100);

this->addChild(splash, 1);

splash->setScale(3);

//vert:頂點著色器? frag:片段著色器

auto glprogram = GLProgram::createWithFilenames("Shaders/test/Outline.vert", "Shaders/test/Outline.frag");

auto glprogramstate = GLProgramState::getOrCreateWithGLProgram(glprogram);

splash->setGLProgramState(glprogramstate);

//設(shè)置屬性

glprogramstate->setUniformFloat("outlineSize", 3); // 描邊寬度

//描邊顏色

Color3B outlineColor(0, 255, 0);

glprogramstate->setUniformVec3("outlineColor", Vec3(outlineColor.r / 255.0f, outlineColor.g / 255.0f, outlineColor.b / 255.0f));

//圖片紋理大小

glprogramstate->setUniformVec2("textureSize", Vec2(splash->getContentSize().width, splash->getContentSize().height));

效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末麻车,一起剝皮案震驚了整個濱河市缀皱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌动猬,老刑警劉巖啤斗,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異赁咙,居然都是意外死亡钮莲,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門彼水,熙熙樓的掌柜王于貴愁眉苦臉地迎上來崔拥,“玉大人,你說我怎么就攤上這事凤覆×赐撸” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵盯桦,是天一觀的道長慈俯。 經(jīng)常有香客問我渤刃,道長,這世上最難降的妖魔是什么肥卡? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮事镣,結(jié)果婚禮上步鉴,老公的妹妹穿的比我還像新娘。我一直安慰自己璃哟,他們只是感情好氛琢,可當(dāng)我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著随闪,像睡著了一般阳似。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上铐伴,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天撮奏,我揣著相機與錄音,去河邊找鬼当宴。 笑死畜吊,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的户矢。 我是一名探鬼主播玲献,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼梯浪!你這毒婦竟也來了捌年?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤挂洛,失蹤者是張志新(化名)和其女友劉穎礼预,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體虏劲,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡逆瑞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了伙单。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片获高。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖吻育,靈堂內(nèi)的尸體忽然破棺而出念秧,到底是詐尸還是另有隱情,我是刑警寧澤布疼,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布摊趾,位于F島的核電站币狠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏砾层。R本人自食惡果不足惜漩绵,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肛炮。 院中可真熱鬧止吐,春花似錦、人聲如沸侨糟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽秕重。三九已至不同,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間溶耘,已是汗流浹背二拐。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留凳兵,地道東北人卓鹿。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像留荔,于是被迫代替她去往敵國和親吟孙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 馬賽克原理 要實現(xiàn)馬賽克的效果聚蝶,需要把圖片一個相當(dāng)大小的正方形區(qū)域用同一個點的顏色來表示杰妓,相當(dāng)于將連續(xù)的顏色...
    work_xiao閱讀 1,328評論 0 0
  • 一:著色的原理 OpenGL著色語言(OpenGL Shading Language)是用來在OpenGL中著色編...
    wo不懂閱讀 997評論 0 2
  • 本文主要介紹cocos2d-x如何使用OpenGL實現(xiàn)著色器程序,介紹可以通過GLSL語言實現(xiàn)的兩類著色器...
    work_xiao閱讀 4,581評論 0 5
  • 模糊效果在游戲中經(jīng)常會用到碘勉,有的為了突出前景會把背景給模糊化巷挥,有的是因為一些技能需要模糊效果。模糊是sha...
    work_xiao閱讀 3,906評論 0 1
  • 歲月的詩 需要用淚來書寫 因為那滿含哀傷 當(dāng)晨曦的光不再明亮 暗夜的月不再清晰 我明了這一切又是癡心一場 不明朗的...
    染青紗閱讀 218評論 11 2