使用 MTKView 显示解码的视频流会导致不希望的模糊输出
Displaying decoded video stream with MTKView results in undesirable blurry output
我已经成功地创建了一个应用程序来接收实时的 h264 编码视频流，然后使用 Video Toolbox 和 AVSampleBufferDisplayLayer 解码并显示视频。这按预期工作，但我希望能够将过滤器应用于渲染输出，因此我改为使用 Video Toolbox 进行解码，并 displaying/rendering 使用 MetalKit 解码视频。我遇到的唯一问题是，我使用 MetalKit 渲染的输出明显比使用 AVSampleBufferDisplayLayer 接收的输出更模糊，我还没有设法找出原因。
这是 AVSampleBufferDisplayLayer
的输出
这是 MetalKit 的输出
我试过跳过 MetalKit 并直接渲染到 CAMetalLayer，但同样的问题仍然存在。我正在尝试将我的 CVImageBufferRef 转换为可以使用 UIView 显示的 UIImage。如果这也最终变得模糊，那么问题可能出在我的 VTDecompressionSession 而不是金属方面。
解码部分与这里给出的非常相似
我将尝试只粘贴我的代码中有趣的片段。
这些是我给 VTDecompressionSession 的选项。
NSDictionary *destinationImageBufferAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithInteger:kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange],
(id)kCVPixelBufferPixelFormatTypeKey,
nil];
这是我继承自 MTKView 的视图
@interface StreamView : MTKView
@property id<MTLCommandQueue> commandQueue;
@property id<MTLBuffer> vertexBuffer;
@property id<MTLBuffer> colorConversionBuffer;
@property id<MTLRenderPipelineState> pipeline;
@property CVMetalTextureCacheRef textureCache;
@property CFMutableArrayRef imageBuffers;
-(id)initWithRect:(CGRect)rect withDelay:(int)delayInFrames;
-(void)addToRenderQueue:(CVPixelBufferRef)image renderAt:(int)frame;
@end
这就是我从视图控制器初始化视图的方式。我收到的视频大小相同，即666x374。
streamView = [[StreamView alloc] initWithRect:CGRectMake(0, 0, 666, 374) withDelay:0];
[self.view addSubview:streamView];
这是StreamView的initWithRect方法的内容
id<MTLDevice> device = MTLCreateSystemDefaultDevice();
self = [super initWithFrame:rect device:device];
self.colorPixelFormat = MTLPixelFormatBGRA8Unorm;
self.commandQueue = [self.device newCommandQueue];
[self buildTextureCache];
[self buildPipeline];
[self buildVertexBuffers];
这是 buildPipeline 方法
- (void)buildPipeline
{
NSBundle *bundle = [NSBundle bundleForClass:[self class]];
id<MTLLibrary> library = [self.device newDefaultLibraryWithBundle:bundle error:NULL];
id<MTLFunction> vertexFunc = [library newFunctionWithName:@"vertex_main"];
id<MTLFunction> fragmentFunc = [library newFunctionWithName:@"fragment_main"];
MTLRenderPipelineDescriptor *pipelineDescriptor = [MTLRenderPipelineDescriptor new];
pipelineDescriptor.vertexFunction = vertexFunc;
pipelineDescriptor.fragmentFunction = fragmentFunc;
pipelineDescriptor.colorAttachments[0].pixelFormat = self.colorPixelFormat;
self.pipeline = [self.device newRenderPipelineStateWithDescriptor:pipelineDescriptor error:NULL];
}
这是我实际绘制纹理的方式
CVImageBufferRef image = (CVImageBufferRef)CFArrayGetValueAtIndex(_imageBuffers, 0);
id<MTLTexture> textureY = [self getTexture:image pixelFormat:MTLPixelFormatR8Unorm planeIndex:0];
id<MTLTexture> textureCbCr = [self getTexture:image pixelFormat:MTLPixelFormatRG8Unorm planeIndex:1];
if(textureY == NULL || textureCbCr == NULL)
return;
id<CAMetalDrawable> drawable = self.currentDrawable;
id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
MTLRenderPassDescriptor *renderPass = self.currentRenderPassDescriptor;
renderPass.colorAttachments[0].clearColor = MTLClearColorMake(0.5, 1, 0.5, 1);
id<MTLRenderCommandEncoder> commandEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPass];
[commandEncoder setRenderPipelineState:self.pipeline];
[commandEncoder setVertexBuffer:self.vertexBuffer offset:0 atIndex:0];
[commandEncoder setFragmentTexture:textureY atIndex:0];
[commandEncoder setFragmentTexture:textureCbCr atIndex:1];
[commandEncoder setFragmentBuffer:_colorConversionBuffer offset:0 atIndex:0];
[commandEncoder drawPrimitives:MTLPrimitiveTypeTriangleStrip vertexStart:0 vertexCount:4 instanceCount:1];
[commandEncoder endEncoding];
[commandBuffer presentDrawable:drawable];
[commandBuffer commit];
这就是我将 CVPixelBufferRef 转换为 MTLTexture 的方法
- (id<MTLTexture>)getTexture:(CVPixelBufferRef)image pixelFormat:(MTLPixelFormat)pixelFormat planeIndex:(int)planeIndex {
id<MTLTexture> texture;
size_t width, height;
if (planeIndex == -1)
{
width = CVPixelBufferGetWidth(image);
height = CVPixelBufferGetHeight(image);
planeIndex = 0;
}
else
{
width = CVPixelBufferGetWidthOfPlane(image, planeIndex);
height = CVPixelBufferGetHeightOfPlane(image, planeIndex);
NSLog(@"texture %d, %ld, %ld", planeIndex, width, height);
}
CVMetalTextureRef textureRef = NULL;
CVReturn status = CVMetalTextureCacheCreateTextureFromImage(NULL, _textureCache, image, NULL, pixelFormat, width, height, planeIndex, &textureRef);
if(status == kCVReturnSuccess)
{
texture = CVMetalTextureGetTexture(textureRef);
CFRelease(textureRef);
}
else
{
NSLog(@"CVMetalTextureCacheCreateTextureFromImage failed with return stats %d", status);
return NULL;
}
return texture;
}
这是我的片段着色器
fragment float4 fragment_main(Varyings in [[ stage_in ]],
texture2d<float, access::sample> textureY [[ texture(0) ]],
texture2d<float, access::sample> textureCbCr [[ texture(1) ]],
constant ColorConversion &colorConversion [[ buffer(0) ]])
{
constexpr sampler s(address::clamp_to_edge, filter::linear);
float3 ycbcr = float3(textureY.sample(s, in.texcoord).r, textureCbCr.sample(s, in.texcoord).rg);
float3 rgb = colorConversion.matrix * (ycbcr + colorConversion.offset);
return float4(rgb, 1.0);
}
因为我编码的视图和视频都是 666x374，所以我尝试将片段着色器中的采样类型更改为 filter::nearest。我以为它会匹配像素 1:1 但它仍然很模糊。我注意到的另一件奇怪的事情是，如果你在新选项卡中打开上传的图像，你会看到它们比 666x374 大得多......我怀疑我在编码方面犯了错误，即使我当时犯了错误AVSampleBufferDisplayLayer 仍然设法在不模糊的情况下显示视频，因此他们一定是在做我所缺少的正确事情。
看起来你已经解决了最严重的视图缩放问题，其他问题是正确的 YCbCr 渲染（听起来你将通过在解码时输出 BGRA 像素来避免）然后缩放原始图像电影以匹配视图的尺寸。当您请求 BGRA 像素数据时，数据被编码为 sRGB，因此您应该将纹理中的数据视为 sRGB。当从 sRGB 纹理读取时，Metal 会自动为您进行非线性到线性的转换，但您必须告诉 Metal 它是 sRGB 像素数据（使用 MTLPixelFormatBGRA8Unorm_sRGB）。要实现缩放，您只需要使用线性重采样将 BGRA 数据渲染到视图中。如果您想查看 MetalBT709Decoder 的源代码，请参阅我上面链接的 SO 问题，这是我自己的项目，它实现了 BT.709 的正确渲染。
我已经成功地创建了一个应用程序来接收实时的 h264 编码视频流，然后使用 Video Toolbox 和 AVSampleBufferDisplayLayer 解码并显示视频。这按预期工作，但我希望能够将过滤器应用于渲染输出，因此我改为使用 Video Toolbox 进行解码，并 displaying/rendering 使用 MetalKit 解码视频。我遇到的唯一问题是，我使用 MetalKit 渲染的输出明显比使用 AVSampleBufferDisplayLayer 接收的输出更模糊，我还没有设法找出原因。
这是 AVSampleBufferDisplayLayer
这是 MetalKit 的输出
我试过跳过 MetalKit 并直接渲染到 CAMetalLayer，但同样的问题仍然存在。我正在尝试将我的 CVImageBufferRef 转换为可以使用 UIView 显示的 UIImage。如果这也最终变得模糊，那么问题可能出在我的 VTDecompressionSession 而不是金属方面。
解码部分与这里给出的非常相似
我将尝试只粘贴我的代码中有趣的片段。
这些是我给 VTDecompressionSession 的选项。
NSDictionary *destinationImageBufferAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithInteger:kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange],
(id)kCVPixelBufferPixelFormatTypeKey,
nil];
这是我继承自 MTKView 的视图
@interface StreamView : MTKView
@property id<MTLCommandQueue> commandQueue;
@property id<MTLBuffer> vertexBuffer;
@property id<MTLBuffer> colorConversionBuffer;
@property id<MTLRenderPipelineState> pipeline;
@property CVMetalTextureCacheRef textureCache;
@property CFMutableArrayRef imageBuffers;
-(id)initWithRect:(CGRect)rect withDelay:(int)delayInFrames;
-(void)addToRenderQueue:(CVPixelBufferRef)image renderAt:(int)frame;
@end
这就是我从视图控制器初始化视图的方式。我收到的视频大小相同，即666x374。
streamView = [[StreamView alloc] initWithRect:CGRectMake(0, 0, 666, 374) withDelay:0];
[self.view addSubview:streamView];
这是StreamView的initWithRect方法的内容
id<MTLDevice> device = MTLCreateSystemDefaultDevice();
self = [super initWithFrame:rect device:device];
self.colorPixelFormat = MTLPixelFormatBGRA8Unorm;
self.commandQueue = [self.device newCommandQueue];
[self buildTextureCache];
[self buildPipeline];
[self buildVertexBuffers];
这是 buildPipeline 方法
- (void)buildPipeline
{
NSBundle *bundle = [NSBundle bundleForClass:[self class]];
id<MTLLibrary> library = [self.device newDefaultLibraryWithBundle:bundle error:NULL];
id<MTLFunction> vertexFunc = [library newFunctionWithName:@"vertex_main"];
id<MTLFunction> fragmentFunc = [library newFunctionWithName:@"fragment_main"];
MTLRenderPipelineDescriptor *pipelineDescriptor = [MTLRenderPipelineDescriptor new];
pipelineDescriptor.vertexFunction = vertexFunc;
pipelineDescriptor.fragmentFunction = fragmentFunc;
pipelineDescriptor.colorAttachments[0].pixelFormat = self.colorPixelFormat;
self.pipeline = [self.device newRenderPipelineStateWithDescriptor:pipelineDescriptor error:NULL];
}
这是我实际绘制纹理的方式
CVImageBufferRef image = (CVImageBufferRef)CFArrayGetValueAtIndex(_imageBuffers, 0);
id<MTLTexture> textureY = [self getTexture:image pixelFormat:MTLPixelFormatR8Unorm planeIndex:0];
id<MTLTexture> textureCbCr = [self getTexture:image pixelFormat:MTLPixelFormatRG8Unorm planeIndex:1];
if(textureY == NULL || textureCbCr == NULL)
return;
id<CAMetalDrawable> drawable = self.currentDrawable;
id<MTLCommandBuffer> commandBuffer = [_commandQueue commandBuffer];
MTLRenderPassDescriptor *renderPass = self.currentRenderPassDescriptor;
renderPass.colorAttachments[0].clearColor = MTLClearColorMake(0.5, 1, 0.5, 1);
id<MTLRenderCommandEncoder> commandEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPass];
[commandEncoder setRenderPipelineState:self.pipeline];
[commandEncoder setVertexBuffer:self.vertexBuffer offset:0 atIndex:0];
[commandEncoder setFragmentTexture:textureY atIndex:0];
[commandEncoder setFragmentTexture:textureCbCr atIndex:1];
[commandEncoder setFragmentBuffer:_colorConversionBuffer offset:0 atIndex:0];
[commandEncoder drawPrimitives:MTLPrimitiveTypeTriangleStrip vertexStart:0 vertexCount:4 instanceCount:1];
[commandEncoder endEncoding];
[commandBuffer presentDrawable:drawable];
[commandBuffer commit];
这就是我将 CVPixelBufferRef 转换为 MTLTexture 的方法
- (id<MTLTexture>)getTexture:(CVPixelBufferRef)image pixelFormat:(MTLPixelFormat)pixelFormat planeIndex:(int)planeIndex {
id<MTLTexture> texture;
size_t width, height;
if (planeIndex == -1)
{
width = CVPixelBufferGetWidth(image);
height = CVPixelBufferGetHeight(image);
planeIndex = 0;
}
else
{
width = CVPixelBufferGetWidthOfPlane(image, planeIndex);
height = CVPixelBufferGetHeightOfPlane(image, planeIndex);
NSLog(@"texture %d, %ld, %ld", planeIndex, width, height);
}
CVMetalTextureRef textureRef = NULL;
CVReturn status = CVMetalTextureCacheCreateTextureFromImage(NULL, _textureCache, image, NULL, pixelFormat, width, height, planeIndex, &textureRef);
if(status == kCVReturnSuccess)
{
texture = CVMetalTextureGetTexture(textureRef);
CFRelease(textureRef);
}
else
{
NSLog(@"CVMetalTextureCacheCreateTextureFromImage failed with return stats %d", status);
return NULL;
}
return texture;
}
这是我的片段着色器
fragment float4 fragment_main(Varyings in [[ stage_in ]],
texture2d<float, access::sample> textureY [[ texture(0) ]],
texture2d<float, access::sample> textureCbCr [[ texture(1) ]],
constant ColorConversion &colorConversion [[ buffer(0) ]])
{
constexpr sampler s(address::clamp_to_edge, filter::linear);
float3 ycbcr = float3(textureY.sample(s, in.texcoord).r, textureCbCr.sample(s, in.texcoord).rg);
float3 rgb = colorConversion.matrix * (ycbcr + colorConversion.offset);
return float4(rgb, 1.0);
}
因为我编码的视图和视频都是 666x374，所以我尝试将片段着色器中的采样类型更改为 filter::nearest。我以为它会匹配像素 1:1 但它仍然很模糊。我注意到的另一件奇怪的事情是，如果你在新选项卡中打开上传的图像，你会看到它们比 666x374 大得多......我怀疑我在编码方面犯了错误，即使我当时犯了错误AVSampleBufferDisplayLayer 仍然设法在不模糊的情况下显示视频，因此他们一定是在做我所缺少的正确事情。
看起来你已经解决了最严重的视图缩放问题，其他问题是正确的 YCbCr 渲染（听起来你将通过在解码时输出 BGRA 像素来避免）然后缩放原始图像电影以匹配视图的尺寸。当您请求 BGRA 像素数据时，数据被编码为 sRGB，因此您应该将纹理中的数据视为 sRGB。当从 sRGB 纹理读取时，Metal 会自动为您进行非线性到线性的转换，但您必须告诉 Metal 它是 sRGB 像素数据（使用 MTLPixelFormatBGRA8Unorm_sRGB）。要实现缩放，您只需要使用线性重采样将 BGRA 数据渲染到视图中。如果您想查看 MetalBT709Decoder 的源代码，请参阅我上面链接的 SO 问题，这是我自己的项目，它实现了 BT.709 的正确渲染。