20 WebGL сайтов, которые взорвут ваш мозг

Почти все современные компьютеры и большинство смартфонов имеют мощные графические процессоры, чаще всего даже мощнее, чем основные процессоры. Но до недавнего времени вся эта мощь не использовалась в веб-страницах. Причина проста: не было нормальных графических библиотек, низкая скорость передачи данных и низкое качество графики, в основном используемой только в 2D.

Но все изменилось с выходом WebGL в последних версиях Firefox и Chrome. API WebGL основан на хорошо известном графическом стандарте OpenGL, дающим доступ через JavaScript плагины к графическому аппаратному обеспечению. Сама 3D графика выводится с помощью элемента canvas из HTML5.

Так как в Apple следят за стандартами, то ожидаем выхода Safari с поддержкой WebGL. В компании Opera уже тестируют свою собственную версию, ну и как всегда тормозит Microsoft.

И так, если у вас есть последний браузер (Chrome или Firefox), вы можете посмотреть подборку лучших WebGL сайтов.

1. ROME: "3 Dreams of Black"

"3 Dreams of Black" — полуинтерактивный фильм Криса Милка, в котором используются технологии Google и других компаний. В фильме звучит песня "Black" из альбома ROME. Он проведет вас через три мира-мечты, в которых сопряжены 2D и 3D компьютерная графика и видео.
Видео лучше всего работает в Chrome.

2. Flight of the Navigator

Flight of the Navigator — музыкальный видеофильм, который рендерится в реальном времени с помощью JavaScript и WebGL. Вы можете почитать о нем в блоге Дэвида Хамфри.

3. No Comply

No Comply — еще один пример WebGL от команды Mozilla Audio API, в котором совмещена графика и видео из игр 1980-х годов. К сожалению в этом примере используется нестандартные особенности аудио из Firefox, поэтому пример будет работать только в нем. Больше об этой технологии вы можете прочитать в статье Поля Руже.

4. 3Dtin

Большинство инструментов для создания 3D контента достаточно трудны в освоении и использовании. Поэтому 3Dtin и отличается от таких инструментов простотой в освоении. С помощью него можно создавать формы с воксель-ориентированным(3D-пиксельным) подходом.

5. Chemdoodle

Как и следовало ожидать, WebGL сейчас используется в основном в различных примерах и реальных инструментов пока нет. Но Chemdoodle — исключение из правил. Научная компания iChemLabs собрала этот инструмент на основе WebGL для просмотра молекул в веб-страницах. Демонстрационный пример позволяет выбрать один из лекарственных препаратов и просмотреть его химическую формулу в 3D.

6. Biodigital Human

Другой прекрасный пример на медицинскую тему — это Браузер тела человека. Вы можете увидеть скелет или кровеносную систему.
Просто нажмите кнопку и вы узнаете немного больше о строении людей.)

7. Shader Toy

Хотите чего-нибудь более увлекательного? Как на счет Shader Toy?
Это один из тех пакетов, где собраны примеры из серии ОМГ-как-оно-работает-на-таком-маленьком-количестве-кода.

8. FractalLab

Том Беддард aka subblue хорошо известен своими 3D фракталами. Его продукт — FractalLab показывает все вычисления в реальном времени.
Осторожно: если у вас не очень быстрая видеокарта, то приложение может сильно тормозить.

9. Musical Solar System

Джейкоб Сейделин создал за 18 месяцев с помощью WebGL Музыкальную солнечную систему. В приложении собраны: астрономия, техно-музыка и ужасная шутка.)

10. Chrysaora

Еще одна прекрасная сцена из подводного мира создана Александром Родиком. Его приложение Chrysaora — это плавающая в море медуза. Весь подводный мир в приложении моделируется полностью на компьютере.
Также посмотрите видео о том, как она управляется с помощью Kinect!

11. Angry Birds

Эти старые добрые Злые птички уже мелькали в этом блоге.
Просто установите и наслаждайтесь игровым процессом!

12. PacMaze

Игра PacMaze может показаться вам знакомой)))...

13. CycleBlob

Еще один новый проект CycleBlob основан на старой доброй игре Трон.

14. Quake 3

Увы, эта WebGL демка мало играбельна, зато графически потрясающа, а конвертированный уровень из Quake 3, кроме того еще и дополнен музыкой.
Тестируем)

15. Remixing Reality

Отойдем от игр и посмотрим что создали Илмари Хейккинен и Патрик Кинг.
А создали они Ремиксовую реальность — брильянтовый пример видео-обработки в браузере.
Вот они первые шаги к дополненной реальности в сети.

16. WebGL aquarium

Вы наверное помните заставку аквариума на рабочий стол.
Но кто бы мог подумать, что можно создать настоящий WebGL аквариум.

17. 3DF33D

3DF33D — это тот же самый YouTube, только для 3D видео. По умолчанию сервис показывает видео в 2D, но если нажать кнопку Current 3D mode, то можно попробовать различные режимы 3D, в том числе и красно-синий «анаглиф».

18. three.js

И последние три сайта о том, как создавать свои WebGL страницы. У WebGL очень урезанный программный интерфейс, что делает его намного проще во внедрении для создатели браузеров, но для веб-разработчиков это настоящий кошмар, особенно для тех, кто впервые столкнулся с этой технологией.

Большое количество времени было потрачено на создание фреймворков, которые бы облегчили жизнь программистам сайтов, и самый известный из них — это three.js, созданный человеком Mr.doob.

Этот фреймворк использовался при создании "3 Dreams of Black" (в котором Mr.doob был техническим директором), и сейчас это самый популярный выбор веб-программистов, изучающих 3D впервые. Существует тонны великолепных примеров его использования.

Вот лучшие:
1. wobble dance
2. HelloRacer
3. Lee Perry-Smith's head
4. Fresnel shader

19. GLGE

Еще один именитый фреймворк для создания WebGL сайтов — программа GLGE . Она мало ориентирована на примеры, а больше на игры, где нужно передвигать 3D сцену. Хороший пример — игра Wloom, созданная неким Pl4n3.

20. OurBricks

И наконец, если вы строите свой 3D мир, то вам наверное нужно его как-то наполнять. В этом вам поможет OurBricks от Katalabs, являющийся великолепным источником лицензированного 3D контента.


Один комментарий на “20 WebGL сайтов, которые взорвут ваш мозг

Оставить комментарий