OpenGL Shader 多種形狀SDF混合實現

2022-09-20 15:27:10 字數 2015 閱讀 3710

了解過如何繪製形狀方法,在此之前也只介紹單個形狀繪製,沒有使用多個形狀綜合繪製。這裡繼續介紹繪製多種形狀綜合繪製的方法,一種能夠方便結合多個形狀繪製的方法形式。

mix函式之前有所了解作為混合功能對於後續形狀渲染場景中有重要作用。mix函式是在兩個值之間線性插值。在之前使用最廣泛的應用場景就是兩個紋理混合以及濾鏡等效果,但其實mix函式也能作為漸變函式來使用。

如下**中使用mix函式獲取到x軸每個畫素插值得到乙個從[0,1]的漸變過程,成像上就是從黑色向著白色過渡的效果了。

可以利用mix函式漸變形式來建立顏色漸變效果就能定製diy專屬背景色了。

mix函式入參是向量物件時將座標作為分量基礎對每個向量進行插值。

接下來介紹如何使用2d sdf繪製形狀,例如圓形和方形。在此之前繪製形狀函式都是以vec3向量返回。但是採用sdf形式返回是乙個浮點數。sdf(signed distance fields)意思是有符號距離場,因此返回值是乙個浮點數型別的距離。尤其是在2d sdf當中返回值通常是0或者1表示距離是在形狀內部還是外部。

一般而言距離位置是相對某乙個點來決定的,通常是形狀的中心點位置。在之前繪製形狀中介紹過當距離大於0表示該距離在圓外,若距離剛好等於距離則表示距離正好在圓的邊緣上。

原先採用繪製圓函式方法如下:

vec3 sdfcircle(vec2 uv,float r)

但是該方法存在乙個問題就是繪製圓時必須定義個乙個繪製圓的顏色和外部顏色。但對於開發者來說這樣的方法似乎過於侷限,若是能夠將繪製外部顏色和形狀顏色互相獨立解耦化才是理想方法。這樣也就能夠在繪製場景中繪製不同顏色的形狀和不同顏色的背景了。

從效果上可以看到實現了背景和形狀繪製以及顏色繪製分離,在mix函式中vec3(0., 0., 1.)作為圓形的顏色,step函式判斷是否在圓內。

// 方形

float square = sdfsquare(center, 0.1, vec2(0.2));

//混合結果

然後再新增方形繪製方法,在原先mix函式下再次mix乙個方形就能夠實現多個影象混合了。

在此就學習到了如何使用mix函式實現漸變色效果,同時利用mix以及sdf方法實現了多種形狀同時繪製的能力。當然形狀影象還有其他許多例如星星愛心等都是可以去通過sdf形式實現完成的。

OpenGL shader 中關於頂點座標值的思考

今天工作中需要做乙個事情 在shader內部做一些空間距離上的計算,而且需要對所有的點進行計算,符合條件的顯示,不符合條件的點不顯示。思路很簡單,在vertex shader內知道頂點座標,進行計算,算好以後判斷是否需要顯示,例如設定alpha值,那麼再將alpha值傳給fragment shade...

判斷點在多邊形內的多種寫法

再經典不過的演算法了 功能 判斷點是否在多邊形內 方法 求解通過該點的水平線與多邊形各邊的交點 結論 單邊交點為奇數,成立 引數 point p 指定的某個點 lppoint ptpolygon 多邊形的各個頂點座標 首末點可以不一致 int ncount 多邊形定點的個數 bool ptinpol...

判斷點在多邊形內的多種寫法

再經典不過的演算法了 功能 判斷點是否在多邊形內 方法 求解通過該點的水平線與多邊形各邊的交點 結論 單邊交點為奇數,成立 引數 point p 指定的某個點 lppoint ptpolygon 多邊形的各個頂點座標 首末點可以不一致 int ncount 多邊形定點的個數 bool ptinpol...