画像をパターンで塗りつぶす方法（布地にシャツ）
画像があるとしましょう！
今、私はそのイメージを下の布で満たしたいです。
- そして私の最終的な画像はこのようになります
どうやってするの？これまでのところ、画像の色を変更することはできましたが、パターンを塗りつぶすことができませんでした。
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>これはコードで実行できますか？もちろんです。
StackOverflowはコーディングハウスではないことに注意してください。このコードをすべて作成することはできないため、これらの回答から予想できることのほとんどは、正しい方向への良いスタートです。
PHPとJavascriptについて具体的に尋ねましたが、そこにもHTMLを投入します。それぞれを見てみましょう。
[〜＃〜] php [〜＃〜]
PHPで3Dレンダリングをすばやく検索します。あまりないので、あなたは多くを見つけることができません。サーバー側には、特に3Dレンダリング用に設計されたfarより優れた言語、エンジン、およびライブラリがあります。
これの良い代替手段は、ほとんどのゲーム開発者がキャラクターのモデリングとレンダリングに使用する言語です。これには、C++、Java、およびPythonが含まれます（これは、ロジックおよび場合によっては移動のために追加されています）。
Javascript/jQuery
3Dレンダリングを処理できる適切なJavaScriptゲームエンジンがいくつかあります。これらは、ほとんどの作業がエンジン自体の外で行われることを期待しているため、キャラクターモデリング用ではない場合が多いことに注意してください。通常、これはWebGLと組み合わせて使用されるライブラリです。一般的な2つのオプションを次に示します。
HTMLキャンバス
ここでも可能ですが、この作業用に設計されたエンジンを使用するよりもコードに負荷がかかります。
HTMLを使用したゲームの例を次に示します。 https://www.html5rocks.com/en/gaming/
HTML5キャンバスとWebGLのキューブは次のとおりです。 https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/
単純な立方体を再現するために必要なコードと労力に注目してください。シャツの外側の形状、それらの形状の周りの生地の湾曲（エッジだけでなく、曲がった腕などのパーツのリアルなカーブに従う）、シャツのパーツの奥行きの印象を考慮する必要がありますシャツのしわの上で生地が弧を描いて近づき、遠ざかっています。これらの詳細には、IMMENSE量のコーディングが必要です。
あなたの個人的な時間と努力の価値はありますか？おそらく違います。
- 費やした時間の投資収益率は低くなります。 lotの時間とリソースを費やして、これがうまく機能するようにします。
- クライアント側（htmlまたはjs）で行われる場合、含まれるコードとライブラリは、クライアントがゲーム目的以外の目的でダウンロードを処理する必要がある以上のものになります。
- ファブリックが切り替わるたびにこのコードを実行すると、クライアント側で面倒になります。
- Bombay Shirtsがデモでどのように実行したかなど、同じ目標を達成するためのより良いオプション（少ないコードと少ない処理能力を必要とするオプション）があります
ボンベイシャツはどのように使用しますか？
以下は、開いたインスペクターがページのリソースを確認している写真です。左側の赤いボックスには、シャツのすべてのパーツのリストがあります。 1つが選択され、右側の写真が表示されます。
写真のシャツのコンポーネントはすべてファイルタイプ。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&width=500&p.tn=BB001A.jpg&p.tr=True" alt="custom shirts" style="z-index: 2;">
これらの画像はpicarioxpo.comから提供されています。これは、カスタマイズ可能な3D製品視覚化の作成を専門とする会社 Picario のWebサイトです。
ソリューション
既存のソリューションを使用←これを選択してください！
ボンベイシャツは、生地やオプションが多すぎるため、以下の手動による解決策を講じることはできませんでした。車輪を再発明する代わりに、彼らはピカリオの解決策を選びました。 同じことができます。
利点：
- 筋金入りのコーディングと知識なし
- 筋金入りのフォトショッピングとスキルはありません
- 筋金入りの3Dモデリングと無限のエクスポートは不要
- クライアント側の処理能力や帯域幅は使用されません
- 実装が高速/簡単
いくつかのオプション：
3Dモデリングソフトウェア
- 3Dモデリングソフトウェアを使用して、製品のモデルを作成します。オプションが表示されている製品がある場合は、シャツのコンポーネントごとに1つのモデルを作成します。私は Blender をお勧めします。無料で、かなり高品質で、十分に文書化されているからです。 Maya は間違いなく優れていますが、無料ではありません。
- 各ファブリックをマテリアル/テクスチャとして保存し（ここで用語を混同している可能性があります）、それぞれをモデルに適用します。
- ファブリックを適用した各モデル/コンポーネントのsame正面図をエクスポートします（例： https://blender.stackexchange.com/questions/39022/how-to-save-render ）。
- ユーザーがブラウザーから製品を要求したら、完成した各コンポーネントを、他のコンポーネントと整列させる場所を指示する座標とともにブラウザーに送信します。
コード/ Photoshopを使用して手動で
他のほとんどのソリューションは、時間がかかりすぎて/知識/お金がかかります-特に、この機能をアルゴリズムで手動でコーディングするルートに行くことになります。各画像をPhotoshopで処理すると、veryの結果に一貫性がなくなり、（Photoshopの天才でない限り）大変な作業になります。
Cris Luengoはコメントで素晴らしい質問をしました：
シャツの各コンポーネントの画像を分ける必要があるのはなぜですか？完成したシャツごとに写真を用意するほうが簡単ではないでしょうか。 –クリス・ルエンゴ
これに対する応答：
@CrisLuengo素晴らしい質問です。それは、いくつかのシャツに異なるポケット、ボタン、襟のスタイルなどがあるためです。それらすべてに対して完全に別個のモデルを使用するか、同じ基本モデルを使用してコンポーネントを更新するだけで済みます。これが、再利用可能なコードを使用するのと同じ理由です。つまり、メンテナンスの軽減です。
これと他の答えはあなたが持っていたものではないことを理解しています希望が、彼らは確かにPHP/JS/HTMLが正しくないという一貫したメッセージを送信しています仕事のためのツール
この問題の難しい部分は、平らなテクスチャが平らでないシャツの輪郭をリアルに包み込むことです。
シャツの3Dモデルがある場合、選択した3Dプログラムでテクスチャを適用し、結果を画像として前処理できます（ただし、ソフトウェアが認識しないため、人間の注意が必要です）たとえば、袖と襟でテクスチャを90度回転させる必要があります）。また、手持ちのテクスチャよりも、きれいでシームレスなテクスチャのループ画像を取得する必要があります。これは、あなたが見ているサンプルサイトで使用されている手法のようです（実際には、シャツのボディ、襟、袖、手首、ボタンのそれぞれについて、個別に事前にレンダリングされた画像のスタックを使用しています）。
または、写真家を雇ってシャツを同じまたは類似のポーズで撮影するか、フォトショップの専門家を雇って手動で作業することもできます（これにより、多くのカタログ作業が行われます）。
<canvas>で試みたように、シャツの2D領域を2Dのテクスチャで単純に塗りつぶすと、せいぜいシャツのような形にカットされた平らな布地のように見えます。 （現状のコードには何も問題はありません。問題に示されている格子縞ではなく、生地の織りのピクセル化されたクローズアップテクスチャを与えているため、ピクセル化されたように見えます。 -あなたが探している現実的な形状ではなく、結果に似ています。）
開始点が3Dオブジェクトの任意の2D画像であり、きれいにループしていないテクスチャの2D画像であり、その2D表現に基づいてオブジェクトの3D輪郭を自動推定し、それらを配置できるようにする場合リアルタイムで一緒に現実的に見える方法で...まあ、今日の機械学習や生成ネットワークなどでは、それが不可能タスクであるとは言いませんが、おそらく、PhDまたは2つを取得して、成功すると、SaaSを解くことができます。
あなたが与えたウェブサイトを見た後、作業は実際にはフロントエンドの代わりにbackendで行われます。これは次のChromeのスクリーンショットから見ることができます：
バックエンドが何をするかについては、それは簡単なことではありませんが、コンピュータービジョンのある種のアルゴリズムです。この分野についての知識がない場合は、まずDIP（デジタル画像処理）などの本を読むことができます。次に、このフィールドに関するいくつかの論文を読むことができます-3Dテクスチャ合成など。
つまり、JSまたはPHPだけで実行できるのは簡単なことではありません。これは一部のアルゴリズムの動作であり、一部のプログラミング言語の動作ではありません。
追伸袖の向きやシワにご注意ください。これは、単にテクスチャをコピーして貼り付けるのではなく、3Dシェーピングに関する複雑なアルゴリズムであることを示しています。
幸運を！ :)
あなたの最初のイメージは3次元です。もちろん、単純な画像としてパターンを使用してそれを繰り返すと、形状が消えて2次元の画像が得られます。指定したパターンには曲率も含まれているため、役に立ちません。パターンが繰り返したいものであることを確認する必要があります。そのため、パターンの上部から有効な継続はパターンの下部を上向きにし、パターンの左側から有効な継続はパターンの右側を左方向にします。 。そして、あなたが持っているパターンが二次元であることを確認する必要があります。つまり、広げたシャツはそのパターンを持っています。
これらの規則から始める場合、最初のマイルストーンはパターンを2Dで正しく使用することです。これを達成した場合は、シャツの基本変換を処理して、シャツに特定の形状がある場合のユーザーの目と想像上の点との間の距離を知る必要があります。これに基づいて、各ピクセルの正しい色を計算することができます。
あなたはあなたを助けることができる式について何かを読む必要があります： グラフィックス-3D点を2D投影に変換する方程式