我中文不好, 但也想寫中文網誌 . . 因為我英文更不濟

2010年1月9日星期六

Caution in drawing large amount of Graphics WPF

For a recently project which draw large amount of object in the WPF application, it's redraw performance after mousemove event (or any animation across the background drawing) is not smooth enough. So I conduct a research and found that WPF use Retained-mode graphics (with modules communicate with Direct X), unlike C++ use GDI+ directly.

Unless you use image (bitmap) class to render the graphical elements , all graphics in Path /in StreamGeometry/PathFigures or DrawingVisual would be repainted(internal process of WPF RetainedMode Grahpics) in a Vector format. Therefore, the dirty region redraw put burdern to CPU and result in a leggy UI experience.

So , if you need to draw relatively large amount of object in WPF (Vector format).
please have a careful consideration before and you can convert your vector geometry into Raster format by using RenderTargetBitmap. (link3 :putting DrawingVisual into RenderTargetBitmap )



Quoting 1( from MSDN Windows Presentation Foundation Graphics Rendering Overview)

Drawing Content in Visual Objects
A Visual object stores its render data as a vector graphics instruction list. Each item in the instruction list represents a low-level set of graphics data and associated resources in a serialized format. There are four different types of render data that can contain drawing content... skipped

Retained Mode Graphics
One of the keys to understanding the role of the Visual object is to understand the difference between immediate mode and retained mode graphics systems. A standard Win32 application based on GDI or GDI+ uses an immediate mode graphics system. This means that the application is responsible for repainting the portion of the client area that is invalidated, due to an action such as a window being resized, or an object changing its visual appearance.
Diagram of Win32 rendering sequence




In contrast, WPF
uses a retained mode system. This means application objects that have a visual
appearance define a set of serialized drawing data. Once the drawing data is
defined, the system is responsible thereafter for responding to all repaint
requests for rendering the application objects. Even at run time, you can modify
or create application objects, and still rely on the system for responding to
paint requests. The power in a retained mode graphics system is that drawing
information is always persisted in a serialized state by the application, but
rendering responsibility left to the system. The following diagram shows how the
application relies on WPF for responding to paint requests.
Diagram of WPF rendering sequence



Intelligent Redrawing
One of the biggest benefits
in using retained mode graphics is that WPF can efficiently optimize what needs
to be redrawn in the application. Even if you have a complex scene with varying
levels of opacity, you generally do not need to write special-purpose code to
optimize redrawing. Compare this with Win32 programming in which you can spend a great deal of effort in optimizing your application by minimizing the amount of
redrawing in the update region. See Redrawing in the
Update Region
for an example of the type of complexity involved in
optimizing redrawing in Win32 applications.


Vector Graphics
WPF uses vector graphics as its rendering data format. Vector graphics—which include Scalable Vector Graphics (SVG), Windows metafiles (.wmf), and TrueType
fonts—store rendering data and transmit it as a list of instructions that
describe how to recreate an image using graphics primitives. For example,
TrueType fonts are outline fonts that describe a set of lines, curves, and
commands, rather than an array of pixels. One of the key benefits of vector
graphics is the ability to scale to any size and resolution.
Unlike vector graphics, bitmap graphics store rendering data as a pixel-by-pixel
representation of an image, pre-rendered for a specific resolution. One of the
key differences between bitmap and vector graphic formats is fidelity to the
original source image. For example, when the size of a source image is modified,
bitmap graphics systems stretch the image, whereas vector graphics systems scale
the image, preserving the image fidelity.

Quoting 2 : WPF Wonders: Getting Started with WPF (cont'd)


In Windows Forms graphics, you have two main choices for drawing something:
either redraw it during a Paint event or draw it into a bitmap and then display
the bitmap. In the first case, you need to redraw frequently, keeping track of
whatever it is that you're drawing. If parts of the drawing move over time, you
need to keep track of where they all are during every redraw.

In retained-mode graphics, you define objects that represent parts of the
drawing: lines, ellipses, text, images, and so forth. WPF automatically redraws
any of them that need redrawing when they need it.

If you need one of the objects to move, you simply move it at the appropriate
time. WPF automatically redraws the object in its new position as needed.
Alternatively, you can define a WPF animation and let WPF move the object over
time. Furthermore, because the objects draw themselves as needed, you can zoom
in on them and they will redraw themselves with high precision, not the blocky
appearance you would get from magnifying a bitmap.


Quoting 3: InformIT: WPF Control Development: The Diverse Visual Class

Images can be useful when you want to visualize a large amount of data for which
you have limited interaction. Some situations where this might come in handy are
when you are visualizing high-volume graphs or network monitoring tools that are
visualizing thousands of network nodes. In cases like this, even DrawingVisuals
become extremely expensive because each data item is a separate visual and
consumes CPU and memory resources. Using an image, and knowing that each data
point doesn't need to be interactive, you can visualize what you need without
bringing the host computer to its knees.


Since the Image class also has event handling support, we can attach handlers for mouse events that can query the pixel at the mouse's current coordinates and report information about that data
item. With a little bit of creativity and forethought, the Image class can be a
powerful tool in any developer's toolbox.


Reference Links

  1. Windows Presentation Foundation Graphics Rendering Overview & http://msdn.microsoft.com/en-us/library/dd162909(VS.85).aspx
  2. Retained-Mode Graphics in WPF Wonders: Getting Started with WPF (Page 2 cont'd) (Full article)
  3. Image Class in InformIT: WPF Control Development: The Diverse Visual Class

Forum Discussion Reference

  1. stackoverflow.com Scaling WPF content before rendering to bitmap suggested sample code for putting DrawingVisual into RenderTargetBitmap
  2. MSDN Social Forum Slow performance transforming OnMouseMove

0 comments: