Трёхмерная графика на сайте долго была отдельной специальностью: смоделировать в одном, оптимизировать во втором, встроить через третье, и всё это с оглядкой на вес страницы. Инструменты вроде Spline закрывают весь этот путь в браузере, и вопрос в том, где проходит граница их возможностей.
Ниже разбор того, что этот класс инструментов делает хорошо, где упирается, кому он заменяет Blender, а кому нет, и что происходит с результатом на реальном сайте.
Что это за инструменты
Редактор трёхмерной сцены, работающий в браузере, с прицелом не на рендер, а на встраивание результата в веб-страницу.
Отсюда все особенности. Моделирование упрощённое, зато есть интерактивность: реакция на курсор, прокрутку, нажатие. Материалы простые, зато сразу видно, как всё будет выглядеть на сайте. Экспорт не в файл модели, а в код для вставки.
Это принципиально другой продукт, чем универсальный пакет трёхмерной графики. Сравнивать их по функциям бессмысленно: они решают разные задачи.
Что умеет делать хорошо
Простая геометрия из примитивов. Скруглённые формы, абстрактные объекты, иконки в объёме. То, что составляет большую часть трёхмерной графики на сайтах.
Интерактивность без кода. Объект поворачивается за курсором, сцена меняется при прокрутке, элемент реагирует на нажатие. Настраивается связыванием событий, а не программированием.
Мгновенная публикация. Сцена получает адрес и встраивается на страницу одной строкой. Не нужен ни движок в браузере, ни сборка проекта.
Совместная работа. Несколько человек в одном документе, как в онлайн-редакторах текста.
Предсказуемый вес. Инструмент изначально рассчитан на веб и не даёт собрать сцену, которая не загрузится.
Где упирается
Сложное моделирование. Полигональное редактирование ограничено. Органика, персонажи, техника с мелкими деталями делаются в другом месте и импортируются.
Качество материалов. Материалы упрощённые, потому что считаются в реальном времени в браузере. Сложных шейдеров, честного преломления и подповерхностного рассеивания там нет.
Освещение. Упрощённая модель. Красивый свет уровня офлайн-рендера получить нельзя, и это не недоработка, а следствие ограничений реального времени.
Большие сцены. Инструмент для отдельного объекта или небольшой композиции, а не для уровня или интерьера целиком.
Зависимость от сервиса. Сцена живёт на стороне сервиса, и его доступность становится частью работы сайта.
Что там за AI
Генерация в таких инструментах устроена скромнее, чем в специализированных сервисах, и ожидания стоит калибровать.
Обычно это генерация текстур и материалов по описанию, иногда генерация простых объектов, иногда подсказки по композиции. Полноценной генерации сложных моделей из текста там нет.
Практическая польза для веб-задач тем не менее есть: подобрать текстуру для абстрактной формы быстрее описанием, чем поиском по библиотекам.
Если нужна именно генерация моделей, это другой класс инструментов, разобранный в материале про превращение скетча в 3D.
Кому это заменяет Blender
Веб-дизайнеру. Полностью, если задача это трёхмерный элемент на странице. Осваивать универсальный пакет ради скруглённого куба с анимацией нерационально.
Дизайнеру интерфейсов. Да, для объёмных иконок и иллюстраций.
Фронтенд-разработчику. Отчасти: даёт возможность собрать сцену самому вместо технического задания на дизайнера.
3D-художнику. Нет. Как инструмент публикации в веб может быть удобен, но моделирование останется в привычном пакете.
Связка с Blender
Самый практичный сценарий для того, кто уже владеет трёхмерной графикой.
Модель делается в Blender со всей сложностью, оптимизируется и импортируется в веб-редактор. Дальше там настраивается интерактивность и публикация.
Что важно подготовить на стороне Blender. Минимальное число полигонов: браузер не рендер-ферма. Развёртку и запечённые текстуры: сложные процедурные материалы не переносятся. Разумное число объектов: каждый это отдельный вызов отрисовки.
Общий принцип подготовки под реальное время такой же, как для игрового движка, и он разобран в материале про подготовку моделей в части требований к чистоте геометрии.
Производительность на странице
Главное, о чём забывают, увлёкшись возможностями.
Трёхмерная сцена на странице это работающий в фоне движок реального времени. Он тратит заряд батареи, греет телефон и конкурирует за ресурсы с остальной страницей.
Что это значит практически. На слабых телефонах сцена может тормозить или не запускаться. На ноутбуке без питания она заметно сажает батарею. Индикаторы скорости загрузки страницы ухудшаются.
Меры, которые обычно применяют. Запускать сцену только когда она попала в область видимости. Давать статичную картинку как запасной вариант для слабых устройств. Ограничивать частоту кадров: для декоративной анимации тридцати достаточно.
Когда трёхмерная графика на сайте вообще нужна
Вопрос, который стоит задать до того, как открывать редактор.
Оправдано: показать товар со всех сторон, объяснить устройство продукта, дать настроить конфигурацию и увидеть результат.
Спорно: декоративные элементы, реагирующие на прокрутку. Выглядит эффектно, стоит производительности, пользы обычно немного.
Не оправдано: трёхмерный фон ради красоты на сайте, где важна скорость загрузки и конверсия.
Честный критерий: если тот же смысл передаётся картинкой или коротким видео, трёхмерная сцена не нужна.
Альтернативы
Полезно знать, из чего выбираете.
Готовые библиотеки трёхмерной графики для веба. Полный контроль, любая сложность, но нужен разработчик и время.
Видео вместо трёхмерной сцены. Заранее просчитанный ролик с вращением товара. Выглядит лучше, весит предсказуемо, не грузит устройство. Минус: нет интерактивности.
Последовательность изображений. Классический приём для вращения товара: десятки кадров, переключаемых по движению курсора. Просто, надёжно, работает везде.
Формат для просмотра моделей в браузере. Стандартный способ показать модель без написания кода, поддерживается встроенными средствами браузеров.
Веб-редактор выигрывает там, где нужна именно настраиваемая интерактивность и нет времени на разработку.
Стоимость
Модель обычно такая: бесплатный тариф с ограничениями по числу проектов и с брендированием, платные тарифы снимают ограничения.
На что смотреть при оценке. Разрешено ли коммерческое использование на выбранном тарифе. Что происходит со сценой, если перестать платить: остаётся ли она работать на сайте. Можно ли выгрузить проект в стандартный формат, чтобы не зависеть от сервиса.
Последний пункт самый важный и самый часто пропускаемый: сцена на странице клиента, которая перестанет работать через год, это проблема, за которую отвечать вам.
Как считать окупаемость подобных подписок в общем случае, разобрано в материале про бюджет на нейросети для 3D, а подборка работающего без оплаты есть в материале про бесплатные инструменты.
Доступность: о чём забывают
Трёхмерная сцена на странице создаёт проблемы, которых нет у обычного содержимого.
Анимация, реагирующая на прокрутку, у части людей вызывает укачивание. В системах есть настройка, сообщающая о предпочтении уменьшенного движения, и её стоит учитывать: при включённой настройке показывать статичный кадр.
Содержимое сцены недоступно для чтения с экрана. Если в трёхмерном объекте есть смысловая информация, её надо продублировать текстом рядом.
Управление курсором не работает при навигации с клавиатуры. Если сцена интерактивна и несёт функцию, нужен альтернативный способ взаимодействия.
Практический минимум: статичная замена при предпочтении уменьшенного движения и текстовое описание того, что показано.
Что происходит при слабом соединении
Сцена это данные, которые надо загрузить, и делает она это не мгновенно.
Что видит человек на медленном интернете: пустое место, потом внезапно появившийся объект. Это хуже, чем отсутствие сцены вовсе.
Решение простое и обязательное: заглушка в виде изображения, которое показывается сразу и заменяется сценой после загрузки. Тогда страница выглядит целой с первой секунды.
Второй приём: не запускать загрузку, пока блок не приблизился к области видимости. Для сцены в нижней части страницы это экономит трафик тем, кто до неё не дошёл.
С чего начать
Практичный порядок освоения за вечер.
Собрать простую сцену из примитивов: скруглённый куб, пара источников света, простой материал.
Добавить одну реакцию: поворот за курсором. Это основа большинства эффектов.
Опубликовать и встроить на тестовую страницу.
Посмотреть на телефоне и оценить, как это влияет на скорость и нагрев.
Четвёртый шаг важнее первых трёх: именно он показывает реальную цену трёхмерной графики на сайте.
Частые вопросы
Можно ли импортировать модель из Blender?
Да, через стандартные форматы обмена. Готовить её надо как для игрового движка: мало полигонов, запечённые текстуры, минимум объектов.
Работает ли это на телефонах?
На современных да, на слабых с оговорками. Обязательно проверять на реальном устройстве и предусматривать статичную замену.
Сильно ли это замедляет сайт?
Заметно, если сцена грузится сразу. При отложенной загрузке влияние на первую отрисовку минимально, но нагрузка на устройство остаётся всё время, пока сцена видна.
Что будет со сценой, если перестать платить?
Зависит от сервиса, и это надо выяснять до того, как ставить сцену на сайт клиента. В худшем случае она просто перестанет отображаться.
Заменит ли это трёхмерную графику для веба вообще?
Для простых задач уже заменяет. Для сложных сцен с высокими требованиями к качеству по-прежнему нужны разработка и библиотеки.
Сделайте одну простую сцену и посмотрите, как она грузится на телефоне по мобильной связи. Это единственная проверка, которая имеет значение для веба.