8

これは、プログラムで四角形を描画するために使用するコードです。

glBegin(GL_QUADS);
    glTexCoord2f(0.0f, maxTexCoordHeight);              glVertex2i(pos.x, pos.y + height);
    glTexCoord2f(0.0f, 0.0f);                           glVertex2i(pos.x, pos.y);
    glTexCoord2f(maxTexCoordWidth, 0.0f);               glVertex2i(pos.x + width, pos.y);
    glTexCoord2f(maxTexCoordWidth, maxTexCoordHeight);  glVertex2i(pos.x + width, pos.y + height);
glEnd();

たとえば、次のように、指定されたテクスチャを持つ単純な長方形を描画します。ここに画像の説明を入力

OpenGL で次のような境界効果を実現できるかどうかお尋ねしたいと思います。

ご覧のように、このタイルの内側には単純な青色の背景があり、個別に処理できます - テクスチャのサイズが自動的に変更されるだけです。これは、私が提供したコード スニペットで簡単に実現できますが、問題は境界線にあります。

GL_LINES境界線が 1 つの色であると想定されている場合、テクスチャの周りを使用して空の塗りつぶされていない長方形を描画することもできますが、そうではありません。

また、タイルが常に固定サイズであれば、それに合わせたテクスチャを用意できますが、テクスチャとして使用するビットマップ ファイルを変更せずに簡単にサイズ変更できる必要があります。

したがって、基本的な OpenGL 関数では不可能な場合、最も効率的かつ/または簡単なこの効果を達成するためのアプローチは何ですか?

編集: 2D である必要があります。

4

2 に答える 2

5

これは、OpenGL を使用した GUI の古典的な問題であり、多くの場合、9 セル パターンを使用して解決されます。ここでは、元の画像に効果を追加 (または他の opengl パラメーターで定義) し、レンダリングされたクワッドを 3 つの行と 3 つの列の 9 つのクワッドに分割します。

次に、上下の行の高さを固定し、左右の列の幅を固定します。中央のクワッドは、オブジェクトが収まる四角形に収まるようにスケーリングされます。次に、テクスチャの境界部分のみを外側のセルを形成するクワッドにマップし、テクスチャの中心を中央のクワッドにマップします。

コメントで言われたことに関連して、クワッドを 3D にすることで実際の 3D 効果を使用することもできます。その場合、透視投影の使用を強制する人は誰もいません。直交投影 (2D モード) を使用することができます。とにかく、OpenGL は常に 3D 計算を行います。

于 2012-12-12T14:10:16.230 に答える
1

優れたジョナスの答えは別として、さらに2つのオプションを追加したいと思います。
1 つ目は、テクスチャを目的の正方形のように見せることです。Photoshop でできるのであれば、手の込んだコードは必要ありません ;)。
2 つ目は、描画コードを少し複雑にすることです。画像を見ると、正方形のすべての「傾斜角」が 2 つの三角形で描画できることがわかります。コードで 1 つの正方形ではなく 10 個の三角形を描画し、2 つの三角形のグループごとに異なる色を使用することができます。 

draw() {
    GLFloat i = <your_inset_here>;

    //top border part, top left triangle
    glColor3f(<color_0>);
    glVertex2f(pos.x, pos.y);
    glVertex2f(pos.x + w, pos.y);
    glVertex2f(pos.x + i, pos.y + i);
    //top border part, bottom right triangle
    glVertex2f(pos.x + w, pos.y);
    glVertex2f(pos.x + w - i, pos.y + i);
    glVertex2f(pos.x + i, pos.y + i);

    //repeat this process with the other coordinates for the other three borders

    // draw the middle square using {(pos.x+i,pos.y+i),(pos.x+w-i,pos.y+i),(pos.x+w-i,pos.y+h-i),(pos.x+i,pos.y+h-i)} as coordinates
}

これをさらに改善するには、指定された座標と色を使用して不規則な形状のクワッドを描画し、その関数を 5 回呼び出す関数を作成します。

于 2015-12-04T15:52:58.330 に答える