Webgl примеры: 20 WebGL сайтов, которые взорвут ваш мозг
20 WebGL сайтов, которые взорвут ваш мозг
Почти все современные компьютеры и большинство смартфонов имеют мощные графические процессоры, чаще всего даже мощнее, чем основные процессоры. Но до недавнего времени вся эта мощь не использовалась в веб-страницах. Причина проста: не было нормальных графических библиотек, низкая скорость передачи данных и низкое качество графики, в основном используемой только в 2D.
Но все изменилось с выходом WebGL в последних версиях Firefox и Chrome. API WebGL основан на хорошо известном графическом стандарте OpenGL, дающим доступ через JavaScript плагины к графическому аппаратному обеспечению. Сама 3D графика выводится с помощью элемента canvas из HTML5.
Так как в Apple следят за стандартами, то ожидаем выхода Safari с поддержкой WebGL. В компании Opera уже тестируют свою собственную версию, ну и как всегда тормозит Microsoft.
И так, если у вас есть последний браузер (
1. ROME: «3 Dreams of Black»
«3 Dreams of Black» — полуинтерактивный фильм Криса Милка, в котором используются технологии Google и других компаний. В фильме звучит песня «Black» из альбома ROME. Он проведет вас через три мира-мечты, в которых сопряжены 2D и 3D компьютерная графика и видео.
Видео лучше всего работает в Chrome.
Flight of the Navigator — музыкальный видеофильм, который рендерится в реальном времени с помощью JavaScript и
3. No Comply
No Comply — еще один пример WebGL от команды Mozilla Audio API, в котором совмещена графика и видео из игр 1980-х годов. К сожалению в этом примере используется нестандартные особенности аудио из Firefox, поэтому пример будет работать только в нем. Больше об этой технологии вы можете прочитать в статье Поля Руже.
4. 3Dtin
Большинство инструментов для создания
5. Chemdoodle
Как и следовало ожидать, WebGL сейчас используется в основном в различных примерах и реальных инструментов пока нет. Но Chemdoodle — исключение из правил. Научная компания iChemLabs собрала этот инструмент на основе WebGL для просмотра молекул в веб-страницах. Демонстрационный пример позволяет выбрать один из лекарственных препаратов и просмотреть его химическую формулу в
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
Еще один именитый фреймворк для создания
20. OurBricks
И наконец, если вы строите свой 3D мир, то вам наверное нужно его как-то наполнять. В этом вам поможет OurBricks от Katalabs, являющийся великолепным источником лицензированного 3D контента.
Возможно, Вам будет интересно ↓↓↓
8 классных и впечатляющих WebGL примеров
WebGL технологии открывают для разработчиков целый мир возможностей, которые можно реализовать прямо в окне браузера. Сегодня я хочу представить Вам 9 крутых примеров, которые Вам точно понравятся и Вы их ни в коем случае не должны пропустить!
WebGL вода
Это имитация воды, которая сделана с помощью WebGL технологий. Вы можете поднять белый мяч и бросить его обратно в воду. Таким образом можно наблюдать на сколько реалистичны круги на воде и брызги от мяча.
Демо
Белые квадраты — Fizzy Cam
Это приложение использует веб — камеру на Вашем устройстве. Таким образом вырисовывается картина которую видит камера из множество блоков, которые находятся на странице, довольно очень интересно смотрится.
Листья
Реалистичные листья которые подхватывает и уносит вдаль ветер. Вроде бы просто всё смотрится, но узнавая, что это реализовано в веб браузере, становится довольно интересно и необычно.
Демо
Научи меня летать
Мини игра, которая сделан в веб браузере на WebGL технологиях. В прочем очень просто, и сделано для того чтобы показать, на что способны новейшие технологии. Очень круто.
Демо
Большой глаз
В этом демо показан большой глаз, который следит за курсором. А если у Вас ещё и играет музыка, он пульсирует и изменяет цвета. Немного приводит в шок 🙂 но и впечатляет не меньше.
Демо
Частицы
Крутая анимация частиц в веб — браузере, смотрится очень красиво и необычно. Также Вы можете добавить количество частиц и покрутить анимацию.
Демо
Глобус
Смотрится необычно и очень красиво, плюс присутствует анимация. Как будто из земного шара торчат иголки указывая нам на разнообразные события.
Демо
Google карты в кубе
Это игра в которой мы можем кинуть шарик на карты Гугл и управлять им проходя различные препятствия. Это хороши творческий подход к использованию карт.
Демо
Спасибо http://davidwalsh.name
Классные примеры применения WebGL в веб-дизайне
Со слов Википедии, WebGL — программная библиотека для языка программирования JavaScript, позволяющая создавать на JavaScript интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузеров. Эта технология получила широкое распространение в веб-дизайне, и сегодня мы собрали интересные примеры из этой области.
50cinquante.be
codepen.io
computerizedforms.com
particle-love.com
changegout.com
yiwenl.github.io
experience.mausoleodiaugusto.it
bear71vr.nfb.ca
airforce.com
weather.withspotify.com
immersive-g.com
en.studiogusto.com
garden-eight.com
great.kaspersky.com
booreiland.amsterdam
moodmix.londongrammar.com
stopoverfishing.eu
team-alpine-matmut-challenge.fr
supergreat.jp
konsernsjefen2017.arkivert.no
Смотрите также:
- Эффекты наведения мыши в веб-дизайне
- Увлекательные интерактивные эффекты в веб-дизайне
- Красивые эффекты скроллинга в веб-дизайне
14 прекрасных примеров использования WebGL
Июн
25
2011
WebGL, о котором много говорят последнее время, появился совсем недавно. Еще меньше времени прошло с тех пор, как он стал стандартом. Давайте пока отбросим разговоры о безопасности и посмотрим на самые интересные примеры использования WebGL уже сегодня.
Итак, WebGL позволяет получать доступ к ресурсам видеокарты для отображения в реальном времени 3D-графики на интернет-страницах. На данный момент, в финальных версиях всей браузеров поддержка WebGL имеется только в Firefox и Chrome.
На данный момент известно, что над имплементацией данного стандарта в свои браузеры работают Opera и Apple. Явно от реализации уклонилась пока Microsoft, но, скорее всего, передумают и они.
Давайте же посмотрим на реальные примеры возможностей WebGL уже сегодня. Для этого нам понадобятся браузеры Firefox или Chrome, желательно последние версии видеокарт и более-менее современные карты. На части примеров работает и экспериментальная версия Opera, но доступна она только для платформы Windows и для видеокарт Ati, поддерживающих драйвера с версии ATI Catalyst 10.7, Nvidia — с 259.31. В любом случае, ваши карты должны поддерживать OpenGL 2.x.
Демо-примеры работы WebGL
ROME: «3 Dreams of Black»
Адрес: http://www.ro.me/
Мы уже писали про этот проект. Это музыкальный клип, с элементами интерактива. Сюжет проходит через три мечты. Используется как 2D, так и 3D графика.
Подробней про проект можете почитать в статье по ссылке выше.
Работает: в Firefox и Chrome. Но, оптимизировано больше под Chrome.
Google Body Browser
Адрес: http://bodybrowser.googlelabs.com/
Интерактивный анатомический атлас человека. Позволяет бегунком слева отображать тело человека «по уровням». Объект можно удалять и приближать, а также перемещать мышью.
Работает: Firefox, Opera, Chrome.
Google Cow
Адрес: http://bodybrowser.googlelabs.com/moo.html
Продолжение работы проекта Google Body. На этот раз демонстрация строения тела коровы. Данный пример появился буквально на днях. Просмотр состава тела буренки происходит по тому же принципу, что и прошлый пример с человеком.
Работает: Firefox, Opera, Chrome.
The Biodigital Human
Адрес: http://www.biodigitalhuman.com/
Продолжая тему анатомических атласов, еще один интересный пример. Для включения или отключения тех или иных систем тела человека достаточно щелкать тумблеры на панели слева. Внизу находится панель по управлению перемещением объекта.
По мнению автора текста, смотрится даже интересней, чем аналог от Google.
Работает: Firefox, Chrome, в Opera объект не отображается.
Chemdoodle
Адрес: http://web.chemdoodle.com/demos/molgrabber-3d
iChemLabs — компания, занимающаяся визуализацией научных данных. В данном примере демонстрации WebGL пользователь может выбирать различные лекарства и просматривать их 3D-модели химической структуры. Слева от основного окна указаны способы управления при просмотре молекул.
Работает: Firefox, Opera, Chrome.
No Comply
Адрес: http://mozillademos.org/demos/nocomply/demo.html
Демо WebGl от команды, занимающейся Mozilla Audio API. Состоит из смешивания видео и графики с 8-битных компьютерных игр. Использует новые возможности браузера Firefox, качаемые аудио.
Работает: Firefox.
FractalLab
Адрес: http://fractal.io/
Многие из вас, скорее всего, раньше сталкивались с програмками для компьютера, которые позволяли рассчитывать и получать красивейшие фракталы. Теперь то в 3D, благодаря WebGL.
Имейте ввиду, что для данного демо требуется производительная видеокарта. Иногда, при формировании фрактала браузер может как бы подвисать, это не так, стоит немного подождать.
Работает: Firefox, Chrome.
Angry Birds
Адрес: http://chrome.angrybirds.com/
Angry Birds. В принципе можно ограничиться первым предложением. Безумно популярная игра появилась в реализации прямо на интернет-странице. Из адреса понятно, для какого браузера был создан данный проект.
Работает: Firefox, Chrome. В Opera, сразу после открытия chrome.angrybirds.com все прекрасно загружалось и работало. Теперь при заходе пишет, что браузер не поддерживается и надо скачать Chrome. Привет компании Google.
PacMaze
Адрес: http://pacmaze.com/
Еще одна игра, использующая наш стандарт в своей работе. Из скриншота можно понять, на какую знаменитую игру она похожа.
Работает: Firefox, Chrome.
CycleBlob
Адрес: http://cycleblob.com/
В данной игре вы управляете змейкой. На игровом поле находятся и другие змейки. Вы должны все время двигаться, с целью не врезаться в свой след или след своих противников, но заставив их сделать это. Чем выше уровень — тем больше соперников.
Работает: Chrome, Firefox.
The WebGL aquarium
Адрес: http://webglsamples.googlecode.com/hg/fishtank/fishtank.html
Ставшая уже знаменитой демонстрация.
Слева отображается количество кадров в секунду. Здесь же вы можете выставить число рыб, которые будут плавать в бассейне.
Работает: Opera, Firefox, Chrome.
GLGE
Адрес: http://pl4n3.blogspot.com/2011/06/wloom-webgl-game-work-in-progress-5.html
Здесь игрок может бегать по игровому полю, сражаться с инопланетными гадами. И собирать шарики. Присутствует звуковое сопровождение.
Работает: Firefox, Chrome, Opera.
Ourbricks
Адрес: http://ourbricks.com/
Ресурс, на котором вы можете загружать свои 3D-персонажи. Персонажи анимированы. Для отображения используется…ну, вы сами поняли уже что. 😉
Работает: Opera, Firefox, Chrome.
Remixing Reality
Адрес: http://mozillademos.org/demos/remixingreality/demo.html
Взаимодействие видео с 3D-графикой и JavaScript-объектами. Первые шаги к расширенной реальности в Интернете.
Работает: Firefox, Chrome.
WebGL — Веб-технологии для разработчиков
WebGL (Web Graphics Library) — программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .
Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.
Разработка
|
|
Совместимость с браузерами
WebGL 1
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
WebGLRenderingContext | Chrome Полная поддержка 9 | Edge Полная поддержка 12
| Firefox Полная поддержка 4 | IE Полная поддержка 11
| Opera Полная поддержка 12 | Safari Полная поддержка 5.1 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка Да | Opera Android Полная поддержка 12 | Safari iOS Полная поддержка 8 | Samsung Internet Android Полная поддержка 1.5 |
Легенда
- Полная поддержка
- Полная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
WebGL 2
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
WebGL2RenderingContext | Chrome Полная поддержка 56 | Edge Полная поддержка 79 | Firefox Полная поддержка 51 | IE Нет поддержки Нет | Opera Полная поддержка 43 | Safari Нет поддержки Нет | WebView Android Полная поддержка 58 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 51 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
Замечания по Gecko
Отладка и тестирование WebGL
Начиная с Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:
webgl.min_capability_mode- Свойство типа Boolean которое, при значении
trueпозволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значениеfalse. webgl.disable_extensions- Свойство типа Boolean которое, при значении
trueотключает все расширения WebGL. Значением по умолчанию для это свойства является значениеfalse.
WebGL 3D — Создание модели
Пожалуй, эту статью нельзя назвать самой востребованной, но мне она показалось интересной, поэтому я решил её написать. Не то, чтобы я рекомендую делать так, как описано в статье, скорей мне хочется продемонстрировать некоторые вещи, касающиеся создания 3D-моделей в WebGL.
Однажды меня кто-то спросил, как сделать модель кегли для боулинга в WebGL. Правильным ответом было бы «Используйте программу для 3D-моделирования, наподобие Blender, Maya, 3D Studio Max, Cinema 4D и т.д.». Используйте её для моделирования кегли, затем экспортируйте модель и загрузите её в своём приложении. (Относительно простым форматом является OBJ).
Но спустя некоторое время я подумал — а что, если человеку нужно было сделать собственную библиотеку для моделирования?
У меня появилось несколько идей. Одна из них — сделать цилиндр, а затем сузить его в нужных местах через синусоиду. Проблема в том, что вы не получите необходимой плавности в верхней части. Обычный цилиндр состоит из нескольких равноудалённых колец, но в местах изгибов необходимо больше колец, чтобы достичь нужной плавности.
В пакете для моделирования вы бы начали с создания двумерного силуэта, точнее с кривой линии, соответствующей грани двумерного силуэта. А затем создали 3D-объект на основе силуэта. Этого можно достичь, вращая силуэт вокруг определённой оси, создавая в процессе вращения точки фигуры. Эта техника позволяет легко создать любой закруглённый объект вроде шара, стакана, бейсбольной биты, бутылки, лампочки и т.д.
Как же нам сделать это? Для начала нужно получить кривую. Затем нам необходимо получить точки этой кривой. Затем, вращая эти точки вокруг какой-то оси с помощью математики матриц, мы построим треугольники.
Самой распространённой кривой в компьютерной графике, похоже, является кривая Безье. Если вы когда-либо редактировали кривую в Adobe Illustrator, или Inkscape, или Affinity Designer, или в других похожих программах, то вы имели дело с кривой Безье.
Кривая Безье (кубическая кривая Безье, если быть точным) формируется на основе 4 точек — 2 конечные точки и 2 «контрольные точки».
Вот эти 4 точки:
Возьмём число между 0 и 1 (назовём его t), где 0 = начало, а 1 —
конец. Затем вычислим соответствующие точки t между каждой парой
точек P1 P2, P2 P3, P3 P4.
Другими словами, при t = .25, вы вычислим 25% пути от точки P1 до P2, затем 25% пути от точки P2 до P3 и, наконец, 25% пути
от точки P3 до P4.
Потяните за слайдер для регулировки t, также с помощью мыши можно
перемещать точки P1, P2, P3 и P4.
Далее проделаем то же самое для полученных точек — вычислим t между
точками Q1 Q2 и Q2 Q3.
Наконец, находим t для точек R1 R2.
Положение красной точки задаёт кривую.
Это и есть кубическая кривая Безье.
Стоит заметить, что хотя описанная выше интерполяция по созданию 3 точек из 4, затем 2 точек из 3 и, наконец, одной точки из 2 делает своё дело, такой подход нельзя назвать общепринятым. Вместо этого кто-то разобрался во всей математике и упростил всё до следующей формулы:
invT = (1 - t)
P = P1 * invT^3 +
P2 * 3 * t * invT^2 +
P3 * 3 * invT * t^2 +
P4 * t^3
где P1, P2, P3, P4 — точки из примера выше, а P —
красная точка.
В программах по работе с векторными 2D-изображения вроде Adobe Illustrator при создании более длинных кривых на самом деле создаётся несколько маленьких кривых из 4 точек, рассмотренных нами выше. По умолчанию большинство программ фиксируют контрольные точки вокруг общих начальной и конечной точки так, чтобы контрольные точки всегда были противоположны друг другу относительно общей точки.
На следующем примере при перемещении
Оптимизируем ассеты для WebGL правильно / Хабр
Так часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.Геометрия / Меши
Правильная геометрия — это ключ к производительности любого трехмерного приложения. Чтобы получить ровный шейдинг и быстрый рендеринг, вы должны держать полигональную сетку как можно более равномерной. В самом начале работы вы должны определиться с уровнем детализации вашей сцены и придерживаться его при моделировании.
При моделировании складок лучше использовать шейдинг-группы, а не добавлять больше полигонов.
При работе с цилиндрической моделью постарайтесь уменьшить количество полигонов ближе к центру.
Не перегружайте модель дополнительными деталями, которые пользователь все равно не увидит. Как показано на рисунке ниже, край, выделенный оранжевым цветом, определяет уровень детализации для всей модели, поэтому вы можете использовать его в качестве ориентира.
Карты нормалей
Распространенным способом оптимизации производительности WebGL является уменьшение количества полигонов путем создания карт нормалей.
Однако карты нормалей могут создавать видимые артефакты из-за ограниченной точности 8-битного изображения. Возможные решения этой проблемы показаны на картинке ниже, но их довольно сложно осуществить: использование изображения с более высокой точностью приведет к увеличению размера загружаемого файла, в то время как второй подход довольно трудоемкий и не гарантирует чистого результата. Третий подход иногда срабатывает в случае с шероховатыми поверхностями. В этом случае мы рекомендуем добавлять шум к вашим материалам, чтобы уменьшить возможные артефакты.
Исходя из нашего опыта, мы сделали вывод, что лучшим решением для глянцевых объектов является использование геометрии средней сложности с гладкими вертексными группами, причём без использования какой-либо карты нормалей.
Наконец, вот несколько случаев, когда вы можете использовать карту нормалей, а не очень подробный меш:
- Ваш объект состоит из множества различных поверхностей.
- У вас шероховатая поверхность, которая не дает видимых дефектов.
- Ваши объекты такие отдаленные или маленькие, что пользователь не в состоянии заметить какие-либо артефакты.
Текстурирование
Вот типичный набор текстур, используемых в современной PBR модели освещения (и не только).
Как видите, большинство из них черно-белые. Поэтому вы можете комбинировать ч/б текстуры в RGBA-каналах одного изображения (всего до 4-х карт на одно изображение).
Если у вас есть только одна ч/б текстура, вы можете объединить ее с любой существующей текстурой RGB, упаковав ее в альфа-канал. Наконец, если у вас нет изображения для объединения, вы можете преобразовать ваше черно-белое изображение в формат jpeg со сжатием 95% и включенным режимом оттенков серого.
Еще один способ уменьшить размер текстуры — оптимизировать UV-развёртку. Чем компактнее ваша развертка, тем эффективнее ваше изображение будет использовать пространство текстуры. Это позволяет вам иметь более легковесные изображения без потери качества.
Вертексные цвета
Использование вершинных цветов вместо изображений — это эффективный способ ускорить загрузку и повысить общую производительность ваших WebGL-приложений. Единственный недостаток — вам придётся добавить несколько дополнительных ребер в вашу модель, чтобы разделить цвета одних и тех же вершин.
Вы также можете использовать цвета вершин для определения шероховатости, металличности или зеркальных поверхностей или любых других параметров. Ниже вы можете увидеть пример такого материала, в котором используются только цвета вершин.
Количество шейдеров
Очень важно, чтобы на вашей сцене было меньше разных материалов / шейдеров. Компиляция шейдеров в WebGL приводит к длительной загрузке, что особенно заметно в Windows. Кроме того, если у вас меньше шейдеров, движок будет тратить меньше времени на переключение между ними во время рендеринга, тем самым улучшая производительность.
Если у вас есть похожие материалы, которые отличаются только текстурами, вы можете использовать только один материал и загружать / менять его текстуры во время выполнения. Для этого вы можете использовать JavaScript или взять визуальный редактор логики, имеющийся в некоторых WebGL-фреймворках. Это не только оптимизирует количество шейдеров, но и уменьшит количество изображений, загружаемых при запуске приложения.
Вот пример такой оптимизации. Все четыре разновидности одной шины представлены одним материалом, и настраиваются путем замены текстур.
Чтобы уменьшить количество шейдеров, вы можете объединить 2 или более простых материала в один более сложный. Этот метод особенно эффективен, если вы планируете переключаться между этими материалами (например, создаете приложение-конфигуратор), и не просто переключаться, а плавно и красиво анимировать переход от одного материала к другому.
Draw-вызовы
Кроме того, есть еще один важный аспект — количество Draw-вызовов (они же draw calls и вызовы отрисовки). Это примерно соответствует количеству отдельных объектов, если для каждого объекта назначен только один материал, в то время как объектам с несколькими материалами требуется еще больше вызовов для их визуализации.
Поэтому вы должны стремиться объединять сетки, когда это возможно, и использовать меньше уникальных материалов, чтобы уменьшить количество вызовов отрисовки и повысить производительность.
Если у вас есть анимированный объект, вы все равно можете соединить его части и использовать кости для анимации, что иногда даже удобнее при анимации отдельных объектов.
HDR освещение
Это помогает значительно улучшить производительность, если вы освещаете свою сцену только с помощью изображения HDR, без использования каких-либо источников света. Файл HDR может весить менее 1 Мб.
Тени
Используйте динамические тени только тогда, когда они помогают представить ваш объект в лучшем виде. На рисунке ниже показаны динамические тени из нашей демки Industrial Robot. Поскольку в этом приложении вращается сама модель, а не камера, тени не могут скрыть какую-либо часть объекта от пользователя и отлично подчёркивают форму робота. С другой стороны, такие же тени в демке Scooter будут затенять многие детали модели.
Отсюда мы делаем вывод: если ваш объект не перемещается в приложении, вы можете запечь карты теней и ambient occlusion и назначить их на плоскость, расположенную под объектом. Такое решение будет более производительным и выглядеть качественнее, чем при использовании динамических теней.
На этом всё. Если у вас есть ещё какие-нибудь советы, которые могут помочь с производительностью WebGL, пишите в комментариях.
20 WebGL сайтов, которые взорвут ваш мозг
Почти все современные компьютеры и большинство имеют мощные графические процессоры, чаще всего даже мощнее, чем основные процессоры. Но до недавнего времени вся эта мощь не использовалась на веб-страницах. Причина проста: не было нормальных графических библиотек, низкая скорость передачи данных и низкое качество графики, в основном используемая только в 2D .
Но все изменилось с выходом WebGL в последних версиях Firefox и Chrome .API WebGL основан на хорошо известном графическом стандарте OpenGL, доступном через JavaScript плагины к графическому аппаратному обеспечению. Сама 3D вывод выводится с помощью элемента холст из HTML5 .
Так как в Apple следит за стандартами, то ожидаем Safari с поддержкой WebGL . В компании Opera уже тестируют свою собственную версию, ну и как всегда тормозит Microsoft .
И так, если у вас есть последний браузер ( Chrome или Firefox ), вы можете посмотреть подборку лучших WebGL сайтов.
1. РИМ: "3 мечты о черном"
"3 мечты о черном" - полуинтерактивный фильм Криса Милка, в котором используются технологии Google и других компаний. В фильме звучит песня "Черный" из альбома ROME. Он проведет вас через три мира-мечты, в которых сопряжены 2D и 3D компьютерная графика и видео.
Видео лучше всего работает в Chrome .
2. Полет штурмана
Flight of the Navigator - музыкальный видеофильм, рендерится в реальном времени с помощью JavaScript и WebGL . Вы можете почитать о нем в блоге Дэвида Хамфри.
3. Не соответствует
No Comply - еще один пример WebGL от команды Mozilla Audio API , в котором совмещена графика и видео из игр 1980-х годов.В этом примере используется нестандартные особенности работы из Firefox , поэтому пример будет работать только в нем. Больше об этой технологии вы можете прочитать в статье Поля Руже.
4. 3Dtin
Основные инструменты для создания 3D контента достаточно трудны в освоении и использовании. Поэтому 3Dtin и отличается от таких инструментов простотой в освоении. С помощью него можно создать форму с воксель-ориентированным ( 3D -пиксельным) подходом.
5. Chemdoodle
Как и следовало ожидать, WebGL сейчас используется в основном в различных примерах и реальных инструментов пока нет. Но Chemdoodle - исключение из правил. Научная компания iChemLabs собрала этот инструмент на основе WebGL для молекул в веб-страницах. Демонстрационный пример позволяет выбрать один из лекарственных препаратов и просмотреть его химическую формулу в 3D .
6.Биодигитальный человек
Другой прекрасный пример на медицинскую тему - это Браузер тела человека. Вы можете увидеть скелет или кровеносную систему.
Просто нажмите кнопку и вы узнаете немного больше о строении людей.)
7. Игрушка шейдеров
Хотите чего-нибудь более увлекательного? Как на счет Shader Toy?
Это один из тех пакетов, где собраны примеры из серии ОМГ-как-оно-работает-на-таком-маленьком-количестве-кода .
8.FractalLab
Том Беддард aka subblue хорошо известен своими 3D фракталами. Его продукт - FractalLab показывает все вычисления в реальном времени.
Осторожно : если у вас не очень быстрая видеокарта, то приложение может сильно тормозить.
9. Музыкальная солнечная система
Джейкоб Сейделин создал за 18 месяцев с помощью WebGL Музыкальную солнечную систему. В приложении собраны: астрономия, техно-музыка и ужасная шутка.)
10. Chrysaora
Еще одна прекрасная сцена из подводного мира создана Александром Родиком. Его приложение Chrysaora - это плавающая в море медуза. Весь подводный мир в приложении моделируется полностью на компьютере.
Также посмотрите видео о том, как она управляется с помощью Kinect !
11. Злые птицы
Эти старые добрые Злые птички уже мелькали в этом блоге.
Просто установите и наслаждайтесь игровым процессом!
12.PacMaze
Игра PacMaze может показаться вам знакомой))) ...
13. CycleBlob
Еще один новый проект CycleBlob основан на старой доброй игре Трон.
14. Землетрясение 3
Увы, эта WebGL демка мало играбельна, зато графически потрясающа, конвертированный уровень из того же Quake 3 , кроме еще и дополнен музыкой.
Тестируем)
15. Ремикс реальности
Отойдем от игр и посмотрим что создали Илмари Хейккинен и Патрик Кинг.
А они создали Ремиксовую реальность - брильянтовый пример видео-обработки в браузере.
Вот они первые шаги к дополненной реальности в сети.
16. Аквариум WebGL
Вы наверное помните заставку аквариума на рабочий стол.
Но кто бы мог подумать, что можно создать настоящий WebGL аквариум.
17. 3DF33D
3DF33D - это тот же самый YouTube , только для 3D видео. По умолчанию сервис показывает видео в 2D , но если нажать кнопку Текущий режим 3D , то можно попробовать различные режимы 3D , в том числе и красно-синий «анаглиф».
18. three.js
И последние три сайта о том, как создать свои WebGL страницы. У WebGL очень урезанный программный интерфейс, что делает его намного проще внедрить для других браузеров, но для веб-разработчиков это настоящий кошмар, особенно для тех, кто впервые столкнулся с этой технологией.
Большое количество времени было потрачено на создание фреймворков, которые бы облегчили жизнь программистам, и самый известный из них - это три.js, созданный человек Mr.doob.
Этот фреймворк был использован при создании "3 Dreams of Black" (в котором Mr.doob был техническим директором), и сейчас это самый популярный выбор веб-программистов, изучающих 3D впервые. Существует тонны великолепных примеров его использования.
Вот лучшие:
1. wobble dance
2. HelloRacer
3. Голова Ли Перри-Смита
4. Шейдер Fresnel
19. GLGE
Еще один именитый фреймворк для создания WebGL сайтов - программа GLGE.Она мало ориентирована на примеры, а больше на игры, где нужно передвигать 3D сцену. Хороший пример - игра Wloom, созданная неким Pl4n3.
20. Наши кирпичи
И наконец, если вы строите свой 3D мир, то вам наверное нужно его как-то наполнять. В этом вам поможет OurBricks от Katalabs, являющийся великолепным пакетом лицензированного 3D контента.
Возможно, Вам будет интересно ↓↓↓
.WebGL - Веб-технологии для разработчиков
WebGL (Библиотека веб-графики) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-без использования плагинов. WebGL создает трехмерный график, вводит API, который построен на основе OpenGL ES 2.0, что позволяет использовать его в элементах canvas HTML5.
Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако необходима поддержка WebGL браузером, необходима также его поддержка графическим процессором клиента.
Разработка
|
|
Совместимость с браузерами
WebGL 1
Обновить данные о совместимости на GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android 9013 Android 9012 Chrome для браузера Android 9012 Chrome для браузера Android 9012 | Opera для Android | Safari на iOS | Samsung Internet | |||
WebGLRenderingContext | Chrome Полная поддержка 9 | Край Полная поддержка 12
| Firefox Полная поддержка 4 | IE Полная поддержка 11
| Opera Полная поддержка 12 | Safari Полная поддержка 5.1 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка Да | Opera Android Полная поддержка 12 | Safari iOS Полная поддержка 8 | Samsung Интернет Android Полная поддержка 1.5 |
Легенда
- Полная поддержка
- Полная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
WebGL 2
Обновите данные о совместимости на GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android 9013 Android 9012 Chrome для браузера Android 9012 Chrome для браузера Android 9012 | Opera для Android | Safari на iOS | Samsung Internet | |||
WebGL2RenderingContext | Chrome Полная поддержка 56 | Кромка Полная поддержка 79 | Firefox Полная поддержка 51 | IE Нет поддержки Нет | Opera Полная поддержка 43 | Safari Нет поддержки Нет | WebView Android Полная поддержка 58 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 51 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
Замечания по Gecko
Отладка и тестирование WebGL
Начало с Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:
-
webgl.min_capability_mode - Свойство типа Boolean которое, при значении
trueпозволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирована поддержка минимального набора функциональных возможностей, поддержка которой обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет на любом устройстве или браузере независимо от их возможностей.Значением по умолчанию для это свойство является значениемfalse. -
webgl.disable_extensions - Свойство типа Boolean которое, при значении
trueвключает все расширения WebGL. Значением по умолчанию для это свойство является значениемfalse.
