If there are errors in the code, terminology, etc. in the text, please correct me
Article directory
foreword
-
of this program
It is necessary to add the ability to render lines and boxes to the current engine .
Rendering boxes is implemented on the basis of rendering lines
-
Why
- The current object bounding box needs to be displayed with lines and boxes to provide friendly visual functions
- People who use the engine in the future may need ray detection, and the effect of rays must be seen when editing scenes, which is equivalent to gizmos.
-
How to draw lines and Rect
-
Let me talk about how to draw quad
The OpenGL API drawing Quad needs to provide an index buffer, and there will be repeated indexes to be used
-
line
Drawing using the OpenGL API does not need to provide an index buffer , but only needs to provide a vertex array.
Like quad, vertex positions can be reused, and two vertex positions determine a line
-
Rect
It is composed of 4 lines , and the vertex position can also be reused .
As follows: the last position of the closed opening does not need a new vertex position, only the vertex position of the starting point of 0 is required
-
-
How to achieve
Using the OpenGL API: glDrawArrays (GL_LINES, 0, vertexCount);
-
implementation details
Rendering lines needs to fit into the current batch.
Rendering lines also requires vertex arrays (vertex layout), vertex buffers, and shaders.
Need to enable smooth lines glEnable(GL_LINE_SMOOTH)
You can set the line width glLineWidth(width);
Draw the Quad into a Rect
-
Line's glsl
// Basic Texture Shader #type vertex #version 450 core layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; layout(location = 2) in int a_EntityID; layout(std140, binding = 0) uniform Camera{ mat4 u_ViewProjection; }; struct VertexOutput{ vec4 Color; }; layout(location = 0) out VertexOutput Output; layout(location = 1) out flat int v_EntityID; void main(){ Output.Color = a_Color; v_EntityID = a_EntityID; gl_Position = u_ViewProjection * vec4(a_Position, 1.0); } #type fragment #version 450 core layout(location = 0) out vec4 o_Color; layout(location = 1) out int o_EntityID; struct VertexOutput{ vec4 Color; }; layout(location = 0) in VertexOutput Input; layout(location = 1) in flat int v_EntityID; void main(){ o_Color = Input.Color; o_EntityID = v_EntityID; } -
The opengl code that actually draws the Line
void OpenGLRendererAPI::DrawLines(const Ref<VertexArray>& vertexArray, uint32_t vertexCount){ vertexArray->Bind(); glDrawArrays(GL_LINES, 0, vertexCount); } void OpenGLRendererAPI::SetLineWidth(float width){ glLineWidth(width); } -
Batch code plus line vertex array and other information
struct LineVertex { glm::vec3 Position; glm::vec4 Color; int EntityID; }; // Line Ref<VertexArray> LineVertexArray; Ref<VertexBuffer> LineVertexBuffer; Ref<Shader> LineShader; // Line uint32_t LineVertexCount = 0;// 只需要提供顶点数量 LineVertex* LineVertexBufferBase = nullptr; LineVertex* LineVertexBufferPtr = nullptr; // Line// // 0.在CPU开辟存储s_Data.MaxVertices个的QuadVertex的内存 s_Data.LineVertexBufferBase = new LineVertex[s_Data.MaxVertices]; // 1.创建顶点数组 s_Data.LineVertexArray = VertexArray::Create(); // 2.创建顶点缓冲区,先在GPU开辟一块s_Data.MaxVertices * sizeof(QuadVertex)大小的内存 // 与cpu对应大，是为了传输顶点数据 s_Data.LineVertexBuffer = VertexBuffer::Create(s_Data.MaxVertices * sizeof(LineVertex)); // 2.1设置顶点缓冲区布局 s_Data.LineVertexBuffer->SetLayout({ { ShaderDataType::Float3, "a_Position"}, { ShaderDataType::Float4, "a_Color"}, { ShaderDataType::Int, "a_EntityID"} }); // 1.1设置顶点数组使用的缓冲区，并且在这个缓冲区中设置布局 s_Data.LineVertexArray->AddVertexBuffer(s_Data.LineVertexBuffer); // 3.索引缓冲-Line不需要索引缓冲区 s_Data.LineShader = Shader::Create("assets/shaders/Renderer2D_Line.glsl"); void Renderer2D::Flush(){ if (s_Data.LineVertexCount) { // 计算当前绘制需要多少个顶点数据 uint32_t dataSize = (uint8_t*)s_Data.LineVertexBufferPtr - (uint8_t*)s_Data.LineVertexBufferBase; // 截取部分CPU的顶点数据上传OpenGL s_Data.LineVertexBuffer->SetData(s_Data.LineVertexBufferBase, dataSize); s_Data.LineShader->Bind(); // 新增的：设置线条宽度 RenderCommand::SetLineWidth(s_Data.LineWidth); // 调用绘画命令 RenderCommand::DrawLines(s_Data.LineVertexArray, s_Data.LineVertexCount); s_Data.Stats.DrawCalls++; } } void Renderer2D::DrawLine(const glm::vec3& p0, glm::vec3& p1, const glm::vec4& color, int entityID){ s_Data.LineVertexBufferPtr->Position = p0; s_Data.LineVertexBufferPtr->Color = color; s_Data.LineVertexBufferPtr->EntityID = entityID; s_Data.LineVertexBufferPtr++; s_Data.LineVertexBufferPtr->Position = p1; s_Data.LineVertexBufferPtr->Color = color; s_Data.LineVertexBufferPtr->EntityID = entityID; s_Data.LineVertexBufferPtr++; s_Data.LineVertexCount += 2; } // 根据一点中心位置确定4个点的位置绘制rect void Renderer2D::DrawRect(const glm::vec3& position, const glm::vec2& size, const glm::vec4& color, int entityID){ // position是中心位置 glm::vec3 p0 = glm::vec3(position.x - size.x * 0.5f, position.y - size.y * 0.5f, position.z);// 左下角 glm::vec3 p1 = glm::vec3(position.x + size.x * 0.5f, position.y - size.y * 0.5f, position.z);// 右下角 glm::vec3 p2 = glm::vec3(position.x + size.x * 0.5f, position.y + size.y * 0.5f, position.z);// 右上角 glm::vec3 p3 = glm::vec3(position.x - size.x * 0.5f, position.y + size.y * 0.5f, position.z);// 左上角 DrawLine(p0, p1, color); DrawLine(p1, p2, color); DrawLine(p2, p3, color); DrawLine(p3, p0, color); } // 根据实体的transform确定顶点位置再绘制 void Renderer2D::DrawRect(const glm::mat4& transform, const glm::vec4& color, int entityID){ glm::vec3 lineVertices[4]; for (size_t i = 0; i < 4; i++) { lineVertices[i] = transform * s_Data.QuadVertexPosition[i]; // quad的顶点位置正好是rect的顶点位置 } DrawLine(lineVertices[0], lineVertices[1], color); DrawLine(lineVertices[1], lineVertices[2], color); DrawLine(lineVertices[2], lineVertices[3], color); DrawLine(lineVertices[3], lineVertices[0], color); } -
The Scene scene traverses the entity with the SpriteRendere component, traverses and calls the Renderer2D::DrawRect function, and passes in its own transform to determine the vertex position of the rect to draw 4 lines to form the Rect
void Scene::OnUpdateEditor(Timestep ts, EditorCamera& camera) { Renderer2D::BeginScene(camera); // 绘画sprite { auto group = m_Registry.group<TransformComponent>(entt::get<SpriteRendererComponent>); for (auto entity : group) { // get返回的tuple里本是引用 auto [tfc, sprite] = group.get<TransformComponent, SpriteRendererComponent>(entity); //Renderer2D::DrawSprite(tfc.GetTransform(), sprite, (int)entity); // Renderer2D::DrawRect(tfc.GetTransform(), glm::vec4(1.0f), (int)entity); // } } // 绘画circles { auto view = m_Registry.view<TransformComponent, CircleRendererComponent>(); for (auto entity : view) { // get返回的tuple里本是引用 auto [tfc, circle] = view.get<TransformComponent, CircleRendererComponent>(entity); Renderer2D::DrawCircle(tfc.GetTransform(), circle.Color, circle.Thickness, circle.Fade, (int)entity); } } Renderer2D::DrawLine(glm::vec3(2.0f), glm::vec3(5.0f), glm::vec4(1, 0, 1, 1)); Renderer2D::DrawRect(glm::vec3(0.0f), glm::vec3(1.0f), glm::vec4(1, 0, 1, 1)); Renderer2D::EndScene(); }
Effect
The effect of setting the width
The effect of rendering Quad into Rect
