Новогоднее поздравление 2023

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

До пуска две недели. Пуск передвинуть нельзя, даже если бы очень захотелось: 32 декабря не существует. На входе от клиента есть текстовый набросок содержания страницы и модели, которые инженеры клиента готовят в рамках разработки самих приборов. Обсуждаем задачу и берём паузу на день, чтобы выбрать технологию для демонстрации моделей на странице. Советуемся с разработчиками, тестируем гипотезы, копаемся в данных клиентом моделях. Приходим к идее использовать библиотеку Three.js: её достаточно легко подключить к сайту, а модели клиента можно будет перевести в формат, который она сможет проглотить. Возвращаемся к клиенту, описываем идею, согласовываем решение с руководством и разработчиками клиента, которым предстоит заниматься реализацией.

Заранее внутри себя договариваемся, что разделим дела. Я возьму на себя всё, что связано с моделями, а Миша займётся вёрсткой и дизайном страницы.

Миша не часто делился прогрессом своей работы, поэтому скриншотов из вёрстки немного:

Картинки для соцсетей, рассылки и банера на основном сайте клиента:

Тем временем я занимаюсь моделями. Модели клиента сделаны в Кейшоте. Оттуда можно было выгрузить их в формате подходящем для веба, но они получаются конскими: от 50 до 500 Мб. При этом на странице одновременно должны было находиться 12 моделей. Нужно оптимизировать. Забираю модели в Блендер и упрощаю.

Начинаю с уменьшения количества полигонов встроенными инструментами и аддонами. Поскольку топология моделей после переноса с Кейшота была кривой, инструменты упрощения полигональной сетки работают непредсказуемо, форма приборов искажается, лезут артефакты:

Пришлось поработать руками. Убираю в приборах невидимые части, упрощаю меш вручную там, где аддоны не справлялись. В результате вес каждой модели уменьшился примерно на 10%, но я рассчитывал на большее. Понимаю, что проблема либо в кривом экспорте, либо в текстурах.

Выгружаю текстуры моделей отдельно. Оказалось, что они составляют 90% веса каждой модели! И это хорошие новости, потому что открывает пространство для манёвра. У нас нет цели показать приборы максимально реалистично, следовательно большинство текстур можно убрать, а оставшиеся оптимизировать.

После этого тестирую модели в песочнице Three.js. Вместе с Мишей настраиваем ракурсы и освещение. Передаём все параметры разработчикам.

Несколько скриншотов с отловленными по ходу разработки багами:

На мобиле пришлось придумывать особое поведение и подгружать модели по одной за раз (а остальные показывать картинками), потому что даже самые мощные телефоны отказывались показывать страницу со всеми моделями сразу:

Как обычно, сопровождаем разработку, подкручиваем дизайн по результатам вёрстки (чтобы был реализуемым), предлагаем необходимые упрощения и альтернативы — и открываем страницу в срок. Клиент рассылает поздравления, и мы идём готовить салатики.