deep dive into microsoft silverlight graphics
TRANSCRIPT
![Page 1: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/1.jpg)
![Page 2: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/2.jpg)
![Page 3: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/3.jpg)
![Page 4: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/4.jpg)
![Page 5: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/5.jpg)
![Page 6: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/6.jpg)
![Page 7: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/7.jpg)
![Page 8: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/8.jpg)
![Page 9: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/9.jpg)
![Page 10: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/10.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 11: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/11.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 12: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/12.jpg)
DoubleAnimation
Storyboard.TargetName myprojectionStoryboard.TargetProperty RotationYFrom 0 To 90
Duration 0:0:1
![Page 13: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/13.jpg)
Frame Based
Model
time
![Page 14: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/14.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 15: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/15.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 16: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/16.jpg)
ListBox
ScrollViewer
Grid
ScrollBars StackPanel
ListBoxItem
stuff
![Page 17: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/17.jpg)
internalU
internal
offset
Clip
![Page 18: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/18.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 19: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/19.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 20: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/20.jpg)
Draw Loop Event Handlers
Tick
Any property
changes?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
![Page 21: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/21.jpg)
![Page 22: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/22.jpg)
Vs.
![Page 23: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/23.jpg)
![Page 24: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/24.jpg)
1. ParentNode
2. Layout Offset
3. RenderTransform
5. Clip
7. Opacity
8. OpacityMask
10.Children
![Page 25: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/25.jpg)
![Page 26: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/26.jpg)
Intermediate
surface
Apply Effect
Apply 2nd effect.
Top image is input
![Page 27: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/27.jpg)
![Page 28: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/28.jpg)
![Page 29: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/29.jpg)
http://bit.ly/DXsdk
http://bit.ly/buildtask
http://blogs.msdn.com/greg_schechter
![Page 30: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/30.jpg)
![Page 31: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/31.jpg)
![Page 32: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/32.jpg)
// Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
![Page 33: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/33.jpg)
// Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
// Pixel Shader
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInputSampler, uv);
![Page 34: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/34.jpg)
Brushes
A brush maps a screen position to a color.
SolidColorBrush
<SolidColorBrush Color="Green"/>
![Page 35: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/35.jpg)
Brushes
A brush maps a screen position to a color.
LinearGradientBrush
StartPoint
EndPoint
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FF0000" />
<GradientStop Color="#00FF00" Offset=".5" />
<GradientStop Color="#0000FF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
![Page 36: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/36.jpg)
Brushes
A brush maps a screen position to a color.
RadialGradientBrush
<RadialGradientBrush GradientOrigin="0.25 0.25">
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
StartPoint
EndPoint
![Page 37: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/37.jpg)
Brushes
Maps a screen position to a color.
Integrate the different graphics stacks
Image & Text
![Page 38: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/38.jpg)
// Inputs (Brushes, including ImplicitInput)
sampler2D implicitInputSampler : register(S0);
// Pixel Shader
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInputSampler, uv);
![Page 39: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/39.jpg)
// 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;
}
![Page 40: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/40.jpg)
![Page 41: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/41.jpg)
Blur & DropShadow
Custom Effect
Effects can pull content from any brush
![Page 42: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/42.jpg)
1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children
![Page 43: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/43.jpg)
Perf
Blur & DropShadow
Custom Effect
Effects can pull content from any brush
not
![Page 44: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/44.jpg)
![Page 45: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/45.jpg)
![Page 46: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/46.jpg)
WriteableBitmap: A way to replicate content
![Page 47: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/47.jpg)
WriteableBitmap: A cache of our rendering pipeline
![Page 48: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/48.jpg)
WriteableBitmap Pixel Access:To save output of our rendering
![Page 49: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/49.jpg)
WriteableBitmap Pixel Access:A way to draw whatever you like
![Page 50: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/50.jpg)
![Page 51: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/51.jpg)
http://blogs.msdn.com/mharsh/
![Page 52: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/52.jpg)
What's New in Microsoft Silverlight 3 MIX09-T14F
![Page 53: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/53.jpg)
![Page 54: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/54.jpg)
1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
5. Clip
6. Effect
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children
![Page 55: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/55.jpg)
![Page 56: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/56.jpg)
![Page 57: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/57.jpg)
1. ParentNode
2. Layout Offset
3. RenderTransform
4. Projection
5. Clip
6. Effect
7. Opacity
8. OpacityMask
9. Hardware Cache
10.Children
![Page 58: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/58.jpg)
3 Properties can be HW accelerated
Transforms
Rectangular Clipping
Blending
![Page 59: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/59.jpg)
![Page 60: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/60.jpg)
EnableGPUAcceleration=true
CacheMode=BitmapCache
EnableCacheVisualization
![Page 61: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/61.jpg)
EnableCacheVisualization
![Page 62: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/62.jpg)
![Page 63: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/63.jpg)
360p Silverlight H264
Video, Stretched to FS
CPU w/
SW Stretch
CPU w/
HW Stretch
% Diff
XP laptop ’04
1.3ghz single core70% CPU 32% CPU -55%
Vista desktop ’04
2.4g single core
88% CPU 44% CPU -50%
Vista laptop ’07
2.3g core2duo
60% CPU 24% CPU -60%
540p Silverlight H264
Video, Stretched to FS
SW Stretch HW Stretch % Diff
XP laptop ’04
1.3ghz single core
69% CPU 59% CPU -15%
Vista laptop ’07
2.3g core2duo
71% CPU 37% CPU -47%
![Page 64: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/64.jpg)
WriteableBitmap: A way to replicate contentCacheMode:A way to transform content
![Page 65: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/65.jpg)
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
![Page 66: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/66.jpg)
![Page 67: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/67.jpg)
![Page 69: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/69.jpg)
![Page 70: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/70.jpg)
Transparency Event Handlers
Tick
Browser: what is
behind me?
Any property changes
?
Layout Queue up rendering changes
Rasterizein back buffer
Hey browser! Show my
Frame
Browser: Blend
me
![Page 71: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/71.jpg)
banding
![Page 72: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/72.jpg)
![Page 73: Deep Dive into Microsoft Silverlight Graphics](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5a6d79c67f8b9ad6418b57e3/html5/thumbnails/73.jpg)
© 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.