OpenGL I420渲染（四）
看了前三节，你学会了渲染RGB；
本节，是YUV渲染；
1 YUV类型：
4:4:4 4:2:2 4:2:0
444： 一个Y分量，就有一个U，一个V；
422: 两个Y分量，有一个U，一个V；
420：四个Y分量，有一个U，一个V；
这个博客说的很详细：YUV 格式详解-史上最全 - 掘金 (juejin.cn)
2 我们用ffmpeg从视频中提取一帧YUV；视频就用手机拍一个就行；ffmpeg能给你解析，解码；成I420
./ffmpeg -i XX.mp4 -frames:v 1 out.yuv (命令)，看图 ，数据总量=宽*高*1.5
3 YUV渲染需要分别将Y,U,V加载到显存；并且有三个采样器来采集纹理中的Y,U,V分量值；
OpenGL无法做到直接渲染YUV，所以不同的格式的YUV数据，加载到显存后，都要在片元着色器中通过采样器得到YUV的值，然后转成rgb输出
函数说明
（1）GLint glGetUniformLocation（GLuint program,const GLchar *name）;
program：指定要查询的程序对象，>>>>> 本例中是着色器程序对象。
name：要查询其位置序号的统一变量的名称。>>>>>>>本例中是采样器的名字
描述
glGetUniformLocation返回一个整数，表示程序对象中特定统一变量的位置（序号）；本例中意思就是 ：返回着色器程序中的某个采样器的序号；采样器是一个统一性变量；
(2) glActiveTexture, glBindTexture ,glTexImage2D,glUniform1i
3.2.1激活纹理单元；3.2.2 绑定纹理对象到激活单元，决定纹理类型；3.2.3 加载数据到显存；3.2.4将采样器序号与纹理单元对应起来
#include<string> #include<fstream> #include<sstream> #include<iostream> #include<stdio.h>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
const unsigned int SCR_WIDTH = 500; const unsigned int SCR_HEIGHT = 600; const int len = 1920*1080 * 3/2; BYTE YUVdata [len]; unsigned int VBO = 0; unsigned int VAO = 0; unsigned int EBO = 0; unsigned int texturePIC = 0; int shaderProgram = 0; GLuint texIndexarray[3]; GLuint texUniformY = 99; GLuint texUniformU = 99; GLuint texUniformV = 99; void LoadPicture() { glGenTextures(3, texIndexarray);//生成三个纹理索引 glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //为bind的纹理设置环绕，过滤方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); //为bind的纹理设置环绕，过滤方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); //为bind的纹理设置环绕，过滤方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); //使用着色器程序，返回采样器的序号 glUseProgram(shaderProgram);//该语句必须要有；安装 指定着色器程序 texUniformY = glGetUniformLocation(shaderProgram, "dataY"); texUniformU = glGetUniformLocation(shaderProgram, "dataU"); texUniformV = glGetUniformLocation(shaderProgram, "dataV"); ////----------加载数据-------------------------------------------------------- FILE* fp = fopen("./out.yuv","rb+");//I420 int returns =fread(YUVdata,1,len,fp); int w = 1920; int h = 1080; int ysize = w*h; int uvsize = w * h / 4; void* uptr = &YUVdata[ysize]; void* vptr = &YUVdata[ysize * 5 / 4]; //--------------------------------------------------------------------------- glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]);// texindexarray[0] =1 //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY,0);
//通过 glUniform1i 的设置，保证每个 uniform 采样器对应着正确的纹理单元;注意这里不能用tesindexarray[0]; glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, 1); glActiveTexture(GL_TEXTURE2); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,vptr); glUniform1i(texUniformV,2); glUseProgram(0); } void render() { glBindVertexArray(VAO); glUseProgram(shaderProgram); glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,0); //glDrawArrays(GL_TRIANGLE_FAN,0,4);也可 glUseProgram(0); glBindVertexArray(0); } void initmodule() { //做个一模型;正方形；映射了顶点坐标和纹理坐标的对应关系 float vertexs[] = { //顶点坐标-------纹理坐标(屏幕坐标翻转) 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 0.0f, 1.0f, 1.0f, -1.0f, -1.0f, 0.0f, 0.0f, 1.0f, -1.0f, 1.0f, 0.0f, 0.0f, 0.0f }; //一个正方形是由两个三角形得来的；记录顶点的索引顺序 unsigned int indexs[] = { 0,1,3, 1,2,3, }; //做VAO glGenVertexArrays(1,&VAO); glBindVertexArray(VAO); //做VBO glGenBuffers(1, &VBO); glBindBuffer(GL_ARRAY_BUFFER, VBO); //创建显存空间 glBufferData(GL_ARRAY_BUFFER,sizeof(vertexs), vertexs, GL_STATIC_DRAW); //设置索引缓冲 glGenBuffers(1,&EBO); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,EBO); glBufferData(GL_ELEMENT_ARRAY_BUFFER,sizeof(indexs),indexs,GL_STATIC_DRAW);
//加载纹理图片,生成纹理 LoadPicture(); //设置第0个锚点,3个点，不需要归一化，跨度5个float可以读下一个点 glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,5*sizeof(float),(void*)0); //打开顶点 glEnableVertexAttribArray(0); //纹理属性设置,纹理在第一个锚点上（指定顶点数据） glVertexAttribPointer(1,2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float))); //打开纹理 glEnableVertexAttribArray(1); //解除绑定VBO glBindBuffer(GL_ARRAY_BUFFER,0); //解绑VAO glBindVertexArray(0); } void initshader(const char* verpath,const char* fragpath) { //编译shader，并记录shaderID std::string VerCode(""); std::string fregCode(""); //读文件 std::ifstream vShaderFile; std::ifstream fShaderFile; vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit); fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit); try { vShaderFile.open(verpath); fShaderFile.open(fragpath); std::stringstream vsstream, fsstream; vsstream << vShaderFile.rdbuf(); fsstream << fShaderFile.rdbuf(); VerCode = vsstream.str(); fregCode = fsstream.str(); } catch (const std::exception&) { std::cout << "read file error" << std::endl; } const char* vshader = VerCode.c_str(); const char* fshader = fregCode.c_str(); //shader 编译连接 unsigned int vertexID = 0, fragID = 0; char infoLog[512];//存储错误信息 int successflag = 0; vertexID = glCreateShader(GL_VERTEX_SHADER); glShaderSource(vertexID,1,&vshader,NULL ); glCompileShader(vertexID); //获取编译是否成功 glGetShaderiv(vertexID,GL_COMPILE_STATUS,&successflag); if (!successflag) { glGetShaderInfoLog(vertexID,512,NULL,infoLog); std::string errstr(infoLog); std::cout << "v shader err"<<infoLog; } //frag fragID = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource(fragID, 1, &fshader, NULL); glCompileShader(fragID); //获取编译是否成功 glGetShaderiv(fragID, GL_COMPILE_STATUS, &successflag); if (!successflag) { glGetShaderInfoLog(fragID, 512, NULL, infoLog); std::string errstr(infoLog); std::cout << "f shader err"<<infoLog; } //链接 shaderProgram = glCreateProgram(); glAttachShader(shaderProgram,vertexID); glAttachShader(shaderProgram,fragID); glBindAttribLocation(shaderProgram, 0, "aPos"); glBindAttribLocation(shaderProgram, 1, "texCoord"); glLinkProgram(shaderProgram); glGetProgramiv(shaderProgram,GL_LINK_STATUS,&successflag); if (!successflag) { glGetShaderInfoLog(shaderProgram, 512, NULL, infoLog); std::string errstr(infoLog); std::cout << "link error"; } //编译完成后，可以把中间的步骤程序删除 glDeleteShader(vertexID); glDeleteShader(fragID); } void processInput(GLFWwindow *window) { if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) { //将窗口设置为关闭，跳出循环 glfwSetWindowShouldClose(window, true); } } void framebuffer_size_callback(GLFWwindow* window, int width, int height) { glViewport(0, 0, width, height); } int main() { //glfw初始化 glfwInit(); glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3); glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); //glfw创建窗口 GLFWwindow* window = glfwCreateWindow(500, 600, "LearnOpenGL", NULL, NULL); if (window == NULL) { printf("创建窗口失败"); //终止 glfwTerminate(); return -1; } //显示窗口 glfwMakeContextCurrent(window); //设置回调，当窗口大小调整后将调用该回调函数 glfwSetFramebufferSizeCallback(window, framebuffer_size_callback); // glad初始化 if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) { printf("加载失败"); return -1; } initshader("vertexShader.glsl", "fragmentShader.glsl");//先编译着色器 initmodule(); // 使用循环达到循环渲染效果 while (!glfwWindowShouldClose(window)) { //自定义输入事件 processInput(window); glClearColor(0.0f,0.0f,0.0f,1.0f); glClear(GL_COLOR_BUFFER_BIT); render(); //交互缓冲区，否则显示空白 glfwSwapBuffers(window); //输入输出事件,否则无法对窗口进行交互 glfwPollEvents(); } //终止渲染 关闭并清理glfw本地资源 glfwTerminate(); return 0; }
#version 330 core layout(location = 0) out vec4 FragColor; in vec2 TexCoord; uniform sampler2D dataY; uniform sampler2D dataU; uniform sampler2D dataV; vec3 yuv; vec3 rgb; void main() { yuv.x = texture2D(dataY, TexCoord).r-0.0625; yuv.y = texture2D(dataU, TexCoord).r-0.5; yuv.z = texture2D(dataV, TexCoord).r-0.5; rgb = mat3(1, 1, 1, 0, -0.18732, 1.8556, 1.57481, -0.46813, 0) * yuv; FragColor = vec4(rgb.x, rgb.y,rgb.z,1); };
#version 330 core layout(location = 0) in vec3 aPos; layout(location = 1) in vec2 texCoord; out vec2 TexCoord; void main() { gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0); TexCoord = texCoord; };
运行结果：
错误1： 这里如果你的程序颜色是这样的：？？？
可能是这里写错了：
glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY, texIndexarray[0]); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, texIndexarray[0]); glActiveTexture(GL_TEXTURE2); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,vptr); glUniform1i(texUniformV, texIndexarray[0]);
错误2 ：颜色这样子？？？
//--------------------------------------------------------------------------- glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY, texIndexarray[0]); //texindexarray[0] = 1 glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, texIndexarray[1]);//texindexarray[1] =2 glActiveTexture(GL_TEXTURE2); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,vptr); glUniform1i(texUniformV, texIndexarray[2]);
错误3，一种很常见的错误，粉绿色：
这里注意，采样器的统一值，是指纹理单元，不是纹理ID
//glUseProgram(shaderProgram); 这里未调用着色器程序 texUniformY = glGetUniformLocation(shaderProgram, "dataY"); texUniformU = glGetUniformLocation(shaderProgram, "dataU"); texUniformV = glGetUniformLocation(shaderProgram, "dataV"); ////----------加载数据-------------------------------------------------------- FILE* fp = fopen("./out.yuv","rb+");//I420 正常加载YUV //--------------------------------------------------------------------------- glActiveTexture(GL_TEXTURE0);//纹理单元是0，那下边指定采样器统一值就应该用0； glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY, texIndexarray[0]); //错 使用纹理ID给采样器赋值是不对的 glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, texIndexarray[1]);//错 glActiveTexture(GL_TEXTURE2); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,vptr); glUniform1i(texUniformV, texIndexarray[2]);//错 //glUseProgram(0);
或者单纯的未加载（ not use program）着色器程序，也是粉绿色
错误4：颜色是这样的？？？？颜色大致相同又有点差异；缺了点红粉色；整体有一点点偏绿色
可能是未渲染V分量：既没有加载V分量到显存，也没采样
glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY,0); // 通过 glUniform1i 的设置，保证每个 uniform 采样器对应着正确的纹理单元 glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, 1); ----------------------------------------------------------------- 没有加载V分量的数据到显存；也没在着色器中采样 void main() { yuv.x = texture2D(dataY, TexCoord).r-0.0625; yuv.y = texture2D(dataU, TexCoord).r-0.5; rgb = mat3(1, 1, 1, 0, -0.18732, 1.8556, 1.57481, -0.46813, 0) * yuv; FragColor = vec4(rgb.x, rgb.y,rgb.z,1); };
错误5 ，可能颜色是这样子，略粉
可能的原因是，未将V数据加载到显存，然后采样器还去采了
glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY,0); // 通过 glUniform1i 的设置，保证每个 uniform 采样器对应着正确的纹理单元 glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformU, 1); ---------------------------------未将V分量数据上传到显存--------------------------------但是片元着色器去采样了 void main() { yuv.x = texture2D(dataY, TexCoord).r-0.0625; yuv.y = texture2D(dataU, TexCoord).r-0.5; yuv.z = texture2D(dataV, TexCoord).r-0.5; rgb = mat3(1, 1, 1, 0, -0.18732, 1.8556, 1.57481, -0.46813, 0) * yuv; FragColor = vec4(rgb.x, rgb.y,rgb.z,1); };
错误6.偏冷色调
可能的原因，也是采样器序号的问题；
glUseProgram(shaderProgram); texUniformY = glGetUniformLocation(shaderProgram, "dataY");//2 texUniformY = glGetUniformLocation(shaderProgram, "dataU");//0 texUniformY = glGetUniformLocation(shaderProgram, "dataV");//1 ////----------加载数据-------------------------------------------------------- FILE* fp = fopen("./out.yuv","rb+");//I420 正常加载数据 //--------------------------------------------------------------------------- glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texIndexarray[0]); //使用GL_red表示单通道，glfw3里边没有YUV那个GL属性，会出现未定义； glTexImage2D(GL_TEXTURE_2D, 0 , GL_RED, w, h ,0, GL_RED,GL_UNSIGNED_BYTE ,YUVdata); glUniform1i(texUniformY,0); // 通过 glUniform1i 的设置，保证每个 uniform 采样器对应着正确的纹理单元 glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texIndexarray[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,uptr); glUniform1i(texUniformY, 1); glActiveTexture(GL_TEXTURE2); glBindTexture(GL_TEXTURE_2D, texIndexarray[2]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w/2, h/2, 0, GL_RED, GL_UNSIGNED_BYTE,vptr); glUniform1i(texUniformY,2); glUseProgram(0);
