OpenGL 5.纹理，混合，矩阵变化

混合

我们先画一个红色方块，再画一个蓝色方块，重叠的部分就是蓝色和红色按照某种方式混合，可以是蓝色完全覆盖红色，也可以是蓝色和红色叠加。
在这里插入图片描述
混合定义了如何将片段着色器输出颜色（也就是source）与目标缓冲区中已经存在的颜色结合起来。
上图中蓝色方块是半透明的，也就是片段着色器输出的蓝色，目标缓冲区就是绘制蓝色方块的区域。
控制混合3步骤：

开启或关闭混合，glEnable(GL_BLEND)，glDisable(GL_BLEND)
设置混合因子，glBlendFunc(srcFactor, destFactor) 指定混合因子，
设置混合方程，glBlendEquation(GL_FUNC_ADD)，默认是加法混合
即最终的颜色Color = srcRGBA * srcFactor + destRGBA * destFactor

纹理

纹理可以看作我们使用的图像，加载图像到CPU内存中，返回一个指向RGBA像素缓冲区的指针，然后把这个像素缓冲区传到GPU显存，使用shader绘制，最后就可以释放CPU内存中的图像数据。
在res文件夹下添加图片用于显示到窗口上，图片地址
在这里插入图片描述

引入stb库与glm库

stb库地址，在src下新建文件夹如下，我们只需要stb_image.h这一个文件，将其拷贝到对应目录。
在这里插入图片描述
然后添加stb_image.cpp文件如下

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

在这里插入图片描述
添加新的附加目录src\vendor; 这样在引用时候就不需要添加写前缀了

为了实现对纹理的平移，旋转，缩放（TRS）变化，需要使用矩阵，引入glm数学库地址。
只需要里面的glm文件夹下的内容即可。

Texture

src文件夹下新建Texture.h，用于管理和记录数据。

#pragma once

#include "Renderer.h"

class Texture
{
    
    
private:
	unsigned int m_RendererID;
	std::string m_FilePath;
	unsigned char* m_LocalBuffer;//纹理的本地存储
	int m_Width, m_Height, m_BPP;//每像素位
public:
	Texture(const std::string& path);
	~Texture();

	//slot，想要绑定纹理的插槽，可以一次性绑定多个纹理
	void Bind(unsigned int slot = 0) const;
	void Unbind() const;

	inline int GetWidth() const {
    
     return m_Width; }
	inline int GetHeight() const {
    
     return m_Height; }
};

Texture.cpp

#include "Texture.h"
#include "stb_image/stb_image.h"

Texture::Texture(const std::string& path)
	:m_RendererID(0), m_FilePath(path), m_LocalBuffer(nullptr),
	m_Width(0), m_Height(0), m_BPP(0)
{
    
    
	//上下翻转图片，opengl的纹理像素是以左下角为(0, 0)，右上角为(1, 1)，而加载图片是从顶部到底部
	stbi_set_flip_vertically_on_load(1);
	//4表示RGBA4个通道
	m_LocalBuffer = stbi_load(path.c_str(), &m_Width, &m_Height, &m_BPP, 4);

	GLCall(glGenTextures(1, &m_RendererID));
	GLCall(glBindTexture(GL_TEXTURE_2D, m_RendererID));

	//缩小过滤器，指当纹理图象被使用到一个小于或等于它的形状上时，纹理如何被模拟下来，线性重新取样
	GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
	//放大过滤器，指当纹理图象被使用到一个大于它的形状上时
	GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
	//水平环绕
	GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE));
	GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE));

	//Level = 0 是基本图像级别， Level = n 是第n个mipmap缩小图像
	//type = GL_UNSIGNED_BYTE，像素数据的类型
	GLCall(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, m_Width, m_Height, 0, GL_RGBA, GL_UNSIGNED_BYTE, m_LocalBuffer));
	GLCall(glBindTexture(GL_TEXTURE_2D, 0));

	if (m_LocalBuffer)
		stbi_image_free(m_LocalBuffer);
}

Texture::~Texture()
{
    
    
	GLCall(glDeleteTextures(1, &m_RendererID));
}

void Texture::Bind(unsigned int slot) const
{
    
    
	GLCall(glActiveTexture(GL_TEXTURE0 + slot));
	GLCall(glBindTexture(GL_TEXTURE_2D, m_RendererID));
}

void Texture::Unbind() const
{
    
    
	GLCall(glBindTexture(GL_TEXTURE_2D, 0));
}

shader

为了把图片传递到shader，并设置纹理坐标，MVP矩阵，需要对shader文件做一些修改
shader.h

#pragma once

#include <string>
#include <unordered_map>
#include "glm/glm.hpp"

struct ShaderProgramSource
{
    
    
	std::string VertexSource;
	std::string FragmentSource;
};

class Shader
{
    
    
private:
	std::string m_FilePath;
	unsigned int m_RendererID;
	//mutable标记为可变变量，缓存统一变量的Location
	mutable std::unordered_map<std::string, int> m_UniformLocationCache;

public:
	Shader(const std::string& filepath);
	~Shader();

	void Bind() const;
	void Unbind() const;

	void SetUniform1i(const std::string& name, int value);
	void SetUniform1f(const std::string& name, float value);
	void SetUniform1iv(const std::string& name, int count, int* value);
	void SetUniform4f(const std::string& name, float v0, float v1, float v2, float v3);
	void SetUniformMat4f(const std::string& name, const glm::mat4& matrix);

private:
	ShaderProgramSource ParseShader(const std::string& filepath);
	unsigned int CompileShader(unsigned int type, const std::string& source);
	unsigned int CreateShader(const std::string& vertexShader, const std::string& fragmentShader);
	int GetUniformLocation(const std::string& name) const;
};

shader.cpp

#include "Shader.h"
#include <iostream>
#include <fstream>
#include <string>
#include <sstream>
#include "Renderer.h"

Shader::Shader(const std::string& filepath)
	: m_FilePath(filepath), m_RendererID(0)
{
    
    
    ShaderProgramSource source = ParseShader(filepath);
    m_RendererID = CreateShader(source.VertexSource, source.FragmentSource);
}

Shader::~Shader()
{
    
    
    GLCall(glDeleteProgram(m_RendererID));
}

ShaderProgramSource Shader::ParseShader(const std::string& filepath)
{
    
    
    std::ifstream stream(filepath);

    enum class ShaderType
    {
    
    
        NONE = -1, VERTEX = 0, FRAGMENT = 1,
    };

    std::string line;
    std::stringstream ss[2];
    ShaderType type = ShaderType::NONE;
    while (getline(stream, line))
    {
    
    
        if (line.find("#shader") != std::string::npos)
        {
    
    
            if (line.find("vertex") != std::string::npos)
                type = ShaderType::VERTEX;
            else if (line.find("fragment") != std::string::npos)
                type = ShaderType::FRAGMENT;
        }
        else
        {
    
    
            ss[(int)type] << line << '\n';
        }
    }

    return {
    
     ss[0].str(), ss[1].str() };
}

unsigned int Shader::CompileShader(unsigned int type, const std::string& source)
{
    
    
    unsigned int id = glCreateShader(type);
    const char* src = source.c_str();
    glShaderSource(id, 1, &src, nullptr);
    glCompileShader(id);

    int result;
    glGetShaderiv(id, GL_COMPILE_STATUS, &result);
    if (result == GL_FALSE)
    {
    
    
        int length;
        glGetShaderiv(id, GL_INFO_LOG_LENGTH, &length);
        char* message = (char*)alloca(length * sizeof(char));
        glGetShaderInfoLog(id, length, &length, message);
        std::cout << "Failed to compile" << (type == GL_VERTEX_SHADER ? "vertex" : "fragment") << " shader!" << std::endl;
        std::cout << message << std::endl;

        glDeleteShader(id);
        return 0;
    }

    return id;
}

unsigned int Shader::CreateShader(const std::string& vertexShader, const std::string& fragmentShader)
{
    
    
    unsigned int program = glCreateProgram();
    unsigned int vShader = CompileShader(GL_VERTEX_SHADER, vertexShader);
    unsigned int fShader = CompileShader(GL_FRAGMENT_SHADER, fragmentShader);

    glAttachShader(program, vShader);
    glAttachShader(program, fShader);
    glLinkProgram(program);
    glValidateProgram(program);

    glDeleteShader(vShader);
    glDeleteShader(fShader);

    return program;
}

void Shader::Bind() const
{
    
    
    GLCall(glUseProgram(m_RendererID));
}

void Shader::Unbind() const
{
    
    
    GLCall(glUseProgram(0));
}

void Shader::SetUniform1i(const std::string& name, int value)
{
    
    
    GLCall(glUniform1i(GetUniformLocation(name), value));
}

void Shader::SetUniform1f(const std::string& name, float value)
{
    
    
    GLCall(glUniform1f(GetUniformLocation(name), value));
}

void Shader::SetUniform1iv(const std::string& name, int count, int* value)
{
    
    
    GLCall(glUniform1iv(GetUniformLocation(name), count, value));
}

void Shader::SetUniform4f(const std::string& name, float v0, float v1, float v2, float v3)
{
    
    
    GLCall(glUniform4f(GetUniformLocation(name), v0, v1, v2, v3));
}

void Shader::SetUniformMat4f(const std::string& name, const glm::mat4& matrix)
{
    
    
    //提供一个矩阵，且不需要转置
    GLCall(glUniformMatrix4fv(GetUniformLocation(name), 1, GL_FALSE, &matrix[0][0]));
}

int Shader::GetUniformLocation(const std::string& name) const
{
    
    
    if (m_UniformLocationCache.find(name) != m_UniformLocationCache.end())
        return m_UniformLocationCache[name];

    GLCall(int location = glGetUniformLocation(m_RendererID, name.c_str()));
    if (location == -1)
        std::cout << "Warning: uniform " << name << " doesn't exist" << std::endl;

    m_UniformLocationCache[name] = location;
    return location;
}

Basic.shader

#shader vertex
#version 330 core

layout(location = 0) in vec4 position; //因为gl_Position是vec4，所有这里转换
layout(location = 1) in vec2 texCoord; //纹理坐标

out vec2 v_TexCoord;

uniform mat4 u_MVP;

void main()
{
    
    
	//正交投影与顶点位置相乘，把它们转换到-1至1空间（NDC空间）
	gl_Position = u_MVP * position;
    v_TexCoord = texCoord;
};

#shader fragment
#version 330 core

layout(location = 0) out vec4 color;

in vec2 v_TexCoord;

//统一变量
uniform sampler2D u_Texture;

void main()
{
    
    
	//从纹理上采样的颜色
	vec4 texColor = texture(u_Texture, v_TexCoord);
	color = texColor;
};

效果

Application.cpp

扫描二维码关注公众号，回复： 15051429 查看本文章

#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include "Renderer.h"
#include "VertexBuffer.h"
#include "VertexBufferLayout.h"
#include "IndexBuffer.h"
#include "VertexArray.h"
#include "Shader.h"
#include "Texture.h"

#include "glm/glm.hpp"
#include "glm/gtc/matrix_transform.hpp"

