返回顶部
首页 > 资讯 > 移动开发 >Flutter+Metal实现图像处理详细流程
  • 799
分享到

Flutter+Metal实现图像处理详细流程

2024-04-02 19:04:59 799人浏览 薄情痞子
摘要

背景 在之前自制的图像处理App中,使用了OpenGL处理图片,这次使用Metal替代OpenGL,来达到更好的性能,顺便熟悉一下Metal的渲染流程 基本思路 Flutter使用

背景

在之前自制的图像处理App中,使用了OpenGL处理图片,这次使用Metal替代OpenGL,来达到更好的性能,顺便熟悉一下Metal的渲染流程

基本思路

Flutter使用CVPixelBuffer和iOS交互,我们可以直接使用CVPixelBuffer创建MTLTexture,然后将MTLTexture设置为渲染目标。这样Metal框架可以直接将渲染结果写入CVPixelBuffer,达到更加高效的目的。

Metal环境设置

主要初始化DevicePipelineStateCommandQueue三个对象。我们需要依赖Device分配各种Metal资源,PipelineState管理着渲染流水线的各个环节的配置,比如vertex shader,fragment shader,输出像素格式等。CommandQueue用于管理执行的绘制命令。

_device = MTLCreateSystemDefaultDevice();
id<MTLLibrary> lib = [_device newDefaultLibrary];
id<MTLFunction> vertexFunc = [lib newFunctionWithName:vertexFuncName];
id<MTLFunction> fragFunc = [lib newFunctionWithName:fragFuncName];
MTLRenderPipelineDescriptor *renderPipelineDesc = [MTLRenderPipelineDescriptor new];
renderPipelineDesc.vertexFunction = vertexFunc;
renderPipelineDesc.fragmentFunction = fragFunc;
renderPipelineDesc.colorAttachments[0].pixelFORMat = MTLPixelFormatBGRA8Unorm;
_pipelineState = [_device newRenderPipelineStateWithDescriptor:renderPipelineDesc error:nil];
_commandQueue = [_device newCommandQueue];

从CVPixelBuffer创建MTLTexture纹理

首先创建一个CVPixelBuffer对象

NSDictionary *pixelAttributes = @{( id )kCVPixelBufferIOSurfacePropertiesKey : @{}};
CVPixelBufferCreate(
            kCFAllocatorDefault,
                    imageWidth,
                    imageHeight,
            kCVPixelFormatType_32BGRA,
                    (__bridge CFDictionaryRef)pixelAttributes,
                    &_renderTargetPixelBuffer);

利用CVMetalTextureCacheCreateTextureFromImageCVPixelBuffer创建MTLTexture

CVReturn ret = CVMetalTextureCacheCreate(kCFAllocatorDefault, nil, _mtContext.device, nil, &_textureCache);
CVMetalTextureRef renderTargetMetalTextureRef;
ret = CVMetalTextureCacheCreateTextureFromImage(kCFAllocatorDefault, _textureCache, _renderTargetPixelBuffer, nil, MTLPixelFormatBGRA8Unorm, imageWidth, imageHeight, 0, &renderTargetMetalTextureRef);
id<MTLTexture> mtlTexture = CVMetalTextureGetTexture(renderTargetMetalTextureRef);

渲染到纹理

CommandQueue获得一个CommandBuffer,用于保存需要执行的绘制命令

_activeCmdBuffer = [_commandQueue commandBuffer];

创建MTLRenderPassDescriptor设置本次绘制的相关配置,比如绘制到哪里,这里指定通过CVPixelBuffer创建出来的MTLTexture,是否清除当前内容,清除的颜色

MTLRenderPassDescriptor *renderPassDesc = [MTLRenderPassDescriptor new];
renderPassDesc.colorAttachments[0].texture = target;
renderPassDesc.colorAttachments[0].loadAction = MTLLoadActionClear;
renderPassDesc.colorAttachments[0].clearColor = MTLClearColorMake(0, 0, 0, 1);

