Composs.ru

Возможности технологии WebGL и как ее включить в браузерах

Интернет КомментироватьЗадать вопросНаписать пост

Современные интернет ресурсы требуют современных технологий, поэтому работа в этом направлении идет полным ходом и не останавливается. Любой крупный и не очень сайт использует сейчас целый набор средств по разработке и модернизации. Они могу включать:

  • язык гипертекстовой разметки HTML – база верстки;
  • скриптовый язык PHP для создания сценариев и работы с пользователем;
  • ООЯП JavaScript работы с объектами приложений и придания веб-страницам интерактивности;
  • каскадные таблицы стилей CSS для создания красивых шаблонов фона, оформления тегов и шрифтов.
  • различные СУБД, основной для которых практически всегда становится SQL.

По праву, JavaScript можно назвать одним из самых важных компонентов этого списка. Именно на его основе написаны такие инструменты, как AJAX, jQuery, WebGL.

Что такое WebGL

WebGL является кроссплатформенным программным интерфейсом приложения для браузеров, позволяющий им отображать 3D графику. Это один из немногих достойных конкурентов Canvas от HTML 5. Разработчики практически всех ведущих и популярных браузеров состоят в группе Khronos и вместе развивают WebGL и реализуют его в связи с особенностями своих приложений.Что такое WebGL

Основные функции

Сегодня WebGL применяется для:

  • отображения векторных и растровых изображений на сайтах;
  • для создания красивых анимированных фонов;
  • построения графиков и диаграмм;
  • анимации;
  • динамических заставок;
  • браузерных 2D и 3D игр.

Это средство не волшебная палочка, нельзя сказать ему что сделать или, пользуясь интерфейсом пользователя, собрать сцену «руками». WebGL отображает точки, линии и полигоны на основе написанного кода. Чтобы получить точки, линии и полигоны, траектории их движения, освещение, тени и так далее, используются математические формулы.

Любые данные, используемые для отображения элементов должны быть переданы в графический процессор. Существует 4 способа для получения шейдером этих данных:

  • атрибуты и буферы (массивы координат);
  • uniform-переменные, т.е глобальные переменные;
  • текстуры, массивы, содержащие растровые изображения или заливку;
  • varying-переменные, т.е переменные для передачи данных из вершинного шейдера в фрагментный.
  Увеличение скорости интернета на компьютере или ноутбуке

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

Поддерживаемые версии браузеров

Технология поддерживается следующими версия браузеров:

  • GoogleChrome, включен во всех версии начиная с 9;
  • Opera, реализован в последней версии 12.0;
  • MozillaFirefox, доступен для всех платформ с нужной видеокартой и драйверами, начиная с версии 4.0;
  • Safari, поддерживает технологию, но она отключена по умолчанию;
  • Internet Explorer, не поддерживает технологию официально, просмотр доступен с плагинами IEWebGL или Chrome Frame.

В случае, если у обозревателя нет поддержки технологии или она выключена, пользователь получить подобное сообщение: «your browser does not support webgl», что в переводе означает – «Ваш браузер не поддерживает WebGL».

Как включить WebGL?

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

Google Chrome

Для включения WebGL в Google Chrome необходимо:

  • запустить приложение;
  • перейти в chrome://settings, введя строку в адресной строке;Настройки Хрома
  • пролистать вниз, найти пункт «Дополнительные» и раскрыть его;
  • выбрать вкладку «Система» и убедиться, что параметр «Использовать аппаратное ускорение» включен;Аппаратное ускорение
  • перезапустить программу;
  • перейти в chrome://flags;
  • убедиться, что параметр «отключить WebGL» не активен. В новых версиях достаточно ввести в поле поиска «WebGL» и включить его, если он неактивен;Включение технологии
  • проверить состояние включения, перейдя в chrome://gpu.Состояние WebGL

Яндекс.Браузер

Так как Яндекс.Браузер создан на основе Chromium, то для него будут работать все те же действия, что и для Google Chrome. Необходимо:

  • перейти в browser://gpu/;Настройки Яндекса
  • найти раздел Graphics Feature Status и добиться, чтобы все его элементы или хотя бы «WebGL» были зелеными;Проверка настроек
  • для этого следует перейти в browser://flags, найти пункты #ignore-gpu-blacklist и #enable-gpu-rasterization и включить их.
  Способы скачивания музыки и песен на телефон Андроид

Опера

Для включения компонента в Опере необходимо:

  1. Прописать в адресной строке OPERA:CONFIG#ENABLE%20HARDWARE%20ACCELERATION. Это включит аппаратное ускорение.Конфигурация оперы
  2. Прописать в адресной строке OPERA:CONFIG#ENABLE%20WEBGL. Это включит саму технологию.

Mozilla Firefox

Для включения необходимо:

  • перейти в настройки, открыть «Дополнительные» и проверить включение параметра «Использовать аппаратное ускорение»;Аппаратное ускорение
  • перейти в about:config;
  • согласиться с предупреждением;
  • ввести в поиск force-enabled и установить значение на «true»;
  • перейти к поиску и найти disabled, убедиться, что значение стоит «false»;
  • Перезапустить браузер.

Safari

Для активации необходимо:

  • перейти в настройки браузера;
  • выбрать вкладку «Дополнительно»;
  • поставить флаг «Show Develop», если он не стоит;
  • в меню разработчика убедиться, что флаг напротив «Enable WebGL» установлен.Раздел безопасности

Проблемы с драйверами

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

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

Читайте также:

Reader Interactions