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

Как включить WebGL в Google Chrome

В сегодняшней инструкции мы поговорим о том, как включить WebGL в браузере Гугл Хром. Если вы ранее не сталкивались с термином «WebGL», то для начала прочтите вводный пункт о том, что это такое.

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

Что такое WebGL

WebGL является кроссплатформенным программным интерфейсом приложения для браузеров, позволяющий им отображать 3D графику. Это один из немногих достойных конкурентов Canvas от HTML 5. Разработчики практически всех ведущих и популярных браузеров состоят в группе Khronos и вместе развивают 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».

Fire Fox

Во-первых, включите WebGL:

• Перейти к about:config
• Ищи webgl.disabled
• Убедитесь, что его значение равно false (любые изменения вступают в силу немедленно, без перезапуска Firefox)

Затем проверьте состояние WebGL:

• Перейти к about:support
• Проверьте строку рендеринга WebGL в графической таблице:
  • Если в статусе указаны производитель, модель и драйвер видеокарты (например, «NVIDIA Corporation — NVIDIA GeForce GT 650M OpenGL Engine» ), то WebGL включен.
  • Если состояние выглядит как «Заблокировано для вашей видеокарты из-за нерешенных проблем с драйверами» или «Заблокировано для вашей версии графического драйвера» , то ваша видеокарта / драйвер заносится в черный список.

  Если ваша видеокарта / драйверы занесены в черный список, вы можете переопределить черный список. Внимание: это не рекомендуется! (см. примечание к черным спискам ниже). Чтобы переопределить черный список:

  • Перейти к about:config
  • Ищи webgl.force-enabled
  • Установите это true

  (Как и в Chrome, Firefox имеет флажок Использовать аппаратное ускорение, когда доступно , в разделе «Предпочтения» > « Дополнительно» > « Общие» > « Просмотр» . Однако, в отличие от Chrome, Firefox не требует, чтобы этот флажок был установлен для работы WebGL.)

  Помощники WebGL

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

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

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

  Активация WebGl на ПК

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

  Шаг 1. Включение аппаратного ускорения

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

  1. Для начала откройте «Настройки», кликнув по кнопке в виде трех точек, и в выпадающем списке выбрав соответствующий пункт.
  2. Промотайте список опций в самый низ и выберете кнопку по центру «Дополнительные».
  3. Пролистайте до раздела «Система».
  4. Опция «Использовать аппаратное ускорение» (при наличии) должна быть включена.

  

  Шаг 2. Включение WebGl

  Все приготовления завершены. Перейдем к активации:

  1. Перейдите по сервисной ссылке: chrome://flags .
  2. Пользуясь поиском, найдите WebGL Draft Extensions.
  3. Измените состояние с Disabled на Enabled.
  4. Перезапустите программу.

  

  Всегда помните, что на любой странице вы можете использовать сочетание клавиш Ctrl + F для поиска любой фразы!

  Шаг 3. Проверка работоспособности WebGl

  Теперь нужно проверить работоспособность. Чтобы это сделать, совершите следующие действия:

  1. Перейдите по сервисной ссылке: chrome://gpu .
  2. Найдите список под заголовком Graphics Feature Status.
  3. Статус должен обозначаться как Hardware accelerated. Если это так, то все подключено успешно.

  

  

  Using a small simple easy Web Server

  Next up you should install a small web server. I know «web server» sounds scary but the truth is web servers are actually extremely simple.

  Here’s a very simple one with an interface called Servez.

  Just point it at the folder where you unzipped the files, click «Start», then go to in your browser http://localhost:8080/webgl/ `http://localhost:8080/webgl/) and choose a sample.

  If you prefer the command line, another way is to use node.js. Download it, install it, then open a command prompt / console / terminal window. If you’re on Windows the installer will add a special «Node Command Prompt» so use that.

  Then install the servez by typing

  If you’re on OSX use

  Once you’ve done that type

  It should print something like

  

  If you don’t specify a path then servez will server the current folder.

  Как включить WebGL в вашем браузере

  Способ включения WebGL зависит от браузера, с которым вы работаете. Ниже приведен метод включения WebGL в браузерах на основе Chromium, Mozilla Firefox и Safari.

  Поскольку Google Chrome основан на Chromium, этот метод будет работать в большинстве браузеров на основе Chromium, таких как Brave, Vivaldi, Opera и т. Д. Просто убедитесь, что вы используете последнюю версию Google Chrome. Чтобы найти версию Chrome, нажмите значок меню в правом верхнем углу, нажмите «Справка», а затем «О Google Chrome».

  Предполагая, что вы используете последнюю версию Chrome, теперь нам нужно разрешить Chrome использовать наш аппаратный графический процессор для выполнения графических вычислений. Для этого перейдите в настройки Chrome, набрав «chrome: // settings» в адресной строке.

  

  На странице настроек прокрутите вниз, пока не увидите гиперссылку «Дополнительно». Нажмите на него, чтобы открыть расширенные настройки Google Chrome.

  Читайте: Храбрый против Вивальди: какой браузер лучше и почему

  

  Когда появятся расширенные настройки Chrome, перейдите в нижнюю часть страницы. Вы увидите «Использовать аппаратное ускорение, когда доступно» в разделе «Система». Нажмите на ползунок рядом с ним, чтобы включить аппаратное ускорение графического процессора. Опубликуйте это, вы увидите, что появляется кнопка «Перезапустить». Нажмите на нее, чтобы Google Chrome перезапустил и применил настройки. Убедитесь, что на других вкладках Chrome нет загруженных или несохраненных документов.

  

  После перезапуска Chrome перейдите к флажкам Chrome, чтобы включить WebGL. Введите в адресной строке «chrome: // flags».

  

  В меню Chrome Flags найдите WebGL. Вы увидите флаг под названием «WebGL 2.0 Compute», щелкните раскрывающийся список рядом с ним и выберите «Включено». Опубликуйте это, вы увидите всплывающее окно внизу с просьбой перезапустить Google Chrome. Для этого нажмите кнопку «Перезапустить сейчас».

  Для Chrome Android и Chrome Mac необходимо включить «Черновые расширения WebGL».

  

  Обновление драйвера видеокарты

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

  Откройте Диспетчер устройств командой devmgmt.msc из окна Win + R.

  

  Разверните вкладку Видеоадаптеры, щелкните правой кнопкой мыши на видеокарте и выберите пункт «Обновить». Если в системе установлены две видеокарты (встроенная и дискретная), обновите оба устройства.

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

  

  После перезагрузите компьютер и попробуйте открыть сайт, который не удавалось из-за отсутствия поддержки WebGL.

  Если не удалось обновить драйвер видеокарты в автоматическом режиме, попробуйте это сделать вручную. Для этого откройте сайт NVIDIA, AMD или Intel, в зависимости от производителя установленной видеокарты и загрузите последнюю версию программного обеспечения.

  

  Запустите загруженный файл и следуйте инструкциям на экране до завершения установки драйверов. После перезагрузите ПК и проверьте, блокируется ли доступ к сайту ошибкой.