基於webgl的高斯模糊

2021-10-12 10:39:39 字數 1425 閱讀 1137

模糊有很多種,這裡說高斯模糊,高斯模糊會給人一種毛玻璃的感覺.

以上三圖分別為原圖,高斯半徑為1.5,高斯半徑4.5

高斯模糊怎麼模糊呢?

主要取決於乙個函式:高斯函式,或者正態分佈;

對於乙個點,要對他進行模糊,就要選取周圍的點的顏色值,然後將周圍的點按權值相加,就得到了模糊後的點的顏色,

而這個權值,就是按照高斯函式來選取

下面的是乙個高斯函式在(-1,-1)(-1,0).....這些點上的值

0.0453

0.0566

0.0453

0.0566

0.0707

0.0566

0.0453

0.0566

0.0453

這裡,他的總和不是1,需要將每個位置的值除以總和,

得到下面的權重矩陣

0.0947

0.1183

0.0947

0.1183

0.1477

0.1183

0.0947

0.1183

0.0947

我們可以用js算出權重矩陣,然後傳到著色器中

在片元著色器裡,設定uniform float u_gaussrect[1020];

用來接收權重矩陣,然後接受陣列大小.

權重矩陣怎麼儲存在陣列裡呢

我是儲存為以下格式

[x偏移,y偏移,權重,x偏移,y偏移,權重,x偏移,y偏移,權重,.....]

比如上面的矩陣

[-1,-1,0.0947,-1,0,0.1183,.....]

for(int i=0;i<1020;i++){

if(i陣列定義了1020個,我們還需要使用u_gaussnum來保證迴圈次數少於矩陣的大小

為什麼不是在for迴圈中的條件判斷,因為gl不能這樣做,光柵化的時候,迴圈是需要被進行內聯展開(網上沒搜到多少說明,我想的是估計像光柵化一樣的吧)的,這樣就必須確保迴圈的次數是一定的,

這裡使用取色器選取的位置還需要×一定的dv,dv是偏移,如果沒有偏移,選區的周圍的點就會離中心點太近,產生不了效果

高斯模糊的實現

今天設計提出來乙個需求,第一耳聽到時,我就蒙逼了。她說 這個頭像的背景你就用使用者頭像的圖示高斯模糊100 黑色的蒙層30 的不透明 後來經過我的不懈努力,在網上找到了完美的解決方案,驚奇的發現,所謂高大上的高斯模糊又稱為 毛玻璃效果 說毛玻璃效果就很easy了,網上一搜一大把的實現方式,結果都是使...

高斯模糊 理論

高斯分布函式可表示為乙個一維的函式g x 或者乙個二維的函式g x,y 在這些函式中,x和y代表了相對於原始中心點 center tap 畫素的偏移 pixel offsets 值。也就是說,他們距離中心多少畫素。這裡的center tap,通常翻譯為 中心抽頭 它在電學中的概念是 在整個次級線圈的...

android高斯模糊

高斯模糊演算法介紹 高斯模糊就是將指定畫素變換為其與周邊畫素加權平均後的值,權重就是高斯分布函式計算出來的值。演算法介紹 一 通過自身的寫演算法 public static void gaussblur int data,int width,int height,int radius,float s...