Z tego artykułu dowiesz się czym jest technologia WebGL, jakie są możliwości WebGL oraz jak WebGL zrewolucjonizuje internet, który znamy.

Trendy

Wraz ze zbliżającym się końcem roku powstaje wiele ciekawych artykułów związanych z przewidywaniami kierunku, w którym będzie zmierzało prezentowanie treści użytkownikom internetu na stronach WWW. Na temat sprawdzalności tych przewidywań można dyskutować godzinami, nie dochodząc do żadnego wniosku. Jednak część z nich (tych przewidywań rzecz jasna) – ta, która powtarza się pośród różnych publikacji – w mniejszym lub większym stopniu rzeczywiście zdobywa rynek. Może nie od razu, czasem dzieje się to stopniowo. Według mnie, dzięki technologii WebGL, zbliża się rewolucja.

To, co staje się powoli standardem, zależy od tego, czego wymagają użytkownicy, lub od ich przyzwyczajeń. Każdego roku coraz więcej młodych ludzi staje się nowymi użytkownikami internetu, jednak zanim się nimi staną, zazwyczaj mają styczność z grami na urządzeniach mobilnych. Gry to dla nich miejsce styku, gdzie mogą dosłownie „dotknąć cyfrowego świata”. Między innymi dla tych użytkowników, którzy podświadomie pragną głębokich interakcji w postaci „dotyku” czy wręcz dosłownie realnej wizualizacji oglądanego produktu w postaci AR, powinniśmy zastanowić się nad inną formą prezentacji stron niż statyczna. Jedną z technologii, która w tym (choć nie tylko) pomaga, jest WebGL. Piszę „choć nie tylko”, bo dzięki tej technologii wzbogacamy odbiór stron dla każdego. Efekty czy transformacje nanoszone na obrazy, video lub teksty są o wiele płynniejsze.

Co to jest WebGL

WebGL – bohater tego artykułu – jest technologią, która daje programistom dostęp do zasobów karty graficznej bezpośrednio z przeglądarki. Mówiąc w uproszczeniu – jeśli chcemy operować kamerą, oglądać obiekty z każdej strony czy nałożyć na film / obraz instagramowe efekty – powinniśmy użyć WebGL. Daje nam to dostęp do prezentowania stron WWW czy sklepów internetowych (nawet w całości) jako trójwymiarowe obiekty, które możemy dotknąć, obrócić, powiększyć lub pomniejszyć. Pozwala nam nakładać filtry czy transformować w dowolny sposób obrazy oraz video lub tekst. To tak, jakby ktoś dał nam narzędzie wcześniej zarezerwowane zupełnie dla innych mediów, dając nam tym samym masę nowych sposobów na zainteresowanie odbiorcy!

Przykłady zastosowań WebGL

Oczywiście każda technologia powinna być użyta w przemyślany sposób. To nie jest tak, że od dziś wszystkie efekty na stronach powinniśmy robić w WebGL, bo nie o to chodzi.

Stworzenie idealnie wyważonej strony dla grupy odbiorców jest kluczowe. Zaplanowanie i dobranie technologii również. Postaram się pokazać kilka przykładów atrakcyjnej (według mnie) prezentacji treści przy użyciu WebGL.

Najciekawszym zbiorem stron zbudowanych na podstawie WebGL jest lista stron biorąca udział w konkursie Awwwards:

https://www.awwwards.com/websites/webgl/

W wolnej chwili przy kawie polecam zobaczyć ten zbiór, można zdobyć wiele inspiracji oraz podpatrzeć masę ciekawych pomysłów od najlepszych!

Kolejnym przykładem strony, która mnie zaciekawiła, jest portfolio Bruno Simona. Tutaj widzimy całą „stronę” przedstawioną w 3D. Zupełnie jak gra komputerowa. Poza tym Pan Bruno wydał serię artykułów nt. Threejs – jednej z największych bibliotek do WebGL.

Żeby nie było zbyt kolorowo i cukierkowo – strona, która zapiera dech w piersiach, to strona wykonana przez ww. twórcę: https://chartogne-taillet.com/en

Kolejnym przykładem zastosowania może być prezentacja produktu w miejscu, w którym użytkownik próbuje sobie to zwizualizować. Tutaj przykład połączenia AR oraz WebGL: https://www.youtube.com/watch?v=Zu6MXyfi-Ts

Tak, nawet Google widzi, że trend jest wzrostowy: https://developers.google.com/web/updates/2018/06/ar-for-the-web

Tak jak wcześniej wspominałem, przykładów zastosowań może być wiele i zależą one tylko od naszej kreatywności.

Korzyści i potencjalne pułapki WebGL

Według mnie największą korzyścią płynącą z WebGL jest nowatorski sposób prezentowania treści. Coraz więcej (jak nie większość) ruchu na stronach WWW pochodzi z urządzeń mobilnych, które są jednym wielkim panelem dotykowym. Jeśli chcemy prezentować produkty, wizualizacje użytkownikom w sposób, do którego są przyzwyczajeni, to należy rozważyć „ożywienie” statycznych stron. Warto mieć na uwadze to, że często taki użytkownik chce „dotknąć”, „obrócić”, a przede wszystkim – chce płynności, którą karta graficzna z WebGL w renderowaniu (również) 2D dostarcza.

Z drugiej strony wydaje mi się, że znalezienie tutaj odpowiedniej korelacji między ilością efektów czy obiektów 3d na stronie a grupą docelową jest dość kluczowe i to może być ta pułapka, w którą twórca strony może wpaść.

Jednak wierzę (nawet wiem!), że są agencje na rynku, które z racji doświadczenia i opierając się na analizie, są w stanie doradzić lub stworzyć dobrą stronę na podstawie WebGL. Wiem, bo sam w takiej pracuję!
Gorąco zachęcam do kontaktu!

P.S Jeśli chcesz sprawdzić, czy Twoja przeglądarka obsługuje technologię WebGL, to możesz to szybko sprawdzić na stronie: WebGL.