Changes between Version 3 and Version 4 of Accelerated rendering and compositing


Ignore:
Timestamp:
Apr 19, 2012, 11:46:58 AM (13 years ago)
Author:
jonlee@apple.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Accelerated rendering and compositing

    v3 v4  
    1 Outline:
     1== Outline ==
    22 * Tree mania:
    33  * RenderObject
    … …  
    1414 * Accelerated drawing and compositing
    1515
    16 Notes:
     16== Notes ==
    1717
    18 Notion that identify elements in the web page that benefit from rendering to bitmap and using gpu to composite it with other elements in the page.
     18Compositing: identify elements in the web page that benefit from rendering to bitmap and using gpu to composite it with other elements in the page.
    1919
    20 This is done through RenderLayer tree.
     20This is done through RenderLayer tree. RenderLayer started as convenience for rendering certain objects. Create a RenderLayer for elements with their own coordinate system: overflow:scroll, transforms, and now video.
    2121
    22 RenderLayer started as convenience for rendering certain objects. RenderLayer per element with its own coordinate system: overflow, scroll. transforms, and now video.
     22Render tree with hierarchy of RenderObjects. Certain RenderObjects have a RenderLayer off of them. There is a RenderLayer tree that mirrors RenderObject tree.
    2323
    24 RenderTree with heirarchy of objs. And certain objs have renderlayer off of them. There is a renderlayer tree that mirrors render object tree.
     24Painting: walk through RenderLayer tree, starting with the root, then go through child RenderLayer. Use RenderLayer for clipping and overflow.
    2525
    26 paint root rl, then go through child rls, use rl for clipping and overflow. hit test through rls. reverse walk through child rls for hit testing.
     26Hit testing: reverse walk through child RenderLayers.
    2727
    28 another hierarchy of rls which is important, z-order tree. css props z-index, to move front-to-back ordering of pages. to support, z-order tree.  before paint, compute z-order tree by going through rl tree, find stacking contexts.  painting and hit-test use this z-order tree, not the rl tree.
     28There is another hierarchy of RenderLayers which is important, and that is the z-order tree. This tree provides back-to-front ordering, and is used to support the z-index CSS property. Before painting, compute z-order tree by going through RenderLayer tree. Find stacking contexts.  Painting and hit testing use this z-order tree, not the RenderLayer tree.
    2929
    30 compositing: z-order tree gives back-to-front ordering. use it to generate info about which was in front of what. in compositing, we can id rls that want to be composited, and create a backing store for.
     30Compositing: We can identify RenderLayers that want to be composited, and create a backing store for them. We render to the backing store, then give it to the GPU. Probably rendered using OpenGL, on top of the regular content on page.
    3131
    32 if we make something composited, we render to backing store, then give it to teh gpu. rendered through opengl, probably. on top of regular content on page.
     32We have to ensure that any elements in front of composited layers are also composited.
    3333
    34 ensure that any elements in front of composited layers, are also composited. RenderLyaerCompositor, per renderview. manages hierarchy of layers and decides what needs to be a layer.
     34A RenderLayerCompositor, per RenderView. manages hierarchy of layers and decides what needs to be a RenderLayer.
    3535
    36 rl backing for each composited layer. rl backing creates 1+ gfx layers, glue between rendering and platform-compositing code.
     36RenderLayer backing for each composited layer. RenderLayer backing creates at least 1 GraphicsLayer, which is the glue between rendering and platform-compositing code.
    3737
    38 each rl backing can create another gfx layer. clipping/masks/-z indexes. slice into multiple planes and create layers for clipping.
     38Each RenderLayer backing can create another GraphicsLayer; see clipping/masks/negative z indices. In these cases, you slice the GraphicsLayer into multiple planes and create an order for clipping.
    3939
    40 gfx layers are in their own tree. used by platform code to create platform layers (like corenimation).
    41 
    42 gfx layers can have more than one platform layer: masks and reflections.
    43 
    44 gfx layers have a way of dumping its tree, can get it from gdb.
     40GraphicsLayers are in their own tree. Used by platform code (like CoreAnimation) to create PlatformLayers. GraphicsLayers can have more than one platform layer; see masks and reflections. GraphicsLayers have a way of dumping its tree, can get it from gdb.
    4541
    4642
    … …  
    7268- plugins like flash force compositing.
    7369
    74 
    75 
    76 
    77 
    78 
    79 how to debug
    80 
    81 - in safari, "show compositing borders"
    82 
    83 every composited layer gets a border.
    84 the # represents # of times the layer has been repainted
    85 yellow, not green boxes have no css properties, so use just for geometry, and doesn't need a backing store.
    86 red needs a backing store.
    87 
    88 do you see popping? something popping in front is probably composited.
    89 
    90 blue outline: composited because it has overflow:hidden/scroll on it.
    91 
    92 - in gdb, debug only "call showLayerTree" any renderlayer tree. shows it as a z-order tree. prints whether rl is composited. says why something is a renderlayer. which GLs are associated with which RLs.
    93 
    94 - in inspector, turn on/off css properties. overflow, z-order, transforms.  gmail bug case: command-c the dom into a fresh document, to give you a snapshot. although there was no css, the bug still repro'd.
    95 - in inspector, start deleting nodes.
    96 
    97 
    98 
    9970text: on mac there is a limitation on gfx sys where rendering text on transparent background, can't do subpixel antialiasing. no good soln to this problem right now.  if something is composited, but with opaque bg-color, then it's fine.
    10071
    … …  
    11081
    11182svg compositing? doesn't use rl at all. split up rl, piece related to compositing needs to be something svg could use.
     83
     84
     85== Debugging ==
     86
     87 1. In Safari, "show compositing borders".
     88  * Every composited layer gets a border.
     89  * The number represents the number of times the layer has been repainted.
     90  * Yellow, now green, boxes have no css properties, so the layer is used just for geometry, and doesn't need a backing store.
     91  * Red represents layers that need a backing store.
     92  * Blue outline: composited because it has overflow:hidden/scroll on it.
     93 1. Do you see popping? Something popping in front is probably composited.
     94 1. In gdb, debug only "call showLayerTree" any RenderLayer tree. This shows it as a z-order tree. Also prints whether RenderLayer is composited, and why. Also shows which GraphicsLayers are associated with which RenderLayers.
     95 1. In inspector, turn on/off css properties that affect compositing; see overflow, z-order, transforms.
     96 1. Gmail bug anecdote: copy the DOM into a fresh document, to give you a snapshot. Although there was no CSS styling, the bug still repro'd.
     97 1. Via inspector, start deleting nodes.