1 / 73

Deep Dive into Silverlight Graphics

Deep Dive into Silverlight Graphics. Seema Ramchandani. Deep Dive into Silverlight Graphics. Seema Ramchandani. Agenda. How we draw Effects Projection Hardware. Threads. UI Thread User Code Control Code Animations Layout Non-UI Thread Frame Rasterization Media Decoding GPU Work.

blenda
Download Presentation

Deep Dive into Silverlight Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Deep Dive into Silverlight Graphics Seema Ramchandani

  2. Deep Dive into Silverlight Graphics Seema Ramchandani

  3. Agenda • How we draw • Effects • Projection • Hardware

  4. Threads • UI Thread • User Code • Control Code • Animations • Layout • Non-UI Thread • Frame Rasterization • Media Decoding • GPU Work

  5. Draw Loop

  6. Draw Loop

  7. <DoubleAnimation Storyboard.TargetName="myprojection" Storyboard.TargetProperty="RotationY" From="0" To="90" Duration="0:0:1" />

  8. time BUSY Skip 3 turns 33 msec Frame Based Model 132msec Silverlight’s Real-Time Animation

  9. Draw Loop

  10. Draw Loop

  11. Animate& Layout • Poll for dirty flags • 2 Passes: Measure & Arrange • Designed for Nesting

  12. Layout’s impact on Render 1. internal Clip LayoutClip • Desired sizeUAvailable Size 2. internal Transform LocalTransform • Offset from parent + RenderTransform Both are consumed in: • Measure • Arrange • Render • Hit-testing passes offset Clip

  13. Draw Loop

  14. Draw Loop

  15. Draw Loop

  16. How we draw • ParentNode • Layout Offset (internal LayoutTransform) • RenderTransform • Clip • Opacity • OpacityMask • Children

  17. Minimize Size of affected objects Vs.

  18. How we draw • ParentNode • Layout Offset • RenderTransform • Clip • Opacity • OpacityMask • Children

  19. How we draw • ParentNode • Layout Offset • RenderTransform • Projection • Clip • Effect • Opacity • OpacityMask • Hardware Cache • Children

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

  21. RenderToIntermediate • Effects • WriteableBitmap • Projection • GPU Caching

  22. Effects, an overview • Built-in, Multi-pass • Blur Effect • DropShadow Effect • Custom Effect • Compiled HLSL pixel shader • .NET class that invokes the shader • Effects can pull content from any brush

  23. MyCustomShader.cs • SL’s shader engine • Consumes MyShader.ps • Registers available: • 16 Textures • 32 Constants • Pixel Shader 2.0 • DX SDK http://bit.ly/DXsdk • fxc.exe myshader.fx /Tps_2_0 • WPF build task: http://bit.ly/buildtask http://blogs.msdn.com/greg_schechter

  24. demo Default shader class

  25. MyCustomShader.fx // Inputs (Brushes, including ImplicitInput) sampler2DimplicitInputSampler : register(S0);

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

  27. Brushes • A brush maps a screen position to a color. • SolidColorBrush <SolidColorBrush Color="Green"/>

  28. Brushes StartPoint • A brush maps a screen position to a color. • LinearGradientBrush EndPoint <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Color="#FF0000" /> <GradientStop Color="#00FF00" Offset=".5" /> <GradientStop Color="#0000FF" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush>

  29. Brushes • A brush maps a screen position to a color. • RadialGradientBrush <RadialGradientBrushGradientOrigin="0.25 0.25"> <RadialGradientBrush.GradientStops> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Blue" Offset="1"/> </RadialGradientBrush.GradientStops> </RadialGradientBrush> StartPoint EndPoint

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

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

  32. MyCustomShader.fx // 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; }

  33. demo Simple ShaderComplex Shader

  34. Effects, an overview • Blur & DropShadow • Built-in, compiled to assembly • Multi-Pass shaders • Custom Effect • Compiled HLSL pixel shader • .NET class that invokes the shader • Effects can pull content from any brush

  35. How we draw • ParentNode • Layout Offset • RenderTransform • Projection • Clip • Effect • Opacity • OpacityMask • Hardware Cache • Children

  36. Effects, Perf overview • Blur & DropShadow • When done, nullify UIElement.Effect • Sample all pixels • BlurRadius impacts how wide we sample. • Custom Effect • Math is easy. • Pushing around memory is time-costly. • Effects can pull content from any brush • Effects do not cache output • Change a pixel, run again.

  37. WriteableBitmap

  38. WriteableBitmap: A way to replicate content

  39. WriteableBitmap: A cache of our rendering pipeline

  40. WriteableBitmap Pixel Access:To save output of our rendering RTM

  41. WriteableBitmapPixel Access:A way to draw whatever you like

  42. RenderIntoIntermediate • Effect • WriteableBitmap • Projection • GPU Caching

More Related