from http://www.developria.com/2010/10/adobemax-deep-dive-into-flash.html

 

AdobeMax: Deep Dive into Flash Player Rendering

Introduction

For those unable to attend, my first session is the Deep Dive into Flash Player Rendering. This seems to be an extremely misunderstood topic and likely will be a great thing to have a deeper understanding in. This is a very complex process and is worth taking some of the concepts mentioned below and doing some further research in. There apparently is a lighter IP ruling by Adobe behind their FlashPlayer and they are exposing more information about how their FlashPlayer code works.

The presenter is Lee Thomason and is a Flash Player Architect at Adobe. He is also a principle scientist at Adobe and architect for the Flash Player.

Topics of this class

Four stages of rendering for Flash Player

1. Computation
2. Edge and Color Creation
3. Rasterization
4. Presentation

Computation

During computation the display list has a retained renderer. The invalidated objects are walked to determine which ones are dirty. All objects are considered "SObjects" to the flash player and mutate based on the contents of the object. For example a object with a timeline will have more memory consumed than an object without a timeline.

Performance advice

1. Balance
2. Size - minimize the number of SObjects in memory
3. Shape vs Sprite - Favor Shapes over Sprites
4. Show Redraw Regions - Check the redraw regions regularly to check to make sure you are expecting what you see redrawing.

Edge and Color Creation

All edges in the player are represented as Bezier curves. There are some performance concerns around Edges. Edge to pixel ratio is the major concern when art is shrunken to a small pinhead or automatic conversion of art via a tool. The bottleneck in the player for edges is not in the Edge and Color creation, but during the Rasterization step.

After the computation step occurs but before the edge and color creation occurs there is a stroke that occurs as a seperate layer in the SObject. Stroke generation is extremely complicated and he is more or less sidestepping this portion of the explanation.

Color and Fill are represented as the same thing, they are defined on the same plane. Transforms are applied to edges and the fill independently of each other during a transform/animation.

The following are examples of color types

1. Solid
2. Bitmap
3. 2.5D Bitmap
4. Video
5. Causes special timing
6. Gradients
7. Text
8. PixelBender 2d
9. Mask
10. Special Color that clips other colors

Scale 9 is the Scale 9 Grid on Display object. It is a non-linear edge transformation. It can not be defined in a single Matrix to define its transformation, it is actually represented as 9 separate matrices. Color fills are represented as one matrix transformation.

All of the examples of Scale 9 will be posted by Lee and I will follow up with a comment later.

Rasterization

Rasterization is a back buffer operation and occurs once per dirty rectangle per scan line (or horizontal row of pixels). The best takeaway from this according to Lee is that the render occurs top to bottom left to right pixel by pixel.

Rasterization in general excludes hidden objects and each pixel is touched only once. Spans (which are the runs of pixels that have no change since the last resterization) are solid colors or opaque objects. There are occasions where sub pixel computations occur when edges are started/ended in the same pixel. There is nothing that can be done to optimize for this behavior as it is deep within the Flash Player. Basically the comment here seems to be that transparent bitmaps can significantly cause render problems since you are causing the rasterization step to do computation when it doesn't even display anything for the transparent pixels.

More pixels is of course more rasterization, however fullScreenSourceRect can improve performance by reducing quality due to the hardware scaling.

Presentation

The presentation approach is changing, because dirty rectangle calculation is changing. WMode is the setting that impacts presentation. There are three modes, normal where our own version software surface. WMode = transparent or opaque defeats dirty rectangles and forces full redraws. WMode = direct uses hardware surface and can dramatically increase performance. This seems like something worth trying, but one of the edge cases could be applications with lots of changing text that will not be impacted positively by this mode.

Tearing is primarily presentation sync. There are subtle cases, video updates and split blits. Tearing is going away with hardware compositing. As modern browsers expose the GPU stack of video cards a lot of these problems go away.

Surface Rendering

Surface happens when you use cacheAsBitmap, Filters, 2.5D and scroll rect with opaque backgrounds. This causes a different set of computations to occur during the presentation phase of the process. It adds a composition phase that occurs before presentation when pixels are written to the back buffer.

New Stuff

StageVideo and Stage3D are new features of the Flash Player that run behind the DisplayList. They have their own hardware surfaces and independent rendering planes. This allows the FlashPlayer to not impact DisplayList objects with 3d objects in either StageVideo or Stage3D. The StageVideo is the lowest level stage and the Stage3d sits atop it. The DisplayList we all know and love is on top of both of those.

GPU Rendering obeys all the rendering rules and does draw hidden objects and follows a different appraoch.

In conclusion here is a cheat sheet

Fundamental=Computation->Edges & colors -> Rasterization -> Presentation

• Show redraw regison gives insights into display list
• Edges and colors are primitives of rendering
• Beware alpha and per pixel comutation
• Presentation is changing

• Surface=... -> Rasterization -> Processing -> Compositing
• Remeber the cache!
• Direct Mode Planes are fast but separate
• GPU Rendering: same rules, different approach

• These guys blog here http://www.bytearray.org/
• Please follow me on twitter here: http://twitter.com/neosavvy
• Check out my company's website here http:///www.neosavvy.com