参考:
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";