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