タグ: UV

LightWaveで二次元キャラ系人物モデリング奮闘記 ―プリーツスカート編―

最終更新：2017/01/13

今回はプリーツスカートがテーマ。なんとなくそれらしい形のものを作るのは簡単なので、学生の制服やアイドルユニットのお揃いの衣装などでお馴染みのチェック柄のスカートを作る。チェック柄なんて珍しくもないけど、チェック柄を甘く見てはいけない。

3DCG隆盛の昨今でも、チェック柄のスカートを身にまとった美少女キャラクターの3Dモデルというのは驚くほど見かけない。まず考えられる理由としては、UVマップに格子状に展開したチェック柄を歪ませないように維持したままスカートをモデリングするのが難しいからというのが挙げられる。単純に裾を広く、ウェストを細くすると上に行くほど柄が細くなってしまい、不自然になってしまう。

仮に、モデルを単純化してテクスチャの描き方を工夫するにしても、放射状に広がる裾に合わせてチェック柄を描くのは、柄の連続性をどうやって担保するのかといった問題も含め、控えめに言っても労力がかかる。立体化を前提、想定、又は期待してキャラクターデザインをする場合、チェック柄のスカートは全般的に避けられる傾向にある。現実世界では街に出ればチェック柄のスカートばかりが目立つのに、二次元世界では学園物の作品でも制服のプリーツスカートにチェック柄を採用している学校のほうが珍しい。もっとも、立体化の前にアニメ化やコミカライズといった二次元化があり、単純に描くのが面倒という現実的な問題もある。

また、プリーツスカートの縫製の特殊性にも理由がある。縫い目を切り離して展開してみると、大抵の人が想像するような扇形や台形の生地ではなく、実は長方形の布1枚でできている。それを末広がりの独特のラインに仕立てるために、「曲線折り」という特殊な折り方を採用している。ウェストが細くなるようにまっすぐに折るといずれチェック柄が斜めに傾いていってしまうのを避けられない。

本物の布や折り紙であれば基本的に伸び縮みはないので、順序よく折り目をつけていけば自然にプリーツスカートの形になっていくんだけど、3Dモデリングの場合、ポイントを移動させるとエッジがいくらでも伸縮してしまう特性があるため、エッジの長さを固定したまま折り畳むという操作がそもそも難しい。

そのプリーツスカートを現実のものとほぼ同様の発想でモデリングすることにあえて挑戦する。挑戦しないのであれば、わざわざ記事にする必要はない。例によって拡張プラスと移動ツールでモデリングしていく方法を今更紹介されても「またその組み合わせ？」と言われかねない。

基礎を作る

それでも、3DCGソフトウェアの制限には逆らえないので、まずはセオリーどおり円筒から作る。ディスク（Disc）ツールで原点に直径1m、高さ1mの標準的な大きさの筒を作る。これからややこしい計算をすることになるので、初期座標くらいは単純にしておきたい。

ひだの数があまり多いと作業が大変だし、逆に少なすぎるとプリーツスカートとは呼べなくなるので、15個とした。折り返し分を計算に入れて30面の円筒を作る。15という数字は、1周分の360°を割り切れるから。ついでに言うと、UVは幅が100%（LightWaveの内部では1.0 = 1m = 100%は等価）なので、100と360の公約数だと更に計算しやすい。とは言うものの、100と360の公約数は1、2、4、5、10、20の6つしかなく、実質10か20しか選択肢がない。

Skirt000

上面と底面は必要ないので、削除する。大抵要らなくなるので、「上面と底面をふさがない」というオプションがあれば便利なんだけど、些細なことなので文句を言っていても始まらない。

Skirt001

サーフェースがデフォルトのままだと何かと不便なので、次の画像のように「Skirt_Check」というサーフェースを割り当てておく。

Skirt002

とりあえず、スムージングはかけないでおく。

Skirt003

早々にUVマップを作成する。極めて単純な形状のオブジェクトなので、標準機能の新規UVテクスチャ（New UV Map）ツールで円柱状に展開する。今回の目標はUVマップを基準にしてモデリングのほうを工夫することなので、手芸店などで計り売りされている1枚布のようなマップが必要。

Skirt004

なお、プリーツの数が4で割り切れるのであれば、4分の1だけモデリングしてあとは90°ずつ回転させて複製し、境界線をつなぎ合わせればモデリングの労力をほぼ4分の1にできる。ただ、その場合のUVは4箇所とも同じ位置に重複してマッピングされることになるので、UVの扱いに慣れていて混乱しない自信があれば試してみてもいいかもしれない。それから、モデリングを済ませてしまってからUVを展開してももちろんいいんだけど、plg_Make_UV_Editなどによる自動展開は多少なりとも歪むので、UVの調整にそれなりに時間を要する。プリーツを折り畳んでしまってからLightWaveの標準機能によるUV展開は使えないと思っていい。

次の画像のような簾状のマップを作る。

Skirt005

更に、作成したUVにチェック柄のテクスチャを割り当てる。モデリングの説明が思いのほか長くなりそうなので、チェック柄のテクスチャの作り方はまた今度説明する。Adobe Photoshopのスマートオブジェクトはチェック柄の変更や修正に柔軟に対応できて便利なので一番おすすめではあるんだけど、レイヤーが扱えて標準的なレイヤーモードを備えている画像編集ソフトウェアであれば簡単に作れる。

Skirt006

次の画像の状態が基準になる。以後、この模様が歪まないように工夫を凝らしていく。

Skirt007

すべての面の幅が一定ではプリーツスカートにならないので、折り返す部分を短くする。次の画像のようにUVマップのビューでひとつおきにポイントを選択する。三面図の上面からのビューで選択しても同じだけど、チェック柄の連続性を維持するためにはマップの左右端にあたるポイントは間違っても動かせないので、UVマップ内で選択したほうが結果的には手早く済む。

Skirt008

スカートのデザインにもよるんだけど、ひだの表側に見えている部分と折り返し部分の比率は4:1にすることにした。ひだの数は15個で、現在5:5になっている比率を8:2にしたいので、100 \div 15 \times 0.3 = 2 \, [\%]だけUVのU成分をずらす。UV値の変換（Transform UV）ツールで次の画像のとおりに入力する。

Skirt009

「OK」ボタンを押すと、次の画像のようにUVマップが変換される。

Skirt010

UVマップを変換しただけなので、三次元空間の筒の形状には変化がないけど、チェック柄が歪んでいるのが確認できる。

Skirt011

ポイントの選択を解除しないようにして、今度は三次元空間のポイントを360 \div 15 \times 0.3 = 7.2 \, [^\circ]だけ回転させる。正負の方向はUVの歪みを見て判断する。

Skirt012

正しい方向に回転させられれば、テクスチャの見た目上は最初の状態に戻る。これでプリーツスカートを作る準備ができた。チェック柄のパターンは15×15なので縦方向が圧縮されて縦横比が一致していないけど、この段階では横方向の模様が歪んでいなければいい。

Skirt013

アポロニウスの円

ここからが本題。ひとつのひだを4:1に分割したまでは良かったんだけど、その比率を維持しながら折り返すのが結構難しい。比率さえ維持できていればUVを歪ませずに済むので、この際長さは変わってしまってもいい。

ここで久しぶりに数学らしい数学を利用する。

2つの点AとBからの距離の比がm:n\; (m \neq n)で一定である点Pが描く軌跡を求めたい。結論から先に言うと、その軌跡Pは円になるんだけど、その円の中心点をCとする。各点はXとYの成分を持っているので、それぞれA(\alpha), B(\beta), C(\gamma)とする。

C点の座標\gammaは、次の式で求める。要は、X座標とY座標をそれぞれ別に同じ式で計算するということ。

    \begin{align*} \gamma=\frac{\displaystyle -n^2\alpha+m^2\beta}{\displaystyle m^2-n^2} \end{align*}

C点の座標が求まればA点とB点との距離は三平方の定理で求められるけど、今は試験問題を解いているわけではないので、ポイントの計測（Measure Points）ツールを使って簡単に求める。

線分ACとBCの距離が求まれば、点Cを中心とする円Pの半径rは次の式で求められる。

    \begin{align*} r=\sqrt{{AC} \cdot {BC}} \end{align*}

計算と作図がしやすいように、B点が(X,Z)=(-0.5,0)の位置にあるところを選んだ。これらの式から求めた数値をディスクツールの数値入力ウィンドウに入力する。座標を参照するだけなので高さは0でいい。サイドが36なのは言うまでもなく、10°刻みにするため。

Skirt015

計算が合っていれば4:1の折り目で分割しているポイントを通過する円が描けるはず。実際に作図してみると思ったより半径は小さかった。精度としては4.006:1～3.995:1くらいだから誤差±0.16%前後。

Skirt016

