1. 型紙から布を作る
実際の服づくりでは、体の寸法から型紙を引き、平らな布を裁断して縫い合わせます。このデモでは、それを単純化した手順で布を作っています。マネキンの胴体を高さごとに輪切りにして断面の外形（腕を除いた凸包）を測り、そこにゆとりを足した長さを、その高さでの布の周長にします。バストでは +1cm、ウエストではバイアスで体に吸い付くぶん −1.5cm、ヒップでは +4cm、といった具合です。こうして作った周長の分布を縦に並べると、筒状の布（周方向 192 分割、約2万点）ができあがります。
筒をそのまま胸に当てると、バストトップから下がまっすぐなテントのような形になります。布の縦の長さが、胸のふくらみを越えてアンダーバストへ入り込む道のりよりも短いためです。実際の服ではここにダーツを入れて立体にします。このデモでは代わりに、布の縦方向の「自然な長さ」を、体の表面に沿って測った道のりに合わせています。
2. 布を XPBD で動かす
布の動きをコンピュータで計算することを、クロスシミュレーション（布シミュレーション）と呼びます。映画やゲームの衣装、アパレルの 3D 設計などで使われている技術です。このデモでは、布をたくさんの点と、それらをつなぐ拘束で表します。拘束の種類は、たて・よこの伸び、斜め方向（布目）のずれ、そして曲げです。毎ステップ、まず重力や風で点を動かし、次に拘束が満たされるように点の位置を直接補正します。これが Position Based Dynamics（PBD）の考え方です。
もとの PBD では、計算の反復回数や時間刻みによって、布の硬さが変わってしまいます。XPBD（eXtended PBD）は、拘束ごとの柔らかさをコンプライアンス（硬さの逆数）という物理量で与え、その問題を解消した方法です。このデモでは、シルク・コットン・レザーの違いを、このコンプライアンスの値の違いとして表しています。1フレーム（1/60秒）を 20 のサブステップに分けて解くことで、布の伸びを小さく保っています。
3. GPU で並列に解く
拘束を1つずつ順番に解くと、2万点の布では間に合いません。そこで、同じ点を共有しない拘束どうしを同じ「色」にまとめる（グラフ彩色）ことで、同じ色の拘束を GPU で一斉に解けるようにしています。色ごとに順番に処理すれば、結果は順番に解いた場合（Gauss–Seidel 法）と同じ性質を保てます。計算は WebGPU の compute shader で行い、描画も同じ GPU 上で行います。
4. 動く体との衝突
マネキンは、骨格（ボーン）に皮膚が追従するスキンメッシュで、歩く・回る・跳ぶの動きは Mixamo で付けたモーションです。動く体と布の衝突を毎ステップ正確に計算するのは重いので、体を 20 の部位に分け、部位ごとに静止姿勢での符号付き距離場（SDF）を3次元テクスチャに焼いておきます。SDF は、空間の各点から体の表面までの距離を、内側なら負の値で表したものです。衝突判定のときは、布の点を各部位の骨の動きと逆向きに変換して静止姿勢の座標へ戻し（逆スキニング）、そこで SDF を引きます。値が負なら体にめり込んでいるので、表面まで押し戻します。こうすると、体の形が動いても衝突判定はテクスチャを読むだけで済みます。
5. 身頃を体に沿わせる
筒状の1枚の布からは、胸のような二重に曲がった形をきれいに作れません。実際のドレスは、ダーツや切り替え、芯地やカップで胸元の形を作っています。このデモの Fitted は、それにならって、胸元からアンダーバストまでの布を着せた直後の形で肌に固定し、体の動きに追従させています。Draped に切り替えると、身頃もすべて自由な布として動きます。固定の有無で、胸元の形やしわの寄り方がどう変わるかを比べてみてください。
