ボーダー、OpenGLの

Question

は、これは私が私のプログラムで矩形を描画するために使用するコードです：

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で可能かどう

私がお願いしたいと思います：このようにあなたは、このタイルの内側に見たよう

別々に処理することができ、単なる青の背景があります - テクスチャのサイズを自動的に変更します。これは私が与えたコードスニペットで簡単に達成できますが、問題は境界線にあります。

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

また、タイルが常に固定サイズの場合は、それに一致するテクスチャを用意できますが、テクスチャとして使用するビットマップファイルを変更しなくても簡単にサイズを変更できます。

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

EDIT：2Dでなければなりません。

Answer 1

これはOpenGLを使用したGUIの古典的な問題で、しばしば9セルのパターンを使用して解決されます。この場合、元のイメージにエフェクトを追加するか（または他のOpenGLパラメータで定義する）、レンダリングされたクワッドを3つの行と3つの列の9つのクワッドに分割します。

次に、左右の列の幅を固定するように、上部と下部の行の高さを固定します。中央の四角形は、オブジェクトがフィットさせたい矩形にフィットするようにスケーリングされます。次に、テクスチャの中央部分を中央クワッドにマッピングしながら、テクスチャの境界部分だけを外側のセルを形成するクワッドにマッピングします。

---

コメントに記載されていることに関連して、クワッド3Dを作成することで実際の3D効果を使用することもできます。この場合、誰もあなたの視点投影を使用するよう強制します。直交射影（2Dモード）を維持できます。とにかくOpenGLは常に3D計算を行います。

Answer 2

ジョナスの答えは優れていますが、私はもう2つのオプションを追加したいと思います。
最初のものは、テクスチャを目的の正方形のように見えるようにすることです。あなたがPhotoshopでそれをすることができるなら、派手なコードは必要ありません;）。
もう1つは、描画コードを少し複雑にすることです。画像を見ると、四角形のすべての「斜面」を2つの三角形で描くことができます。あなたは、あなたのコードは、10個の三角形の代わりに、1平方描き加えると二つの三角形のグループごとに異なる色を使用することができます与える座標を持つ不規則な形状のクワッドを描画するための関数を作成することにより、

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回機能するカラーとコール。