欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?WebGL?圖片透明處理的方式

 更新時(shí)間：2022年01月17日 09:21:38   作者：XXHolic  
WebGL 透明處理方式之一是使用 α 混合，這篇文章主要介紹了JavaScript?WebGL?圖片透明處理方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

 引子

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

關(guān)于透明

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

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

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

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

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

 α 混合

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

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

gl.enable(gl.BLEND);

然后指定混合的方式有：

blendEquation

void blendEquation(enum mode)

mode 取值有：

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

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

這是示例。

blendEquationSeparate

void blendEquationSeparate(enum modeRGB, enum modeAlpha)

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

blendFunc

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

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

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

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

常量R 分量G 分量B 分量A 分量
ZERO0000
ONE1111
SRC_COLORS.rS.gS.bS.a
ONE_MINUS_SRC_COLOR(1-S.r)(1-S.g)(1-S.b)(1-S.a)
DST_COLORD.rD.gD.bD.a
ONE_MINUS_DST_COLOR(1-D.r)(1-D.g)(1-D.b)(1-D.a)
SRC_ALPHAS.aS.aS.aS.a
ONE_MINUS_SRC_ALPHA(1-S.a)(1-S.a)(1-S.a)(1-S.a)
DST_ALPHAD.aD.aD.aD.a
ONE_MINUS_DST_ALPHA(1-D.a)(1-D.a)(1-D.a)(1-D.a)

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

常量R 分量G 分量B 分量A 分量
CONSTANT_COLORredgreenbluealpha
ONE_MINUS_CONSTANT_COLOR(1-red)(1-green)(1-blue)(1-alpha)
CONSTANT_ALPHAalphaalphaalphaalpha
ONE_MINUS_CONSTANT_ALPHA(1-alpha)(1-alpha)(1-alpha)(1-alpha)

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

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

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

常量R 分量G 分量B 分量A 分量
SRC_ALPHA_SATURATEmin(S.a, 1-D.a)min(S.a, 1-D.a)min(S.a, 1-D.a)1

下面這些是示例：

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

blendFuncSeparate

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

這個(gè)方法參數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JavaScript表格常用操作方法匯總

    JavaScript表格常用操作方法匯總

    這篇文章主要介紹了JavaScript表格常用操作方法,實(shí)例匯總了javascript中表格操作的創(chuàng)建、添加、刪除、遍歷等常用操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • 讓iframe子窗體取父窗體地址欄參數(shù)(querystring)

    讓iframe子窗體取父窗體地址欄參數(shù)(querystring)

    突然用到，記錄一下，對(duì)地址欄字符串用正則處理最好，有時(shí)間研究一下。 主要是思路。
    2009-10-10
  • JS實(shí)現(xiàn)圖片拖拽交換效果

    JS實(shí)現(xiàn)圖片拖拽交換效果

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片拖拽交換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除

    JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除

    HTML頁(yè)面元素可以通過(guò)js動(dòng)態(tài)改變，比如可以向HTML中添加元素或刪除某個(gè)元素，下面為示例代碼，感興趣的朋友不要錯(cuò)過(guò)
    2014-08-08
  • ES6字符串的擴(kuò)展實(shí)例

    ES6字符串的擴(kuò)展實(shí)例

    這篇文章主要介紹了ES6字符串的擴(kuò)展實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例

    js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例

    下面小編就為大家?guī)?lái)一篇js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • js實(shí)現(xiàn)添加刪除表格操作

    js實(shí)現(xiàn)添加刪除表格操作

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)添加刪除表格操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • 超鏈接怎么正確調(diào)用javascript函數(shù)

    超鏈接怎么正確調(diào)用javascript函數(shù)

    本文介紹使用超鏈接調(diào)用javasript函數(shù)且不會(huì)影響GIF圖片動(dòng)畫的方法，有遇到相同問(wèn)題的小伙伴可以參考一下。
    2016-05-05
  • 微信小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒的app.js寫法

    微信小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒的app.js寫法

    這篇文章主要介紹了小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒的app.js寫法, 本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的借鑒價(jià)值，需要的朋友可以參考下
    2019-05-05
  • js中bool值的轉(zhuǎn)換及“&&”、“||”、 “!!”詳解

    js中bool值的轉(zhuǎn)換及“&&”、“||”、 “!!”詳解

    這篇文章主要給大家介紹了關(guān)于js中bool值的轉(zhuǎn)換方法以及"&&" 、"||"、 "!!"的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來(lái)一起看看吧。
    2017-12-12

最新評(píng)論