WebGL 顯示的文字變模糊

2021-09-30 16:21:46 字數 1488 閱讀 1607

最近做 webgl 時遇到乙個問題,顯示的文字比 canvas 中要模糊,問題情況如下:

canvas 裡的字型如圖:

從 canvas 畫到幀緩衝中:

再從幀緩衝畫到螢幕:

最後定位到問題在混合模式那裡。有問題的混合模式設定為:

gl.blendfunc(gl.src_alpha, gl.one_minus_src_alpha);
正確的混合模式應該是(也就是預設的混合模式):

gl.blendfuncseparate(gl.src_alpha, gl.one_minus_src_alpha, gl.one, gl.one_minus_src_alpha);
具體原因如下:

如果使用 gl.blendfunc(gl.src_alpha, gl.one_minus_src_alpha);

如果我有乙個透明的顏色,比如 (0,0,0,0.5),要疊加上去應該就是:

src 顏色為 (0,0,0,0.5),如果什麼都不做,底層的顏色為 (0,0,0,0),也就是 dst 顏色。

那麼採用上面的疊加公式:

r = srcr * srca + dstr * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

g = srcg * srca+ dstg * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

b = srcb * srcb + dstb * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

a = srca * srca + dsta * (1 - srca) = 0.5 * 0.5 + 0 * (1 - 0.5) = 0.25

那麼得到的顏色就為 (0,0,0,0.25) 比原來的顏色 (0,0,0,0.5) 要淡了,如果再作一次疊加就成了 (0,0,0,0.125),顏色更淡了,字型的邊緣是有半透明色的,所以那部分會越來越淡。

但是如果使用 blendspeparate(gl.src_alpha, gl.one_minus_src_alpha, gl.one, gl.one_minus_src_alpha);

那麼 src 為 (0,0,0,0.5),同樣 dst 也為 (0,0,0,0)

採用上面的疊加公式:

r = srcr * srca + dstr * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

g = srcg * srca+ dstg * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

b = srcb * srcb + dstb * (1 - srca) = 0 * 0.5 + 0 * (1 - 0.5) = 0

a = srca * 1 + dsta * (1 - srca) = 0.5 * 1 + 0 * (1 - 0.5) = 0.5

所以得到的顏色還是 (0,0,0,0.5),不管畫幾次顏色都保持原樣。

基於webgl的高斯模糊

模糊有很多種,這裡說高斯模糊,高斯模糊會給人一種毛玻璃的感覺.以上三圖分別為原圖,高斯半徑為1.5,高斯半徑4.5 高斯模糊怎麼模糊呢?主要取決於乙個函式 高斯函式,或者正態分佈 對於乙個點,要對他進行模糊,就要選取周圍的點的顏色值,然後將周圍的點按權值相加,就得到了模糊後的點的顏色,而這個權值,就...

文字顯示變數 Bash程式設計入門 2 Bash變數

bash提供了某些類似於c語言那樣的程式設計語法,從而允許你用程式設計的方式,來組合使用linux系統。bash中的變數分為自定義變數,環境變數,位置變數和其他變數。bash中的自定義變數只能儲存文字,即變數型別只能是字串。1 自定義變數命名規則 2 變數賦值 bash和c類似,同樣用 來表示賦值。...

文字的顯示效果

public static string areatexthtmlencode string encodestring 標題及提示及areatext的字元編碼方式跟桌面程式的編碼方式是一樣的,其它,特別是換行空格在html中編碼方式也是一樣的,只是html無法顯示給用記看,其原碼還是跟記事本文件差不...