当前位置: 首页 > news >正文

谈一谈Flutter外接纹理

导言:这篇文章主要介绍在Android上SurfaceTexture的应用 - Flutter外接纹理,并给出了外接纹理的正确姿势,而阿里闲鱼的技术方案则是错误的姿势。

  • 1 背景知识

  • 2 实现原理

    • 2.1 性能

    • 2.2 应用

  • 3 闲鱼技术方案

  • 4 具体实现

    • 4.1 流程图

    • 4.2 关键代码

    • 4.3 效果示意图

  • 5 结语

1 背景知识

当我们用flutter做实时视频渲染时,往往是要对视频或者相机画面做滤镜处理的,如图:

如果我们要用flutter定义的消息通道机制来实现这个功能,就需要将摄像头采集的每一帧图片都要从原生传递到flutter中,这样做代价将会非常大,因为将图像或视频数据通过消息通道实时传输必然会引起内存和CPU的巨大消耗。为此,flutter提供了两种机制实现这一功能:

  • PlatformView

  • Texture Widget

PlatformView实质上是将原有的NativeView嵌入到Flutter中显示,虽然使用和移植很简单,但并不是性能最优的做法。

Texture Widget是flutter提供的另一种机制,可以将native纹理共享给flutter进行渲染。但由于native纹理与flutter是两个OpenGL Context,如果直接使用的话,需要经过GPU -> CPU -> GPU的转换开销,这对于实时视频渲染是很难令人接受的。

所以解决方案就是共享纹理

2 实现原理

在上篇文章谈一谈Android上的SurfaceTexture中,我们可以知道共享纹理有两种实现:

  • ShareContext

  • 共享内存

这两种方式均能实现共享纹理。

这里假设要共享纹理的是两个OpenGL环境A与B,A是自己的OpenGL环境,B是第三方的OpenGL环境。

当然A与B都是自己的OpenGL框架也可以。不过在实际开发中,B往往是第三方的OpenGL框架,不然干嘛要用共享纹理呢,直接在一个环境中开发就行了????

ShareContext比较适合A与B有大量交互的场景,方便互相使用,但由于共享了EGLContext,对B的侵入较多,很容易对B造成影响。

共享内存并不会侵入B原有的渲染环境,但有大量需要共享的场景时,就不够灵活了,对于OpenGL,共享内存通过EGLImageKHR来使用,在Android上,最简单的使用方式就是通过SurfaceTexture,具体原理不再说明,请看上篇文章。

2.1 性能

由于显卡驱动在实现ShareContext时,往往最终是通过地址映射与共享内存实现的,所以这两种方式其实性能上差别并不明显,基本一致。

2.2 应用

共享纹理在需要接入第三方渲染框架时是非常有用的。

比如在做滤镜开发中,有时要接入第三方的游戏引擎来渲染3D效果。

当接入Unity游戏引擎时,由于Unity是闭源的,并且只有SurfaceTexture的接口,所以只能使用共享内存实现。

而像开源的cocos2d,filament,gameplay等游戏引擎,这两种方式都可以使用,看应用场景即可。

3 闲鱼技术方案

在我调研flutter外接纹理的实现时,注意到阿里闲鱼团队的一篇文章:

文章地址:https://juejin.im/post/6844903662548942855

闲鱼的技术方案实质上是使用了第一种方式,ShareContext实现共享纹理。

EGL的ShareContext在苹果的EAGL框架中叫ShareGroup,实质是一个作用

由于flutter的engine并没有提供这种接口,所以他们需要修改engine的源代码,将两个OpenGL环境打通。确实这种方案能解决问题,但其实这种场景下,并没有大量交互的场景,只需要共享一个纹理就可以。

而这种方案将flutter的渲染环境直接暴露给外部,且不说以后升级flutter版本时痛苦的Merge过程,就是写代码时也大大增加了出bug的几率,一不小心就会误操作flutter渲染环境,给团队埋下了巨大的技术坑。

另外从性能上也并不会比共享内存更好,所以这是一种错误的姿势,在我看来,除了KPI这点,只会白白的增加工作量。

4 具体实现

由上面可以知道,flutter外接纹理的正确实现方式应该是使用共享内存,由于这里只涉及到OpenGL,因此在安卓这里就是使用SurfaceTexture的方式。

