Co oferuje WebGL dzisiaj? Możliwości. Praktyczne zastosowanie. Przyszłość.

Od dłuższego czasu możemy zauważyć prężny rozwój oraz coraz większe zainteresowanie technologią WebGL. Dostarcza ona naprawdę niesamowitych możliwości tworzenia interaktywnych stron WWW, gier, prezentacji, aplikacji oraz narzędzi, dzięki której możliwe jest uruchomienie ich bezpośrednio w przeglądarce. Co więcej, wielkie koncerny (m.in. Sony, Google, Mozilla) walczą o jak najszersze i jak najwydajniejsze wsparcie WebGL. Czy to faktycznie przyszłość branży interaktywnej, a może tylko „hype”?

Autorem wpisu jest Mikołaj Stolarski z Merixstudio.

Co to właściwie jest WebGL?

WebGL jest implementacją niskopoziomowego interfejsu programistycznego do grafiki 3D, bazującą na OpenGL ES 2.0. Wykorzystuje do tego celu element HTML5 Canvas oraz model DOM. Nad implementacją czuwa konsorcjum Khronos, jednak pracują nad nią także wielkie koncerny związane w rynkiem przeglądarek internetowych mianowicie: Google, Mozilla, Opera oraz Apple.

Możliwości WebGL

Na początek przybliżę w jaki sposób można wykorzystać technologię WebGL. W internecie można znaleźć mnóstwo aplikacji, narzędzi oraz materiałów pokazowych, które prezentują możliwości oraz wysoki potencjał WebGL. Poniżej wymienię kilka wg. mnie najciekawszych przykładów oraz krótko je opiszę.

Czytaj dalej poniżej

Słuchawki Intela zmontują ścieżkę dźwiękową dla Twojego treningu i... życia Jan Rybczyński

Fin – na taką innowację czekam Tomasz Krela

• Sketchfab

  Chyba do tej pory najszerzej używane rozwiązanie do umieszczania podglądu modeli 3D bezpośrednio na stronie WWW. Idealnie nadaje się do przedstawiania projektów na stronie z portfolio lub szybkiego przesyłania podglądu modelu pomiędzy użytkownikami.

  
  

• Sculptfab

  Bardzo efektowne narzędzie do tzw. Scupltingu, czyli wirtualnego „rzeźbienia”. Ta aplikacja naprawdę zrobiła na mnie duże wrażenie. Obecnie na rynku znajduje się wiele aplikacji przeznaczonych do scupltingu takich jak: Mudbox, Zbrush jednak najbardziej przypomina mi ono narzędzie Scupltris. Imponujące jest to że możliwe jest wykonanie takiego narzędzia przy zachowaniu całkiem niezłej wydajności i stabilności.

• Verold

  Bardzo ciekawe narzędzie do budowania interaktywnych scen 3D przygotowanych do działania bezpośrednio na stronie WWW. Sceny przygotowane w powyższej aplikacji mogą być dodatkowo oskryptowane dzięki czemu możemy zaplanować interakcję między elementami sceny.

• Delight Engine

  Jeden z wielu silników graficznych dostępnych obecnie w sieci. Nadal w fazie rozwoju jednak demo pokazuje niezwykły potencjał jaki niesie to rozwiązanie.

• Goo Engine

  Kolejny silnik graficzny, jednak w ofercie firma również posiada narzędzie do tworzenia sceny oraz projektowania interakcji podobnie jak w przypadku Verold'a. Dodatkowo producenci dostarczyli bardzo przyjemne demo.

• HTML5 Unreal Engine

  Port popularnego silnika Unreal Engine 3 do języka Javascript przy zastosowaniu asm.js , Emscripten, WebGL i innych technologii, udało się przygotować bardzo wydajne demo które działa w przeglądarce bez dodatkowych wtyczek.

  
  

• Quake 2 GWT Port

  Kolejna z ciekawostek, port znanej chyba każdemu gry Quake 2. Dzięki niemu zagramy w tą kultową grę bez instalowania jej lokalnie na naszym komputerze. Pod tym linkiem możemy sprawdzić jak autorom wyszła ta próba i wrócić na chwilę do dawnych czasów.

• Ocean Waves Simulation
  Ciekawa oraz efektowna symulacja falowania wody w oceanie przy użyciu WebGL.
• Cube Slam

  Jedna z klilku bardzo przyjemnych gier przygotowana przez Google.

  
  

• Hobbit Chrome Experiment

  Idealny przykład wykorzystania możliwości WebGL w celach marketingowych i reklamowych. Przedstawione demo pozwala na lepsze poznanie historii, postaci oraz filmowego świata. Google przedstawiało już podobne dema do innych produkcji filmowych.

Są to wybrane przykłady, więcej można znaleźć m.in. na Chrome Experiments oraz na stronie biblioteki Three.js do czego gorąco zachęcam.

Możliwości WebGL

Powyżej przedstawiłem kilka przykładów możliwości WebGL. Oczywiście jest ich o wiele więcej, np. umieszczanie interaktywnych wizualizacji danych, wykresów 3D oraz elementów trójwymiarowych bezpośrednio na stronie WWW. Oto kilka z rozwiązań:

• WebGL Globe
• VoodooJS
• Elementy 3D na stronie WWW

Biblioteki dla WebGL

