Deep Dive into Microsoft Silverlight Graphics

  • 1,195 views
Uploaded 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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,195
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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