2D Renderer Transforms and 2D Renderer Textures

在2D renderer 中,我们渲染的图元基本上全是矩形,加载纹理时,也是将对应的纹理贴到一个矩形内,本节就是实现了纹理在 2D renderer 中的加载以及进行了 shader 中 uniform 的设置从而控制图形的变换操作。

由于我们之前没有给 shader.cpp 中添加设置 uniform 的接口,之前对 uniform 的设置是通过强制转换为 OpenGLShader 指针之后再进行的设置:

std::dynamic_pointer_cast<OpenGLShader>(s_Data->FlatColorShader)->Bind();std::dynamic_pointer_cast<OpenGLShader>(s_Data->FlatColorShader)->UploadUniformMat4("u_ViewProjection", camera.GetViewProjectionMatrix());std::dynamic_pointer_cast<OpenGLShader>(s_Data->FlatColorShader)->UploadUniformMat4("u_Transform", glm::mat4(1.0f));

所以在 shader 中添加对应的接口:

     virtual void SetInt(const std::string& name, int value) = 0;virtual void SetFloat3(const std::string& name, const glm::vec3& value) = 0;virtual void SetFloat4(const std::string& name, const glm::vec4& value) = 0;virtual void SetMat4(const std::string& name, const glm::mat4& value) = 0;

在 OpenGLShader 中实现:

 void OpenGLShader::SetInt(const std::string& name, int value){UploadUniformInt(name, value);}void OpenGLShader::SetFloat3(const std::string& name, const glm::vec3& value){UploadUniformFloat3(name, value);}void OpenGLShader::SetFloat4(const std::string& name, const glm::vec4& value){UploadUniformFloat4(name, value);}void OpenGLShader::SetMat4(const std::string& name, const glm::mat4& value){UploadUniformMat4(name, value);}

然后之前用转换之后的指针进行设置 uniform 的代码可以换掉了:(这里添加了一个 Texture shader 用于 texture 加载)

     s_Data->FlatColorShader->Bind();s_Data->FlatColorShader->SetMat4("u_ViewProjection", camera.GetViewProjectionMatrix());s_Data->TextureShader->Bind();s_Data->TextureShader->SetMat4("u_ViewProjection", camera.GetViewProjectionMatrix());

DrawQuad 函数中的也可以替换掉了,并且添加了 transform:

void Renderer2D::DrawQuad(const glm::vec3& position, const glm::vec2& size, const glm::vec4& color){s_Data->FlatColorShader->Bind();s_Data->FlatColorShader->SetFloat4("u_Color", color);glm::mat4 transform = glm::translate(glm::mat4(1.0f), position) * glm::scale(glm::mat4(1.0f), { size.x, size.y, 1.0f });s_Data->FlatColorShader->SetMat4("u_Transform", transform);s_Data->QuadVertexArray->Bind();RenderCommand::DrawIndexed(s_Data->QuadVertexArray);}

然后我们添加了用于绘制 texture 的 DrawQuad 函数:

void Renderer2D::DrawQuad(const glm::vec2& position, const glm::vec2& size, const Ref<Texture2D>& texture){DrawQuad({ position.x, position.y, 0.0f }, size, texture);}void Renderer2D::DrawQuad(const glm::vec3& position, const glm::vec2& size, const Ref<Texture2D>& texture){s_Data->TextureShader->Bind();glm::mat4 transform = glm::translate(glm::mat4(1.0f), position) * glm::scale(glm::mat4(1.0f), { size.x, size.y, 1.0f });s_Data->TextureShader->SetMat4("u_Transform", transform);texture->Bind();s_Data->QuadVertexArray->Bind();RenderCommand::DrawIndexed(s_Data->QuadVertexArray);}

然后进行测试,首先创建成员变量 m_CheckerboardTexture ,然后在 SandBox::OnAttach 函数中进行加载:

 m_CheckerboardTexture = Hazel::Texture2D::Create("assets/textures/Checkerboard.png");

添加纹理坐标,然后添加布局和进行 texture 绑定:

float squareVertices[5 * 4] = {-0.5f, -0.5f, 0.0f, 0.0f, 0.0f,0.5f, -0.5f, 0.0f, 1.0f, 0.0f,0.5f,  0.5f, 0.0f, 1.0f, 1.0f,-0.5f,  0.5f, 0.0f, 0.0f, 1.0f};squareVB->SetLayout({{ ShaderDataType::Float3, "a_Position" },{ ShaderDataType::Float2, "a_TexCoord" }});s_Data->TextureShader = Shader::Create("assets/shaders/Texture.glsl");s_Data->TextureShader->Bind();s_Data->TextureShader->SetInt("u_Texture", 0);

