【OpenGL】用OpenGL shader实现将YUV(YUV420,YV12)转RGB-(直接调用GPU实现，纯硬件方式，效率高) 这段时间一直在搞视频格式的转换问题，终于最近将一个图片的YUV

最新推荐文章于 2021-07-07 16:30:07 发布
最新推荐文章于 2021-07-07 16:30:07 发布
阅读量3.3k 收藏 14
点赞数 5

【OpenGL】用OpenGL shader实现将YUV(YUV420,YV12)转RGB-(直接调用GPU实现，纯硬件方式，效率高)

这段时间一直在搞视频格式的转换问题，终于最近将一个图片的YUV格式转RGB格式转换成功了。下面就来介绍一下：


由于我的工程是在vs2008中的，其中包含一些相关头文件和库，所以下面只是列出部分核心代码，并不是全部代码。


1、下载一个包含YUV数据的文件也可以自己制作一个该文件

下载地址： YUV数据文件

2、读入YUV数据文件中的yuv数据：

关键代码如下：

2.1读文件代码

unsigned char * readYUV(char *path)
{

	FILE *fp;
	unsigned char * buffer;
	long size = 1280 * 720 * 3 / 2;

	if((fp=fopen(path,"rb"))==NULL)
	{
	   printf("cant open the file");
	   exit(0);
	}

	buffer = new unsigned char[size];
	memset(buffer,'\0',size);
	fread(buffer,size,1,fp);
	fclose(fp);
	return buffer;
}

2.2读入数据，并将YUV数据分别制作成3个纹理

GLuint texYId;
GLuint texUId;
GLuint texVId;


void loadYUV(){
	int width ;
	int	height ;

	width = 640;
	height = 480;

	unsigned char *buffer = NULL;
	buffer = readYUV("1.yuv");

   glGenTextures ( 1, &texYId );
   glBindTexture ( GL_TEXTURE_2D, texYId );
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, buffer );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_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 );

   glGenTextures ( 1, &texUId );
   glBindTexture ( GL_TEXTURE_2D, texUId );
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_LUMINANCE, width / 2, height / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, buffer + width * height);
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_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 );

   glGenTextures ( 1, &texVId );
   glBindTexture ( GL_TEXTURE_2D, texVId );
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_LUMINANCE, width / 2, height / 2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, buffer + width * height * 5 / 4 );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_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 );

}

上述代码中1.yuv就是YUV数据文件

3、将纹理传入

上述片段shader中就是根据yuv转rgb的公式得来的。也就是说是在shader中实现转换的。 
3.1 顶点shader和片段shader代码
GLbyte vShaderStr[] =  
     "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";
   
   GLbyte fShaderStr[] =  
      　　"precision mediump float;　　　　　　　　　　　　　　　　　　　　　　\n"
	  "uniform sampler2D tex_y;					\n"
	  "uniform sampler2D tex_u;					\n"
	  "uniform sampler2D tex_v;					\n"
	  "varying vec2 tc;							\n"
      "void main()                                  \n"
      "{                                            \n"
	  "  vec4 c = vec4((texture2D(tex_y, tc).r - 16./255.) * 1.164);\n"
	  "  vec4 U = vec4(texture2D(tex_u, tc).r - 128./255.);\n"
	  "  vec4 V = vec4(texture2D(tex_v, tc).r - 128./255.);\n"
	  "  c += V * vec4(1.596, -0.813, 0, 0);\n"
	  "  c += U * vec4(0, -0.392, 2.017, 0);\n"
	  "  c.a = 1.0;\n"
	  "  gl_FragColor = c;\n"
      "}                                            \n";
上述片段shader中就是根据yuv转rgb的公式得来的。也就是说是在shader中实现转换的。

4、显示结果

结果如下：

注意：该shader是OpenGL格式的shader有一点差别。

--------------------------------------------------------------------------------------------------------------------------------

YV12格式与YUV格式只是在UV的存储位置上不同，需要注意一下

YV12，I420，YUV420P的区别

