Сайт для помощи выбора прически «HairBrush»

Актуальность

Проблема взаимопонимания клиента и парикмахера была и есть. Но благодаря данному проекту может исчезнуть навсегда.

Автор обратил внимание на то, что большинство проблем возникает как раз из-за того, что клиент стесняется полноценно описывать ту прическу, которую он бы хотел видеть у себя. Это выражается не только в подборе тезисов, но и в плохом качестве фотографий (или их отсутствии), которые могут привести в пример, а также в том, что далеко не все парикмахеры могут по одной фотографии понять, как эту прическу воссоздать.

Цель

Создать сайт для упрощения коммуникации между клиентом и парикмахером.

Задачи

1. Разработать сайт с возможностью осмотра причесок в 3D-формате.
2. Создать возможность осмотра причесок в AR-формате.
3. Создать оптимизированные модели для экспорта в WEB.
4. Добавить на сайт возможность редактировать причёски.

Оснащение и оборудование, использованное при создании работы

• Компьютер с установленным ПО (Adobe Photoshop, Adobe Illustrator, Adobe Premiere Pro, Adobe Substance Painter, 3ds Max, Microsoft Visual Studio, Live Server)

Описание

Поскольку проект находится в достаточно конкурентной сфере, автор определился с главной особенностью продукта, а именно – 3D-визуализацией причёсок в WEB-формате, чего на данный момент, по мнению автора, нет на рынке.

Основу сайта автор прописал на JavaScript, который использовался для реализации визуальной составляющей части (Frontend) сайта, на нём же был прописан выбор причёсок, местоположение 3D-модели в окне и т. д. Также к нему была применена библиотека Three.js, которая отвечала за геометрию и визуализацию 3D на сайте.

Гипертекстовый язык Html использовался меньше всего, в основном – для структуризации сайта.

Для экспорта 3D-файлов использовался формат gltf. Обычно для экспорта 3D используют форматы obj или fbx, но в данном случае выбор пал на формат gltf из-за хорошей работы c Three.js и удобной выгрузки информации. Для создания причёсок автору пришлось освоить Grooming в 3D (создание волосяных поверхностей в 3D, причёсок, шерсти и т. д.). К сожалению, пришлось упростить некоторые технические нюансы причёсок, которые зачастую используют в играх для реалистичного отображения, например, отключены некоторые карты, влияющие на рефлексы и матовость.

Все волосы сделаны автором с помощью программы Maya, а их запечку (перенос информации с высокополигональной модели на низкополигональную) автор производил в 3ds Max 2022.

Сайт выполнен в одностраничном варианте, есть опция переключения причёсок, редактирования цвета и экспорта на телефон.

Результаты работы/выводы

В результате проделанной работы создан сайт, на котором возможен просмотр 3D-моделей причёсок и изменение цвета волос.

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

Перспективы использования результатов работы

В дальнейшем автор планирует адаптировать сайт под мобильные устройства.

При динамичном развитии проекта возможно создание магазина с причёсками, где люди смогут размещать свои варианты причёсок и примерять их после покупки. Причёски будут проходить проверку и оптимизацию с использованием Node.js, поскольку именно на нём будет «написан» магазин.