当前位置: 代码迷 >> 综合 >> openGL 渲染 yuv 的两种方式 glsl
  详细解决方案

openGL 渲染 yuv 的两种方式 glsl

热度:42   发布时间:2023-12-29 09:17:48.0

参考:

 Fin Render

Android NDK cpp 使用 OpenGL ES 渲染预览 YUV

 

渲染 YUV420P

YUV420P 是3-plane,也就是YUV数据段分了三段YYYY-U-V

在 glsl 中创建三个 sampler2D 分别用来保存 Y U V 数据,通过如下的 glsl 代码编译出 OpenGL Progame 实现图像预览

Shader.vert   顶点着色器程序

//Shader.vert文件内容
static const char* VERTEX_SHADER ="attribute vec4 vPosition;    \n""attribute vec2 a_texCoord;   \n""varying vec2 tc;             \n""void main()                  \n""{                            \n""gl_Position = vPosition; \n""tc = a_texCoord;         \n""}                            \n";

Shader.frag  片源着色器程序

//Shader.frag文件内容
static const char* FRAG_SHADER ="varying lowp vec2 tc;                         \n""uniform sampler2D dataY;                      \n""uniform sampler2D dataU;                      \n""uniform sampler2D dataV;                      \n""void main(void)                               \n""{                                             \n""mediump vec3 yuv;                         \n""lowp vec3 rgb;                            \n""yuv.x = texture2D(dataY, tc).r - 0.0625;  \n""yuv.y = texture2D(dataU, tc).r - 0.5;     \n""yuv.z = texture2D(dataV, tc).r - 0.5;     \n""rgb = mat3( 1,   1,   1,                  \n""0,       -0.39465,  2.03211,              \n""1.13983,   -0.58060,  0) * yuv;           \n""gl_FragColor = vec4(rgb, 1);              \n""}                                             \n";

Texture一般使用如下配置, cpp

    // Texture一般使用如下配置mglTextureNums = 3;mglTextures = new GLuint[3];glGenTextures(3, mglTextures);        // 命名纹理对象,生成纹理名称(ID)glBindTexture(GL_TEXTURE_2D, mglTextures[0]);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MIN_FILTER 缩小过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MAG_FILTER 放大过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_S S方向上的贴图模式glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_T T方向上的贴图模式glBindTexture(GL_TEXTURE_2D, mglTextures[1]);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MIN_FILTER 缩小过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MAG_FILTER 放大过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_S S方向上的贴图模式glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_T T方向上的贴图模式glBindTexture(GL_TEXTURE_2D, mglTextures[2]);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MIN_FILTER 缩小过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );    // 纹理过滤函数, GL_TEXTURE_MAG_FILTER 放大过滤glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_S S方向上的贴图模式glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE ); // 纹理过滤函数, GL_TEXTURE_WRAP_T T方向上的贴图模式

在 drawRender 函数中激活纹理,绑定OpenGL。

    glActiveTexture(GL_TEXTURE0);        // 激活纹理单元glBindTexture(GL_TEXTURE_2D, mglTextures[0]);  // 将一个指定的纹理ID绑定到一个纹理目标上glTexImage2D(GL_TEXTURE_2D, 0 /* 细节基本 0 默认 */,GL_LUMINANCE /* gpu内部格式 亮度,灰度图 */,w , h /* 拉升到全屏 */,0 /* 边框 */,GL_LUMINANCE /* 数据的像素格式 亮度,灰度图 要与上面一致 */,GL_UNSIGNED_BYTE /* 像素的数据类型 */,yuv /* 纹理的数据 */);glUniform1i(mglTextureY, 0);               // 通过 glUniform1i 的设置,保证每个 uniform 采样器对应着正确的纹理单元glActiveTexture(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, mglTextures[1]);glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, w/2, h/2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, yuv + w*h);glUniform1i(mglTextureU, 1);glActiveTexture(GL_TEXTURE2);glBindTexture(GL_TEXTURE_2D, mglTextures[2]);glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, w/2, h/2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, yuv + w*h*5/4);glUniform1i(mglTextureV, 2);

 

 

