openGL 渲染 yuv 的两种方式 glsl

最新推荐文章于 2024-05-25 09:36:05 发布

chyQino

最新推荐文章于 2024-05-25 09:36:05 发布

阅读量2.5k

点赞数 2

分类专栏： openGLES

本文链接：https://blog.csdn.net/qq_38907791/article/details/102684225

版权

openGLES 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

参考：

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";

chyQino

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
openGL 渲染 yuv 的两种方式 glsl

参考：Fin RenderAndroid NDK cpp 使用 OpenGL ES 渲染预览 YUV渲染 YUV420PYUV420P 是3-plane，也就是YUV数据段分了三段YYYY-U-V在 glsl 中创建三个 sampler2D 分别用来保存 Y U V 数据，通过如下的 glsl 代码编译出 OpenGL Progame 实现图像预览Shader.ve...
复制链接

扫一扫

专栏目录