3D-анимация и графика для сайта

Делаем трёхмерную графику и анимацию для сайтов — так, чтобы страница осталась быстрой.

Трёхмерная графика оправдана там, где надо показать товар, который сложно снять на фото: оборудование, которого ещё нет, интерьер, конструкцию в разрезе. И там, где нужно удержать внимание на главном экране.

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

Что делаем

• Предметная 3D-визуализация товаров и оборудования
• Интерактивные WebGL-сцены на главной странице
• Lottie-анимации для интерфейса: лёгкие, векторные, не тормозят
• Motion-графика для роликов и презентаций
• Анимация интерфейсных состояний: переходы, загрузки, подсказки

Про скорость

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

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

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

Как мы работаем

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

Кому это подходит

• Производителям оборудования, которое сложно или дорого снимать на фото
• Проектам, где товара ещё нет физически, а показать его надо
• Компаниям, которым нужно объяснить устройство изделия в разрезе
• Сайтам, где важно удержать внимание на первом экране

Чего мы не делаем

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

Частые вопросы

Не замедлит ли 3D сайт?

Замедлит, если делать бездумно. Мы задаём предел по весу сцены до начала работы и проверяем скорость на реальных устройствах, а для слабых телефонов предусматриваем статичную замену.

Сколько стоит 3D-визуализация?

Предметный рендер товара — от 15 000 рублей за ракурс. Интерактивная WebGL-сцена на главную — от 150 000 рублей. Lottie-анимации для интерфейса — от 8 000 рублей за элемент. Цена зависит от сложности модели и числа ракурсов.

Не будет ли сайт тормозить?

Мы закладываем ограничение по весу до начала работы и проверяем результат на реальных устройствах. На узких экранах, при экономии трафика и на медленном соединении сцена не загружается вовсе — показывается статичный кадр. На нашем собственном сайте это работает именно так.

Что нужно для моделирования?

Чертежи или размеры, фотографии со всех сторон, образцы материалов и цветов. Чем точнее исходные данные, тем меньше кругов правок — по фотографии с одного ракурса точную модель не собрать.

Можно ли использовать модели в печати и на выставке?

Да. Мы отдаём исходники, и из той же модели готовятся кадры высокого разрешения для каталога, стенда или ролика. Для печати рендерим отдельно, в нужном разрешении и цветовом профиле.

Смежные услуги

• Веб-дизайн
• Разработка сайтов