openGL 渲染 yuv 的两种方式 glsl
参考：
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";