Category Archives: EffectGraph

My modern “Start Screen” (Part 1)


image

I saw a design of a mocked up start screen on Deviant Art that I liked more than the one in Windows 8. It had gradients, shadows, 3D depth definitely went against some of the design goals of metro.

Below is what the current Windows 8 “start screen” looks like :

image

Below is the mocked up deviant art “start screen” design :

start_screen_unmetro_by_zainadeel-d4wszjj

What I liked about this is the use of gradients, shadows, depth to each tile ,… Pretty much all of those features are forbidden in current win8 metro design.

So I wanted to reproduce something similar using my favourite technologies XAML/C#/DirectX(SharpDx) ..

 

Design Analysis

 

image

Analysing the deviant art “tile” we see the following..

1. Depth to each tile, almost a 3D like effect, achieved using some form of “Drop Shadow” effect

2. Inner radial gradient for each tile that gives an inner glow like effect surrounding the icons in each tile

It’s a very artsy/pastel like overall effect .. I like it a lot Smile

So the question is how do we achieve this in WinRT XAML/C# ?

 

My proposed XAML/C# solution

When i see this design i immediately think Direct2D and Effect Graphs. The only way to get these shadow/Glow effects is using DirectX.

So my proposed solution would be to render it using SharpDx on a Direct2D surface utilizing effects. Further rendering this D2D surface in a XAML SurfaceImageSource (SIS) or SwapChainBackgroundPanel (SCBP).

image

Taking each of these parts lets create a tree of the UI proposed elements

image

Each tile will consist of the following visual elements that are rendered from bottom to top. This is the proposed “visual tree” of each tile.

 

Let’s Build it

 

As mentioned above I need to generate shadow/glow effects as well as a radial gradient so the only option for me is to use SharpDx.

There are numerous posts and examples of how to setup a SharpDx pipeline to render Dx content in XAML so I won’t be covering that here …

 

Step 1: Immediate Mode rendering requires me to maintain my own “visual tree”

In the XAML world, retained mode world, we are spoilt because a visual tree is maintained for us by the framework.

In the DirectX world, immediate mode world, we have to manage the rendering of each of the UI elements ourselves, including all the state between each frame!

I wrap all this logic in the Renderer classes…

image

 

I have a list that will hold the items for rendering “_renderTree”

image

 

Step 2: Preparing my assets

The assets for my tiles consists of

a) Background Images for the tiles

image

b) Icons for the tiles

image

 

All these assets will need to be loaded as textures and cached so that we don’t need to keep doing File IO reads.

To load a media element i have a method that wraps all that up in the BaseRenderer class. Its called “LoadAssetAsync”, and as the name suggests it loads it asynchronously. It uses the storage API’s to read the asset and then WIC to work with the bytes.

image

 

Once the asset is loaded from the file system i cache it for reuse later in case we need to re-render the entire _renderTree.

image

Loading assets and caching them for use as textures on a Direct surface is a very very difficult skill to learn, the only way to fully grasp this idea is to just throw yourself into the deep end and make many MANY mistakes Smile

Step 3: Drawing the Tiles

We have our assets, we have a way to create a render tree next step is to load that tree with our UI elements that use these cached assets!

I have a method that wraps up the creation of the Tiles

image

The actual logic to create a tile is wrapped up in another method called “_createTile”

This is where things get interesting as now i need to work with Effect Graphs

Step 4: Drawing a Tile

Fist step is to create a “BitmapSource” effect, this will be the bottom most image, the background image.

image

This BitmapSource effect will be used as input into an effect graph.

Note that i use a variable passed in to define the “Background Image” to use, if you step thru the code you’ll notice it goes through “step 2” above to cache the asset so if we reuse this effect, or re render this UI element it will use the cached version.

As you can see below if we render just the BitmapSource effect it is the FULL image, it does not look like a tile at all. And it doesn’t honour the width/height of the proposed tile dimensions (in this example a tile is 200px by 200px)

image

If you noticed from Step 2 above each of the backgrounds are oddly shaped and not the classic “tile” shape of a square, or rectangle (2 squares). We need to somehow scale the background to fit into the tile shape we want..

image

I used a direct2d “Scale” effect, and this scale effect acts on the “bitmap source” effect from above. Notice the * above. This is an effect graph Smile

Rendering this Scale effect, below is the result.

image

 

Now that the background image is scaled to fit the desired tile size we need to crop out the bits that fall outside. For this I use the “Crop” effect.

image

The input to the “Crop” effect is the previous “Scale” effect ( * above ). I should point out that the “Order” property above is used to order the layers for rendering, its like the z-index in web programming.

Rendering this “Crop” effect we get the 200px by 200px tile Smile

image

So we used an effect graph to draw the background of a tile.

 

Step 5: Rendering the inner glow

The inner glow is a rectangle with a radial gradient applied to it. Its pretty simple, and i’ve used this in previous demos Smile

image

It uses the RectangleGeometry in the SharpDx library

image

And the radial gradient applied

image

And rendered it looks like this:

image

 

 

Step 6: Rendering the outer shadow

The outer shadow is achieved using the “Shadow” effect. And the input to the shadow effect i’ll use the “Crop” effect from step 4 above. I could of used the scale or bitmapsource effect, as all i wanted was the outline of the tile.

image

The shadow effect rendered looks like this :

image

 

 

Step 7: icon & label

The Icon is rendered using a BitmapSource effect and to make it stand out I put a shadow effect around it . The reason i put a shadow around it is that if the background image blends too much into the icon it will be hard to see the icon.

image

This is the icon + shadow rendered:

image

The label is rendered using DirectWrite, ive wrapped the call into a method that does all the magic

image

image

 

Step 8: putting all the layers together

So rendering all the layers from step 4 to step 7 we get a tile Smile

image

Zoomed in :

image

Step 9: other useful tips

I used a “staging” texture to render the tiles so that when the user pans and zooms it uses this “staged” texture to render rather than re-rendering the entire renderTree.

image

When rendering the tiles i swap in my “staging” bitmap. Then the tiles are drawn in this staged target

image

After the tiles are finished drawing on the staged bitmap i swap back in the original render target

image

Now I have all my rendered tiles in a nice staged bitmap that i can manipulate when panning/zooming.

So the actual rendering to D2D uses this “Staged” bitmap ..

image

As you can see from above i also render “Debugging” info and a nice “Designer Surface Region” that represents the screens dimension.

 

 

Final Result (part 1)

Running the WinRT-XAML-C# demo after the initial load the frame rate settles to around 55-60 frames per second (fps) which is what I expected.

image

A zoomed in view of a tile we see the outer shadow, inner radial gradient etc. Exactly the effects i was going for Smile

image

 

Here’s a quick video of the demo running , its got a low fps due to screen recording and running simultaneously.

 

Sample Code

All my code can be found in my demo GIT project that i plan on using to also build my applications with.

image

Git Hub url : http://github.com/LiquidBoy/ModernApps

 

Conclusion

 

Part 1’s goal was to create tiles that have gradients, shadows and depth using an D2D effect graph. I pretty much achieved that Smile

The next step, part 2, will be to add the animations to the tiles and wire up some interaction between XAML and the D2D surface.

D2D Effect Graphs mixed with XAML is a very cool combination that i hope to master over time, i will admit thou it is a hard concept and skill to grasp. Patience and lots of reading is required, plus lots of reverse engineering samples!

I haven’t had this much fun in ages Smile , SharpDx gives us FULL access to DirectX / DirectWrite / WIC pretty much everything we need to create awesomeness from within XAML/C# ..

The fun continues with “part 2” where i try to animate all these tiles!

All my XAML/C#/SharpDx demos


image

As promised here is all my samples in one huge project, and working on Windows 8 Release Preview (RP).

It is only demo code and I follow a very loose way of programming, which means I pay more attention to getting things done creatively than in frameworks and coding styles.

Quick 4 min video of the demos

[note that the frame-rate of the running app is slow because I am screen recording simultaneously]


List of the demos

Alpha Pad – shows a quick and nicely animated alpha keypad using tilt tiles and the tile wall

image

Numeric Pad – a numeric keypad built using tilt tiles and a tilt wall with nice fluid animations in.

image

Dynamic Backgrounds – as mentioned in a previous blog post, this demo shows how to use SharpDx and Direct2D to create dynamic backgrounds for your app

image

Animated Gifs – using SharpDx to get to the WIC and D2D libraries we can go above and beyond what Silverlight/XNA could ever offer and build our own media experiences . In this case implement the animated gif in xaml ourselves. A previous blog post covered this demo..

image

Composite Modes – shows you how to implement different composite modes for when you try composing textures on a Direct2D surface. The ideas also translate to how you would compose on a D3D surface.

image

Interpolation Modes – shows you how to implement different interpolation modes for your D2D drawn textured effects.

image

Lighting Effects – using D2D and build in effects  to show how to create cool lighting effects. This previous post covers this demo .

image

Ripple + Pixelated custom effects – again using D2D and effect graphs we show how to create custom effects (ripple/pixelated) and graph them together to create cool effects. A previous post covers this demo.

image

Ribbon – playing around with the idea of a metro ribbon and how it would feel like using it. This previous post covers this demo …

image

Data Entry – experimenting with creating my data entry forms using a quick metadata driven approach, using reflection. The reason for this is that configuring D2D Effects of D3D settings for your scene would take a lot of xaml configuration screens, I was hoping for a very quick meta-data driven approach to creating these screens.

image

image

Inertial Dots – introducing the conductor and inertial controls. 2 new controls that I hope to leverage a lot in future UI/UX’s as they deliver some cool animated effects . I talked about this demo in a previous post.

image

Cube – a 3D cube rendered using SharpDx via Direct3D

image

Cube Wall – playing around with rendering 300+ textured cubes using an imagebrush

image

Tile Texture – I want to experiment with creating cool metro tiles, this demo is the precursor to that. The idea was to create a simple tile on a Dx surface that I will later play around with

image

Tile Wall – just like the “Tile Texture” demo , this is a wall of tiles that I hope to use in the future to experiment with a wall of metro tiles.

image

Bursting Circles 1 & 2 – A batch of circles that are being batch rendered on a Dx surface via D3D and SharpDx. These 2 demos are purely experiments on ideas I have for building out my own Sprite Batch, this is teaching me about things like caching on the GPU, Vertex/Pixel shader constants, the right types of lists to use for best performance, type of blending to use  etc. Lost of learning is going on with these 2 demos ..

image

image

Demo Code

[please note that this will be updated when I have time to, I am quite busy and this is a side project. ]

image

Conclusion

I’m having a lot of fun coding on top of WinRT XAML using SharpDx and C#. [again a big thank you to Alexandre Mutel who owns the SharpDx project Smile ]

It’s all about using the technologies that you find most rewarding, and for me that is XAML (Silverlight, WPF, XAML) and DirectX …

It’s clear to me that mixing XAML and DirectX is how we are going to deliver those amazing UI/UX’s that we see in movies, and they may not make sense in business apps today BUT I honestly believe in x years time we wont’ be having this argument..

Get the experience under your belt today with 2D, 3D, XAML, you won’t regret it in the future!

And in respect to HTML, I seriously can’t see web technologies delivering us  the amazing UI/UX’s that we see in movies, and that’s all I want to be doing! So power to all you web programmers out there, but for me XAML and DirectX all the way!

Animated gifs in XAML/C# :)


image

Someone the other day tweeted a link to some very cool animated gifs. I love animated gifs Smile !!

I have always wanted animated gifs in Silverlight/WPF BUT for reasons unknown they never came. They would have been perfect for A LOT of scenarios where creating storyboard animations would have been overkill.

Well turns out WinRT XAML, firmly rooted in Silverlight XAML, also doesn’t have GIF support nor will it probably ever get it. BUT it does have WinRT support and it has access to DirectX & WIC via SharpDx!!

And today on Twitter Jeremiah Morrill tweeted that WIC has support for GIF’s, this intrigued me. Can I build my own support for animated gifs in XAML using DirectX & WIC (via SharpDx) ?!

Challenge is on ……

This is the animated gif I will try to render…

Source : “Savannah Rain” (frommetoyou)

Default XAML/C# metro app project + SharpDx

I created an empty managed metro project and added the necessary SharpDx bits, basically like I have been over the last several posts.

As always this project has a effect renderer that will render to a (Direct2D or Direct3D) surface via a (SwapChainBackgroundPanel or SurfaceImageSource). Again this is what I’ve been doing in all my SharpDx posts to date so just go back to those or the samples if you’ve forgotten Smile

image

 

Animated GIF resource

Now just add the Animated GIF as a content resource to the project. I could load it in via a URI BUT I thought it would be easier to just include it for now .

image

 

Load GIF via WIC

Ok this is where it gets interesting, SharpDx gives us access to WIC from C#. Question is does it have the GIF bits.

As I’ve said many times before SharpDx is a very thin/performant wrapper over C++ libraries (but just to clarify there will always be an overhead to using WIC via this wrapper even thou it is small). This wrapper is a metadata mapping generated api so technically the GIF bits of WIC should have come across. Lets test it out.

Lets instantiate a WIC GIFDecoder that will be used to read the animated GIF resource. The “asset” is simple the internal uri to the gif content.

image

Next when we animate this gif we need to know how many frames to animate. The GIF spec defines this…

image

Now for each frame we want to get the bitmap of that layer and store it for rendering. There is a lot going on in this code BUT in a nutshell an object is created that lets us get at the bytes of data for a particular frame in the gif. (its easy to follow just step through the code , that’s how I learnt

image

As it turns out for GIFS the first layer normally has the entire bitmap contents of the GIF and all the other frames above that contain delta information.. Also the ‘delta’ frames are all offseted so we need to get the offset (left,top) of those frames and store them for rendering of that frame later on..

image

 

So assuming that SharpDx’s GIF WIC works fine that’s basically all we need information wise.. We just need a way to store those frames and render them to the UI.

…. hello SpriteBatch Smile

SpriteBatch

The best way to render a series of textures in the graphics world is via a spritebatch. Lets create a very very dirty one that will serve our purposes ..

I’m not going to go into too much detail of how this dirty spritebatch works, it’s not in the truest sense a spritebatch BUT it will do for now..

image

This spritebatch will keep a cache of the GIFs frames that I will render on a DirectX Surface. I’ve defined 2 lists to store the static frames ( 0 ) and the rotating frames ( 1 – 7 )

image

I’ve created a way to add sprites (frames) to my spritebatch via the methods

1. DrawAlways  – sprites that will always get rendered on each loop of the rendering pipeline eg. frame 0 of the aimated gif

2. DrawRotating – sprites that will rotate there appearance with each loop of the rendering pipeline eg. frames 1 to 7 of the animated gif

image

 

These methods are called when we are decoding our GIF (the section prior to this outlined this process)

image

The sprite batch, as expected, has the ability to render itself and all it’s sprites. In my example it will render on a D2D surface and will use the much loved BitmapEffect to render the layer Smile .

Also note that the offset(_texturesRotatedOffset) for the layer needs to be rendered for the 1-7 frames

image

Now if you don’t understand the above just step through the code, it will all make sense..

Does this all work ?!

Does SharpDx’s support for WIC GIF’s work for animated gifs ?!

 

Running the demo

 

Here’s some awesome gifs from a very cool site

 

Here’s the metro xaml/c# demo running one of those animated gifs. Note that the framerate is low because of the simultaneous video recording going on. Without it it runs buttery smooth at 65-70fps. Smile 

 

 

Sample code

 

image

 

Conclusion

 

I started out this experiment fully expecting it NOT to work… I was so surprised that it actually did Smile . Animated gifs in a XAML managed metro app!!! Damn!!

XAML/WinRT + DirectX/WIC (via SharpDx) is turning into a killer combination of features for building pretty amazing new experiences. I’m only now getting familiar with the frameworks, I can’t wait to see what I’ll be creating a month from now!

I’m loving XAML/DirectX …

Using FX effects in your managed metro apps


image

In the WPF and Silverlight “desktop” worlds we have the luxury of being able to use shader effects (fx) in our apps, this infrastructure is not available in the “Windows Phone” or “WinRT XAML/C#” worlds.

However thanks to SharpDx and the improved hlsl graphics features in VS11 we can now easily use these same fx effects. Let me show you how I consume fx files in my XAML/C# WinRT apps…

FX to CSO (HLSL)

Our goal is to turn the FX file into something we can use, and if you’ve followed my previous posts the best option we have in DX11.1 world is a custom shader (cso) and thanks to SharpDx we can do that Smile … So lets try to turn this fx file into a cso

Now the HLSL editor and the compile shader features in Visual Studio 11 shader works only in a DirectX/Cx project.

So first step is to create a DirectX/Cx project to host our FX files. In my case I created a Direct3D Application called “D3DFXConverter

image

image

Then copy across the fx files you want to convert into this new project, in my example I’m going to convert a “Pixelate.fx” . I took this fx file from the “wpf pixel shaders libarary” project on codeplex.

image

Now rename the “fx” extension to “hlsl”

image

We now get all the editor experience of an hlsl file for our fx file.

image

What we want to do is try to compile this as a pixelshader, so go to the compiler setting and set the “Shader Model” to “Shader Model 4 Level 9_1 (/4_0_level_9_1)” and “Shader Type” to “Pixel Shader (/ps)” . note that the fx file in WPF is a shader model 2 or 3.

image

Now if we try to compile the D2DFXConverter you’ll notice some errors

image

What these errors mean is that the hlsl code is not compliant with the shader model we’ve chosen, we need to make some minor alterations to the hlsl ..

The changes are very minor, I’ve actually converted several fx shaders and in ALL cases the following is all I needed to change

 

1. Wrap constants inside a cbuffer 

 

Before:

image

After :

image

 

2. Alter the Sampler Input

 

Before :

image

After :

image

 

3. Alter the interface of the main entry point to the shader

 

Before :

image

 

After :

image

 

4. Alter the text2D call

 

Before :

image

After :

image

 

Now if you compile the project ….

image

And if you check out the output directory for the successful build you’ll find the binary of the compiled custom shader (cso).

image

 

We’ve successfully converted our fx to a cso ready for consumption in our managed metro SharpDx app.

 

Consuming the CSO as a custom effect via SharpDx

To speed things up I’m going to reuse the D2DCustomPixelShaderEffect project I created a few posts ago, “Custom Effects – Ripple Effect (Pixel Shader)” .

Copy across the cso into the project …

image

Create a C# custom effect wrapper around the cso much like what we did in the above mentioned post for the RippleEffect. Basically I just copied the RippleEffect.cs and renamed it to PixelateEffect.cs and changed some of the internals, it was pretty obvious what needed to be changed. If you get confused just re-read the above mentioned post Smile

image

And the last step is to alter the EffectRenderer.cs to call the newly created custom effect PixelateEffect.cs .

The changes were simple, register the PixelEffect and wire up some gestures to alter the shaders 2 properties “HorizontalPixelCounts”, “VerticalPixelCounts”.

Again I won’t explain how to do that as it was covered in my earlier “custom effects” post.

image

 

Video of the demo

 

 

The frame rate is low and fluctuates quite a bit because of the video recording going on simultaneously.

 

Demo code

 

image

 

Conclusion

 

I’ve successfully converted 14 of the FX files from the WPF/SL codeplex project , the ones that weren’t so easy to convert I will cover in future posts.

SharpDx is turning into a great framework that fills a big hole in the XAML/C# stack.

As for the performance of SharpDx, the shader demo’s I’ve been doing consistently achieve frame rates in the 60+ range. It’s definitely performant  …

I look forward to seeing what others create on top of SharpDx!

Custom Effects – Ripple Effect (Pixel Shader)


image

DirectX11.1 introduced a bunch of built in effects into Direct2D that span the following categories

image

In my previous posts I showed how you could use SharpDx to call and render some of these effects inside your XAML Managed Metro apps.

Effect Graphs

Lighting Effects

However in the case where you want to do something that these effects don’t cover, or if you want to create a more optimal effect than custom effects is what you want!

HLSL (a custom pixel shader)

HLSL is the “high level shader language” developed by Microsoft for DirectX for defining their shaders.

DirectX11.1 and Visual Studio 12 introduces a much needed revamped HLSL editing/developing experience. The editor is available in C# & C++ projects, BUT the compilation functionality is only switched on in C++ projects.

Below is a screenshot of what you see when choosing a pixel shader file to add to your C++ project.

image

Below is a sample of a .HLSL file that is filled in for a simple effect. In this case it’s the algorithm to produce a “Ripple” effect.

image

In a C++ project you can right click on the .hlsl file and configure how VS compiles that resource. You will see in the screenshot below the yellow highlights the specific outputs for my custom pixel shader

image

So when this project is compiled this particular resource (Ripple.hlsl) will generate a pixel shader with an extension of .cso (custom shader object)

image

Remember ALL the above is only possible in a C++ project because that is where the compile logic for shaders exists. I’m hoping, but highly doubt, that these compile features for hlsl arrive in C# projects.

*.CSO in our managed apps

So once we have this compiled custom shader object (cso) we can use SharpDx to instantiate a CustomEffect for it for use in our managed metro app.

So in the sample above take the Ripple.cso and include it as “Content” in your XAML/C# metro app

image

You’ll notice that we included the Ripple.hlsl file as well, this is a good habbit to get into as it gives you valuable information in understanding how the shader is suppose to work and more importantly how to create a “CUSTOM EFFECT” for the cso.

Our custom effect’s properties

Once we have the cso in our managed project we need to create all the managed wrappers around it to be able to use it. SharpDx makes this process easy …

This ripple.cso takes a bunch of properties as inputs, we are going to put those in a separate file and call it RippleEffects.cs

image

Now if you refer back to the ripple.hlsl you’ll remember that there was a “Constants” area that defines the effects properties Smile 

image

Now we know what properties are needed for our custom effect, let’s create a wrapper for our effect and pass these properties into it.

Custom effect wrapper

Now its’ time to load up our cso and pass in our properties and execute this effect! We are going to wrap all this up in a RippleEffect custom effect class!

SharpDx has done all the hard work for us and made doing this easy!

Below you can see we create a RippleEffect class and give it the functionality of a “CustomEffectBase” which is a SharpDx abstraction for a DirectX Direct2D CustomEffect.

image

 

Next step is to implement the Properties for our effects that we defined earlier. It’s also important to know that we can define default values for our effect properties!

image

Because we implemented the “CustomEffectBase” we need to override the “Initialize” method,it is in there that we load our cso and assign it to our custom RippleEffect.cs

Also in the Initialize we pass through an “EffectContext”, which is where we are going to load our RippleEffect into. This effect context is important because it has a lot of useful libraries for all things effect related!

image

I should point out that when we load up our custom effect we need to give it a unique guid “GUID_RipplePixelShader” so that it is unique within the effect context.

Everything else in RippleEffect.cs can easily be understood, just step through the code at your convenience. The important ones I’ve already explained Smile

Using our custom Ripple effect

ok now that we have created our custom “RippleEffect” let’s call it!

In the demos all rendering logic sits in “Render” classes, in our case its called an “EffectRenderer”.

To use this ripple effect I will use it as part of an effect graph. The first step of the effect graph is to create a BitmapSource Effect, which is basically just loading up a bitmap image. We will then pass this bitmap effect into the Ripple Effect creating an effect graph Smile

image

 

RippleEffect in a SwapChainBackgoundPanel

This is what this effect looks like when we apply it to a SwapChainBackgroundPanel

 

RippleEffect in a SurfaceImageSource

This is what this effect looks like when we apply it to a SurfaceImageSource

 

Code Sample

 

image

 

Conclusion

Creating custom effects from a cso via SharpDx is dead simple, it’s actually quite fun. SharpDx has made easy to wrap the effect in a managed wrapper which leaves you more valuable time to spend on your actual hlsl Smile

And the other thing I should point out is that SharpDx is a very thin wrapper on Dx and actually mirrors quite a lot of the api’s one for one, which means if you get used to the calling syntax of SharpDx you will feel right at home in the Cx/Dx world!

This post only covered custom “pixel shader” effects, stay tuned as there are other cool effects that I want to cover!!

Lighting Effects in your XAML/C# metro apps :)


image

So there’s a cool Dx/Cx demo in the consumer preview bits “Direct2D lighting effects sample”. It uses an effect graph to give cool lighting effects to your surfaces.

I wanted to turn that Cx sample into a C# sample, via SharpDx, so that I can use it to give my backgrounds a dynamic lighting effect. I’ve said many times before your applications background is vital to the overall UX of your application, applying effects such as lighting to it is just one of may great tools now available to us in the metro managed world Smile

 

1. Here’s a screen shots of the demo

 

This is the Home screen (below) where you can launch the 2 types of demos

image

This first demo (below) is using a SwapChainBackgroundPanel to render the lighting effects on

image

This second demo (below) is using the SurfaceImageSource to render the lighting effects on

image

 

2. Here is a video of the Xaml/C#/SharpDx sample in action :

 

 

 

3. Here is the source code :

 

image

 

4. Conclusion :

 

Now that WinRT/XAML promises a GPU optimized experience we should take advantage of that particularly to give our applications an advantage over others.

We want the best UI/UX and I strongly believe that applying things such as effects to our apps will give us that, of course they need to be applied in a tasteful and optimized/performant manner Smile

Lighting effects are awesome, especially if they’re done on your apps background and animates organically over time to give your app the feeling of being alive and responsive. I can’t wait to use this in my future apps!

Effect-Graphs in our XAML/C# metro apps using SharpDx :)


image

Thanks to SharpDx we can now create complex effect graphs (in code) in our WinRT-XAML/C# apps.

I took the Xaml/Cx D2DBasicEffectGraph sample from the consumer preview and pretty much redid it to work with SharpDx for us managed programmers Smile

 

1. Creating the Effect Graph

 

In this demo I graph 2 effects together ( BitmapSourceEffect –> GaussianEffect )

The BitmapSourceEffect feeds into the GaussianEffect (input)

image

 

2. Rendering the Graph on a Surface

 

Using a SurfaceImageSource I render the effect onto a D2DSurface. Also there are sliders to alter various exposed properties on the 2 above mentioned effects

image

 

3. Here’s a quick video of it in action:

 

 

4. Here’s the source of the sample:

 

 image

5. Conclusion

 

Effect graphs are very powerful and it’s the most exciting feature of Dx11.1 in my opinion. I can’t wait to show you guys more stuff that I’ve been dreaming up with WinRT/XAML/DirectX/C# and of course SharpDx Smile 

Exciting times ahead!!!