使用幾何著色器來實現繪製模型輪廓線

2021-06-17 23:32:18 字數 1043 閱讀 9983

我們經常要實現繪製模型輪廓線的效果,這一節就介紹使用幾何著色器來實現這個效果。

這一節的介紹是參考philip rideout 

部落格,下一節我會介紹這個部落格複雜一點的效果實現步驟。

幾何著色器最重要的乙個特性就是我們可以獲得當前圖元的相鄰頂點資訊,以下為例:

其中的實線代表當前三角形本身的頂點,其中的虛線代表相鄰的頂點資訊。因此我們根據相鄰點資訊來判斷當前線段是否處於輪廓線。

下面介紹根據三個點來求得法線,主要思想就是根據這三個頂點,計算兩個向量,接著根據這兩個向量法向量:

而其中的nz就可以用來判斷是否在正面的依據。

1. 判斷當前面是否是正面(背面剔除不做處理)。如果是,轉2.

2. 根據相鄰面判斷是否處於背面,如果是,轉3;

3. 當前線段是輪廓,繪製輪廓線(可以通過控制直線寬度);

4. 繪製當前處理的三角形。

5. 在片段著色器中根據是否是輪廓線做判斷,如果是輪廓線,則用直線顏色代替,否則使用**渲染來決定當前片段的顏色。

計算出在相機空間中的頂點和法向量。片段**:

1. 判斷法線是否處於正面:

2. 計算輪廓線

3. 設定當前圖元頂點資訊

渲染效果圖:

一 WebGL 著色器和繪製

var vshader source void main 型別和變數名字 var fshader source void main param mode 繪製模式 gl.points,gl.lines,gl.line strip,gl.line loop param first 從哪個點開始繪製 p...

幾何著色器(一) 基本概念

最近想做一些渲染的東西,接觸到了幾何著色器,發現了幾何著色器的強大之處,幾何著色器位於頂點和片元著色器之間,幾何著色器能夠產生0個以上的基礎圖元,它能起到一定的裁剪作用 同時也能產生比頂點著色器輸入更多的基礎圖元。它可以做的事情非常的酷炫,例如 表面法線的視覺化和實現三維物體的 效果。基本知識 輸入...

DX12 混合和幾何著色器

第十章及第十二章 混合兩步即可實現 首先建立乙個pipeline stage d3d12 graphics pipeline state desc transparentpsodesc opaquepsodesc d3d12 render target blend desc transparency...