Почти все современные компьютеры и большинство смартфонов имеют мощные графические процессоры, чаще всего даже мощнее, чем основные процессоры. Но до недавнего времени вся эта мощь не использовалась в веб-страницах. Причина проста: не было нормальных графических библиотек, низкая скорость передачи данных и низкое качество графики, в основном используемой только в 2D.
Но все изменилось с выходом WebGL в последних версиях Firefox и Chrome. API canvas
из HTML5.
Так как в Apple следят за стандартами, то ожидаем выхода Safari с поддержкой WebGL. В компании Opera уже тестируют свою собственную версию, ну и как всегда тормозит Microsoft.
И так, если у вас есть последний браузер (Chrome или Firefox), вы можете посмотреть подборку лучших WebGL сайтов.
1. ROME: "3 Dreams of Black"
Видео лучше всего работает в 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 контента достаточно трудны в освоении и использовании. Поэтому
5. Chemdoodle
Как и следовало ожидать, WebGL сейчас используется в основном в различных примерах и реальных инструментов пока нет. Но
6. Biodigital Human
Другой прекрасный пример на медицинскую тему — это Браузер тела человека. Вы можете увидеть скелет или кровеносную систему.
Просто нажмите кнопку и вы узнаете немного больше о строении людей.)
7. Shader Toy
Хотите чего-нибудь более увлекательного? Как на счет
Это один из тех пакетов, где собраны примеры из серии ОМГ-как-оно-работает-на-таком-маленьком-количестве-кода.
8. FractalLab
Том Беддард aka
Осторожно: если у вас не очень быстрая видеокарта, то приложение может сильно тормозить.
9. Musical Solar System
Джейкоб Сейделин создал за 18 месяцев с помощью WebGL
10. Chrysaora
Еще одна прекрасная сцена из подводного мира создана Александром Родиком. Его приложение Chrysaora — это плавающая в море медуза. Весь подводный мир в приложении моделируется полностью на компьютере.
Также посмотрите
11. Angry Birds
Эти старые добрые Злые птички уже мелькали в этом блоге.
Просто установите и наслаждайтесь игровым процессом!
12. PacMaze
Игра PacMaze может показаться вам знакомой)))...
13. CycleBlob
Еще один новый проект
14. Quake 3
Увы, эта
Тестируем)
15. Remixing Reality
Отойдем от игр и посмотрим что создали
А создали они Ремиксовую реальность — брильянтовый пример видео-обработки в браузере.
Вот они первые шаги к дополненной реальности в сети.
16. WebGL aquarium
Вы наверное помните заставку аквариума на рабочий стол.
Но кто бы мог подумать, что можно создать настоящий
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.
2.
3. Lee Perry-Smith's head
4.
19. GLGE
Еще один именитый фреймворк для создания WebGL сайтов — программа
20. OurBricks
И наконец, если вы строите свой 3D мир, то вам наверное нужно его как-то наполнять. В этом вам поможет
См. также примеры интерактивных 3D приложений, созданных с помощью отечественного WebGL движка Blend4Web.