2013-02-26 98 views
1

我正在使用cocos2d-x 2.0.4。我通過這兩個圖像來說明我正在嘗試做什麼。OpenGL - 在紋理多邊形上創建邊框

convex_poly http://img542.imageshack.us/img542/2554/convexpoly.png convex_poly_with_border http://img40.imageshack.us/img40/8007/convexpolywithborder.png

我想要做的就是它產生模糊的邊界或邊框有梯度編程。我有兩個想法來做到這一點,但我不確定這是否是正確的做法。第一種解決方案是對僅包含模糊顏色的多邊形進行三角測量(在這種情況下爲帶有孔的凹多邊形)並在其上使用漸變渲染顏色,多邊形外側的頂點將爲全頂點並且在內零點上-α。插值可以完成漸變的工作。 第二種解決方案是在着色器內部完成它。我需要的只是計算一個像素與多邊形最近邊緣之間的距離。然後,在一定的閾值下,我會根據距離(最短的距離,最大的alpha值)來影響具有某個alpha值的像素白色。

無論如何,我對openGL的東西很陌生,恐怕第二種解決方案最終會有很大的處理時間,因爲我必須計算多邊形每個像素的距離。你對這個傢伙有什麼看法?任何想法都傾向於證實我的猜測,或者我完全錯了嗎?

編輯: 我最終選擇的解決方案是使用多邊形中每個角度(易於計算3個連續頂點)的平分線,並在該平分線上取一個點,該點將成爲內部多邊形的頂點。然後我使用外部多邊形頂點或內部多邊形頂點來構建一個可以適合GL_TRIANGLE_STRIP參數的頂點數組。我把下面的圖片理解得更好。

expl http://img571.imageshack.us/img571/892/convexpolyexplanation.png

+0

只是一般的評論,但你需要考慮在三角形的方面,而不是任意多邊形。 – JasonD 2013-02-26 15:15:15

回答

2

將邊緣照明着色器你想要做什麼?對於GLSL邊緣照明着色器Link to an example

示例代碼:

const float rimStart = 0.5f; 
const float rimEnd = 1.0f; 
const float rimMultiplier = 0.0f; 
vec3 rimColor = vec3(1.0f, 1.0f, 1.0f); 

float NormalToCam = 1.0 - dot(normalize(outNormal), normalize(camPos - vertexWorldPos.xyz)); 
float rim = smoothstep(rimStart, rimEnd, NormalToCam) * rimMultiplier; 

outColor.rgb += (rimColor * rim); 
+0

真的很有意思,我會看看那個;) – olma 2013-02-27 10:05:35

+0

我在2D項目上工作,所以沒有深度的這個概念,我猜NormalToCam浮點值在我的情況下是沒有意義的。我爲未來的3D項目保留它;) – olma 2013-02-27 10:14:10

+0

那麼,你仍然有一個深度的概念!所有事情恰好分享相同的深度。我想知道是否可以沿着與攝像機垂直的poly點的外側製作法線,並在與攝像機平行的內側點上進行法線。這可能會使它對你有用。無論哪種方式,我懷疑技術可以以某種方式適應。 – MrLeap 2013-02-27 17:46:18

1

爲了使這一下直接從任何角度看三維場景中,您將需要執行一些剪影。這基本上涉及使用幾何着色器來確定對象的邊緣具有面向屏幕的相鄰面和不面向屏幕的相鄰面。我相信這可以通過測試一個相鄰的臉部法線和您的相機方向之間的點積是否爲< = 0,而另一個相鄰臉部法線和您的相機方向的點積是否大於0來實現。

一旦您知道所有以某個角度勾畫多邊形的邊緣,可以將由該邊框定義的多邊形鑲嵌到三角形條帶中(仍然保留在幾何着色器中)。然後,您將每個頂點的顏色傳遞給片段着色器;其中位於邊界上的所有頂點都以完整的alpha值傳遞邊界顏色,而非邊界點則以零alpha值傳遞顏色。片段着色器將從邊框顏色插入到中間片段的中心alpha顏色,從而爲您提供所需的漸變效果。你的總體方法應該是這樣的:

  1. 繪製具有非邊界着色器程序作爲背景色的對象。
  2. 啓用alpha混合。與剪影節目確定組成的邊界與邊框顏色的邊緣上,和繪圖非邊界點作爲零阿爾法

    glEnable(GL_BLEND); 
    glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA); 
    
  3. 繪圖對象。

  4. glDisable(GL_BLEND); 
    
+0

其實它是一個2D項目,但你的方法確認我的,我認爲這應該工作。 Thx;) – olma 2013-02-27 10:03:14

+0

沒問題!我很習慣在3D頭像中思考我完全忘記了人們使用OpenGL進行二維繪圖。祝你好運! – 2013-02-27 19:57:08