YV12和I420的区别
一般来说，直接采集到的视频数据是RGB24的格式，RGB24一帧的大小size＝width×heigth×3 Byte，RGB32的size＝width×heigth×4，如果是I420（即YUV标准格式4：2：0）的数据量是 size＝width×heigth×1.5 Byte。
在采集到RGB24数据后，需要对这个格式的数据进行第一次压缩。即将图像的颜色空间由RGB2YUV。因为，X264在进行编码的时候需要标准的YUV（4：2：0）。但是这里需要注意的是，虽然YV12也是（4：2：0），但是YV12和I420的却是不同的，在存储空间上面有些区别。如下：
YV12 ： 亮度（行×列） ＋ V（行×列/4) + U（行×列/4）
I420 ： 亮度（行×列） ＋ U（行×列/4) + V（行×列/4）
可以看出，YV12和I420基本上是一样的，就是UV的顺序不同。
继续我们的话题，经过第一次数据压缩后RGB24－>YUV（I420）。这样，数据量将减少一半，为什么呢？呵呵，这个就太基础了，我就不多写了。同样，如果是RGB24－>YUV（YV12），也是减少一半。但是，虽然都是一半，如果是YV12的话效果就有很大损失。然后，经过X264编码后，数据量将大大减少。将编码后的数据打包，通过RTP实时传送。到达目的地后，将数据取出，进行解码。完成解码后，数据仍然是YUV格式的，所以，还需要一次转换，这样windows的驱动才可以处理，就是YUV2RGB24。
补充=============
详细的格式之间的差异可以参考：
 
附一个YUV播放器的源代码： http://download.csdn.net/detail/leixiaohua1020/6374065
查看YUV的时候也可以下载使用成熟的YUV播放器 ——YUV Player Deluxe： http://www.yuvplayer.com/
 

yuv420p就是I420格式，使用极其广泛，它的示意图：

 

【图像-视频处理】YUV420、YV12与RGB24的转换公式


[cpp]  view plain  copy print?
    1. bool YV12ToBGR24_Native(unsigned char* pYUV,unsigned char* pBGR24,int width,int height)  
    2. {  
    3.     if (width < 1 || height < 1 || pYUV == NULL || pBGR24 == NULL)  
    4.         return false;  
    5.     const long len = width * height;  
    6.     unsigned char* yData = pYUV;  
    7.     unsigned char* vData = &yData[len];  
    8.     unsigned char* uData = &vData[len >> 2];  
    9.   
    10.     int bgr[3];  
    11.     int yIdx,uIdx,vIdx,idx;  
    12.     for (int i = 0;i < height;i++){  
    13.         for (int j = 0;j < width;j++){  
    14.             yIdx = i * width + j;  
    15.             vIdx = (i/2) * (width/2) + (j/2);  
    16.             uIdx = vIdx;  
    17.   
    18.             bgr[0] = (int)(yData[yIdx] + 1.732446 * (uData[vIdx] - 128));                                    // b分量  
    19.             bgr[1] = (int)(yData[yIdx] - 0.698001 * (uData[uIdx] - 128) - 0.703125 * (vData[vIdx] - 128));    // g分量  
    20.             bgr[2] = (int)(yData[yIdx] + 1.370705 * (vData[uIdx] - 128));                                    // r分量  
    21.   
    22.             for (int k = 0;k < 3;k++){  
    23.                 idx = (i * width + j) * 3 + k;  
    24.                 if(bgr[k] >= 0 && bgr[k] <= 255)  
    25.                     pBGR24[idx] = bgr[k];  
    26.                 else  
    27.                     pBGR24[idx] = (bgr[k] < 0)?0:255;  
    28.             }  
    29.         }  
    30.     }  
    31.     return true;  
    32. } 

以上是yv12到RGB24的转换算法，如果是yuv420到RGB24转换，秩序u,v反过来就可以了。

即：

[cpp]  view plain  copy print?
  1. unsigned char* uData = &yData[nYLen];  
  2. unsigned char* vData = &vData[nYLen>>2];  
 注：海康威视网络摄像头一般就是yu12格式的！

2016-9-22 19:53

张朋艺 pyZhangBIT2010@126.com

 

找到的英文参考资料：

yv12 to rgb using glsl in iOS ,result image attached

https://stackoverflow.com/questions/11093061/yv12-to-rgb-using-glsl-in-ios-result-image-attached

following is my code for uploading the three planar data to textures:
- (GLuint) textureY: (Byte*)imageData        
      widthType: (int) width       
     heightType: (int) height       
{          
    GLuint texName;    
    glGenTextures( 1, &texName );     
    glBindTexture(GL_TEXTURE_2D, texName);

    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_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);    

    glTexImage2D( GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, imageData );  
    //free(imageData);

    return texName;    
}    

- (GLuint) textureU: (Byte*)imageData        
          widthType: (int) width       
         heightType: (int) height       
{          
    GLuint texName;    

    glGenTextures( 1, &texName );     
    glBindTexture(GL_TEXTURE_2D, texName);


    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_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);    

    glTexImage2D( GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, imageData );    

    //free(imageData);
    return texName;    
}    

- (GLuint) textureV: (Byte*)imageData        
          widthType: (int) width       
         heightType: (int) height       
{          
    GLuint texName;    
    glGenTextures( 1, &texName );     
    glBindTexture(GL_TEXTURE_2D, texName);


    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );    
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_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);    

    glTexImage2D( GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, imageData );    

    //free(imageData);
    return texName;    
}    


- (void) readYUVFile     
{    
    NSString *file = [[NSBundle mainBundle] pathForResource:@"video" ofType:@"yv12"];
    NSLog(@"%@",file);
    NSData* fileData = [NSData dataWithContentsOfFile:file]; 
    //NSLog(@"%@",[fileData description]);
    NSInteger width  = 352;    
    NSInteger height = 288;
    NSInteger uv_width  = width  / 2;    
    NSInteger uv_height = height / 2;
    NSInteger dataSize = [fileData length];
    NSLog(@"%i\n",dataSize);

    GLint nYsize  = width * height;     
    GLint nUVsize = uv_width * uv_height;      
    GLint nCbOffSet = nYsize;    
    GLint nCrOffSet = nCbOffSet + nUVsize;    

    Byte *spriteData = (Byte *)malloc(dataSize);
    [fileData getBytes:spriteData length:dataSize];


    Byte* uData = spriteData + nCbOffSet;
    //NSLog(@"%@\n",[[NSData dataWithBytes:uData length:nUVsize] description]);
    Byte* vData = spriteData + nCrOffSet;  
    //NSLog(@"%@\n",[[NSData dataWithBytes:vData length:nUVsize] description]);
    /**
    Byte *YPlanarData = (Byte *)malloc(nYsize);
    for (int i=0; i<nYsize; i++) {
        YPlanarData[i]= spriteData[i];
    }    

    Byte *UPlanarData = (Byte *)malloc(nYsize);
    for (int i=0; i<height; i++) {
        for (int j=0; j<width; j++) {
            int numInUVsize = (i/2)*uv_width+j/2;
            UPlanarData[i*width+j]=uData[numInUVsize];
        }
    }

    Byte *VPlanarData = (Byte *)malloc(nYsize);
    for (int i=0; i<height; i++) {
        for (int j=0; j<width; j++) {
            int numInUVsize = (i/2)*uv_width+j/2;
            VPlanarData[i*width+j]=vData[numInUVsize];
        }
    }
    **/

_textureUniformY = glGetUniformLocation(programHandle, "SamplerY"); 
_textureUniformU = glGetUniformLocation(programHandle, "SamplerU"); 
_textureUniformV = glGetUniformLocation(programHandle, "SamplerV");     

    free(spriteData);

}

and my fragment shaders code:

   precision highp float;
uniform sampler2D SamplerY;
uniform sampler2D SamplerU;
uniform sampler2D SamplerV;

varying highp vec2 coordinate;

void main()
{
    highp vec3 yuv,yuv1;
    highp vec3 rgb;

    yuv.x = texture2D(SamplerY, coordinate).r;

    yuv.y = texture2D(SamplerU, coordinate).r-0.5;

    yuv.z = texture2D(SamplerV, coordinate).r-0.5 ;

   rgb = mat3(      1,       1,      1,
                     0, -.34414, 1.772,
               1.402, -.71414,      0) * yuv;

    gl_FragColor = vec4(rgb, 1);
}

 
大漠不死鸟
关注
GPU 实现 RGB -- YUV 转换 (OpenGL)
weixin_30894583的博客
02-01 1806
GPU 实现 RGB -- YUV 转换 前言 RGB --> YUV 转换的公式是现成的，直接在 CPU 端转换的话，只需要遍历每个像素，得到新的 YUV 值，根据其内存分布规律，合理安排分布即可。然而在 CPU 端进行转换，存在的问题运行效率太低，无法满足高效转换的需求。我们将目光投向拥有流水线体系的支持高速浮点数计算的硬件——GPU. 转换公式如下： GPU 上面的实现 考虑在 GP...
opengl es yuv转rgb 顶点和片元着色器脚本
04-01
opengl es yuv转rgb 顶点和片元着色器脚本
【OpenGL】用OpenGL shader实现将YUV(YUV420,YV12)转RGB-(直接调用GPU实现，纯硬件方式，效率高)...
weixin_33795806的博客
07-26 2485
这段时间一直在搞视频格式的转换问题，终于最近将一个图片的YUV格式转RGB格式转换成功了。下面就来介绍一下： 由于我的工程是在vs2008中的，其中包含一些相关头文件和库，所以下面只是列出部分核心代码，并不是全部代码。 1、下载一个包含YUV数据的文件也可以自己制作一个该文件 下载地址：YUV数据文件 2、读入YUV数据文件中的yuv数据： 关键代码如下： 2....
高效率视频播放: GPU支持的YUV RGB 转化例子(2)
Nhsoft的专栏
10-12 8931
    最近一直在做视频的播放。尤其是HD的视频，即使是1024 x 576的视频播放在CPU消耗上是一个巨大的压力。更大的还有1920 x 1080的。在CPU的消耗上简直就是一个恶梦。    最近用DSHOW做了一个Demo。一般Dshow的例子里都是直接用VMR把视频播放出去。对于游戏开发人员跟视频处理的应用来说，一个额外的要求就是你自己需要写一个Video Renderer截获视频的Fra
音视频入门基础：像素格式专题（5）——使用OpenGL实现yuv420p转rgb播放视频（三重纹理实现）
崔杰城的博客
07-07 3067
本文讲述使用OpenGL播放YUV(yuv420p)文件的方法。 二、代码 核心代码如下： ...
OpenGL ES：YUV转RGB
翻肚鱼儿的博客
08-12 2315
色彩的二次抽样 在RGB颜色模式下，每个像素点由Red、Green、Blue三种颜色组合而成，YUV使用色彩通道UV和亮度通道Y，这种格式更适合图像处理领域，图片的所有细节保存在亮度通道中，如果没有亮度，图片就是一张灰度图片，人的眼睛对亮度的敏感度要高于颜色，所以可以通过减少每个像素点的颜色值，达到效果比较好的压缩，这个减少颜色数据的过程就是色彩的二次抽样 YUV转RGB绘制纹理 纹理映射只能在RGBA方式下执行，摄像头采集YUV，需要把YUV转换成RGBA 获取到视频帧的YUV数据 Core
OpenGL实现RGB到YUV的转化
06-09
在本主题中，我们将深入探讨如何使用OpenGL ES 2.0（移动设备上的OpenGL版本）来实现RGB到YUV的颜色空间转换，这是一个在视频处理和编码中常见的任务。 RGB（红绿蓝）是一种加性颜色模型，广泛用于数字图像和显示器...
rgb转yuv420sp_nv12 硬件加速（opengl es,shader）
07-14
rgb转yuv420sp_nv12的硬件加速，opengles 的shader实现
Android工程OpenGL ES中YUV420转化RGB工程实现源码
最新发布
07-22
2、将YUV420图像数据通过Shader语言，在GPU中转化为RGB； 3、在OpenGL ES中渲染最终的RGB纹理，实现图像预览。 4、本案例代码是： 一文详解微信视频通话、抖音视频回显实现方案：...
YUV颜色空间转换（YV12、NV12、NV21、I420、RGB等）
08-17
本程序实现了简单的YUV数据之间的转换和YUV与RGB的转换。 注：1、本程序只是简单YUV之间的颜色空间转换和YUV与RGB的转换。 2、本程序使用的vs2019创建的，需使用2019打开工程。 3、包含功能： 1）YV12_2_I420； ...
opengl-YUV-RGB互转
04-30
opengl-YUV-RGB互转
安卓opengl-YUV-RGB互转.zip
05-29
opengl es2.0 读取位图 先用opengl转换成yuv然后再转回rgb最后输出到显示屏上
opengl es2.0 -YUV-RGB互转+显示到手机屏幕 DEMO
04-30
opengl es2.0 读取位图 先用opengl转换成yuv然后再转回rgb最后输出到显示屏上
opengl es rgb转yuv 顶点和片元着色器脚本
04-01
opengl es rgb转yuv 顶点和片元着色器脚本，不提供demo
rgb转yuv420p 硬件加速（opengl es,shader）
11-02
rgb转yuv420p的硬件加速，opengles 的shader实现
openGL 显卡YUV转RGB
zqf_office的专栏
07-21 2620
/* * Very simple example of how to perform YUV->RGB (YCrCb->RGB) * conversion with an OpenGL fragmen shader. The data (not included) * is presumed to be three files with Y, U and V samples for a 72
openGL 显卡YUV转RGB(转)
smilestone322的专栏
05-12 4299
/* * Very simple example of how to perform YUV->RGB (YCrCb->RGB) * conversion with an OpenGL fragmen shader. The data (not included) * is presumed to be three files with Y, U and V samples for a 720x576 * pixels large image. * * Note! The examp
一文学会 Opengl ES中YUV420与RGB转化
bjxiaxueliang的CODING茶馆
05-22 8645
2014年曾经做过一款类似当今“抖音”的短视频软件，叫“魔力秀”。可以说和现在的抖音基本是一样的，但因为“魔力秀”出生过早，加上投资人不看好，注定无法成长为一棵参天大树，最终只发了一个版本就结束了。当时“魔力秀App”的视频回显模块是我设计实现的，所以就有了这篇文章。事过多年，将这篇文章拿出来整理，因为这项技术依然不过时，反而被广泛应用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值