ワイヤーフレームでのデータを出力するには

https://www.youtube.com/watch?v=IHhFsWy9eus

製品のカタログや説明書などでは、その製品がワイヤーフレームの状態で表されることがあります。このビデオではワイヤーフレームでのデータを出力する三つの方法を解説します。

このサンプルシーンにはシンプルなティーポットが一つ用意されています。このティーポットをワイヤーフレームの状態で出力する方法のひとつ目が、UVを使う方法になります。頂点マップのタブから空のUVマップをひとつ作成し、UVのビューポート、UVのツールバーを出したら、ビューから投影ボタンをクリックします。このツールは、これからクリックする3Dビューポートに従って、それをそのままUVビューポートへとうつす投影方法です。今回はこのカメラビューをクリックしてみます。そうすると、カメラビューに移っているティーポットがそのままUVマップへと投影されたのがわかります。UVのデータはIllustratorのデータとして出力できます。テクスチャメニュー ＞ UVをEPSに書き出すを実行し、EPSファイルへと出力し、Illustratorで開いてみましょう。ワイヤーフレームのデータをすぐに編集できるようになります。この方法は非常に手軽にファイルを出力することができるという点にありますが、一方、UVデータをそのまま出力しているため、裏面に存在するエッジも出力することになり、見えないはずの裏面のデータを削除したい場合には、手動で削除していかなければならないという点にあります。

二つ目の方法は、ワイヤーフレームテクスチャというテクスチャを使用する方法です。シェーダツリーからこのティーポットのマテリアルグループを選択し、レイヤー追加 ＞ 特殊のカテゴリにあるWireframe Textureを追加します。レンダリング結果を確認できるよう、プレビューウィンドウを開いておきます。ライン幅の値を調整しましょう。このテクスチャはエッジ部分を塗りつぶすことで、ワイヤーフレームを表現するテクスチャです。陰影のついたシェーディングされている状態でも構いませんが、説明書などの図解によく出てくるような、より2Dっぽい表現にするために、この陰影をなくしてみます。その場合はまずマテリアルを選択し、ライトの影響を受けないよう、ディフューズ量を0%に設定し、スペキュラ量、フレネルの値も全て0にしておきます。こうすることでライトの影響を全く受けない真っ黒の状態になりますので、今度はマテリアル(透過)のタブにあるルミナンス輝度の値を1に設定します。これは自己発光の度合いを表します。先ほど設定したWireframe Textureのエフェクトをディフューズの色からルミナンスの色へと変更すると、シェーディングされていない状態のワイヤーフレームが表示されます。さらにシェーダツリーからEnvironmentを展開し、背景を表す環境タイプを一定にし、天空の色を白に設定すると、完全に背景白でティーポットのワイヤーフレームが表現できます。

ただしこのままだと、ズームしてティーポットの輪郭をよく見てみると、輪郭がワイヤーフレームで表現されていません。Wireframe Textureというのはあくまでジオメトリのエッジを塗りつぶすだけなので、メッシュ全体のアウトラインを抽出し塗りつぶすわけではありません。これを解消するため、セルエッジマテリアルを使用します。

ティーポットのマテリアルグループを選択した状態でレイヤー追加 ＞ カスタムマテリアル ＞ Cel Edge Materialを追加します。このテクスチャの効果を確認しやすくするよう、エッジ幅やエッジの色を調整してみます。そうするとセルエッジマテリアルによって塗りつぶされているエッジの個所がはっきりと確認できます。今回ほしいのは、メッシュの輪郭部分のエッジだけですので、その場合には、入射エッジおよび角エッジの値を0%にし、距離エッジとその下にあるしきい値の値を100%に設定します。そうするとティーポットの輪郭部分だけが抽出されるのがわかります。あとはエッジの色をワイヤーフレームの色と合わせることで、全体をきれいに表示させることができます。

この場合はレンダリングを行い、単なる画像ファイルとして出力します。出力した画像ファイルをIllustratorに読み込み、オブジェクトメニュー ＞ 画像トレース ＞ 作成して拡張を実行すると、画像をもとにパスが抽出されるようになりますので、単なる画像として配置するのではなく、パスとして配置することで、例えば拡大縮小などを行っても画像の劣化を心配する必要はありません。

またこの方法のメリットとして、Wireframe Textureはワイヤーとして表すエッジは、選択セットにより指定することが可能です。例えば、このティーポットにはあらかじめエッジの選択セットが用意されています。Wireframe Textureのエッジ選択セットのドロップダウンからあらかじめ設定しておいた選択セットを指定してみると、そのエッジ部分だけを表現することができますので、自分が表現したいラインというのを指定することが可能です。

このように非常に有効な方法ではありますが、ただしこの方法にも弱点はあります。この方法だと、あくまでワイヤーフレームはテクスチャとしてマッピングされているため、カメラとの角度によってワイヤーの濃淡が出てきてしまう場合があります。

これを解消するため、三つ目の方法ではエッジをカーブとしてレンダリングします。設定しておいたテクスチャ類は全てオフにしておきます。いまティーポットはルミナンス輝度の値を高く設定しているため、背景の白と同化している状態です。ここでショートカットキーNのキーで、新たに空のメッシュレイヤーを一つ用意します。このメッシュレイヤーにはティーポットのエッジ部分だけを抽出します。オペレーションリストを出し、オペレータ追加ボタンをクリックしたら、まずは編集 ＞ Merge Meshesオペレータを追加し、オペレーションリストのオペレータを展開したら、ソース ＞ (ソースを追加)でティーポットのメッシュを指定します。こうすることで空のメッシュレイヤーにティーポットが読み込まれるようになりました。さらにオペレータ追加でエッジのカテゴリにあるEdges to Curveオペレーションを追加します。ジオメトリを削除オプションをオンにすることで、このメッシュレイヤーにはティーポットのエッジだけが抽出されるようになりましたので、このメッシュレイヤーに対してカーブをレンダリングする設定を行います。メッシュレイヤーを選択した状態で、カーブタブからカーブをレンダリングをオンにします。カーブ半径を調整すると、このメッシュレイヤーに存在するエッジがカーブとしてレンダリングされるようになります。このレンダリングするカーブの質感を設定するため、アイテムマスクを作成します。メッシュレイヤーを右クリックし、シェーディング ＞ アイテムマスクの作成をクリックします。シェーダツリーへと移ると、メッシュレイヤーの名称でマテリアルグループが作られていますので、このグループの中のマテリアルを、先ほどと同様に、全くライトの影響を受けない状態へと設定してみます。そうすると黒いエッジだけが表現されるようになります。エッジの太さはカーブタブのカーブ半径の値で調整します。この方法の場合、エッジはテクスチャとしてではなく、エッジ事態をカーブとしてレンダリングしていますので、ワイヤーフレームテクスチャを使ったときのようなエッジの濃淡というのは出にくい状態にあります。この方法の場合、指定したエッジだけを表現したいのであれば、設定しておいた選択セットなどを用いて、Edges to Curveオペレーションでエッジを選択指定することになります。

このように3つの方法にはそれぞれメリットやデメリットがありますので、必要に応じて一番適していると思われる方法を採用するようにしてください。