opengl - OpenGL3.2 GLSL ブロック補間

Question

素敵なグラデーション効果が欲しいです。しかし、その瞬間は本当に斑状で、2 つの三角形の間に模様が見えます。次のシェーダー vert と frag があります。私が考えられる唯一のことは、事前に生成されたテクスチャに交換することです。

データは 2 つの三角形の float [xy][RGB] としてバフされています。C++ ソースを表示する価値はないと思います。

VERT #バージョン 330

layout(location = 0) in vec2 position;    
layout(location = 1) in vec3 incolor;

smooth out vec3 color;

void main()
{
    color = incolor;
    gl_Position = vec4(position.x,position.y,0.0,1.0);  
}

FRAG #バージョン 330

smooth out vec4 outputColor;
smooth in vec3 color;

void main()
{
    outputColor  = vec4(vec3(color),1.0);   
}

結果

単一の三角形を見ると、ブロック性が示されます

Answer 1

これは、 quadの属性の線形補間の正しい動作です。四角形は常に 2 つの三角形としてレンダリングされることに注意してください。これには 2 つの可能性があります。対角線または対角線を共通のエッジとして使用します。属性の補間方法があいまいになります (両方のケースで異なります)。\/

あなたの例に似た例を紹介します。

\三角形は対角線で区切られています。

/三角形は対角線で区切られています。

どちらの場合も、頂点の色は次のとおりです。

000000  top left
3B3B3B  top right + bottom left
FFFFFF  bottom right

解決策は、明確な補間色になる属性値 (色) のみを提供することです。これは、次の場合です。

左上隅から右下隅までの線を考えてみましょう (これらを基本色が割り当てられた基本頂点と呼びましょう)。左上隅の値は0、右下隅の値は1です。他のすべての頂点 (この場合は左下、右上) は、この仮想線に直交するように投影する必要があり、対応する値がこの頂点に割り当てられます。この場合 (正方形)、他の 2 つの角には.5それぞれの値があります。これらの角の色は、計算された値に対応するアルファ値を持つ 2 つの基本色の混合値でなければなりません。

上記の例では、両方の画像を同じように見せるために、他の 2 つのコーナーの色を にする必要がありまし808080た。3B3B3B

あなたの場合、頂点に次の色を使用します (少なくとも、スクリーンショットではそのように表示されます)。

000000  top left
3A3A3A  top right + bottom left
595959  bottom right

3A3A3Aしたがって、他の2つの間の平均値ではないため、上記の要件を満たしていません。

---

.5わずかに異なる例は、混合アルファ値 (他の 2 つの頂点の平均値になります)だけを使用したくない理由を示しています。この四角形のように、灰色.5に対応する他の 2 つの角の値を使用する非正方形の四角形を考えてみましょう。808080

ご覧のとおり、グラデーションの方向は、2 つの「ベース コーナー」の間の接続線 (左上 - 右下) とは直交していません。それでは、上記のメソッドが生成するものを見てみましょう。

これは、2 つのコーナーの間の線形グラデーションのように見えますが、「テクスチャ空間」ではなく「ワールド空間」にあります。2 つの出力のうちの 1 つを他の出力よりも好む場合があります。違いを見せたかった。接続線 (正射影) 上の値は次のようになります (これらは近似値です!)

_{下手な画像ですみません(;_;)}