前言
到目前,我们的引擎已经完成了最基本的渲染API、纹理、输入控制等逻辑。
今天我们基于这个引擎,在Application层增加一个2D渲染Demo的示例,将引擎的使用流程走一遍。实现一个可设置颜色、可控制移动的矩形。
后续将以这个2D的Demo为起点,实现一个2D渲染器(Renderer2D)
2D Renderer
在SandBoxApp中增加一个Layer(Sandbox2D),继承自Layer并实现Layer的接口。
Renderer2D中添加最基本的三个元素Camera(CameraController)、VertexArray、Shader,就可以实现渲染的逻辑了
实现逻辑如下图:
Sandbox/src/Sandbox2D.h
c++
#pragma once
#include "Hazel.h"
class Sandbox2D : public Hazel::Layer {
public:
Sandbox2D();
~Sandbox2D() override = default;
void OnAttach() override;
void OnDetach() override;
void OnUpdate(Hazel::Timestep ts) override;
void OnImGuiRender() override;
void OnEvent(Hazel::Event &e) override;
private:
Hazel::OrthographicCameraController m_CameraController;
// Temp
Hazel::Ref<Hazel::VertexArray> m_SquareVA;
Hazel::Ref<Hazel::Shader> m_FlatColorShader;
glm::vec4 m_SquareColor = {0.2f, 0.3f, 0.8f, 1.0f};
};
Sandbox/src/Sandbox2D.cpp
c++
#include "Sandbox2D.h"
#include "imgui.h"
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
#include "Platform/OpenGL/OpenGLShader.h"
Sandbox2D::Sandbox2D() : Layer("Sandbox2D"), m_CameraController(1280.0f / 720.0f) {
}
void Sandbox2D::OnAttach() {
m_SquareVA = Hazel::VertexArray::Create();
float squareVertices[5 * 4] = {
-0.5, -0.5f, 0.0f,
0.5, -0.5f, 0.0f,
0.5, 0.5f, 0.0f,
-0.5, 0.5f, 0.0f,
};
Hazel::Ref<Hazel::VertexBuffer> squareVB;
squareVB.reset(Hazel::VertexBuffer::Create(squareVertices, sizeof(squareVertices)));
squareVB->SetLayout({
{Hazel::ShaderDataType::Float3, "a_Position"}
});
m_SquareVA->AddVertexBuffer(squareVB);
uint32_t squareIndices[6] = {0, 1, 2, 2,3, 0};
Hazel::Ref<Hazel::IndexBuffer> squareIB;
squareIB.reset(Hazel::IndexBuffer::Create(squareIndices, sizeof(squareIndices) / sizeof(uint32_t)));
m_SquareVA->SetIndexBuffer(squareIB);
m_FlatColorShader = Hazel::Shader::Create("../assets/shaders/FlatColor.glsl");
}
void Sandbox2D::OnDetach() {
}
void Sandbox2D::OnUpdate(Hazel::Timestep ts) {
// Update
m_CameraController.OnUpdate(ts);
// Render
Hazel::RenderCommand::SetClearColor({0.1f, 0.1f, 0.1f, 1.0});
Hazel::RenderCommand::Clear();
Hazel::Renderer::BeginScene(m_CameraController.GetCamera());
m_FlatColorShader->Bind();
std::dynamic_pointer_cast<Hazel::OpenGLShader>(m_FlatColorShader)->UploadUniformFloat4("u_Color", m_SquareColor);
Hazel::Renderer::Submit(m_FlatColorShader, m_SquareVA, glm::scale(glm::mat4(1.0f), glm::vec3(1.5f)));
Hazel::Renderer::EndScene();
}
void Sandbox2D::OnImGuiRender() {
ImGui::Begin("Settings");
ImGui::ColorEdit4("Square Color", glm::value_ptr(m_SquareColor));
ImGui::End();
}
void Sandbox2D::OnEvent(Hazel::Event &e) {
m_CameraController.OnEvent(e);
}
Sandbox2D中用到了一个shader
Sandbox/assets/shaders/FlatColor.glsl
ini
// Flat Color Shader
#type vertex
#version 330 core
layout(location = 0) in vec3 a_Position;
uniform mat4 u_ViewProjection;
uniform mat4 u_Transform;
void main()
{
gl_Position = u_ViewProjection * u_Transform * vec4(a_Position, 1.0);
}
#type fragment
#version 330 core
layout(location = 0) out vec4 color;
uniform vec4 u_Color;
void main()
{
color = u_Color;
}
SandboxApp中添加Sandbox2D
注释调之前实现的ExampleLayer,添加S
c++
class Sandbox : public Hazel::Application {
public:
Sandbox(){
// PushOverlay(new ExampleLayer());
PushOverlay(new Renderer2D());
}
~Sandbox()
程序入口调整
一个程序只能有一个main入口,将Hazel.h中的include放到SandBoxApp中
Sandbox/Hazel/src/Hazel.h
c++
// -----Entry Point-------
//#include "Hazel/Core/EntryPoint.h"
#endif //SANBOX_HAZEL_H
另外还调整了一些代码,不一一说明,请参考完整代码。
如果运行正常的话,能看到一个可以操作的矩形: