Webgl как включить в google chrome

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

Для обеспечения комфортной работы браузеров используются десятки библиотек и небольших утилит. На этом держится то, что мы называем глобальной сетью. Однако не все они в равной степени безопасны для персональных данных, а кто-то заслужил доверие. Поэтому сегодня мы поговорим о том, как включить WebGL в Google Chrome. Также в процессе повествования рассмотрим наиболее простой способ достижения желаемого.

Вводная информация

WebGL – это библиотека для разнопланового ПО, расширяющая возможность языков программирования в сфере веб-программирования и администрирования. К примеру, JavaScript, для которого становится проще создавать интерактивную графику под патронажем любого адекватного браузера.

Сегодня за некоммерческое использование продукта отвечает Khronos Group. Несмотря на не самую высокую популярность, библиотека востребована среди разработчиков.

Поэтому давайте не будем терять время зря и преступим к непосредственной теме статьи.

Активация

Для включения WebGL достаточно выполнить несколько простых шагов инструкции, представленной ниже:

Открыть браузер и кликнуть ЛКМ по троеточию в правой части пользовательского окна.
В системном меню выбрать пункт «Настройки».
Вызвать форму поиска на новой страничке, нажав на увеличительное стекло в правом верхнем углу.
Составить запрос «аппаратное».
Включить опцию «Использовать аппаратное ускорение (при наличии)», если она не активна в настоящий момент.
Вставить в адресную строку браузера ссылку chrome://flags.
Для перехода на нужную страничку нажать Enter .
В форму поиска ввести запрос webgl.
Активировать параметр WebGL 2.0 Compute. Для этого нужно задать ему значение Enabled.
Кликнуть на Relaunch, чтобы согласиться с перезагрузкой программы.

На этом активация ВебГЛ в Гугл Хроме завершена.

Подведем итоги

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

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

Для активации интерфейса WebGL на Google Chrome потребуется:

зайти в установки Google Chrome: chrome://settings;
выбрать раздел «Дополнительные»;
в подпункте «Система» активировать опцию «Использовать аппаратное ускорение»;
перезагрузить приложение;
зайти в раздел chrome://flags;
посмотреть, выключена ли опция «отключить WebGL».

Новые версии Google Chrome потребуют лишь активации опции, отвечающей за WebGL. Чтобы найти соответствующий пункт, достаточно занести в поисковик слово «WebGL». В заключении потребуется зайти в chrome://gpu, чтобы проверить, запущен ли интерфейс.

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

Для запуска программы WebGL необходимо:

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

В заключении следует перезагрузить Firefox.

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

Чтобы запустить интерфейс, вам потребуется:

зайти в раздел «Настройки» и выбрать опцию «Дополнительно»;
активировать параметр «Show Develop».

Также обязательно следует посмотреть, активирована ли опция «Enable WebGL».

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

Чтобы запустить интерфейс WebGL в данном браузере, необходимо написать в строке поиска команду OPERA:CONFIG#ENABLE%20HARDWARE%20ACCELERATION, чтобы активировать аппаратное ускорение. Далее для запуска WebGL потребуется набрать в поисковой строке фразу OPERA:CONFIG#ENABLE%20WEBGL.

WebGL Установка и настройка

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

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

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

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

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

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

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

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

Просто укажите ему директорию с распакованными файлами, кликните на «Start», затем откройте в браузере страницу http://localhost:8080/webgl/ и найдите необходимый пример.

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

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

npm -g install servez

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

sudo npm -g install servez

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

servez путь/к/распакованным/файлам

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

Теперь можно в браузере перейти по адресу http://localhost:8080/webgl/ .

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

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

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

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

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

Помощники WebGL

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

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

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

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

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

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

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

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

