🧥 👩🏿‍🤝‍👩🏼 👧🏻 OpenGLおよびGLSLの手続き型植生 🎇 🎫 👩🏿‍🤝‍👩🏼

この投稿では、ハードウェアテッセレーションとジオメトリシェーダーを使用して、最小限の入力に基づいて多くのジオメトリを生成することについてお話したいと思います。この記事が、シェーダープログラミングの最初の理解はあるが、プログラム可能なグラフィックスパイプラインの完全なパワーをまだ理解していない人には役立つことを願っています。これは初心者向けのシェーダーガイドではないため、作業の多くの側面がカーペットの下に表示されるか、対応するドキュメントへのリンクが提供されます。

ナレーションは、上の写真のようなシーンを生成する小さなデモの例で行われます。 CPUでデータを準備してから、フラグメントシェーダーの出力に色の値を書き込むまで、エキサイティングな旅をします。

目標と手段

デモを作成するとき、次の目標を設定しました。

ビデオメモリに保存されるデータの量を最小限にします。その結果：
利用可能なすべてのパイプラインステージを使用して、可能な限りGPUを廃棄します。
いくつかのシーン設定をカスタマイズ可能にします。
ジオメトリとシェーダーの作成に焦点を当て、残りのコンポーネントに最小限の労力を費やします。したがって、最もよく知られているインスツルメンテーション、C ++ 11（gcc）、Qt5 + qmake、GLSLが使用されました。
可能であれば、アセンブリを簡素化し、さまざまなプラットフォームで結果のデモを起動します。

このリストに基づいて、いくつかのポイントの研究を犠牲にしなければなりませんでした。

メインループは基本的に作成されます。したがって、アニメーションの速度とカメラの動きはフレームレートに依存するため、空間内のカメラの位置に依存します。
カメラの単一のクラスでは、そのすべてを変更するために、座標、方向、投影、および機能が関与します。このフォームでは、書き込みにそれほど時間はかからず、カメラパラメーターをシェーダーにかなり最適に転送することができました。
シェーダークラスは、対応するQt5クラスのかなり薄いラッパーの形で作成されます。さまざまな段階で共通するコードの断片は、一緒に接着され、コンパイラオプティマイザーに渡されます。コンパイラオプティマイザーは、未使用のコードとグローバル変数を破棄します。
プログラムは単一のシェーダーを使用するため、「newfangled」 UBOなしでデータ転送が行われます。この場合、コードを複雑化してもパフォーマンスは向上しません。
1秒あたりのフレームカウンターは、 OpenGLクエリに基づいています。したがって、「実際の」FPSは表示されませんが、Qtによって発生するオーバーヘッドを考慮に入れない、わずかに過大評価された理想的なインジケーターが表示されます。
このデモを作成する目的はクールな照明ではなかったため、シェーダーに1つの光源を使用したPhong照明の単純な実装が使用されます。
シェーダーでのノイズの実装は、サードパーティの著者から取られました。

ストーリーの過程でデモのコード全体をレビューする機会を読者に提供するために、すぐにリポジトリへのリンクを提供します。

ジオメトリ生成の簡単な概要

パッチのセットを描画します。各パッチには単一の頂点が含まれます。各頂点には、1つの4コンポーネント属性が含まれます。データのこの最小限の部分をシードとして使用して、このような各パッチ（つまり、1ポイント）の可動ステムのブッシュ全体を「成長」させます。さらに、ユーザー定義のパラメーターを使用して、すべてのブッシュを風にさらすことができます。ブッシュ生成作業のほとんどは、テッセレーション評価シェーダーおよびジオメトリシェーダーで行われます。そのため、テッセレーションシェーダーでは、攪拌と風によるすべての変形でブッシュスケルトンが生成され、ジオメトリシェーダーでは、ポリゴンの「肉」がこのスケルトン上に引き伸ばされます。フラグメントシェーダーは、通常どおり、照明を計算し、ボロノイ図に基づいて手続き的に生成されたテクスチャを適用します。

それでは始めましょう！

CPU

モニターのピクセルを色付けするデータの方法は、CPUでの準備から始まります。前述のように、シーンの各「モデル」は最初は1つの頂点で構成されています。この頂点を4次元にします。最初の3つのコンポーネントは空間内の頂点の位置であり、4番目のコンポーネントはブッシュ内のステムの数です。したがって、ブッシュは、茎の数が互いに異なることができます。有限サイズの正方格子のノードから座標の生成を開始し、与えられた間隔からランダムな値で各座標を摂動します。

const int numNodes = 14; //      . const GLfloat gridStep = 3.0f; //  . //     : const GLfloat xDispAmp = 5.0f; const GLfloat zDispAmp = 5.0f; const GLfloat yDispAmp = 0.3f; //    . numClusters = numNodes * numNodes; //  . GLfloat *vertices = new GLfloat[numClusters * 4]; //    . std::random_device rd; std::mt19937 mt(rd()); std::uniform_real_distribution<GLfloat> xDisp(-xDispAmp, xDispAmp); std::uniform_real_distribution<GLfloat> yDisp(-yDispAmp, yDispAmp); std::uniform_real_distribution<GLfloat> zDisp(-zDispAmp, zDispAmp); std::uniform_int_distribution<GLint> numStems(12, 64); //  . for(int i = 0; i < numNodes; ++i) { for(int j = 0; j < numNodes; ++j) { const int idx = (i * numNodes + j) * 4; vertices[idx] = (i - numNodes / 2) * gridStep + xDisp(mt); vertices[idx + 1] = yDisp(mt); vertices[idx + 2] = (j - numNodes / 2) * gridStep + zDisp(mt); vertices[idx + 3] = numStems(mt); } }

生成されたデータをビデオメモリに送信します。

 GLuint vao; // https://www.opengl.org/wiki/Vertex_Specification#Vertex_Array_Object GLuint posVbo; // https://www.opengl.org/wiki/Vertex_Specification#Vertex_Buffer_Object glGenVertexArrays(1, &vao); glBindVertexArray(vao); glGenBuffers(1, &posVbo); glEnableVertexAttribArray(ATTRIBINDEX_VERTEX); glBindBuffer(GL_ARRAY_BUFFER, posVbo); glVertexAttribPointer(ATTRIBINDEX_VERTEX, 4, GL_FLOAT, GL_FALSE, 0, 0); glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * numClusters * 4, vertices, GL_STATIC_DRAW); glFinish(); delete[] vertices;

これで、生成された草から芝生全体をレンダリングする方法は非常に簡潔に見えます。

 void ProceduralGrass::draw() { glBindVertexArray(vao); glPatchParameteri(GL_PATCH_VERTICES, 1); glDrawArrays(GL_PATCHES, 0, numClusters); glBindVertexArray(0); }

シェーダーでは、ジオメトリに加えて、均等に分布した乱数が必要です。間隔[0;で数値を取得するのが最適です。 1]、および特定の各場所のGPUで、それらを必要な間隔にします。これらを1次元テクスチャーの形でビデオメモリに配信します。このテクスチャーには、最も近い値がフィルターとして設定されます。 2次元の場合、そのようなフィルタリングは同様の結果につながることを思い出させてください。

foobar

出所

生成およびテクスチャ設定コード：

 const GLuint randTexSize = 256; GLfloat randTexData[randTexSize]; std::random_device rd; std::mt19937 gen(rd()); std::uniform_real_distribution<float> dis(0.0f, 1.0f); std::generate(randTexData, randTexData + randTexSize, [&](){return dis(gen);}); // Create and tune random texture. glGenTextures(1, &randTexture); glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_1D, randTexture); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_BASE_LEVEL, 0); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MAX_LEVEL, 0); glTexImage1D(GL_TEXTURE_1D, 0, GL_R16F, randTexSize, 0, GL_RED, GL_FLOAT, randTexData); glUniform1i(glGetUniformLocation(grassShader.programId(), "urandom01"), 0);

