ファブリックモックアップの使い方

リピートは布になるまでは、ただの絵にすぎません。これが、その布です。

よい結果を出すための短いガイドと、よくある質問への答えです。

ツールを開く

使い方

  1. 1

    パターンを用意する

    タイル状のPNG、JPEGまたはSVGをステージにドロップするか、貼り付ける、あるいはタータンツールからタータンを送ります。選ぶまでの間は椅子にサンプルのタータンが表示されています。

  2. 2

    シーンと布を選ぶ

    上部バーで椅子・キルト・シャツ・スワッチを選びます。リピートをセンチメートルで設定し、布の重さを選びます。キルトではプリーツモードを、シャツでは縫い目を合わせるかどうかを選びます。

  3. 3

    ライトを当てて回す

    4つの名前付きライトと4つの背景があります。ドラッグで回転、スクロールで寄り、ダブルクリックでフィットします。必要なら「すべてのコントロール」でレンズ、キーライト、マテリアルを調整できます。

  4. 4

    書き出す

    1×・2×・4×のPNG、GIFループ、MP4またはWebMのターンテーブル動画、あるいは椅子でのそよ風動画、iframeスニペット付きのインタラクティブHTMLファイル。プロジェクトをアカウントに保存すれば、ドレープをそのまま保持できます。

このツールについて

タイル状の画像をドロップしてください — タータンツールのタータンなら自身のセットと物理サイズを持って届き、パターンジェネレーターのリピートやハーフトーンタイルはピクセルとして届きます — それが4つの用意されたシーンのいずれかで織物として描画されます。衣服はセンチメートル単位のフラットなパネルから、本物と同じ方法で仕立てられて生成されるため、入力したリピートはそのまま布上のリピートになり、布目はフラット上でのパネルの回転で表され、縫い目を合わせるとは2枚のパネルをつなぐ前に位置を揃えることを意味します。椅子に掛けたスローは重力の下で布のソルバーによって落ち着き、そこから折り目・自己衝突・裾が導き出されます。キルトとシャツはそれぞれの構造どおりに組み立てられます。すべての布には織りがあります — 既定は2/2綾織り、タータンの写真に見られる斜線です — リピートと重さが示す糸のスケールで導かれ、ウールならガラス的な光沢ではなく独特の光沢を持ち、裾には実際の厚みがあります。

コントロールは2つの階層に分かれています。1つ目は6項目で、シーンごとに1つずつ加わります:リピートサイズ、布目、布の重さ、名前付きのライト、背景、そしてキルトのプリーツモードまたはシャツの縫い目合わせです。布の重さはドレープと織りの深さを同時に動かします — これらは1つの物理的事実だからです。「すべてのコントロール」を開くと、その奥にある詳細設定が現れます — 織り構造、経糸と緯糸の剛性、光沢と粗さ、キーライトとフィル、レンズなど。ここでの各値は、シンプルなスライダーが示す値にあなた自身の調整を掛け合わせたものなので、シンプルなスライダーを動かしても全体が連動して動き、あなたが設定した値が上書きされることはありません。書き出しは同じレンダリングから作られます:ステージの最大4倍のPNG、ループ全体でぴったり閉じる単一パレットのGIFターンテーブル、MP4またはWebM、そしてドラッグで回転できてフォルダーから開け、通信を必要としないインタラクティブHTMLファイルです。

特長

4つのシーン、すべて内製

決定論的な布ソルバーで落ち着かせたアームチェアのスロー、トルソーに掛けたキルト、ボタンダウンシャツ、フラットなスワッチ — いずれもセンチメートル単位のパネルから生成されるため、パターンのサイズは正確です。

セット通り、あるいはストライプ中心のプリーツ

キルトの背面は、プリーツ全体にセット全体を見せることもできますし、選んだ1本のストライプを各プリーツの中心に置くこともできます。そのため背面は前面とは違う見え方になります — スコットランドの目利きが最初に確認する部分です。

布に見える布

選んだ織り構造から導かれる織りの法線と糸の陰影、繊維のノイズ、プラスチックのようなハイライトではないウールの光沢、そして厚みのある裾 — ほとんどのモックアップが見落とすディテールです。

きちんと閉じるループ、単独で動くファイル

GIFと動画のターンテーブルは開始直前のフレームで閉じ、回転全体を通して一度だけ量子化されます。インタラクティブHTMLの書き出しは必要なものをすべて内包し、通信を一切行いません。

よくある質問

どんな画像を使えますか?

PNG、JPEGまたはSVGのタイルです。物理サイズが分かるファイル — density情報を持つPNGや、インチ・センチメートル単位の幅を持つSVG — はリピートを自動で入力します。それ以外は自分で設定したリピートで開きます。端が合わないファイルもそのまま描画され、ステータスバーがその旨を表示します。

プロジェクトを開くたびにドレープは同じになりますか?

はい。ソルバーはプロジェクトが保存するシードに基づいて決定論的に計算され、その演算はブラウザ間で最後の桁がずれるような処理を避けています。そのため保存したスローは常に同じ形で再現されます。異なる垂れ方にしたい場合は「再ドレープ」で新しいシードを振り直せます。

コントロールが2階層になっているのはなぜですか?

多くの人は2クリックで良いレンダリングを得たいと考えますが、すべてのつまみを操作したい人もいます。シンプルな階層は前者に十分で、「すべてのコントロール」は両者が競合しないまま後者を開きます。奥の各値はシンプルなスライダーが示す値にあなたの調整を掛けたものなので、シンプルなスライダーは機能し続け、あなたの調整も維持されます。

インタラクティブHTMLファイルの容量はどれくらいですか?

だいたい1メガバイトです。そのほとんどは3Dランタイムで、残りは衣服の形状とタイルの縮小版です。保存前にツールが容量を表示します。ディスク上のファイルとして開け、オフラインでも動作し、訪問者の「モーション減少」設定にも対応します。

その他のツール

ProDesignerは世界中の誰でも無料で利用できます。作業時間の節約に役立ったら、開発の支援をご検討ください。

ProDesignerを支援する