W jaki sposób WebGL ponownie odkrywa dziedzictwo Flasha
Czy pamiętasz wszystkie te projekty, które cechują się wyjątkowymi interakcjami, niesamowitymi animacjami i porywającymi efektami dźwiękowymi, które spowodowały intensywne wciąganie użytkownika? Tak, są szanse, że zostały stworzone za pomocą Flash.
Jednak nie znoszę tego przyznać, dobiega końca era tej bogatej platformy multimedialnej. Flash jest w końcu martwy. Ale nie bój się! Jak to często bywa, gdy jedne drzwi się zamykają, drugi otwiera się, a Flash powoli zastępuje świeższy, bardziej energiczny następca. Technologie takie jak WebGL i towarzyszące biblioteki JavaScript, takie jak Three.js szybko się rozwijają - umożliwiając programistom tworzenie projektów typu Flash bez towarzyszących problemów z bezpieczeństwem.
Dzisiaj skupimy się na WebGL i Three.js. To parowanie jest potężną opcją dla immersywnego UX.
WebGL i Three.js
WebGL służy jako podstawa zapewniająca instrumenty do manipulowania za pomocą interaktywnej grafiki komputerowej 3D i 2D. Daje możliwość łączenia elementów z elementami HTML i łączenia ich z innymi elementami strony lub tła.
Three.js to biblioteka JavaScript z listą zaawansowanych funkcji, które umożliwiają obsługę scen, aparatów fotograficznych, oświetlenia, geometrii i innych elementów. Ma to na celu odblokowanie potencjału WebGL poprzez dodanie dodatkowej funkcjonalności do platformy. Ułatwia tworzenie animacji 3D z akceleracją GPU bez korzystania z wtyczek przeglądarki.
Problemy ze zgodnością
Dzięki nowoczesnym technologiom zawsze masz dylemat: albo stwórz projekt "jeden rozmiar dla wszystkich", który będzie działał na różnych urządzeniach i będzie zapewniał spójne wrażenia użytkownika, albo stawiaj wszystko na linii i natychmiast imponuj publiczności, do której możesz dotrzeć .
Z WebGL i Three.js to ta sama historia. Safari, Opera i większość przeglądarek mobilnych (a to nic nie mówiąc o Internet Explorerze) to jak mucha w swoim Chardonnay. Niestety, wielu użytkowników utknęło w starszych przeglądarkach, więc kompatybilność jest sporą przeszkodą, ale wsparcie rośnie (co jest więcej niż można powiedzieć o Flashu) i pod warunkiem, że nie używasz go do niczego krytycznego, WebGL i Three.js to doskonałe opcje.
Przykłady
Unieważnić
Unieważnić to eksperyment stworzony przez Hi-ReS !, kreatywne studio z siedzibą w Londynie. Twórcy chcieli odejść od ograniczeń związanych z nowoczesnymi platformami i przeglądarkami oraz przetestować ograniczenia obecnych technologii. Wygląda na to, że go przybili.
Jest to aplikacja czysto komputerowa, obsługiwana przez funkcje WebGL i Web Audio. Wraz z Howler.js, GSAP i Coffee Collider, Three.js wziął udział w tworzeniu tego wyjątkowego placu zabaw, który nieodmiennie przyciąga odwiedzających w podróż, która przypomina cyfrową książkę.
Przekształcanie doskonałości
Ta interaktywna kampania poświęcona rocznicy Sennheisera to epicka odyseja, która łączy w sobie nie tylko dramatyczne krajobrazy science-fiction, ale także liczne nowatorskie cechy i detale. Jest to czysty eksperyment Chrome, który pozwala odwiedzającym uczestniczyć w tworzeniu i kształtowaniu pomnika dźwięku. Mimo że faza formacji została zakończona - w wydarzeniu uczestniczyło milion osób z całego globu - to skały. Zachęcamy do wniesienia własnego wkładu, zbadania tej masywnej rzeźby dźwiękowej i cieszenia się wideo intro i najwyższej klasy wykonaniem.
Bruno Quintela
Osobiste portfolio Bruno Quintela jest renderowanym w czasie rzeczywistym eksperymentem WebGL, który demonstruje potencjał artysty i możliwości obecnych technologii internetowych. Użyj myszki, aby dokładnie zbadać scenę. Przeciągnij go w różnych kierunkach, aby zobaczyć, co jest ukryte w tej masie dokładnie umieszczonych razem wielokątów z błyszczącymi powierzchniami. Pomysł stanowi doskonałe otwarcie dla strony internetowej, która pozostawia silne, trwałe pierwsze wrażenie.
Test cząstek
Ten projekt wykazuje wir mniej uporządkowanych i uporządkowanych rurek cząstek, które emanują high-tech wibracje. Jest centrum kontrolne, które zachęca cię do zabawy z takimi atrybutami jak promień cylindrycznego obłoku, gęstość rurek, wysokość, skala i wiele innych. Ta koncepcja jest fascynująca.
Water Shader
Ten artysta zdołał naśladować powierzchnię wody przez naśladowanie naturalnego zachowania się cieczy. Wypukły kształt i pofałdowana powierzchnia z odbiciem słońca jako wykończenia tworzą realistyczną scenę, która przyciąga wzrok od pierwszej sekundy.
Głowica cząstek WebGL
Tak jak wtedy, gdy Flash się powiódł, cząsteczki są obecnie w szał. Animacje o różnych rozmiarach i typach można zobaczyć w wielu projektach, oraz ta praca jest jednym z takich. Subtelna wersja głowy przypomina mglistego, podobnego do człowieka robota z powieści Isaaca Asimova, jest prawdziwym arcydziełem. Zaskakuje nie tylko realizacja, ale także jej zachowanie. Reaguje na ruchy myszy, naturalnie przechylając głowę w prawo, w lewo, w górę iw dół.
Dynamiczny tekst konfetti 3D
Efekt tekstu jest jednym ze sposobów urozmaicenia nudnych interfejsów z nutą żartobliwości i chłodu, a także podkreślenia wymaganego napisu. Rachel Smith rozwiązanie inspirowane konfetti z pewnością przyczyni się do wzbogacenia projektu jaskrawymi emocjami i umieści tytuł na pierwszym planie. Wpisz słowo w polu wprowadzania poniżej, aby zobaczyć całą magię. Żywe i żywe geometryczne elementy 3D nadadzą kształt żądaniu i sprawią, że efekt będzie wyjątkowo interaktywny.
Przeglądarka 3D Panorama
Three.js przydaje się przy wspólnych projektach, jak dowodzi Max Chuhryaev. Jego rozwiązanie z łatwością przekształca obrazy panoramiczne w niezbędny detal doświadczenia użytkownika. Ma przyjemną perspektywę i powoli poruszającą się kamerę: razem sprawiają, że czujesz się częścią kompozycji. Pasuje do krajobrazów, pejzaży miejskich i wnętrz, pozwalając użytkownikom cieszyć się pięknem statycznych multimediów.
Generator trójkątów
Ten eksperyment daje fantastyczne wielokątne tło z pięknym uczuciem 3D. Działa również jako plac zabaw, w którym możesz rozjaśnić niektóre obszary, a inne przyciemnić: wystarczy użyć myszy. Panel opcji umożliwia dostrojenie większości szczegółów obszaru roboczego, w tym ustawień oświetlenia, siatki, renderowania, a nawet eksportu.