math - 正しい glsl アフィン テクスチャ マッピング

Question

GLSL で正しい 2D アフィン テクスチャ マッピングをコーディングしようとしています。

説明：

...この画像のどれも私の目的には正しくありません。右 (ラベルが正しい) には、私が望まない遠近法補正があります。だからこれ：Qテクスチャ座標ソリューションを（さらに改善することなく）知ることは、私が探しているものではありません。

次のように、四角形の内側のテクスチャを単純に「ストレッチ」したいと思います。

しかし、2 つの三角形から構成されます。アドバイス (GLSL) をお願いします。

Answer 1

これは、台形があり、その平行なエッジがローカル軸の 1 つに揃えられている限りうまく機能します。Unity パッケージをいじってみることをお勧めします。

GLSL:

varying vec2 shiftedPosition, width_height;

#ifdef VERTEX
void main() {
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    shiftedPosition = gl_MultiTexCoord0.xy; // left and bottom edges zeroed.
    width_height = gl_MultiTexCoord1.xy;
}
#endif

#ifdef FRAGMENT
uniform sampler2D _MainTex;
void main() {
    gl_FragColor = texture2D(_MainTex, shiftedPosition / width_height);
}
#endif

C#:

// Zero out the left and bottom edges, 
// leaving a right trapezoid with two sides on the axes and a vertex at the origin.
var shiftedPositions = new Vector2[] {
    Vector2.zero,
    new Vector2(0, vertices[1].y - vertices[0].y),
    new Vector2(vertices[2].x - vertices[1].x, vertices[2].y - vertices[3].y),
    new Vector2(vertices[3].x - vertices[0].x, 0)
};
mesh.uv = shiftedPositions;

var widths_heights = new Vector2[4];
widths_heights[0].x = widths_heights[3].x = shiftedPositions[3].x;
widths_heights[1].x = widths_heights[2].x = shiftedPositions[2].x;
widths_heights[0].y = widths_heights[1].y = shiftedPositions[1].y;
widths_heights[2].y = widths_heights[3].y = shiftedPositions[2].y;
mesh.uv2 = widths_heights;

Answer 2

テセレーションはこの問題を解決します。四角形の頂点を分割すると、ピクセルを補間するためのヒントが追加されます。

このリンクをチェックしてください。 https://www.youtube.com/watch?v=8TleepxIORU&feature=youtu.be

Answer 3

答えてくれてありがとう、しかし実験した後、私は解決策を見つけました。

左側の 2 つの三角形はこれに従って uv (strq) を持ち、右側の 2 つの三角形はこの遠近補正の修正版です。

数字とシェーダー:

tri1 = [Vec2(-0.5, -1), Vec2(0.5, -1), Vec2(1, 1)]
tri2 = [Vec2(-0.5, -1), Vec2(1, 1), Vec2(-1, 1)]

d1 = length of top edge = 2
d2 = length of bottom edge = 1

tri1_uv = [Vec4(0, 0, 0, d2 / d1), Vec4(d2 / d1, 0, 0, d2 / d1), Vec4(1, 1, 0, 1)]
tri2_uv = [Vec4(0, 0, 0, d2 / d1), Vec4(1, 1, 0, 1), Vec4(0, 1, 0, 1)]

この glsl シェーダーを使用して直角三角形のみがレンダリングされます (左側は固定パイプラインです)。

void main()
{
    gl_FragColor = texture2D(colormap, vec2(gl_TexCoord[0].x / glTexCoord[0].w, gl_TexCoord[0].y);
}

つまり、U のみがパースペクティブで、V はリニアです。