渲染机制随笔

安卓原生绘制/渲染流程安卓原生渲染机制大致流程为XML/DOM View树 → Measure/Layout → Canvas绘制 → SurfaceFlinger系统合成 → GPU先创建Surface-Surface中获取Canvas-Canvas调用skia进行绘制-像素提交给Surface-交给SurfaceFlinger进行硬件合成或者GPU合成硬件加速时skia调用OpenglCanvas是一个类画布对象app进程可以直接调用原生OpenGL此时Canvas和APP的OpenGL是两种不同的渲染路径二选一但是APP中可以同时存在SurfaceFlinger 多个图层怎么叠加、透明混合、裁切、排序全部由 SurfaceFlinger 处理SurfaceFlinger只是一个合成器SurfaceFlinger 是图层合成管理者OpenGL ES 是它的GPU 绘图工具SurfaceFlinger可以直接HWC硬件合成也可以调用OpenGL ES合成硬件合成 HWC 绝大多数普通界面、视频、单 App 页面会走这条路GPU 合成 OpenGL ES 出现多层半透明、模糊、动画、旋转、复杂滤镜、分屏多应用叠加时HWC 硬件能力不足切换 GPU 渲染关于SurfaceApp Activity 页面 一个 Surface弹窗、Dialog、Popup 独立 Surface视频播放器、相机预览、模拟器画面 单独 Surface系统状态栏、导航栏、锁屏界面 系统 Surface关于OpenGL注意区分APP进程的OpenGL和SurfaceFlinger进程的OpenGLAPP的OpenGL将渲染结果输出到一个Surface缓冲区SurfaceFlinger的OpenGL将多个Surface合成一帧OpenGL与OpenGL ES的关系OpenGL完整版OpenGL ES精简版。实现跨平台H5 APP 安卓上使用WebView控件实现在 App 里跑网页RN(React Native) WEEX 利用JS引擎JS 进程和安卓 /iOS 原生进程跨进程通信把页面布局、绘制指令传递给原生端Flutterflutter绘制 skia引擎保证相同的绘制效果 Dart代码 → Skia绘制 → 直接调用平台OpenGL/Vulkan → GPU屏幕flutter的跨平台渲染一致是因为有skia引擎它保证了画出来的像素一致。flutter 内置两套独立组件库material.dart复刻安卓 Material Design 设计语言cupertino.dart复刻 iOS 苹果原生视觉交互就是说它完全可以做成一模一样的效果但是它做了安卓和IOS的适配。欢迎讨论或指正