Стартап глазами джуниора. Как объединить тату с IT

Привет, ребята. Меня зовут Андрей, мне 21 год и я Junior Javascript разработчик. И в этой статье я расскажу об истории своего проекта tattoo-3d.com. От идеи, до реализации, с какими трудностями я столкнулся, какие выводы сделал, и что бы я изменил, вернувшись бы в прошлое.

Статья может быть полезна начинающим программистам, тем кто хочет вложить свои силы в pet-проект и воплотить задумку в реальность.

Идея

На моей первой работе в крупной аутсорс компании я столкнулся с редактированием 3D объектов в браузере, в то же время и познакомился с библиотекой three.js.

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

Пример трансфера

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

Изучив проблему и проанализировав свои скромные навыки и опыт, я решил создать приложение для браузера, в котором можно будет быстро накидать тату идеи и посмотреть, как они могут выглядеть на теле. В качестве объекта нанесения татуировки были выбраны 3D модели мужчины, женщины, а также 3D лицо (на это тоже есть спрос).

Моё приложение должно было отображать татуировки на человеческом теле, которые пользователи могли бы загружать в .PNG формате. Кликая на определённое место, человек мог добавить и отредактировать изображение, чтобы в итоге найти удачное расположение для своего тату.

Реализация

Выбор технических решений для реализации проекта

За взаимодействие с 3D у меня отвечает библиотека three.js, построенная на основе WebGL и позволяющая создавать и отображать в браузере ускоренную на GPU 3D графику, используя Javascript. Three.js поддерживает работу с камерами, сценами, анимациями, материалами, различными источниками света, позволяет загружать 3D модели популярных форматов(OBJ, STL, GLTF, FBX...).

В качестве фреймворка, отвечающего за UI, был выбран React, оптимизирующий работу с DOM, а также библиотека antd, с которой у меня на тот момент было больше всего опыта работы. На бэкенде Node.js, хотя это не имеет практически никакого значения, всё приложение работает на клиенте, node же нам отдаёт только статические файлы, в данном случае выгоднее было бы использовать nginx. В будущих планах возможно придётся работать с базой данных и различной бизнес логикой, вот тогда мне и может пригодится Node.js.

Системой управления проектом была выбрана trello, в ней было легко и удобно описывать задачи не только для себя, но и для разработчиков-волонтёров, с которыми я сотрудничал.

Алгоритм наложения изображения

Основной технической задачей стало наложение изображений на 3D модель. Благо в three.js существует функционал для работы с декалями. Мне лишь осталось передать в DecalGeometry mesh (в данном случае это 3D модель человека), на который я накладываю изображение, место наложения, которое мы находим с помощью raycast, поворот и размер.

var geometry = new DecalGeometry( mesh, position, orientation, size );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ); 
scene.add( mesh );

Далее я реализовал перемещение изображения. Для этого я удалял старую декаль и смещал position на определенное количество пунктов влево, вправо, вниз или вверх.

Еще одной проблемой передвижения с помощью стрелок стала адаптация смещения по x или z, в зависимости от места. Предположим, что мы располагаем изображение на груди, там значит при перемещении влево или вправо, мы изменяем position по X, но если мы также будем действовать на плече, то декаль провалится сквозь текстуру, в этом случае надо перемещать уже по Z. Для решения этой проблемы я построил центральный вектор и плоскость, на которую делал проекцию точки пересечения raycast с моделью. Далее я находил угол между центральным вектором и вектором поворота этой точки и на основе этого угла определял тип перемещения.

let centerVec = new THREE.Vector3(0, 0, 1);
let plane = new THREE.Plane(new THREE.Vector3(0, 1, 0))
plane.projectPoint(intersection.point, projected_point);
let origin = new THREE.Vector3(0, 0, 0);
let dir = new THREE.Vector3();
dir.subVectors(origin, projected_point).normalize();
let vec_angle = THREE.Math.radToDeg(centerVec.angleTo(dir));

После реализации основного функционала, у меня получилась первая версия приложения. Работала она плохо, особенно на мобильном, но даже с этими фичами уже можно было развлекаться:

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

Поиск партнёров

Кроме основного приложения, было решено сделать несколько лендинг страниц, которые бы описывали функционал, показывали примеры работ и объясняли предназначение программы. Так как у меня было не так много свободного времени, я решил обратится за помощью и разместил на форуме ДОУ пост, в котором предлагал всем желающим принять участие в моём проекте. Мне ответили несколько начинающих верстальщиков, которым я предоставил контент и задачу сделать из этого лендинг. К сожалению, работа первых двух мне показалась неудовлетворительной и в данном случае я виню лишь себя, так как у меня не было макетов и верстальщики действовали на своё усмотрение. Не стоит поручать людям те задачи, которые не входят в их компетенцию. К счастью, мне повстречалась Kateryna Shvets, которая проявила креативность и хорошо справилась с задачей дизайна и вёрстки лендинг страницы.

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

Выводы

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

С какими трудностями я столкнулся во время реализации? Ответ очень прост, со всеми сразу. Так как опыта в вебе у меня не так много, я пришел из С++, было непросто заставить всё корректно отображаться под разными разрешениями и на разных устройствах. Некоторые модели были очень большими 20+ мб, трудно было найти и подобрать те, которые не заставят юзеров ждать вечность. Любая работа, связанная с дизайном для меня непроста, хорошо, что есть такие UI библиотеки, как antd, которые делают вид приложения приличным. Кодил я довольно быстро, но так как ревью было делать некому, бороться с последствиями приходится до сих пор. Не стоит откладывать refactoring, плохой код накапливается как снежный ком и очень скоро начинает замедлять разработку.

Если бы мне предоставили возможность вернуться в прошлое, я бы посоветовал себе с самого начала найти партнёров-разработчиков для реализации проекта. Они не только ускоряют разработку, но и повышают вашу мотивацию и дисциплину. Не обязательно иметь деньги, чтобы найти хорошего специалиста, существует множество начинающих программистов, дизайнеров, верстальщиков, которые могут быть вам полезны. Главное ставить перед ними чёткие задачи и правильно организовать работу.

При работе с заказчиками и клиентами огромную роль играют правильные договорённости. Не стоит надеяться на устные соглашения, форс-мажорные обстоятельства могут негативно повлиять даже на самый далёкий от них бизнес. Хотел бы посоветовать читателям книгу Дональда Трампа «Искусство заключать сделки», с которой сам недавно ознакомился.

Реализация собственных проектов не только значительно повышает ваши знания в программировании и бизнесе, но и расширяет ваш кругозор, сводит вас с интересными людьми, позволяет приобрести и развить лидерские качества. Чтобы начать что-либо делать не нужны значительные вклады. Дополнительных трат, кроме платы за VPS и домен, я не делал.

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті