Home > HTML5 > [PL] Kurs WebGl

[PL] Kurs WebGl

WebGL_logoOstatnio po przeczytaniu paru postów, książek, artykułów zaciekawiło mnie jak od zera napisać coś w WebGl. Jakiś czas temu napisałem post na temat jak go ugryźć, teraz chciałbym przyjrzeć się temu bliżej i krok po kroku skleić parę linii javascriptu, wyświetlając coś prostego. Nie ukrywam, gry nie napisze, nobla nie dostanę, serca żadnej dziewczynie w ten sposób nie złamię, ale fajnie jest poznać coś innego, a dodatkowo podzielić się przemyśleniami.

Celem kursu jest

zapoznanie się z podstawami i zasadami WebGl. Fakt – jest sporo różnego rodzaju tutoriali. Niektóre są bardzo fajne, inne są fajniejsze, ale najfajniejsze jest gdy się samemu to pozna i napisze. Zawsze pomiędzy CTRL+C i CTRL+V jest też F1, który pomaga zrozumieć daną linię kodu. Dodatkowo znajdzie się w sieci kolejny tutorial napisany tym razem w języku polskim. Nie ukrywam, że chciałbym zrobić coś podobnego do tego co kiedyś zrobiłem na stronach MSDNa na temat SVG. W rezultacie może pojawi się też prosty ebook, który będzie zawierał wszystko i opisywał krok po kroku poszczególne zagadnienia na przykładach.

Wszystkie przykłady będą wykorzystywały najnowszego Internet Explorera, co nie znaczy, że nie da się ich przerzucić na inne przeglądarki – np. Firefoxa, na linuxie.

Zakres kursu

Nie wiem ile mi się uda samemu poznać WebGla, ile mi się uda przedstawić zagadnień w przykładach oraz na jakim poziomie. Nie chciałbym też aby posty były przydługawe, jak niektóre moje maile – tylko krótkie jak moje wypowiedzi (no może dłuższe). Aktualną listę linków do opublikowanych postów będę zamieszczał poniżej. Utworzenie wszystkiego to jedynie kwestia czasu i innych obowiązków.

  1. Podstawowe pojęcia
  2. TBD
  3. TBD
  4. TBD

Dlaczego WebGl?

WebGlWaterWraz z HTML5 pojawiło się coś takiego jak Canvas oraz SVG. Właściwie, te rzeczy były już wcześniej dostępne, ale dzięki HTML5 stały się ogólnie dostępnie prawie na każdej platformie. Na Canvas mamy możliwość generowania grafiki rastrowej, zawierającej sporo detali w czasie rzeczywistym. SVG pozwala natomiast na generowanie grafiki wektorowej oraz dodatkowo w bardzo prosty sposób umożliwia implementację interakcji pomiędzy poszczególnymi elementami tej grafiki – dzięki temu istnieje możliwość utworzenia interaktywnych map, wykresów czy nawet narzędzi pomocniczych – takich jak Kalkulator oznaczeń kolorów oporników. Więcej na temat różnic pomiędzy Canvas i SVG umieściłem na MSDN.

WebGl można powiedzieć, że jest rozwinięciem możliwości Canvasa i pozwala na tworzenie bardziej zaawansowanej grafiki z użyciem możliwości kart graficznych (o czym napiszę więcej w dalszych postach). Mamy możliwość definiowania modeli 3D oraz także możliwość interakcji pomiędzy różnymi obiektami na naszej grafice. Dzięki tym możliwościom możemy zdefiniować model jakiegoś produktu, który zamierzamy sprzedać w sklepie internetowym. Potencjalny klient może obracać produkt o 360 stopni w dowolnym kierunku, przybliżać, oddalać produkt czy sprawdzić interesujące go detale. Pomijam już fakt możliwości tworzenia gier (bez użycia Flasha).

Materiały zewnętrzne

Dla głodnych wiedzy, będę starał się na bieżąco umieszczać linki do zewnętrznych stron, zawierających ciekawe tutoriale i przykłady – czasami też coś ćwierknę. Na niektórych przykładach będę sam się wzorował zmieniając podejście lub bardziej dokumentując kod, usuwając to co jest zbędne jak i dodając to, co jest potrzebne.

  • Jednym z pierwszych przykładów, które już jakiś czas temu zobaczyłem był carvisualizer pokazujący praktyczne zastosowanie WebGl w akcji. Jak widać, można uzyskać fajne wizualizacje do prezentacji:

WebGlPlus360

Książki

Na chwilę obecną polecam książkę, którą aktualnie przeglądam i czytam – WebGL Up and Running.

Tags: , , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: