Metal入门教程(八)Metal与OpenGL ES交互

96
落影loyinglin 11f8cfa8 ec9f 4f82 be92 d6a39f61b5c1
0.6 2018.08.10 10:46 字数 1322

前言

Metal入门教程(一)图片绘制
Metal入门教程(二)三维变换
Metal入门教程(三)摄像头采集渲染
Metal入门教程(四)灰度计算
Metal入门教程(五)视频渲染
Metal入门教程(六)边界检测
Metal入门教程(七)天空盒全景

前面的教程介绍了Metal的图片绘制、三维变换、视频渲染、天空盒,用计算管道实现灰度计算和sobel边界检测,这次探究Metal与OpenGL ES的交互。

Metal系列教程的代码地址
OpenGL ES系列教程在这里

你的star和fork是我的源动力,你的意见能让我走得更远

正文

UIImage是我们常用的图像类,可以转成CVPixelBufferRef,表示存储在内存的图像数据;
id<MTLTexture> 是Metal的纹理,表示的是存储在显存的图像数据;
GLuint 是OpenGL ES的纹理,表示的是存储在显存的图像数据。

CVPixelBufferRef <==> Metal纹理Metal入门教程(五)视频渲染有详细的介绍;
CVPixelBufferRef <==> OpenGL ES纹理OpenGL ES文集也有相关的介绍;
本文就是基于CVPixelBufferRef,将Metal的纹理转成CVPixelBufferRef,再用CVPixelBufferRef转成OpenGL ES的纹理,实现Metal到OpenGL ES的交互。

效果展示

三种渲染效果展示

具体步骤

1、Metal渲染

Metal渲染包括两步,分别是渲染到纹理和渲染到屏幕
纹理是由CVMetalTextureGetTexture方法生成,需要事先创建CVOpenGLESTextureCacheRef,再CVMetalTextureCacheCreateTextureFromImage创建具体的CVOpenGLESTextureRef,具体的创建过程如下:

- (void)setupRenderTargetWithSize:(CGSize)size {
    CFDictionaryRef empty= CFDictionaryCreate(kCFAllocatorDefault,
                                              NULL,
                                              NULL,
                                              0,
                                              &kCFTypeDictionaryKeyCallBacks,
                                              &kCFTypeDictionaryValueCallBacks);
    
    CFMutableDictionaryRef attrs= CFDictionaryCreateMutable(kCFAllocatorDefault,
                                                            1,
                                                            &kCFTypeDictionaryKeyCallBacks,
                                                            &kCFTypeDictionaryValueCallBacks);
    CFDictionarySetValue(attrs,
                         kCVPixelBufferIOSurfacePropertiesKey,
                         empty);
    CVPixelBufferRef renderTarget;
    CVPixelBufferCreate(kCFAllocatorDefault, size.width, size.height,
                        kCVPixelFormatType_32BGRA,
                        attrs,
                        &renderTarget);
    
    size_t width = CVPixelBufferGetWidthOfPlane(renderTarget, 0);
    size_t height = CVPixelBufferGetHeightOfPlane(renderTarget, 0);
    MTLPixelFormat pixelFormat = MTLPixelFormatBGRA8Unorm;
    
    CVMetalTextureRef texture = NULL;
    CVReturn status = CVMetalTextureCacheCreateTextureFromImage(NULL, self.textureCache, renderTarget, NULL, pixelFormat, width, height, 0, &texture);
    if(status == kCVReturnSuccess)
    {
        self.destTexture = CVMetalTextureGetTexture(texture);
        self.renderPixelBuffer = renderTarget;
        CFRelease(texture);
    }
    else {
        NSAssert(NO, @"CVMetalTextureCacheCreateTextureFromImage fail");
    }
}

渲染到纹理用的是computeShader实现,设置对应的输入和输出纹理即可。
需要注意的是,这次给commandBuffer添加了结束回调。在Metal渲染完毕后,会把CVPixelBufferRef里面的数据转成UIImage,同时也会传给OpenGL ES渲染:

    // 渲染到纹理
    {
        // 创建计算指令的编码器
        id<MTLComputeCommandEncoder> renderToTextureEncoder = [commandBuffer computeCommandEncoder];
        // 设置计算管道,以调用shaders.metal中的内核计算函数
        [renderToTextureEncoder setComputePipelineState:self.computePipelineState];
        // 输入纹理
        [renderToTextureEncoder setTexture:self.sourceTexture
                           atIndex:LYFragmentTextureIndexTextureSource];
        // 输出纹理
        [renderToTextureEncoder setTexture:self.destTexture
                           atIndex:LYFragmentTextureIndexTextureDest];
        // 计算区域
        [renderToTextureEncoder dispatchThreadgroups:self.groupCount
                       threadsPerThreadgroup:self.groupSize];
        
        // 调用endEncoding释放编码器,下个encoder才能创建
        [renderToTextureEncoder endEncoding];
    }


    [commandBuffer addCompletedHandler:^(id<MTLCommandBuffer> buffer) {
        if (kCVReturnSuccess == CVPixelBufferLockBaseAddress(self.renderPixelBuffer,
                                                             kCVPixelBufferLock_ReadOnly)) { // 获取到buffer
            dispatch_async(dispatch_get_main_queue(), ^{
                UIImage *image = [self lyGetImageFromPixelBuffer:self.renderPixelBuffer]; // 转成UIImage
                if (!self.imageView) {
                    self.imageView = [[UIImageView alloc] initWithImage:image];
                    [self.view addSubview:self.imageView];
                }
                // OpenGL ES渲染
                [self.glView displayPixelBuffer:self.renderPixelBuffer];
                // 释放资源
                CVPixelBufferUnlockBaseAddress(self.renderPixelBuffer, kCVPixelBufferLock_ReadOnly);
            });
        }
    }];

