引子

JavaScript WebGL 使用圖片疑惑點(diǎn)中提到兩張圖片疊加，默認(rèn)情況下，即使有透明的區(qū)域也不會透過看到?，F(xiàn)在就來看這個透明的處理。

• Origin
• My GitHub

關(guān)于透明

說到透明，在顏色編碼中由 Alpha 通道負(fù)責(zé)，透明度存儲方式有：

• Premultiplied Alpha ：表示顏色信息在存儲的時候會將透明信息與 RGB 相乘，比如 RGB 是 (1, 1, 1)，透明度為 0.5 ，那么存儲時為：(0.5, 0.5, 0.5, 0.5) 。
• Non-premultiplied Alpha ： 表示 RGB 與透明信息分別單獨(dú)存儲，不會相乘，比如 RGB 是 (1, 1, 1)，透明度為 0.5 ，那么存儲時為：(1, 1, 1, 0.5)

WebGL 紋理預(yù)處理使用 pixelStorei 方法指定顏色透明處理方式，如果想要使用 Premultiplied Alpha 方式：

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

WebGL 透明處理方式之一是使用 α 混合。

 α 混合

α 混合是使用 α 值(RGBA 中的 A)混合兩個以上物體顏色的過程。在這個場景下，繪制了多個紋理且有重疊的地方，假設(shè)先繪制紋理 C ，然后再繪制紋理 D ，那么紋理 D 就是源顏色（source color）， 紋理 C 就是目標(biāo)顏色（destination color）。

想要使用該功能，首先要開啟：

gl.enable(gl.BLEND);

然后指定混合的方式有：

• blendEquation
• blendEquationSeparate
• blendFunc
• blendFuncSeparate

blendEquation

void blendEquation(enum mode)

mode 取值有：

• FUNC_ADD : 源顏色分量與目標(biāo)顏色分量相加。
• FUNC_SUBTRACT : 源顏色分量減去目標(biāo)顏色分量。
• FUNC_REVERSE_SUBTRACT : 目標(biāo)顏色分量減去源顏色分量。

這個方法只指定了混合的方式，如果要看到最終的效果，需要跟 blendFunc 或 blendFuncSeparate 方法配合一起使用?？纯催@篇文章最下面的偽代碼邏輯會加深理解。

這是示例。

blendEquationSeparate

void blendEquationSeparate(enum modeRGB, enum modeAlpha)

這個方法的兩個參數(shù)取值與 blendEquation 方法參數(shù)取值一樣，區(qū)別是把顏色分成了 RGB 和 A 單獨(dú)的兩部分。

blendFunc

void blendFunc(enum sfactor, enum dfactor);

• sfactor : 常量，源顏色在混合顏色中的權(quán)重因子，比 dfactor 多一個值 SRC_ALPHA_SATURATE 。
• dfactor : 常量，目標(biāo)顏色在混合顏色中的權(quán)重因子。

混合顏色的計(jì)算方法是：

混合后顏色 = 源顏色 * sfactor + 目標(biāo)顏色 * dfactor

這里計(jì)算針對的是每個顏色分量，下面設(shè)定 S 代碼源顏色，D 代表目標(biāo)顏色，各個分量用小寫 rgba 表示，下面看看權(quán)重因子部分常量取值：

還有可以配合方法 blendColor(red, green, blue, alpha) 的常量取值：

如果不使用 blendColor 指定分量，也是可以使用這些常量，因?yàn)橛心J(rèn)值：

gl.getParameter(gl.BLEND_COLOR) // 默認(rèn)對應(yīng)分量都是 0

關(guān)于第一個參數(shù)多的取值 SRC_ALPHA_SATURATE ：

下面這些是示例：

• 沒有使用 blendColor 方法的示例。
• 配合使用 blendColor 方法的示例。

blendFuncSeparate

void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)

這個方法參數(shù)取值與 blendFunc 方法參數(shù)取值一樣，區(qū)別是把顏色分成了 RGB 和 A 單獨(dú)的兩部分。

Back to top

參考資料

WebGL繪制詳解之七：Blend

Texture Maps

Texture Mapping Using Images

WebGL and Alpha

Transparency (and Alpha Blending)

WEBGL, BLENDING, AND WHY YOU'RE PROBABLY DOING IT WRONG

到此這篇關(guān)于JavaScript WebGL 圖片透明處理的文章就介紹到這了,更多相關(guān)js圖片透明處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！