Статья
WebGL: что это, как включить и зачем сайту 3D
WebGL — технология, которая позволяет браузеру рисовать 3D-графику силами видеокарты: вращающиеся модели товаров, частицы, игры прямо на странице. Обычно она работает незаметно, но иногда браузер пишет, что WebGL не поддерживается, и 3D не показывается. Разбираем, что такое WebGL, как его включить и как владельцу сайта сделать так, чтобы страница работала у всех.
Что это такое
WebGL — Web Graphics Library, стандарт, по которому браузер рисует 2D- и 3D-графику с помощью видеокарты. Благодаря ему объёмную сцену можно показать прямо на странице, без плагинов и скачивания программ. Сейчас браузеры поддерживают вторую версию — WebGL 2.
Писать на «чистом» WebGL сложно, поэтому разработчики обычно берут библиотеки поверх него — самая известная из них Three.js. Игры, собранные на Unity для браузера, тоже работают через WebGL.
Где его используют
- Товары в 3D: модель можно покрутить и рассмотреть со всех сторон.
- Конфигураторы: выбрать цвет, материал, комплектацию и сразу увидеть результат.
- Эффекты на первом экране: частицы, жидкости, объёмные логотипы.
- Игры и интерактив прямо в браузере.
- Карты и визуализация данных.
Например, на первом экране лендинга нутрициолога Анны Стародумовой — спираль ДНК из частиц, а в концепте студии Soda банку напитка показывает 3D-модель, которая следит за курсором, и смена вкуса перекрашивает её прямо на витрине.
Как проверить, работает ли WebGL
- Откройте get.webgl.org: если видите вращающийся куб, WebGL работает.
- В Chrome наберите в адресной строке
chrome://gpu: там видно, работает ли WebGL с аппаратным ускорением или только программно.
Как включить
WebGL почти всегда включён по умолчанию, но работает только вместе с аппаратным ускорением — использованием видеокарты.
- Chrome: «Настройки» → «Система» → включите «Использовать аппаратное ускорение (при наличии)» и перезапустите браузер. Быстрее всего открыть настройку по адресу
chrome://settings/system. - Яндекс Браузер: «Настройки» → «Системные» → раздел «Производительность» → включите «Использовать аппаратное ускорение, если возможно» и перезапустите браузер.
- Safari: WebGL 2 включён по умолчанию начиная с Safari 15.
Если не помогло, обновите браузер и драйвер видеокарты и попробуйте отключить расширения — некоторые блокируют WebGL.
Почему WebGL может не работать
- Выключено аппаратное ускорение в настройках браузера.
- Видеокарта или её драйвер в «чёрном списке» браузера — так бывает со старыми видеочипами.
- Устаревший браузер или драйверы видеокарты.
- Удалённый рабочий стол или виртуальная машина, где у браузера нет доступа к видеокарте.
- Расширения и настройки защиты, которые блокируют WebGL.
Что важно владельцу сайта
- Запасной вариант обязателен. Если WebGL нет, посетитель должен увидеть нормальную страницу, а не пустой экран или вечную заставку.
- Главное — текстом. Предложение, цены и кнопка заявки не должны жить только внутри 3D-сцены: их читают и поисковики, и программы экранного доступа.
- Проверка на слабых телефонах. Сцена, которая летает на мощном компьютере, может греть и разряжать обычный смартфон.
- Вес и загрузка. 3D-модели и текстуры весят много — их подгружают так, чтобы первый экран не ждал всю сцену. Подробнее о скорости — в статье «Скорость загрузки сайта».
- Уменьшение движения. Если оно включено в настройках устройства, крупные эффекты лучше успокоить — об этом статья «Анимация на сайте».
Как устроено у нас
На главной нашего сайта — 3D-сцена на WebGL. Если у посетителя WebGL нет — выключено ускорение, видеочип в чёрном списке браузера или сайт открыт через удалённый рабочий стол, — главная показывает аккуратную версию без сцены: кейсы — картинками, а всё остальное на месте.
В лендинге 3D и анимацию ставим там, где они работают на задачу, и всегда с запасным вариантом: предложение, цены и форма заявки на странице видны и без сцены.