int main(void)
{
    
    
    GLFWwindow* window;

    /* Initialize the library */
    if (!glfwInit())
        return -1;

    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    /* Create a windowed mode window and its OpenGL context */
    window = glfwCreateWindow(960, 540, "Hello World", NULL, NULL);
    if (!window)
    {
    
    
        glfwTerminate();
        return -1;
    }

    /* Make the window's context current */
    glfwMakeContextCurrent(window);

    glfwSwapInterval(1);

    GLenum err = glewInit();
    if (GLEW_OK != err)
        std::cout << err << std::endl;
    std::cout << glGetString(GL_VERSION) << std::endl;

    //添加一个作用域，作用域结束时，会调用VertexBuffer和IndexBuffer的析构函数，
    //不添加作用域的话，需要在glfwTerminate之前显式删除两个缓冲区，
    //因为glfwTerminate会破坏OpenGL上下文，导致glGetError返回一个错误
    {
    
    
        //每个顶点添加纹理坐标，如(100.0f, 100.0f)这个点在左下角
        float positions[] = {
    
    
            100.0f, 100.0f, 0.0f, 0.0f,//0
            200.0f, 100.0f, 1.0f, 0.0f,//1
            200.0f, 200.0f, 1.0f, 1.0f,//2
            100.0f, 200.0f, 0.0f, 1.0f,//3
        };

        unsigned int indices[] = {
    
    
            0, 1, 2,
            2, 3, 0,
        };

        //启用混合(默认不会启用)
        GLCall(glEnable(GL_BLEND));
        /**
         * glBlendFunc(src, dest) 指定颜色因子
         * src 指定输出颜色(RGBA)因子的计算方式, 默认为GL_ONE
         * dest 指定目标颜色因子的计算方式, 默认为GL_ZERO
         * GL_SRC_ALPHA 因为src的alpha为0, GL_ONE_MINUS_SRC_ALPHA 1-src.alpha
         * RGBA = Srgba * GL_SRC_ALPHA + Drgba * GL_ONE_MINUS_SRC_ALPHA
         **/
        GLCall(glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA));
        GLCall(glBlendEquation(GL_FUNC_ADD));

        VertexArray va;
        //4个顶点，每个顶点有4个浮点数
        VertexBuffer vb(positions, 4 * 4 * sizeof(float));
        VertexBufferLayout layout;
        layout.Push<float>(2);
        layout.Push<float>(2);
        va.AddBuffer(vb, layout);

        IndexBuffer ib(indices, 6);

        //我们创建的窗口是960 x 540，是16:9的窗口，而图片宽高是1:1，
        //直接加载图片会有拉伸，定义4x4投影矩阵来修正，生成一个正交矩阵
        //定义视口的左、右、上、下的边界，近平面和远平面的距离
        glm::mat4 proj = glm::ortho(0.0f, 960.0f, 0.0f, 540.0f, -1.0f, 1.0f);
        //观察矩阵，创建一个单位矩阵并乘以(-100, 0, 0)，模拟摄像机右移
        glm::mat4 view = glm::translate(glm::mat4(1.0f), glm::vec3(-100, 0, 0));
        //模型矩阵
        glm::mat4 model = glm::translate(glm::mat4(1.0f), glm::vec3(200, 200, 0));
        //opengl里mvp矩阵的乘法顺序是相反的
        glm::mat4 mvp = proj * view * model;

        Shader shader("res/shaders/Basic.shader");
        shader.Bind();
        shader.SetUniformMat4f("u_MVP", mvp);

        Texture texture("res/textures/ChernoLogo.png");
        texture.Bind();
        //纹理绑定到插槽0
        shader.SetUniform1i("u_Texture", 0);
        
        va.Unbind();
        vb.Unbind();
        ib.Unbind();
        shader.Unbind();

        Renderer renderer;

        /* Loop until the user closes the window */
        while (!glfwWindowShouldClose(window))
        {
    
    
            renderer.Clear();
            renderer.Draw(va, ib, shader);

            /* Swap front and back buffers */
            glfwSwapBuffers(window);

            /* Poll for and process events */
            glfwPollEvents();
        }

        //作用域结束后会调用所有析构函数
    }

    glfwTerminate();
    return 0;
}

在这里插入图片描述