WebGL Установка и настройка
Технически, вам не нужно ничего, кроме браузера, чтобы начать разработку на WebGL. Зайдите на jsfiddle.net, jsbin.com или codepen.io и просто начните выполнять уроки.
На всех указанных ресурсах при желании можно добавлять внешние скрипты через пару тегов .
Но здесь не без ограничений. WebGL имеет более строгие ограничения по сравнению с Canvas2D при загрузке изображений — вы не сможете запросто использовать изображения по всему интернету. Кроме того, работа будет идти быстрее, когда всё находится на локальной машине.
Предположим, что вы хотите запускать и редактировать примеры с этого сайта. Для начала нужно скачать сам сайт по этой ссылке.
Распакуйте архив в какую-нибудь директорию.
Проблемы при запуске движка¶
1. Появляется сообщение “Browser could not initialize WebGL.”
Следует выполнить действия, описанные в разделе Ошибка инициализации WebGL .
2. Видны элементы интерфейса или пустой экран, но сцена не отображается. При этом тестовый сайт http://get.webgl.org/ и другие WebGL приложения работают корректно.
-
Файлы ресурсов, которые пытается загрузить движок, были перемещены или удалены.
-
Используются старые версии драйверов.
-
Используются открытые драйвера, не обеспечивающие поддержку WebGL.
Для пользователей Linux — ввиду неполной реализации OpenGL стека в драйверах с открытым кодом в настоящий момент рекомендуется использовать проприетарные драйверы текущей версии для графических процессоров Nvidia и AMD.
Используется устаревшая операционная система, такая как Windows XP.
Браузер не настроен для работы с локальными ресурсами. В этом случае проблема может быть решена использованием локального веб-сервера. См. раздел Загрузка локальных ресурсов .
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 и установить в поле значение 1 , нажать кнопку Сохранить и перезагрузить браузер, затем перейти по адресу Enable WebGL и установить в поле значение 1 , нажать кнопку Сохранить и перезагрузить браузер.
- Apple Safari (только в ночных сборках).
Небольшой пример, если Вы используете браузер с поддержкой WebGL, Вы увидите небольшой цветной прямоугольник.
Поддержка WebGL в Вашем браузере:
Если у Вас отобразился закрашенный прямоугольник, то ниже представлено несколько сайтов с множеством примеров использования WebGL, если же Вы ничего не увидели — Вам стоит призадуматься над сменой браузера.
Проверьте, включено ли аппаратное ускорение
-
- Нажмите значок «Три кнопки» в правом верхнем углу браузера.
- Откройте Настройки > прокрутите вниз и выберите Дополнительно.
- Найдите вкладку « Система » и убедитесь, что включен режим « Использовать аппаратное ускорение», когда он доступен — он должен быть синего цвета.
- ЧИТАЙТЕ ТАКЖЕ: 4 лучших браузера со встроенным VPN, которые вы должны использовать в 2019 году
Включить WebGL в Chrome и Firefox
Эта проблема может быть вызвана из-за ряда факторов. Он включает в себя как браузеры, так и операционную систему. Графический драйвер также играет решающую роль, помогая WebGL функционировать на компьютере.
Сегодня мы рассмотрим, как решить эту проблему в ваших обновленных браузерах.
- Вручную включить WebGL в Chrome или Firefox
- Обновите драйвер видеокарты.
1] Включите WebGL вручную в Chrome или Firefox
Прежде всего, откройте Google Chrome и нажмите кнопку «Меню» (нажав на кнопку с тремя точками в правом верхнем углу). Далее нажмите на Настройки. Прокрутите вниз, чтобы найти кнопку с надписью Advanced и нажмите на нее.
В разделе под названием Система включите переключатель Использовать аппаратное ускорение, когда оно доступно.
Перезапустите Google Chrome.
Когда он снова запустится, введите chrome: // gpu/ в адресную строку и нажмите клавишу Enter .
Теперь это будет отображаться, если WebGL правильно включен или нет.
Кроме того, вы можете открыть браузер Google Chrome и перейти по следующему URL: chrome: // flags. Найдите Отключить WebGL в поле поиска в верхней части страницы. Переключите соответствующую запись на Отключено . Перезапустите Google Chrome, чтобы изменения вступили в силу.
Это позволит использовать сенсорный интерфейс в Google Chrome.
Пользователи Firefox могут делать следующее. Чтобы отключить аппаратное ускорение в Firefox, откройте браузер> Параметры.
Теперь в разделе General, прокрутите немного вниз, чтобы увидеть Performance. Здесь выберите параметр Использовать аппаратное ускорение, когда доступно .
2] Обновите драйвер видеокарты
В меню WinX откройте Диспетчер устройств. Разверните список с надписью Адаптеры дисплея.
Щелкните правой кнопкой мыши список вашей видеокарты NVIDIA и выберите Включить. Теперь снова щелкните его правой кнопкой мыши и выберите Обновить программное обеспечение драйвера…
Откроется новое окно. Нажмите Автоматический поиск обновленного программного обеспечения драйвера.
Если Windows теперь обнаружит вашу видеокарту и последнюю версию драйвера для нее, то отлично! Иначе, действуйте следующим образом:
- Снова щелкните его правой кнопкой мыши и выберите Обновить программное обеспечение драйвера… .
- Нажмите Просмотреть мой компьютер для поиска драйверов.
- Нажмите Позвольте мне выбрать из списка драйверов устройств на моем компьютере.
- Выберите совместимый драйвер для вашего компьютера с именем Графическая карта NVIDIA и продолжайте.
Пусть весь процесс закончится. Затем перезагрузите компьютер, чтобы изменения вступили в силу. Это поможет вам обновить графический драйвер.
Включение WebGL
Если ваш браузер поддерживает WebGL, выполните следующие действия, чтобы включить его.
- Необходимо включить аппаратное ускорение в браузере:
1) Браузер Google Chrome
Откройте настройки браузера. Затем “Дополнительные настройки”. Находим раздел “Система”, убедиться, что аппаратное ускорение включено. Перезапустите браузер и заходите в игру!
2) Браузер Opera
Откройте настройки браузера. Затем “Дополнительные настройки”. Находим раздел “Система”, убедитесь, что аппаратное ускорение включено. Перезапустите браузер и заходите в игру!
3) Браузер Yandex
Откройте настройки браузера. Затем «Дополнительные настройки». Найдите раздел «Система», убедитесь, что галочка напротив “Использовать аппаратное ускорение, если возможно” включена. Перезапустите браузер и заходите в игру!
4) Бразуер FireFox
Откройте настройки браузера -> Основные-> Производительность-> Снимите галочку “Использовать рекомендуемые настройки производительности, убедитесь, что галочка напротив “По возможности использовать аппаратное ускорение” включена. Перезапустите браузер и заходите в игру!
5) Браузер Safari
Откройте настройки браузера -> Дополнительно -> Убедитесь, что установлен флажок Show Develop в панели меню-> В меню « Разработка Safari» убедитесь, что Enable WebGL установлен. Перезапустите браузер и заходите в игру!
2. Если первый пункт не помог. Тогда советуем обновить драйвера видеокарты. Сделать это можно тут:
Как обновить драйвер видеокарты
Для начала, необходимо определить модель видеокарты. Для этого кликаем правой кнопкой мыши по «Компьютер» и выбираем «Управление».
Переходим в «Диспетчер устройств».
Раскрываем «адаптеры» и записываем модель видеокарты (в данном примере, GeForce 8500 GT).
Обновить драйвер Intel Graphics
2. В поле “Обновляйте ваши драйверы автоматически” нажимаем “Приступая к работе”;
3. Будет предложена установка приложения Intel® Driver & Support Assistant. Нажимаем “Загрузка”;
4. Запускаем скачанный файл и устанавливаем приложение, отвечая «Принять» и «Установить»;
5. После установки запускаем приложение. Нажимаем “Загрузить все обновления”, а затем “Установить все обновления”;6. В появившемся окне отвечать “Далее”, “Да”, “Далее”;
7. После установки нажать “Далее”, “Да, перезапустить компьютер”. Всё!
Обновить драйвер видеокарты NVIDIA
- Заходим на сайт NVIDIA;
- В разделе «Вариант 1: Вручную найти драйверы для моих продуктов NVIDIA» выбираем свою видеокарту (в данном примере GeForce 8500 GT), операционную систему (например, Windows 7) и нажимаем «ПОИСК»;
3. В следующем окне нажимаем «ЗАГРУЗИТЬ СЕЙЧАС»;
Создать карусель Добавьте описание4. Принимаем лицензионное соглашение Создать карусель Добавьте описание и сохраняем файл на компьютер;
5. Запускаем скачанный файл и устанавливаем драйвер, отвечая «OK» и «Далее»;
6. Выполняем перезагрузку.Обновить драйвер видеокарты AMD
- Заходим на сайт AMD;
- В разделе «select your product from the list» выбираем свою видеокарту и нажимаем по SUBMIT:
3. В следующем окне находим операционную систему своего компьютера, раскрываем детали кликнув на плюсик и нажимаем кнопку «Download»: Создать карусель Добавьте описание
и сохраняем файл на компьютер;
4. Запускаем скачанный файл и устанавливаем драйвер, отвечая «OK» и «Далее»;
5. Выполняем перезагрузку.