3D-сайты: когда они оправданы и как сохранить их быстрыми

Коротко

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

Это руководство основано на двух наших собственных проектах: Janus Observatory — браузерном проекте с десятью 3D-мирами — и dardo.studio, главная страница которого открывается 3D-сценой в реальном времени.

Когда 3D оправдано

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

Когда нет

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

3D, видео или изображения?

WebGL работает во всех современных браузерах. WebGPU новее и для некоторых задач быстрее, но его поддержка всё ещё неоднородна, поэтому предусмотрите запасной вариант. 3D-вход на dardo.studio сначала пробует WebGPU и при необходимости переключается на WebGL 2, а страницы услуг, работ и контактов — это обычный HTML, который никогда не ждёт 3D-сцену.

Что мы узнали, создавая Janus Observatory

Janus Observatory превращает десять опубликованных сценариев будущего Земли в историю из 17 глав, атлас и обсерваторию с десятью оригинальными низкополигональными мирами и инопланетным астрономом с подвижными сочленениями. Проект работает на бесплатном тарифе Cloudflare Workers, который ограничивает размер приложения. В отчёте о релизе проекта от 27 сентября 2026 года зафиксировано, что потребовалось, чтобы сохранить его быстрым:

• Сжимайте модели и оставляйте запасной вариант. 59 3D-моделей поставляются в виде gzip-вариантов общим объёмом 8,2 МБ вместо 15,8 МБ — на 47,9% меньше для загрузки. Браузеры, которые не умеют их распаковывать, получают исходные файлы.
• Декодируйте вне основного потока, а потом останавливайтесь. Декодирование Meshopt выполняется в одном фоновом воркере, который отключается после пяти секунд простоя.
• Задайте бюджет на JavaScript и соблюдайте его. Начальный JavaScript главной страницы занимает 197 059 байт в gzip при бюджете 256 000 байт, и сборка это проверяет.
• Следите за лавинами запросов. Цикл спекулятивной предзагрузки в стеке Next.js и OpenNext сделал 11 704 запроса в одной неудачной трассировке браузера. Решением стало отключение предзагрузки для этих ссылок, и теперь тесты требуют, чтобы спекулятивных запросов не было вовсе.
• Фиксируйте разрешение, а не гонитесь за частотой кадров. Canvas рендерятся с фиксированным device pixel ratio от 1 до 1,5. В отчёте также отозвана приведённая ранее цифра частоты кадров, которая зависела от снижения разрешения, поэтому мы её не называем.

Сделайте так, чтобы всё работало без 3D

У Janus есть одно правило, которое определяет всё остальное: основной опыт должен работать без WebGL и без ИИ. Все десять записей сценариев загружаются при отключённом JavaScript, элементы управления работают без WebGL, а вращение с клавиатуры, видимый фокус и уменьшенное движение создавались вместе с каждой функцией. На странице доступности перечислены элементы управления, невизуальные эквиваленты и известные ограничения. Цель — WCAG 2.2 уровня AA, соответствие проверяется автоматическими тестами в Chromium, Firefox и WebKit.

Это правило помогает и поиску, и ИИ-ассистентам: текст, названия и данные находятся в HTML, а не внутри canvas.

Чек-лист быстрой и доступной 3D-страницы

1. Сначала сделайте страницу без 3D. Если HTML-версия не имеет смысла, 3D её не спасёт.
2. Решите, что именно объясняет 3D, и уберите всё, что нужно только для эффекта.
3. Задайте бюджеты на JavaScript, вес моделей и размер текстур до начала моделирования и проверяйте их при сборке.
4. Сжимайте модели такими инструментами, как meshoptimizer, отдавайте их в формате glTF и оставляйте несжатый запасной вариант, если полагаетесь на новые возможности браузеров, например DecompressionStream.
5. Загружайте сцену после контента и только тогда, когда она вот-вот появится на экране.
6. Ограничьте pixel ratio, чтобы экраны с высокой плотностью пикселей не рендерили в четыре раза больше пикселей.
7. Учитывайте prefers-reduced-motion, дайте каждому взаимодействию путь с клавиатуры и разместите текстовый эквивалент рядом с каждым canvas.
8. Тестируйте на реальных телефонах среднего класса и в нескольких браузерных движках, а после запуска следите за Core Web Vitals.

Сколько это стоит

3D добавляет время на моделирование, оптимизацию и тестирование поверх дизайна и разработки, а запасные варианты — часть работы, а не дополнительная опция. В наших сметах это строка «собственная анимация, 3D или интерактивные данные» из факторов стоимости, которые мы описываем в руководстве о том, сколько стоит сайт в Колумбии.

Как Dardo создаёт 3D-сайты

Мы проектируем и создаём 3D-проекты в рамках услуги интерактивных 3D-сайтов, а более лёгкую анимацию и работу со скроллом — в рамках креативной разработки. Для Hyper мы сделали на React Three Fiber 3D-историю, управляемую прокруткой, которая превращает разрозненные сигналы в единый профиль клиента. Если у вас есть идея, которую можно понять только в пространстве, расскажите нам о ней.