最近做 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無法顯示給用記看,其原碼還是跟記事本文件差不...