Jako że WebGL posiada API dla języka Javascript, wraz z rozpowszechnianiem się tej technologii zaczęły powstawać biblioteki dla tego języka ułatwiające tworzenie scen 3D w WebGL. Niektóre z nich implementują kompleksowe rozwiązania inne natomiast pomagają w określonych operacjach. Powstają także kompleksowe silniki graficzne, a nawet edytory graficzne pozwalające na tworzenie scen nie wymagające znajomości języka Javascript, kilka z nich pojawiło się w sekcji „Możliwości WebGL” powyżej. Omówię jednak kilka najbardziej kluczowych i najprężniej rozwijających się rozwiązań.

• Three.js

  Jedna z pierwszych bibliotek i jedna z najbardziej rozbudowanych bibliotek pozwalająca na szybki i prosty dostęp do API WebGL. Implementuje wiele gotowych rozwiązań taki jak np. operacje na macierzach i wektorach, przedefiniowane prymitywy 3D m.in. sześcian, okrąg, koło, cylinder, stożek itd., manipulację kamery, światła, materiały oraz inne.

  Przykład:

  Jeśli zamierzacie rozpocząć zabawę w WebGL polecam właśnie zacząć od poznania tej biblioteki.

• tQuery

  Bilbioteka zbudowana w oparciu o Three.js, która wprowadza składnię podobną do tej z jQuery. Dodatkowo pozwala na łatwe pisanie wtyczek.

• GlMatrix

  Biblioteka stworzona do operacji na macierzach oraz wektorach. Jej głównym założeniem jest wydajność przeprowadzanych operacji.

• GLGE

  Ciekawe rozwiązanie, które można porównać z ThreeJS, które ma na celu „ukrycie” metod WebGL dla web developerów, aby mogli zaoszczędzić czas oraz łatwiej tworzyć trójwymiarowe sceny na stronach WWW.

Wymienione biblioteki to kilka najważniejszych, z którymi warto się zapoznać. Więcej znajdziecie na oficjalnym wiki WebGL.

Przyszłość, czy hype?

Należy sobie więc zadać pytanie czy technologia ma szerszą przyszłość, czy będzie tylko urozmaiceniem, które będzie wykorzystywane jedynie na nielicznych stronach? Należy tu rozpatrzyć jej praktyczność w przypadku korzystania z niej dostarczając treść w formie strony WWW.

Kluczowym elementem witryny internetowej jest nadal treść i szukając informacji w internecie jednak oczekujemy, że znajdziemy tam przede wszystkim informacje. Informacje, z drugiej strony, można zaklasyfikować i przedstawiać w różny sposób, gdzie dobrym przykładem są infografiki, wykresy czy diagramy.

Dlaczego więc wielkie koncerny walczą o jak najszersze i jak najwydajniejsze wsparcie WebGL w swoich produktach?

Nawet Sony w swojej najnowszej konsoli Playstation 4 używa WebGL w celu renderowania interfejsu użytkownika. Google wypuszcza coraz więcej dem w ramach Chrome Experiments współpracując z wieloma światowymi tytułami oraz deweloperami. Mozilla współpracuje z Epic nad portem Unreal Engine 3 oraz dodaje opcje edycji shaderów na żywo ze swojej konsoli deweloperskiej. Twórcy urządzeń i systemów mobilnych również starają się zapewnić jak najlepsze wsparcie dla tej technologii.

Otóż przy dobrym wsparciu technologi webowych pozawala to na używanie programu napisanego w języku Javascript na wszystkich tych urządzeniach, bez większych modyfikacji, a większość z nich polega na dostosowaniu interfejsu do wielkości ekranu danego urządzenia. Jednak nadal pozostaje to utopią. Głównie ze względu na wydajność urządzeń, niestety nie da się stworzyć aplikacji która będzie działać bez zarzutu na każdym sprzęcie. Oczywiście trudno tego oczekiwać i nie ma  w tym nic dziwnego, jednak wielu twórców takich aplikacji oraz wymienionych technologii przechwala się możliwością pracy z nimi na każdym sprzęcie który wspiera WebGL oraz HTML5, co oczywiście nie jest do końca prawdą, gdyż prawdopodobnie aplikacja się uruchomi, lecz na części urządzeń jej wydajność nie pozwoli na komfortowe użytkowanie.

Pomimo swoich wad cieszy mnie fakt że w przyszłości może stać się to możliwe, jednak uważam że nigdy nie będzie to złoty środek.

Wszystkich zainteresowanych poznaniem technologii oraz programowania grafiki 3D w przeglądarce polecam odbycie kursu w serwisie Udacity.com.

Dodatkowo zachęcam do zagrania w naszą firmową grę Skytte, chodź nie korzysta ona z możliwości WebGL, to jednak wykorzystuje m.in. element HTML5 Canvas oraz Web Audio. Liczymy, że w najbliższej przyszłości również wykorzystamy WebGL w komercyjnych projektach.

O autorze: Mikołaj Stolarski, UX/UI Developer w poznańskiej agencji interaktywnej Merixstudio.

Merixstudio jest partnerem technologicznym agencji reklamowych, firm i instytucji z Polski, USA, Wielkiej Brytanii, Irlandii, Niemiec, a także państw na Bliskim Wschodzie. Klienci: Toshiba, Allegro, HSBC, Payback, The Independent, KLM, Zagłębie Lubin, Gaz System, Diamant, Grant Thorton, Internetowy Kantor.