

首页  思维导图  详情



GPU Accelerated

2016-08-04 15:23:07   11  举报





AI智能生成

GPU Accelerated Compositing in Chrome

Chrome

GPU硬件加速

模版推荐

作者其他创作

大纲/内容

利用GPU以代替cpu主线程进行渲染

益处

gpu的复合层的操作能更快、更省电

避免不必要的回读操作（对于已经存在于gpu上的内容）

利用CPU&GPU进行并行计算来得到高效的图形流水线

chrome的图形堆栈

<span style="background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Blink渲染引擎

如何渲染页面？

Node树生成dom树

可见但dom节点生成render object

render object生成render object tree

render object知道如何在一个display surface上绘制Node的内容

调用graphicsContext以绘制最后呈现到屏幕上的像素点到位图上

chrome的2d绘图库skia

每个render object都和一个render layer关联

享有同样空间坐标的render object通常属于同一render layer

创建新render layer的情况

页面的根对象

明确的css定位属性：position和transform

transparent

overflow

Corresponds to <canvas> element that has a 3D (WebGL) context or an accelerated 2D context

<vedio>元素

render layer的功能：让页面元素能正确地布局

每个render Layer都关联一个graphic layer。这个graphic layer可能是它自己的也可能是它祖先元素的

每个graphic layer都有一个与之关联的graphic context

作用：用于与graphic layer关联的render layer的绘图

潜在危险：由于GraphicsLayers重叠造成的layer exposion

防止措施：layer squashing

grahic layer组成grahic tree

render layer获得自己compositing layer的条件

render layer有自己的3d变形或者视角变形css属性

render layer被一个使用了硬件加速视频解码器的<vedio>所使用

render layer被一个有3d内容（上下文）或者加速过的2d内容的<canvas>使用

render layer使用了复合插件（比如flash）

render layer使用了css动画来改变透明度活着使用了webkit变形动画

render layer使用加速过的css滤镜

render layer有一个拥有自己复合层的子孙

render layer有一个拥有较低z-index值且带有复合层的的兄弟节点（也就是说这个render layer与一个复合层重叠了并且应该再后者的上方渲染）

render layer生成render tree

compositior

管理graphic layer tree和定位帧生命周期的软件库，不属于blink引擎

调用gpu去执行其渲染工作

在硬件加速模型下，复合发生于gpu中。渲染器的compositor使用gpu去绘制页面的各个矩形块到一个单独的位图里

gpu进程

安全性：渲染进程和gpu进程是独立的，两者是client-service模型。渲染进程不能直接访问系统的3d接口，必须转发命令到gpu进程

安卓系统里，gpu进程作为浏览器进程的线程存在

鲁棒性：gpu进程的crush不会造成主进程的问题

统一性：Standardizing on OpenGL ES 2.0 as the rendering API<span style="background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">for the browser regardless of the platform allows for a single, easier to maintain codebase across all OS ports of Chrome.

并行性：渲染器可以快速的发出大量的请求到请求缓冲区后再回头去进行cpu密集型的渲染行为，让gpu线程去处理这些请求

渲染阶段

绘制

复合