【Overload游戏引擎分析】画场景网格的Shader

news2024/12/26 0:08:13

Overload引擎地址： GitHub - adriengivry/Overload: 3D Game engine with editor

一、栅格绘制基本原理

Overload Editor启动之后，场景视图中有栅格线，这个在很多软件中都有。刚开始我猜测它应该是通过绘制线实现的。阅读代码发现，这个栅格的几何网格只有两个三角形面片组成的正方形，使用特殊Shader绘制出来的。

绘制栅格的代码在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);
}

从中看出，先将面片平移到视点的前方，使得三角形始终在视锥体范围内，同时将三角形进行缩放，总的尺寸缩放到10000。然后使用m_gridMaterial材质进行绘制。所谓的材质就是Shader的封装。最后再绘制坐标轴的三条线。

可以使用RenderDoc抓帧，可以验证确实是这么实现的。

二、栅格绘制的Shader代码

绘制栅格的Vertex Shader代码如下：

#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变量。

Fragment Shader的代码如下：


#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 shader的代码没有看太明白，需要的时候再分析吧。

三、绘制坐标轴线Shader

相比之下，绘制坐标轴线的Shader就简单太多了。线的顶点使用两个uniform变量传入线的两个顶点，根据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对象，其包含两个随意的顶点即可，只是为了启动两次顶点着色器，真实的顶点坐标是靠uniform传入的。Overload将其全部初始化为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);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1060800.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringMVC(二）@RequestMapping注解

SpringMVC(二）@RequestMapping注解

我们先新建一个Module。 我们的依赖如下所示&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaL…
阅读更多...
CAA的VS Studio安装

CAA的VS Studio安装

文章目录 一、官网下载VS Studio二、勾选如下安装信息三、更改软件安装位置四、17专业版密钥 一、官网下载VS Studio 官网下载地址&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/ 下载对应版本后&#xff0c;以VS Studio2017为例&#xff1a; 二、勾…
阅读更多...
OpenCV 15(SIFT/SURF算法)

OpenCV 15(SIFT/SURF算法)

一、SIFT Harris和Shi-Tomasi角点检测算法&#xff0c;这两种算法具有旋转不变性&#xff0c;但不具有尺度不变性&#xff0c;以下图为例&#xff0c;在左侧小图中可以检测到角点&#xff0c;但是图像被放大后&#xff0c;在使用同样的窗口&#xff0c;就检测不到角点了。 尺度…
阅读更多...
OpenMMLab【超级视客营】——支持InverseForm Loss(MMSegmentation的第三个PR)

OpenMMLab【超级视客营】——支持InverseForm Loss(MMSegmentation的第三个PR)

文章目录 1. 任务目标1.1 issue1.2 原理相关资料&#xff08;论文讲解&#xff09;InverseFormSTN(Spatial Transformer Networks) 1.3 实现相关资料&#xff08;相关PR&#xff09; 2. 理解原理3. 代码实现3.X checklist3.0 Issue中的有效内容3.1 MMSegmentation支持multiple …
阅读更多...
计算机网络(第8版)-第4章 网络层

计算机网络(第8版)-第4章 网络层

4.1 网络层的几个重要概念 4.1.1 网络层提供的两种服务 如果主机&#xff08;即端系统&#xff09;进程之间需要进行可靠的通信&#xff0c;那么就由主机中的运输层负责&#xff08;包括差错处理、流量控制等&#xff09;。 4.1.2 网络层的两个层面 4.2 网际协议 IP 图4-4 网…
阅读更多...
（四）正点原子STM32MP135移植——u-boot移植

（四）正点原子STM32MP135移植——u-boot移植

一、概述 u-boot概述就不概述了&#xff0c;u-boot、kernel、dtb三件套&#xff0c;dddd 经过国庆艰苦奋战&#xff0c;已经成功把所有功能移植好了 二、编译官方代码 进入u-boot的目录 2.1 解压源码、打补丁 /* 解压源码 */ tar xf u-boot-stm32mp-v2022.10-stm32mp-r1-r0.…
阅读更多...
zookeeper选举机制

zookeeper选举机制

全新集群选举 zookeeper 全新集群选举机制网上资料很多说法很模糊&#xff0c;仔细思考了一下&#xff0c;应该是这样 得到票数最多的机器>机器总数半数 具体启动过程中的哪个节点成为 leader 与 zoo.cfg 中配置的节点数有关&#xff0c;下面以3个举例 选举过程如下 server…
阅读更多...
【Vue组件化编程】

【Vue组件化编程】

Vue组件化编程 1 对组件的理解2 非单文件组件2.1 基本使用2.2 几个注意点2.3 组件的嵌套2.4 VueComponent构造函数2.5 一个重要的内置关系 3 单文件组件 1 对组件的理解 组件&#xff1a;实现应用中局部功能代码和资源的集合。优点&#xff1a;文件好维护&#xff1b;依赖关系不…
阅读更多...
力扣 -- 96. 不同的二叉搜索树

力扣 -- 96. 不同的二叉搜索树

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int numTrees(int n) {vector<int> dp(n1);//初始化dp[0]1;//填表for(int i1;i<n;i){for(int j1;j<i;j){//状态转移方程dp[i](dp[j-1]*dp[i-j]);}}//返回值return dp[n];} }; 你学会了吗&…
阅读更多...
SpringBoot美食网站系统

SpringBoot美食网站系统

采用技术:springbootvue 项目亲测可以完美运行
阅读更多...
typscript开发环境搭建

typscript开发环境搭建

typescript是基于javascript的强类型标记性语言&#xff0c;使用typescript语言可开发出不同规模的、易于扩展的web页面应用&#xff0c;本文主要描述typescript的开发环境搭建。 npm install -g typescript 如上所示&#xff0c;在本地开发环境中&#xff0c;使用nodejs运行…
阅读更多...
苹果ios应用ipa文件签名为什么需要签名才能上架？有没有别的方式替代苹果签名？

苹果ios应用ipa文件签名为什么需要签名才能上架？有没有别的方式替代苹果签名？

近年来&#xff0c;苹果设备的普及程度逐渐加深&#xff0c;随之而来的是越来越多的应用程序涌入了苹果的应用商店。为了保障用户设备和数据的安全&#xff0c;以及减少恶意程序和恶意软件的传播&#xff0c;苹果公司实行了一套严格的应用安全机制&#xff0c;其中就包括应用程…
阅读更多...
【现代机器人学】学习笔记十四：中文版印刷/翻译勘误

【现代机器人学】学习笔记十四：中文版印刷/翻译勘误

首先声明&#xff0c;这个印刷/勘误并非经过官方的认可&#xff0c;只是我个人的粗浅的理解。如果内容有误&#xff0c;恳请大家谅解指正。 其实有的并不算错&#xff0c;只是我个人认为不太准确&#xff0c;在我学习过程中产生了一些小疑惑和误解。 都是一些小毛病&#xff…
阅读更多...
2024级199管理类联考之数学基础(下篇)

2024级199管理类联考之数学基础(下篇)

平面几何(平均2题) 三角形(性质、特殊三角形、全等与相似) 性质 由不在同一直线的三条线段首尾依次连接所组成的图形三条边、三个内角、三个定点三角形内角和为180度,外角和为360度,多边形的外角和为360度,n多边形的内角和为(n-2)*180度一个外角等于不相邻的两个内角之和任意…
阅读更多...
基于SpirngBoot的CRM客户管理系统

基于SpirngBoot的CRM客户管理系统

采用技术: SpringBoottemplate
阅读更多...
NXP公司K60N512+PWM控制BLDC电机

NXP公司K60N512+PWM控制BLDC电机

本篇文章介绍了使用NXP公司提供的塔式快速原型系统来驱动控制带霍尔传感器的无刷直流电机。文章涉及的塔式快速原型系统主要包括以下四个独立板卡&#xff1a;1.塔式系统支撑模块&#xff08;TWR-Elevator&#xff09;&#xff0c;用以连接微控制器以及周边模块&#xff1b;2.低…
阅读更多...
雷达编程实战之提高探测速度

雷达编程实战之提高探测速度

有效帧频率作为雷达一个非常核心的指标&#xff0c;它代表了雷达探测识别的速度&#xff0c;速度越快&#xff0c;后级各项智能驾驶功能就能得到更快、更有效的判断。本篇文章首先从硬件的角度&#xff0c;提供了一种合理利用片上资源提高探测识别速度的常用方法&#xff0c;然…
阅读更多...
qt 5.15.2 安卓 macos

qt 5.15.2 安卓 macos

macos环境安卓配置 我的系统是monterey12.5.1 打开qt的配置界面 这里版本是java1.8&#xff0c;注意修改这个json文件&#xff0c;显示包内容 {"common": {"sdk_tools_url": {"linux": "https://dl.google.com/android/repository/comm…
阅读更多...
Boost程序库完全开发指南：1-开发环境和构建工具

Boost程序库完全开发指南：1-开发环境和构建工具

Boost官方于2019年12月发布的1.72版编写&#xff0c;共包含160余个库/组件&#xff0c;涵盖字符串与文本处理、容器、迭代器、算法、图像处理、模板元编程、并发编程等多个领域&#xff0c;使用Boost&#xff0c;将大大增强C的功能和表现力。环境&#xff1a;Windows 10&#x…
阅读更多...
JAVA学习(4)-全网最详细~

JAVA学习(4)-全网最详细~

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023