事实上,这也是官方所推荐的方式,官方也提供了SurfaceTexture相关的接口。

我这里写了一个Demo放在了github上,

地址是:https://github.com/KaelMa/external_plugin

4.1 流程图


4.2 关键代码

dart调用端

这里textureId的内容是native端传过来的

  @override
  Widget build(BuildContext context) {    
    return Container(
      width: widget.width.toDouble(),
      height: widget.height.toDouble(),
      child: _externalPlugin.isInitialized
          ? Texture(textureId: _externalPlugin.textureId)
          : Container(color: Colors.blue)
    );
  }

android端

创建SurfaceTexture

override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
    val arguments = call.arguments<Map<String,Int>>()
    when (call.method) {
      "create" -> {
        val width = arguments["width"]
        val height = arguments["height"]
        // 调用flutter的接口,创建surfacetexture
        surfaceEntry = textureRegistry.createSurfaceTexture()
        val surfaceTexture = surfaceEntry.surfaceTexture().apply {
          setDefaultBufferSize(width!!, height!!)
        }
        externalGLThread = ExternalGLThread(surfaceTexture, SimpleRenderer())
        externalGLThread.start()
        result.success(surfaceEntry.id())
      }
      "dispose" -> {
        externalGLThread.dispose()
        surfaceEntry.release()
      }
      else -> result.notImplemented()
    }
  }

使用SurfaceTexture创建native端的EglContext

val eglConfig = chooseEglConfig()
val eglContext = createContext(egl, eglDisplay, eglConfig)
// 这里使用flutter框架创建的surfaceTexture创建windowSurface
val eglSurface = egl!!.eglCreateWindowSurface(eglDisplay, eglConfig, surfaceTexture, null)

4.3 效果示意图

这个Demo中间的矩形是用native端的OpenGL绘制的,并且每秒变化2次颜色。

5 结语

这篇文章主要介绍了flutter外接纹理的正确姿势,这也是SurfaceTexture诸多应用中的一种。

按照这种外接纹理的方式,我们就可以使用flutter进行实时音视频开发,利用flutter跨平台的能力提高生产力,并将性能损失降到最小。

相关文章:

  • Android 11 强制用户使用系统相机?
  • 3A之自动白平衡(AWB)篇
  • Shader基础技巧整理
  • 一起用Gradle Transform API + ASM完成代码织入呀~
  • 用shader做一个柿子颜色的过场动画
  • 只需跟着Google学android:ViewModel篇
  • 我用 OpenGL 实现了那些年流行的相机滤镜
  • 有必要去研究Handler和Binder么?
  • 音视频交流群又来啦~~~
  • Android 手机如何拍摄RAW图
  • 华为手机刷微博体验更好?技术角度的分析和思考
  • 播放视频时如何调整音频的音量
  • 视频码控:CBR、VBR和ABR
  • OpenGL ES 相机 LUT 滤镜
  • Android 11 正式发布 | 开发者们的舞台已就绪
  • __proto__ 和 prototype的关系
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • 【翻译】babel对TC39装饰器草案的实现
  • C# 免费离线人脸识别 2.0 Demo
  • Django 博客开发教程 8 - 博客文章详情页
  • emacs初体验
  • Idea+maven+scala构建包并在spark on yarn 运行
  • Java的Interrupt与线程中断
  • Java方法详解
  • leetcode98. Validate Binary Search Tree
  • Magento 1.x 中文订单打印乱码
  • MySQL主从复制读写分离及奇怪的问题
  • Redis 懒删除(lazy free)简史
  • Redux系列x:源码分析
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • Vue2.x学习三:事件处理生命周期钩子
  • 当SetTimeout遇到了字符串
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 使用agvtool更改app version/build
  • 思否第一天
  • 微信小程序:实现悬浮返回和分享按钮
  • 我的面试准备过程--容器(更新中)
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • kubernetes资源对象--ingress
  • Linux权限管理(week1_day5)--技术流ken
  • ​2021半年盘点,不想你错过的重磅新书
  • #pragma once与条件编译
  • %check_box% in rails :coditions={:has_many , :through}
  • (ZT)出版业改革:该死的死,该生的生
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (一)Dubbo快速入门、介绍、使用
  • **CI中自动类加载的用法总结
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .net core使用RPC方式进行高效的HTTP服务访问
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • .Net环境下的缓存技术介绍