Веб-технологии прочно вошли в нашу повседневную жизнь.
Мы проводим довольно много времени во Всемирной паутине – смотрим новости, делаем покупки, общаемся и работаем.
Индустрия интернет-услуг и развлечений стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку 3D-графики в своих продуктах.
Традиционно его поддержка ограничивалась высокопроизводительными компьютерами или выделенными игровыми консолями, а программирование требовало использования сложных алгоритмов.
Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создавать и отображать трехмерную графику с помощью веб-технологий.
В отличие от других технологий трехмерной графики (таких как OpenGL и Direct3D), WebGL предназначен для использования на веб-страницах и не требует установки специализированных расширений или библиотек.
Одним из преимуществ WebGL является то, что приложения спроектированы как веб-страницы, а это означает, что одна и та же программа будет успешно работать на различных устройствах (например, смартфонах, планшетах и игровых консолях).
Это означает, что WebGL будет оказывать все большее влияние на сообщество разработчиков и станет одним из основных инструментов графического программирования.
Преимущества WebGL
С развитием HTML разработчики получили возможность создавать все более сложные веб-приложения.
Вначале HTML предлагал только возможность отображать статический контент, но с добавлением поддержки JavaScript стало возможным реализовывать более сложные взаимодействия элементов и отображать динамический контент. Внедрение стандарта HTML5 позволило реализовать новые функции, включая поддержку двухмерной графики в виде тега холста.
Создание технологии WebGL позволило отображать трехмерную графику на веб-страницах и управлять ею с помощью JavaScript. С помощью WebGL разработчики могут создавать совершенно новые пользовательские интерфейсы, 3D-игры и использовать 3D-графику для визуализации разнообразной информации.
Несмотря на свои впечатляющие возможности, WebGL отличается от других технологий доступностью и простотой использования, что способствует ее быстрому распространению.
Поддержка браузера WebGL в настоящее время поддерживается следующими браузерами: Настольные браузеры
- Mozilla Firefox (начиная с версии 4)
- Google Chrome (начиная с версии 9)
- Safari (начиная с версии 6, поддержка WebGL отключена по умолчанию)
- Opera (начиная с версии 12, поддержка WebGL отключена по умолчанию)
- IE (с версии 11, для других версий можно использовать сторонние плагины, например IEWebGL)
- Браузер Android (поддерживает WebGL только на некоторых устройствах)
- Opera Mobile (начиная с версии 12 и только для ОС Android)
- iOS (полная поддержка с версии 8.1)
- Firefox для мобильных устройств (начиная с версии 4)
- Google Chrome для Android (начиная с версии 25)
- Кроссбраузерность и отсутствие привязки к конкретной платформе.
Windows, MacOS, Linux – не важно, главное, чтобы ваш браузер поддерживал WebGL.
- Использование JavaScript, что довольно распространено.
- Автоматическое управление памятью.
В отличие от OpenGL, WebGL не требует каких-либо специальных действий по выделению и очистке памяти.
- Поскольку WebGL использует графический процессор (GPU) для рендеринга графики, технология обеспечивает высокую производительность, сравнимую с производительностью собственных приложений.
Реализации OpenGL доступны для различных операционных систем и аппаратных платформ.
Спецификация OpenGL была разработана компанией Silicon Graphics Inc. и опубликована как открытый стандарт в 1992 году.
Технология оказала огромное влияние на развитие 3D-графики.
WebGL имеет свои корни в OpenGL, но его нельзя назвать прямым потомком.
Прямым прототипом WebGL считается OpenGL ES (for Embedded Systems), созданный в 2003-2004 годах и обновленный в 2007 (ES 2.0) и 2012 (ES 3.0).
Переход на OpenGL 2.0 ознаменовался появлением новой важной возможности — поддержки программных шейдеров.
Эта поддержка была перенесена в OpenGL ES 2.0 и стала одним из основных элементов спецификации WebGL 1.0. В начале 2009 года Khronos Group (некоммерческий отраслевой консорциум, созданный для разработки, публикации и продвижения различных открытых стандартов) учредила рабочую группу WebGL и запустила процесс стандартизации WebGL на основе OpenGL ES 2.0. В 2011 году под его эгидой была выпущена первая версия WebGL. Однако в июне того же года Microsoft выразила обеспокоенность по поводу безопасности технологии WebGL, сославшись на чрезмерные права доступа к оборудованию и ненадежные механизмы безопасности.
Вице-президент Mozilla Марк Шейвер отверг критику Microsoft, назвав опасения преувеличенными.
В то время у Microsoft была собственная 3D веб-технология Silverlight 5, основанная на тех же принципах, что и WebGL, которую, тем не менее, корпорация считала вполне надежной.
Позже Microsoft изменила свое отношение к технологии WebGL, реализовав ее поддержку в своем браузере Internet Explorer 11. Apple решила поддержать WebGL в браузере Safari на конференции WWDC в 2014 году.
Обзор фреймворков для разработки WebGL Технология WebGL использует низкоуровневый API; этот аспект облегчает разработчикам браузеров внедрение технологии в свои продукты, но создает довольно много сложностей при создании интерфейсов.
Большое количество времени и сил было вложено в разработку библиотек, фреймворков и стороннего ПО, которые облегчили работу разработчиков сайтов.
Библиотека ВебГЛУ Первой общедоступной библиотекой был WebGLU — набор утилит низкого и высокого уровня для разработки приложений с использованием WebGL. WebGLU спроектирован таким образом, чтобы разработчик мог сосредоточиться на конечном результате с минимумом возни и кода, но библиотека не ограничивает разработчиков, которым нужен больший контроль.
Это достигается за счет возможности использования низкоуровневых функций для работы с WebGL API. Неполный список функций:
- Может загружать шейдеры напрямую из файлов .
frag/.
vert/.
vp/.
fp.
- Автоматическая загрузка и настройка шейдеров
- Все подборки и ссылки обрабатываются автоматически
- Автоматическая установка любой проекции и типа модели
- Предоставляет проекции вида модели и стеки матриц, которые примерно соответствуют режимам матриц в OpenGL.
- Автоматически создает массив/элемент буферов по мере необходимости и связывает их по мере необходимости во время рендеринга.
- Каждому объекту может быть назначена отдельная шейдерная программа.
- Хранение данных атрибутов шейдера, простой вызов
- Частичный парсер .
obj реализован для загрузки объектов.
- Поддерживает иерархию объектов
- Статические изображения и видеотекстуры
- Поддержка процедурной анимации.
- Поддержка кадровой анимации
- Возможность смешивать типы анимации и иерархию объектов.
- GameGLU — вспомогательная библиотека, обеспечивающая легкое отслеживание событий клавиатуры.
Однако последние изменения в репозитории датируются 2014 годом, поэтому есть основания сомневаться в актуальности библиотеки сегодня.
Неполный список функций:
- Покадровая анимация
- Поддерживает общее освещение, направленное освещение (точечное) и точечное освещение.
- Поддержка обычных карт
- Анимационные материалы
- Скелетная анимация
- Поддержка формата Collada
- Поддержка карты смещения
- Рендеринг текста
- Туман
- Глубина тени
- Карты окружающей среды
- Отражение/преломление
- Анимация Коллада
- 2d фильтры
- Culling — удаление скрытых частей сцены из процесса обработки.
- Поддержка LOD — уровни детализации объектов
- Физика
Подробная и доступная документация и огромное количество рабочих примеров делают эту библиотеку одним из лидеров среди подобных систем.
Неполный список функций:
- Рендереры — Canvas, SVG или WebGL
- Добавляйте и удаляйте объекты в режиме реального времени
- Туман
- Перспективные или ортогональные камеры.
- Каркасная анимация, различные виды кинематики, покадровая анимация.
- Несколько типов источников света – внешний, направленный, точечный.
- Отброшенные и полученные тени
- Шейдеры (GLSL)
- Объекты — сетки, частицы, спрайты, линии, скелетная анимация и т. д.
- Множество предустановленных типов геометрии — плоскость, куб, сфера, тор, 3D-текст и т. д.
- Поддержка активных модификаторов — ткань, экструзия
- Возможность загрузки нескольких типов данных — двоичных, изображений, JSON и сцены.
- ?Экспорт и импорт файлов .
obj объектов Blender, openCTM, FBX, 3D Studio Max и Wavefront.
С.
Библиотека с открытым исходным кодом для создания полноценных 3D-приложений и игр, запускающихся в веб-браузере без использования сторонних плагинов и расширений.
Babylon JS по своим возможностям близок к ThreeJS, но имеет некоторые встроенные функции, недоступные в Three JS из коробки.
К этим приятным функциям относится встроенный физический движок oimo.js — довольно простой способ создать реалистичный ландшафт с помощью карты высот. Такие возможности, конечно, есть и у Three js, но они реализованы с помощью различных дополнительных приложений.
Однако за функционал библиотеки придется заплатить нескромный вес в 800 Кб.
Список функций:
- Сцена - использование готовых мешей, тумана, скайбоксов.
- Физический движок (модуль oimo.js)
- Сглаживание
- Анимационный движок
- Звуковой двигатель
- Система частиц (частиц)
- Аппаратное масштабирование
- поддержка уровня детализации
- Пошаговая загрузка сцены
- Автоматическая оптимизация сцены
- Панель отладки
- 4 источника освещения: точечное, круговое, прожекторное и реалистичное.
- Пользовательские материалы и шейдеры
- Широкий выбор вариантов текстурирования.
- ССАО
- Блики
- 9 типов камеры, включая сенсорное управление
- Ээкспортеры для 3ds Max, Blender, Unity3D, Cheetah 3d
- Карта высот
Конечно, разные задачи требуют индивидуального подхода к реализации приложения.
Библиотеки, представленные в этой статье, — это лишь верхушка айсберга.
Каждый разработчик может выбрать библиотеку под свои конкретные нужды — одних волнует скелетная анимация, других — реалистичное освещение или физика, а некоторые — действительно ортодоксальные профессионалы, не признающие ничего, кроме чистейшего WebGL API и записывающие шейдеры в блокноте.
Однако всех объединяет стремление создавать качественные, легкие и производительные веб-приложения, активно использующие возможности 3D-графики.
Теги: #3D-графика #3D-анимация #webgl #threejs #babylon.js #webglu #webgl
-
Запретный Плод Goto Сладок!
19 Oct, 24 -
Давайте Поностальгируем: Компьютерный Журнал
19 Oct, 24 -
Фанатский Сайт Wow Продан За Миллион
19 Oct, 24
