WebGL и 3D на сайте: когда окупается, а когда мешает

WebGL и 3D на сайте окупаются, когда трёхмерность сама продаёт: продукт нужно покрутить в руках, бренд держится на впечатлении, а посетитель готов потратить на страницу время. Там, где задача — быстро получить заявку или ответить на вопрос из поиска, тяжёлая графика скорее мешает: замедляет загрузку, разряжает телефоны и отвлекает от главного действия. Правильный подход — решать про WebGL по каждой странице отдельно, закладывать бюджет производительности и всегда иметь облегчённую версию для слабых устройств и пользователей, отключивших анимацию.

Что дают WebGL, Three.js и шейдеры

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

С технической стороны барьера почти нет: WebGL 2 поддерживается всеми актуальными браузерами, включая Safari начиная с 15-й версии, и по данным caniuse доступен подавляющему большинству пользователей. Более новый стандарт WebGPU развивается, но поддерживается пока не во всех браузерах по умолчанию, поэтому для сайтов базой остаётся WebGL.

Что это даёт бизнесу:

• Запоминаемость. Необычная интерактивная сцена на первом экране выделяет сайт среди десятков похожих шаблонов и закрепляет визуальный образ бренда.
• Демонстрация продукта. Модель, которую можно вращать, приближать и перекрашивать, объясняет устройство товара лучше серии фотографий.
• Отстройка от конкурентов. В нишах, где все сайты выглядят одинаково, живая графика сразу сообщает об уровне компании.
• Вовлечение. Интерактивный сайт удерживает внимание: посетитель исследует страницу, а не пролистывает её.

Где 3D окупается

В проектах мы видим, что WebGL оправдан там, где эмоция или наглядность напрямую влияют на решение о покупке.

• Премиальные бренды. Мебель, ювелирные изделия, автомобили, недвижимость, дорогая техника. Покупатель ожидает впечатления, сопоставимого с шоурумом, и графика становится частью ценности продукта.
• Конфигураторы товаров. Выбор цвета, материала, комплектации с мгновенным результатом на модели. Здесь 3D заменяет десятки фотографий и снимает вопросы, которые иначе ушли бы в отдел продаж.
• Галереи и портфолио. Студии, архитектурные бюро, художники: сайт сам по себе служит доказательством компетенции.
• Запуски и промостраницы. Новый продукт, событие, спецпроект. Страница живёт ограниченное время, на неё ведут целевой трафик, и задача — чтобы о ней говорили.

Общий признак удачного сценария: 3D отвечает на вопрос посетителя, а не украшает страницу. Если без сцены человеку пришлось бы что-то додумывать, сцена работает.

Где WebGL мешает

• Посадочные страницы для сбора заявок. Человек пришёл с рекламы за конкретным предложением. Каждая лишняя секунда загрузки и каждый отвлекающий элемент уменьшают шанс, что он дойдёт до формы. Тяжёлая сцена на таком лендинге почти всегда проигрывает простому первому экрану с понятным оффером.
• Слабые устройства. Недорогие смартфоны, старые ноутбуки, офисные компьютеры без отдельной видеокарты. На них сцена дёргается, телефон греется, батарея садится, а интерфейс реагирует с задержкой.
• Контентные страницы для поиска. Статьи, справочные разделы, страницы услуг, которые должны ранжироваться в Яндексе и Google. Поисковому роботу нужен текст, а посетителю — быстрый ответ. Полноэкранный холст, под которым спрятан контент, работает против обеих задач.
• Сайты с длинным путём к действию. Каталоги, личные кабинеты, сервисы: там важнее скорость отклика интерфейса, чем эффект на первом экране.

Сценарии и альтернативы

Производительность: бюджет и запасные варианты

WebGL-сцену проектируют под ограничения так же, как макет под ширину экрана. Бюджет производительности задаётся до начала работ: сколько весят модели и текстуры, сколько кадров в секунду нужно держать, на каком минимальном устройстве сцена должна работать прилично.

Что помогает держать бюджет:

• Уровни качества. Сцена определяет возможности устройства и выбирает режим: полное качество для мощных компьютеров, упрощённое — для среднего класса, статичная картинка или видео — для слабых телефонов. Если частота кадров во время работы падает, качество можно снижать на лету.
• Сжатие ресурсов. Модели упрощают по количеству полигонов и сжимают, текстуры переводят в форматы, которые видеокарта читает без распаковки. Разница в весе бывает многократной.
• Отложенная загрузка. Сцена подгружается после основного контента или только когда блок появляется в зоне видимости. Пока она грузится, посетитель видит обычный текст и изображение.
• Пауза вне экрана. Когда сцена прокручена за пределы окна или вкладка неактивна, отрисовку останавливают — это экономит процессор и батарею.
• Мобильная версия отдельно. На телефоне меньше экран, слабее видеокарта и нет наведения курсора. Часто разумнее показать упрощённую сцену или красивую статичную версию, чем пытаться перенести десктопный эффект один в один.

