专栏首页每日一篇技术文章OPenGL ES _ 着色器_实战2

OPenGL ES _ 着色器_实战2

学习是一件开心的额事情

手机截图

动画演示.gif

本节学习目标

使用OpenGLES + 着色器语言打造多屏显示视频框架。


实现步骤

1.使用AVPlayer 获取视频每一帧的YUV 像素数据 2.通过CoreVideo 框架中的几个方法,将Y分量和UV 分量进行分离 3.创建着色器,对Y分量和UV 分量进行采样. 4.在着色器中,将YUV 转换为RGB 5.计算视口的位置,分别进行渲染.

部分核心讲解

提醒各位,代码太多不能够全部讲解,我只讲关于OpenGLES 和着色器的部分,视频像素获取的代码,请自行搞定! 开发吧!

1.视频获取的代码封装了一下,文件名为"XJVRPlayerViewController.h" 和 "XJVRPlayerViewController.h" 请自定查阅. 2.我们核心讲解得是OSOpenGLESViewController控制器中的内容. 如果代码看不懂请从这里起步.

第一步.初始化

-(void)setup{
// 1.创建EALContext 对象管理GPU 
self.eagContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:self.eagContext];
GLKView *view = (GLKView*)self.view;
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
view.context = self.eagContext;
// 2.设置渲染的帧率,这里我们调到最大
self.preferredFramesPerSecond = 60;
// 3.创建着色器管理对象,这个是我自己封装的
self.shaderManager = [[OSShaderManager alloc]init];
// 4.编译连个shader 文件
GLuint vertexShader,fragmentShader;
NSURL *vertexShaderPath = [[NSBundle mainBundle]URLForResource:@"Shader" withExtension:@"vsh"];
NSURL *fragmentShaderPath = [[NSBundle mainBundle]URLForResource:@"Shader" withExtension:@"fsh"];
if (![self.shaderManager compileShader:&vertexShader type:GL_VERTEX_SHADER URL:vertexShaderPath]||![self.shaderManager compileShader:&fragmentShader type:GL_FRAGMENT_SHADER URL:fragmentShaderPath]){
    return ;
}
// 5.注意获取绑定属性要在连接程序之前,为啥呢!经验,一会解释!
[self.shaderManager bindAttribLocation:GLKVertexAttribPosition andAttribName:"position"];
[self.shaderManager bindAttribLocation:GLKVertexAttribTexCoord0 andAttribName:"texCoord0"];


// 6.将编译好的两个对象和着色器程序进行连接
if(![self.shaderManager linkProgram]){
    [self.shaderManager deleteShader:&vertexShader];
    [self.shaderManager deleteShader:&fragmentShader];
}
// 7.获取着色器全局变量
_textureBufferY = [self.shaderManager getUniformLocation:"sam2DY"];
 _textureBufferUV = [self.shaderManager getUniformLocation:"sam2DUV"];
_rgbaFactor = [self.shaderManager getUniformLocation:"rgbaFactor"];

// 8.删除着色器对象
[self.shaderManager detachAndDeleteShader:&vertexShader];
[self.shaderManager detachAndDeleteShader:&fragmentShader];

// 9.启用着色器程序
[self.shaderManager useProgram];

//10.高危警告 一定要放在使用程序之后,不然程序不知道你下面的操作是干神马滴!!!

glUniform1i(_textureBufferY, 0); // 0 代表GL_TEXTURE0
glUniform1i(_textureBufferUV, 1); // 0 代表GL_TEXTURE0

// 11.创建视频纹理缓冲区
if (!_videoTextureCache) {
    CVReturn err = CVOpenGLESTextureCacheCreate(kCFAllocatorDefault, NULL, self.eagContext, NULL, &_videoTextureCache);
    if (err != noErr) {
        NSLog(@"Error at CVOpenGLESTextureCacheCreate %d", err);
        return;
    }
}

// 计算视频的宽度和高度
self.videoWidth = self.view.bounds.size.width/4.0;
self.videoHeight = self.videoWidth;;
}

2.加载顶点坐标和纹理坐标 顶点坐标数据

static GLfloat vertex[8] = {
1,1, //1
-1,1,//0
-1,-1, //2
1,-1, //3 
};

纹理坐标

static GLfloat textureCoords[8] = {
 1,0,
 0,0,
 0,1,
 1,1
 };

 下面的代码是将顶点坐标和纹理坐标加载到GPU中去,这段代码不解释,请看实战1.

