В работе на потоке заказов есть один минус. Как ни крути — это конвейер. Сложный. Хитрый. Но конвейер. Вообще любой отлаженный бизнес — это конвейер. И это — нормально. Но иногда мы его специально ломаем. Берем какой-то проект, и внутри себя решаем, что на этом проекте мы можем себе позволить бесконечное количество ресурсов. Зеленый свет на всё. Любые технологии. Если надо — любое количество итераций. Полировок. Подгонов. Надо выложиться.

Это как отказной сет в качалке. Делать так на всех проектах не получится. Не хватит ресурсов. Сдохнете. Но иногда…

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

Когда все модели были подготовлены и затекстурированы, всплыла проблема импорта всей этой красоты на сайт. Оказалось, что рендер браузера, то есть то, как браузер отображает 3D-модели, выглядит совсем по-другому и совсем не похож на рендер программы, в которой делалось 3D. Чтобы довести их до идеала в браузере, ушло много времени: проверить разные настройки экспорта, подогнать яркость и насыщенность текстур, отрисовать карты отражений и «металлизированности» материала, настроить симуляцию преломления стекла и прочих приколов.

Важна фаза рисерча: мы берем себе час-два на «поиграться» с какой-то технологией или новым стэком, провести нужные эксперименты. В итоге оценка может увеличиться в 4 раза, или вы поймете, что только на стадию рисёрча вам нужны 8−16 часов. Бывает. Возможно, в этот момент вы упростите задачу, обойдётесь без анимации. Или добавите ресурсов. Я называю это «контролируемый факап». Провал возможен, но глубина провала заранее известна.

Отдельной историей стала настройка освещения. Экспортировать освещение вместе с моделью нельзя. Программист выставил четыре источника света в настройках сцены в самом Three.js и расшарил мне доступ на редактирование их настроек. Пришлось не один час потратить на настройку положения и регулировку интенсивности этих источников света, чтобы получить достойную карту освещения и приятные блики на упаковке.

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

В промоблоке всё интереснее — там нестандартный эффект смены моделей, поэтому для реализации этого блока использовалась библиотека PixiJS совместно с Three.js. В Three. js рендерилась модель, а в PixiJS накладывались дополнительные эффекты. Вместе с дизайнером мы попробовали 100 500 вариантов моделей, освещения, окружения, отражения, текстур, чтобы это все выглядело красиво.

Для того, чтобы сделать 3D модели на проекте максимально приближенными к реальным упаковкам, мы проводили регулярные звонки с заказчиком для выяснения требований. Заказчик очень подробно рассказывал нам про нюансы создания упаковок, технологию нанесения цветов на металлизированные упаковки, предоставлял развертки. Сразу после звонков в несколько итераций мы вносили корректировки и направляли на согласование каждую из 10 моделей. Так получилось достигнуть желаемого результата и сделать классные 3D.