30 eksperymentów WebGL, które są tylko wow!

Oto wielkie narzędzie z wielkimi obietnicami przychodzi do waszych oczu. Jest szybki i gładki. Renderuje 3D, a dzięki integracji animuje, zgadnij, co to jest? HTML5? CSS3? Nie, nazywa się WebGL, biblioteka oprogramowania, która rozszerza możliwości JavaScript do generowania interaktywnej grafiki 3D, i tak, bez żadnych wtyczek!

W tej prezentacji nie chcemy pokazywać ci zwykłych rzeczy. Chcemy się pokazać 30 Eksperyment WebGLs, które zostały starannie opracowane przez profesjonalnych programistów, abyście mogli zobaczyć prawdziwą moc WebGL, która jest nie tylko inspirująca, ale także pozwala zobaczyć, jak może wyglądać przyszłość sieci. Wskocz w przyszłość po kliknięciu!

Zdecydowanie zaleca się przeglądanie tych wersji demonstracyjnych przy użyciu najnowszej wersji przeglądarki Google Chrome dla programistów. Większość wersji demonstracyjnych obsługuje najnowszą wersję Firefoksa, Google Chrome i Safari.

3 Dreams of Black

3 Dreams of Black, autorstwa Google Data Arts Team, przenosi cię w 3 światy snów stworzone przez połączenie bogatych rysunków 2D i animacji przeplatanych interaktywnymi sekwencjami 3D. Sprawdź cuda i przeżyj wspaniałe wrażenia!

Animowane cząstki objętościowe

Ta jest naprawdę artystyczna - animowane zwierzęta zbudowane z cząstek 3D przy użyciu tekstur float i obiektów bufora ramki. Więcej zaskoczenia, jeśli poruszysz myszą!

Akwarium

Symulować podwodne środowisko? To nie problem dla WebGL. Wersja demonstracyjna zawiera modele 3D z wysokiej jakości teksturami, animacją sceniczną, animacją cieniowania pikseli, odbiciami, refrakcją i substancjami żrącymi, wszystko po to, aby stworzyć realistyczną scenę podwodną!

Azatiopryna

Prawdopodobnie najbardziej epickie demo WebGL, wystarczy powiedzieć. Kapelusz dla autora Jochena Wilhelmy.

Atrakcyjni wycieczka

Jeśli chcesz doświadczyć 3D, jest to dla ciebie najlepsza wersja demo, także medytuj z ogromnym pięknem grafiki generowanej przez WebGL, używając formuły Martina Hopalonga.

Meduza

“Modelowanie proceduralne wykonane z Side FX Houdini. Eksportowano za pomocą eksportera Pythona w formacie json. Tekstura malowana przy użyciu Autodesk Mudbox. Animowane za pomocą cieniowania wierzchołków.”

Chrysaora

To nie jest regularne demo animacji, ale zawiera dynamicznie symulowane szkielety, częściową symulację po stronie serwera i synchronizację z WebSocket, system cząstek skierowanych w stronę kamery, efekt światła wolumetrycznego i bibliotekę matrycy mjs Vladimira Vukićevicia. Krótko mówiąc, niesamowity eksperyment ze złożonymi pracami.

HelloRacer

Przedstawiamy wysokiej klasy interaktywną symulację samochodu, dostarczoną wyłącznie przez HelloEnjoy.

Materiały: Samochody

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 i Chevrolet Camaro w Twojej przeglądarce. Wybierz swoją jazdę i ciesz się widokiem. Heck, możesz nawet wybrać ich kolory.

Samochody WebGL

Przyszłość serii Need For Speed będzie dostępna w przeglądarce internetowej. Zbyt ambitny? Z pewnością nie, jeśli odwiedziłeś te samochody, które są renderowane za pomocą dynamicznych map kostek, map cieni i efektów postprocessingu.

My Robot Nation

Cóż, jeśli postać nie jest twoją ulubioną, spróbuj zbudować fajnego i czarującego robota i pokazać się swojemu przyjacielowi! Możesz nawet wydać swoje dolary, aby uczynić z tego prawdziwą ofertę.

Pacmaze

Co powiesz na grę 3D Pac-Man? Grafika i rozgrywka są miłe, a co najważniejsze to świetna zabawa!

Czerwony kaptur strzelecki

A teraz jest ładny… lub cholerny. Ta gra to nic innego jak interesująca gra, która pokaże możliwości WebGL, gdy zostanie rozwinięta w top-shooter. Zabawne i zabawne na pewno.

TankWorld

Zgadujesz, że jest to przyjemna strzelanka czołgowa z bronią do użycia i mapami do eksploracji, aw niektórych poziomach możesz nawet zdobyć helikopter do odkrywania świata! To naprawdę więcej niż zwykła gra, a grafika wygląda komfortowo!

Pulpo

Najlepszy przykład tego, jak prosta grafika i animacja mogą zrobić wrażenie na ludziach, gdy są dobrze wykonane.

Powierzchnia

Sprawdź Surface, elegancki i inspirujący eksperyment Paula Lewisa. W demie możesz nie tylko zmieniać wielkość, elastyczność, automatyczną orbitę, model szkieletowy i krople deszczu, ale także przeciągać i upuszczać własne obrazy, aby odczuć efekt inaczej.

Cząsteczki zdjęć

Po prostu upuść swoje ulubione zdjęcie do tego demo i ciesz się, że eksploduje w tonę cząstek i wchodzi w interakcję z jakąś formą magnetyzmu. Eksperyment jest połączeniem czterech technologii: Drag and Drop HTML5, API plików, Canvas i WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer to emulacja WebGL klasycznego syntezatora wideo Rutt-Etra. Demo pozwala na umieszczenie własnych obrazów wewnątrz i manipulowanie nimi. Dzięki tym obrazom obraz 2D może nawet wyglądać jak trójwymiarowy!

The Wobble Dance

Proste, ale godne uwagi demo, które pokazuje, jak płynny może być WebGL, z anizotropowym shaderem światła i deformacją wierzchołków drgań.

Ultranoir

Kolejny świetny eksperyment ukazujący potencjał WebGL. Nouvelle Vague oferuje poetyckie i interaktywne doznania 3D w czasie rzeczywistym oparte na Twitterze, a zobaczysz tweety, które są wykonywane z różnymi obiektami latającymi. Z pewnością artystyczny sposób na cieszenie się tweetami.

Pofalowana Małpa

“Tym razem po prostu chciałem wykonać test, aby zobaczyć, ile pozycji wierzchołków i normalnych mogę zaktualizować bezpośrednio w JavaScript. Okazuje się, że 2000 jest w porządku :) Dodałem też trochę mapowania środowiska. I dziwność. Zawsze dodawaj dziwności.”

Wideo FX

Imponująca aplikacja Daniela Petterssona, która pozwala na zastosowanie wielu jednoczesnych efektów postprocessingu na zwiastunie Happy Feet 2. Spróbuj i baw się dobrze!

Voxele Liquid

3D reprezentacja klasycznego 2D algorytmu efektu wodnego, pokazuje również, jak interaktywny jest WebGL.

Regał WebGL

Przeglądaj ponad 10 000 okładek książek dzięki tej biblioteczce WebGL, opracowanej przez zespół Google Data Arts. Możesz również wyszukiwać według tematu, otwierać model 3D każdego z nich, klikając go, i pobierać książki w telefonie za pomocą kodu QR.

WebGL Globe

Fajny eksperyment zespołu Google, który sprawia, że czujesz się jak w przyszłości dzięki swojej pięknej, eleganckiej i futurystycznej wizualizacji danych.

Światowe loty

Inna atrakcyjna wizualnie aplikacja do wizualizacji danych, która wizualizuje główne trasy lotów, wygląda obiecująco!

Filtr obrazu WebGL

Aplikacja do edycji grafiki z WebGL? To nigdy nie jest niemożliwe. Co najważniejsze, jest szybki i płynny!

Woda WebGL

“Kałuża wody z odbiciem, załamaniem, substancją żrącą i okluzją otoczenia. Pula jest symulowana z polem wysokości i zawiera kulę, która może oddziaływać z powierzchnią wody.”

Odbicie

Największym problemem, przed którym stanął WebGL, jest być może jego bezpieczeństwo. Według Wikipedii zespół ds. Gotowości na wypadek awarii komputera w Stanach Zjednoczonych (US-CERT) wydał ostrzeżenie, że WebGL zawiera wiele możliwych problemów z bezpieczeństwem, które mogą prowadzić do dowolnego wykonania kodu, odmowy usługi, a nawet ataków między domenami. Oznacza to bardzo, bardzo dla właściciela strony.

Jednak Khronos Group, która obejmuje Mozillę i Google, sugeruje możliwe rozwiązania i przyszłe podejście do rozwoju, aby wzmocnić bezpieczeństwo przed możliwymi zagrożeniami bezpieczeństwa. Mam nadzieję, że problemy mogą zostać zmniejszone, a nawet rozwiązane w przyszłości, ponieważ WebGL ma tak wiele możliwości, jak pokazali utalentowani i profesjonalni programiści!

Daj nam znać, który eksperyment Cię najbardziej zdumiewa i oczywiście poproś nas, jeśli go masz!

Więcej powiązanych postów:

HTML5 Website: 48 potencjalnych demonstracji zabijania Flash
HTML5 Website: 15 kolejnych eksperymentów
Inspirujące demonstracje animacji CSS3