Влияние на Core Web Vitals и доступность

Google оценивает скорость страниц по Core Web Vitals: отрисовка основного контента (LCP) — до 2,5 секунды, отклик на действие (INP) — до 200 миллисекунд, сдвиг макета (CLS) — не выше 0,1, причём хорошим результатом считается выполнение порогов для 75% посещений. WebGL может испортить все три показателя:

• LCP страдает, если крупнейший элемент первого экрана — сцена, которая ждёт загрузки библиотеки, модели и текстур. Решение: показать статичный кадр сразу, а сцену подменить после загрузки.
• INP ухудшается, когда инициализация сцены и тяжёлые вычисления занимают основной поток и страница не реагирует на нажатия. Решение: дробить подготовку на части и выносить расчёты из основного потока.
• CLS растёт, если холст появляется без заранее заданного размера и сдвигает контент. Решение: резервировать место под сцену в вёрстке.

Доступность — второй обязательный слой. Операционные системы позволяют пользователю отключить анимацию интерфейса, и сайт может узнать об этом через медиазапрос prefers-reduced-motion; по данным MDN, он поддерживается всеми основными браузерами с января 2020 года. Для людей с вестибулярными нарушениями крупное движение, вращение и параллакс могут вызывать головокружение и тошноту, поэтому при включённой настройке сцену стоит останавливать или заменять спокойной версией.

Кроме того, по критерию WCAG «Пауза, остановка, скрытие» (уровень A) движение, которое запускается само, длится дольше пяти секунд и идёт параллельно с другим контентом, должно иметь способ его остановить — если оно не является сутью страницы. Ещё несколько правил: важная информация не должна существовать только внутри холста, интерактивные элементы сцены должны дублироваться обычными кнопками, доступными с клавиатуры, а у декоративного холста не должно быть фокуса.

Именно поэтому в разработке интерактива и WebGL мы закладываем запасные варианты и режим без анимации с самого начала, а не дописываем их перед запуском.

Из чего складывается стоимость

Цена WebGL-проекта зависит не от «количества 3D», а от нескольких конкретных факторов:

• Источник моделей. Готовые инженерные файлы производителя нужно оптимизировать для браузера; моделирование с нуля — отдельная и заметная статья.
• Уровень интерактивности. Вращающаяся модель, сцена, реагирующая на прокрутку, и полноценный конфигуратор с логикой вариантов — это три разных объёма работы.
• Собственные шейдеры. Уникальные визуальные эффекты пишутся и отлаживаются вручную под конкретную задачу.
• Охват устройств. Уровни качества, мобильная версия, запасные варианты и тестирование на реальных слабых телефонах занимают значительную часть времени.
• Интеграции. Связь конфигуратора с каталогом, ценами, корзиной или CRM.

Альтернативы: CSS, SVG, видео и Lottie

Многие задачи, ради которых заказывают WebGL, решаются легче:

• CSS-анимации и переходы — появление блоков, ховеры, плавная смена состояний. Почти ничего не весят и хорошо работают на любых устройствах.
• SVG-анимация — схемы, иконки, иллюстрации, рисующиеся линии. Чёткая на любом экране и доступна для поисковых систем, если содержит текст.
• Видео — когда нужна кинематографичная картинка без интерактива. Сжатый ролик с постером обычно легче сцены и одинаково выглядит везде.
• Lottie — векторные анимации из After Effects: подходят для иллюстраций, онбординга, микроанимаций интерфейса.

Хорошо продуманные анимации и переходы часто дают ощущение «живого» сайта за долю стоимости и без риска для скорости.

Как решить: наше правило

Перед тем как добавлять 3D, задайте три вопроса:

• Отвечает ли сцена на вопрос посетителя? Показывает продукт, материал, масштаб — да. Просто красиво — повод выбрать вариант полегче.
• Готова ли аудитория ждать? Посетитель промостраницы или сайта бренда — скорее да. Пришедший с рекламы за ценой — нет.
• Есть ли бюджет на запасные варианты? Если денег хватает только на эффектную десктопную сцену без мобильной версии и режима без анимации, лучше вложить их в CSS-анимации и видео.

Три «да» — WebGL оправдан, и его стоит делать на ключевых страницах, оставляя контентные и конверсионные страницы лёгкими. Хотя бы одно «нет» — начните с лёгких средств. А если не уверены, где граница, начните с UX/UI-дизайна: на этапе прототипа видно, какие экраны действительно выигрывают от трёхмерности, а где она только мешает.