Основы
- Основы WebGL
- Как работает WebGL
- Шейдеры и GLSL в WebGL
- WebGL State Diagram
- Обработка изображений в WebGL
- Продолжаем обработку изображений в WebGL
- 2D-перенос в WebGL
- 2D-поворот в WebGL
- 2D-масштабирование в WebGL
- 2D-матрицы в WebGL
- WebGL 3D — Ортогональ
- WebGL 3D — Перспектива
- WebGL 3D — Камеры
- WebGL 3D — Направленное освещение
- WebGL 3D — Точечное освещение
- WebGL 3D — Прожектор
- WebGL — Меньше кода, больше веселья
- WebGL — Отрисовка нескольких объектов
- WebGL — Графы сцены
- WebGL 3D — Создание модели
- Loading .obj files
- Loading .obj w .mtl files
- WebGL 3D — Текстуры
- WebGL — Данные для текстур
- WebGL — Использование 2 и более текстур
- WebGL — Кросс-доменные изображения
- WebGL 3D — Перспективная коррекция текстур
- Planar and Perspective Projection Mapping
- WebGL — Рендеринг в текстуру
- Shadows
- 2D
  - WebGL 2D — DrawImage
  - WebGL 2D — Стек матриц
  - Sprites
  - Cubemaps
  - Environment maps
  - Skyboxes
  - Skinning
  - Fog
  - Picking (clicking on stuff)
  - WebGL текст — HTML
  - WebGL текст — Canvas 2D
  - WebGL текст — Используем текстуру
  - WebGL текст — Используем глиф-текстуру
  - Ramp Textures (Toon Shading)
  - GPGPU
  - Smallest Programs
  - Drawing Without Data
  - Shadertoy
  - Pulling Vertices
  - Indexed Vertices (gl.drawElements)
  - Instanced Drawing
  - WebGL Установка и настройка
  - Шаблон WebGL
  - Изменение размера Canvas в WebGL
  - WebGL — Анимация
  - Points, Lines, and Triangles
  - Multiple Views, Multiple Canvases
  - Visualizing the Camera
  - WebGL и прозрачность
  - WebGL — 2D и 3D библиотеки
  - WebGL — Антипаттерны
  - WebGL Matrices vs Math Matrices
  - Precision Issues
  - Taking a screenshot
  - Prevent the Canvas Being Cleared
  - Get Keyboard Input From a Canvas
  - Use WebGL as Background in HTML
  - Cross Platform Issues
  - Questions and Answers
  - Attributes
  - Texture Units
  - Framebuffers
  - readPixels
  - References
  - Документация по вспомогательным функциям
  - TWGL, лёгкая библиотека-помощник для WebGL
  - github
  Включение WebGL в Google Chrome
  
  Технология WebGL в интернет-браузере Google Chrome существенно расширяет графические возможности, позволяя без проблем работать многим сложным элементам, включая 3D-игры, без использования каких-либо дополнений. Изначально данная функция программы находится в активированном состоянии и не может быть деактивирована, но только если компьютер соответствует минимальным требованиям.
  
  chrome://gpu/
  
  Чтобы убедиться в том, что на вашем устройстве и в конкретной версии Хрома поддерживается WebGL, скопируйте и вставьте в адресную строку представленный выше адрес, и на открывшейся странице в блоке «Graphics Feature Status» найдите строки с упоминанием данной библиотеки. В обоих отмеченных нами случаях рядом хотя бы с одним из вариантов должна быть подпись «Hardware accelerated».
  
  Если по каким-то причинам WebGL не поддерживается, можете попробовать обновить драйвера видеокарты. Кроме того, причиной такой ситуации может быть деактивированное аппаратное ускорение, блокирующее многие важные функции последних версий Google Chrome.
  
  Аппаратное ускорение
  1. И хотя настройки рассматриваемого браузера не предоставляют параметров для управления WebGL, на работоспособности может отразиться аппаратное ускорение. Чтобы добиться правильной работы всех функций, данную опцию необходимо включить, первым делом развернув главное меню в правом верхнем углу окна и выбрав раздел «Настройки».
  2. Пролистайте страницу ниже до подраздела «Дополнительные» и найдите блок «Система». Для большего удобства также вполне можете воспользоваться вспомогательным меню в левой части параметров браузера.
  3. Разобравшись с поиском, кликните левой кнопкой мыши по строке «Использовать аппаратное ускорение (при наличии)» и убедитесь, что цвет ползунка изменился.
  4. Завершить процедуру включения можно воспользовавшись появившейся кнопкой «Перезагрузить» рядом с указанным ползунком или вручную перезапустив программу. В результате WebGL и многие другие функции, связанные с аппаратным ускорением, будут задействованы. Обратите внимание, что аппаратное ускорение по умолчанию включено сразу после установки браузера. По этой причине в качестве экстренной меры, если что-то работает неправильно, можно прибегнуть к полной переустановке. Читайте также: Как удалить и установить Google Chrome на ПК
  WebGL 2.0 Compute
  1. Помимо рассмотренных выше параметров, в Google Chrome, равно как и в любом веб-обозревателе на основе Chromium, присутствуют скрытые настройки, в том числе отвечающие за работу WebGL. Для включения скопируйте и вставьте представленный ниже код в адресную строку Хрома и на открывшейся странице в текстовое поле «Search flags» введите «WebGL». chrome://flags/
  2. Находясь на вкладке «Available», найдите пункт «WebGL 2.0 Compute», разверните выпадающий список «Disabled» справа и установите значение «Enabled». Если все сделано правильно, функция будет активирована.
  3. Кроме этого, проделайте аналогичное с другим пунктом «WebGL Draft Extensions», точно так же выставив значение «Enabled». Завершить настройку можно, равно как и в случае с аппаратным ускорением, выполнив перезапуск с помощью кнопки «Relaunch» во всплывающей подсказке на той же странице или вручную.
  После всех описанных действий, если позволяет компьютер, WebGL будет включен. Убедиться в этом можно только если посетить сайт с обязательными требованиями к поддержке данной библиотеки.
  
  Вариант 2: Мобильное приложение
  
  Мобильная версия браузера Google Chrome в техническом плане почти не отличается от программы для компьютера, из-за чего WebGL играет не меньшую роль. Здесь функция также должна быть включена по умолчанию, в чем можно убедиться на странице chrome://gpu/ , однако правильной работе на некоторых сайтах могут препятствовать находящиеся в деактивированном состоянии экспериментальные опции.
  1. Воспользуйтесь указанным выше кодом, чтобы открыть раздел с экспериментальными функциями Гугл Хрома, и коснитесь блока «Search flags». Укажите в качестве запроса «WebGL» и ознакомьтесь с результатами на вкладке «Available».
  2. Здесь будет доступен только один вариант «WebGL Draft Extensions», под блоком с которым необходимо тапнуть по кнопке «Disabled». Для того чтобы выполнить включение опции, во всплывающем окне попросту выберите значение «Enabled». С помощью кнопки «Relaunch» во всплывающей подсказке в нижней части экрана выполните перезапуск. После этого сайты и прочие элементы, требующие эту библиотеку, заработают должным образом.
  Похожие публикации: