幾何学シェーダー

頂点シェーダーとフラグメントシェーダーのステージの間には、ジオメトリシェーダーを実行するために設計されたオプションのステージがあります。 ジオメトリシェーダーの入力には、OpenGLで許容されるプリミティブ（ポイント、三角形など）の1つを形成する一連の頂点があります。 その作業の結果、ジオメトリシェーダーは、次のシェーダーステージに転送する前に、この一連の頂点を自由裁量で変換できます。 同時に、ジオメトリシェーダーの最も興味深い機能に注目する価値があります：その作業の過程で、入力頂点のセットを変換して完全に異なるプリミティブを表すことができ、入力データに基づいて完全に新しい頂点を生成し、頂点の総数を増やすこともできます。


長い間利用せず、すぐにジオメトリシェーダーの例に戻ります。

#version 330 core layout (points) in; layout (line_strip, max_vertices = 2) out; void main() { gl_Position = gl_in[0].gl_Position + vec4(-0.1, 0.0, 0.0, 0.0); EmitVertex(); gl_Position = gl_in[0].gl_Position + vec4( 0.1, 0.0, 0.0, 0.0); EmitVertex(); EndPrimitive(); } 

シェーダーコードの先頭で、頂点シェーダーステージからデータを取得するプリミティブのタイプを指定する必要があります。 これは、inキーワードの前にあるレイアウト指定子を使用して行われます。 指定子で示されるプリミティブのタイプは、頂点シェーダーによって処理されるプリミティブのタイプに対応する次の値のいずれかを取ることができます。

• points ：GL_POINTS（1）を出力する場合。
• lines ：GL_LINESまたはGL_LINE_STRIP（2）を出力する場合。
• lines_adjacency ：GL_LINES_ADJACENCYまたはGL_LINE_STRIP_ADJACENCY（4）を出力する場合。
• triangles ：GL_TRIANGLES、GL_TRIANGLE_STRIP、またはGL_TRIANGLE_FAN（3）を出力する場合。
• triangles_adjacency ：GL_TRIANGLES_ADJACENCYまたはGL_TRIANGLE_STRIP_ADJACENCY（6）を出力する場合。

結果として、 glDrawArrays（）のようなレンダリング関数への受け渡しに有効な、事実上すべてのタイプのプリミティブがここにリストされます。 GL_TRIANGLESを使用してレンダリングする場合、 トライアングルパラメーターを指定子で指定する必要があります。 ここの括弧内の数字は、1つのプリミティブに含まれる頂点の最小数を意味します。

次に、このシェーダーの出力プリミティブのタイプも指定する必要があります。 したがって、これはoutキーワードの前にレイアウト指定子を介して行われます。 この例では、最大2つの頂点を持つline_stripが出力で生成されます。

忘れた場合： ラインストリッププリミティブはセット内のポイントを接続し、セット内の2つのポイントから始まる連続したラインを形成します。 2つを超えるポイントが追加されるたびに、新しいポイントから前のポイントまで伸びる別の線セグメントが作成されます。 以下は、5ポイントセグメントの画像です。


示されているシェーダーの例では、プリミティブの頂点の最大数を明示的に2に設定しているため、個々の直線セグメントのみを生成できます。

シェーダーが何か有用なことを行えるようにするには、前のシェーダーステージの出力からデータを取得する必要があります。 GLSLには組み込み変数gl_inが用意されており、次の構造で表すことができます。

 in gl_Vertex { vec4 gl_Position; float gl_PointSize; float gl_ClipDistance[]; } gl_in[]; 

したがって、この変数は最後のレッスンで説明したインターフェイスブロックに似ており、頂点シェーダーの結果として設定された頂点位置ベクトルを含むgl_Positionがいくつかのフィールドを含んでいます。
ほとんどのプリミティブには複数の頂点が含まれており、ジオメトリシェーダーのステージは処理されたプリミティブのすべての頂点を入力として受け取るため、この変数は配列であることに注意してください。

頂点シェーダーの出力から頂点データを受け取ったら、新しいデータの生成を開始できます。これは、ジオメトリシェーダーの2つの特別な関数EmitVertex（）およびEndPrimitive（）を使用して実行されます。 コードでは、出力として宣言された少なくとも1つのプリミティブを生成することが期待されています。 この例では、少なくとも1つのline_stripタイプのプリミティブを返す必要があります。

 void main() { gl_Position = gl_in[0].gl_Position + vec4(-0.1, 0.0, 0.0, 0.0); EmitVertex(); gl_Position = gl_in[0].gl_Position + vec4( 0.1, 0.0, 0.0, 0.0); EmitVertex(); EndPrimitive(); } 

EmitVertex（）を呼び出すたびに、 gl_Position変数の現在の値が現在のプリミティブインスタンスに追加されます。 EndPrimitive（）を呼び出すと、生成されたすべての頂点が最終的​​にプリミティブの指定された出力タイプにバインドされます。 EmitVertex（）の 1つ以上の呼び出しの後にEndPrimitive（）の呼び出しを繰り返すことにより、プリミティブの新しいインスタンスを作成し続けることができます。 具体的には、この例では、2つの頂点が生成され、入力頂点の位置から少し距離を移動してから、 EndPrimitive（）呼び出しが行われ 、これら2つの生成された頂点から2つの頂点を含む1つのラインストリップを形成します。

したがって、（理論的には）ジオメトリシェーダーの仕組みを知っていれば、おそらくこの例の効果が何であるかをすでに推測しているでしょう。 入力時に、シェーダーはポイントプリミティブを受け取り、それに基づいて入力ラインがちょうど真ん中にある水平線を作成します。 そのようなシェーダーを使用したプログラムの出力を以下に示します。


あまり印象的ではありませんが、1回の描画呼び出しを実行するだけでこのような結果が得られたことを考えると、すでに興味深いものです。

 glDrawArrays(GL_POINTS, 0, 4); 

この例は非常に単純ですが、重要な原則を示しています。幾何学的シェーダーを使用して新しい形状を動的に作成する機能です。 後ほど、ジオメトリシェーダーに基づいて実装されたいくつかの興味深いエフェクトを見ていきますが、今のところは、単純なシェーダーを使用して基本的な作業を行います。

ジオメトリシェーダーを使用する

ジオメトリシェーダーの使用方法を示すために、デバイスの正規化された座標（NDC）でXoY平面にある4つのポイントをレンダリングする簡単なプログラムを使用します。 ポイント座標：

 float points[] = { -0.5f, 0.5f, // - 0.5f, 0.5f, // - 0.5f, -0.5f, // - -0.5f, -0.5f // - }; 

頂点シェーダーはシンプルです-ポイントを目的のプレーンにマップするだけです：

 #version 330 core layout (location = 0) in vec2 aPos; void main() { gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0); } 

フラグメントシェーダーも簡単で、フラグメントにハードコードされた色を使用します。

 #version 330 core out vec4 FragColor; void main() { FragColor = vec4(0.0, 1.0, 0.0, 1.0); } 

プログラムコードでは、通常どおり、頂点データのVAOとVBOを作成し、 glDrawArrays（）を呼び出してレンダリングします。

 shader.use(); glBindVertexArray(VAO); glDrawArrays(GL_POINTS, 0, 4); 

その結果、画面には完全な暗闇と4つのほとんど見えない緑色のドットがあります。


このような憂鬱な写真を撮るためだけに多くのことを学んだのは、ちょっと悲しいことです。 そのため、すぐにシーンに介入し、ジオメトリックシェーダーの機能を使用してこの悲観的な人を薄めます。

しかし、最初に、トレーニングの目的で、 エンドツーエンドのジオメトリシェーダーがどのように機能するかを作成して把握する必要があります。これは、入力プリミティブのデータを取得し、変更せずに送信します。

 #version 330 core layout (points) in; layout (points, max_vertices = 1) out; void main() { gl_Position = gl_in[0].gl_Position; EmitVertex(); EndPrimitive(); } 

現時点では、ヒントなしでシェーダーコードを既に理解できます。 ここでは、頂点シェーダーから取得した位置に頂点を生成し、同じポイントプリミティブを生成します。

ジオメトリシェーダーには、頂点シェーダーとフラグメントシェーダーと同様に、コンパイルとプログラムオブジェクトへのリンクが必要です。 ただし、今回はシェーダーのタイプとしてGL_GEOMETRY_SHADERが指定されたシェーダーオブジェクトが作成されます 。

 geometryShader = glCreateShader(GL_GEOMETRY_SHADER); glShaderSource(geometryShader, 1, &gShaderCode, NULL); glCompileShader(geometryShader); ... glAttachShader(program, geometryShader); glLinkProgram(program); 

実際、コンパイルコードは他の種類のシェーダーとまったく同じです。 コンパイルおよびリンクエラーのチェックを忘れないでください！

実行すると、おなじみの画像が得られます：


幾何学的シェーダーなしの場合と同じものが得られました...退屈です！ ただし、ドットはまだ表示されているので、少なくともシェーダーが機能していることと、より興味深いものに進むことができることを確認しています。

家を建てる

単純な線と点を描くことは、私たちが期待したものとはまったく異なります。したがって、少し創造性を追加し、入力頂点によって与えられた点に家を描きます。 これを行うには、出力プリミティブのタイプをtriangle_stripに変更し、3つの三角形を描画する必要があります。2つは正方形のベースを作成し、1つは屋根に使用します。

OpenGLプリミティブTriangle Stripは、入り口で必要な頂点が少ない三角形を描くためのより効率的な方法です。 最初の三角形をレンダリングした後、後続の各頂点は、前の三角形に隣接する別の三角形を作成します。 6つの頂点が三角形ストリップの一部として与えられた場合、結果は次の三角形のシーケンスになります：（1,2,3）、（2,3,4）、（3,4,5）および（4,5,6） 4つの描かれた三角形にあふれます。 このプリミティブでは、レンダリングを成功させるために少なくとも3つの頂点を設定する必要があります。 一般的な場合、N-2個の三角形が導出されます。 以下に示すように、6つの頂点がある6-2 = 4の三角形が得られました。


三角形のストリップを使用すると、3つの隣接する三角形から目的の形状を簡単に形成し、正しい順序で設定できます。 次の画像は、目的の三角形を取得するために頂点を描画する順序を示しています。 青い点は、入力頂点の位置を示しています。


結果の幾何学的シェーダー：

 #version 330 core layout (points) in; layout (triangle_strip, max_vertices = 5) out; void build_house(vec4 position) { gl_Position = position + vec4(-0.2, -0.2, 0.0, 0.0); // 1:bottom-left EmitVertex(); gl_Position = position + vec4( 0.2, -0.2, 0.0, 0.0); // 2:bottom-right EmitVertex(); gl_Position = position + vec4(-0.2, 0.2, 0.0, 0.0); // 3:top-left EmitVertex(); gl_Position = position + vec4( 0.2, 0.2, 0.0, 0.0); // 4:top-right EmitVertex(); gl_Position = position + vec4( 0.0, 0.4, 0.0, 0.0); // 5:top EmitVertex(); EndPrimitive(); } void main() { build_house(gl_in[0].gl_Position); } 

シェーダーは、入力頂点の位置からオフセットした位置に5つの頂点を作成し、それらをすべて三角形ストリップタイプの1つのプリミティブに配置します。 次に、このプリミティブがラスタライズのために送信され、フラグメントシェーダがその表面を緑色にペイントします。 各エントリポイントに1つのグリーンハウスを取得します。


ここでは、各家が実際に3つの三角形で構成されていることがわかります。これらはすべて、入力データの単一ポイントに基づいて構築されています。

しかし、まだ少し退屈に見えます！ それぞれの家を独自の色で色付けしてみましょう。 これを行うために、頂点に関する色情報を保存する別の頂点属性を整理します。 頂点シェーダーは、頂点の属性値を読み取り、ジオメトリシェーダーに渡します。ジオメトリシェーダーは、色の値をフラグメントシェーダーに向けます。

更新された頂点データは次のとおりです。

 float points[] = { -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, // - 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // - 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // - -0.5f, -0.5f, 1.0f, 1.0f, 0.0f // - }; 

次に、インターフェイスブロックを使用して、ジオメトリシェーダーに色属性を渡すための頂点シェーダーコードを指定します。

 #version 330 core layout (location = 0) in vec2 aPos; layout (location = 1) in vec3 aColor; out VS_OUT { vec3 color; } vs_out; void main() { gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0); vs_out.color = aColor; } 

明らかに、ジオメトリシェーダーで同じタイプの（ただし名前は異なる）インターフェイスユニットを定義する必要があります。

 in VS_OUT { vec3 color; } gs_in[]; 

ジオメトリシェーダーは入力頂点のセット全体で実行されるため、単一の頂点が入力される場合でも、その入力パラメーターは常に配列です。

実際、ジオメトリブロックにデータを転送するためにインターフェイスブロックを使用する必要はありません。 頂点シェーダーがout vec3 vColorとして色を持つベクトルを渡した場合、次のように記述できます。

 in vec3 vColor[]; 

ただし、一般に、特に幾何学的なシェーダーでは、インターフェイスユニットの操作ははるかに簡単です。 実際には、ジオメトリシェーダーの入力パラメーターは、かなり大きなデータセットで表されることが多く、それらを配列で表される単一のインターフェイスユニットに結合することは、完全に予想されるステップです。

また、色データをフラグメントシェーダーに送る出力変数を宣言する必要があります。

 out vec3 fColor; 

フラグメントシェーダーは単一の（補間された）カラー値を想定しているため、カラーベクトルの配列を送信しても意味がありません。 それが、ここでfColorが配列ではなく、単一のベクトルである理由です 。 頂点をスポーンすると、それらはそれぞれ、フラグメントシェーダーの呼び出しのためにfColor変数にあった最後の値を記憶します。 したがって、家の場合、頂点シェーダーステージから取得した色でfColorを一度だけ塗りつぶして、家全体の色を設定できます。

 fColor = gs_in[0].color; //  gs_in[0]        gl_Position = position + vec4(-0.2, -0.2, 0.0, 0.0); // 1:- EmitVertex(); gl_Position = position + vec4( 0.2, -0.2, 0.0, 0.0); // 2:- EmitVertex(); gl_Position = position + vec4(-0.2, 0.2, 0.0, 0.0); // 3:- EmitVertex(); gl_Position = position + vec4( 0.2, 0.2, 0.0, 0.0); // 4:- EmitVertex(); gl_Position = position + vec4( 0.0, 0.4, 0.0, 0.0); // 5: EmitVertex(); EndPrimitive(); 

その結果、生成されたすべての頂点には、頂点属性の色に対応するfColor変数の色の値が格納されます。 現在、各家は独自の色で塗装されています。


もう少し創造性を追加し、仮想の冬をアレンジして、家の屋根に雪を振りかけます。 この最後の頂点に対して、白色を個別に割り当てます。

 fColor = gs_in[0].color; gl_Position = position + vec4(-0.2, -0.2, 0.0, 0.0); // 1:- EmitVertex(); gl_Position = position + vec4( 0.2, -0.2, 0.0, 0.0); // 2:- EmitVertex(); gl_Position = position + vec4(-0.2, 0.2, 0.0, 0.0); // 3:- EmitVertex(); gl_Position = position + vec4( 0.2, 0.2, 0.0, 0.0); // 4:- EmitVertex(); gl_Position = position + vec4( 0.0, 0.4, 0.0, 0.0); // 5: fColor = vec3(1.0, 1.0, 1.0); EmitVertex(); EndPrimitive(); 

その結果、次のことができます。


アプリケーションコードを例と比較できます。

この時点で、幾何学的なシェーダーは、単純なプリミティブを使用しても、十分な創造的可能性を提供することは既に明らかだと思います。 ジオメトリはGPUの超高速コア内で動的に作成されるため、頂点バッファーを使用して同じジオメトリを指定するよりもはるかに効率的です。 ジオメトリシェーダーは、ボクセルレンダリング用のキューブやオープンスペースシーンの草の茎など、単純で頻繁に繰り返される形状のレンダリングを最適化するための十分な機会を提供します。

オブジェクトを爆発させます

もちろん、家を描くことは素晴らしいことですが、私たちがしばしば協力しなければならないものではありません。 したがって、熱を加えて、3次元モデルの爆発に直行してください！ うーん、おそらくこれをあまり頻繁に行う必要はないでしょうが、幾何学的シェーダーの機能の優れたデモンストレーションとして役立ちます。

オブジェクトを爆破するということは、貴重なピークの文字通りの破壊を意味するのではなく、時間の経過に伴う通常の方向に沿った各三角形の動きを意味します。 その結果、この効果はオブジェクトの爆発のように見え、法線ベクトルの方向に移動する別々の三角形に分割します。 以下は、ナノスーツモデルに適用される効果です。


注目すべきは、ジオメトリシェーダーを使用すると、その複雑さに関係なく、任意のオブジェクトでエフェクトを使用できることです。

法線ベクトルに沿って三角形をシフトする必要があるため、最初に計算する必要があります。 具体的には、三角形の表面に垂直で、頂点が3つしかないベクトルを見つける必要があります。 変換のレッスンから、他の2つに垂直なベクトルは外積演算を使用して取得できることをおそらく覚えているでしょう。 三角形の表面に平行な2つのベクトルaとbを見つけることができた場合、表面に垂直なベクトルは単純にそれらのベクトル積の結果になります。 実際、以下のジオメトリシェーダーコードはそれを実行します。入力三角形の3つの頂点を使用して法線ベクトルを計算します。

 vec3 GetNormal() { vec3 a = vec3(gl_in[0].gl_Position) - vec3(gl_in[1].gl_Position); vec3 b = vec3(gl_in[2].gl_Position) - vec3(gl_in[1].gl_Position); return normalize(cross(a, b)); } 

ここでは、減算を使用して、三角形の表面に平行な2つのベクトルaとbを取得します。 ベクトルを減算すると、元の2つのベクトルの差である別のベクトルが得られます。 3つの頂点はすべて三角形の平面にあるため、三角形の頂点を表すベクトルの差により、三角形の表面に平行なベクトルが生成されます。 cross（）関数のエクスポートでのパラメーターの順序に注意してください。aとbを交換すると、法線ベクトルの方向は逆になります。

手持ちの法線を見つける方法ができたら、 explode（）関数の実装に進むことができます。この関数は、法線ベクトルと頂点の位置ベクトルを受け入れ、法線に沿ってシフトした新しい頂点位置を返します。

 vec4 explode(vec4 position, vec3 normal) { float magnitude = 2.0; vec3 direction = normal * ((sin(time) + 1.0) / 2.0) * magnitude; return position + vec4(direction, 0.0); } 

コードはかなり明白です。 sin（）関数は、現在の時間に関連付けられた時間変数に依存し、間隔[-1。、1.]の値を定期的に返します。 内向きの爆発（内破）の効果は私たちにとって興味深いものではないため、 sin（）の値を区間[0.、1.]に制限します。 さらに、得られた値と大きさ制御定数は、最終方向ベクトルの計算で法線ベクトルをスケーリングするために使用されます。 このベクトルは、新しいオフセット位置を取得するために、頂点位置の入力パラメーターに追加されます。

対応するレッスンの3Dモデルファイルのレンダリングコードを使用する場合の爆発効果のジオメトリシェーダーの完全なコードを以下に示します。

 #version 330 core layout (triangles) in; layout (triangle_strip, max_vertices = 3) out; in VS_OUT { vec2 texCoords; } gs_in[]; out vec2 TexCoords; uniform float time; vec4 explode(vec4 position, vec3 normal) { ... } vec3 GetNormal() { ... } void main() { vec3 normal = GetNormal(); gl_Position = explode(gl_in[0].gl_Position, normal); TexCoords = gs_in[0].texCoords; EmitVertex(); gl_Position = explode(gl_in[1].gl_Position, normal); TexCoords = gs_in[1].texCoords; EmitVertex(); gl_Position = explode(gl_in[2].gl_Position, normal); TexCoords = gs_in[2].texCoords; EmitVertex(); EndPrimitive(); } 

各頂点を生成する前に、対応するテクスチャ座標を渡すことに注意してください。

また、クライアントコードで均一な時間の値を設定することを忘れないでください。

 shader.setFloat("time", glfwGetTime()); 

結果は、定期的に爆発して元の状態に戻るモデルのあるシーンです。 例はささいなことですが、幾何学的なシェーダーを徹底的に使用することにつながります。

結果のコードは、例と比較できます。

法線ベクトルを表示します

今回は、ジオメトリシェーダーを使用して、実際に非常に便利なものを実装しようとします。レンダリングされたジオメトリの法線ベクトルを表示します。 ライティングアルゴリズムを実装すると、必然的に奇妙な結果と視覚的な不具合が発生しますが、その原因を特定するのは容易ではありません。 ライティングを操作する際の最も一般的なエラーの1つは、頂点データの読み込みエラー、頂点属性の形式の設定エラー、またはシェーダーでの単純な変換エラーに起因する、不正な法線のタスクです。 提供された法線の正確さを判断するツールがあるとすばらしいでしょう。法線の視覚化はそのようなツールの1つであり、幾何学的なシェーダーはその実装のために単純に作成されます。
考え方は単純です。まず、含まれるジオメトリシェーダーなしで通常の方法でシーンをレンダリングし、次に2回目のパスを行いますが、ジオメトリシェーダーによって生成された法線のみを表示します。シェーダーは、入力で三角形タイプのプリミティブを取得し、各頂点の位置で法線ベクトルの方向に3つのセグメントを作成します。擬似コードの形式では、次のようになります。

 shader.use(); DrawScene(); normalDisplayShader.use(); DrawScene(); 

今回、ジオメトリシェーダーは、オンザフライで計算するのではなく、頂点属性として指定された法線を使用します。ジオメトリシェーダは、入力としてクリップ（の空間における位置ベクトルかかるクリップ空間）ので、我々は、同じ空間に法線ベクトルを変換しなければなりません。しかし、これを行う前に、法線行列の助けを借りて法線ベクトルを変換する必要があります-これはスケーリングと回転を考慮する方法です（ビューとモデル行列によって与えられます）。これはすべて頂点シェーダーで行われます。

 #version 330 core layout (location = 0) in vec3 aPos; layout (location = 1) in vec3 aNormal; out VS_OUT { vec3 normal; } vs_out; uniform mat4 projection; uniform mat4 view; uniform mat4 model; void main() { gl_Position = projection * view * model * vec4(aPos, 1.0); mat3 normalMatrix = mat3(transpose(inverse(view * model))); vs_out.normal = normalize(vec3(projection * vec4(normalMatrix * aNormal, 0.0))); } 

クリップスペースに変換された法線ベクトルは、インターフェイスユニットを介して次のシェーダーステージに渡されます。ジオメトリシェーダーは、頂点の属性（位置と法線ベクトル）を読み取り、各頂点の位置に法線方向にセグメントを表示します。

 #version 330 core layout (triangles) in; layout (line_strip, max_vertices = 6) out; in VS_OUT { vec3 normal; } gs_in[]; const float MAGNITUDE = 0.4; void GenerateLine(int index) { gl_Position = gl_in[index].gl_Position; EmitVertex(); gl_Position = gl_in[index].gl_Position + vec4(gs_in[index].normal, 0.0) * MAGNITUDE; EmitVertex(); EndPrimitive(); } void main() { GenerateLine(0); //      GenerateLine(1); // ...   GenerateLine(2); // ...   } 

現時点では、コードに追加の説明は必要ないと思います。法線ベクトルはMAGNITUDE定数を使用してスケーリングされることに注意してください。これにより、表示されるセグメントの長さを制限できます（そうでない場合、わずかに大きすぎます）。

法線の出力は主にデバッグの目的に使用されるため、フラグメントシェーダーを使用して同じ色の線で簡単に表示できます。

 #version 330 core out vec4 FragColor; void main() { FragColor = vec4(1.0, 1.0, 0.0, 1.0); } 

その結果、通常のシェーダーを使用したモデルレンダラーと、新しい通常の可視化シェーダーを使用した再レンダリングの組み合わせにより、次の図が得られます。


ナノスーツがキッチングローブの毛むくじゃらの男のように見えるという事実を無視すると、シーンで使用されているモデルの法線ベクトルの正確さを判断するための非常に便利な方法を得ることができます。それで、ファーエフェクトを実装するシェーダーでも似たようなものが使用されていることが明らかになりました。

この例のソースコードはこちらです。

PS：転送を調整するための電報confがあります。翻訳を手伝いたいという真剣な願望があれば、大歓迎です！