「アイソメ図を作ろう」第2回ということで、Blenderを使って3Dモデルをベースにアイソメトリック図のパスデータを作成する方法を紹介します。手順としてはBlenderからSVG形式で出力し、Illustratorで調整します。Blenderを使うことで下記のような利点があります。
Blenderはオープンソースの3DCG制作ソフトです。昔は操作方法が独特で扱いが難しい印象がありましたが、最近のバージョンでは一般的な3Dソフトに近い操作感で使えるようになっています。下記サイトからダウンロードできます。
https://www.blender.org
自分は英語版を使用していますが、上部メニューのEdit > Preferenceを開き、Interface > Translation > Language の項目から日本語も選択できます。この記事は英語版をベースに書いていますが、可能な限り[項目]の書式（青字括弧）で日本語の項目名を記載するようにしました。それでは、アイソメトリック図を出力するための設定から始めましょう。
Blenderには3Dオブジェクトの輪郭を線画イラストの様に描画するFreestyleという機能が用意されています。今回はこのFreestyleをSVGで出力できるようにするFreestyle SVG Exporterという拡張機能を使いたいので、Blenderの設定から機能を有効にします。（一度設定すれば以降は保持されます）
レンダープロパティはレンダリング出力を行う際の設定を変更できる項目です。先ほど有効にしたFreestyle SVG ExportとFreestyleを現在編集中のシーンで有効にします。
レンダリング後のSVGデータはBlender側でデフォルトで設定されているフォルダに出力されてしまうので、こちらも合わせて設定しましょう。
カメラの設定です。レンズをPerspective[透視投影]からOrthographic[並行投影]に変更します。
次にカメラの向き＆位置です。前回の記事を参考に、アイソメトリック図の条件を見てみます。“3つの座標軸が等しく手前に縮まって見え、2つの座標軸間の角度が120度” はどの様に実現できるでしょうか。再度 Isometric projection – Wikipedia を確認してみると次の様な記述がありました。
“立方体が垂直軸を中心に ±45°回転し、続いて水平軸を中心に約 35.264° (正確には arcsin 1⁄√3 または arctan 1⁄√2) 回転します。”
垂直軸（Z軸）の回転角は±45°なので、撮影する向きに合わせ45°、-45°、135°、-135°の4パターンになりますね。また、カメラの位置は撮影対象からX、Yが同じ距離だけ離れた座標になります（撮影対象を中心にした正方形の四つ角）。水平軸（X軸）の回転は35.264°とありますが、Blenderのカメラは下を向いた状態が0°となっているので、90°から値を引いた54.736°を設定します。
撮影の準備ができたので、作りたいオブジェクトを作成・シーンを構築していきます。ここでFreestyleを利用してアイソメトリック図を作る際のコツがあります。Freestyleは2つのオブジェクトが重なっている場合、重なった部分の線が描画されないという性質があります。
上記は箱の上に円柱が乗っている図の例ですが、左図は円柱が下の箱を突き抜けているため円柱の下部の線が描画されていません。右図は箱の上面と円柱の下面がピッタリ重ならない位置になっているため下部の線が描画されています。
精密さが求められない単純な形状であればオブジェクトを対象から少し浮かせて配置するのが手っ取り早いです。複雑な形状の場合は突き抜けているオブジェクトをもう一方のオブジェクトでカットしましょう。カットする場合の手順は次の通りです。
カットの結果、円柱と階段が重なった部分の線が描画されるようになりました。
今回はオブジェクト側を編集して表示調整を行う方法を紹介しましたが、Freestyleは線画イラスト風の表現でレンダリングを行う機能です。線単位で細かく表示設定を行う事も可能で、プロパティ > View Layer Properties[ビューレイヤープロパティ]のFreestyle Line Setから線の表示条件を変更したり、個別に表示・非表示を指定するという方法もあります。この方法は手間が掛かかってしまう印象なので、イラスト風の動画で出力したい場合などに活用するのが良いと思います。
準備が整ったので、レンダリングしてみましょう。レンダリングは上部メニューのRender[レンダー] > Render Image[画像をレンダリング]をクリックです。Blender Render[レンダー]ウィンドウに結果が表示され、出力先で指定したディレクトリにSVGファイルが作成されていると思います。
最後に出来上がったSVGをIllustratorで開き、仕上げの作業です。Freestyle SVG Exporterで作成されたSVGデータは、バラバラな線の集合体となっており、面の情報が含まれていません。そのためIllustratorで仕上げる際には一工夫必要になります。
背面に紙を用意して線でカットするイメージです。一旦線が見えなくなりますが、全体を選択した状態で線の色を指定すると線は復活します。これで面のパスデータが作成できたので、塗りの色を指定・調整して仕上げましょう。
以上、アイソメ図を描こう（Blender to SVG編）でした。3Dモデルを作成すれば角度を変えて再出力が可能なのは魅力的ですし、曲線の多い複雑な立体物ではイラストレータで作図すること自体が厳しい場合もあります。
3Dでモデリングが必要という敷居はありますが、最後はIllustratorで仕上げる前提なので細かい部分は省略、ラフな造形でもなんとかなったりします。記事トップイラストを例にすると、眼のパーツと床のチェック模様はイラレで作成、カートの内部はアイソメトリックにした場合に隠れる部分なので省略しています。
ところで、皆さんはこの乗り物はご存じでしょうか。ダッジェムカー、バンパーカーと呼ばれる（名前はじめて知りました）遊園地のアトラクションです。コースのないゴーカートのようなもので、カート同士をぶつけて遊びます（ぶつけて遊ぶものではない説もあるらしい…）。
どんな遊園地でも大抵おいてあるメジャーな乗り物という印象だったのですが、今や昭和レトロな乗り物として認知されているようでビックリしました。特に天井から給電するタイプのものは国内で現存していた2基も…みさき公園（2020年3月閉園）、としまえん（2020年8月閉園）を最後に絶滅したとのこと。バッテリ式のものは現在も存在するようで、VRと組み合わせた新しいアトラクションの情報は確認できました。
それでは、また次回お会いしましょう。