渲染流水线中的光栅化

rogeryi 2019-09-20

android 性能 阿里技术协会 同步 浏览器内核 渲染引擎 flutter Skia

Rasterization,光栅化,又称为栅格化,它用于执行绘图指令生成像素的颜色值。光栅化是渲染流水线中的一个重要环节,但是不同的 UI Toolkit 和不同浏览器渲染引擎使用的光栅化策略并不一样,本文主要讨论各种不同的光栅化策略和它们各自的优劣。

渲染流水线

rasterization_1.png

上图是一个渲染流水线的极简版示意图,适用于大部分的 UI Toolkit 和浏览器渲染引擎,当然实际的细节可能会有出入。

  1. DOM/View - 构建或者改变 DOM 树(UI Toolkit 一般称为 View 或者 Widget);
  2. Style/Layout - 计算样式和重排版(又称为布局);
  3. Layerize - 图层化,将不同的 DOM/View 子树按一定的规则归属到不同的图层,构建或者更新图层树/列表;
  4. Paint - 绘制图层,输出 DisplayList(2D 绘图
登录 后评论
下一篇
云栖号资讯小编
485人浏览
2020-04-07
相关推荐
BlinkOn9 - Blink Rendering
1293人浏览
2018-05-08 15:39:52
A Simple OpenGL Shader Example
881人浏览
2015-06-27 21:38:00
Offscreen-Rendered
2394人浏览
2016-05-03 12:41:05
图形学基础知识
736人浏览
2018-01-01 15:14:00
BlinkOn9 - Viz Update
1488人浏览
2018-05-08 15:46:57
复杂多边形光栅化算法
518人浏览
2016-11-17 16:03:48
0
0
0
536