Webgl как включить в google chrome
Перейти к содержимому

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

  • автор:

WebGL в Google Chrome

Поддержка технологии WebGL актуальной версии 2.0 была включена в Google Chrome ещё с 56-го релиза. Однако, по-прежнему можно встретить запросы пользователей на различных ресурсах сети о проблемах с отображением 3D-графики в браузере. Давайте рассмотрим все возможные причины.

Поддержка WebGL в Google Chrome

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

Как мы упоминали ранее, поддержка WEBGL 2.0 по умолчанию активирована в Chrome уже довольно давно. Но некоторым игровым проектам необходима дополнительная опция под названием «WebGL 2.0 Compute», которая расширяет базовые возможности основного набора WebGL API за счёт активации шейдеров.

Но сначала всё же рекомендуем убедиться, чтобы в настройках было включено аппаратное ускорение, без которого технология будет работать с ограничениями, ведь браузер попросту не сможет использовать видеокарту. В качестве дополнительной проверки можно зайти по адресу chrome://gpu/ и убедиться , что напротив строк « WebGL » и « WebGL2 » находится значение «Hardware accelerated».

Активация WebGL 2.0 Compute

  1. Проще всего сразу открыть в новой вкладке такую ссылку, выбрать «Enabled» и перезапустить программу.
  2. Второй вариант — открыть полный список экспериментальных функций Chrome, в строке поиска вверху ввести «webgl» и в результатах повторить процедуру активации WebGL 2.0 Compute, как на предыдущем этапе.

заметка Заметим, что флаг #enable-webgl2-compute-context почему-то исчез из chrome://flags/ в стабильной версии Chrome летом 2020-го. Но, к примеру, в beta и более «сырых» релизах остался.

Решение проблемы в играх

Бывает, что в браузерной игре пишет « WebGL not supported » или что-то подобное, хотя всё визуально в порядке с настройками WebGL. В этом случае попробуйте явно установить флаг Choose ANGLE graphics backend в значение D3D9 .

Тест поддержки WebGL браузером

Просто пара ссылок для проверки поддержки WebGL в любом браузере:

Как включить 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 в Chrome

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

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

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

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

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

Активация

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

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

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

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

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

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
      • Небольшие программы WebGL
      • 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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *