WebGL Краткое руководство

Браузеры -> Технологии -> WebGL в браузерах

WebGL в браузерах

WebGL (оно же Web Graphics Library) — целая отдельная спецификация (наряду с HTML5 или CSS3), разрабатывалась некоммерческим консорциумом Khronos Group, в состав рабочей группы входит множество крупных компаний, таких как Apple, Google, nVidia, AMD.

WebGL позволяет обращаться к видеокарте с помощью OpenGL ES 2.0 и производить отрисовку 3D-графики через HTML5-элемент Canvas. Конечно кроме 3D-графики можно работать и с 2D-составляющей, благодаря WebGL браузеры также могут воспользоваться аппаратным ускорением, это существенно ускоряет отрисовку различного контента.

Главная особенность WebGL от таких разработок как Adobe Flash или Microsoft Silverlight — возможность работы без посторонних плагинов, какими и являются Flash и Silverlight, а это значит, что для получения 3D-контента требуется только браузер с поддержкой WebGL.

WebGL поддерживается большинством популярных браузеров:

  • Mozilla Firefox 4.0 и выше.
  • Google Chrome 9 и выше.
  • Opera 12.0 и выше. В версии Opera 12 следует перейти по адресу Enable Hardware Acceleration и установить в поле значение , нажать кнопку Сохранить и перезагрузить браузер, затем перейти по адресу Enable WebGL и установить в поле значение , нажать кнопку Сохранить и перезагрузить браузер.
  • Apple Safari (только в ночных сборках).

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

Поддержка WebGL в Вашем браузере:

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

Сайты с демонстрациями работы WebGL:

 

Поддержка WebGL в браузерах, узнать поддержку WebGL

 

Blend4Web — отечественный WebGL движок.
http://www.blend4web.com/ru/

круто. Показало версию WebGL как у гадалки прямо

Чтобы оставить комментарий — зарегистрируйтесь или авторизуйтесь через любимый сервис (ВКонтакте, Одноклассники, Twitter и др.) с помощью OpenID.

Технически, вам не нужно ничего, кроме браузера, чтобы начать разработку на WebGL. Зайдите на jsfiddle.net, jsbin.com или codepen.io и просто начните выполнять уроки.

На всех указанных ресурсах при желании можно добавлять внешние скрипты через пару тегов .

Но здесь не без ограничений. WebGL имеет более строгие ограничения по сравнению с Canvas2D при загрузке изображений — вы не сможете запросто использовать изображения по всему интернету. Кроме того, работа будет идти быстрее, когда всё находится на локальной машине.

Предположим, что вы хотите запускать и редактировать примеры с этого сайта.

Для начала нужно скачать сам сайт по этой ссылке.

Распакуйте архив в какую-нибудь директорию.

Используем небольшой и простой веб-сервер

Вот один из очень простых серверов с интерфейсом под названием Servez.

Если вы используете браузер Chrome, есть ещё более простое решение. Вот небольшое расширение для chrome, которое выполняет роль веб-сервера

Просто укажите ему директорию с распакованными файлами, кликните на "Start", затем откройте в браузере страницу и найдите необходимый пример.

Если вы предпочитаете командную строку, то можно использовать node.js. Скачайте и установите его, затем откройте командную строку / консоль / терминал. На Windows установщик добавит "Командную строку Node", которую и нужно использовать.

Затем установите командой

Для OSX используйте

А после установки запустите

На экране должно показаться что-то вроде

Теперь можно в браузере перейти по адресу .

Без указания пути http-server будет использовать текущую папку.

Использование инструментов разработки браузера

Большинство браузеров имеют встроенные инструменты разработки.

Документация для Chrome находится здесь, Для Firefox — здесь.

Посмотрите, как их можно использовать. В худшем случае всегда можно глянуть в консоль JavaScript. Если существует какая-то проблема, то скорей всего будет и сообщение об ошибке. Посмотрите внимательно на это сообщение, оно даст подсказку, где искать проблему.

Помощники WebGL

Также существуют разнообразные помощники / инспекторы для WebGL. Вот один из них для Chrome.

В Firefox тоже есть похожий. Его нужно активировать в , также может потребоваться Firefox Developer Edition.

Они могут стать полезными, а могут и не стать. Большинство из них предназначены для анимированных сэмплов, они могут захватывать кадр и показывают все вызовы WebGL, которые формируют этот кадр. Они отлично подойдут, если уже что-то работает или если что-то работало и внезапно сломалось. Но от них мало проку, если у вас проблемы при инициализации, или если вы не используете анимацию, где нужно отрисовывать каждый кадр. Всё же они могут быть очень полезными. Я часто проверяю uniform-переменные при вызове отрисовки. Если я вижу кучу (NaN = Not a Number, то есть Не число), я проверяю код, отвечающий за установку этих переменных, и нахожу ошибку.

Инспектор кода

Также помните про инспектор кода. Мы можете запросто просмотреть исходный код.

Даже когда вы не можете кликнуть правой кнопкой на странице, или если код находится в отдельном файле, можно всегда просмотреть код через инструменты разработчика.

Приступаем к работе

Надеюсь, это поможет вам начать работу. Теперь обратно к урокам.

Первая программа на WebGL

Последнее обновление: 1.11.2015

Сейчас мы напишем первую программу с использованием технологии WebGL. Фактически это будет не одна программа, а два примера, которые покажут в действии механизм WebGL.

Первый пример

Создадим какую-нибудь веб-страничку со следующим содержимым:

Я не буду останавливаться на этом коде — основные моменты подробнее мы рассмотрим детально позднее, но, я думаю, комментарии помогут разобраться. Но если вкратце: у нас есть элемент , который представляет полотно для отрисовки сцены WebGL. Далее в виде скриптов javascript объявляются две мини-программы — фрагментный и вершинный шейдер.

Весь код программы находится в обработчике функции . Вначале нам надо получить контекст , через который и буду вестись все основные действия. Далее программа содержит три основные части: установка шейдеров, установка буфера вершин и сама отрисовка.

А пока можно запустить веб-страничку в браузере. И браузер явит нам белый треугольник на красном фоне.

Всего лишь? Это только начало. Позже мы подробнее поговорим о шейдерах, вершинах, геометрических примитивах и т.д. А теперь перейдем ко второму примеру.

Пример 2

Второй пример представляет собой хрестоматийный пример вращающегося куба. Вначале загрузим специальную библиотеку Three.js. Ее минимизированную версию можно найти по адресу Three.js.

Перейдем по этому адресу и сохраним весь код на жесткий диск в файл под названием three.min.js. Эта библиотека не является необходимой для работы с WebGL, однако она упрощает работу.

В одном каталоге с загруженной библиотекой создадим файл index.html со следующим содержанием:

Все уже выглядит гораздо круче, а кода гораздо меньше. Да, Three.js, а также другие библиотеки и фреймворки по работе с WebGL значительно упрощают работу с графикой. Но в то же время даже минимизированнные их версии весят очень не мало. Какой способ стоит выбрать — это дело разработчика. В дальнейшем мы будем рассматривать преимущественно работу с чистым WebGL, но также и затронем работу с библиотеками, например, с той же Three.js. А теперь можно переходить уже непосредственно к особенностям технологии.

НазадСодержаниеВперед

Проблемы и решения¶

Поскольку на сегодняшний день WebGL — всё ещё достаточно новая технология, она может работать некорректно с некоторыми комбинациями программного и аппаратного обеспечения. В этой главе перечислены наиболее распространённые проблемы, с которыми может столкнуться пользователь движка Blend4Web, и приведены способы их исправления.

Поддержка WebGL¶

Если вы используете настольный компьютер или ноутбук, вам требуется видеокарта с поддержкой DirectX 9.0c и OpenGL 2.1, такая, как:

  • Nvidia GeForce серии 6xxx или выше.
  • AMD/ATi Radeon серии R500 (X1xxx) или выше.
  • Intel GMA 950 или выше.

Если вы используете WebGL на мобильном устройстве, проверьте, присутствует ли ваше устройство в списке совместимости.

Вам также потребуется веб-браузер с поддержкой технологии WebGL.

WebGL поддерживают следующие веб-браузеры:

  • Google Chrome (начиная с версии 9)
  • Mozilla Firefox (начиная с версии 4.0)
  • Safari (начиная с версии 8.0)
  • Chrome for Android (начиная с версии 25)
  • Internet Explorer (начиная с версии 11)
  • Microsoft Edge
  • Opera (начиная с версии 12)
  • UC Browser (экспериментальная поддержка)
  • Yandex Browser

Мы также рекомендуем использовать новейшие версии веб-браузеров для предотвращения проблем с совместимостью.

Проблемы при запуске движка¶

1. Появляется сообщение «Browser could not initialize WebGL.»

Следует выполнить действия, описанные в разделе Ошибка инициализации WebGL.

2. Видны элементы интерфейса или пустой экран, но сцена не отображается. При этом тестовый сайтhttp://get.webgl.org/и другие WebGL приложения работают корректно.

Вероятные причины:

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

  • Используются старые версии драйверов.

  • Используются открытые драйвера, не обеспечивающие поддержку WebGL.

    Для пользователей Linux — ввиду неполной реализации OpenGL стека в драйверах с открытым кодом в настоящий момент рекомендуется использовать проприетарные драйверы текущей версии для графических процессоров Nvidia и AMD.

  • Используется устаревшая операционная система, такая как Windows XP.

  • Браузер не настроен для работы с локальными ресурсами. В этом случае проблема может быть решена использованием локального веб-сервера. См. раздел Загрузка локальных ресурсов.

Ошибка инициализации WebGL¶

Сайт http://get.webgl.org/ при просмотре в браузерах Chrome или Firefox последней версии сообщает о проблемах. Что делать?

  1. Установить доступные обновления для системы (для Windows см. инструкцию). В случае Windows установить последнюю версию DirectX. Перезагрузить систему.
  2. Рекомендуется проводить своевременное обновление драйверов для графических карт. Чтобы определить тип и производителя карты, можно ввести about:gpu (или chrome://gpu) в адресную строку браузера Chrome…

или Firefox…

Для операционных систем семейства Windows можно воспользоваться средством диагностики DirectX dxdiag.

Для этого выполните следующие действия:

  1. Выберете команду из стартового меню
  2. В окне введите dxdiag и нажмите чтобы вызвать утилиту диагностики DirectX
  3. Откройте панель .

    Там вы можете найти информацию о производителе, модели и других параметрах вашей видеокарты.

В macOS вам следует ознакомиться с System Report.

Для этого выполните следующие действия:

  1. Выберете из меню .
  2. Нажмите кнопку .
  3. Выберете пункт из раздела .

Необходимо загрузить драйверы с соответствующего центра поддержки (например, Intel, Nvidia, AMD/ATI). После установки драйверов перезагрузить систему.

  1. Если в результате вышеперечисленных действий инициализировать рендеринг не удается (или нет возможности обновить систему), можно попробовать изменить настройки браузера.

В Chrome:

Ввести about:flags (или chrome://flags) в адресную строку браузера, нажать () под опцией () и перезапустить браузер.

В Firefox:

Ввести about:config в адресную строку браузера, найти параметр и переключить его двойным щелчком мыши из в .

Для Safari

Выберете пункт из меню Safari, затем выберете вкладку и убедитесь, что опция включена.

Известные проблемы¶

  • Проблемы с обновлением старых версий аддона.

    Рекомендуется перезагрузка Blender после обновления SDK или аддона.

  • Драйверы NVIDIA версии 331 в Linux могут приводить к программным ошибкам WebGL.

  • Изменение фильтрации текстур на некоторых устройствах.

    При использовании iPad или браузера Internet Explorer отключена некорректная фильтрация текстур, которые используются материалами с типом прозрачности Alpha Clip.

  • Некоторые устройства, использующие GPU Mali, требуют принудительного включения WebGL в настройках браузера.

  • На системах Apple macOS и Blender 2.76 для работы локального сервера разработки может потребоваться установка Python 3.4. Это связано с ошибкой Blender https://developer.blender.org/T46623. В Blender 2.76b эта проблема устранена, поэтому рекомендуем обновиться.

  • При использовании драйверов Nouveau скелетная анимация может работать некорректно.

  • В браузерах IE11 и Microsoft Edge, а также на iPad могут некорректно рендериться текстуры с прозрачностью.

    Проблема актуальна для прозрачных материалов. Артефакты заметны на тех участках, где значение альфа-канала равно нулю или отличается от него незначительно. Для исправления рекомендуется поднимать значение альфа-канала пока артефакты не исчезнут (как правило, бывает достаточно величин в диапазоне от 0.01 до 0.05).

  • Сбой работы WebGL в браузере Chromium под Linux на GPU Nvidia GeForce серий 400/500 с драйверами версии выше 355.

    Проблема вызвана несовместимостью последних драйверов Nvidia с сэндбоксом Chromium. В качестве решения рекомендуется понизить версию драйверов до 340-х.

  • Проблемы со звуком.

    В некоторых версиях Google Chrome звук не воспроизводится для источников звука с типом «Background Music», если используется экспорт в HTML. В качестве решения в настоящий момент тип источника звука автоматически меняется на «Background Sound».

    Ошибка аудиоконтекста проявляется, если запущено много (больше 6) копий движка Blend4Web (например, на нескольких вкладках браузера или в нескольких iframe’ах на одной странице). Ошибка предотвращена путем отключением звука в приложении, если для него не может быть создан аудиоконтекст.

    На некоторых мобильных устройствах (в частности, Nexus 6 и Nexus 9) в браузере Google Chrome версий 50-52 может не работать пауза. В версиях Chrome начиная с 53 проблем быть не должно. Более подробная информация: https://bugs.chromium.org/p/chromium/issues/detail?id=616772.

  • QQ Browser на данный момент не поддерживает WebGL.

  • WebGL может работать нестабильно и давать сбои при использовании драйверов Mesa 11.x в Linux/Chrome на видеокартах Intel.

    Понижение версии драйверов до 10.х может решить проблему.

  • При использовании тач-сенсора GearVR в VR-режиме недоступна информация о движениях пальцев.

    Samsung Internet Browser не регистрирует события, связанные с движением пальцев на тач-сенсоре в режиме VR.

  • Частицы, испускаемые системами частиц, находящимися на неактивных (скрытых) слоях, могут иметь нулевые координаты, т.к. неактивные слои не обновляются Blender’ом.

    Проблема может быть решена с помощью активации слоёв перед экспортом или выбора необходимых слоёв вручную (в этом случае Blender их обновит).

  • Объекты с типом прозрачности Alpha Blending некорректно отображаются в браузере Google Chrome на устройствах с GPU Mali серии 400.

  • Использование нескольких экземпляров приложения на одной странице в Chrome 59 может привести к существенному росту потребления памяти или даже к закрытию вкладки. Эта проблема устранена в Chrome 60.

Добавить комментарий

Закрыть меню