頂点シェーダー

原則として、テッセレーションを使用する場合、頂点シェーダーは非常に遅延していることが判明します。これは、パイプラインがそこから開始し、まだジオメトリが存在しないためです。この場合、頂点シェーダーは簡単です。その中で、単に入口から出口にすぐにポイントを送信します：

 layout(location=0) in vec4 position; void main(void) { gl_Position = position; }

テセレーション

ハードウェアテッセレーションは、GPUを使用してポリゴンモデルの粒度を高めるための強力な手法です。中央処理装置で実行されるポリゴンを三角形に分割するアルゴリズムと混同しないでください。ハードウェアテッセレーションは、グラフィックパイプラインの3つのステージで構成され、そのうちの2つをプログラムできます（黄色で強調表示）。

シェーダーとその入力/出力の詳細については、以下で説明します。ここでは、任意の数の頂点で構成されるパッチがテッセレーション入力に適用されます。これは、各glDraw *呼び出しに対して固定され、少なくとも32に制限されます。これらの頂点の属性は、あなたが望むように。これは、古い頂点シェーダーと比較して本当に素晴らしい機会を提供します。

プログラム可能なテッセレーションの作業モデルは、他のシェーダーとは大きく異なり、頂点シェーダーと幾何学的シェーダーの使用経験がある場合でも、最初にそれに慣れると戸惑う可能性があります。

テッセレーション制御シェーダー

一般的な場合、頂点シェーダーを個別に通過した入力パッチのすべての頂点は、テッセレーションコントロールシェーダーで使用できます。その入力は、gl_PatchVerticesInパッチの頂点の数、gl_PrimitiveIDパッチのシリアル番号、および出力頂点のシリアル番号gl_InvocationIDを受け取ります。これについては後で説明します。 gl_PrimitiveIDパッチのシーケンス番号は、単一のglDraw *呼び出しの一部としてカウントされます。頂点データ自体は、次のように宣言されたgl_in構造体の配列を介してアクセスできます。

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

この配列には、0からgl_PatchVerticesIn-1までインデックスが付けられます。この宣言で最も重要なのは、頂点シェーダーの出力からのデータを含むgl_Positionフィールドです。出力パッチの頂点の数は、シェーダーのコードでグローバル宣言によって設定されます。

 layout (vertices = 1) out; //

入力パッチの頂点の数と一致する必要はありません。シェーダー呼び出しの数は、出力頂点の数に等しくなります。各呼び出しで、シェーダーはパッチのすべての入力頂点にアクセスできますが、gl_out出力配列のgl_InvocationIDインデックスにのみ書き込むことができます。

 out gl_PerVertex { vec4 gl_Position; float gl_PointSize; float gl_ClipDistance[]; } gl_out[];

次に、より興味深い事実に移りましょう。シェーダーはgl_InvocationIDインデックスでのみ書き込むことができますが、どのインデックスでも出力配列を読み取ることができます！シェーダーの作業は非常に並列化されており、それらの呼び出しの順序は決定論的ではないことを覚えています。これにより、シェーダーによるデータの共有に制限が課されますが、SIMD並列処理が可能になり、コンパイラーは最も厳しい最適化を使用するようになります。これらのルールの違反を防ぐために、テッセレーションコントロールシェーダーでバリア同期を使用できます。組み込みのbarrier（）関数を呼び出すと、すべてのパッチシェーダーがこの関数を呼び出すまで実行がブロックされます。この関数の呼び出しには重大な制限が課せられます。main以外の関数から呼び出すことはできません。フロー制御構造（for、while、switchなど）で呼び出すことはできず、戻り後に呼び出すことはできません。

最後に、パイプラインのこの段階で最も興味深いのは、頂点の出力が主なものではないことです。 gl_outに記録された座標からポリゴンは収集されません。テッセレーションコントロールシェーダーの主な製品は、次の出力配列への書き込みです。

 patch out float gl_TessLevelOuter[4]; patch out float gl_TessLevelInner[2];

