OpenGL/OpenGL ES入门：渲染YUV数据实践
纹理：GPU中的一块数据结构，YUV数据先经过采样，转成rgb显示。
着色器代码，先通过compile编译成GPU能识别的机器语言，再交由GPU进行显示。
shader着色器，texture纹理，Utility通用工具，context，surface，
vertex shader顶点着色器，fragment shader片元着色器，
实践
1.yuv的字节数
现有宽为w高为h的一个视频，现在定义了一个data[] bytes变量并存储了这个视频的一帧数据。
- bytes数组中，先连续存储每个像素的灰度信息，y通道占w*h个字节；
- 然后顺序存储颜色数据，u和v分别占一个字节，每个颜色数据共占2个字节，所以uv通道占(w/2)(h/2)2=w*h/2个字。
2.纹理
2.1 纹理的组成
- y通道的数据生成一个opengl纹理；
- uv通道的数据生成一个opengl纹理；
- 两个纹理作为渲染时的输入，在渲染过程中由GPU组装还原出来视频画面。
yv12是三个纹理是y一个，u一个，v一个；nv12是y一个，uv一个。
2.2 纹理格式
GL_LUMINANCE 和 GL_LUMINANCE_ALPHA 格式的纹理。
- GL_LUMINANCE 纹理用来加载 NV21 Y Plane 的数据；
- GL_LUMINANCE_ALPHA 纹理用来加载 UV Plane 的数据。
| 基本内部格式 | 所提取的颜色 |
| GL_ALPHA | (0,0,0,A) |
| GL_LUMINANCE | (L,L,L,1)--->亮度 |
| GL_LUMINANCE_ALPHA | (L,L,L,A)--->透明度 |
| GL_INTENSITY | (I,I,I,I) |
| GL_RGB | (R,G,B,1) |
| GL_RGBA | (R,G,B,A) |
3. YUV渲染步骤
- 第一步：初始化上下文
- 第二步：初始化着色器程序（编译链接着色器程序，生成2个纹理-->确定纹理坐标及对应的顶点坐标-->加载纹理坐标和顶点坐标数据到着色器程序）；
- 第三步：初始化buffer；
- 第四步：初始化纹理（分别加载NV21的两个Plane数据到2个纹理）；
- 第五步：绘制。
4.代码案例
在OpenGL中，片元着色器最后输出的都是rgba的数据，所以使用OpenGL来渲染YUV数据的关键还是将YUV数据传递给着色器，并在着色器中将YUV转化为RGB。
OpenGL ES 系列教程_hongge372的博客-CSDN博客_opengles教程
第一步：初始化上下文
void initContextGL(const char* hWindow)
{
// double dpr = emscripten_get_device_pixel_ratio();
// emscripten_set_element_css_size(hWindow, nWmdWidth / dpr, nWndHeight / dpr);
// emscripten_set_canvas_element_size(hWindow, nWmdWidth, nWndHeight);
// printf("create size success\n");
EmscriptenWebGLContextAttributes attrs;
emscripten_webgl_init_context_attributes(&attrs);
attrs.alpha = 0;
#if MAX_WEBGL_VERSION >= 2
attrs.majorVersion = 2;
#endif
EMSCRIPTEN_WEBGL_CONTEXT_HANDLE glContext = emscripten_webgl_create_context(hWindow, &attrs);
assert(glContext);
EMSCRIPTEN_RESULT res=emscripten_webgl_make_context_current(glContext);
assert(res == EMSCRIPTEN_RESULT_SUCCESS);
assert(emscripten_webgl_get_current_context() == glContext);
printf("create context success 1730\n");
}第二步：初始化着色器程序
/*顶点着色器代码*/
static const char g_pGLVS[] = ///<普通纹理渲染顶点着色器
{
"precision mediump float;"
"attribute vec4 position; "
"attribute vec4 texCoord; "
"varying vec4 pp; "
"void main() "
"{ "
" gl_Position = position; "
" pp = texCoord; "
"} "
};
/*像素着色器代码*/
const char* g_pGLFS = ///(strlen(g_pGLVS));
glShaderSource(nVertexShader, 1, (const GLchar**)&pVS, &nVSLen);
GLint nCompileRet;
glCompileShader(nVertexShader);
glGetShaderiv(nVertexShader, GL_COMPILE_STATUS, &nCompileRet);
if(0 == nCompileRet)
{
return SR_FAIL;
}
///< 片段着色器相关操作
GLuint nFragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
const GLchar* pFS = g_pGLFS;
GLint nFSLen = static_cast(strlen(g_pGLFS));
glShaderSource(nFragmentShader, 1, (const GLchar**)&pFS, &nFSLen);
glCompileShader(nFragmentShader);
glGetShaderiv(nFragmentShader, GL_COMPILE_STATUS, &nCompileRet);
if(0 == nCompileRet)
{
return SR_FAIL;
}
/// 功能描述：loadShader 方法通过 glCreateShader 方法创建了一个着色器；如果着色器创建成功则加载着色器源代码，并编译着色器。编译完成后检查编译情况。若编译成功则返回着色器的 ID，反之删除着色器并且打印错误信息。
GLenum type为着色器的类型，分为：GL_VERTEX_SHADER顶点着色器，GL_FRAGMENT_SHADER片段着色器。
功能描述：createProgram 方法通过调用 loadShader 方法分别加载顶点着色器与片元着色器的源代码进 GPU，并分别进行编译。
第三步：初始化buffer
GLuint g_vertexPosBuffer;
GLuint g_vertexPosBuffer;
GLuint g_texturePosBuffer;
const GLfloat g_Vertices[] = {
-1.0f, 1.0f,
-1.0f, -1.0f,
1.0f, 1.0f,
1.0f, 1.0f,
-1.0f, -1.0f,
1.0f, -1.0f,
};
const GLfloat g_TexCoord[] = {
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 0.0f,
1.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
};
void initBuffers()
{
GLuint vertexPosBuffer;
glGenBuffers(1, &vertexPosBuffer);//创建缓冲区对象
glBindBuffer(GL_ARRAY_BUFFER, vertexPosBuffer);//将该缓冲区对象绑定到管线上
glBufferData(GL_ARRAY_BUFFER, sizeof(g_Vertices), g_Vertices, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
g_vertexPosBuffer=vertexPosBuffer;
GLuint texturePosBuffer;
glGenBuffers(1, &texturePosBuffer);
glBindBuffer(GL_ARRAY_BUFFER, texturePosBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(g_TexCoord), g_TexCoord, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
g_texturePosBuffer=texturePosBuffer;
}第四步：初始化纹理
GLuint g_ShaderProgram;
GLuint g_Texture2D[3];
#define Y 0
#define U 1
#define V 2
void initTexture()
{
glUseProgram(g_ShaderProgram);
GLuint nTexture2D[3]; ///<< YUV三层纹理数组
glGenTextures(3, nTexture2D);
for(int i = 0; i < 3; ++i)
{
glBindTexture(GL_TEXTURE_2D, nTexture2D[i]);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glBindTexture(GL_TEXTURE_2D, NULL);
}
GLuint nTextureUniform[3];
nTextureUniform[Y] = glGetUniformLocation(g_ShaderProgram, "Ytexture");
nTextureUniform[U] = glGetUniformLocation(g_ShaderProgram, "Utexture");
nTextureUniform[V] = glGetUniformLocation(g_ShaderProgram, "Vtexture");
glUniform1i(nTextureUniform[Y], 0);
glUniform1i(nTextureUniform[U], 1);
glUniform1i(nTextureUniform[V], 2);
g_Texture2D[0]=nTexture2D[0];
g_Texture2D[1]=nTexture2D[1];
g_Texture2D[2]=nTexture2D[2];
glUseProgram(NULL);
}功能描述：将纹理图象空间映射到帧缓冲图象空间（把纹理像素映射成像素）
//纹理过滤函数glTexParameteri()
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);
param1: GL_TEXTURE_2D: 操作2D纹理.
param2: GL_TEXTURE_WRAP_S: S方向上的贴图模式.
param3: GL_CLAMP: 将纹理坐标限制在0.0,1.0的范围之内.如果超出了会如何呢.不会错误,只是会边缘拉伸填充.
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
param2:这里同上,只是它是T方向
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
param2:GL_TEXTURE_MAG_FILTER: 放大过滤
param3:GL_LINEAR: 线性过滤, 使用距离当前渲染像素中心最近的4个纹素加权平均值.
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);
param2:GL_TEXTURE_MIN_FILTER: 缩小过滤
param2:GL_LINEAR_MIPMAP_NEAREST: 使用GL_NEAREST对最接近当前多边形的解析度的两个层级贴图进行采样,然后用这两个值进行线性插值.第四步 渲染YUV到纹理
int RenderFrame( unsigned char* pFrameData, int nFrameWidth, int nFrameHeight)
{
if(pFrameData==NULL||nFrameWidth<=0||nFrameHeight<=0)
{
return -1;
}
glClearColor(0.8f,0.8f,1.0f,1.0);
glClear(GL_COLOR_BUFFER_BIT);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, g_Texture2D[Y]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth, nFrameHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D,g_Texture2D[U] );
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth / 2, nFrameHeight / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData + nFrameWidth * nFrameHeight * 5 / 4);
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, g_Texture2D[V]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth / 2, nFrameHeight / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData + nFrameWidth * nFrameHeight);
glUseProgram(g_ShaderProgram);
//将所有顶点数据上传至顶点着色器的顶点缓存
#ifdef DRAW_FROM_CLIENT_MEMORY
glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 20, pos_and_color);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 20, (void*)(pos_and_color+2));
GLint nPosLoc = glGetAttribLocation(g_ShaderProgram, "position");
glVertexAttribPointer(nPosLoc, 2, GL_FLOAT, GL_FALSE, 0, g_Vertices);
GLint nTexcoordLoc = glGetAttribLocation(g_ShaderProgram, "texCoord");
glVertexAttribPointer(nTexcoordLoc, 2, GL_FLOAT, GL_FALSE, 0, g_TexCoord);
#else
glBindBuffer(GL_ARRAY_BUFFER, g_vertexPosBuffer);
GLint nPosLoc = glGetAttribLocation(g_ShaderProgram, "position");
glEnableVertexAttribArray(nPosLoc);
glVertexAttribPointer(nPosLoc, 2, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
glBindBuffer(GL_ARRAY_BUFFER, g_texturePosBuffer);
GLint nTexcoordLoc = glGetAttribLocation(g_ShaderProgram, "texCoord");
glEnableVertexAttribArray(nTexcoordLoc);
glVertexAttribPointer(nTexcoordLoc, 2, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
#endif
glDrawArrays(GL_TRIANGLES, 0, 6);
glDisableVertexAttribArray(nPosLoc);
glDisableVertexAttribArray(nTexcoordLoc);
#ifdef EXPLICIT_SWAP
emscripten_webgl_commit_frame();
#endif
#ifdef REPORT_RESULT
REPORT_RESULT(0);
#endif
glUseProgram(NULL);
return SR_OK;
}void glTexImage2D(
int target, // 目标纹理，此处必须为GL_TEXTURE_2D
int level, // 执行细节级别，0是最基本的图像级别，n表示第N级贴图细化级别
int internalformat, // 指定纹理中的颜色组件
int width, // 指定纹理图像的宽度，
int height, // 指定纹理图像的高度，
int border, // 指定边框的宽度。必须为0
int format, // 像素数据的颜色格式
int type, // 指定像素数据的数据类型
java.nio.Buffer pixels // 指定内存中指向图像数据的指针
);internalformat这个参数指定纹理中的颜色组件，可选的值如下：
- 通常使用GL_RGBA这种颜色组件，它会单独保存R，G，B，A四个数据；
- 在渲染YUV数据的时候，使用GL_LUMINANCE和GL_LUMINANCE_ALPHA。使用GL_LUMINANCE时，可以将Y分量存储到像素的各个通道内，这样在着色器中，我们可以通过R，G，B任意一个分量来获取到Y值。U，V分量同理
- 使用GL_LUMINANCE_ALPHA的时候，首先存储亮度，然后是alpha值，利用这一点可以将U值存储到像素的A通道，V值存储到R，G，B通道
完整代码：
#include
// #include
// #include
#include
// #include
// #include
#include
// #include
// #include
// #include
#include
#include
#include
#include
#define SR_OK 0;
#define SR_FAIL 1;
#define Y 0
#define U 1
#define V 2
/// esCreateWindow flag - RGB color buffer
#define ES_WINDOW_RGB 0
/// esCreateWindow flag - ALPHA color buffer
#define ES_WINDOW_ALPHA 1
/// esCreateWindow flag - depth buffer
#define ES_WINDOW_DEPTH 2
/// esCreateWindow flag - stencil buffer
#define ES_WINDOW_STENCIL 4
/// esCreateWindow flat - multi-sample buffer
#define ES_WINDOW_MULTISAMPLE 8
GLuint flags=ES_WINDOW_RGB;
GLuint g_ShaderProgram;
GLuint g_Texture2D[3];
GLuint g_vertexPosBuffer;
GLuint g_texturePosBuffer;
/*顶点着色器代码*/
static const char g_pGLVS[] = ///<普通纹理渲染顶点着色器
{
"precision mediump float;"
"attribute vec4 position; "
"attribute vec4 texCoord; "
"varying vec4 pp; "
"void main() "
"{ "
" gl_Position = position; "
" pp = texCoord; "
"} "
};
/*像素着色器代码*/
const char* g_pGLFS = ///(strlen(g_pGLVS));
glShaderSource(nVertexShader, 1, (const GLchar**)&pVS, &nVSLen);
GLint nCompileRet;
glCompileShader(nVertexShader);
glGetShaderiv(nVertexShader, GL_COMPILE_STATUS, &nCompileRet);
if(0 == nCompileRet)
{
return SR_FAIL;
}
///< 片段着色器相关操作
GLuint nFragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
const GLchar* pFS = g_pGLFS;
GLint nFSLen = static_cast(strlen(g_pGLFS));
glShaderSource(nFragmentShader, 1, (const GLchar**)&pFS, &nFSLen);
glCompileShader(nFragmentShader);
glGetShaderiv(nFragmentShader, GL_COMPILE_STATUS, &nCompileRet);
if(0 == nCompileRet)
{
return SR_FAIL;
}
///= 2
attrs.majorVersion = 2;
#endif
EMSCRIPTEN_WEBGL_CONTEXT_HANDLE glContext = emscripten_webgl_create_context(hWindow, &attrs);
assert(glContext);
EMSCRIPTEN_RESULT res=emscripten_webgl_make_context_current(glContext);
assert(res == EMSCRIPTEN_RESULT_SUCCESS);
assert(emscripten_webgl_get_current_context() == glContext);
printf("create context success 1730\n");
}
EMSCRIPTEN_KEEPALIVE
int init(const char* hWindow)
{
//初始化Context
initContextGL(hWindow);
//初始化着色器程序
g_ShaderProgram=initShaderProgram();
//初始化buffer
initBuffers();
//初始化纹理
initTexture();
return 1;
}
EMSCRIPTEN_KEEPALIVE
int RenderFrame( unsigned char* pFrameData, int nFrameWidth, int nFrameHeight)
{
if(pFrameData==NULL||nFrameWidth<=0||nFrameHeight<=0)
{
return -1;
}
glClearColor(0.8f,0.8f,1.0f,1.0);
glClear(GL_COLOR_BUFFER_BIT);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, g_Texture2D[Y]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth, nFrameHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D,g_Texture2D[U] );
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth / 2, nFrameHeight / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData + nFrameWidth * nFrameHeight * 5 / 4);
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, g_Texture2D[V]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, nFrameWidth / 2, nFrameHeight / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, pFrameData + nFrameWidth * nFrameHeight);
glUseProgram(g_ShaderProgram);
//将所有顶点数据上传至顶点着色器的顶点缓存
#ifdef DRAW_FROM_CLIENT_MEMORY
glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 20, pos_and_color);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 20, (void*)(pos_and_color+2));
GLint nPosLoc = glGetAttribLocation(g_ShaderProgram, "position");
glVertexAttribPointer(nPosLoc, 2, GL_FLOAT, GL_FALSE, 0, g_Vertices);
GLint nTexcoordLoc = glGetAttribLocation(g_ShaderProgram, "texCoord");
glVertexAttribPointer(nTexcoordLoc, 2, GL_FLOAT, GL_FALSE, 0, g_TexCoord);
#else
glBindBuffer(GL_ARRAY_BUFFER, g_vertexPosBuffer);
GLint nPosLoc = glGetAttribLocation(g_ShaderProgram, "position");
glEnableVertexAttribArray(nPosLoc);
glVertexAttribPointer(nPosLoc, 2, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
glBindBuffer(GL_ARRAY_BUFFER, g_texturePosBuffer);
GLint nTexcoordLoc = glGetAttribLocation(g_ShaderProgram, "texCoord");
glEnableVertexAttribArray(nTexcoordLoc);
glVertexAttribPointer(nTexcoordLoc, 2, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ARRAY_BUFFER, NULL);
#endif
glDrawArrays(GL_TRIANGLES, 0, 6);
glDisableVertexAttribArray(nPosLoc);
glDisableVertexAttribArray(nTexcoordLoc);
#ifdef EXPLICIT_SWAP
emscripten_webgl_commit_frame();
#endif
#ifdef REPORT_RESULT
REPORT_RESULT(0);
#endif
glUseProgram(NULL);
return SR_OK;
}
#ifdef __cplusplus
}
#endif