OpenGL ES _ 入门_01
OpenGL ES _ 入门_02
OpenGL ES _ 入门_03
OpenGL ES _ 入门_04
OpenGL ES _ 入门_05
OpenGL ES _ 入门练习_01
OpenGL ES _ 入门练习_02
OpenGL ES _ 入门练习_03
OpenGL ES _ 入门练习_04
OpenGL ES _ 入门练习_05
OpenGL ES _ 入门练习_06
OpenGL ES _ 着色器 _ 介绍
OpenGL ES _ 着色器 _ 程序
OpenGL ES _ 着色器 _ 语法
OpenGL ES_着色器_纹理图像
OpenGL ES_着色器_预处理
OpenGL ES_着色器_顶点着色器详解
OpenGL ES_着色器_片断着色器详解
OpenGL ES_着色器_实战01
OpenGL ES_着色器_实战02
OpenGL ES_着色器_实战03
学习是一件开心的额事情
手机截图
动画演示.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。
需要代码的亲,请点赞