このような円をアポロニウスの円と言う。一般的には次の画像のような図で表される。図はm:n = 3:2になっている。A点とB点が水平に一列になっていたほうが理解しやすいのでこのように描くけど、二次元的に斜めにずれていても円の位置と半径は求められる。図を見るとわかるように、比率が一定になるだけで長さまでは一定にならないことに注意。

Skirt014

なんでこのような式になるのかまでは省略。ネットで「アポロニウスの円」を検索すれば高校の先生が詳しく証明してくれているページがたくさんある。つまり、まったく憶えてはいないけど高校の数学で習ったはずで、センター試験にも出題されるポピュラーな平面幾何学の定理。更に発展させた複素数平面を使った解法は2004年（平成16年）を最後に今の高校では教えていないらしいけど、コンピュータの発達した21世紀に生きる私がすぐには思いつかなかった方法を紀元前の数学者が既に考案していたというのだからまったく皮肉なことだ。

ある平面上で線分APとBPの比率を一定にしたまま分割点Pを移動させたいという要求はありそうだけど、Adobe Illustratorのようなベクター画像編集ソフトウェアのツールにも意外と備えられていない。少し調べたところでは、Illustratorでもアポロニウスの円を描いてその円の外縁にスナップするようにパスの制御点を移動させるという方法が採られているようだ。

こんな手間のかかる計算までしなくてもいいのでは、と言われそうだけど、アポロニウスの円は平面上にある2点についてしか通用しないものなので、今使わないと使う機会がなくなる。それに、いつも「適当に、感覚で」と繰り返すのでは何の参考にもならない。それほど厳密でなくても良ければ、ひだの角度を直角と仮定して三角関数の正接（\tan \theta）が0.25になるおおよその位置を求める方法もある（あくまでも仮定なので、実際に操作すると直角にはならないため、無視できないほどの誤差が出る）。

A点とB点の間の分割点を選択し、スナップドラッグ（Snap Drag）ツール（Shift+G）でアポロニウスの円上にある任意の点にスナップさせる。この時、「操作ビューに沿う」にチェックを入れておかないと水平に動いてくれないので注意。

Skirt017

次の画像のように、4:1の比率を維持したまま折り返すことができた。

Skirt018

15個あるひだの数だけアポロニウスの円を作るのはさすがに大変なので、スカート全体を15分の1、つまり24°ずつ回転させて、スナップドラッグを繰り返す。原点を中心にしてアポロニウスの円をスカートの外縁を周回させても同じだけど、円周率が無理数であるために回転は誤差が蓄積しやすいツールなので、変形の基準にするものはできるだけ移動させたくない。

Skirt019

15個のひだを折り返し終わった状態が次の画像。ここでウェスト部分を絞ってしまうと、冒頭でも書いたようにチェック柄が先細りしてしまう。

Skirt020

縦横の模様を合わせる

ここでチェック柄の縦の模様を横の模様に一致させる。ひとつのひだの長さは既にわかっているので、それを15倍すると裾の周囲の長さが求められる。結果、4.4306205mと求まり、スカートの丈の長さは1mなので、裾の周囲に対する割合は22.5702 \dots \, [\%]となる。

上端のポイントを選択し、これをUV値の設定（Set UV Value）ツールでUVのV成分に入力する。

Skirt021

上を下に移動させたほうが計算が楽なのでそうしたけど、下を上に移動させても結果は同じ。

Skirt022

上の画像と見比べてもらえば、チェック柄の縦横比が合っているのがわかると思う。

Skirt023

曲線折りの模擬

次はいよいよ曲線折りを行っていく。まず、ウェストに向かって絞りたい部分を分割する。全体を半分に分割し、上半分をさらに半分に分割する。

この時、必ずバンドソープロ（Band Saw Pro）を使う。まだ単純な形状なのでナイフツールを使ってもいいような気もするし、一見すると似たような動作ではあるけど、ナイフツールはUVを壊してしまうことがある。バンドソープロが優れているところは、どんなに入り組んでいようと、ポリゴンが連続さえしていれば正確に分割できることばかりではなく、UVを破損させることがない点。

Skirt024

次の画像のように3分割した。

Skirt025

分割点をひとつのひだの10%分だけ左にずらしていく。ひとつのひだのUVにおける幅は15分の1、つまり6.666 \dots \, [\%]なので、その10分の1をUV値の変換ウィンドウに入力する。

Skirt026

裾側から順に、8:2(=4:1)、7:3、6:4(=3:2)、5:5(=1:1)になっている。

Skirt027

すべての段の折り目について、アポロニウスの円を作図するのがもっとも正確な方法なんだけど、(x_A,y_A)=(0,0)、(x_B,y_B)=(1,0)として単純化してみて気が付いたことがある。

分割点がA点とB点からの距離の比が8:2の時、アポロニウスの円の半径は次のように求められる。

    \begin{align*} x_C&=\frac{\displaystyle -2^2x_A+8^2x_B}{\displaystyle 8^2-2^2}=\frac{\displaystyle 16}{\displaystyle 15}\\ r&=\sqrt{x_C \times (x_C - x_B)}=\sqrt{\frac{\displaystyle 16}{\displaystyle 15} \times \left(\frac{\displaystyle 16}{\displaystyle 15}-1\right)}\\ &=\sqrt{\frac{\displaystyle 16}{\displaystyle 15}}=0.2666 \dots \end{align*}

同様に、7:3の場合は次のとおり。

    \begin{align*} x_C&=\frac{\displaystyle -3^2x_A+7^2x_B}{\displaystyle 7^2-3^2}=\frac{\displaystyle 49}{\displaystyle 40}\\ r&=\sqrt{x_C \times (x_C - x_B)}=\sqrt{\frac{\displaystyle 49}{\displaystyle 40} \times \left(\frac{\displaystyle 49}{\displaystyle 40}-1\right)}\\ &=\sqrt{\frac{\displaystyle 441}{\displaystyle 1600}}=0.525 \end{align*}

同、6:4の場合は次のとおり。

    \begin{align*} x_C&=\frac{\displaystyle -4^2x_A+6^2x_B}{\displaystyle 6^2-4^2}=\frac{\displaystyle 9}{\displaystyle 5}\\ r&=\sqrt{x_C \times (x_C - x_B)}=\sqrt{\frac{\displaystyle 9}{\displaystyle 5} \times \left(\frac{\displaystyle 9}{\displaystyle 5}-1\right)}\\ &=\sqrt{\frac{\displaystyle 36}{\displaystyle 25}}=1.2 \end{align*}

つまり、ものすごくざっくりではあるけど、比率が1割変動するたびに半径は約2倍になっている。半径の計算に平方根を使っていることに多分関係がある。円の中心点Cは移動するので単純に2倍では本当はダメなんだけど、同じ作業を60回繰り返すのはちょっと辛いので、ある程度は近似できるということも併記しておく。

なお、5:5の場合はm=nなので、m^2-n^2は0になってしまい、計算できなくなる。分割点がちょうど中間の場合は、点A、点B及び点Pをつなぐ三角形は二等辺三角形になり、点Pの軌跡は直線になる。つまり、アポロニウスの円の半径は無限大になり、円にならないということ。とは言え、計算できないと座標が求められないので、6:4の場合の更に2倍と仮定して求める。

ひだの短いほうのエッジを選択し、ストレッチ（Stretch）ツール（Hキー）の中心点は(X,Z)=(-0.5,0)に固定、下から順に200%、400%、800%まで内側に向かって拡大する。

Skirt028

ウェストの絞り込み

最後に、ウェストに向かって細くなるように各段のエッジを1周分選択して縮小する。冒頭で「ウェストに向かって絞ったらプリーツスカートの意味がない」と言っていたことと矛盾するように感じるかもしれないけど、これまでの操作で上の段に行くほどプリーツの幅は広くなっているので、最後に帳尻合わせのために縮小しなければならない。エッジの長さを固定して折り畳めないならば、一度広げてから縮小して元のスケールに戻すという発想。

裾から数えて2段目の設定。裾のひだの長いほうのエッジが8に対して7なので87.5%と求めた。

Skirt029

Skirt029a

裾から数えて3段目の設定。裾のひだの長いほうのエッジが8に対して6なので75.0%と求めた。

Skirt030

Skirt030a

裾から数えて4段目、つまり上端の設定。裾のひだの長いほうのエッジが8に対して5なので62.5%と求めた。

Skirt031

Skirt031a

拡大してよく見てもらえればわかると思うけど、折り返し部分も含めた裾の長さの総計に対し、上の段の長さは必ずしも一定ではない。プリーツの表側と折り返し部分の比率はほぼ計算どおりなので、折り返しの角度が深すぎるために長くなってしまっている。

基本版完成

以上の操作がすべて完了してできあがったのが次の画像のようなモデル。水車のような形にはなっているけど、とてもではないけどお世辞にもスカートのようには見えない。

Skirt032

ところが、これにサブパッチ（キャトマル）をかけると、不思議なことにかなりそれらしいプリーツスカートに早変わりする。チェック柄もそれほど大きくは歪んでいない。見直す余地はまだあるけど、方向性は間違っていないことが確認できた。

Skirt033

最後に、アポロニウスの円を各段ごとに作成したという証拠物件。後でどうしても正確を期したくなった場合に再利用する。これらの円を使って作業している途中で円の半径が比率の2乗にほぼ比例することに気が付いた。

Skirt034

途中経過

作業のしやすさを重視して単位長（1メートル）の範囲内でモデリングしていたので、実際のモデルに着せるには大きさを全体的に拡大し、ウェストの位置とサイズに合うように調整する。あとは、多少脚がはみ出していても、物理演算でなんとかできる。

ClothFXを次の画像のように設定する。構造維持（Hold Structure）は「100」くらいにしておかないと体のラインに合うように変形してくれないのであまり上げすぎないほうがいい。一方、粘性（Viscosity）と抵抗（Resistance）をそこそこの数値にしておかないと、スカートの形状がなかなか落ち着いてくれないし、わざわざ計算までして比率を揃えたプリーツが不規則に歪むのを抑制できない。

skirt036

ちょっと短かったけど、いつものモデルに着せてみるとこんな感じ。

skirt037

チェック柄を解除して無地にするとこんな感じ。ウェストの余裕を厳しくしすぎたために、スカート右側の一部のプリーツがモデルに貫通してしまっている。上の画像でも同様の現象は起きているんだけど、柄がなくなったので目立ってしまった。

skirt038

関連記事

参考記事

LightWaveで二次元キャラ系人物モデリング奮闘記 ―UV編―

最終更新：2016/10/09

ボーン・ウェイトの設定が終わったので、次はIKの設定なんだけど、レイアウトに移る前にLightWaveにおけるUV展開について簡単にまとめておこうと思う。普通はUV展開後、テクスチャを用意してからリギングをするものなんだろうけど、動くかどうかわからないモデルに一生懸命テクスチャを塗っても意味がないのでIK以外のリギングを先に済ませておいた。

UV展開

LightWave標準機能にもUV展開用のツールが備えられているんだけど、平面状、円柱状、球状、アトラスの4種類からしか選べなくて、人物モデルのような複雑な形状のUV展開には向いていない。もっと言ってしまうと、その4種類しかないのであれば、UVマップである意義はあまりない。ただ、平面状であってもUVを使用するとバンプ・マップやノーマル・マップの凹凸がはっきり出るようになるので無意味とまでは言わないけど、必要性はかなり薄い。

そこで、フリーソフトウェアのLightWaveモデラー用プラグインplg_Make_UV_Editを使用する。LightWave関連書籍には大抵使い方が載っているLWユーザー必携のプラグインのひとつ。WEBサイトからプラグインのZIPファイルをダウンロードして解凍し、適当なプラグインフォルダにコピーしてモデラーに読み込ませる。x64ベースのWindowsでは動作を確認していないそうだけど、64bit版のLightWave 10で特に問題なく動作している。

本当はモデル全体のUVを展開する必要があるんだけど、ひとまず例として次の画像のジャケットのUVを展開してみる。

UV000

UVを分割する境界線をエッジで選択していくので、サブパッチはいったん解除しておいたほうが作業しやすい。図解のためにワイヤーフレームにしているけど、エッジの位置が確認しやすいものであればビューモードはなんでもいい。

UV001

plg_Make_UV_Editを起動し、次の画像の数値入力ウィンドウでUVマップ名を決めたらマップを分割するエッジを選択していく。Ctrlキーを押しながら選択すると最後に選択したエッジから最短距離の連続したエッジが選ばれるので、ポリゴン数が多い場合は幾分省力化できる。

UV003

どのように区切ったらテクスチャを塗りやすいかを考えながらエッジを選択していく必要があるんだけど、できるだけUVの分割線を目立たないところに設定しておくとテクスチャを描くときに継ぎ目の調整に苦労しなくて済む。テクスチャ・ペイント（3Dペイントとかポリペイントとか呼び方は様々）ができるソフトウェアを持っている場合は継ぎ目のことはあまり考えなくてもいいんだけど、UV展開をソフトウェア任せにしていると必要以上に細切れにされてしまい、テクスチャのどの部分がモデルのどこに相当するのかわからなくなり、画像編集ソフトウェアでの微調整ができなくなる恐れがあるので、一度は自分で工夫しながらUV展開する経験をしておくのをおすすめする。

UV分割があまりに大雑把すぎても、逆に細分化しすぎてもテクスチャを塗りにくくなるので、どんなテクスチャが必要なのか事前にイメージしておくことが重要になる。最初は加減がわからないと思うので、ざっくり前後に区切ってどのようにUV展開されるのか確認しながら分割するエッジを変更したり増やしたりしていってもいいと思う。展開時に無理があるところはプラグインが適当に補間してくれるので、すべての分割エッジが一筆書きのように連続している必要はないけど、エッジ選択をひとつ増減しただけでUV展開図が大きく変わることもある。

UV002

何かの拍子に選択したエッジがすべて解除されてしまうことがあるので、選択したエッジが複雑になってきたら適当なところで「Save Edge」でエッジ・データを保存しておく。

LightWave 11.5からようやく標準でもUVアンラップ機能が追加されたけど、ポリゴンの「パーツ」やポイントの「ポイントセット（選択セット）」のように過去に選択したエッジをまとめて保存しておく方法がなく、どこのエッジでUVを切り分けたのかを記憶しておいてくれないので、LightWave 7.5の時代に作られたplg_Make_UV_Editのほうがまだアドバンテージがある。

モデリング中のエッジ選択の方法とは異なり、選択判定が結構シビアでエッジの中央付近を正確にクリックしないと選択されないので、選択しにくい場合は、数値入力ウィンドウの「Hide Handle」のチェックを外してハンドルを表示させるとどこをクリックすればいいのかわかりやすくなる。次の画像のような静止画だと表示がゴチャゴチャしてかえってわかりづらくなっているように見えるかもしれないけど、プレビューを回しながら見てみるとハンドルがあるのとないのとでは相当違う。

UV004

また、「Ignore Backface」のチェックを外すと表側に見えていないエッジも選択できるようになるので、裏手に回り込んでいて選択しにくいエッジを選択したい場合などその都度使い分ける。

UV005

エッジの選択が終わったら、念のためエッジ・データを保存し、「Make UV」をクリックすると次の画像のようにUVが展開される。塗り分けテストのためにジャケットの本体部分と肩の部分を別のサーフェースにしていて、「Divide by Surface」を選択していたので、次の画像のようにジャケット本体から肩と襟がバラバラに展開されてしまった。

UV006

これではテクスチャを塗る時に都合が悪いので、肩のサーフェースをジャケット本体のサーフェースに統一し、再度「Make UV」すると次の画像のように展開された。肩とジャケット本体がつながっているのがわかる。「Divide by Surface」のチェックを外してもいいんだけど、それはそれで別の問題が起きることがあるので、モデルの都合で判断する。

UV007

このように、展開図が気に入らなかった時に何度でもUV展開をやり直すことができるので、plg_Make_UV_Editは非常に便利。エッジ・データさえ残っていれば、テクスチャを描いていて不具合に気付いた時にUV展開からやり直すこともできる。

現状ではUVマップに余白が多い。この余白を有効利用したい場合は、plg_Make_UV_Editと制作者が同じplg_Pack_UV_Chartプラグインで再パッキングできる。UVマップはモデルのジオメトリをUV平面に投影したものだけど、三次元空間とは独立した概念なので、UVマップ内にあるポイントを動かしてもモデルの形状には影響しない。最初は理解に苦しむかもしれないけど、色々試してみて少しずつ体感として理解していってもらうより他にない。

また、テクスチャを塗る時にポリゴンが左右対称、上下対称や直線状に並んでいたほうが何かと都合がいいので、あらかじめUVマップを整然と整列させておくという作成スタイルもある。ただ、テクスチャ作成が楽になる代わりに最終的にポリゴンに貼り付けた時に実際のジオメトリに合わせてテクスチャの伸縮が起こるので、文字や記号など模様に意味のあるものについては判読できなくなる可能性がある。

文字や記号の可読性とテクスチャ作成の簡略化を両立させることもできるけど、UVの特性を把握した上で、市松模様や水玉模様の歪み調整用のテクスチャを別に用意してテクスチャの歪みを丹念に修正しなければならないため、技術的にはむしろ高度になる。

今回はそれほど難しいテクスチャを作成する予定がないので、パッキングとUV編集は省略する。所望のUVマップが得られたら、Enterキーを押すか、plg_Make_UV_Editを割り当てたメニューボタンをクリックして編集モードを終了してUVマップを確定し、オブジェクトファイルを保存する。

テクスチャを描く

UVマップができあがったら、画像データに出力して画像編集ツールでテクスチャを描くんだけど、その画像出力でつまづき、結構悩んだ。LightWave 10からUVマップ（厳密には三面図のワイヤーフレームも含めて全部）をEPS形式で出力できるようになっている。「ファイル」メニューから「出力」を選ぶとEPSファイルにエクスポートできる。

UV008

次の画像のようなEPS出力ダイアログの「View」を目的のUVマップに設定し、ページサイズを選択する。インチスケールなので面食らうかもしれないけど、300dpi固定の解像度で出力されるので、デフォルトの6インチ四方だと1800×1800ピクセルの画像になって出力される。「Draw Grid」はグリッドを出力画像に埋め込むためのもので、必要に応じて指定する。「Draw Points」はよほど特殊な用途でない限り使う機会がない。

UV009

EPS形式はポストスクリプトに基づく画像形式なんだけど、ポストスクリプトの権利をアドビシステムズが保有していることもあり、対応している画像編集ソフトウェアが限られていて、メジャーなところではAdobe PhotoshopかIllustratorくらいしかない。GIMP2も一応ファイル形式の名前だけは表示されるけど、どういうわけか、正しく読み込まれない。

Illustratorの場合はUVマップがベクター画像として解釈されるので拡大縮小に強くなるという利点があるけど、ページのサイズは考慮されないので、上のダイアログでグリッドを出力しておかないと余白も含めたUVマップにピッタリ合う正方形の画像に形成するのでさえ負担になる。

ここでは、オーソドックスにPhotoshopでの編集方法を書いていく。PhotoshopでEPS形式ファイルを開こうとすると、次の画像のようなダイアログが表示される。6インチ四方、300dpiなので1800×1800pxのサイズになっている。これで特に問題なければ、「OK」を押すとラスタライズされる。アンチエイリアスはお好みで。マスクなどに自動選択ツールを使いたい場合はアンチエイリアスしないほうがいい場合もある。

UV010

ラスタライズが完了すると次の画像のようにUVマップがPhotoshopに表示される。これにレイヤーを重ねてUVマップをアタリにしてテクスチャを塗っていく。UVマップがラスタライズされたレイヤーは誤って編集してしまわないようにロックしておくのが無難。

Photoshopの場合はページサイズの設定や画像の位置調整が必要なく、すぐに描き始められるのが長所なんだけど、ラスター画像なのでPhotoshopをそれなりに使いこなす二次元作画スキルが必要になる。もっとも、最近のPhotoshopはスマートオブジェクト化が進んでいるので、幾何学的模様を任意の時点でパスによって変形・編集でき、さながらベクター画像のように作画することもできるようになっていて、Illustratorとの境目が曖昧になりつつある。

UV011

ひとまず、何も塗らずにPNG画像に出力してジャケットに合わせてみる。色・質感編集（Surface Editor）からジャケットのサーフェースを選択し、「色」設定の「T」ボタンをクリックしてテクスチャ設定画面を開く（テクスチャを完全に削除したい場合はShiftキーを押しながら「T」ボタンをクリックする）。

レイヤー種に「画像マップ」を選択し、投影は「UV」、UVマップは作成したUVマップ名、画像はPhotoshopで出力したPNG画像を指定する。なお、透過PNGを指定することもできるので、透明ピクセルに相当する箇所はサーフェース色か直下に位置するレイヤーが透けて見える。

UV019

「テクスチャ使用」をクリックするとモデルにテクスチャが貼り付けられる。次の画像のとおり位置はピッタリ合っているのは確認できた。ただ、サブパッチの都合で肩の部分が歪んでいるので、UVマップのポリゴン境界のとおりにテクスチャを塗ったとしても肩の塗り分けは綺麗にできないことが予想される。

UV012

とは言え、サブパッチによる歪みを計算に入れてテクスチャを描くのは困難なので、Photoshopでは素直にUVマップのポリゴン境界に沿ってテクスチャを作成していく。主に肩の塗り分けと、前に垂れている襟の輪郭の塗り分け、ジャケットの合わせ部分の装飾と裾の塗り分けをしている。ほとんどベタ塗りだし、テクスチャの描き方はそれこそ千差万別なので細かい描き方は省略する。

UV013

