Come hear about the Silverlight 3 rendering pipeline, and learn how to enhance your application experience with the latest additions to the Silverlight graphics APIs.

10. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

11. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

12. DoubleAnimation
Storyboard.TargetName myprojection
Storyboard.TargetProperty RotationY
From 0 To 90
Duration 0:0:1

13. time
Frame Based
Model

14. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

15. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

16. ListBox
ScrollViewer
Grid
ScrollBars StackPanel
ListBoxItem
stuff

17. internal
U
internal
offset
Clip

18. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

19. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

20. Draw Loop Event
Handlers
Hey
browser!
Tick
Show my
Frame
Rasterize Any
in back property
buffer changes?
Queue up
rendering Layout
changes

22. Vs.

24. 1. ParentNode
2. Layout Offset
3. RenderTransform
5. Clip
7. Opacity
8. OpacityMask
10.Children

26. Intermediate Apply Effect
surface
Apply 2nd effect.
Top image is input

29. http://bit.ly/DXsdk
http://bit.ly/buildtask
http://blogs.msdn.com/greg_schechter

32. // Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);

33. // Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
// Pixel Shader
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInputSampler, uv);

34. Brushes
A brush maps a screen position to a color.
SolidColorBrush
<SolidColorBrush Color=quot;Greenquot;/>

35. Brushes
A brush maps a screen position to a color.
LinearGradientBrush
StartPoint
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color=quot;#FF0000quot; />
<GradientStop Color=quot;#00FF00quot; Offset=quot;.5quot; />
<GradientStop Color=quot;#0000FFquot; Offset=quot;1quot; />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
EndPoint

36. Brushes
A brush maps a screen position to a color.
RadialGradientBrush
<RadialGradientBrush GradientOrigin=quot;0.25 0.25quot;>
<RadialGradientBrush.GradientStops>
StartPoint
<GradientStop Color=quot;Whitequot; Offset=quot;0quot;/>
<GradientStop Color=quot;Bluequot; Offset=quot;1quot;/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
EndPoint

37. Brushes
Maps a screen position to a color.
Integrate the different graphics stacks
Image & Text

38. // Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
// Pixel Shader
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInputSampler, uv);

39. // Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
// Pixel Shader
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInputSampler, uv);
color.rgb = 1 - color.rgb;
return color;
}

41. Blur & DropShadow
Custom Effect
Effects can pull content from any brush

42. 1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children

43. Perf
Blur & DropShadow
Custom Effect
Effects can pull content from any brush
not

46. WriteableBitmap:
A way to replicate content

47. WriteableBitmap:
A cache of our rendering pipeline

48. WriteableBitmap Pixel Access:
To save output of our rendering

49. WriteableBitmap Pixel Access:
A way to draw whatever you like

51. http://blogs.msdn.com/mharsh/

52. What's New in Microsoft Silverlight 3 MIX09-T14F

54. 1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
5. Clip
6. Effect
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children

57. 1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
5. Clip
6. Effect
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children

58. 3 Properties can be HW accelerated
Transforms
Rectangular Clipping
Blending

60. EnableGPUAcceleration=true
CacheMode=BitmapCache
EnableCacheVisualization

61. EnableCacheVisualization

63. 360p Silverlight H264 CPU w/ CPU w/ % Diff
Video, Stretched to FS SW Stretch HW Stretch
XP laptop ’04 70% CPU 32% CPU -55%
1.3ghz single core
Vista desktop ’04 88% CPU 44% CPU -50%
2.4g single core
Vista laptop ’07 60% CPU 24% CPU -60%
2.3g core2duo
540p Silverlight H264 SW Stretch HW Stretch % Diff
Video, Stretched to FS
XP laptop ’04 69% CPU 59% CPU -15%
1.3ghz single core
Vista laptop ’07 71% CPU 37% CPU -47%
2.3g core2duo

64. CacheMode:
WriteableBitmap:
A way to replicate content
transform content

65. http://bit.ly/effectsLib
http://bit.ly/DXsdk
http://bit.ly/buildtask
http://blogs.msdn.com/greg_schechter
http://blogs.msdn.com/mharsh
http://blogs.msdn.com/jstegman/
http://blogs.msdn.com/seema

68. http://blogs.msdn.com/seema

70. Transparency Event
Handlers
Browser:
Tick
Blend
me
Hey
Browser:
browser!
what is
Show my
behind me?
Frame
Any
Rasterize
property
in back
changes
buffer
?
Queue up
Layout
rendering
changes

71. banding

73. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.