渲染 YUV420SP(NV21)

NV21则是2-plane,也就是YUV数据段只分两段YYYY-VU

在 glsl 中创建两个 sampler2D 分别用来保存 Y和VU 数据,通过如下的 glsl 代码编译出 OpenGL Progame 实现图像预览

该程序实现了图像镜像和旋转

yTexture 和 uvTexture 的区别是 GL_LUMINANCE_ALPHA 和  GL_LUMINANCE

 glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE_ALPHA, w/2, h/2, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, yuv + w*h);

Shader.vert   顶点着色器程序

/** Shader.vert文件内容* highp   – 32位浮点格式,适合用于顶点变换,但性能最慢。* mediump – 16位浮点格式,适用于纹理UV坐标和比 highp 大约快两倍* lowp    – 10位的顶点格式,适合对颜色,照明计算和其它高性能操作,速度大约是 highp 的4倍*/
static const char* vertexShader ="attribute mediump vec2 vPosition;                   \n""attribute mediump vec2 vTexCoord;                   \n""varying mediump vec2 tc;                            \n""uniform mediump int uRotation;                      \n""uniform mediump float uScaleX;                      \n""uniform mediump float uScaleY;                      \n""void main()                                         \n""{                                                   \n""   vec2 rotPos = vPosition;                         \n""   if(uRotation == 1)                               \n""   {                                                \n""       rotPos = vPosition * mat2(0, -1, 1, 0);      \n""   }                                                \n""   else if(uRotation == 2)                          \n""   {                                                \n""       rotPos = vPosition * mat2(-1, 0, 0, -1);     \n""   }                                                \n""   else if(uRotation == 3)                          \n""   {                                                \n""       rotPos = vPosition * mat2(0, 1, -1, 0);      \n""   }                                                \n""                                                    \n""   mat2 scaleMtx = mat2(uScaleX, 0, 0, uScaleY);    \n""   gl_Position = vec4(rotPos * scaleMtx, 1.0, 1.0); \n""   tc = vTexCoord;                                  \n""}                                                   \n";

Shader.frag  片源着色器程序

/** Shader.frag文件内容*/
static const char* fragmentShader ="#extension GL_OES_EGL_image_external : require      \n""varying mediump vec2 tc;                            \n""uniform mediump sampler2D yTexture;                 \n""uniform mediump sampler2D uvTexture;                \n""uniform mediump int uRotation;                      \n""uniform mediump int mirror;                         \n""                                                    \n""mediump vec4 getBaseColor(in mediump vec2 coord)    \n""{                                                   \n""   mediump float r,g,b,y,u,v;                       \n""   y = texture2D(yTexture, coord).r - 0.0625;       \n" // 0.0625 = 16./256."   vec4 uvColor = texture2D(uvTexture,coord);       \n""   u = uvColor.a - 0.5;                             \n" // 128./256."   v = uvColor.r - 0.5;                             \n""   r = y + 1.13983*v;                               \n""   g = y - 0.39465*u - 0.58060*v;                   \n""   b = y + 2.03211*u;                               \n""   return vec4(r, g, b, 1.0);                       \n""}                                                   \n""                                                    \n""mediump vec2 mirrorUV()                             \n""{                                                   \n""   mediump vec2 mirrorCoord = tc;                   \n""   if(mirror == 1)                                  \n""   {                                                \n""       if(uRotation == 1 || uRotation == 3)         \n""       {                                            \n""           mirrorCoord.y = 1.0 - mirrorCoord.y;     \n""       }                                            \n""       else                                         \n""       {                                            \n""           mirrorCoord.x = 1.0 - mirrorCoord.x;     \n""       }                                            \n""   }                                                \n""   return mirrorCoord;                              \n""}                                                   \n""                                                    \n""void main()                                         \n""{                                                   \n""  mediump vec2 mirrorTC = mirrorUV();               \n""  gl_FragColor = getBaseColor(mirrorTC);            \n""}                                                   \n";