游戏引擎从零开始(29)-2D Renderer 准备工作

前言

到目前,我们的引擎已经完成了最基本的渲染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

另外还调整了一些代码,不一一说明,请参考完整代码。

如果运行正常的话,能看到一个可以操作的矩形:

完整代码 & 总结

完整代码:
github.com/summer-go/H...

相关推荐
闲人编程3 天前
使用Python实现图形学的阴影贴图算法
python·算法·图形学·贴图·阴影贴图
起司锅仔3 天前
OpenGL ES 着色器(5)
android·安卓·opengl·着色器
起司锅仔4 天前
OpenGL ES MVP/变换投影矩阵(8)
android·安卓·opengl
起司锅仔5 天前
OpenGL ES 之EGL(6)
android·安卓·opengl
起司锅仔5 天前
OpenGL ES 纹理(7)
android·安卓·opengl
闲人编程7 天前
使用Python实现图形学的纹理映射算法
开发语言·python·算法·图形学·纹理映射
rainInSunny8 天前
Learn OpenGL In Qt之炫酷进度条
c++·qt·opengl
起司锅仔8 天前
OpenGL ES 绘制一个三角形(2)
android·安卓·opengl
Thomas_YXQ8 天前
Unity3D 中构建行为树插件详解
游戏·unity·架构·unity3d·游戏开发
闲人编程9 天前
使用Python实现图形学的环境映射算法
开发语言·python·算法·图形学·环境映射