绘制了三个矩形进行测试,其中一个使用纹理:

 Hazel::Renderer2D::BeginScene(m_CameraController.GetCamera());Hazel::Renderer2D::DrawQuad({ -1.0f, 0.0f }, { 0.8f, 0.8f }, { 0.8f, 0.2f, 0.3f, 1.0f });Hazel::Renderer2D::DrawQuad({ 0.5f, -0.5f }, { 0.5f, 0.75f }, { 0.2f, 0.3f, 0.8f, 1.0f });Hazel::Renderer2D::DrawQuad({ 0.0f, 0.0f, -0.1f }, { 10.0f, 10.0f }, m_CheckerboardTexture);Hazel::Renderer2D::EndScene();

然后为了让 texture 显示在最底层,我们设置了其 z轴坐标为 -0.1,为了使设置生效,需要打开 OpenGL 的深度测试:

//OpenGLRenderAPI::Init()
glEnable(GL_DEPTH_TEST);

之后运行,正常显示结果:

HazelEngine 学习记录 - 2D Renderer Transforms and 2D Renderer Textures相关推荐

  1. HazelEngine 学习记录 - Shader Abstraction and Uniforms

    Shader Abstraction and Uniforms 我们之前创建的 Shder 类主要是依赖于 OpenGL 的,并没有完全抽象出来,这节的主要内容就是将 Shader 抽象,具体的实现放 ...

  2. HazelEngine 学习记录 - ImGui Docking

    ImGui Docking 本节主要是将 ImGui 从 master 分支移到 Docking 分支,然后修改之前的 ImGuiLayer 文件 首先 cd 到 imgui 目录,然后执行 git ...

  3. HazelEngine 学习记录 - Layers

    Layers 游戏引擎的层级理解如下: 首先很容易接触到的是游戏制作者会调用的表层的各个模块,称为工具层(Tool Layer). 然后我们会理解这些工具背后的逻辑是什么,使用了什么功能,比如游戏世界 ...

  4. Unity 3D 官方教程—— 2D Physics系列 学习记录

    1.2D Physics Overview 1.2D Physics游戏对象和3D Physics游戏对象可共存在一个场景,但是它们不能相互反应(interact with each other). ...

  5. 【系统学习】环境土壤物理模型HYDRUS1D/2D/3D

    Hydrus是基于Windows系统界面开发的环境土壤物理模拟软件,是模拟一维和多维变饱和多孔介质的水流.溶质(污染物等)运移.根系吸水和溶质吸收.热量传输等方面的强有力工具.该模型具有灵活方便的图形 ...

  6. 大创学习记录(四)之yolov3代码学习

    PyTorch-YOLOv3项目训练与代码学习 借助从零开始的PyTorch项目理解YOLOv3目标检测的实现 PyTorch 对于PyTorch就不用多说了,目前最灵活.最容易掌握的深度学习库,它有 ...

  7. segNet学习记录

    segNet学习记录 一.论文部分 1.数据细节 数据集细节我们从m2cai -工具训练集的视频1和2下采样307张图像,并在像素级别将它们注释为各种不同的类别和子类别,如下所示: 器官:肝脏,胆囊, ...

  8. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  9. CVPR2019| 百度17篇CVPR论文学习记录(包含:无人驾驶、神经网络、GAN、无监督学习、目标检测)

    首先感谢现在网上资源丰富,能够获得很多人的总结,结合自身实际进行了学习记录. 并着重标注了其中关键核心 目录 1)Taking A Closer Look at Domain Shift: Categ ...

最新文章

  1. 企业云桌面-06-安装数据库服务器-051-vCdb01
  2. SpringSecurity分布式整合之认证模块搭建
  3. (网页)parseFloat在工作中遇到的错误
  4. 双向链表的C++类模板实现
  5. C++ 对象模型(二)
  6. LR预设王家卫港风胶片复古调色滤镜支持PR/PS/FCPX/达芬奇/AE/LUT
  7. 机械--NX2007(UG)有限元分析教程1--简单物体
  8. matlab信号处理——数据处理基础
  9. 帝国CMS仿《游戏资讯网》优化版整站源码/专业游戏资讯网站系统模版
  10. 公司年会要求搞一个抽奖程序,及时安排一波
  11. 时间管理之番茄工作法
  12. cadence SPB17.4 - export placement file to openpnp
  13. radam+lookahead optimizer
  14. 什么是广域网?它的特点以及与局域网的不同点是什么?
  15. 抓取知网摘要、搜狗微信文章、搜狗新闻的爬虫
  16. 树莓派直接连电脑热点
  17. 改革IMF首先要增加中国发言权
  18. SpringBoot读取自定义环境配置信息的方法
  19. html可编辑的表格
  20. 花嫁之容氏浅浅最后怎么样了_花嫁之容氏浅浅小说

热门文章

  1. 会员营销体系中,企业会员营销需要注意的三个会员问题
  2. Open judge 1.8.3
  3. OneNote 深度评测:使用资源、插件、模版
  4. 七大开放式联网企业商业模式
  5. HiveSQL一天一个小技巧:如何借助于str_to_map进行行转列
  6. 17.答题卡识别判卷
  7. 汉罗塔小游戏(自创)
  8. caffe入门学习:caffe.Classifier的使用
  9. webdriver+Chrome 设置代理
  10. Idea中怎么运行从github上下载的项目