Silverlight 5 Beta - pierwsze kroki w grafice 3D + wirtualna wycieczka po Babilonie (po dwakroć) !

Przydatne moim zdaniem linki, ciekawe dema i biblioteki całościowo zebrałem pisząc post 3D Graphics in Silverlight 5 Beta: links + cool apps !. Tutaj podsumuję typowe tworzenie prostej grafiki 3D, dostępne możliwości w Silverlight 5 Beta, a następnie zrobię sobie (na razie nietechniczną) wycieczkę po wirtualnych trójwymiarowych światach, jakie możemy odnaleźć w demie Babylon 3D Engine.

Tworzenie grafiki trójwymiarowej zaczyna się tłumaczyć od prostych brył. Podobnie jak na studiach zacząłem zabawę od sześcianu.

Jak korzysta się z grafiki 3D na Silverlight 5? Typowo można zamknąć to w kilku etapach:

1. Włączenie akceleracji sprzętowej w plug-inie.
2. Umieszczamy kontrolkę DrawingSurface i obsługujemy jej zdarzenie Draw.
3. Tworzymy definicję struktury dla naszych vertex-ów (mogą być w niej trzymane pozycja, kolor, współrzędne do tekstury).
4. Tworzymy dane dla vertex-ów opisujące bryłę 3d.
5. Tworzymy bufor dla vertex-ów i ładujemy do niego poprzednio przygotowane dane
6. Tworzymy obiekty vertexshader-a i pixelshader-a (na podstawie plików .ps -wczytywanych z resourse-ów assembly)
7. Jeśli nasz vertexshader wymaga macierzy - tworzymy macierze widoków World, Camera, Projection
8. W zdarzeniu Draw:
   1. Czyścimy urządzenie, ustawiamy kolor (biały, czarny, przezroczysty).
   2. Ustawiamy na urządzeniu bufor vertex-ów (korzystając z wcześniej przygotowanego przez nas bufora).
   3. Ustawiamy na urządzeniu vertexshader-a i macierz będącą jego parametrem.
   4. Ustawiamy na urządzeniu pixelshader-a.
   5. Wywołujemy rysowanie (nasze wierzchołki mogą być łączone liniami lub trójkątami na kilka predefiniowanych sposobów)
   6. Możemy zakolejkować następne wywołanie zdarzenia Draw
9. Możemy odświeżyć powierzchnię także z poziomu wątku UI.

Jak widać API jest dość niskopoziomowe, nie jest to wysokopoziomowa obsługa znana z WPF. Szczególne powody do zadowolenia mają programiści znający XNA, bo mamy tutaj import podzbioru API z XNA 4.0. Oczywiście są też różnice, nie wszystko trafiło do wydania SL5 beta, nie wszystko też trafi do wydania SL5 RTW.

Kilka uwag:

1. Starszy model sterowników (np. Windows XP) wymaga zezwolenia od strony użytkownika lub zwiększonych uprawnień. Nowy model WDDM nie potrzebuje o nic pytać.
2. Nie ma emulacji programowej. Musimy mieć fizyczny sprzęt - kartę graficzną z obsługą przynajmniej DirectX 9.
3. Nie mamy pętli gry - jawnie decydujemy o kolejnym odświeżeniu albo w samym zdarzeniu Draw albo w innym miejscu aplikacji z wątku UI.
4. Nie mamy predefiniowanych struktur XNA dla definicji vertexshader-ów, mamy dużą elastyczność – to my decydujemy, jak nasza struktura ma wyglądać.
5. W Becie nie mamy wbudowanych efektów XNA - póki co do wszystkiego potrzebujemy vertexshader-ów i pixelshader-ów. Własnych efektów nie będzie w ramach releasu.
6. Obsługiwane są tylko shadery w wersji 2.0
7. Obsługiwany jest tylko profil Reach.
8. W Becie nie mamy Math Library, która została udostępniona na razie w postaci oddzielnie dystrybuowanego assembly. Nie musimy znać się na macierzach i obliczeniach, mamy wysokopoziomowe API pozwalające tworzyć macierze dla odpowiednich transformacji i widoków.
9. Obecnie nie mamy standardowego wsparcia dla ładowania modeli, ale już teraz powstały do tego odpowiednie rozwiązania (Silverlight 3D Model Importer, Babylon Toolkit).
10. Animacje 3D powstają na skutek zmiany parametrów macierzy i cyklicznego odświeżania w handlerze zdarzenia Draw, w którym mamy dostęp do informacji o czasie, który upłynął od początku aplikacji i od ostatniego odświeżenia.
11. Handler zdarzenia Draw wykonywany jest przez tzw. composition thread.
12. Nie powinniśmy w Draw wykonywać inicjalizować danych czy je zmieniać, nie odwołujemy się do obiektów DependencyObject.  Powinniśmy o tym pamiętać, gdy będziemy chcieli “sterować” obiektem 3D z poziomu UI.
13. Obecnie mamy po dwie klasy Rectangle, Color, PixelShader - jedne z Silverlight, drugie z XNA. Nie możemy ich mylić. Kolory są określane nieco inaczej.
14. API daje nam możliwość dowiedzenia się o przyczynie niewyświetlania grafiki 3D.

A teraz zapraszam na wirtualną wycieczkę po Babilonie, a konkretnie po restauracji w dwóch odsłonach! Aby skompilować przykład najwygodniej zainstalować sobie DirectX SDK (potrzebny kompilator FXC.exe do kompilacji HLSL) oraz HLSL Build Task.

W restauracji oprócz jedzenia są…  laptopy z Windows 7 oraz … Microsoft Surface! W tym i w większości przykładów poruszamy się i obracamy strzałkami lub myszą.

Obracam się i staję przy Surface z drugiej strony (lada za moimi plecami).

Obracam się i idę w głąb korytarza, mając po prawej stronie ladę.

Idę dalej, po lewej ukazują się schody.

Wchodzę po tych schodach na górę.

Idę dalej.

I jeszcze dalej.

Przybliżam się do okna.

Odwracam się. Znowu wszechobecne plazmy i laptopy –;) Miłe halogeny.

Odsłona numer dwa. Pozwoliłem sobie salę z obrazem Scotta i Silverlight’a uczynić początkiem mej wędrówki.

Podchodzę do obrazu Silverlight i próbuję wyglądać przez wąskie okna na świat.

Wycofuję się do holu (któremu nie zrobiłem screenhota) i kieruję się ku schodom.

Wchodzę po schodach (tryb pełnoekranowy).

Wszedłem na kondygnację górną, widać w górze niebo, a w dole hol.

Innych przykładów nie będę już tutaj opisywał, by ten post nie był zbyt długi, ale opisałem je tutaj. Zachęcam do zabawy! Uwaga praktyczna dla 3D Housebuilder - na dzień dobry po uruchomieniu będziemy zasypywani wyjątkami, jeśli nie mamy ustawionej kultury US, czyli mamy np. polską (chodzi zdaje się o “.” zamiast “,” dla liczb zmiennoprzecinkowych).

Słabo?!  Widać, że nowy Silverlight śmiało może stać się środowiskiem do pisania gier 3D. Nie analizowałem tych interesujących przykładów od strony technicznej, jak znajdę czas, by przyjrzeć się im bliżej, to napiszę o tym w jednym z kolejnych postów.

Silverlight 5 Beta - runda pierwsza!

Zgodnie z zapowiedzią z poprzedniego posta opublikowałem swoją rozpiskę o Silverlight 5. Umieściłem ją w całej okazałości na swoim drugim blogu, który postanowiłem po pewnej przerwie reaktywować. Rozpiska w sumie okazała więcej niż zwykłą rozpiską, bo obfituje w pogrupowane tematycznie linki oraz zawiera sample, jakie sobie potworzyłem, by wypróbować różne nowości i czegoś przy tej okazji się nauczyć (w kilku przypadkach odstąpiłem od tworzenia dysponując niezłymi przykładami z sieci). Uzyskałem całkiem spore pokrycie, choć takie grube tematy jak grafika 3D czy PivotViewer zostawiłem sobie na inną okazję.

Skoro już się naprodukowałem o sporej części SL5 w ramach Reactivation!!! New features in Silverlight 5 Beta + Links + Samples - Part I (co prawda nie opisałem tego wszystkiego, co wyczytałem z tych linków, ale wtedy to mogłaby powstać już z tego książka albo co najmniej kilka artykułów), tutaj nie mam ambicji pisania o wszystkim i skupię się na kilku, najbardziej kręcących mnie przykładach.

Zacznijmy od multimediów. W przypadku SoundEffect na warsztat wziąłem swój wcześniejszy przykład z Windows Phone 7. Dynamiczna korekta dźwięku nadal działa! Nawet lepiej, bo nie muszę jawnie emulować pętli gry.

Na drugi rzut poszedł Trick Play. Na załączonym zdjęciu odtwarzam sobie nagranie video ponad 2 razy szybciej niż normalnie, można też zwalniać. Jedynym mankamentem jest to, że w Becie wyłącza się audio przy szybkości odtwarzania innej niż 1.

No i teraz pora na zaufane aplikacje. W przypadku hostowania w przeglądarce jest to trochę przekombinowane, bo aplikacja i tak musi być skonfigurowana jako … out of browser (jeśli chcemy możemy ukryć opcję instalacji z prawego menu). Inna sprawa, że w Becie ta funkcjonalność działa wyłącznie w Windows. Komunikat pokazywany przez kontrolkę WebBrowser sugeruje, że potrzebujemy przeglądarki Internet Explorer.

Jeśli uruchomimy aplikację za pomocą Visual Studio, możemy się już cieszyć rozszerzoną funkcjonalnością w przeglądarce. Ale hola, nie o to chodzi!  W typowych dla  klienta warunkach aplikacja nie jest hostowana na adresie localhost czy 127.0.0.1 i wtedy możemy zobaczyć to, co na poniższym screenshocie.

Aby cieszyć się hostowanym HTML w aplikacji Silverlight w przeglądarce, musi być ona podpisana poprawnym certyfikatem, a w rejestrze związanym z Silverlight musi być ustawiony wpis zezwalający na uruchamianie aplikacji w przeglądarce. Mike Taulty wyczerpująco krok po kroku opisał wszystkie czynności na swoim blogu. Nie jest to trudne do skonfigurowania i aplikacja działa z większymi uprawnieniami. Pewną ciekawostką jest, że – przynajmniej obecnie – okienko notyfikacji działa także wtedy, kiedy aplikacja wykonuje się w przeglądarce!

Aha, uporządkujmy jeszcze jedną sprawę. Zaufane aplikacje działające w przeglądarce nie są dokładnym odpowiednikiem zaufanych działających poza przeglądarką. Po pierwsze są warunkiem na hosting HTML-a (poza przeglądarką nie potrzebujemy do tego większych uprawnień), nie wspierają funkcjonalności typowych dla aplikacji out of browser (np. nie możemy używać klasy Window). Rzecz druga – przeglądarka może ograniczać rzeczywiste uprawnienia naszej zaufanej aplikacji (np. Internet Explorer w trybie protected). To proces przeglądarki ostatecznie hostuje naszą aplikację.

Pokazywany wyżej przykład zbudowałem na bazie swojego przykładu z czasów Silverlighta 4 (od tamtego czasu YouTube wprowadziło restrykcje i zastąpiłem je Channel 9). Z tamtych czasów pamiętam też bardzo fajną aplikację Microsoftu z puzzlami. Pozwoliłem ją sobie przerobić na nowszą wersję Silverlight, by działała także w przeglądarce.     

Zaufane aplikacje w Silverlight 5 mają nieograniczony dostęp do całego systemu plików, także w przeglądarce. W Silverlight 4 poza przeglądarką … też było to możliwe, tylko trzeba było “natrudzić się” z użyciem komponentów COM.

Do sprawdzenia tej funkcjonalności posłużyła mi przeróbka mojego drugiego przykładu z czasów Silverlight 4. Obrazki teraz są wczytywane z dowolnej lokalizacji wpisywanej w polu tekstowym. Jako ciekawostkę mogę powiedzieć, że przypadkiem natrafiłem na swoim laptopie na zdjęcia, które robiłem 2 lata temu przy okazji mojej wyprawy na spotkanie grupy w Katowicach i to one znalazły się na poniższym screenshocie.

Na koniec zostawiłem rzecz – moim zdaniem - wielce efektowną w porównaniu do Silverlight 4. Ostatnio omawiany przeze mnie przykład przerobiłem na aplikację z wieloma natywnymi oknami (zawartość każdej z zakładek trafiła na oddzielne okno). Aplikacje w Silverlight mogą więc coraz więcej! Warto to podkreślać, bo nadal dla wielu osób Silverlight kojarzy się z wtyczką do przeglądarki i substytutem HTML. Czy w HTML5 możemy pisać takie aplikacje? 

To nie wszystko! Postanowiłem iść na całość i opracowałem wersję z własnoręcznie ostylowanymi oknami. Wzór okna wziąłem z przykładu z czasów Silverlight 4, ale przepisałem do na bardziej uniwersalny sposób, by współdzielić kontrolkę pustego okna pomiędzy wszystkimi okienkami. Taka aplikacja najlepiej pokazuje różnicę między HTML a Silverlight.

Kończę na dzisiaj pisanie, bo … zaczynam prace nad materiałem na kolejnego posta.