Tworzenie aplikacji RIA w Silverlight 5 - Tworzenie grafiki 3D  

Autor: Tomasz Kowalczyk

Opublikowano: 2012-08-22

Zapraszam do zapoznania się z kolejnym artykułem przedstawiającym możliwości Silverlight, zaimplementowane w najnowszej wersji, oznaczonej cyfrą 5. W tym artykule zostanie opisana technologia XNA, której można używać już z poziomu Silverlight dzięki XNA 3D API.

Po przeczytaniu tego artykułu dowiesz się:

• co to jest XNA,
• jak utworzyć projekt Silverlight, bazujący na XNA 3D API,
• jak korzystać z XNA z poziomu Silverlight.

Wprowadzenie

Microsoft XNA jest to zbiór narzędzi, wykorzystujących środowisko kodu zarządzanego, dzięki którym programista może wytwarzać np. komputerowe gry wideo. W tym momencie może pojawić się pytanie, w jakim celu dodano XNA do najnowszego Silverlight, którego najpopularniejszym scenariuszem użycia są aplikacje typu LOB (Line of Bussines). Odpowiedź na to pytanie jest dość prosta i nasuwa się sama po chwili zastanowienia. Programiści i osoby odpowiedzialne za wytwarzanie oprogramowania biznesowego dostrzegli po prostu duży potencjał grafiki 3D oraz możliwości jej wykorzystania w aplikacjach skierowanych np. do sektora medycznego, logistycznego czy też finansowego. Wychodząc naprzeciw oczekiwaniom swoich klientów (programistów), Microsoft postanowił zaimplementować obsługę 3D w najnowszym wydaniu Silverlight.

Implementacja

Aby móc w łatwy sposób skorzystać z możliwości, jakie daje XNA 3D API w środowisku Silverlight 5, zaleca się zainstalowanie Silverlight 5 Toolkit. Jest to zbiór dodatkowych, darmowych komponentów, które w dużej mierze ułatwiają korzystanie z Silverlight i wzbogacają go o nowe możliwości. Jeśli chodzi o samo XNA 3D API, to po zainstalowaniu Silverlight 5 Toolkit, programista będzie mógł korzystać z Templatów, przyspieszających proces tworzenia projektu w technologii Silverlight, w oparciu o XNA. Dodatkowo, pakiet ten zawiera ciekawe przykłady w postaci kodów źródłowych, które warto przeanalizować.

Po zainstalowaniu Silverlight 5 Toolkit, wybierając nowy projekt w Silverlight, będzie można zauważyć dwa nowe typy, pozwalające tworzyć aplikacje w 3D -Rys. 1. Tworzenie projektu 3D.

Rys. 1. Tworzenie projektu 3D.

Prosta aplikacja 3D w Silverlight 5

Po uruchomieniu Visual Studio 2010 należy wybrać aplikację typu „Silverlight 3D Application” z grupy Silverlight. Warto w tym momencie zwrócić uwagę na fakt, że nie ma możliwości wyboru wersji Silverlight, którą zakładany projekt będzie używał, gdyż wsparcie dla tego typu aplikacji posiada jedynie najnowsza wersja – Silverlight 5.

Po załadowaniu wszystkich niezbędnych komponentów przez środowisko Visual Studio 2010 widać, że projekt składa się z czterech podprojektów:

• Silverlight3dApp – główny projekt Silverlight, w którym będzie umieszczona logika działania aplikacji,
• Silverlight3dAppContent – projekt, którego pochodzenie zdeterminowane jest użyciem XNA. Osoby korzystające wcześniej z XNA, podczas pisania gier, uruchamianych w środowisku Windows czy też Windows Phone, będą wiedziały, że w tym projekcie przechowywana będzie tzw. statyczna zawartość, jak np. pliki *.slfx, przechowujące efekty specjalne, projekt ten zawiera referencje do Microsoft.Xna.Framework.Content.Pipeline,
• Silverlight3dWeb – standardowa strona Web, która będzie odpowiedzialna za hostowanie bazowej aplikacji Silverlight,
• Silverlight3dWebContent – projekt, przechowujący statyczną zawartość na potrzeby aplikacji WWW, również posiada referencje dotyczące Microsoft.Xna.Framework.Content.Pipeline.

Uruchomienie przykładu

Po krótkim wprowadzeniu teoretycznym pora sprawdzić, jak działa aplikacja 3D, uruchomiona bezpośrednio w przeglądarce po wybraniu F5. Powinno się wówczas uruchomić okno przeglądarki, przedstawiające obraz, podobny do tego, przedstawionego na Rys. 2. 3D w przeglądarce.

Rys. 2. 3D w przeglądarce.

Jak to działa?

Istotne znaczenie mają referencje do bibliotek, dodane do głównego projektu – Silverlight3dApp, pochodzące bezpośrednio z XNA, odpowiadające m.in. za obliczenia, jakich wymaga tworzenie aplikacji w 3D.  Nie znajdują się one standardowo w projekcie tworzonym w Silverlight:

• Microsoft.Xna.Framework,
• Microsoft.Xna.Framework.Content,
• Microsoft.Xna.Framework.Graphics,
• Microsoft.Xna.Framework.Graphics.Extensions,
• Microsoft.Xna.Framework.Graphics.Shaders,
• Microsoft.Xna.Framework.Math,
• Microsoft.Xna.Framework.Toolkit,
• System.Windows.Xna.

Warto również przyjrzeć się plikom, wchodzącym w skład projektu:

• Cube.cs – w celu łatwiejszego przeglądania tego pliku został on podzielony na regiony, z których szczególną uwagą należy obdarzyć region Creation, w którym umieszczono m.in. definicję obiektu ContentManager, do którego ładowane są efekty specjalne (pliki. *.slfx), pochodzące z projektu Silverlight3dAppContent:

this.mySilverlightEffect=scene.ContentManager.Load<SilverlightEffect>("CustomEffect");
// Cache effect parameters
worldViewProjectionParameter=mySilverlightEffect.Parameters["WorldViewProjection”];
worldParameter = mySilverlightEffect.Parameters["World"];
lightPositionParameter = mySilverlightEffect.Parameters["LightPosition"];

• Scene.cs – ten plik zawiera definicję klasy Scene, która tworzy ContentManager i rejestruje zdarzenia:

// Register for size changed to update the aspect ratio
           _drawingSurface.SizeChanged += _drawingSurface_SizeChanged;

            // Get a content manager to access content pipeline
            contentManager = new ContentManager(null)
            {
                RootDirectory = "Content"
            };

• MainPage.xaml – ten plik jest o tyle ciekawy, iż zawiera nową kontrolkę DrawingSurface oraz zdefiniowane dla niej zdarzenie Draw, które określa, co i kiedy ma być w niej rysowane:

<Grid x:Name="LayoutRoot" Background="White">
        <!--3D drawing surface-->
        <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw"/>
        <TextBlock Text="My Silverlight 3D Application" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,30" Foreground="White" FontSize="40"/>
</Grid>

Podsumowanie

W tym artykule poznaliśmy, w jaki sposób tworzyć oprogramowanie wykorzystujące XNA 3D API do tworzenia trójwymiarowych obiektów w środowisku Silverlight 5, uruchamiane w przeglądarce internetowej.

W następnej części dowiemy się, jak korzystać z Low Latency Sound i współpracować z mediami.