Silverlight 3’s New Pixel Shaders

Silverlight 3 is loaded with new graphical goodies, and one of the goodies I’m most excited about is pixel shaders. A pixel shader is an object that transforms pixels output from the rendering pipeline before they’re rendered to the display surface. Silverlight 3 Beta 1 comes with two pixel shaders: BlurEffect and DropShadowEffect. The following example uses DropShadowEffect to dress up some text:

<TextBlock Text=”Silverlight” Foreground=”Black” FontFamily=”Calibri”

    FontSize=”64″ FontWeight=”Bold”>

    <TextBlock.Effect>

        <DropShadowEffect BlurRadius=”8″ ShadowDepth=”8″ Opacity=”0.5″ />

    </TextBlock.Effect>

</TextBlock>

Here’s the output:

DrodShadowEffect

What’s really cool is that you can write custom pixel shaders that can be applied using the same simple, declarative syntax as built-in shaders. Here’s how.

First, if you haven’t already, download and install the latest DirectX SDK. You need the effects compiler (Fxc.exe) from the SDK to compile custom effects.

Next, create an FX file to hold your new effect and implement the effect using Microsoft’s High-Level Shading Language (HLSL). For this example, I wrote the following HLSL in a file named WateryEffect.fx:

sampler2D input : register(S0);

float4 main(float2 uv : TEXCOORD) : COLOR

{

    uv.y = uv.y  + (sin(uv.y*100)*0.03);

    return tex2D( input , uv.xy);

}

The next step is to compile the FX file into a PS file. To do that, open a DirectX SDK command prompt window and run the effects compiler using a command like this one, which compiles WateryEffect.ps from WateryEffect.fx:

fxc /T ps_2_0 /Fo WateryEffect.ps WateryEffect.fx

As an alternative to running Fxc.exe from the command line, you can download Walt Ritscher’s excellent Shazzam utility and use it to compile PS files. An added bonus with Shazzam is that you can test and debug your effects before compiling them.

Now that your effect has been compiled into a PS file, you need to write a custom Silverlight shader and connect it to the PS file. You do that by deriving a class from System.Windows.Media.Effects.ShaderEffect and providing a default constructor that initializes the PixelShader property with a PixelShader reference. Here’s an example:

public class WateryEffect : ShaderEffect

{

    public WateryEffect()

    {

        this.PixelShader = new PixelShader() { UriSource = new Uri

            (“/CustomShaderDemo;component/WateryEffect.ps”,

            UriKind.Relative) };

    }

}

Be sure to replace “CustomerShaderDemo” with the name of your application assembly. In order for this code to work, you’ll need to add the PS file to your Silverlight project and change its build action to “Resource.” That’s all the constructor code is really doing: creating a PixelShader that’s initialized from a resource named WateryEffect.ps.

Now you’re ready to use your custom shader. First declare an XML namespace prefix that references the namespace (and optionally assembly) in which the WateryEffect class is implemented:

xmlns_custom=”clr-namespace:CustomShaderDemo”

Finally, apply your effect to a XAML object:

<TextBlock Text=”Silverlight” Foreground=”Black” FontFamily=”Calibri”

    FontSize=”64″ FontWeight=”Bold”>

    <TextBlock.Effect>

        <WateryEffect />

    </TextBlock.Effect>

</TextBlock>

To demonstrate, I implemented WateryEffect as described above and applied it to a user control depicting my favorite penguin. Here’s the XAML. Note that two copies of the user control are declared. The one on top has a DropShadowEffect applied to it, while the one on bottom has a WateryEffect applied to it:

<UserControl x_Class=”CustomShaderDemo.MainPage”

    

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    xmlns:custom=”clr-namespace:CustomShaderDemo”>

    <Grid x_Name=”LayoutRoot” Background=”White”>

        <StackPanel Orientation=”Vertical” VerticalAlignment=”Center”>

            <custom:Penguin>

                <custom:Penguin.Effect>

                    <DropShadowEffect ShadowDepth=”20″ BlurRadius=”20″ Opacity=”0.4″ />

                </custom:Penguin.Effect>

            </custom:Penguin>

            <custom:Penguin>

                <custom:Penguin.Effect>

                    <custom:WateryEffect />

                </custom:Penguin.Effect>

                <custom:Penguin.RenderTransform>

                    <TransformGroup>

                        <TranslateTransform Y=”-322″ />

                        <ScaleTransform ScaleY=”-1″ />

                    </TransformGroup>

                </custom:Penguin.RenderTransform>

            </custom:Penguin>

        </StackPanel>

    </Grid>

</UserControl>

And here is the result:

 

Penguin with WateryEffect Reflection

I based my HLSL code on a sample I found in an excellent blog post by Tamir Khason. HLSL examples abound on the Internet, and the fact that Silverlight 3 supports HLSL opens up a whole new world of possibilities for Silverlight developers.

Atmosera Web Help Desk or WHD

In an effort to continue delivering more value to our customers, we implemented a web-based application built on the SolarWinds Web Help Desk software (https://www.solarwinds.com/help-desk-software). Our goal is to improve the ability for our customers to create tickets, view their status, and communicate more efficiently with our team. We are confident this will result in faster resolutions and clear communication.

In an effort to continue delivering more value to our customers, we implemented a web-based application built on the SolarWinds Web Help Desk software (https://www.solarwinds.com/help-desk-software). Our goal is to improve the ability for our customers to create tickets, view their status, and communicate more efficiently with our team. We are confident this will result in faster resolutions and clear communication.


Below you can find the following details About Atmosera Web Help Desk (WHD):

  • How Can I Get Access to Atmosera's Web Help Desk?
  • How Many WHD User Accounts Can My Company Get?
  • Known Issues with Multiple Microsoft Logins
  • Can I Get More User Accounts If I Need Them?
  • How Can I Change Who Is an WHD User?
  • How Can I See All Tickets for my Company?
  • What Is a Super User?
  • Can I Still Open a Trouble Ticket by Sending an Email to support@atmosera.com?
  • What Will Happen to the Current Trouble Ticket System?
  • Can I Send Updates to a Distribution List?

Tutorials

  • Create a Ticket
  • Manage Tickets
  • Reset Your Office 365 Password
  • Forward Emails
  • Mobile Access Using an iPhone or Android device


How Can I Get Access to Atmosera's Web Help Desk?

Web Help Desk (WHD) Users for each customer will receive login instructions via email when their account is created.
The portal can be accessed at https://websupport.atmosera.com/

How Many WHD User Accounts Can My Company Get?

Contact your Customer Success Manager (CSM) to identify how many logins you will receive.
Atmosera's policy is that these accounts are assigned to individuals who will receive login credentials.

If you have a third party vendor who needs to have access, additional seats will be required.

An 0ffice 365 mailbox account will be created for each Web Help Desk (WHD) User. The mailbox address will be [clientID]-[firstInitial][lastname]@atmosera-portal.com. (e.g. Craig Smith at company id 12345 would be 12345-csmith@atmosera-portal.com). The new Web Support System will send emails to this email address and will only accept emails from that address. You can configure this email address to forward to your normal address; however, email responses on tickets back into Web Support will need to come from the email address that we provide; otherwise they will be denied. You do have the option to just update your tickets via the WHD Portal also.

Known Issues with Multiple Microsoft Logins

The portal uses Microsoft credentials to log you in. If you use other Microsoft accounts such as Officer 365, you will likely need to log out before attempting to login to the portal. Some users are experiencing issues related to conflicts between multiple logins in issue. Logging out and restarting your browser will take care of any such conflicts.

Can I Get More User Accounts If I Need Them?

Yes, any authorized Web Help Desk (WHD) User can log into WHD and submit a ticket to have a new user created.
We need first name, last name, email, and phone number.
The process takes up to two (2) business days to complete.

How Can I Change Who Is an WHD User?

Existing Web Help Desk (WHD) Users can submit a request using WHD to remove WHD Users.
The process takes up to two (2) business days to complete.

How Can I See All Tickets for my Company?

By default, all Web Help Desk (WHD) Users are only able to see the tickets they created using their account.
Any WHD User can be promoted to Super User status which allows them to see all tickets for their company.
To enable Super Users, submit a ticket or contact your Customer Success Manager (CSM) and identify which WHD Users need to be promoted to Super User status.

What Is a Super User?

A Super User is granted rights to see all tickets for their company regardless of which WHD User created them.

Can I Still Open a Trouble Ticket by Sending an Email to support@atmosera.com?

Once a customer has been moved to Web Help Desk (WHD), users can only create tickets using the Portal.
Sending emails to support@atmosera.com will result in the sender receiving an auto-response pointing them to the Portal.

What Will Happen to the Current Trouble Ticket System?

The current system based on BMC Footprints will be retired shortly after the launch of the new WHD application.
We will maintain tickets already created ahead of the cut over and work them to resolution.
When WHD goes live, all new tickets will be generated and managed with the new application.

Can I Send Updates to a Distribution List?

Yes, Web Help Desk uses an Office 365 account to login WHD Users.
Office 365 accounts have the ability to forward all messages to another email address.
Follow the directions below to setup email forwarding using your Office 365 account.
This process makes it possible for Web Help Desk (WHD) Users to forward correspondence to another email and/or a distribution list.

 


Create a Ticket

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

 


Manage Tickets

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

 


Reset Your Office 365 Password

Access the Office 365 Portal: https://login.microsoftonline.com

Click on the image to see a larger view

 


Forward Emails

Access the Office 365 Mailbox Settings: https://www.office.com

Click on the image to see a larger view

 



Mobile Access Using a iPhone or Android Device

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

We deliver solutions that accelerate the value of Azure.

Ready to experience the full power of Microsoft Azure?

Start Today

Blog Home

Stay Connected

Upcoming Events

All Events