游戏引擎从零开始(24)-混合(Blend)

前言

这章我们再做一点优化，支持加载带透明度的纹理。

我们要把下面这张带透明度的图片渲染到界面上。

下载地址：
github.com/summer-go/H…

加载带alpha通道的图片

支持加载RGBA四通道图片

我们需要先做点调整，否则直接加载4通道的图片会渲染异常或者crash，load完图片之后，根据channels值，判断图片的格式。internalFormat表示图片加载到OpenGL中的格式，dataFormat表示原图片的格式。

注意！加载到OpenGL中的格式和原图片格式不必相同，比如dataFormat是RGBA四通道，internalFormat可以是RGB三通道。

Sandbox/Hazel/src/Hazel/Platform/OpenGL/OpenGLTexture.cpp

...
GLint internalFormat = 0;
GLenum dataFormat = 0;
if (channels == 4) {
    internalFormat = GL_RGBA8;
    dataFormat = GL_RGBA;
} else if (channels == 3) {
    internalFormat = GL_RGB8;
    dataFormat = GL_RGB;
}
HZ_CORE_ASSERT(internalFormat && dataFormat, "Format not supported!")

...
glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, width, height, 0, dataFormat, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

新增矩形

现在基础机制有一定完整度了，新增加一个带纹理的矩形很容易。
Sandbox/src/SandBoxApp.cpp

增加Texture2D m_ChernoLogo

Hazel::Ref<Hazel::Texture2D> m_Texture, m_ChernoLogo;

加载纹理到m_ChernoLogo

m_Texture = Hazel::Texture2D::Create("../assets/textures/Checkerboard.png");
m_ChernoLogo = Hazel::Texture2D::Create("../assets/textures/ChernoLogo.png");

提交绘制矩形的命令，注意要先绑定不同的纹理

m_Texture->Bind();
Hazel::Renderer::Submit(m_TextureShader, m_SquareVA, glm::scale(glm::mat4(1.0f), glm::vec3(1.5f)));

m_ChernoLogo->Bind();
Hazel::Renderer::Submit(m_TextureShader, m_SquareVA, glm::scale(glm::mat4(1.0f), glm::vec3(1.5f)));

没问题的话，你能看到一个奇怪的矩形纹理，如下图：

这是因为渲染RGBA的图片，需要开启混合(Blend)，在Application构造函数里增加blend的代码

Application::Application()
{
    ...
    m_Window->SetEventCallback(BIND_EVENT_FN(OnEvent));

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}

得到正确的渲染效果：

代码整理

整理下代码，不能直接在Application中添加OpenGL的逻辑，增加一个Renderer.Init()方法，封装glEnable(GL_BLEND)的逻辑，调用的流程如下：

Renderer::Init()           ->
RenderCommand::Init()      ->
RendererAPI->Init()        ->
OpenGLRendererAPI->Init()  ->

void OpenGLRendererAPI::Init() {
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}

完整代码&总结

本章节代码修改参考:
github.com/summer-go/H…

文章会同步更新到掘进平台，有问题欢迎留言交流：
juejin.cn/column/7156…