これらの配列は、いわゆる抽象パッチの頂点の数を制御するため、この段階はテッセレーション制御と呼ばれます。抽象パッチは、テッセレーションプリミティブ生成段階で生成される2次元の幾何学的形状のポイントのセットです。抽象パッチには、三角形、正方形、輪郭の3つの形式があります。同時に、各タイプの抽象パッチについて、シェーダーは必要なインデックスgl_TessLevelOuterとgl_TessLevelInnerのみを入力する必要があり、これらの配列の残りのインデックスは無視されます。生成されたパッチには、幾何学的図形の頂点だけでなく、境界線上および図形内部の点の座標も含まれます。たとえば、gl_TessLevelOuterとgl_TessLevelInnerのいくつかの値を持つ正方形は、この種の三角形から形成されます。

正方形の左下隅の座標は常に[0; 0]、右上-[1; 1]、および他のすべてのポイントには、0〜1の値を持つ対応する座標があります。

輪郭は基本的に正方形であり、三角形ではなく長方形に分割されます。等高線上の点の座標の値も、0〜1の間隔に属します。

しかし、三角形の内側の座標は根本的に異なります。2次元の三角形では、3成分の重心座標が使用されます。さらに、それらの値も0から1の間隔にあり、三角形は正三角形です。

抽象パッチの特定のタイプのパーティション（実際には、本来の意味ではテッセレーションと呼ばれます）は、gl_TessLevelOuterとgl_TessLevelInnerに大きく依存しています。ここで詳しく説明することも、InnerがOuterとどのように異なるかについても分析しません。これらはすべて、OpenGLマニュアルの対応するセクションで詳細に説明されています。

さて、植物に戻りましょう。グラフィックパイプラインのこの段階では、既存の単一ポイントに対して意味のある変換を実行することはまだできないため、入力シェーダーを変更せずにこのシェーダーの出力に渡します。

 gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;

ジオメトリを生成するには、長方形の格子、つまり「アイソライン」タイプの抽象的なパッチを使用します。輪郭の生成は、gl_TessLevelOuter [0] -y座標に沿ったポイントの数、およびgl_TessLevelOuter [1]-xに沿ったポイントの数の2つの変数のみによって制御されます。このプログラムでは、 yに沿ったサイクルがブッシュの茎を通り抜け、各茎に対してxに沿ったサイクルが茎に沿って走ります。したがって、対応する出力に記録するステムの数（入力ポイントの4番目の座標）：

 gl_TessLevelOuter[0] = gl_in[gl_InvocationID].gl_Position.w;

ステムに沿ったポイントの数は、ステムが構成されるセグメントの数、つまりその詳細を決定します。リソースを無駄にしないために、詳細レベルはカメラとブッシュ間の距離に依存します。

 uniform vec3 eyePosition; //         . int lod() { //     : float dist = distance(gl_in[gl_InvocationID].gl_Position.xyz, eyePosition); //        : if(dist < 10.0f) { return 48; } if(dist < 20.0f) { return 24; } if(dist < 80.0f) { return 12; } if(dist < 800.0f) { return 6; } return 4; }

CPU側では、各glDraw *呼び出しの前に同種の変数が入力されます。

 grassShader.setUniformValue("eyePosition", camera.getPosition()); grassShader.setUniformValue("lookDirection", camera.getLookDirection());

それらの最初は空間内のカメラの座標であり、2番目は視線の方向です。カメラの位置、ビューの方向、およびブッシュの座標を知ると、このブッシュがカメラの後ろにあるかどうかを確認できます。

ブッシュが正面にある場合、カメラから前方への方向とカメラからブッシュへの方向との間の角度は鋭くなり、そうでない場合は鈍角になります。したがって、最初の場合、図に示されているベクトルのスカラー積はゼロより大きく、2番目の場合は小さくなります。スカラー積を計算し、ステップ関数がゼロのステップを使用して、ブッシュが後ろにある場合はゼロで、フロントにある場合は1である変数を取得します。

 float halfspaceCull = step(dot(eyePosition - gl_in[gl_InvocationID].gl_Position.xyz, lookDirection), 0);

最後に、将来のブッシュの茎のポイント数を記録できます。

 gl_TessLevelOuter[1] = lod() * halfspaceCull;

テッセレーションシェーダー

用語に関する注意：英語の原文では、このシェーダーはTesselation評価シェーダーと呼ばれます。ロシアのインターネットでは、「テッセレーション評価シェーダー」または「テッセレーション計算シェーダー」のような文字通りの翻訳を見つけることができます。私の意見では、これらは不自然に見え、このシェーダーの本質を反映していません。したがって、ここでは、テッセレーション制御シェーダーがあった前の段階とは異なり、テッセレーション評価シェーダーは単にテッセレーションシェーダーと呼ばれます。

テッセレーションは、テッセレーションシェーダーがシェーダープログラムに追加されている場合にのみ有効になります。同時に、テッセレーションコントロールシェーダーは必須ではありません。その存在は、入力パッチを変更せずに出力に適用することと同等です。 gl_TessLevel *配列の値は、パラメータGL_PATCH_DEFAULT_OUTER_LEVELまたはGL_PATCH_DEFAULT_INNER_LEVELを指定してglPatchParameterfvを呼び出すことにより、CPU側で設定できます。この場合、テッセレーションシェーダーのすべての抽象パッチは同じになります。プログラムにテッセレーションコントロールシェーダーのみを追加しても意味がなく、シェーダーレイアウトエラーが発生します。抽象パッチの形式は、そのパラメーターとは対照的に、テッセレーションシェーダーコードで決定されます。

 layout(isolines, equal_spacing) in; //     .

テッセレーションシェーダーは、抽象パッチの各ポイントに対して呼び出されます。たとえば、ドットが64x64の輪郭を注文した場合、シェーダーは4096回呼び出されます。テッセレーションコントロールシェーダーの出力からのすべてのピークは、その入力になります。

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

gl_PatchVerticesIn、gl_PrimitiveID、gl_TessLevelOuter、gl_TessLevelInnerは既におなじみです。最後の2つの変数は、テッセレーションコントロールシェーダーと同じタイプですが、読み取り専用です。最後に、最も興味深い入力変数は

 in vec3 gl_TessCoord;

これには、抽象パッチの現在の（この呼び出しの）ポイントの座標が含まれます。 vec3として宣言されていますが、gl_TessCoord.zは三角形に対してのみ意味があります。正方形または輪郭のこの座標の読み取りは定義されていません。

シェーダーの出力にいくつかの変数を適用できます。主なものはvec4 gl_Positionであり、パイプラインの次のステージのためにプリミティブが収集される頂点の座標を記録する必要があります。私たちの場合、これはセグメントのシーケンスです。なぜなら、テッセレーションシェーダーは、将来のブッシュのスケルトンのみを生成します。

そのため、抽象パッチの頂点は多数（最大4096）あり、同じセグメントに分割された行に編成されています。この形状を変更せずに線として描画する場合：

 gl_Position = vec4(gl_TessCoord.xy, 0.0f, 1.0f);

ドキュメントの写真に似たものが表示されます。

以下のスクリーンショットでは、小さな側面図

これらの線から茎を作る方法は？開始するには、それらを垂直に配置します。

 gl_Position = vec4(gl_TessCoord.yx, 0.0f, 1.0f);

そして、垂直軸を中心にそれらを円形に配置する方法を学びます。

 vec3 position = vec3(2.0f, gl_TessCoord.x, 0.0f); float alpha = gl_TessCoord.y * 2.0f * M_PI; float cosAlpha = cos(alpha); float sinAlpha = sin(alpha); mat3 circDistribution = mat3( cosAlpha, 0.0f, -sinAlpha, 0.0f, 1.0f, 0.0f, sinAlpha, 0.0f, cosAlpha); position = circDistribution * position; gl_Position = vec4(position, 1.0f);

ただし、このような線は茂みというよりもフェンスのように見えます。ブッシュをより自然にするために、3次ベジエ曲線のように線を曲げましょう。

ウィキペディアの写真、ベジェ曲線に関する記事。

そして、ここで座標gl_TessCoord.xは非常に便利です。これについては、各ステムに沿って0から1まで実行すると考えることに同意しました。曲線の形状は、基準点P ₀ ... P _3に完全に依存します。茎の底は常に地面にあり、その上部は常に空を向いているので、P ₀ =（0; 0）を取ります。そして、残りの自由点の少なくともおおよその位置を選択するために、 cubic-bezier.comは完璧です。その唯一の目的は、必要な形の曲線を作成することです。ここで、gl_TessCoord.xをベジェ曲線の式に代入すると、頂点が曲線上にあり、セグメントが曲線を近似するポリラインが得られます。

 float t = gl_TessCoord.x; //  . float t1 = t - 1.0f; //    ,      . //  : position.xy = -p0 * (t1 * t1 * t1) + p3 * (t * t * t) + p1 * t * (t1 * t1) * 3.0f - p2 * (t * t) * t1 * 3.0f; //     ,        : position.x += 2.0f; //     .      ,  : position.z = 0.0f;

将来的には、湾曲したステムの周囲にポリゴンを構築する必要があります。そのため、破損したステムの各頂点で、ステムに垂直な平面を知る必要があります。微分幾何学の過程から、パラメトリック曲線の主法線のベクトルは、パラメーターに関する曲線の導関数のベクトル積の組み合わせとして取得できることがわかっています。

[B '、[B'、B '']]（1）

平面を一意に指定するには、もう1つのベクトルが必要です。私たちの場合、曲線全体は垂直面XYにあります。つまり、メイン法線はその中にあります。したがって、曲線の従法線は無料で提供されます。これは単なる定数ベクトル（0; 0; 1）です。ここで、居心地の良いXY平面から、ステムが原点を中心に回転することを思い出してください。つまり、法線平面も回転する必要があります。これを行うには、両方の生成ベクトルにステムのポイントと同じ回転行列を掛けるだけで十分です。すべてをまとめる：

 //  : out vec3 normal; out vec3 binormal; // : normal = normalize( circDistribution * //  ,    . vec3( //     ,    (1): p0.y * (t1 * t1) * -3.0f + p1.y * (t1 * t1) * 3.0f - p2.y * (t * t) * 3.0f + p3.y * (t * t) * 3.0f - p2.y * t * t1 * 6.0f + p1.y * t * t1 * 6.0f, p0.x * (t1 * t1) * 3.0f - p1.x * (t1 * t1) * 3.0f + p2.x * (t * t) * 3.0f - p3.x * (t * t) * 3.0f + p2.x * t * t1 * 6.0f - p1.x * t * t1 * 6.0f, 0.0f )); // : binormal = (circDistribution * vec3(0.0f, 0.0f, 1.0f));

また、明確にするために、ステムの詳細を減らします。法線は赤で描画され、従法線は青で描画されます。

アニメーションについて簡単に説明します。まず、茎は自然に動きます。これは、他の元のポイントを中心とした曲線のアンカーポイントの円形回転によって行われます。この場合、初期点の位置と回転の初期位相はランダム変数に依存し（ランダムな1次元テクスチャを覚えていますか？）、それはgl_TessCoord.yとgl_PrimitiveIDに依存します。したがって、各ブッシュの各ステムは独自の方法で移動し、カオスの錯覚を作り出します。また、移動は制御点の移動によって行われるため、法線と従法線は完全に正しいままです。実際、骨格アニメーションを取得しました。このアニメーションでは、ボーンがその場で生成され、メモリを占有しません。

