Metal入门教程（八）Metal与OpenGL ES交互

落影

发布于 2018-08-21 17:14:42

2.5K0

发布于 2018-08-21 17:14:42

文章被收录于专栏：落影的专栏

前面的教程介绍了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，再用CVOpenGLESTextureGetTarget和CVOpenGLESTextureGetName获取纹理的相应信息，之后便是正常的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的数据进行转换。预告，下一篇是对入门教程的总结。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.08.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度