30 WebGL експеримента, които са просто уау!

Ето, за очите ти ще дойде голямо оръдие с големи обещания. Тя е бърза и гладка. Той визуализира 3D, а с интеграцията анимира, познайте какво е това? HTML5? CSS3? Не, това се нарича WebGL, софтуерна библиотека, която разширява възможностите на JavaScript да генерира интерактивна 3D графика и да, без никакви приставки!

В тази витрина не искаме да ви показваме обикновените неща. Искаме да ви покажем 30 WebGL експерименткоито са внимателно изработени от професионални разработчици, за да станете свидетели на истинската мощ на WebGL, които не само вдъхновяват, но и ви позволяват да видите как може да изглежда бъдещето на мрежата. Отидете в бъдещето след кликване!

Препоръчително е да видите тези демонстрации, като използвате последната версия на версията на Google Chrome за програмисти. Повечето демонстрации поддържат последната версия на Firefox, Google Chrome и Safari.

3 Мечти на черно

Създаден от екипа на Google Data Arts, 3 Dreams of Black ви въвежда в 3 мечтания свят, изградени чрез комбинация от богати 2D рисунки и анимации, преплетени с интерактивни 3D последователности. Вижте чудесата за чудесно преживяване!

Анимирани частици

Този е наистина артистичен - анимирани животни, изградени от 3D частици, използващи флоат текстури и рамкови буферни обекти. Повече изненада, ако преместите мишката!

аквариум

Симулирайте подводна среда? Това не е проблем за WebGL. Демото разполага с 3D модели с висококачествени текстури, анимация на сцената, анимация на пиксел шейдъри, отражения, пречупване и каустика, само за реализиране на подводна сцена.!

Азатиопрингг

Вероятно най-епичната демо WebGL, каза достатъчно. Напред към автора Йохен Вилхелми.

Екскурзия с атракциони

Ако искате да изпитате 3D, това е най-добрата демонстрация за вас, също така се медитирайте с огромната красота на WebGL-генерираните графики, използвайки формулата на Martin's Hopalong..

медуза

“Процедурно моделиране с Side FX Houdini. Експортирани с Python износител в json формат. Текстура боядисана с помощта на Autodesk Mudbox. Анимирани с вертекс шейдър.”

Chrysaora

Това не е обикновена анимационна демонстрация, но включва динамично симулирани скелети, частична симулация и синхронизация от страна на сървъра с WebSocket, система за частици с камера, обемна светлинна ефекта и mjs матрична библиотека на Владимир Вукичевич. Накратко, невероятен експеримент със сложни творби.

HelloRacer

Представяме ви интерактивна симулация на висок клас, която ви носи изключително HelloEnjoy.

Материали: автомобили

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 и Chevrolet Camaro във вашия браузър. Избери си язденето и се наслади на гледката. По дяволите, можете дори да изберете техните цветове.

Автомобили WebGL

Бъдещето на серията Need For Speed ще бъде в уеб браузъра. Твърде амбициозни? Разбира се, ако не сте посетили тези автомобили, които се визуализират с динамични куб карти, карти на сянка и ефекти след обработка.

Моят робот нация

Е, ако фигурата не е любима, тогава се опитайте да изградите хладен и очарователен робот и да се покажете на приятеля си! Можете дори да харчите парите си, за да го направите реална сделка.

Pacmaze

Какво ще кажете за 3D игра Pac-Man? Графиката и геймплеят са хубави и най-важното е забавно!

Червен качулка за стрелба

Сега тук е сладко… или кърваво. Това не е нищо друго освен една интересна игра, която да ви покаже възможностите на WebGL, когато тя се развива в играта отгоре надолу. Забавно и забавно със сигурност.

TankWorld

Предполагам, че е приятна игра с танк шутър с оръжия за използване и карти за изследване, а в някои нива можете дори да получите хеликоптер, за да опознаете света! Това е нещо повече от обикновена игра, а графиката изглежда удобно!

Pulpo

Най-добрият пример за това как простите графики и анимация могат да впечатлят хората, когато са направени правилно.

повърхност

Разгледайте Surface, елегантен и вдъхновяващ експеримент, направен от Paul Lewis. Можете не само да променяте величината, еластичността, автоматичната орбита, кабелната рамка и дъждовните капки в демонстрацията, но и да плъзгате и пускате свои собствени изображения в нея, за да почувствате ефекта по различен начин..

Снимка на частици

Просто пуснете любимата си снимка в тази демонстрация и се насладете на това, че тя се взривява в тон частици и се взаимодейства с някаква форма на магнетизъм. Експериментът е комбинация от четири технологии: HTML5 - Drag and Drop (Плъзгане и пускане), File API, Canvas и WebGL.

Rutt-Етра-Izer

Rutt-Etra-Izer е WebGL емулация на класическия видеосинтезатор Rutt-Etra. Демото ви позволява да поставите свои собствени изображения вътре и да ги манипулирате. С тези неща, 2D изображението може дори да изглежда като 3D!

Танцът на колебанията

Една проста, но забележителна демонстрация, която показва колко течна може да бъде WebGL, с анизотропен светлинен шейдър и деформиране на въртележки.

Ultranoir

Друг голям експеримент, показващ потенциала на WebGL. Nouvelle Vague предлага поетично и интерактивно 3D изживяване в реално време на базата на Twitter и това, което виждате, ще бъдат туитове, които се извършват с различни летящи обекти. Със сигурност артистичен начин да се насладите на туитове.

Вълнообразна маймуна

“Този път просто исках да направя тест, за да видя колко позиции и нормали на върховете мога да актуализирам директно в JavaScript. Оказа се, че 2,000 е съвсем чудесно :) Аз също добавих малко картографиране на околната среда. И странност. Винаги добавяйте странности.”

Видео FX

Впечатляващо приложение, направено от Даниел Петърсън, което ви позволява да приложите няколко едновременни ефекта на последваща обработка към трейлъра на Happy Feet 2. \ t Опитайте и се забавлявайте!

Voxels Liquid

3D представяне на класическия 2D алгоритъм за водния ефект, също ви показва как е интерактивен WebGL.

WebGL

Прегледайте над 10 000 корици на книги с тази библиотека на WebGL, разработена от екипа на Google Data Arts. Можете също да търсите по темата, да отваряте всеки 3D модел, като кликнете върху него и да изтеглите книги на телефона си с QR кода.

WebGL Globe

Готин експеримент на екипа на Google, който всъщност ви кара да се чувствате като в бъдеще с красивата си, елегантна и футуристична визуализация на данните.

Световни полети

Друга визуална ап визуализация на данни, която визуализира основните авиокомпании полети, изглежда обещаващо!

Филтър за изображения на WebGL

Приложение за графичен редактор с WebGL? Никога не е невъзможно. Най-хубавото е, че е бързо и гладко!

WebGL Вода

“Басейн с вода, отразен с отражение, пречупване, каустика и околна оклузия. Басейнът е симулиран с височина и съдържа сфера, която може да взаимодейства с повърхността на водата.”

размисъл

Най-големият проблем, с който се сблъсква WebGL, е може би сигурността му. Според Уикипедия екипът за американска компютърна аварийна готовност (US-CERT) издава предупреждение, че WebGL съдържа множество възможни проблеми със сигурността, които могат да доведат до произволно изпълнение на код, отказ на услуга и дори атаки между домейни. Това означава много, много за собственика на сайта.

Въпреки това, групата на Khronos, която включва Mozilla и Google, предлага възможни решения и подход за бъдещо развитие, за да засили сигурността срещу възможните заплахи за сигурността. Надяваме се, че проблемите могат да бъдат намалени и дори да бъдат решени в бъдеще, тъй като WebGL има толкова много възможности, които са показани от талантливите и професионални програмисти!

Кажете ни кой експеримент ви учудва най-много, и разбира се, покажете ни, ако имате такъв!

Още сродни публикации:

HTML5 Уебсайт: 48 Потенциални демонстрации на Flash-Killing
HTML5 уебсайт: 15 допълнителни експеримента
Вдъхновяващ CSS3 Анимация Демо