OpenGL ES《六》,片段丟棄锯七,紋理混合

混合通常是指實(shí)現(xiàn)物品的透明度的一種技術(shù)。可以理解為調(diào)色舷手,例如:紅色加藍(lán)色之后出現(xiàn)的顏色是紫色或品紅這樣的。就是兩種物品通過(guò)透明度把兩種顏色混合起來(lái)的一種技術(shù)劲绪。

image.png

一個(gè)物體的透明度是通過(guò)它顏色的aplha值來(lái)決定的男窟,Alpha顏色值是顏色向量的第四個(gè)分量盆赤。

丟棄片段

有些圖片不需要半透明,只想要一部分的時(shí)候歉眷。你就可以拋棄這部分牺六。通過(guò)alpha等于0來(lái)將其拋棄。


image.png

草的形狀和2D四邊形的形狀并不完全相同汗捡,所以你只想顯示草紋理的某些部分淑际,而忽略剩下的部分。
傳入數(shù)據(jù)到著色器凉唐,通過(guò)著色器去判斷透明度的值庸追,拋棄不需要的值。

precision mediump float;

varying lowp vec2 varyTextCoord; 

uniform sampler2D colorMap; //2d紋理采樣器,默認(rèn)的激活紋理單元(0)台囱,沒(méi)有分配值
uniform sampler2D colorMap2;


void main()
{
    vec4 texColor = texture2D(colorMap, varyTextCoord);
    if (texColor.a < 0.1) {
        discard;
    }
    gl_FragColor = texColor;
}

因?yàn)椴莸牡膱D像淡溯,就只有白色和綠色之分。我們把白色的部分都丟棄后簿训,就只留下綠色的部分咱娶,這樣就把草給摳圖一般扣出來(lái)。


image.png

混合

雖然直接丟棄片段很好强品,但它不能讓我們渲染半透明的圖像膘侮。我們要么渲染一個(gè)片段,要么完全丟棄它的榛。要想渲染有多個(gè)透明度級(jí)別的圖像琼了,我們需要啟用混合(Blending)。和OpenGL大多數(shù)的功能一樣夫晌,我們可以啟用GL_BLEND來(lái)啟用混合:

glEnable(GL_BLEND);

OpenGL中的混合是通過(guò)下面這個(gè)方程來(lái)實(shí)現(xiàn)的:


image.png

片段著色器運(yùn)行完成后雕薪,并且所有的測(cè)試都通過(guò)之后,這個(gè)混合方程(Blend Equation)才會(huì)應(yīng)用到片段顏色輸出與當(dāng)前顏色緩沖中的值(當(dāng)前片段之前儲(chǔ)存的之前片段的顏色)上晓淀。源顏色和目標(biāo)顏色將會(huì)由OpenGL自動(dòng)設(shè)定所袁,但源因子和目標(biāo)因子的值可以由我們來(lái)決定。我們先來(lái)看一個(gè)簡(jiǎn)單的例子:


image.png

我們有兩個(gè)方形凶掰,我們希望將這個(gè)半透明的綠色方形繪制在紅色方形之上燥爷。紅色的方形將會(huì)是目標(biāo)顏色(所以它應(yīng)該先在顏色緩沖中),我們將要在這個(gè)紅色方形之上繪制這個(gè)綠色方形懦窘。

問(wèn)題來(lái)了:我們將因子值設(shè)置為什么前翎?嘛,我們至少想讓綠色方形乘以它的alpha值畅涂,所以我們想要將Fsrc設(shè)置為源顏色向量的alpha值鱼填,也就是0.6。接下來(lái)就應(yīng)該清楚了毅戈,目標(biāo)方形的貢獻(xiàn)應(yīng)該為剩下的alpha值苹丸。如果綠色方形對(duì)最終顏色貢獻(xiàn)了60%,那么紅色方塊應(yīng)該對(duì)最終顏色貢獻(xiàn)了40%苇经,即1.0 - 0.6赘理。所以我們將Fdestination設(shè)置為1減去源顏色向量的alpha值。這個(gè)方程變成了:

image.png

結(jié)果就是重疊方形的片段包含了一個(gè)60%綠色扇单,40%紅色的一種臟兮兮的顏色:
image.png

最終的顏色將會(huì)被儲(chǔ)存到顏色緩沖中商模,替代之前的顏色。
這樣子很不錯(cuò)蜘澜,但我們?cè)撊绾巫孫penGL使用這樣的因子呢施流?正好有一個(gè)專門的函數(shù),叫做glBlendFunc鄙信。
glBlendFunc(GLenum sfactor, GLenum dfactor)函數(shù)接受兩個(gè)參數(shù)瞪醋,來(lái)設(shè)置源和目標(biāo)因子。OpenGL為我們定義了很多個(gè)選項(xiàng)装诡,我們將在下面列出大部分最常用的選項(xiàng)银受。
image.png

為了獲得之前兩個(gè)方形的混合結(jié)果,我們需要使用源顏色向量的alpha作為源因子鸦采,使用1?alpha作為目標(biāo)因子宾巍。這將會(huì)產(chǎn)生以下的glBlendFunc:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

也可以使用glBlendFuncSeparate為RGB和alpha通道分別設(shè)置不同的選項(xiàng):

glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO);

OpenGL甚至給了我們更多的靈活性,允許我們改變方程中源和目標(biāo)部分的運(yùn)算符渔伯。當(dāng)前源和目標(biāo)是相加的顶霞,但如果愿意的話,我們也可以讓它們相減锣吼。glBlendEquation(GLenum mode)允許我們?cè)O(shè)置運(yùn)算符选浑,它提供了三個(gè)選項(xiàng):

image.png

通常我們都可以省略調(diào)用glBlendEquation,因?yàn)?code>GL_FUNC_ADD對(duì)大部分的操作來(lái)說(shuō)都是我們希望的混合方程吐限,但如果你真的想打破主流鲜侥,其它的方程也可能符合你的要求。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末诸典,一起剝皮案震驚了整個(gè)濱河市描函,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌狐粱,老刑警劉巖舀寓,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異肌蜻,居然都是意外死亡互墓,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門蒋搜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)篡撵,“玉大人判莉,你說(shuō)我怎么就攤上這事∮” “怎么了券盅?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)膛檀。 經(jīng)常有香客問(wèn)我锰镀,道長(zhǎng),這世上最難降的妖魔是什么咖刃? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任泳炉,我火速辦了婚禮,結(jié)果婚禮上嚎杨,老公的妹妹穿的比我還像新娘花鹅。我一直安慰自己,他們只是感情好磕潮,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布翠胰。 她就那樣靜靜地躺著,像睡著了一般自脯。 火紅的嫁衣襯著肌膚如雪之景。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,156評(píng)論 1 308
  • 那天膏潮,我揣著相機(jī)與錄音锻狗,去河邊找鬼。 笑死焕参,一個(gè)胖子當(dāng)著我的面吹牛轻纪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播叠纷,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼刻帚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了涩嚣?” 一聲冷哼從身側(cè)響起崇众,我...
    開(kāi)封第一講書(shū)人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎航厚,沒(méi)想到半個(gè)月后顷歌,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡幔睬,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年眯漩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片麻顶。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赦抖,死狀恐怖舱卡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情摹芙,我是刑警寧澤灼狰,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站浮禾,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏份汗。R本人自食惡果不足惜盈电,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杯活。 院中可真熱鬧匆帚,春花似錦、人聲如沸旁钧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)歪今。三九已至嚎幸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間寄猩,已是汗流浹背嫉晶。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留田篇,地道東北人替废。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像泊柬,于是被迫代替她去往敵國(guó)和親椎镣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

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