Realizzare un effetto di riflessione con Silverlight 3.0

di Marco Leoncini, in Silverlight 3.0, HLSL, PixelShader,

Tra le nuove feature che hanno accompagnato il rilascio di Silverlight 3.0, l'introduzione degli effetti speciali come DropShadowEffect e BlurEffect è sicuramente una delle più accattivanti.

Gli effetti sono realizzati utilizzando un linguaggio C-like, chiamato HLSL (High Level Shading Language), che è stato sviluppato da Microsoft per creare shader da utilizzare con le DirectX.

In passato, la possibilità di utilizzare gli shader era un'esclusiva delle DirectX e di WPF, oggi questa barriera viene rimossa: l'unica differenza sostanziale è che, mentre in WPF sono accelerati in hardware, Silverlight utilizza ancora il rendering software.

Il primo passo verso la realizzazione di uno shader è scaricare il DirectX SDK, recuperabile al seguente indirizzo:
http://www.microsoft.com/downloads/details.aspx?FamilyID=b66e14b8-8505-4b17-bf80-edb2df5abad4.

Il DirectX SDK è necessario poiché contiene il compilatore HLSL; per evitare la compilazione da riga di comando, e per facilitare lo sviluppo dello shader, possiamo utilizzare Shazzam, scaricabile da http://shazzam-tool.com/.

Il passo successivo è scrivere lo shader vero e proprio, ed elaborare i pixel dell'elemento al quale è applicato. Allegato allo script trovate il codice sorgente dello shader del quale, mediante Shazzam, possiamo avere un'anteprima (tasto F5) e compilarlo (tasto F7).

Compilato lo shader, dobbiamo aggiungere alla soluzione il file risultato della compilazione (estensione ps), assicurandoci che la "Build Action" sia impostata a "Resource".

Fatto questo dobbiamo creare una classe che estenda il tipo ShaderEffect:

namespace ReflectEffect
{
  public class ReflectEffect : ShaderEffect
  {
    public ReflectEffect()
    {
      Uri _reflectEffectUri = new Uri("/ReflectEffect;component/Reflect.ps", UriKind.Relative);
      PixelShader _pixelShader = new PixelShader();
      _pixelShader.UriSource = _reflectEffectUri;
      this.PixelShader = _pixelShader;    
    }

    public double ReflectHeight
    {
      get
      {
        return this.PaddingBottom;
      }
      set
      {
        PaddingBottom = value;
      }
    }
  }
}

Nel costruttore della classe inizializziamo una nuova istanza del tipo Uri e passiamo al costruttore il percorso dello shader da caricare. In seguito, creiamo un nuovo oggetto del tipo PixelShader e utilizziamo l'oggetto Uri creato precedentemente per impostare la proprietà UriSource, successivamente impostiamo la proprietà PixelShader con lo shader appena creato.

Creiamo un wrapper pubblico per impostare la proprietà PaddingBottom, impostare il padding inferiore è necessario in quanto l'effetto deve estendersi oltre i margine dell'oggetto.


Gli effetti di PixelShader, insieme con altri, sono stati trattati nel capitolo 10 del libro Silverlight 3.0 - Guida Completa di Daniele Bochicchio, Cristian Civera, Alessio Leoncini e Marco Leoncini.
http://books.aspitalia.com/Silverlight-3.0/

E' possibile leggere un'anteprima del capitolo all'indirizzo:
https://www.silverlightitalia.com/articoli/silverlight/effetti-speciali-immagini-silverlight-3.0.aspx

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi