Лучшие WebGL-сайты объединяет одно: 3D решает задачу, с которой не справится фото или видео. WebGL - браузерная технология, которая рисует 3D в реальном времени с помощью графического процессора устройства. На практике она особенно полезна в шести случаях: товар на первом экране, конфигуратор, визуализация данных, объёмное портфолио, интерактивный фасад здания и шейдерный фон. Для каждого варианта разберём пример и то, что потребуется для разработки.
Мы группируем WebGL-сайты по задачам, а не по зрелищности. Именно с задачи стоит начинать задание на разработку.
Примеры WebGL-сайтов: краткий обзор
| Задача | Для каких задач | Что потребуется | Риски на мобильных устройствах |
|---|---|---|---|
| Товар на первом экране | Товарные бренды, запуски продуктов | Одна качественная модель, свет, движение | Низкий |
| Конфигуратор | Варианты товара, индивидуальные заказы | Модели для каждого варианта, правила сочетаний, данные о ценах | Средний |
| Глобус с данными / визуализация данных | Платформы, демонстрация масштаба | Источник данных, инстансинг, собственные шейдеры | Средний |
| Объёмное портфолио | Студии, творческие специалисты | Виртуальное пространство, физика, продуманная навигация | Высокий |
| Интерактивный фасад здания | Застройщики, отделы продаж | Модель здания, данные по квартирам, синхронизация статусов | Средний |
| Шейдерный фон | Любой бренд | Специалист по шейдерам; остального почти не требуется | Низкий |
1. Товар на первом экране
Один товар со студийным светом, который поворачивается вслед за курсором или прокруткой. Это самый частый запрос на WebGL-дизайн, который мы получаем, и лучший вариант по соотношению затрат и эффекта.
Что потребуется: одна качественная GLB-модель, свет в стиле вашей предметной съёмки и продуманное поведение модели. Поэтапный разбор - в статье «Как создают такой сайт на Three.js». Когда лучше отказаться: если посетитель не будет взаимодействовать с товаром, зацикленное видео без заметного стыка окажется легче. 3D в реальном времени оправданно, когда движение курсора действительно что-то меняет.
2. Конфигуратор
Выбираете цвет, меняете материал и сразу видите новую цену. Здесь 3D уже помогает продавать. Самая сложная часть - не рендеринг, а логика: какие варианты совместимы, сколько стоит каждый и что происходит при добавлении в корзину.
Что потребуется: модель каждой настраиваемой детали, наборы текстур для каждого покрытия, правила комплектации и интеграция с интернет-магазином. На это нужен отдельный бюджет. В руководстве по стоимости 3D-сайтов объясняем, почему конфигураторы относятся к самым дорогим решениям.
3. Глобус с данными
Показательный пример - глобус на главной странице GitHub. Инженеры GitHub писали, что он создан на Three.js из примерно 12 000 маленьких кругов, которые рисуются одним InstancedMesh, а запросы на внесение изменений показаны лучами и дугами. Инстансинг позволяет графическому процессору нарисовать тысячи копий за один вызов вместо тысяч отдельных вызовов.
Заказчику полезно обратить внимание на загрузку: пока не готов первый кадр, страница показывает SVG-заставку, затем за 600 мс плавно заменяет её canvas. Посетитель не смотрит на пустой блок.
Что потребуется: качественный источник данных, разработчик с опытом работы с шейдерами и инстансингом, а также запасное статичное изображение.
4. Объёмное портфолио
Портфолио превращается в пространство, по которому можно перемещаться. Известный пример - сайт Bruno Simon: посетитель ездит на маленькой машине между работами. Для сайта использовали Three.js для рендеринга, Cannon.js для физики и Blender для моделирования. Разработка заняла около трёх месяцев, а к публикации материала Pastel в январе 2020 года сайт посетили более 400 000 человек.
Что потребуется: дизайн виртуального пространства, настройка физики и тщательно продуманная навигация. Главная сложность: такой формат труднее всего сделать доступным и быстрым на телефонах. Всегда добавляйте обычный список работ как альтернативный способ просмотра.
5. Интерактивный фасад здания
Само здание становится меню: наводите курсор на окно и видите квартиру. В нашем демонстрационном проекте жилого дома в Таллине каждое подсвеченное в сумерках окно открывает данные о квартире: комнаты, площадь, цену и статус. Аналогичный подход используют и агентства; например, Lazarev в проекте Riviera City.
Что потребуется: модель здания, данные по каждой квартире и синхронизация статусов «продано» / «свободно». Как сказано в одном руководстве по созданию такого инструмента, «главная ценность - модель и данные». Красивое изображение сделать проще; от надёжности работы с данными зависит, будет ли отдел продаж доверять системе.
6. Шейдерный фон
Не каждому WebGL-сайту нужна модель. Шейдер - небольшая программа, которая работает на графическом процессоре и задаёт цвет каждого пикселя. Поэтому он хорошо подходит для движущихся градиентов, шумовых узоров и частиц, складывающихся в разные формы.
Что потребуется: разработчик, умеющий работать с шейдерами, и понятное задание на движение. Это самый недорогой способ добавить графику в реальном времени и обычно самый лёгкий для мобильных устройств.
Для чего WebGL подходит плохо
Не используйте 3D в реальном времени для длинных текстов, основной навигации, контента для поискового продвижения и материалов, которые маркетологи обновляют каждую неделю. Меню внутри canvas неудобны людям, пользующимся клавиатурой или программой экранного доступа, а Google читает HTML, а не пиксели canvas.
Если выбираете между полноценным сайтом с погружением и отдельными эффектами, наше руководство по иммерсивному веб-дизайну поможет понять, когда стоит идти дальше.
Где искать лучшие WebGL-сайты
Чаще всего примеры ищут на Awwwards. Жюри оценивает дизайн, удобство, креативность и контент, а не одну зрелищность. Каждый сайт стоит открыть и на телефоне: именно там хорошо видно качество работы.
