73

Deep Dive into Microsoft Silverlight Graphics

Embed Size (px)

Citation preview

Page 1: Deep Dive into Microsoft Silverlight Graphics
Page 2: Deep Dive into Microsoft Silverlight Graphics
Page 3: Deep Dive into Microsoft Silverlight Graphics
Page 4: Deep Dive into Microsoft Silverlight Graphics
Page 5: Deep Dive into Microsoft Silverlight Graphics
Page 6: Deep Dive into Microsoft Silverlight Graphics
Page 7: Deep Dive into Microsoft Silverlight Graphics
Page 8: Deep Dive into Microsoft Silverlight Graphics
Page 9: Deep Dive into Microsoft Silverlight Graphics
Page 10: Deep Dive into Microsoft Silverlight Graphics

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

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

DoubleAnimation

Storyboard.TargetName myprojectionStoryboard.TargetProperty RotationYFrom 0 To 90

Duration 0:0:1

Page 13: Deep Dive into Microsoft Silverlight Graphics

Frame Based

Model

time

Page 14: Deep Dive into Microsoft Silverlight Graphics

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

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

ListBox

ScrollViewer

Grid

ScrollBars StackPanel

ListBoxItem

stuff

Page 17: Deep Dive into Microsoft Silverlight Graphics

internalU

internal

offset

Clip

Page 18: Deep Dive into Microsoft Silverlight Graphics

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

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

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
Page 22: Deep Dive into Microsoft Silverlight Graphics

Vs.

Page 23: Deep Dive into Microsoft Silverlight Graphics
Page 24: Deep Dive into Microsoft Silverlight Graphics

1. ParentNode

2. Layout Offset

3. RenderTransform

5. Clip

7. Opacity

8. OpacityMask

10.Children

Page 25: Deep Dive into Microsoft Silverlight Graphics
Page 26: Deep Dive into Microsoft Silverlight Graphics

Intermediate

surface

Apply Effect

Apply 2nd effect.

Top image is input

Page 27: Deep Dive into Microsoft Silverlight Graphics
Page 28: Deep Dive into Microsoft Silverlight Graphics
Page 29: Deep Dive into Microsoft Silverlight Graphics

http://bit.ly/DXsdk

http://bit.ly/buildtask

http://blogs.msdn.com/greg_schechter

Page 30: Deep Dive into Microsoft Silverlight Graphics
Page 31: Deep Dive into Microsoft Silverlight Graphics
Page 32: Deep Dive into Microsoft Silverlight Graphics

// Inputs (Brushes, including ImplicitInput)

sampler2D implicitInputSampler : register(S0);

Page 33: Deep Dive into Microsoft Silverlight Graphics

// 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

Brushes

A brush maps a screen position to a color.

SolidColorBrush

<SolidColorBrush Color="Green"/>

Page 35: Deep Dive into Microsoft Silverlight Graphics

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

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

Brushes

Maps a screen position to a color.

Integrate the different graphics stacks

Image & Text

Page 38: Deep Dive into Microsoft Silverlight Graphics

// 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

// 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
Page 41: Deep Dive into Microsoft Silverlight Graphics

Blur & DropShadow

Custom Effect

Effects can pull content from any brush

Page 42: Deep Dive into Microsoft Silverlight Graphics

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

Perf

Blur & DropShadow

Custom Effect

Effects can pull content from any brush

not

Page 44: Deep Dive into Microsoft Silverlight Graphics
Page 45: Deep Dive into Microsoft Silverlight Graphics
Page 46: Deep Dive into Microsoft Silverlight Graphics

WriteableBitmap: A way to replicate content

Page 47: Deep Dive into Microsoft Silverlight Graphics

WriteableBitmap: A cache of our rendering pipeline

Page 48: Deep Dive into Microsoft Silverlight Graphics

WriteableBitmap Pixel Access:To save output of our rendering

Page 49: Deep Dive into Microsoft Silverlight Graphics

WriteableBitmap Pixel Access:A way to draw whatever you like

Page 50: Deep Dive into Microsoft Silverlight Graphics
Page 51: Deep Dive into Microsoft Silverlight Graphics

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

Page 52: Deep Dive into Microsoft Silverlight Graphics

What's New in Microsoft Silverlight 3 MIX09-T14F

Page 53: Deep Dive into Microsoft Silverlight Graphics
Page 54: Deep Dive into Microsoft Silverlight Graphics

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
Page 56: Deep Dive into Microsoft Silverlight Graphics
Page 57: Deep Dive into Microsoft Silverlight Graphics

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

3 Properties can be HW accelerated

Transforms

Rectangular Clipping

Blending

Page 59: Deep Dive into Microsoft Silverlight Graphics
Page 60: Deep Dive into Microsoft Silverlight Graphics

EnableGPUAcceleration=true

CacheMode=BitmapCache

EnableCacheVisualization

Page 61: Deep Dive into Microsoft Silverlight Graphics

EnableCacheVisualization

Page 62: Deep Dive into Microsoft Silverlight Graphics
Page 63: Deep Dive into Microsoft Silverlight Graphics

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

WriteableBitmap: A way to replicate contentCacheMode:A way to transform content

Page 65: Deep Dive into Microsoft Silverlight Graphics

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
Page 67: Deep Dive into Microsoft Silverlight Graphics
Page 68: Deep Dive into Microsoft Silverlight Graphics

http://blogs.msdn.com/seema

Page 69: Deep Dive into Microsoft Silverlight Graphics
Page 70: Deep Dive into Microsoft Silverlight Graphics

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

banding

Page 72: Deep Dive into Microsoft Silverlight Graphics
Page 73: Deep Dive into Microsoft Silverlight Graphics

© 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.