使用片段着色器在2d多邊形上繪制邊框

Question

我有一些簡單的多邊形（少於20個頂點）在一個簡單的xy平面上渲染平面，使用GL_TRIANGLES和一個平面顏色，一個2d模擬。

我想為這些多邊形添加可變厚度和不同顏色的邊框。 我有一些使用相同頂點和glLineWidth / GL_LINE_LOOP實現的東西，它起作用，但是是另一個渲染過程並重復所有頂點變換。

我想我應該能夠使用gl_FragCoord和頂點數據和/或紋理坐標在片段着色器中完成此操作，但我不確定，我的天真嘗試顯然是不正確的。

我想象下面的東西。

uniform vec2 scale;  // viewport h/w
uniform float line_width;
uniform vec4 fill_color;
uniform vec4 border_color;

varying vec4 vertex; // in world coords

void main()
{
    if (distance_from_edge(gl_FragCoord, vertex, scale) < line_width)
    {
        // we're close to the edge the polygon, so we're the border.
        gl_FragColor = border_color;
    }
    else
    {
        gl_FragColor = fill_color;
    }
}

我想弄清楚的部分是distance_from_edge函數 - 如何計算？ 使用gl_FragCoord是錯誤的方法 - 我應該使用某種紋理映射嗎？

作為一個實驗，我嘗試用縮放將頂點轉換為像素空間，然后以像素為單位計算它與gl_FragCoord之間的距離，但這會產生我並不真正理解的奇怪結果。 另外我需要到邊緣的距離，而不是頂點，但我不知道如何得到它。

有任何想法嗎？

編輯：根據尼科爾的回應，我的問題變成：

假設我有一個三角形，其中3個角頂點標記為邊緣頂點，並且中間的一個頂點標記為非邊緣（因此總共渲染了3個三角形），那么如何在片段着色器中插值以繪制給定邊框厚度？ 我假設我將邊緣標志傳遞給片段着色器，以及所需的線條粗細，並進行一些插值計算以計算邊緣與非邊緣頂點之間的距離，並將顏色閾值設置為適當的邊界/填充？

Answer 1

所有你需要的是重心坐標，因為你正在處理三角形。 為三角形的每個頂點分配一個標識，然后使用硬件在頂點和片段階段之間的內置插值來計算片段着色器中每個頂點的相對距離。

您可以將每個頂點的重心坐標視為距相對邊緣的距離。 在下圖中，頂點P0的相對邊是e1，它的距離用h1表示; 其重心坐標<0.0, h1, 0.0> 。 當在光柵化期間生成片段時，GPU可以在內部使用此坐標空間來插入三角形的頂點屬性，它可以基於三角形內的位置快速加工每頂點屬性。

下面是兩個教程，解釋了如何執行此操作，通常這用於渲染線框覆蓋，以便您可以更好地搜索它。 出於您的目的，由於這實際上是線框渲染的特化（除了您想要拋出不屬於外部多邊形邊的線），您還需要識別邊緣頂點並執行其他處理。

例如，如果頂點不是外邊緣的一部分，那么你需要為它分配一個像<1,100,0>和連接頂點<0,100,1>之類的重心坐標，並忽略內邊緣（假設它是一個與指定<0,1,0>的頂點相對的邊，如下圖所示。 這個想法是你永遠不希望沿着這個邊緣的點插值到0.0附近的任何位置（或者你用來將一個片段作為邊界的一部分着色的任何閾值），使它與三角形的中心相距極遠。相反的頂點將解決這個問題。

沒有幾何着色器（OpenGL ES友好）：

這是一個解釋如何執行此操作的鏈接，如果您能夠修改頂點數據以保持重心坐標。 它具有更高的存儲和預處理要求（特別是，相鄰邊緣之間的頂點共享可能不再可能，因為您需要每個三角形由三個頂點組成，每個頂點具有不同的輸入重心坐標 - 這就是為什么幾何着色器是一個理想的解決方案） 但是，它將運行在比需要幾何着色器的更通用解決方案更多的OpenGL ES類硬件上。

https://web.archive.org/web/20190220052115/http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/

OpenGL ES friendly): 使用幾何着色器（ OpenGL ES友好）：

或者，您可以使用幾何着色器在渲染時計算每個三角形的重心坐標，如本教程中所示。 有可能在OpenGL ES中您無法訪問幾何着色器，因此可能會忽略這一點。

http://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_10.html http://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_11.html

這個解決方案的理論基礎可以在這里找到（由Internet Archive Wayback Machine提供）：

http://web.archive.org/web/ * / http://cgg-journal.com/2008-2/06/index.html