导言：这篇文章主要介绍在Android上SurfaceTexture的应用 - Flutter外接纹理，并给出了外接纹理的正确姿势，而阿里闲鱼的技术方案则是错误的姿势。...3 闲鱼技术方案 在我调研flutter外接纹理的实现时，注意到阿里闲鱼团队的一篇文章： ?...4 具体实现 由上面可以知道，flutter外接纹理的正确实现方式应该是使用共享内存，由于这里只涉及到OpenGL，因此在安卓这里就是使用SurfaceTexture的方式。...5 结语 这篇文章主要介绍了flutter外接纹理的正确姿势，这也是SurfaceTexture诸多应用中的一种。...按照这种外接纹理的方式，我们就可以使用flutter进行实时音视频开发，利用flutter跨平台的能力提高生产力，并将性能损失降到最小。
第二次爬坑，利用Texture 外接纹理。...Google了一下，很不幸，flutter外接纹理渲染图片的demo非常少，仅仅找到了官方的VideoPlayer可以看看源码中联系texture和原生的代码，这里贴出比较重要的部分。...textureId->绘制->初始化glcontext->生成贴图->flutter 最终可以看看效果： [strip] 其中勾选导航栏按钮，表示使用flutter提供的image来加载图片，不勾选表示使用了外接纹理...可以看到，这次使用texture外接纹理，渲染图片，在列表加载多图情况下，滑动也非常流畅。...另外，这里也对比一下两种情况下帧率，发现在滑动列表时，外接纹理这种和flutter原生表现一致，基本上是可以满足性能要求的。
第二种方案是更好的解决方案，不管从内存消耗还是传输性能上来说，外接纹理的方案，都是Flutter桥接Native图片架构的最佳选择。...虽然说外接纹理方案比较好，但是网络上对于这个方案的研究却不是很多，比较典型的是Flutter官方Plugins中的视频渲染的方案，地址如下所示。...，也是基于外接纹理的方案来实现的，同时他们也给出了基于外接纹理的一系列方案的预研和技术基础研究，这些也算是我们了解外接纹理的最佳途径，但是，基于阿里的一贯风格，我们不太敢直接大范围使用PowerImage...，研究研究外接纹理，来实现一套自己的方案，其实是最好的。...来进行传递就会导致浪费和性能压力，所以Flutter提供了外接纹理，来处理这种场景。
想要在flutter想显示原生的东东，大家知道，一般有两种方式，一种是PlatformView,另外一种是Texture(俗称外接纹理)。...PlatformView https://api.flutter.dev/flutter/widgets/AndroidView-class.html 主要适用于flutter中不太容易实现的widget...然而，今天我要说的是，PlatformView其实也是使用外接纹理的方式实现的，如果你不信，那好把，我们一起拨开这层神秘面纱吧。...return textureEntry.id(); 最后确实是返回的是纹理 textureId，至此，我们也证实了PlatformView其实背后也是用到了外接纹理。...在看看NativeView是怎么呈现到Flutter这边的 我们看官方实现的视频播放器的源码，(嗯，视频播放器是使用外接纹理方式)plugins/VideoPlayer.java at master ·
Flutter基础介绍 Flutter简介 Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台应用，支持Android、IOS、Web、Linux app。...Flutter 与 React Native 设计对比 相比于 RN 转换原生控件,Flutter 则编译为原生代码....外接纹理 Texture：外接纹理 Texture 是可以将Native 纹理共享给 Flutter 进行渲染。需要自己开发音视频采集和渲染。...PlatformView 底层用的也是纹理 Texture，它中间多了一层VirtualDisPlay，它会将TXCloudVideoView 的每个像素流经附加的中间图形缓冲区然后输出到 Surface...使用 Flutter SDK 示例 目前我们 Flutter SDK 已经在内测中,部分客户已经开始接入。 下图是我们用 Flutter SDK 开发的简单会议Demo： ?
Shell：这里的Shell特指平台特性（Platform）的那一部分，包含IOS和Android平台相关的实现，包括EAGLContext管理、上屏的操作以及后面将会重点介绍的外接纹理实现等等。...4.1.2 外接纹理 上图是前文提到的LayerTree的一个简单架构图，每一个叶子节点代表了dart代码排版的一个控件，可以看到最后有一个TextureLayer节点，这个节点对应的是Flutter里的...通过外接纹理的方式，实际上Flutter和Native传输的数据载体就是PixelBuffer，Native端的数据源将数据写入PixelBuffer，Flutter拿到PixelBuffer以后转成OpenGLES...4.1.4 原生处理 总结整个方案，通过外接纹理的方式，Flutter就可以很容易绘制出大型图片加载库SDWebImage等，本质是共用了一套缓存，将图片网络加载的工作转移到了Native端，从而实现了图片...Flutter端则采用外接纹理的方式，Native和Flutter通过PixelBuffer作为载体来达到共用缓存的目的，通过图片加载插件，将下载图片的操作桥接到Native端，最终也可以实现动态域名的目的
分享内容主要分为四个方面，首先会对Flutter有一个简单介绍以及选择Flutter作为跨平台框架的原因，其次会介绍Flutter中与音视频关系非常大的外接纹理概念，以及对它做出的一些优化。...外接纹理 ? 在讲音视频之前需要简要介绍一下外接纹理的概念，我们将它称之为是Flutter和Frame之间的桥梁。 ?...然而我们如果需要用Flutter实现美颜，滤镜，人脸贴图等等功能，就需要将视频数据读取出来，更新到纹理中，再将GPU纹理经过美颜滤镜处理后生成一个处理后的纹理。...通过对Flutter渲染过程分析，我们知道Flutter底层需要渲染的数据就是GPU纹理，而我们经过美颜滤镜处理完成以后的结果也是GPU纹理，如果可以将它直接交给Flutter渲染，那就可以避免GPU-...音视频端美颜处理完成的OpenGL纹理能够让Flutter直接使用的条件就是Flutter的上下文需要和平台音视频相关的OpenGL上下文处在一个Share Group下面。
事实上 Flutter 中实现全屏切换效果很简单，后面会一并介绍为什么在 Flutter 上实现会如此简单。...二、实现效果 如下图所示是 Flutter 中实现后的全屏效果，而实现这个效果的关键就是跳堆栈就可以了！是的，Flutter 中简单地跳页面就能够实现无缝的全屏切换。 ?...三、实现逻辑 之所以可以如此简单地实现动态化全屏效果，其实主要涉及到 video_player 插件在 Flutter 上的实现：外接纹理 Texture 。...所以 Flutter 中控件的渲染堆栈是独立的，没办法和原生平台直接混合使用，这时候为了能够在 Flutter 中插入原生平台的部分功能，Flutter 除了提供了 PlatformView 这样的实现逻辑之外...，还提供了 Texture作为 外接纹理的支持。
渐变纹理 一种基于冷暖色调的着色技术，通过渐变纹理控制漫反射光照。核心部分来说用过使用halfLambert构建一个纹理坐标，用这个纹理坐标来对渐变纹理进行采样。...specular + diffuse + ambient, 1.0); } ENDCG } } } 三种纹理图片对应结果
遮罩纹理（mask texture）控制光照的强度，获得更加细腻的效果，通过遮罩纹理控制光照。在制作地形材质的时候混合多张图片，遮罩纹理控制如何混合这些纹理。...在代码中添加了BumpMap来进行凹凸纹理效果，通过SpecularMask实现控制高光的光照 Shader "Unlit/MaskTexture" { Properties{
但是和传统的Flutter开发方案又有所不同，我们将Flutter页面当作一个渲染容器，在一个Flutter页面中，所有的数据都来源于Native，Flutter只作渲染UI和处理交互逻辑，这种方案和之前的方案进行对比...而如果用户在打开Flutter页面后，在手机内进行黑夜模式的切换，Flutter也会自动进行切换。相关代码如下。...❞ 图片外接纹理 Flutter原生的Image处理方式存在一些内存问题，虽然使用简单，但是对内存水位的影响较大，特别是在复用一些Native缓存图片的场景，所以，针对图片的处理，我们使用了外接纹理的方式...通过图片外接纹理，显著降低了Flutter对于图片的内存消耗，同时也减少了内存抖动，让Flutter更加稳定。相关技术方案，可以参考我的这篇文章。...Flutter混编工程之打通纹理之路 埋点 对于业务App来说，数据埋点，是一件非常重要的工作。
本文介绍在ArcMap软件中，基于一个面图层，绘制其中面要素的最小外接矩形、最小外接圆等的方法。 首先，我们来看一下本文需要实现的需求。现有一个面要素图层，其中包含多个面要素，如下图所示。...我们希望绘制这个面要素图层的最小外接矩形——既包括这个完整的面要素图层的最小外接矩形（即最后得到一个矩形），也包括这个图层中，每一个面要素的最小外接矩形（即最后得到多个矩形）。 ...“Minimum Bounding Geometry”是ArcGIS中的一个工具，可以用来为面要素图层绘制最小外接矩形、最小外接圆、椭圆、旋转椭圆等几何图形；使用这一工具，可以帮助我们更好地理解面要素图层的分布情况和空间特征...例如，我们可以利用该工具为某个行政区域内的房屋建筑物绘制最小外接矩形，从而了解建筑物的分布情况、面积大小和长宽比等信息，帮助规划城市建设、优化基础设施和改善居民生活。 ...Geometry Type：选择要创建的几何对象类型，包括最小外接矩形、旋转矩形、最小外接圆、椭圆等多种形状。 Rectangle By Area：根据面积最小的矩形计算。
纹理格式是能被GPU所识别的像素格式，能被快速的寻址并采样。 纹理格式如：RGB_565，每个像素占用：5+6+5=16 (bits)，共 2 个字节。...随机访问：由于几乎不可能预测纹理像素被访问的顺序，任何纹理压缩算反必须允许对其中的纹理的随机访问。...所以几乎所有的纹理压缩算法都已块为单位压缩和存储纹理像素，当某一个纹理像素被访问时，只有同一块中的若干纹理像素被读取和解压缩。...编码速度：纹理压缩对压缩速度的要求不高，因为绝大多数情况下，纹理只需要进行一次压缩。(但是对解压速度要求较高。)...在纹理贴图中，已经压缩的纹理和没有经过压缩的纹理使用起来基本没有区别，都可以被用来存储颜色数据或其他数据，例如凹凸贴图或法线贴图，也都可以和Mipmapping或各项异性过滤等共同使用。
立方体纹理（Cubemap） 是环境映射（EnvironmentMapping）一种实现方式。...纹理采样：对立方体采样需要提供一个三维的纹理坐标，这个三维纹理坐标表示了我们在世界空间下的一个3D、方向。 天空盒子 Skybox是游戏中模拟背景的一种方法，每个面使用的技术就是立方体纹理映射技术。...创建用于环境映射的立方体纹理 1.提供一张具有特殊布局的纹理，类似于立方体展开图的交叉布局、全景布局等。...我们需要将TextureType设置为Cubemap 2.使用Camera.RenderToCubemap方法实现，此方法可以把任意位置观察到的场景存储到6张图像中，从而创建出该位置上的立方体纹理。...将创建的立方体纹理存入一个Cubemap中。 反射 在我们的shader中加入一个模拟反射的环境映射纹理。对立方体的纹理使用CG中的texCUBE函数进行采样。 我们最终得到图中结果 ?
长期以来，Flutter都缺乏一个简单易用，功能强大的二维码、条形码等扫码库，需要既能支持相机扫码，也能支持本地图片码识别。...仓库地址： flutter_scankit 中文文档 这是一个扫码的Flutter插件，它是HUAWEI ScanKit SDK的Flutter包。...权限请求 在Flutter中，你需要一个插件库来处理权限，这里推荐我的另一个插件库：flutter_easy_permission，详细配置请看 这里。...TODO SDK本身支持自定义扫码UI，但目前插件还未进行深度封装，无法支持自定义页面，后续将抽一点空，通过外接纹理方式进行深度封装，支持直接在Flutter Widget层自定义扫码界面。...插件开发 如果您对Flutter插件开发内容感兴趣，可以去我的网校中查看《Flutter全栈式开发-高级篇》的课程，全网独家深入解析关于Flutter插件开发的方方面面，实战讲解多个案例（包含本插件开发过程
我们团队嗅到了这块的机会，运用Flutter这一近两年大火的跨终端框架，提供Flutter版本的音视频sdk，帮助这些中小企业快速拓展线上业务。...Q3 在对 Flutter 音视频开发实践的过程中，有遇到什么困难吗？...于是我们仔细研究了PlatformView实现的原理，其实对于安卓来说，PlatformView的底层也是用外接纹理来渲染的。...这时候原生sdk会把视频帧纹理数据一帧帧回调出来，通过opengl绘制到SurfaceTexture画板里面。Flutter最终拿到的是通信层返回的一个textureId。...Q5 对于Flutter技术的初学者，你有什么样的建议？ 官方文档是最好的老师，它会把Flutter框架的底层原理都介绍的很清楚，还提供了代码实践。Dart 也是 Flutter 的基础。
OpenGL（八）--纹理相关API 1....（load） //通过此方式会将创建好的纹理载入到纹理对象里。...纹理对象 生成纹理对象 //使⽤函数分配纹理对象 //指定纹理对象的数量 和 指针(指针指向⼀个⽆符号整形数组，由纹理对象标识符填充)。..._3D //参数texture:需要绑定的纹理对象 void glBindTexture(GLenum target, GLunit texture); //删除绑定纹理对象 //纹理对象 以及 纹理对象指针...//参数2:pname,指定需要设置那个纹理参数 //参数3:param,设定特定的纹理参数的值 设置过滤方式 ?
本篇就看下纹理映射涉及的问题。...查找纹理值 根据原始图像的像素坐标转换成对应的问题坐标，那纹理上对应坐标的值就是需要给图像渲染的值，如下所示: image.png 这本质上就是一个从图像到纹理坐标的映射。...，如下所示: image.png 看到这儿可以看出纹理映射的2个关键问题了: 建立纹理坐标映射函数 确定对应坐标的纹理值并且不引入过多的走样 纹理坐标函数 纹理坐标函数用来做坐标的映射，在选择坐标函数的时候...通过插值的方式也可以做纹理映射，通过记录纹理的三角形顶点坐标，就可以通过重心定理插值了。...当图像和纹理大小不一样的时候，比如纹理映射函数计算出的坐标超过了纹理的范围，这时候就可以采取一些措施，或者是返回一个默认值，或者是进行回绕。
对于不规则的几何体的纹理坐标, 差不多都是通过投影来算的吧 冒似有个"球状纹理"投影到一个物体上, 就像CubeMap 还有一种"圆柱形纹理", 对物体一圈进行投影 GPU Gems3里有个不规则地形...(X,Y,Z三个方向上都有面), 这时就没法简单地用X,Z坐标来计算UV了 对于基于高度图的地形来说, 如果Y方向很高的话, 纹理会有明显的拉伸现象 这时就可以换个方向进行投影, 用于制作悬崖之类的复杂地形
Flutter 音频播放器的两种实现思路 开始之前，大家可以先思考一下如果是你来做一个Flutter的视频播放器，你会如何去实现？你会遇到哪些困难呢？带着问题来看文章往往会更有收获 。...—— Flutter中文网 也正是因为有这个业务场景，可能我们今天的主角就要登场了 ——Texture（外接纹理），会不会有很大一部分好兄弟一脸懵逼？ ...简单的介绍一下：Texture可以理解为GPU内保存将要绘制的图像数据的一个对象，Flutter engine会将Texture的数据在内存中直接进行映射（而无需在原生和Flutter之间再进行数据传递...），Flutter会给每一个Texture分配一个id，同时Flutter中提供了一个Texture组件。...总结 本文主要给各位介绍了Flutter中实现音视频的一种方案 ，外接纹理（Texture），这也是Flutter官方视频插件所采用的方案。应该也颠覆了各位以往对Flutter插件的一些理解。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