通过CommandBufferMTLRenderPassDescriptor创建一个MTLRenderCommandEncoder

_activeEncoder = [_activeCmdBuffer renderCommandEncoderWithDescriptor:renderPassDesc];

指定MTLRenderCommandEncoder所在的PipelineState

[_activeEncoder setRenderPipelineState:_pipelineState];

使用MTLRenderCommandEncoder绑定BufferTexture,在Metal里,Uniform和Vertex Buffer 都是通过MTLBuffer绑定到Shader中

[_activeEncoder setVertexBuffer:vertexBuffer offset:0 atIndex:0];
[_activeEncoder setFragmentBuffer:uniformBuffer offset:0 atIndex:0];
[_activeEncoder setFragmentBuffer:texture offset:0 atIndex:0];

绘制图形

[_activeEncoder drawPrimitives:MTLPrimitiveTypeTriangle vertexStart:0 vertexCount:vertexCount instanceCount:1];

显式的结束MTLRenderCommandEncoder

[_activeEncoder endEncoding];

提交CommandBuffer

[_activeCmdBuffer commit];

等待绘制结束,如果你想要异步等待,需要在[_activeCmdBuffer commit]之前设置completedHandler

// 同步等待
[_activeCmdBuffer waitUntilCompleted];
// 异步等待
[_activeCmdBuffer addCompletedHandler:^(id<MTLCommandBuffer> _Nonnull buf) {
}];

到此绘制的内容就已经在CVPixelBuffer中了,再将CVPixelBuffer提交给Flutter显示即可。

到此这篇关于Flutter+Metal实现图像处理的文章就介绍到这了,更多相关Flutter图像处理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter+Metal实现图像处理详细流程

本文链接: https://lsjlt.com/news/151862.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter+Metal实现图像处理详细流程
    背景 在之前自制的图像处理App中,使用了OpenGL处理图片,这次使用Metal替代OpenGL,来达到更好的性能,顺便熟悉一下Metal的渲染流程 基本思路 Flutter使用...
    99+
    2024-04-02
  • 怎么使用Flutter+Metal实现图像处理
    这篇“怎么使用Flutter+Metal实现图像处理”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用Flutter+M...
    99+
    2023-07-02
  • Python实现图像压缩和图像处理详解
    目录入门了解1.颜色入门了解 2. 像素用Pillow处理图像1. 读取和显示图像2. 剪裁图像3. 生成缩略图4. 缩放和黏贴图像5. 旋转和翻转6. 操作像素7. 滤镜效果使用P...
    99+
    2024-04-02
  • OpenCV  iOS 图像处理编程入门详细教程
    目录OpenCV简介集成OpenCV基础图像容器Mat图像表示Mat类关键属性及定义创建Mat对象常用数据结构和函数Point类Scalar类Size类Rect类cvtColor类图...
    99+
    2024-04-02
  • C语言实现BMP图像细化处理
    细化(thinning)算法有很多,我们在这里介绍的是一种简单而且效果很好的算法,用它就能够实现从文本抽取骨架的功能。我们的对象是白纸黑字的文本,但在程序中为了处理的方便,还是采用 ...
    99+
    2024-04-02
  • Python+OpenCV六种实时图像处理详细讲解
    目录1、导入库文件2、设计GUI3、调用摄像头4、实时图像处理4.1、阈值二值化4.2、边缘检测4.3、轮廓检测4.4、高斯滤波4.5、色彩转换4.6、调节对比度5、退出系统初学Op...
    99+
    2024-04-02
  • JavaScript实现像素鸟小游戏的详细流程
    目录《像素鸟》游戏简单介绍1.功能结构及流程2.游戏实现效果展示3.实现思路代码展示介绍css样式js代码随机背景移动玩家控制像素鸟生成随机柱子积分增加总结《像素鸟》游戏简单介绍 游...
    99+
    2024-04-02
  • Python OpenCV对图像进行模糊处理详解流程
    其实我们平时在深度学习中所说的卷积操作,在 opencv 中也可以进行,或者说是类似操作。那么它是什么操作呢?它就是图像的模糊(滤波)处理。 均值滤波 使用 opencv 中的cv2...
    99+
    2024-04-02
  • Flutter异步操作实现流程详解
    目录一、FutureBuilder二、StreamBuilder在Flutter中,借助 FutureBuilder 组件和 StreamBuilder 组件,可以非常方便地完成异步...
    99+
    2024-04-02
  • Python图像处理库PIL详细使用说明
    一、 简介 1、 基本介绍 Pillow 是 Python 中较为基础的图像处理库,主要用于图像的基本处理,比如裁剪图像、调整图像大小和图像颜色处理等。与 Pillow 相比,Ope...
    99+
    2024-04-02
  • Java数字图像处理之图像灰度处理怎么实现
    本篇内容介绍了“Java数字图像处理之图像灰度处理怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、简介图像灰度化处理可以作为图像处...
    99+
    2023-07-02
  • Python 图像处理教程:如何提高图像细节清晰度
    Python 是一种广泛应用于图像处理的编程语言,它提供了丰富的图像处理库,例如 Pillow 和 OpenCV 等。在进行图像处理时,有时候我们需要提高图像的细节清晰度,以便更好地观察和分析图像。本教程将介绍一些 Python 图像处理技...
    99+
    2023-10-21
    图像处理 python opencv
  • SpringBoot响应处理实现流程详解
    目录1、相关依赖2、ReturnValueHandlers—返回值处理器3、HttpMessageConvert—消息转换器4、开启浏览器参数方式内容协商功能...
    99+
    2024-04-02
  • OpenMV如何实现图像处理
    这篇文章主要为大家展示了“OpenMV如何实现图像处理”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“OpenMV如何实现图像处理”这篇文章吧。一、图像处理基础知识摄像头:光学信号转换成电信号。计...
    99+
    2023-06-25
  • 一文详解matlab实现形态学图像处理
    目录目的内容膨胀的简单应用函数imopen 和imclose 的应用灰度图像形态学开运算和闭运算灰度图像形态学使用重构删除复杂图像的背景目的 文章和代码以及样例图片等相关资源,已经...
    99+
    2023-03-08
    matlab形态学图像处理 matlab图像处理
  • C++详细实现红黑树流程详解
    目录红黑树的概念红黑树的性质红黑树的定义与树结构插入新增结点插入后维护红黑树性质的主逻辑旋转验证红黑树与AVl树的比较红黑树的应用红黑树的概念 红黑树,是一种二叉搜索树,但在每个结点...
    99+
    2024-04-02
  • OpenCV+Qt实现图像处理操作
    本文实例为大家分享了OpenCV+Qt实现图像处理操作的具体代码,供大家参考,具体内容如下 一、目标 Qt界面实现 雪花屏 高斯模糊 中值滤波 毛玻璃 灰度化 XY方向模糊 双边模糊...
    99+
    2022-11-13
    OpenCV Qt 图像处理
  • Tensorflow加载模型实现图像分类识别流程详解
    目录前言正文VGG19网络介绍总结前言 深度学习框架在市面上有很多。比如Theano、Caffe、CNTK、MXnet 、Tensorflow等。今天讲解的就是主角Tensorflo...
    99+
    2024-04-02
  • python数字图像处理之图像简单滤波实现
    目录引言1、sobel算子2、roberts算子3、scharr算子4、prewitt算子5、canny算子6、gabor滤波7、gaussian滤波8、median9、水平、垂直边...
    99+
    2024-04-02
  • OpenCV图像处理之实现图像膨胀腐蚀操作
    目录一.形态学操作概念二.形态学操作-膨胀膨胀函数API接口结构元素的API函数接口三.形态学操作—腐蚀腐蚀原理腐蚀函数API接口图像处理效果一.形态学操作概念 图像形态...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作