茂みの彼ら自身の動きに加えて、彼らはまだ「風」の影響を受けます。風は、2つのユーザーパラメーターとパーリンノイズに依存する量だけ、ユーザーが指定した方向のステムの頂点の変位です。この場合、風が茎の根を変位させるべきではないため、変位の量に柔軟性関数が乗算されます。

 float flexibility(const in float x) { return x * x; }

ステムt1に沿った座標から取得。カスタム風パラメーターは、純粋に条件付きで「速度」および「乱気流」と呼ばれます。ユーザーがアクセスできる範囲で変更することは、これらの気流パラメーターを変更することに似ているためです。ただし、この「風」は実際の物理学とは関係ありません。インターフェイスの速度スライダーは、法線を調整せずに法線を計算した後、スケルトンに風が適用されるため、意図的に小さな値に制限されています。このため、法線はそのようなものではなくなり、スケルトンの強い歪み（大きな「風速」）により、ポリゴンの自己交差が現れます。

「ノイズの多い」テクスチャがある場合、Perlinノイズはなぜですか？実際、Perlinノイズとは対照的に、テクスチャ値は座標の連続関数ではありません。したがって、各フレームのノイズの多いテクスチャに応じてオフセットを作成すると、滑らかな風の代わりにフレームレートで混oticとした痙攣が生じます。 Perlinのノイズの高品質な実装は、 Stefan Gustavsonから取得されました。

ポリゴンを構築するには他に何が必要ですか？まず、茎の厚さは根から頂点に向かって減少するはずです。したがって、ステムに沿った座標に応じて、対応する出力変数を作成し、それに厚さを転送します。

 out float stemThickness; float thickness(const in float x) { return (1.0f - x) / 0.9f; } //... stemThickness = thickness(gl_TessCoord.x);

ステムに沿った座標とブッシュ内のステムの数も、コンベアに沿ってさらに転送されます。

 out float along; flat out float stemIdx; // ... along = gl_TessCoord.x; stemIdx = gl_TessCoord.y;

テクスチャを適用するときに必要になります。

幾何学シェーダー

最後に、パスの幾何学的部分の終わりに到達しました。ジオメトリシェーダーの入力で、プリミティブ全体を取得します。テッセレーションステージの入力で、適切な量のデータを含むことができる任意のパッチがある場合、プリミティブはポイント、ライン、または三角形です。テッセレーションシェーダーがない場合は、glDraw *呼び出しからのプリミティブ（通常は三角形）がジオメトリシェーダーの入力に表示されます。これは、頂点シェーダーによって垂直に処理された可能性があります。この場合、テッセレーションは、セグメントとして受け入れる輪郭、つまり頂点のペアを生成します。

 layout(lines) in;

これらの頂点は、組み込みの入力配列に書き込まれます。

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

この場合、インデックスは0または1のみで作成できます。ユーザー入力変数も、同じ範囲のインデックスを持つ配列として定義されます。

 in vec3 normal[]; in vec3 binormal[]; in float stemThickness[]; in float along[]; flat in float stemIdx[];

ジオメトリシェーダーの出力に、ポイント、一連の線、一連の三角形を適用できます。最後のオプションを使用します。

 layout(triangle_strip) out;

シェーダーは各入力プリミティブに対して呼び出され、複数のプリミティブを生成できます。これは、2つの組み込み関数を使用して行われます。前のステージと同様に、出力変数はgl_Positionと呼ばれます。入力後、シェーダーは組み込み関数EmitVertex（）を呼び出して、頂点形成の終了についてビデオカードに通知する必要があります。プリミティブのすべての頂点の形成が終了すると、EndPrimitive（）関数が呼び出されます。

ステムのポリゴンは単純に形成されます：セグメントの最初と最後でステムの曲線に垂直な平面を知っているので、これらの平面内でセグメントとの交点の周りを移動し、いくつかのステップで頂点を解放します。詳細は、このステップ、つまり幹がピラミッドまたは円錐のように見えるかどうか。

たとえば、これは、明確にするために、非補間（フラット）座標とフラグメント法線で5セクターの茎の茂みがどのように見えるかです：

そして、ここに説明したアプローチを実装するコードがあります：

 for(int i = 0; i < numSectors + 1; ++i) { //    float around = i / float(numSectors); //   ,   [0; 1] float alpha = (around) * 2.0f * M_PI; //  ()     for(int j = 0; j < 2; ++j) { //     // -      : vec3 r = cos(alpha) * normal[j] + sin(alpha) * binormal[j]; //      : vec3 vertexPosition = r * stemRadius * stemThickness[j] + gl_in[j].gl_Position.xyz; //        . //     . //      , .. gl_Position  //    ,       . fragPosition = vertexPosition; //   . fragNormal = r; //         . fragAlong = along[j]; //       .   // fragAlong  fragAround      ,  //     . fragAround = around; //       ,     //   .     //   . stemIdxFrag = stemIdx[j]; // ,        . //    "" ,     //        . gl_Position = viewProjectionMatrix * vec4 (vertexPosition, gl_in[j].gl_Position.w); EmitVertex(); } } EndPrimitive();

フラグメントシェーダー

フラグメントシェーダーはかなり標準に見えるので、簡単に説明します。その中で、通常のFong照明は、すでに馴染みのあるStephen Gustavsonから取られたVoronoiダイアグラムに基づいたセルの形の手続き型テクスチャで要約されています。テクセルの色は、テクスチャ座標だけでなく、時間（フレーム番号）および茂みの茎の数にも依存します。

 out vec4 outColor; float sfn = float(frameNumber) / totalFrames; float cap(const in float x) { return -abs(fma(x, 2.0f, -1.0f)) + 1.0f; } //... float cell = cellular2x2(vec2(fma(sfn, 100, rand(stemIdxFrag) + fragAlong * 3.0f), cap(fragAround)) * 10.0f).x * 0.3f; outColor = ambient + diffuse + specular + vec4(0.0f, cell, 0.0f, 0.0f)

したがって、細胞は幹に沿って滑らかに「クリープ」し、異なる幹で異なって見えます。

これにより、グラフィックスパイプラインに沿ったデータパスが終了します。つまり、在庫を確保する時間です。

なんで？

それで、より伝統的なアプローチと比較して、私たちは何を獲得しましたか？回答：メモリ、柔軟性、帯域幅の節約。別の方法で同様の柔軟性のアニメーションを作成しようとすると、次のいくつかを行う必要があります。

ジオメトリをビデオメモリにストリーミングし、同時にCPUをロードします。これは最前線の方法であるため、このようなデータ量に対してだれもほとんど実行しません。
ボーンをメモリに保存し、ジオメトリシェーダーを使用します。ただし、一部のメタデータには、頂点の追加属性が必要になる可能性が最も高く、さらに同種の変数を介して大量のデータを転送する必要があります。
アニメーションのランダム性を犠牲にするか、ランダム変数を追加します。これにより、ランダムデータを含む大量のテクスチャが生成されるか、Perlinノイズがさらに計算されます。

便利なリンク

ほとんどのリンクはすでにテキストに含まれています。ここでは、デモの作業中に使用された便利なリンクを残したいと思います。

リアルタイムのナビエ・ストークス方程式。参照で記述された連続媒体の動作を計算する方法は、計算シェーダーで実装することにより、ポストで考慮される擬似風の代わりに使用できます。この「本当の」風は渦を巻いて障害物の周りを流れます。
OpenGLの公式ショートリファレンスマニュアル。特定の組み込み関数の存在を思い出すことができるので、シェーダーを書くときに役立ちます。
プログラマブルパイプラインの概要。

ご清聴ありがとうございました！

UPD1

結果ビデオ

UPD2 Windowsのバイナリへの

リンク。

OpenGLおよびGLSLの手続き型植生