Deep Dive into Microsoft Silverlight Graphics

1,378 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,378
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Deep Dive into Microsoft Silverlight Graphics

  1. 1. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  2. 2. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  3. 3. DoubleAnimation Storyboard.TargetName myprojection Storyboard.TargetProperty RotationY From 0 To 90 Duration 0:0:1
  4. 4. time Frame Based Model
  5. 5. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  6. 6. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  7. 7. ListBox ScrollViewer Grid ScrollBars StackPanel ListBoxItem stuff
  8. 8. internal U internal offset Clip
  9. 9. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  10. 10. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  11. 11. Draw Loop Event Handlers Hey browser! Tick Show my Frame Rasterize Any in back property buffer changes? Queue up rendering Layout changes
  12. 12. Vs.
  13. 13. 1. ParentNode 2. Layout Offset 3. RenderTransform 5. Clip 7. Opacity 8. OpacityMask 10.Children
  14. 14. Intermediate Apply Effect surface Apply 2nd effect. Top image is input
  15. 15. http://bit.ly/DXsdk http://bit.ly/buildtask http://blogs.msdn.com/greg_schechter
  16. 16. // Inputs (Brushes, including ImplicitInput) sampler2D implicitInputSampler : register(S0);
  17. 17. // Inputs (Brushes, including ImplicitInput) sampler2D implicitInputSampler : register(S0); // Pixel Shader float4 main(float2 uv : TEXCOORD) : COLOR { float4 color = tex2D(implicitInputSampler, uv);
  18. 18. Brushes A brush maps a screen position to a color. SolidColorBrush <SolidColorBrush Color=quot;Greenquot;/>
  19. 19. 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
  20. 20. 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
  21. 21. Brushes Maps a screen position to a color. Integrate the different graphics stacks Image & Text
  22. 22. // Inputs (Brushes, including ImplicitInput) sampler2D implicitInputSampler : register(S0); // Pixel Shader float4 main(float2 uv : TEXCOORD) : COLOR { float4 color = tex2D(implicitInputSampler, uv);
  23. 23. // 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; }
  24. 24. Blur & DropShadow Custom Effect Effects can pull content from any brush
  25. 25. 1. ParentNode 2. Layout Offset 3. RenderTransform 4. Projection 7. Opacity 8. OpacityMask 9. Hardware Cache 10.Children
  26. 26. Perf Blur & DropShadow Custom Effect Effects can pull content from any brush not
  27. 27. WriteableBitmap: A way to replicate content
  28. 28. WriteableBitmap: A cache of our rendering pipeline
  29. 29. WriteableBitmap Pixel Access: To save output of our rendering
  30. 30. WriteableBitmap Pixel Access: A way to draw whatever you like
  31. 31. http://blogs.msdn.com/mharsh/
  32. 32. What's New in Microsoft Silverlight 3 MIX09-T14F
  33. 33. 1. ParentNode 2. Layout Offset 3. RenderTransform 4. Projection 5. Clip 6. Effect 7. Opacity 8. OpacityMask 9. Hardware Cache 10.Children
  34. 34. 1. ParentNode 2. Layout Offset 3. RenderTransform 4. Projection 5. Clip 6. Effect 7. Opacity 8. OpacityMask 9. Hardware Cache 10.Children
  35. 35. 3 Properties can be HW accelerated Transforms Rectangular Clipping Blending
  36. 36. EnableGPUAcceleration=true CacheMode=BitmapCache EnableCacheVisualization
  37. 37. EnableCacheVisualization
  38. 38. 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
  39. 39. CacheMode: WriteableBitmap: A way to replicate content transform content
  40. 40. 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
  41. 41. http://blogs.msdn.com/seema
  42. 42. 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
  43. 43. banding
  44. 44. © 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.

×