-(void)loadVertex{
glGenVertexArraysOES(1, &_vertexArray);
glBindVertexArrayOES( _vertexArray);
// 加载顶点坐标
glGenBuffers(1, &_vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), &vertex, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 2, GL_FLOAT, GL_FALSE, 8, NULL);

//加载纹理坐标
glGenBuffers(1, &_textureCoordBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _textureCoordBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(textureCoords), textureCoords, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 8, NULL);
glEnableVertexAttribArray(_vertexArray);  
}

3.将视频帧数据进行Y分量和UV 分量分解,加载到GPU 中去.

-(void)loadTexture{

if (!_videoTextureCache) {
    NSLog(@"No video texture cache");
    return;
}

// 下面这个是判断视频数据格式的,我在转换的时候,直接写死的.可以不要!
CFTypeRef colorAttachments = CVBufferGetAttachment(_pixelbuffer, kCVImageBufferYCbCrMatrixKey, NULL);
if (colorAttachments == kCVImageBufferYCbCrMatrix_ITU_R_601_4) {
   
}
else {
  
}

CGFloat width = CVPixelBufferGetWidth(self.pixelbuffer);
CGFloat height = CVPixelBufferGetHeight(self.pixelbuffer);

[self cleanUpTextures];
 CVReturn err;
 // 启用纹理缓冲区0
glActiveTexture(GL_TEXTURE0);
 // 获取Y 分量数据
err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                   _videoTextureCache,
                                                   _pixelbuffer,
                                                   NULL,
                                                   GL_TEXTURE_2D,
                                                   GL_RED_EXT,
                                                   width,
                                                   height,
                                                   GL_RED_EXT,
                                                   GL_UNSIGNED_BYTE,
                                                   0,
                                                   &_lumaTexture);
if (err) {
    NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
    
}
// 绑定到纹理0 缓冲区
glBindTexture(CVOpenGLESTextureGetTarget(_lumaTexture), CVOpenGLESTextureGetName(_lumaTexture));
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

// UV-plane.
glActiveTexture(GL_TEXTURE1);
err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                   _videoTextureCache,
                                                   _pixelbuffer,
                                                   NULL,
                                                   GL_TEXTURE_2D,
                                                   GL_RG_EXT,
                                                   width /2,
                                                   height /2,
                                                   GL_RG_EXT,
                                                   GL_UNSIGNED_BYTE,
                                                   1,
                                                   &_chromaTexture);
if (err) {
    NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
}


glBindTexture(CVOpenGLESTextureGetTarget(_chromaTexture), CVOpenGLESTextureGetName(_chromaTexture));
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
}

5.绘制

-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
glClearColor(1, 1, 1, 1);
glClear(GL_COLOR_BUFFER_BIT);
[self.shaderManager useProgram];

for (int i = 0 ; i< 4 ;i++){
   // 设置视口的位置大小
    glViewport(i%4 * self.videoWidth*2,i/4 *self.videoWidth*2 , self.videoWidth*2, self.videoWidth*2);
    switch (i) {
        case 0:
            glUniform4f(_rgbaFactor, self.redSlider.value, 1, 1, 1);
            break;
        case 1:
            glUniform4f(_rgbaFactor, 1.0, self.greenSlider.value, 1.0, 1.0);
            break;
        case 2:
            glUniform4f(_rgbaFactor, 1.0, 1.0, self.blueSlider.value, 1.0);
            break;
        case 3:
            glUniform4f(_rgbaFactor, 1.0, 1.0, 1.0, self.alphaSlider.value);                
            break;                
        default:
            break;
    }
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
} 
}
看看着色器里面的源码

Shader.vsh

attribute vec4 position; // 顶点位置属性
attribute vec2 texCoord0;// 纹理坐标属性
varying  vec2 texCoordVarying;// 着色器输入变量
void main (){
texCoordVarying = texCoord0;
gl_Position = position;
}

Shader.fsh

precision mediump float;//设置float 精度 这个一定要设置
varying  vec2 texCoordVarying;
uniform sampler2D sam2DY; // Y分量的采样器
uniform sampler2D sam2DUV;// UV分量的采样器
uniform  vec4 rgbaFactor; // 控制reba数据的因子矢量
void main(){
mediump vec3 yuv;
lowp vec3 rgb;
mediump mat3 convert = mat3(1.164,  1.164, 1.164,
                            0.0, -0.213, 2.112,
                            1.793, -0.533,   0.0);
yuv.x = texture2D(sam2DY,texCoordVarying).r - (16.0/255.0);
yuv.yz = texture2D(sam2DUV,texCoordVarying).rg - vec2(0.5, 0.5);
rgb = convert*yuv;
rgb.r = rgb.r * rgbaFactor.x;
rgb.g = rgb.g * rgbaFactor.y;
rgb.b = rgb.b * rgbaFactor.z;
rgb = rgb*rgbaFactor.w;
gl_FragColor = vec4(rgb,1);
}

经验分享

  • 绑定着色器属性,一定要放在连接程序之前 .因为程序连接后,会将着色器对象删除掉,这时候,你就找不到着色器对象的属性了,还怎么绑定呢? [self.shaderManager bindAttribLocation:GLKVertexAttribPosition andAttribName:"position"]; [self.shaderManager bindAttribLocation:GLKVertexAttribTexCoord0 andAttribName:"texCoord0"];
  • 给着色器变量设置值得时候,一定要调用一次 glUseProgram(); 这个函数, 是为了告诉GPU 我设置属性是针对这个着色器程序的。因为着色器程序有可能被创建多个。他们可能还有相同的变量.下面是我封装的方法 [self.shaderManager useProgram];
  • 着色器视口的设置,我们一般设置视图大小的时候,都是按照物理尺寸来的,但是视口设置是按照像素来计算的,所以设置视口的时候,一般要根据你手机的分辨率进行设置,我手机是2倍屏,所以x2. glViewport(i%4 * self.videoWidth*2,i/4 *self.videoWidth*2 , self.videoWidth*2, self.videoWidth*2);

总结

先说到这里,你以为这就结束了,这才刚刚开始,后面还有几十个案例,持续讲解! 如有疑问请加群号交流:578734141。 需要代码的亲,请点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OPengL ES _ 着色器_实战1

    1.由于着色器编译 链接过程较为繁琐,我封装了一下,文件名为"OSShaderManager.h" 和"OSShaderManager.m" 如果你对着色器程...

    酷走天涯
  • react-native 自动化构建过程(ipa包)

    准备工作 1.安装xcode 2.安装cocospod 3.react-native源文件(git获取源码) 4.安装npm包管理工具 5.安装rea...

    酷走天涯
  • OpenGL ES_手把手教你打造VR全景播放器

    实战2中,详细介绍了多屏显示的原理和实现过程,今天我们继续我们的OpenGL 旅程!技术再牛逼也要学习!

    酷走天涯
  • OPengL ES _ 着色器_实战1

    1.由于着色器编译 链接过程较为繁琐,我封装了一下,文件名为"OSShaderManager.h" 和"OSShaderManager.m" 如果你对着色器程...

    酷走天涯
  • 渠道伙伴成“火夫” 最历害的套路有哪些?

    人称T客
  • 调研:怨声载道 用友系渠道商获“差评”

    2018年注定是国内软件渠道商备受关注的一年,继6月15日举办“2018年中国软件渠道伙伴大会”后,T研究又重磅推出了其历经半年的良心之作——《2018年中国管...

    人称T客
  • 软件渠道商平均净利润率为15.8%,用友、金蝶渠道商均跑输大盘

    在浩浩荡荡的云端转型浪潮下,软件渠道商生存状态如何?在4月11日由人称T客主办的2019 中国软件渠道伙伴峰会上,T研究联合创始人&高级分析师吴勇带来了T研究对...

    人称T客
  • 渠道之难,谁敢说看不见?

    所有的企业都在数字化转型,传统软件厂商在向云端转型,在软件行业扮演着重要角色的渠道商也需要转型,然而转型不易。如今渠道变得越来焦虑,急需求变,要让“渠道为王”再...

    人称T客
  • (30)打鸡儿教你Vue.js

    1、通过webpack搭建vue工程workflow 2、哪些是学习vue的重点 3、.vue文件开发模式 4、vue使用jsx进行开发的方式 5、vu...

    达达前端
  • 渠道商的自我救赎

    从“得渠道者得天下”的王者到SaaS时代需不需要渠道的讨论,从拉新“打单”的拓客到经营老客户,随着云计算等新技术的发展以及其他外部环境的变化,渠道商受到了很大的...

    人称T客

扫码关注云+社区

领取腾讯云代金券