【オーバーロードゲームエンジンの詳細解析】描画シーンラスターのシェーダー解析

オーバーロード エンジンのアドレス: GitHub - adriengivry/Overload: エディター付き 3D ゲーム エンジン

1. ラスター描画の基本原理

オーバーロード エディタを起動すると、シーン ビューにグリッド ラインが表示されます。これは多くのソフトウェアで見られます。最初は線を引いてやろうと思っていました。コードを読むと、このグリッドの幾何学的メッシュは 2 つの三角形のパッチで構成される正方形にすぎず、特別なシェーダーを使用して描画されていることがわかりました。

ラスターを描画するためのコードは EditorRenderer.cpp にあります。コードは次のとおりです。

void OvEditor::Core::EditorRenderer::RenderGrid(const OvMaths::FVector3& p_viewPos, const OvMaths::FVector3& p_color)
{
    constexpr float gridSize = 5000.0f; // 栅格的总的大小
 
    FMatrix4 model = FMatrix4::Translation({ p_viewPos.x, 0.0f, p_viewPos.z }) * FMatrix4::Scaling({ gridSize * 2.0f, 1.f, gridSize * 2.0f }); // 栅格的模型矩阵
	m_gridMaterial.Set("u_Color", p_color); // 栅格的颜色
	m_context.renderer->DrawModelWithSingleMaterial(*m_context.editorResources->GetModel("Plane"), m_gridMaterial, &model); // 绘制栅格

    // 绘制坐标轴的三条线
    m_context.shapeDrawer->DrawLine(OvMaths::FVector3(-gridSize + p_viewPos.x, 0.0f, 0.0f), OvMaths::FVector3(gridSize + p_viewPos.x, 0.0f, 0.0f), OvMaths::FVector3(1.0f, 0.0f, 0.0f), 1.0f);
    m_context.shapeDrawer->DrawLine(OvMaths::FVector3(0.0f, -gridSize + p_viewPos.y, 0.0f), OvMaths::FVector3(0.0f, gridSize + p_viewPos.y, 0.0f), OvMaths::FVector3(0.0f, 1.0f, 0.0f), 1.0f);
    m_context.shapeDrawer->DrawLine(OvMaths::FVector3(0.0f, 0.0f, -gridSize + p_viewPos.z), OvMaths::FVector3(0.0f, 0.0f, gridSize + p_viewPos.z), OvMaths::FVector3(0.0f, 0.0f, 1.0f), 1.0f);
}

このことから、三角形が常に視錐台内に収まるようにパッチが最初に視点の前面に移動され、三角形が合計サイズ 10,000 にスケーリングされることがわかります。次に、m_gridmaterial マテリアルを使用して描画します。いわゆるマテリアルは Shader のカプセル化です。最後に座標軸の3本の線を描きます。

RenderDoc を使用してフレームをキャプチャし、これが実際に当てはまることを確認できます。

2. ラスター描画用のシェーダーコード

ラスターを描画するための頂点シェーダー コードは次のとおりです。

#version 430 core

layout (location = 0) in vec3 geo_Pos;
layout (location = 1) in vec2 geo_TexCoords;
layout (location = 2) in vec3 geo_Normal;

layout (std140) uniform EngineUBO
{
    mat4    ubo_Model;
    mat4    ubo_View;
    mat4    ubo_Projection;
    vec3    ubo_ViewPos;
    float   ubo_Time;
};

out VS_OUT
{
    vec3 FragPos;
    vec2 TexCoords;
} vs_out;

void main()
{
    vs_out.FragPos      = vec3(ubo_Model * vec4(geo_Pos, 1.0)); // 计算顶点世界坐标系坐标
    vs_out.TexCoords    = vs_out.FragPos.xz;  // 对应的纹理坐标，取对应的世界坐标

    gl_Position = ubo_Projection * ubo_View * vec4(vs_out.FragPos, 1.0); // 计算NDC坐标
}

 Vertex Shader のコードは比較的単純で、有効な入力は geo_Pos のみです。EngineUBO は、モデル、ビュー、射影行列を渡す OpenGL の UBO 変数です。main メソッドでは、ワールド座標系の座標、テクスチャ座標、および三角形の出力 gl_Position 変数が計算されます。

フラグメントシェーダーのコードは以下の通りです。

#version 430 core

out vec4 FRAGMENT_COLOR;

layout (std140) uniform EngineUBO
{
    mat4    ubo_Model;
    mat4    ubo_View;
    mat4    ubo_Projection;
    vec3    ubo_ViewPos;
    float   ubo_Time;
};

in VS_OUT
{
    vec3 FragPos;
    vec2 TexCoords;
} fs_in;

uniform vec3 u_Color;

float MAG(float p_lp)
{
  const float lineWidth = 1.0f;

  const vec2 coord       = fs_in.TexCoords / p_lp;
  const vec2 grid        = abs(fract(coord - 0.5) - 0.5) / fwidth(coord);
  const float line       = min(grid.x, grid.y);
  const float lineResult = lineWidth - min(line, lineWidth);

  return lineResult;
}

float Grid(float height, float a, float b, float c)
{
  const float cl   = MAG(a);
  const float ml   = MAG(b);
  const float fl   = MAG(c);

  const float cmit =  10.0f;
  const float cmet =  40.0f;
  const float mfit =  80.0f;
  const float mfet =  160.0f;

  const float df   = clamp((height - cmit) / (cmet - cmit), 0.0f, 1.0f);
  const float dff  = clamp((height - mfit) / (mfet - mfit), 0.0f, 1.0f);

  const float inl  = mix(cl, ml, df);
  const float fnl  = mix(inl, fl, dff);

  return fnl;
}

void main()
{
  const float height = distance(ubo_ViewPos.y, fs_in.FragPos.y);

  const float gridA = Grid(height, 1.0f, 4.0f, 8.0f);
  const float gridB = Grid(height, 4.0f, 16.0f, 32.0f);

  const float grid  = gridA * 0.5f + gridB;

  // const vec2  viewdirW    = ubo_ViewPos.xz - fs_in.FragPos.xz;
  // const float viewdist    = length(viewdirW);
  
  FRAGMENT_COLOR = vec4(u_Color, grid);
}

Fragment シェーダのコードがよく分からないので、必要に応じて解析してみます。

3. 座標軸シェーダーを描画する

それに比べて、座標軸を描画する Shader ははるかに単純です。ラインの頂点は 2 つの均一変数を使用してラインの 2 つの頂点を渡し、gl_VertexID に基づいてどの頂点を使用するかを決定します。FSは直接色を与えます。

############ Vertex Shader ###########

#version 430 core

uniform vec3 start;
uniform vec3 end;
uniform mat4 viewProjection;

void main()
{
	vec3 position = gl_VertexID == 0 ? start : end;
    gl_Position = viewProjection * vec4(position, 1.0);
}


########  Fragment Shader #############
#version 430 core

uniform vec3 color;

out vec4 FRAGMENT_COLOR;

void main()
{
	FRAGMENT_COLOR = vec4(color, 1.0);
}

CPU側の対応コード：

void OvRendering::Core::ShapeDrawer::DrawLine(const OvMaths::FVector3& p_start, const OvMaths::FVector3& p_end, const OvMaths::FVector3& p_color, float p_lineWidth)
{
    // 绑定line Shader
	m_lineShader->Bind();

	m_lineShader->SetUniformVec3("start", p_start); // 线的起点
	m_lineShader->SetUniformVec3("end", p_end);     // 线的终点
	m_lineShader->SetUniformVec3("color", p_color); // 线的颜色

    // 绘制线
	m_renderer.SetRasterizationMode(OvRendering::Settings::ERasterizationMode::LINE);
	m_renderer.SetRasterizationLinesWidth(p_lineWidth);
    // 掉Draw call
	m_renderer.Draw(*m_lineMesh, Settings::EPrimitiveMode::LINES);
	m_renderer.SetRasterizationLinesWidth(1.0f);
	m_renderer.SetRasterizationMode(OvRendering::Settings::ERasterizationMode::FILL);

	m_lineShader->Unbind();
}

ここには m_lineMesh オブジェクトがあり、2 つのランダムな頂点が含まれています。これは頂点シェーダーを 2 回開始するだけです。実際の頂点座標は、uniform によって渡されます。オーバーロードはすべて 0 に初期化します。

std::vector<Geometry::Vertex> vertices;
	vertices.push_back
	({
		0, 0, 0,// 坐标
		0, 0,   // 纹理
		0, 0, 0,// 法线
		0, 0, 0,
		0, 0, 0
	});
	vertices.push_back
	({
		0, 0, 0,
		0, 0,
		0, 0, 0,
		0, 0, 0,
		0, 0, 0
	});

	m_lineMesh = new Resources::Mesh(vertices, { 0, 1 }, 0);