UVマップの境界線から余白にはみ出している箇所は無視され、モデルの表面には反映されないので境界線ギリギリに塗って継ぎ目にサーフェース色が一部残ってしまったりするよりは若干はみ出すくらいがちょうどいい。必要最低限の塗り分けが終わったら、UVマップのレイヤーを非表示にし、PNG画像に出力する。

LightWaveに戻り、着色前のテクスチャを着色済みのテクスチャに差し替える。前の画像に上書き出力して「画像編集」から再読み込みしてもいい。

UV020

歪みの修正

UVマップのポリゴン境界線に沿って色を塗ったので、サブパッチの影響により次の画像のように色の境目が歪んでいる。着色前のマップで予想できていたし、ある程度はやむを得ないんだけど、このままではさすがに目立つし格好悪いので、放置するわけにもいかない。良い方法か悪い方法かは別にして、テクスチャではなくUVマップを編集して歪みを修正する。

UV021

UVマップにテクスチャ画像を重ね、ポイントを選択して青色に塗られている方へ移動させる。ポイントの移動に従って色の境界が前方に動いていくのがわかるはず。

UV022

近傍のポイントも移動させて青色の面積をやや拡大させながら色の境目の歪みが許容できるくらいになるまで調整する。左肩が終わったら、右肩も同様に修正する。こういう時にUVマップを左右（上下）対称に整列させてあるとポイントの移動量は単純に正負を反転するだけでいいので、どちらへ移動させればいいのか悩まなくて済む。今回は対象が片側4ポイント程度だったので軽微な調整で済んだけど、事前のUVの整理にかける労力と天秤にかけてどちらが気楽かその都度判断する。

UV023

UVマップによるテクスチャの貼り付けが終わり、歪みの修正も済んだのが次の画像。ようやくジャケットらしくなってきた。

UV014

古典的なテクスチャ画像作成法

EPS形式の画像ファイルを読み込めるソフトウェアを持っていない場合や、どうしてもベクター画像で幾何学的にテクスチャを描きたいことがある。そういう場合は、LightWave 9.6以前から使われてきた古典的な方法でUVマップからテクスチャ画像を作成する。

まず、UVマップを表示しているビューの右上の最大化ボタン（虫眼鏡ボタンの右隣り）をクリックし、UVマップをディスプレイの解像度の許す限り大きく表示させる。

UV015

Alt+PrintScreenキー（F12キーの隣り）でウィンドウ全体のスクリーン・ショットを撮り、GIMPなどの画像編集ソフトウェアに貼り付ける。UVマップいっぱいで正方形にトリミングし、画像サイズを計測する。上の画像の場合は、984×984pxだった。トリミング後の画像をPNGなど圧縮で画質が劣化しない画像形式で保存する。

UV016

次に、Inkscapeを起動し、ドキュメントのプロパティを開く。ページのサイズをスクリーン・ショットと同じ984×984pxに設定し、トリミングしたUVマップ画像をインポートする。

UV018

インポートした画像はひとつのオブジェクトとして扱われるので、X座標とY座標をともに0に設定するとページの左上隅ピッタリに合わせられ、ページサイズとも一致させられる。

UV017

スクリーン・ショットの色が濃い場合は、当該オブジェクトを選択した状態で左下の「O:」（Opacity）の数値を下げてオブジェクトの不透明度を下げる。スクリーン・ショットを置いたレイヤーは間違って編集しないようにロックし、新しいレイヤーを用意してそこにテクスチャを描いていく。テクスチャ画像をビットマップに出力する際にはスクリーン・ショットのレイヤーを非表示にすればいい。

スクリーン・ショットを土台にするなんて、すごく大雑把な方法に思えるかもしれないけど、LightWaveではなかば公式に利用されてきた伝統的な方法なので、結構正確にマッピングできる。

この方法に限ったことではないけど、UVマッピングは厳格な位置やサイズの調整が必要なマッピングにはあまり向いていないので（UVを綿密に設計すれば不可能ではないけど）、別のマッピング方法を試すか、LightWaveではメモリの許す限りいくつでもUVマップを作れるので新しいUVマップを用意してそちらを使用してレイヤーを複数重ねるかを選ぶことになる。

途中経過

取り急ぎ、無地のままでUV展開が必要だったジャケットだけテクスチャを作成した。二次元イラスト風にしたい場合はレイトレースやシェーディングに頼らずに影なども直接テクスチャに描き込んでしまうのが定石になっているけど、それは最後の手段に残しておいて、LightWaveならではのアプローチで非写実的出力を目指す。

UV024

関連記事

参考記事