最后再把上一步的输出纹理作为输入,直接渲染到屏幕。

2、UIImageView渲染

UIImageView显示的数据对象是UIImage,需要把CVPixelBufferRef转成UIImage,具体的步骤如下:

/**
 *  根据CVPixelBufferRef返回图像
 *
 *  @param pixelBufferRef 像素缓存引用
 *
 *  @return UIImage对象
 */
- (UIImage *)lyGetImageFromPixelBuffer:(CVPixelBufferRef)pixelBufferRef {
    CVImageBufferRef imageBuffer =  pixelBufferRef;
    
    CVPixelBufferLockBaseAddress(imageBuffer, 0);
    void *baseAddress = CVPixelBufferGetBaseAddress(imageBuffer);
    size_t width = CVPixelBufferGetWidth(imageBuffer);
    size_t height = CVPixelBufferGetHeight(imageBuffer);
    size_t bufferSize = CVPixelBufferGetDataSize(imageBuffer);
    size_t bytesPerRow = CVPixelBufferGetBytesPerRowOfPlane(imageBuffer, 0); //
    
    CGColorSpaceRef rgbColorSpace = CGColorSpaceCreateDeviceRGB();
    CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, baseAddress, bufferSize, NULL);
    
    // rgba的时候是kCGImageAlphaNoneSkipFirst | kCGBitmapByteOrderDefault,这样会导致出现蓝色的图片
    CGImageRef cgImage = CGImageCreate(width, height, 8, 32, bytesPerRow, rgbColorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst, provider, NULL, true, kCGRenderingIntentDefault);
    
    UIImage *image = [UIImage imageWithCGImage:cgImage];
    
    CGImageRelease(cgImage);
    CGDataProviderRelease(provider);
    CGColorSpaceRelease(rgbColorSpace);
    CVPixelBufferUnlockBaseAddress(imageBuffer, 0);
    return image;
}

CGImageCreate方法的bitmapInfo参数(第七个)需要特别注意,这里的格式要和CVPixelBufferCreate方法的pixelFormatType(第四个)对应,否则会出现图片颜色异常的情况。

3、OpenGL ES渲染

OpenGL ES的渲染关键在于把CVPixelBufferRef转成纹理,我们可以用CVOpenGLESTextureCacheCreateTextureFromImage方法获取到CVOpenGLESTextureRef,再用CVOpenGLESTextureGetTargetCVOpenGLESTextureGetName获取纹理的相应信息,之后便是正常的OpenGL ES渲染逻辑。

遇到的问题

1、OpenGL ES渲染的图片不透明

按照设计,左上角是UIKit渲染的图片,右上角是OpenGL ES渲染的图片,中间是Metal渲染的图片,并UIKit和OpenGL ES渲染区域应该是透明的。但是实际的效果如下:


Metal与OpenGL

OpenGL ES渲染的图片不透明!

  • 首先猜测的点是因为图片本身不透明,导致底为黑色;这个通过UIImageView渲染的效果排除;
  • 其次猜测的是OpenGL ES渲染的时候,把透明的部分设置成黑色;下面一段是shader 代码:
varying highp vec2 texCoordVarying;
uniform sampler2D inputTexture;
precision mediump float;

void main()
{
   lowp vec3 rgb = texture2D(inputTexture, texCoordVarying).rgb;
   gl_FragColor = vec4(rgb, 1);
}

通过上面的代码可以看出,确实所有像素点的alpha值都是1!
但这个并不是问题所在,因为这里只决定三角形区域内的像素点颜色,黑色部分为背景,并不受shader的影响。

  • 通过上面的猜测,发现问题可能在glClearColor设置了不透明的颜色。检查代码果然有一行glClearColor(0.0f, 0.0f, 0.0f, 1.0f);,把背景设置成不透明的黑色!
    但在把这段代码修改成glClearColor(0.0f, 0.0f, 0.0f, 0.0f);,发现黑色背景依旧没有消除!这次问题出现在哪里?
  • 沿着我们分析的路径,我们已经排除掉shader、GL指令的影响,当渲染出来透明的区域时,理应和UIKit的视图进行混合。回忆下OpenGL ES教程里的内容,苹果用CAEAGLLayer来承载OpenGL ES的内容,最终渲染结果都是CAEAGLLayer上颜色缓冲区的数据。既然我们判断渲染结果没有问题,那么应该从CAEAGLLayer与UILayer的混合开始检查。通过排查CAEAGLLayer的属性设置,终于发现问题所在是eaglLayer.opaque = YES;!CAEAGLLayer的不透明属性设置为YES,有利于性能的优化,但是在demo里是会造成额外的影响!
    通过把opaque属性设置成NO,问题终于解决。

总结

本文介绍基于CVPixelBufferRef如何把Metal纹理转成OpenGL ES纹理,而OpenGL ES纹理转成Metal纹理的操作也类似。
在理解转换过程中,有两个等式非常关键:
CVBufferRef = CVImageBufferRef = CVMetalTextureRef
CVImageBufferRef=CVPixelBufferRef
在理清这些数据结构后,能更好理解苹果如何对CPU和GPU的数据进行转换。
预告,下一篇是对入门教程的总结。

Metal