Какие видеокарты поддерживают webgl
Хочу начать вольный перевод отличной книги «WebGL Beginner's Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.
- Глава 1: Начиная работать с WebGL
- Глава 2: Рендеринг геометрии
- Глава 3: Освещение
- Глава 4: Камера
- Глава 5: Движение
- Глава 6: Цвет, глубина и альфа-смешение
- Глава 7: Текстуры
- Глава 8: Выбор
- Глава 9: Собираем все вместе
- Глава 10: Дополнительные методы
- Понять структуру WebGL-приложения
- Создавать свои области рисования (canvas)
- Проверить WebGL-возможности вашего браузера
- Понять, как устроена машина состояний WebGL
- Изменять переменные WebGL, которые влияют на вашу сцену
- Загружать и исследовать полнофункциональные сцены
Системные требования
- Firefox 4.0 или более поздней версии
- Google Chrome 11 или более поздней версии
- Safari (OSX 10.6 или более поздней версии). По умолчанию WebGL отключена, но вы можете включить ее, установив опцию Enable WebGL в меню Developer
- Opera 12 или более поздней версии
Что представляет собой WebGL
- JavaScript программирование: JavaScript это «родной» язык для веб-разработчиков и веб-браузеров. Работа с JavaScript позволяет получить доступ ко всем DOM-элементам, а также легко с ними обращаться, в отличие от общения с апплетами. Так как WebGL программируется в JavaScript, то это облегчает интеграцию WebGL-приложений с другими JavaScript – библиотеками, такими как JQuery и другими технологиями HTML5.
- Автоматическое управление памятью: в отличие от своего собрата OpenGL и других технологий, где есть конкретные операции выделения и освобождения памяти вручную, в WebGL нет такой необходимости. Из этого следует, что при выходе JavaScript переменной из области видимости, память, занимаемая ей, автоматически освобождается. Это чрезвычайно облегчает программирование, уменьшает объем кода, делает его более ясным и понятным.
- Проницаемость: благодаря современным технологическим достижениям, веб-браузеры с поддержкой JavaScript устанавливаются на смартфоны и планшетные устройства. На момент написания, Mozilla Foundation является программой для тестирования возможностей WebGL в телефонах Motorola и Samsung. Существуют подобные разработки поддержки WebGL для платформы Android.
- Производительность: производительность приложений WebGL сопоставима с эквивалентными автономными приложениями (с некоторыми исключениями). Это происходит благодаря способности WebGL иметь доступ к локальным аппаратным ускорителям графики. До сих пор, многие веб-технологии для 3D рендеринга используют программный рендеринг.
- Нулевая компиляция: учитывая, что WebGL написана на JavaScript, то нет необходимости в предварительной компиляции кода перед выполнением в веб-браузере. Это позволяет вносить изменения на лету и смотреть, как эти изменения влияют на 3D веб-приложение. Тем не менее, когда мы затронем тему шейдеров, то мы поймем, что нуждаемся в некоторой компиляции. Однако, это происходит с помощью наших графических аппаратных средств, а не в нашем браузере.
Структура WebGL приложения
- Canvas: это заполнитель, где будет отображаться сцена. Это стандартный HTML5-элемент, который может быть доступен с помощью объектной модели документа (DOM) через JavaScript.
- Объекты: это 3D сущности, которые составляют часть сцены. Эти сущности состоят из треугольников. Во второй главе мы увидим, как WebGL обрабатывает геометрию. Мы будем использовать WebGL-буферы для хранения многоугольников и увидим, как WebGL использует буферы для визуализации объектов на сцене.
- Свет: ничего в 3D мире нельзя увидеть, если нет никаких источников света. Этот элемент любого WebGL-приложения будет рассмотрен в 3 главе. Мы узнаем, что WebGL использует шейдеры для моделирования света на сцене. Так же мы посмотрим, как 3D-объекты отражают и поглощают свет в соответствии с законами физики, а также обсудим иные модели света, которые мы можем создать в WebGL для визуализации наших объектов.
- Камера: выступает в качестве холста для просмотра 3D-мира. Посмотрим, как с ее помощью можно исследовать 3D-сцену. В 4 главе, будут рассмотрены различные матричные операции, которые необходимы для получения перспективного вида. Также мы поймем, как эти операции могут моделировать поведение камеры.
Создание HTML5 canvas
-
Используя ваш любимый редактор, создайте веб-страницу со следующим содержимым:
- Id: это идентификатор холста в объектной модели документа (DOM)
- Ширина и высота: эти два атрибута определяют размер нашего холста. Когда эти два атрибута отсутствуют Firefox, Chrome, и WebKit по умолчанию будут использовать холст 300x150.
Доступ к контексту WebGL
- Открываем файл ch1_Canvas.html в вашем любимом текстовом редакторе (в идеале можно выбрать синтаксис для HTML/JavaScript).
- Добавьте следующий код прямо под тегом
Сохраните файл ch1_GL_Context.html .
Откройте файл ch1_GL_Context.html , используя один из браузеров, поддерживающих WebGL.
Если вы не сможете запустить WebGL, то увидите примерно следующее диалоговое окно:
Что же только что произошло?
Используя переменную JavaScript (gl), мы получили ссылку на контекст WebGL. Давайте вернемся и проверим код, который позволяет получить доступ к WebGL:
Метод холста getContext дает нам доступ к WebGL. Все, что нам нужно, это указать имя контекста, которое может быть разным у разных производителей. Поэтому мы сгруппировали все возможные имена контекста в массив names. Крайне важно проверить спецификацию WebGL (вы можете найти ее в интернете) на любые изменения, касающиеся соглашения об именовании.
getContext так же может обеспечить доступ к 2D-графике HTML5 при использовании 2D –библиотеки, в зависимости от имени контекста. В отличие от WebGL это соглашение об именах является стандартным. API 2D-графики HTML5 является полностью независимым от WebGL и выходит за рамки этой книги.
Машина состояний WebGL
-
Используя ваш любимый текстовый редактор, откройте файл ch1_GL_Attributes.html :
- checkKey : это вспомогательная функция. Она захватывает ввод с клавиатуры и выполняет код в зависимости от введенной команды
- getGLContext : подобна той, которую мы уже рассмотрели
- clear : очищает холст текущим цветом, который является одним из атрибутов WebGL-контекста. Как упоминалось ранее, WebGL работает как конечный автомат, поэтому он будет поддерживать выбранный цвет, чтобы очистить холст до того, как этот цвет будет изменен с помощью функции gl.clearColor .
- initWebGL : эта функция может заменить функцию getGLContext , как функция, вызываемая на событие onLoad документа. Эта функция вызывает улучшенную версию getGLContext , которая возвращает контекст в переменную ctx . Затем этот контекст присваивается глобальной переменно gl .
Загружаем 3D-сцену
До сих пор мы видели как можно получить и настроить контекст WebGL; следующим шагом является обсуждение объектов, освещения и камеры. Однако, почему мы должны ждать, чтобы посмотреть на возможности WebGL? В этом разделе мы посмотрим как выглядит WebGL-сцена.
Виртуальный автосалон
- Откройте файл ch1_Car.html в любом из поддерживаемых браузеров
- Вы увидите WebGL-сцену с автомобилем, как показано ниже:
- Холста, с помощью которого мы видим сцену
- Несколько полигонов (объектов), которые представляют собой части автомобиля: крыша, окна, фары, крылья, двери, колеса, спойлер бамперы и так далее.
- Источники света, в противном случае все было бы черным
- Камера, которая определяет наше положение в 3D-мире. Камера, может быть интерактивной, то есть положение наблюдателя может меняться, в зависимости от пользовательского ввода. В этом примере мы использовали левую и правую клавиши со стрелками и мышь, чтобы перемещать камеру вокруг автомобиля.
Резюме
В этой главе мы рассмотрели четыре основных элемента, которые всегда присутствуют в любом WebGL-приложении: холст, объект, свет и камера.
Мы узнали, как добавить на веб-страницу HTML5 canvas, как установить его ID, ширину и высоту. После этого мы написали код, который создавал контекст WebGL. Мы увидели, что WebGL работает как машина состояний, как таковая, мы можем запросить любую из своих переменных, использую функцию getParameter.
В следующей главе мы узнаем, как определить, загрузить и отрисовать 3D-модель в WebGL-сцене.
WebGL (Web-based Graphics Library) — стандарт, спецификация которого разрабатывается в настоящее время, предназначенная для отображения 3D графики в web браузерах. Данная технология позволяет внедрять аппаратно-ускоренную 3D графику в веб-страницы без необходимости использовать специальные плагины веб-браузера на любой платформе, поддерживающей OpenGL или OpenGL ES. Технически, это будет представлять собой привязку JavaScript-скриптов к функциям, определенным в библиотеках OpenGL ES 2.0, реализованную на уровне браузера.
Доступность
WebGL является дальнейшим развитием Canvas 3D эксперимента в Mozilla и уже представлена в Mozilla Firefox.
- Internet Explorer: Поддерживается при помощи плагина IEWebGL начиная с IE 6 вплоть до IE10 Platform Preview.
- Chrome: По состоянию на 5 февраля 2011 года полностью поддерживается в Google Chrome Chromium. При этом, согласно исследованию Facebook, браузер от Google обеспечивает высочайшую производительность в обработке WebGL, благодаря аппаратному ускорению/
- Firefox: Официально функционирует в Firefox с выходом Mozilla Firefox 4 от 22 марта 2011 года. Так же компания Nokia выпустила ускоритель WebCL
- Opera: У Opera имеется отдельная тестовая сборка с поддержкой WebGL. Опера, WebGL и аппаратное ускорение
Причины ошибки
Если при попытке доступа к сайту видите ошибку «WebGL не поддерживается», то причины ее возникновения могут быть следующими:
- Используется устаревшая версия браузера, в котором отсутствует поддержка WebGL.
- Отключено аппаратное ускорение в браузере.
- В системе установлены устаревшие драйвера видеокарты.
- Установлена Windows XP, которая не поддерживает технологию WebGL.
Google Chrome
Откройте основное меню нажатием на значок с тремя точками и выберите пункт Настройки.
Прокрутите страницу вниз и щелкните на кнопку «Дополнительные». Найдите раздел Система и проверьте включена ли опция, связанная с использованием аппаратного ускорения.
В противном случае включите ее и нажмите кнопку «Перезапустить», чтобы принудительно применить изменения.
История
10 декабря 2009 года консорциум опубликовал первую черновую спецификацию WebGL. Председатель группы Арун Ранганатан, заявил, что завершение работы над спецификацией ожидается в первом квартале 2010 года. Окончательная ревизия первой редакции спецификаций была представлена 3 марта 2011 года в Сан-Франциско.
Браузеры
-
– WebGL был включен во все платформы, у которых есть нужная графическая карта с обновленными драйверами, начиная с версии 4.0. – WebGL включен по умолчанию во все версии начиная с 9.
- Safari – Safari поддерживает WebGL, но поддержка отключена по умолчанию. – WebGL не реализована в последней версии Opera 11.51. Однако, текущий вариант браузера Opera 11.50 с поддержкой WebGL доступен для платформ Windows. Так же доступен в ночных сборках начиная с Opera 12.00 Wahoo Alpha (Build 1105)
- Internet Explorer – Microsoft не заявляло об официальной поддержке WebGL. Плагины Chrome Frame и IEWebGL предусматривают опции, необходимые для поддержки WebGL в Internet Explorer.
Рекомендуется использовать браузеры Mozilla Firefox и Google Chrome последних версий, т.к. эти компании входят в состав рабочей группы, разрабатывающий стандарт WebGL. Проверка актуальности браузера
WebGL – это JavaScript API, который используется для рендеринга 2D и 3D графики без применения плагинов в любом совместимом браузере. Несмотря на то, что технология полностью интегрирована с большинством веб-стандартов, она еще зависит от поддержки графического процессора и недоступна на устаревших моделях.
Обновление драйвера видеокарты
Поскольку эта технология зависит от поддержки графического процессора, устаревшие драйверы также могут вызвать ошибку «WebGL не поддерживается». Для их обновления выполните следующие шаги.
Откройте Диспетчер устройств командой devmgmt.msc из окна Win + R.
Разверните вкладку Видеоадаптеры, щелкните правой кнопкой мыши на видеокарте и выберите пункт «Обновить». Если в системе установлены две видеокарты (встроенная и дискретная), обновите оба устройства.
Теперь проверьте подключение к интернету и выполните автоматический поиск обновленного программного обеспечения. Если новый драйвер будет обнаружен, дождитесь завершения его установки.
После перезагрузите компьютер и попробуйте открыть сайт, который не удавалось из-за отсутствия поддержки WebGL.
Если не удалось обновить драйвер видеокарты в автоматическом режиме, попробуйте это сделать вручную. Для этого откройте сайт NVIDIA, AMD или Intel, в зависимости от производителя установленной видеокарты и загрузите последнюю версию программного обеспечения.
Запустите загруженный файл и следуйте инструкциям на экране до завершения установки драйверов. После перезагрузите ПК и проверьте, блокируется ли доступ к сайту ошибкой.
Скриншот демо WebGL Water, автор Эван Уоллес
Консорциум разработчиков Khronos Group объявил, что технология WebGL 2.0 для рендеринга интерактивной 2D и 3D-графики без плагинов наконец-то поддерживается во всех основных браузерах (проверить).
Спецификация с 2017 года поддерживалась в Firefox и Chrome. Однако этого было недостаточно для её безболезненного внедрения. В 2020 году поддержку добавили в Edge, а последним обновился Safari 15 для macOS и iOS. Это произошло после двух лет интенсивного труда инженеров Apple WebKit, которые выбрали нестандартный, но очень приятный для опенсорсного сообщества путь (о нём ниже).
Теперь всем разработчикам можно с чистой совестью игнорировать фолбэки на 1.0, что значительно упростит графическую экосистему интернета.
Khronos Group — некоммерческий консорциум из более 150 компаний-разработчиков в области 3D-графики, VR/AR, параллельного программирования, графических ускорителей и машинного обучения. Консорциум создаёт и продвигает графические стандарты, такие как Vulkan, OpenGL, WebGL, SPIR-V, OpenCL, OpenVX, OpenXR, ANARI и glTF.
Представленная в 2017 году технология WebGL 2.0 стала существенным шагом вперёд в плане возможностей компьютерной графики. Она предоставила набор функций OpenGL ES 3.0. Ключевые новые фичи:
- обратная связь преобразования через объект TransformFeedback;
- мгновенный рендеринг;
- множественные цели рендеринга;
- объекты общих uniform-буферов памяти — Uniform Buffer Objects (UBO);
; - гораздо более широкая поддержка текстур, чем в оригинальном конвейере WebGL 1.0.
Серьёзная работа по внедрению WebGL 2.0 в Safari началась в июне 2019 года. Это привело к нескольким приятным побочным эффектам для опенсорсного сообщества. Началось с того, что Apple решила использовать свободный движок ANGLE. В результате их инженерная команда потратила бессчётное количество сил на улучшение бэкенда Metal.
Теперь на последних устройствах iOS и macOS браузер Safari работает с WebGL поверх Metal. Инженерные команды Apple и Google начали совместную работу для внедрения ANGLE в WebKit. Они создают общую кодовую базу для дальнейшей разработки и перевода Chrome тоже на бэкенд ANGLE Metal.
Демо WebGL Aquarium, (с) Грегг Таварес, компания Human Engines
Хотя WebGL 2.0 достиг повсеместной поддержки всеми основными браузерами, работа над спецификацией продолжится для улучшения совместимости и согласованности.
Таким образом, графическая экосистема стала значительно проще. Дальнейшее развитие графических веб-приложений в ближайшие годы обеспечат программные интерфейсы WebGPU.
Разработка WebGPU API активно идёт в соответствующей рабочей группе W3C. Последний черновик вышел 14 января 2022 года, то есть недавно. Сейчас это рабочий драфт. Технология предоставляет браузерам современные возможности компьютерной графики Direct3D 12, Metal и Vulkan.
Полный деплой любой спецификации требует времени. WebGL 1.0 вышел в марте 2011 года, а поддержка в 80% браузеров наступила только через 3,5 года. То же самое и сейчас. WebGL 2.0 достиг такого же показателя 80% за такое же время. Путешествие к WebGL 2.0 и WebGPU продолжится даже после того, как спецификация WebGPU будет официально утверждена.
Тем временем WebGL продолжает развиваться. Недавно консорциум Khronos Group объявил о доступности во всех браузерах хотя бы одного формата сжатых текстур (ETC2 или S3TC), а также о новом расширении multi-draw, которое значительно повышает производительность рендеринга за счёт пакетной обработки геометрии. Функциональность OES_draw_buffers_indexed позволяет использовать передовые техники прозрачности, которые не зависят от порядка расположения объектов.
Сейчас по факту WebGL — самая распространённая и доступная платформа 3D-графики в мире.
В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.
Достоинства WebGL
С развитием HTML разработчики получили возможность создавать все более сложные веб-приложения. На заре своего развития язык HTML предлагал только возможность отображения статического контента, но с добавлением поддержки JavaScript стало возможным реализовывать более сложные взаимодействия элементов и отображения динамического контента. Внедрение стандарта HTML5 позволило использовать новые возможности, включая поддержку двухмерной графики в виде тега canvas. Создание технологии WebGL позволило отображать и манипулировать трехмерной графикой на веб-страницах с помощью JavaScript. При помощи WebGL разработчики могут создавать совершенно новые пользовательские интерфейсы, трехмерные игры и использовать трехмерную графику для визуализации различной информации. Несмотря на внушительные возможности, 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 for mobile (с 4-й версии)
- Google Chrome для Android (с 25-й версии)
- Кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux — все это неважно, главное, чтобы ваш браузер поддерживал WebGL.
- Использование языка JavaScript, который достаточно распространен.
- Автоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.
- Поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.
Наиболее распространенными технологиями отображения компьютерной графики на персональных компьютерах являются Direct3D и OpenGL.
Direct3D — составная часть пакета технологий Microsoft DirectX.
Альтернативная ей технология OpenGL, благодаря ее открытости, получила гораздо более широкое распространение. Реализации OpenGL доступны для различных операционных систем и аппаратных платформ. Спецификация OpenGL была разработана компанией Silicon Graphics Inc. и опубликована как открытый стандарт в 1992 году. Технология оказала огромное влияние на развитие трехмерной графики.
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
Первой общедоступной библиотекой стала WebGLU — набор утилит низкого и высокого уровня для разработки приложений на WebGL. WebGLU сконструирован таким образом, что разработчик может сосредоточиться на конечном результате с минимумом суеты и кода, но библиотека не ограничивает разработчиков, которые хотят больше контроля. Это достигается за счет возможности использования низкоуровневых функций для работы с WebGL API.
Неполный список функций:
- Можно загрузить шейдеры непосредственно из .frag / .vert / .vp / .fp файлов
- Автоматическая загрузка и настройка шейдера
- Все компиляции и компоновки обрабатываются автоматически
- Автоматическая установка любой проекции и вида модели
- Обеспечивает проекции и матрицы-стеки вида модели, которые примерно соответствуют режимам матрицы в OpenGL
- Автоматически создает при необходимости массив / элемент буферов и связывает их по мере необходимости во время рендеринга
- Каждому объекту может быть назначена отдельная шейдерная программа
- Хранение данных атрибутов шейдера, простой вызов
- Частичный .obj анализатор реализован для загрузки объектов
- Поддерживает иерархии объектов
- Статические изображения и видео текстуры
- Поддержка процедурной анимации
- Поддержка покадровой анимации
- Возможность смешивать типы анимации и иерархию объектов
- GameGLU — библиотека компаньон обеспечивает легкое отслеживание событий клавиатуры
Достаточно именитая библиотека для разработки приложений с использованием WebGL. Библиотека ориентирована больше на динамическое изменение сцены. Однако последние изменения в репозитории датированы 2014 годом, поэтому есть причины усомниться в актуальности библиотеки на сегодняшний день.
Неполный список функций:
- Покадровая анимация
- Поддержка общего освещения, направленного освещения (spot) и точечных источников света
- Поддержка карты нормалей
- Анимирование материалов
- Скелетная анимация
- Поддержка формата Collada
- Поддержка карт смещения
- Рендеринг текста
- Туман
- Глубина теней
- Карты окружения
- Отражение / преломление
- Анимация Collada
- 2d фильтры
- Culling — удаления скрытых частей сцены из процесса обработки
- Поддержка LOD — уровни детализации объекта
- Физика
Наиболее популярная и активно развивающаяся библиотека на сегодняшний день. Подробная и доступная документация и огромное количество рабочих примеров делают эту библиотеку одним из лидеров среди аналогичных систем.
Неполный список функций:
- Рендереры — Canvas, SVG или WebGL
- Добавление и удаление объектов в режиме реального времени
- Туман
- Перспективная или ортографическая камеры
- Каркасная анимация, различные виды кинематики, покадровая анимация
- Несколько типов источников света — внешний, направленный, точечный
- Брошенные и полученные тени
- Шейдеры (GLSL)
- Объекты — сети, частицы, спрайты, линии, скелетная анимация и так далее
- Множество предустановленных типов геометрии — плоскость, куб, сфера, тор, 3D текст и так далее
- Активная поддержка модификаторов — ткань, выдавливание
- Возможность загрузки множества типов данных — двоичный, изображения, JSON и сцена
- Экспорт и импорт обьектов Blender, openCTM, FBX, 3D Studio Max и Wavefront .obj файл
Библиотека с открытым исходным кодом для создания полноценных 3D приложений и игр, работающих в веб-браузере без использования сторонних плагинов и расширений. Babylon JS по своим возможностям близок к ThreeJS, однако имеет в своем арсенале некоторые встроенные функции, недоступные в Three JS из коробки. К таким приятным особенностям относятся встроенный физический движок oimo.js — достаточно простой способ создать реалистичный ландшафт, используя карту высот. Разумеется, в three js также присутствуют такие возможности, но реализованы они при помощи различных дополнительных приложений. Однако за функциональность библиотеки приходиться платить нескромным весом в 800 кб.
Список функций:
- Сцена — использование готовых мешей, туман, скайбоксы
- Физический движок (модуль oimo.js)
- Сглаживание
- Анимационный движок
- Звуковой движок
- Система частиц (партиклов)
- Аппаратное масштабирование
- Поддержка LOD-ов
- Пошаговая загрузка сцены
- Автоматическая оптимизация сцены
- Панель отладки
- 4 источника освещения — точечный, излучаемый повсюду, прожектор и реалистичное
- Пользовательские материалы и шейдеры
- Широкие возможности текстурирования
- SSAO
- Блики
- 9 видов камеры, в том числе и для сенсорного управления
- Экспортеры для 3ds Max, Blender, Unity3D, Cheetah 3d
- Карта высот
Каждый разработчик может выбрать библиотеку под свои конкретные нужды — кому-то важна скелетная анимация, кому-то — реалистичный свет или физика, а кто-то является действительно ортодоксальным профессионалом, который не признает ничего кроме чистейшего WebGL API и пишет шейдеры в блокноте. Однако всех объединяет желание создать качественные, легкие и производительные веб-приложения, активно использующие возможности трехмерной графики.
Содержание
Opera
Нажмите на значок Opera в левом верхнем углу и перейдите в Настройки. Прокрутите список опций вниз и щелкните на кнопку «Дополнительно».
В разделе Система переметите переключатель, связанный с аппаратным ускорением, в положение «Включено».
Если после включения функции WebGL все еще не поддерживается, перейдите к следующему методу.
Включение аппаратного ускорения
Самой распространенной причиной, которая вызывает ошибку «WebGL не поддерживается», является отключенное аппаратное ускорение в браузере. Правильная работа технологии зависит от аппаратного ускорения, поэтому нужно проверить, включена ли эта функция.
Видеокарты
Важно : Встроенные видеокарты не поддерживают технологию OpenGL \ WebGL
Для Windows и Linux пользователей: самая распространенная причина, по которой WebGL не работает - проблемы с графическими драйверами. Все текущие реализации WebGL основаны на OpenGL (ожидается, что это изменение в будущем), а поддержка OpenGL обеспечивается поставщиком графического драйвера. Для WebGL необходимо наличие как минимум OpenGL 2.0 для запуска; проблемы с видеокартами Intel существуют от того, что Intel не обеспечил поддержку OpenGL в драйверах для большинства своих графических устройств.
Если у вас ATI или Nvidia видеокарта, первое, что нужно сделать, это проверить версию OpenGL на вашем компьютере. Для Windows, это можно сделать с помощью GLview. На Linux, нужно выполнить команду glxinfo и найти строку с заголовком "OpenGL version string". Если номер версии меньше, чем 2.0, вам необходимо обновить драйвер. Если после обновления вы всё еще испытываете проблемы - есть вероятность что подходящий OpenGL не доступен для вашей видеокарты или операционной системы. Возможно имеет смысл попробовать программный рендер. Вот инструкции для Windows и для Linux.
Требования к системе
WebGL – это библиотека для программного обеспечения, которая расширяет возможности языка программирования JavaScript, позволяя ему создавать интерактивную 3D графику внутри любого совместимого с ней веб-браузера. Код на WebGL выполняется с помощью видеокарты.
Mozilla Firefox
Раскройте меню нажатием на значок с тремя линиями в правом верхнем углу и выберите «Настройки».
Найдите в списке раздел Производительность и снимите флажок, связанный с использованием рекомендуемых параметров. Отобразится опция «По возможности использовать аппаратное ускорение». Отметьте ее флажком и перезагрузите браузер, чтобы изменения вступили в силу.
Поддерживает ли браузер WebGL?
Быстрый способ проверить, поддерживает ли браузер эту технологию, можно на указанной странице, которую можно найти в интернете по запросу «WebGL — 3D Canvas graphics».
Читайте также: