WebGL в конфигураторе товара: когда 3D в браузере окупается
WebGL показывает интерактивную 3D-графику в браузере без плагина, но использует графическую мощность устройства клиента. Оправдано ли 3D в браузере, зависит от числа комбинаций, от того, меняется ли форма вместе с опциями, и от того, что происходит на слабых устройствах. Узкое место — модель, а не код.
WebGL показывает интерактивную 3D-графику в браузере без плагина, но использует графическую мощность устройства клиента. 3D в браузере оправдано, когда форма изделия меняется вместе с опциями, изделие нужно осмотреть со всех сторон или число комбинаций слишком велико для заранее отрисованных изображений. При небольшом числе комбинаций изображения или слои проще, быстрее и доступнее. По данным caniuse (сентябрь 2026) около 97,13 % пользователей браузеров поддерживают WebGL 2; это доля браузеров, а не гарантия, что ваша сцена запустится на любом устройстве.
Краткий ответ
WebGL показывает интерактивную 3D-графику в браузере без плагина, но использует графическую мощность устройства клиента. 3D в браузере оправдано, когда форма изделия меняется вместе с опциями, изделие нужно осмотреть со всех сторон или число комбинаций слишком велико для заранее отрисованных изображений. При небольшом числе комбинаций изображения или слои проще, быстрее и доступнее. По данным caniuse (сентябрь 2026) около 97,13 % пользователей браузеров поддерживают WebGL 2; это доля браузеров, а не гарантия, что ваша сцена запустится на любом устройстве.
Что такое WebGL и чем он не является
По данным MDN, WebGL — это JavaScript-интерфейс для интерактивной 2D- и 3D-графики в браузере без плагинов, она рисуется в элементе canvas. WebGL 1 в основе соответствует OpenGL ES 2.0, WebGL 2 даёт значительную часть OpenGL ES 3.0; Khronos Group описывает его как открытый стандарт без лицензионных отчислений. Чем WebGL не является: конфигуратором. Это графический интерфейс. Опции, правила, цену и передачу в заказ нужно строить поверх (об этом наша статья о конфигураторе товара). И WebGL требует подходящего оборудования: MDN, например, указывает, что формат сжатия текстур S3TC есть не на каждой видеокарте.
Нужен ли вам 3D вообще? Изображения на каждую комбинацию как альтернатива
Изображения на каждую комбинацию
Число комбинаций — это произведение значений всех опций. При небольшом числе каждую комбинацию можно заранее отрисовать как изображение. Оно предсказуемо грузится, работает на любом устройстве и может иметь альтернативный текст.
Слои изображений
Если каждая опция меняет только цвет или материал своей области, слои можно накладывать друг на друга. Тогда число изображений растёт как сумма значений, а не как произведение: четыре опции по пять значений дают 20 слоёв вместо 625 комбинаций. Это работает, только пока опции независимы друг от друга, а форма не меняется.
Настоящий 3D
Если форма меняется или клиент должен вращать изделие и осматривать его со всех сторон, слоёв уже не хватает. Здесь начинается решение в пользу 3D со всеми последствиями для модели, времени загрузки и устройств.
Расчётный пример: изображения, слои или 3D
Три опции
5 цветов × 4 материала × 3 размера = 60 комбинаций. 60 заранее отрисованных изображений — это обозримо.
Четыре опции
4 опции по 5 значений дают 625 комбинаций. Как независимых слоёв достаточно 20 изображений; как отдельных изображений было бы 625.
Форма меняется
Если опция меняет силуэт, например через размеры или аксессуары, слои перестают работать. Здесь начинается вопрос о 3D.
Когда настоящий 3D оправдан (наша оценка)
Форма зависит от опций
Размеры, аксессуары или компоненты меняют силуэт; одна фотография на состояние невозможна.
Слишком много комбинаций для изображений
Число растёт умножением быстрее, чем вы успеете создавать и вести изображения, а слои не подходят.
Клиент должен осмотреть со всех сторон
Детали на обратной стороне, внутренние стороны или посадка решают покупку.
Фотографий ещё нет
Изделия на заказ появляются только после заказа. Тогда предпросмотр — единственная картинка.
Чего мы не утверждаем
Это оценка из логики продукта, а не измерение. Доказательств того, что 3D повышает долю покупок или снижает возвраты, у нас нет; утверждения об этом в блогах поставщиков не называют источник.
Что должно происходить в браузере клиента
По данным caniuse, около 97,13 % пользователей браузеров в мире поддерживают WebGL 2 (данные StatCounter, сентябрь 2026). Это доля браузеров, а не обещание, что ваша сцена запустится на любом устройстве.
Запросить контекст
При запросе контекста WebGL через getContext браузер возвращает null, если тип контекста не поддерживается (MDN). Этот случай нужно обработать.
Проверить производительность
Параметр failIfMajorPerformanceCaveat определяет, создавать ли контекст при низкой производительности или без аппаратной видеокарты (MDN). Так можно распознать слабые устройства до того, как страница начнёт тормозить.
Загрузить ресурсы
Модель и текстуры приходят сжатыми и по частям. MDN советует не полагаться на расширения и предельные значения и использовать сжатые текстуры.
Подготовить запасной вариант
Без контекста, при слабой производительности или после потери контекста (по MDN это возможно) клиенту нужен равноценный путь к заказу: изображения и обычный выбор опций.
Запасной вариант — не исключение, а часть конфигуратора. Выбор опций должен работать без 3D.
Путь решения: изображения, слои или 3D
Сколько комбинаций? (перемножить значения всех опций) немного → заранее отрисованные изображения слишком много ↓ Каждая опция меняет только цвет или материал, независимо от остальных? да → слои изображений нет (форма меняется или нужен осмотр со всех сторон) ↓ 3D в браузере (WebGL) с проверкой устройства и запасным вариантом на изображениях
Узкое место — модель, а не код
Формат файла
По данным Khronos, glTF 2.0 — стандарт ISO/IEC (12113:2022); сцена описывается как JSON и упаковывается в один двоичный файл (.glb). Для текстур есть KTX 2.0, контейнер для GPU-текстур со сжатием Basis Universal через расширение KHR_texture_basisu.
Размер файла
Джейсон Григсби из Cloud Four 6 февраля 2024 года измерил четыре модели: с Draco-сжатием файлы оказались меньше 10 % от исходных (GLB и USDZ). Это измерение одного автора на четырёх моделях, а не общий закон, но оно показывает, где можно сэкономить вес.
Кто поставляет модель?
Она берётся из ваших CAD-данных, от подрядчика или от производителя? Каждый источник даёт разные размеры файлов и права. Выясните, кто готовит модель для браузера и кто повторяет это для каждого нового изделия.
Дополненная реальность
Для AR на iPhone Quick Look от Apple, по данным Cloud Four, требует формат USDZ. Если AR нужна дополнительно, это ещё один тип файла.
Мобильные, время загрузки, батарея: измерять, а не обещать
Задать бюджет
Задайте бюджет размера для модели, текстур и скрипта и измеряйте его на реальной странице. Целевые значения из блогов поставщиков — цели без метода измерения.
Тестировать на реальных устройствах
Тестируйте на Android среднего класса, на старом iPhone и в замедленной сети, а не только на рабочем компьютере разработчика. Расход батареи и нагрев видны именно там.
Рисовать меньше
MDN называет такие меры: меньше вызовов отрисовки, сжатые текстуры, меньший canvas при том же размере показа на странице и осторожный ориентир максимального размера текстуры (4096).
Учесть потерю контекста
Браузер может потерять контекст WebGL. После этого страница должна пересобраться или перейти на запасной вариант.
Видимость и удобство: поиск, клавиатура, экранные читалки
Поиск
Штутгартское агентство по WebGL само называет это ограничением: поисковые системы не читают содержимое canvas, поэтому текст о товаре и метаданные должны стоять рядом как HTML. Мы считаем это правильным выводом: название товара, описание, опции и цена должны быть в странице, а не в сцене.
Клавиатура
Вращение мышью или свайпом не должно быть единственным способом. У каждого жеста нужна кнопка (повернуть влево и вправо, масштаб, сбросить вид), доступная с клавиатуры.
Экранные читалки
Опции — настоящие элементы формы с подписями; выбранная конфигурация дополнительно выводится текстом. У canvas есть текстовая альтернатива.
3D-просмотр для сайта: встроить готовое или сделать самим?
Просмотрщик — не конфигуратор
3D-просмотрщик показывает модель для вращения и масштабирования. Конфигуратор меняет модель по правилам, считает цену и передаёт выбор. Если клиенты должны только смотреть на изделие, хватит просмотрщика; конфигурируемым товарам нужно больше.
Встроить готовое
Веб-компонент model-viewer распространяется по лицензии Apache 2.0 и, согласно modelviewer.dev, поддерживает две последние основные версии автоматически обновляемых браузеров и две последние версии Safari на macOS и iOS. По данным Cloud Four, он весит около 245 КБ JavaScript. Возможна и хостинговая платформа для 3D-моделей; тарифы и условия мы не проверяли, читайте их на странице поставщика.
Сделать самим
Собственная сцена (например, на фреймворке вроде Three.js) нужна, когда правила, цена или аксессуары меняют сцену. Именно эта часть требует разработки; просмотрщик сам по себе её не требует.
Сколько стоит конфигуратор с 3D в браузере?
Сумм мы не называем
Цены, которые мы видели, — оценки отдельных поставщиков или авторов без источника, и в них смешаны разные статьи расходов. Поэтому суммы мы не называем.
Рендеры
Готовые изображения или анимации изделия. Это другая услуга, чем интерактивный 3D в браузере; в нашем исследовании по запросам о 3D-визуализации товара находились в основном цены на рендеры.
3D-модель
Каждому изделию нужна модель, подготовленная для браузера. Число изделий и вариантов определяет эту статью, и она повторяется для каждого нового изделия.
Логика и цена
Опции, правила, расчёт цены, передача в заказ: тот же объём, что у любого конфигуратора, с 3D или без.
Интеграция, эксплуатация и запасной вариант
Магазин, ERP, хостинг, сопровождение, тесты на устройствах и 2D-запасной вариант.
Следующий шаг: три вопроса к вашему продукту
1. Сколько комбинаций получится, если перемножить значения всех опций? 2. Каждая опция меняет только цвет или материал или меняется форма? 3. Что увидит клиент со старым смартфоном, если 3D не запустится? Если ответы «немного», «только цвет» и «хватает изображений», 3D вам не нужен. Если «много», «форма» и «у нас есть запасной вариант», на WebGL стоит посмотреть, лучше всего сначала как на небольшой прототип с одним изделием и измерением на реальных устройствах.
Выводы
- WebGL — графический интерфейс в браузере, а не конфигуратор. Опции, цену и заказ нужно строить поверх.
- Сначала проверьте изображения и слои: число комбинаций — произведение, число слоёв — сумма.
- 97,13 % поддержки WebGL 2 (caniuse, сентябрь 2026) — доля браузеров, а не гарантия для вашей сцены на любом устройстве.
- Узкое место — модель: формат, сжатие и источник моделей определяют время загрузки.
- Запасной вариант, управление с клавиатуры и содержимое в HTML закладывайте с самого начала.
FAQ
Чем 3D-просмотрщик отличается от конфигуратора?
У какой доли пользователей работает WebGL?
Нужен ли плагин для 3D-просмотра на сайте?
Когда хватает изображений вместо 3D?
Сколько стоит конфигуратор с 3D в браузере?
Как сохранить быстрой страницу с 3D?
Видит ли Google содержимое 3D-конфигуратора?
Сначала проверить, хватает ли изображений. Потом строить 3D.
Мы вместе с вами разберём, сколько комбинаций у вашего изделия, хватает ли изображений и что должен уметь прототип с запасным вариантом.
Пройти проверку процесса