learnopengl。 レッスン1.4-ハロートライアングル

最後のレッスンでは、ウィンドウを開くこととプリミティブなユーザー入力をマスターしました。 このレッスンでは、頂点を画面に表示するすべての基本を分析し、VAO、VBO、EBOなどのOpenGLのすべての機能を使用して、三角形のペアを描画します。
猫の下で興味を持ってください。




OpenGLでは、すべてが3D空間にありますが、同時に画面とウィンドウはピクセルの2Dマトリックスです。 したがって、OpenGLのほとんどの作業は、3D座標を画面にレンダリングするための2D空間に変換することです。 3D座標を2D座標に変換するプロセスは、OpenGLグラフィックパイプラインによって制御されます。 グラフィックパイプラインは2つの大きな部分に分割できます。最初の部分は3D座標を2D座標に変換し、2番目の部分は2D座標をカラーピクセルに変換します。 このレッスンでは、グラフィックパイプラインと、それをプラスとして使用して美しいピクセルを作成する方法を詳細に説明します。

2D座標とピクセルには違いがあります。 2D座標は2D空間内のポイントの非常に正確な表現であり、2Dピクセルは画面/ウィンドウ内のおおよその位置です。

グラフィックパイプラインは一連の3D座標を取得し、画面上の2Dカラーピクセルに変換します。 このグラフィックコンテナは複数の段階に分割でき、各段階では過去の作品からの入力が必要です。 これらのステージはすべて非常に特殊化されており、簡単に並行して実行できます。 並列性のため、最新のGPUの多くは、パイプラインの各段階で多数の小さなプログラムを実行することにより、グラフィックパイプラインデータを迅速に処理するための数千の小さなプロセッサを備えています。 これらの小さなプログラムはシェーダーと呼ばれます 。

これらのシェーダーの一部は開発者がカスタマイズできるため、独自のシェーダーを作成して標準のシェーダーを置き換えることができます。 これにより、パイプラインの特定の場所を微調整する機会がはるかに多くなります。これはまさに、GPUで動作するためCPU時間を節約できるからです。 シェーダーはOpenGLシェーディング言語（GLSL）で記述されており、次のレッスンでさらに掘り下げていきます。

下の画像では、グラフィックスパイプラインのすべての段階のおおよその表現を見ることができます。 青い部分は、独自のシェーダーを指定できるステージを示しています。



ご覧のとおり、グラフィックパイプラインには多数のセクションが含まれており、各セクションでは、完全にレンダリングされたピクセルで頂点データを処理する部分を処理しています。 コンベヤーの各セクションを少し簡略化した形で説明して、コンベヤーがどのように機能するかについての良いアイデアを提供します。

3D座標の配列は、頂点データと呼ばれる三角形を形成できるコンベアの入力に送信されます。 頂点データは頂点のコレクションです。 頂点は、3D座標の上にあるデータセットです。 このデータは、任意のデータを含むことができる頂点の属性を使用して表されますが、簡単にするために、頂点は3Dの位置と色の値で構成されていると仮定します。

OpenGLは、渡された座標と色の値のコレクションから何を構成するかを知りたいので、OpenGLはデータからどの形状を形成するかを指定する必要があります。 一連のポイント、一連の三角形、または1本の長い線を描画しますか？ このような形状はプリミティブと呼ばれ、レンダリングコマンドを呼び出すときにOpenGLに渡されます。 GL_POINTS 、 GL_TRIANGLES、およびGL_LINE_STRIPのいくつかのプリミティブがあります 。

パイプラインの最初の段階は、1つの頂点を入力として受け取る頂点シェーダーです。 頂点シェーダーの主なタスクは、3D座標を他の3D座標に変換することです（詳細は後ほど説明します）。このシェーダーを変更できることにより、頂点値の基本的な変換を実行できます。

プリミティブのアセンブリは、プリミティブを形成し、そこからプリミティブを収集する頂点シェーダーからすべての頂点（ GL_POINTSプリミティブが選択されている場合は1つの頂点）を受け入れるステージです。 この場合、三角形になります。

プリミティブアセンブリフェーズの結果は、ジオメトリシェーダーに渡されます。 次に、入力でプリミティブを形成する一連の頂点を受け取り、新しい頂点を生成して新しい（または他の）プリミティブを形成することで、他の形状を生成できます。 たとえば、この場合、彼はこの図に加えて2番目の三角形を生成します。

ジオメトリシェーダーの処理結果はラスタライズステージに渡され、結果のプリミティブは画面上のピクセルに対応し、フラグメントシェーダーのフラグメントを形成します。 フラグメントシェーダーが開始される前に、カットが実行されます。 見えないフラグメントはすべて破棄されるため、生産性が向上します。

OpenGLのフラグメントは、ピクセルを描画するためにOpenGLが必要とするすべてのデータです。

フラグメントシェーダーの主な目標は、ピクセルの最終的な色を計算することです。これは、ほとんどの場合、追加のOpenGLエフェクトがすべて実行される段階でもあります。 多くの場合、フラグメントシェーダーには3Dシーンに関するすべての情報が含まれており、最終的な色（照明、影、光源の色など）を変更するために使用できます。

対応するすべてのカラー値の決定が完了すると、結果は別のステップを経ます。これは、アルファテストおよびブレンドと呼ばれます。 この段階では、フラグメントの深さ（およびテンプレート）の対応する値（後でこれに戻ります）をチェックし、それらを使用して、他のオブジェクト（前面または背面）に対するフラグメントの位置を確認します。 このステップでは、透明度の値もチェックし、必要に応じて色を混ぜます。 したがって、複数のプリミティブのレンダリング中、ピクセルの結果の色は、フラグメントシェーダーによって計算された色と異なる場合があります。

ご覧のとおり、グラフィックパイプラインは非常に複雑で、多くの構成可能な部分が含まれています。 それにもかかわらず、主に頂点シェーダーとフラグメントシェーダーを使用します。 ジオメトリシェーダーはオプションであり、多くの場合標準のままです。

最新のOpenGLでは、少なくとも頂点シェーダーを指定する必要があります（ビデオカードには標準の頂点/フラグメントシェーダーはありません）。 このため、最初の三角形を描く前にかなりの量の理論を学ぶ必要があるため、最新のOpenGLを勉強するのは難しい場合があります。 このチュートリアルの最後では、グラフィカルプログラミングについて多くを学びます。

頂点転送

手始めに何かを描くには、頂点に関するOpenGLデータを渡す必要があります。 OpenGLは3Dライブラリであるため、OpenGLに伝えるすべての座標は3次元空間（x、y、z）にあります。 OpenGLは、渡されたすべての 3D座標を画面上の2Dピクセルに変換しません。 OpenGLは、3つの座標すべて（x、y、z）について、 -1.0〜1.0の特定の間隔でのみ3D座標を処理します。 このような座標はすべて、デバイスに正規化された（または単に正規化された）座標と呼ばれます。

1つの三角形を描画するため、3つの頂点を提供する必要があります。各頂点は3次元空間にあります。 それらをGLfloat配列で正規化された形式で定義します。

GLfloat vertices[] = { -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f, 0.0f, 0.5f, 0.0f }; 

OpenGLは3次元空間で動作するため、z座標が0.0の2次元の三角形を描画します。 したがって、三角形の深さは同じになり、2次元に見えます。

正規化されたデバイス座標（NDC）
頂点シェーダーで頂点座標が処理された後、x、y、z座標が-1.0〜1.0の範囲にある小さな空間であるNDCに正規化される必要があります。 この制限を超える座標はすべて破棄され、画面に表示されません。 以下に、設定した三角形を示します。



画面座標とは異なり、正のy軸の値は上を指し、 （0、0）座標は左上隅ではなくグラフの中心です。

NDC座標は、 glViewport呼び出しで提供されたデータを使用して、ビューポートを通じて画面空間座標に変換されます。 次に、画面空間の座標がフラグメントに変換され、入力フラグメントシェーダーに供給されます。

頂点データを決定した後、グラフィックスパイプラインの最初のステージである頂点シェーダーに転送する必要があります。 これは次のように行われます。GPUにメモリを割り当て、頂点データを保存し、OpenGLに転送されたデータを解釈する方法を伝え、転送されたデータ量をGPUに転送します。 次に、頂点シェーダーは、彼が言ったのと同じ数の頂点を処理します。

このメモリは、いわゆる頂点バッファオブジェクト（VBO）を通じて管理されます。VBOは、GPUメモリに多数の頂点を格納できます。 このようなバッファオブジェクトを使用する利点は、一度に1つの頂点を送信する必要なく、一度に多数のデータセットをビデオカードに送信できることです。 CPUからGPUへのデータ送信はかなり遅いため、一度にできるだけ多くのデータを送信しようとします。 しかし、データがGPUにあるとすぐに、頂点シェーダーはほぼ瞬時にそれを受け取ります。

VBOは、最初のレッスンで説明したオブジェクトとの最初の出会いです。 OpenGLのオブジェクトと同様に、このバッファーには一意の識別子があります。 glGenBuffers関数を使用してVBOを作成できます。

 GLuint VBO; glGenBuffers(1, &VBO); 

OpenGLには、さまざまな種類のバッファオブジェクトが多数あります。 VBO- GL_ARRAY_BUFFERと入力します。 OpenGLでは、複数のバッファーのタイプが異なる場合、それらをバインドできます。 glBindBufferを使用して、 GL_ARRAY_BUFFERをバッファーにバインドできます。

 glBindBuffer(GL_ARRAY_BUFFER, VBO); 

これ以降、バッファを使用するすべての呼び出しはVBOで機能します。 これで、 glBufferDataを呼び出して、頂点データをこのバッファーにコピーできます。

 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); 

glBufferDataは、指定されたバッファにユーザーデータをコピーすることを目的とする関数です。 最初の引数は、データのコピー先のバッファーのタイプです（VBOはGL_ARRAY_BUFFERにバインドされています ）。 2番目の引数は、バッファに渡すデータの量（バイト単位）を決定します。 3番目の引数はデータそのものです。

4番目の引数は、転送されたデータをビデオカードでどのように使用するかを決定します。 3つのモードがあります。

1. GL_STATIC_DRAW ：データは変更されないか、非常にまれにしか変更されません。
2. GL_DYNAMIC_DRAW ：データは頻繁に変更されます。
3. GL_STREAM_DRAW ：データはレンダリングごとに変化します。

三角形の位置のデータは変更されないため、 GL_STATIC_DRAWを選択します。 たとえば、値が非常に頻繁に変化するバッファがある場合、 GL_DYNAMIC_DRAWまたはGL_STREAM_DRAWを使用して、このバッファのデータを最も速く書き込むメモリ領域に保存する必要があるという情報をビデオカードに提供します。

これで、GPU上の頂点データをVBOというバッファーオブジェクトに保存しました。
次に、実際のデータ処理のために頂点シェーダーとフラグメントシェーダーを作成する必要があるため、始めましょう。

頂点シェーダー

頂点シェーダーは、プログラム可能なシェーダーの1つです。 最新のOpenGLでは、何かを描画する場合、頂点シェーダーとフラグメントシェーダーを定義する必要があるため、三角形を描画するための2つの非常に単純なシェーダーを提供します。 次のレッスンでは、シェーダーについて詳しく説明します。

最初に、シェーダー自体を特別なGLSL言語（OpenGLシェーディング言語）で記述し、それをアセンブルして、アプリケーションが動作できるようにする必要があります。 最も簡単なシェーダーコードを次に示します。

 #version 330 core layout (location = 0) in vec3 position; void main() { gl_Position = vec4(position.x, position.y, position.z, 1.0); } 

ご覧のとおり、GLSLはCに非常によく似ています。各シェーダーは、そのバージョンをインストールすることから始まります。 OpenGLバージョン3.3以降では、GLSLバージョンはOpenGLバージョンと同じです（たとえば、GLSL 420バージョンはOpenGLバージョン4.2と同じです）。 また、コアプロファイルを使用していることを明示的に示しました。

次に、inキーワードを使用して、頂点シェーダーですべての入力頂点属性を指定しました。 位置データを操作するだけでよいので、頂点属性を1つだけ指定します。 GLSLには、1〜4個の浮動小数点数を含むベクターデータ型があります。 頂点には3次元座標があるため、 positionというvec3を作成します。 また、 レイアウトを使用して変数の位置を明示的に示しました（location = 0） 。

ベクトル
グラフィカルプログラミングでは、ベクトルの数学的な概念をよく使用します。これは、ベクトルがあらゆる空間の位置/方向を完全に表し、有用な数学的な特性も備えているためです。 GLSLのベクトルの最大サイズは4要素であり、各要素へのアクセスは、それぞれvec.x 、 vec.y 、 vec.zおよびvec.wを介して取得できます。 コンポーネントvec.wは空間内の位置として使用されないことに注意してください（4Dではなく3Dで作業します）が、パースペクティブ分割で作業する場合に役立ちます。 ベクトルについては、次のレッスンで詳しく説明します。

頂点シェーダーの結果を示すために、事前定義された変数gl_Positionに値を割り当てる必要があります。これは、タイプvec4です。 メイン関数が終了した後、gl_Positionに渡すものは何でも、頂点シェーダーの結果として使用されます。 入力ベクトルは3次元なので、4次元に変換する必要があります。 これを行うには、 vec3コンポーネントをvec4に渡し 、 wコンポーネントを1.0fに設定します（その理由については後で説明します）。

この頂点シェーダーは、おそらくデータを処理せず、単にこのデータを出力に渡すだけなので、おそらくあなたが考えることができる最も簡単なシェーダーです。 実際のアプリケーションでは、入力データは正規化されていないため、最初は正規化する必要があります。

シェーダーアセンブリ

シェーダーのソースコード（C行に格納）を作成しましたが、OpenGLがこのシェーダーを使用するには、ビルドする必要があります。

まず、シェーダーオブジェクトを作成する必要があります。 作成されたオブジェクトへのアクセスは識別子を介して行われるため、 GLuint型の変数に保存し 、 glCreateShaderを介して作成します。

 GLuint vertexShader; vertexShader = glCreateShader(GL_VERTEX_SHADER); 

シェーダーを作成するとき、作成するシェーダーのタイプを指定する必要があります。 頂点シェーダーが必要なので、 GL_VERTEX_SHADERを指定します。

次に、シェーダーソースコードをシェーダーオブジェクトにバインドしてコンパイルします。

 glShaderSource(vertexShader, 1, &vertexShaderSource, NULL); glCompileShader(vertexShader); 

glShaderSource関数は 、最初の引数として、組み立てる必要があるシェーダーを受け取ります。 2番目の引数は行数を記述します。 この例では、1行のみです。 3番目のパラメーターはシェーダーソースコード自体であり、4番目のパラメーターはNULLのままにします。

ほとんどの場合、シェーダーアセンブリの成功を確認する必要があります。 シェーダーがビルドされていない場合は、ビルド中に発生したエラーを取得します。 次のようにエラーを確認します。

 GLint success; GLchar infoLog[512]; glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success); 

まず、アセンブリの成功を判断するための番号と、エラーを格納するためのコンテナー（存在する場合）を宣言します。 それからglGetShaderivで成功をテストします 。 アセンブリが失敗した場合、 glGetShaderInfoLogを使用してエラーメッセージを取得し、このエラーを表示できます。

 if(!success) { glGetShaderInfoLog(vertexShader, 512, NULL, infoLog); std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl; } 

その後、コンパイルエラーがなければ、シェーダーが構築されます。

フラグメントシェーダー

フラグメントシェーダーは、三角形を描画する必要がある2番目と最後のシェーダーです。 フラグメントシェーダーはピクセルカラーを計算します。 単純さの名において、フラグメントシェーダーはオレンジのみを出力します。

コンピューターグラフィックスの色は、赤、緑、青、透明度の4つの値の配列として表されます。 このようなコンポーネントベースはRGBAと呼ばれます。 OpenGLまたはGLSLで色を設定するとき、各コンポーネントの値を0.0〜1.0の間に設定します。 たとえば、赤と緑の成分の値を1.0fに設定すると、これらの色が混ざった黄色が得られます。 3つのコンポーネントの組み合わせにより、約1600万の異なる色が得られます。

 #version 330 core out vec4 color; void main() { color = vec4(1.0f, 0.5f, 0.2f, 1.0f); } 

出力フラグメントシェーダーに必要なのは、4コンポーネントベクトルであるカラー値のみです。 outキーワードを使用して出力変数を指定できます。この変数をcolorと呼びます。 次に、この変数vec4の値を不透明なオレンジで設定します。

フラグメントシェーダーのアセンブルプロセスは、頂点シェーダーのアセンブルに似ていますが、異なるタイプのシェーダーを指定する必要があるのはGL_FRAGMENT_SHADERのみです。

 GLuint fragmentShader; fragmentShader = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL); glCompileShader(fragmentShader); 

両方のシェーダーがアセンブルされ、レンダリング時に使用できるように、プログラムにリンクするだけになりました。

シェーダープログラム

シェーダープログラムは、複数のシェーダーの組み合わせの最終結果であるオブジェクトです。 組み立てられたシェーダーを使用するには、シェーダープログラムのオブジェクトに接続し、オブジェクトをレンダリングするときにこのプログラムをアクティブにする必要があります。このプログラムは、描画コマンドを呼び出すときに使用されます。

シェーダーをプログラムに接続すると、あるシェーダーの出力値が別のシェーダーの入力値と比較されます。 入力値と出力値が一致しない場合、シェーダー接続中にエラーが発生することもあります。

プログラムの作成は非常に簡単です。

 GLuint shaderProgram; shaderProgram = glCreateProgram(); 

glCreateProgram関数はプログラムを作成し、このプログラムの識別子を返します。 次に、アセンブルされたシェーダーをプログラムにアタッチし、 glLinkProgramを使用してそれらをリンクする必要があります。

 glAttachShader(shaderProgram, vertexShader); glAttachShader(shaderProgram, fragmentShader); glLinkProgram(shaderProgram); 

このコードはそれ自体を完全に記述しています。 シェーダーをプログラムに接続し、バインドします。

シェーダーアセンブリと同様に、バインディングとエラーメッセージの成功を取得できます。 唯一の違いは、 glGetShaderivとglGetShaderInfoLogの代わりに使用することです。

 glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success); If (!success) { glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog); … } 

作成したプログラムを使用するには、 glUseProgramを呼び出す必要があります。

 glUseProgram(shaderProgram); 

シェーダーとレンダリング関数の各呼び出しは、プログラムオブジェクト（および、それに応じて、シェーダー）を使用します。

そうです、バインド後に作成したシェーダーを削除することを忘れないでください。 それらはもう必要ありません。

 glDeleteShader(vertexShader); glDeleteShader(fragmentShader); 

現時点では、頂点データをGPUに渡し、GPUにその処理方法を指示しました。 ほぼ完了です。 OpenGLは、メモリ内の頂点データを表現する方法と、頂点データを頂点シェーダーの属性に結合する方法をまだ認識していません。 さあ、始めましょう。

頂点属性のバインド

頂点シェーダーを使用すると、頂点の各属性に任意のデータを指定できますが、これは、どのデータ要素がどの属性に属しているかを示す必要があるという意味ではありません。 これは、レンダリングの前にOpenGLが頂点データをどのように解釈するかを指示する必要があることを意味します。

頂点バッファーの形式は次のとおりです。

• 位置情報は32ビット（4バイト）の浮動小数点値で保存されます。
• 各位置は3つの値で構成されています。
• 3つの値のセットの間にセパレータはありません。 このようなバッファは、 密集状態と呼ばれます。
• 送信されたデータの最初の値は、バッファーの先頭です。

これらの機能を知っていれば、頂点データを解釈する方法をOpenGLに伝えることができます。 これはglVertexAttribPointer関数を使用して行われます。

 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0); glEnableVertexAttribArray(0); 

glVertexAttribPointer関数にはパラメーターがほとんどありません。すぐに見てみましょう。

• 最初の引数は、設定するシェーダー引数を示します。 次のように位置が指定された位置引数の値を指定します： layout（location = 0）。
  
  
• 次の引数は、シェーダーの引数のサイズを示します。 vec3を使用したため、3を示します。
  
  
• 3番目の引数は、使用されるデータ型を示します。 シェーダーのvecは浮動小数点数を使用するため 、 GL_FLOATを指定します。
  
  
• 4番目の引数は、入力を正規化する必要があることを示します。 GL_TRUEを指定すると、すべてのデータは0（符号付き値の場合は-1）から1の間に位置します。正規化は必要ないため、 GL_FALSEのままにします。
  
  
• 5番目の引数はステップと呼ばれ、データセット間の距離を示します。 また、0に等しいステップを指定すると、OpenGLがステップを計算します（密集したデータセットでのみ機能します）。 この議論から実質的な利益を得る方法は、後で検討します。
  
  
• 最後のパラメーターはGLvoid *型であるため、このような奇妙なキャストが必要です。 これは、バッファ内のデータの先頭のオフセットです。 バッファにはオフセットがないため、0を指定します。

各頂点属性は、現在GL_ARRAY_BUFFERにバインドされているVBOによって管理されるメモリから値を受け取ります。 したがって、別のVBOでglVertexAttribPointerを呼び出した場合、頂点データは別のVBOから取得されます。

頂点データの解釈方法をOpenGLに伝えた後、 glEnableVertexAttribArrayを使用して属性を有効にする必要があります。 したがって、頂点属性に引数の位置を渡します。 すべてをセットアップした後、VBOを使用してバッファー内の頂点データを初期化し、頂点とフラグメントシェーダーを設定し、頂点シェーダーと頂点データを接続する方法をOpenGLに指示しました。 OpenGLでオブジェクトを描画すると、次のようになります。

 // 0.       OpenGL glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 1.       glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0); // 2.     glUseProgram(shaderProgram); // 3.     someOpenGlFunctionThatDrawsOutTriangle(); 

オブジェクトを描画するたびにこのプロセスを繰り返す必要があります。 それほど難しくはないようですが、頂点の属性が5つ以上あり、100の異なるオブジェクトの領域に何かがあると想像してください。 そして、各オブジェクトにこれらの構成を常時インストールすることは、すぐにワイルドなルーチンになります。 これは、これらすべての状態を保存するための何らかの方法であり、レンダリングのために何らかの状態にバインドするだけです...

頂点配列オブジェクト

頂点配列オブジェクト（VAO）もVBOのようにバインドでき、その後、頂点属性への以降のすべての呼び出しはVAOに格納されます。 この方法の利点は、属性を1回設定するだけで済み、その後のすべての時間でVAO設定が使用されることです。 また、この方法では、異なるVAOをバインドするだけで、頂点データと属性の構成を簡単に変更できます。

Core OpenGL では 、入力頂点の操作方法をOpenGLが認識できるように、VAOを使用する必要があります。 VAOを指定しない場合、OpenGLはレンダリングを拒否する場合があります。

VAOは次の呼び出しを保存します。

• glEnableVertexAttribArrayまたはglDisableVertexAttribArrayを呼び出します。
• glVertexAttribPointerを介して行われる属性設定。
• glVertexAttribPointerを使用して頂点属性に関連付けられたVBO

VAO生成プロセスはVBO生成に非常に似ています：

 GLuint VAO; glGenVertexArrays(1, &VAO); 

VAOを使用するために必要なことは、VAOをglBindVertexArrayにバインドすることだけです 。 次に、必要なVBOと属性ポインターを構成/バインドし、最後に後で使用するためにVAOをバインド解除する必要があります。 そして今、オブジェクトを描画するたびに、オブジェクトをレンダリングする前に必要な設定でVAOをバインドするだけです。 次のようになります。

 // ..::   (  (, ,     )) :: .. // 1.  VAO glBindVertexArray(VAO); // 2.        OpenGL glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 3.      glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0); glEnableVertexAttribArray(0); //4.  VAO glBindVertexArray(0); [...] // ..::   (  ) :: .. // 5.   glUseProgram(shaderProgram); glBindVertexArray(VAO); someOpenGLFunctionThatDrawsOurTriangle(); glBindVertexArray(0); 

OpenGLでは、オブジェクトの関連付けを解除するのが一般的です。 少なくとも構成を誤って台無しにしないためだけです。

以上です！ 私たちが何百万ページ以上行ってきたことはすべて、この点に私たちをもたらしました。 頂点属性と必要なVBOを格納するVAO。 多くの場合、レンダリング用の複数のオブジェクトがある場合、最初にVAOを生成および構成し、後で使用するためにそれらを保存します。 オブジェクトの1つを描画する必要がある場合は、保存されたVAOを使用します。

待っていた三角形

オブジェクトをレンダリングするために、OpenGLはglDrawArrays関数を提供します。 アクティブシェーダーとインストールされたVAOを使用して、指定されたプリミティブをレンダリングします。

 glUseProgram(shaderProgram); glBindVertexArray(VAO); glDrawArrays(GL_TRIANGLES, 0, 3); glBindVertexArray(0); 

glDrawArrays関数は、描画するプリミティブをOpenGLの最初の引数として受け取ります。三角形を描きたいので、嘘をつきたくないので、GL_TRIANGLESを指定します。2番目の引数は、描画する頂点を含む配列の開始インデックスを示します。0のままにします。最後の引数は、描画する頂点の数を示します。3を描画する必要があります（1つの三角形の長さは3頂点です）。

これで、記述されたコードをビルドして実行できます。次の結果が表示



されます。ソースコードはこちらにあります。

結果が異なる場合は、おそらくどこか間違っています。コードを上記のソースコードと比較します。

要素バッファオブジェクト

今日の頂点レンダリングについて最後に説明するのは、要素バッファオブジェクト（EBO）です。それが何であり、どのように機能するかを説明するために、例を挙げたほうが良いでしょう。三角形ではなく四角形を描く必要があるとしましょう。2つの三角形を使用して四角形を描画できます（OpenGLは主に三角形で機能します）。

翻訳者からのメモ
ユーザーproydakovが指摘したように、このオブジェクトはそれぞれインデックスバッファーオブジェクト、IBOとも呼ばれます。

したがって、次の一連の頂点を宣言する必要があります。

 GLfloat vertices[] = { //   0.5f, 0.5f, 0.0f, //    0.5f, -0.5f, 0.0f, //    -0.5f, 0.5f, 0.0f, //    //   0.5f, -0.5f, 0.0f, //    -0.5f, -0.5f, 0.0f, //    -0.5f, 0.5f, 0.0f //    }; 

ご覧のとおり、右下と左上の頂点を2回指定しました。 6つではなく4つの頂点を持つ長方形を記述することができるため、これはリソースのあまり合理的な使用ではありません。1000を超える三角形を持つことができる大きなモデルを扱う場合、問題はさらに重要になります。この問題の最も正しい解決策は、一意の頂点のみを保存し、レンダリングを実行する順序を個別に示すことです。この場合、4つの頂点を保存するだけで、描画する順序を指定できます。 OpenGLがそのような機会を提供してくれたら素晴らしいと思います。

幸いなことに、EBOはまさに私たちが必要としているものです。EBOはVBOのようなバッファーですが、描画する頂点を決定するためにOpenGLが使用するインデックスを保存します。これはインデックス付き描画と呼ばれ、上記の問題の解決策です。最初に、一意の頂点とインデックスを指定してそれらを三角形として描画する必要があります。

 GLfloat vertices[] = { 0.5f, 0.5f, 0.0f, //    0.5f, -0.5f, 0.0f, //    -0.5f, -0.5f, 0.0f, //    -0.5f, 0.5f, 0.0f //    }; GLuint indices[] = { // ,     0! 0, 1, 3, //   1, 2, 3 //   }; 

ご覧のとおり、必要な頂点は6ではなく4つだけです。次に、EBOを作成する必要があります。

 GLuint EBO; glGenBuffers(1, &EBO); 

VBOと同様に、EBOをバインドし、glBufferDataを介してこのバッファーにインデックスをコピーします。VBOの場合と同様に、バインディングコマンドとデカップリングコマンド（glBindBuffer（GL_ELEMENT_ARRAY_BUFFER、0）の間に呼び出しを配置し​​ます。今回のみバッファータイプがGL_ELEMENT_ARRAY_BUFFERです。

 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); 

宛先バッファとしてGL_ELEMENT_ARRAY_BUFFERを渡していることに注意してください。私たちが行う必要がある最後の事は-コール置き換えることですglDrawArraysにコールglDrawElementsを、我々は、バッファインデックスの三角形を描きたいことを示すために。glDrawElementsを使用すると、現在バインドされているEBOからレンダリングが実行されます。

 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); 

最初の引数はglDrawArraysのように、レンダリングしたいプリミティブを記述します。 2番目の引数は、レンダリングする要素の数です。 6つのインデックスを指定したため、6つの頂点を関数に渡します。 3番目の引数はインデックスデータ型で、この例ではGL_UNSIGNED_INTです。最後の引数は、あなたのEBOのオフセット（または配列インデックスを転送し、それをしないEBOを使用して）私達はちょうど0を指定して、指定することができます

機能glDrawElementsをに縛ら電流から取るインデックスをGL_ELEMENT_ARRAY_BUFFER EBO。これは、毎回異なるEBOをアタッチする必要がある場合を意味します。しかし、VAOはEBOを保存する方法を知っています。

ターゲットがGL_ELEMENT_ARRAY_BUFFERの場合、VAOはglBindBufferの呼び出しを保存します。また、解く呼び出しも保存することを意味するため、VAOを解く前にEBOを解かないようにしてください。そうしないと、EBOがまったく接続されません。

その結果、次のコードのようなものが得られます。

 // ..::   :: .. // 1.  VAO glBindVertexArray(VAO); // 2.       OpenGL glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 3.        OpenGL glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 3.      glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0); glEnableVertexAttribArray(0); // 4.  VAO ( EBO) glBindVertexArray(0); [...] // ..::   (  ) :: .. glUseProgram(shaderProgram); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0) glBindVertexArray(0); 

プログラムを起動すると、次の結果が生成されます。左の画像は計画どおりであり、右の画像はワイヤフレームモードで描画された長方形です。ご覧のとおり、この四角形は2つの三角形で構成されています。

Wireframe

, OpenGL, glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) . , , , . , — glPolygonMode(GL_FRONT_AND_BACK, GL_FILL).

何か問題がある場合は、レッスンをやり直してください。何か忘れているかもしれません。また、ソースコードを確認することもできます。

すべてがうまくいったなら、おめでとうございます。あなたは、最新のOpenGLを学ぶ上で最も難しい部分の1つである、最初の三角形を見つけるだけです。この部分は非常に複雑です。最初の三角形を描くには、ある程度の知識が必要だからです。幸いなことに、私たちはすでにこれを経験しており、その後のレッスンはより簡単になるはずです。

追加のリソース

• antongerdelan.net/hellotriangle：アントン・ガーデランスは最初の三角形を描きます..
• open.gl/drawing：Alexander Overvoordesは最初の三角形を描きます。
• antongerdelan.net/vertexbuffers：VBOの小さなインデント。
• learnopengl.com/#!In-Practice/Debugging：このレッスンでは、このレッスンから多くのことを学びました。どこかに行き詰まっている場合は、このページを参照してください。（このページの翻訳後、翻訳へのリンクを作成します）。

演習

調査を統合するために、いくつかの演習を提供します。

1. さらに頂点を追加して、glDrawArraysを使用して2つの三角形を1つずつ描画してみてください。解決策
2. 2つの異なるVAOとVBOを使用して2つの三角形を作成します。解決策
3. 2番目のフラグメントシェーダーを作成し、黄色で表示します。そして、2番目の三角形を黄色にします。解決策