Как заполнить образ узором (Ткань на рубашке)

Question

1. Допустим, у меня есть изображение!

2. Теперь я хочу заполнить это изображение тканью ниже.

3. И мое окончательное изображение будет выглядеть так

как это сделать? до сих пор я мог изменить цвет этого изображения, но не смог заполнить шаблон.

Есть ли способ сделать это с помощью PHP, jquery и javascript.

Заранее спасибо!

Демонстрационная ссылка: https://www.bombayshirts.com/custom/shirt

Я просто хочу заполнить рубашку, как показано в демонстрации выше.

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

var img1 = new Image, img2 = new Image, cnt = 2,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

 
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "https://www.itailor.co.uk/images/product/shirt/it1823-1.png";       // Shirt
img2.src = "https://i.stack.imgur.com/sQlu8.png";   // pattern

// MAIN CODE ---
function go() {

  // create a pattern  
  ctx.fillStyle = ctx.createPattern(img2, "repeat");
  
  // fill canvas with pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // use blending mode multiply
  ctx.globalCompositeOperation = "multiply";
  
  // draw sofa on top
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
  
  // change composition mode
  ctx.globalCompositeOperation = "destination-in";
  
  // draw to cut-out sofa
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}

<canvas id="canvas" width=500 height=300></canvas>

Answer 1

Можно ли это сделать с помощью кода? Совершенно верно.

Обратите внимание, что StackOverflow не является домом кодирования. Мы не можем написать весь этот код для вас, поэтому самое большее, что вы должны ожидать от этих ответов, - это хорошее начало в правильном направлении.

Вы спрашивали конкретно о PHP и Javascript, но я тоже добавлю туда HTML. Давайте посмотрим на каждого.

PHP

Сделайте быстрый поиск для 3D-рендеринга в PHP. Вы не найдете много, потому что не так много. На стороне сервера существуют далеко улучшенные языки, движки и библиотеки, разработанные специально для 3D-рендеринга.

Хорошей альтернативой этому являются языки, которые большинство разработчиков игр используют для моделирования персонажей и рендеринга, которые часто включают в себя C ++, Java и Python (этот еще больше для логики и иногда движения).

Javascript / jQuery

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

https://www.babylonjs.com

https://threejs.org

HTML Canvas

Это возможно здесь, но требует больше кода, чем использование движка, предназначенного для этой работы.

Вот пример игры с HTML: https://www.html5rocks.com/en/gaming/

Вот куб в HTML5 canvas и WebGL: https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/

Обратите внимание, сколько кода и усилий требуется для воспроизведения простого куба. Вам нужно будет учитывать внешнюю форму рубашки, изгиб ткани вокруг этих фигур (не только следуя за краями, но следуя реалистичным изгибам на деталях, таких как изогнутая рука), впечатление глубины для частей рубашки которые ближе и дальше, и искривление ткани по морщинам в рубашке. Эти детали требуют НЕМНОГО количества кодирования.

---

Стоит ли тратить ваше личное время и усилия? Вероятно, нет.

1. Возврат инвестиций за потраченное время будет низким. Вы потратите много времени и ресурсов, чтобы заставить это работать хорошо.
2. Если это делается на стороне клиента (html или js), включенный код и библиотеки будут больше, чем клиенты должны иметь дело с загрузкой для чего-то меньшего, чем игровые цели.
3. Запуск этого кода каждый раз при переключении структуры будет трудоемким на стороне клиента.
4. Существуют лучшие варианты (требующие меньшего количества кода и меньшей вычислительной мощности), которые достигают той же цели, например, как это сделали Бомбейские рубашки в демоверсии.

---

Как Бомбейские Рубашки делают это?

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

Все изображенные компоненты рубашки имеют тип файла .pfs . Файлы PFS являются собственностью PhotoFiltre Studio . PhotoFiltre Studio выполняет редактирование изображений, но также помогает устанавливать координаты между элементами.

Существует около 11 отдельных изображений для манжет, воротников, пуговиц, карманов и рукавов. интересно то, что компоненты рубашки не имеют 2D вида: детали, которые не видны при окончательном рендеринге, видны здесь (например, внутренняя часть отверстий втулки, как показано выше). Это связано с тем, что каждый компонент рубашки, скорее всего, был сделан с помощью какого-либо программного обеспечения для 3D-моделирования.

Реальный ответ, однако, заключается в том, что Бомбейские рубашки вообще этого не сделали. Если вы внимательно посмотрите, откуда поступают изображения, это другой сервер, чем у них в целом:

<img class="img-fluid" src="https://bombayshirts.picarioxpo.com/collar_prince_charlie_v00.pfs?1=1&amp;width=500&amp;p.tn=BB001A.jpg&amp;p.tr=True" alt="custom shirts" style="z-index: 2;">

Эти изображения получены на picarioxpo.com.Это веб-сайт Picario , компании, которая специализируется на создании настраиваемых 3D-визуализаций продуктов.

---

Решения

Использование существующих решений ←Выберите этот!

Бомбейские рубашки никогда бы не пошли с ручными решениями ниже, потому что слишком много тканей и вариантов - это заняло бы слишком много времени.Вместо того, чтобы изобретать велосипед, они выбрали решение Picario. Вы можете сделать то же самое.

Преимущества:

• нет хардкорного кодирования и знаний
• нет хардкорных фотосессий и навыков
• нет хардкорного 3D моделирования и бесконечного экспорта
• нет вычислительной мощности на стороне клиента или используемой полосы пропускания
• быстро / легко реализуемо

Пара вариантов:

Picario XPO

iDesigniBuy Программное обеспечение для пошива одежды

Программное обеспечение для 3D моделирования

1. Используйте программное обеспечение для 3D-моделирования, чтобы создать модель вашего продукта.Если у вас есть продукты с видимыми опциями, создайте одну модель для каждого компонента рубашки.Я рекомендую Blender , потому что он бесплатный, довольно качественный и хорошо документированный. Maya , возможно, лучше, но это не бесплатно.
2. Сохраните каждую ткань как материал / текстуру (здесь я мог бы перепутать терминологию) и примените каждую к вашей модели..
3. Экспорт одинакового вида спереди каждой модели / компонента с нанесенной тканью (например: https://blender.stackexchange.com/questions/39022/how-to-save-render).
4. Когда пользователь запрашивает ваш продукт из браузера, отправьтекаждый завершенный компонент в браузере с координатами, указывающими, где его найти, чтобы выровнять его с другими компонентами.

Вручную с кодом / Photoshop

Практически любое другое решение потребует слишком много времени / знаний / денег - особенно если идти по пути ручного кодирования этой функции с помощью алгоритмов. Фотосъемка каждого изображения была бы интенсивной работой с очень противоречивыми результатами (если вы не гений фотошопа).

---

У Криса Луенго был большой вопрос в комментариях:

Почему отдельное изображение для каждого компонентарубашки?Разве не было бы проще иметь изображение для каждой цельной рубашки?- Крис Луенго

Ответ на этот вопрос:

@ CrisLuengo большой вопрос.Это потому, что некоторые рубашки имеют разные карманы, пуговицы, стили воротника и т. Д. Вы можете либо иметь совершенно отдельную модель для всех них, либо использовать одинаковые базовые модели и просто обновить компоненты.Это та же причина, по которой мы используем код многократного использования: более низкое обслуживание.

---

Я понимаю, что этот и другие ответы не соответствуют вашим ожиданиям надеялись для, но они, безусловно, посылают последовательное сообщение о том, что PHP / JS / HTML не являются подходящими инструментами для работы.

Answer 2

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

Что касается того, что делает бэкэнд, это не тривиально, а какие-то алгоритмы в Computer Vision. Если у вас нет знаний об этой области, вы можете сначала прочитать книгу типа DIP (цифровая обработка изображений). Затем вы можете прочитать некоторые статьи об этой области - 3D-синтез текстур и т. Д.

Короче говоря, это нетривиальная задача, которую вы можете выполнить только с помощью JS или PHP. Это какой-то алгоритм работает , а не какой-то язык программирования работает .

P.S. Обратите внимание, что направление и морщины рукава. Это указывает на то, что это не просто копирование и вставка некоторой текстуры, а довольно сложные алгоритмы формирования 3D .

Удачи! :)

Answer 3

Сложной частью этой проблемы является реалистичное наложение плоской текстуры на контуры неплоской рубашки.

Если у вас есть 3D-модель рубашки, вы можете применить текстуру в 3D-программе по вашему выбору и предварительно обработать результаты в виде изображения (хотя это все равно потребует некоторого человеческого внимания, так как программное обеспечениене будет знать, например, что текстура должна быть повернута на 90 градусов на рукавах и воротнике).Вам также нужно получить более четкое, бесшовное изображение текстуры, чем у вас.Похоже, что это техника, используемая на примере сайта, который вы просматриваете (на самом деле они используют стопку предварительно отрендеренных изображений каждого из тела, воротника, рукавов, запястий и кнопок).

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

Простое заполнение 2D-области рубашки текстурой в 2D, как при попытке в <canvas>, в лучшем случае даст вам нечто, похожее на плоский кусок ткани, вырезанный в форме рубашки.(Нет ничего плохого в том, что ваш код в том виде, как он есть, он выглядит пикселизированным, потому что вы дали ему пиксельную крупную текстуру ткани, а не клетку, показанную в вопросе; но эта техника может дать вам только бумажную куклу-подобные результаты, а не реалистичная фигура, которую вы ищете.)

Если ваша отправная точка - это произвольное 2-мерное изображение 3D-объекта и 2-мерное изображение не совсем зацикленной текстуры, и выхочу быть в состоянии автоматизировать оценку трехмерных контуров объекта на основе его 2-мерного представления и собрать их на лету реалистично ... ну, в наши дни машинного обучения и генеративных сетей и так далее, я 'Я не собираюсь говорить, что это невозможное задание, но вы, вероятно, сможете заработать одну или две кандидатские степени и запустить успешный SaaS, если решите его.

Answer 4

Ваше начальное изображение 3-х мерное.Конечно, если вы используете шаблон в качестве простого изображения и повторяете его, форма исчезнет, ​​и вы получите 2-мерное изображение.Шаблон, который вы дали, также содержит кривизну, которая не помогает.Вам нужно будет убедиться, что ваш шаблон - это то, что вы хотите повторить, поэтому от вершины шаблона действительное продолжение является нижней частью шаблона вверх, а слева от шаблона действительное продолжение - справа от шаблона влево.,И вы должны убедиться, что шаблоны, которые у вас есть, являются двухмерными, то есть у расстегнутой рубашки будет этот шаблон.

Если вы начнете с этих соглашений, вашей первой вехой должно стать использование шаблонаправильно в 2D.Если вы достигли этого, вам нужно будет обработать базовую трансформацию рубашки, чтобы узнать расстояние между глазами пользователя и воображаемыми точками, если рубашка имеет заданную форму.Исходя из этого, вы сможете рассчитать правильные цвета каждого пикселя.

Вам нужно будет прочитать кое-что о формулах, которые могут вам помочь: Графика - уравнение для преобразования 3d-точки в 2-мерную проекцию