帶有白色輪廓的OpenGL彩色位圖字體

我有一個libgdx遊戲，我想在大綱中使用位圖字體。我希望能夠使用setColor（）設置字體顏色，但是，我總是希望輪廓保持白色。什麼是我實現這個目標的最好方式？我假設我應該使用片段着色器進行所需的顏色處理。帶有白色輪廓的OpenGL彩色位圖字體

我已經創建瞭如下的位圖字體，紅色表示筆畫，綠色表示設置的顏色。

enter image description here

我有點堅持了什麼，我需要然而，在片段着色器做的。我對着色器的經驗和理解是有限的。我當前的着色器看起來像這樣，它基於r正確繪製筆畫。我不確定我應該如何在設置的顏色（v_color）中添加正確的顏色中間字體。紅色：＃FF0000和綠色：

varying vec4 v_color; 
varying vec2 v_texCoords; 
uniform sampler2D u_texture; 

void main() 
{ 
    vec4 textureColour = texture2D(u_texture, v_texCoords); 
    vec4 colour = vec4(textureColour.r, 
       textureColour.r, 
       textureColour.r, 
       textureColour.a); 
    gl_FragColor = vec4(colour.r, colour.g, colour.b, colour.a); 
}

來源

2014-07-26 Will Calderwood

隨着您定義字體圖像的方式，紅色的數量決定了要使用多少輪廓顏色，而綠色的數量決定了要使用多少內部顏色。因此，在對紋理進行採樣後，可以簡單地計算輪廓顏色和內部顏色的加權平均值，採樣紋理的r是輪廓顏色的權重，而g是內部顏色的權重。

着色器中的計算可以進一步簡化，因爲您的輪廓顏色是固定的白色。所以r乘以輪廓顏色僅僅是一個爲所有r矢量它的組成部分：

r * vec4(1.0, 1.0, 1.0, 1.0) = vec4(r, r, r, r) = vec4(r)

使用v_color爲內部的顏色變化，片段着色器會再看看這樣的：

varying vec4 v_color; 
varying vec2 v_texCoords; 
uniform sampler2D u_texture; 

void main() 
{ 
    vec4 texVal = texture2D(u_texture, v_texCoords); 
    gl_FragColor = texVal.g * v_color + texVal.r; 
}

如果紋理的r和g組件對於字母外部的零件爲零，則這將起作用。如果外部不是黑色，但紋理的a組件用於掩蓋它們，則表達式會變得稍微複雜一點：

void main() 
{ 
    vec4 texVal = texture2D(u_texture, v_texCoords); 
    gl_FragColor = vec4(texVal.g * v_color.rgb + texVal.r, texVal.a); 
}

來源

2014-07-26 17:18:47

這似乎並不奏效。它在100％透明的領域進行繪製。如果我在最後添加gl_FragColor.a = texVal.a，它會起作用。我不知道這是否可以更優雅地融合，因爲我對着色器中矢量運算的理解是有限的。 –

啊，好的，你的問題沒有說明你在使用混合。讓我看看我可以如何納入這一點。 –

嗯，我認爲如果字母外部的紋理部分是黑色的，那麼它就會工作。但它聽起來像是alpha = 0的非黑色。 –

Aslong您的紋理顏色由這兩個RGB-顏色由＃00FF00 像他們在你的形象，你可以使用下面的着色器

varying vec4 v_color; 
varying vec2 v_texCoords; 
uniform sampler2D u_texture; 

void main() 
{ 
    vec4 textureColour = texture2D(u_texture, v_texCoords); 
    // normalizing the values 
    float rgsum = textureColour.r + textureColour.g; 
    float pr = textureColour.r/rgsum; 
    float pg = textureColour.g/rgsum; 
    // setting the color of the fragment 
    gl_FragColor = vec4(vec3(1.0) * pr + v_color.rgb * pg, textureColour.a * v_color.a); 
}

哦和btw：非常混淆你的BE和AE的混合物，你應該只使用顏色（~~或顏色~~）。

來源

2014-07-26 12:12:28 TheWhiteLlama

感謝那。如果你能在我的問題的下一步指出我正確的方向，那將會很棒。 http://stackoverflow.com/questions/24972751/whats-causing-the-dark-borders-around-letters-using-opengl –

帶有白色輪廓的OpenGL彩色位圖字體

回答

相關問題