平行投影とアイソメトリック投影
画像はクリックすると拡大されます。また略語は以下のとおりです。戻る デジタル降魔録へ 次へ
このページに書かれているもの
● 3Dのように見えない平行投影法、の話 → Jump!
● アイソメトリックに出てくる 120°と30°の謎、の話 → Jump!
● 3Dモデリングをアイソメトリックの視点で見るには、の話 → Jump!
● アイソメトリックかどうかの検証方法はどうすんの、という話 → Jump!
● デザインとしてのアイソメトリックの美しさ、の話 → Jump!
【平行投影】
C4D Lを始めたころには知らなかったのですが、ある日、カメラオブジェクトを選択して開いた属性マネージャ中に、【投影法】という欄があることに気づきました。たくさんある割に、なんだかよく解らない設定で、切り替えてみるとカメラが映し出す映像が妙な具合になります。それが何のためにあるのか調べることもなく、それっきり興味もわかず、ひとまず【投影法】は『透視』にしておいたのですが。
【補足】
ここでいう『平行投影』はマテリアルタグの投影法にある『平行』ではなく、カメラの投影法を示しています。
クリックすると拡大されます
その重要性に気づいたのは、とある依頼を受けたときでした。
依頼内容はとても簡単なもので、正四面体に内接する球体を 3D化して、正四面体と球体がどのような状態になっているかを生徒たちに見せてあげたい。というものでした。
正四面体というのは、正三角形を底に1つ、側面に3つ、合計4つの三角形を組み合わせてピラミッドのように尖らせた三角錐と呼ばれるものの一つで、ピラミッドは底が四角形ですから四角錐です。
そんな正四面体の中にぴったり収まる内接球を作って、いろいろな角度から観察して学習の補助にしよう、というのがそのときの依頼でした。
内接球というのは、三角錐を組み立てている三角形すべての面に内部で接触している球体のことです。その三角錐の頂点から対面の重心へ下ろした垂線が、内接球の中心を通ることを絵ではなく立体的に見せるというものです。
すべての三角形の表面に触れる球体を実物で作ると、かなりの手間が掛りそうですが、3Dソフトを使えば簡単にできます。
実際、ものの数分で完成しました。計算したとおりに球体は三角錐の中にすっぽり収まり、みごとにすべての三角形の面に球体の表面が触れていました。
しかし……。
画面の中で鎮座する立体物を眺めてふと違和感を感じたのです。参考にと持ち込まれてきた書物の絵と比べるとどこか違いました。三角形のサイズも球体のサイズもまったく問題ありませんが、パソコンのディスプレイに映されたものと比べるとどうも変なのです。かといって、間違った図解が載っている参考書というのもあり得ません。
よく見比べてみると 3D化した映像のほうがこちらに迫って見えます。もっと簡単に言うとカメラに近い部分が妙に広がり、遠くは狭く（小さく）見ていました。いわゆる強い遠近感がついていたのです。
なぜ同じものなのに見え方に違いが出るのか。
調べてみると、これが投影法の違いによるものと理解できました。
製図や教科書の紙面に掲載されている立体図などは『平行投影法』と呼ばれる方式で作られているそうです。パース（遠近感）をあえて作らずに、図面としての正しい形状を伝えるための表現方法なのだと知りました。
ここでやっとつながります。C4D Liteの投影法に『透視』以外の選択肢があることに。その中にちゃんと『平行』という投影法が準備されていました。
次の写真でその違いを見てください。
左が通常の『透視』で右が『平行』です。
クリックすると拡大されます
右の平行投影がまさに参考書の絵と間違いなく同じものでした。
これを立方体で比較すると、もっと顕著に現れます。
クリックすると拡大されます
右の平行投影ではパース（遠近感）が無くなって、見慣れた左の透視投影のほうが正しく見えるかもしれません。ですが、辺の長さをそろえて正確性を重視するためには、この表現方法が必要なのです。
そしてこの話はアイソメトリック投影へと続きます。
■ デザインと3Dの融合
先ほどまでの平行投影法をさらにデザイン的にかつ数学的にも美しい形に極めたのが、このアイソメトリック投影法で、図面や数学の説明図などはこの方法が使われるほど
重要な手法となっています。 拡大写真は "Ctrl+W" キーを押すと消えます
拡大写真は "Ctrl+W" キーを押すと消えます
拡大写真は "Ctrl+W" キーを押すと消えます
立方体では同じ方向を向く辺はすべて同じ長さ（A＝B＝C）になり、対応する辺はすべて平行（A∥A、B∥B、C∥C）になります。もしこれが直方体（煙草の箱のような形）であっても、同じ方向を向く辺どうしはそれぞれ同じ長さになりますが、すべての辺が同じ長さ（A＝B＝C）になるのは立方体のみです。 拡大写真は "Ctrl+W" キーを押すと消えます
拡大写真は "Ctrl+W" キーを押すと消えます
すると、サイコロの底面の角度が、30°ぴったりになり、∠AOCは 60°（90°－30°＝60°）で、∠AOBも 60°です。そしてそれぞれの 30°の対頂角も 30°になり、結局すべて 120°に収まった形になっています。美しいですね。
【3Dモデリングから見たアイソメトリックの美しさ】
それでは実践してみます。 拡大写真は "Ctrl+W" キーを押すと消えます
上の図でのカメラ設定は、【投影法】が『透視』となっていて、他の数値もすべてデフォルトです。そして左上端のビューポート（透視ビュー）が、カメラが映している映像が出るようにしています。このままレンダリングすれば、この状態が画像となって出力されます。
レンダリングとカメラの関係はこちらを参照してください。
その途端、被写体だった住宅がカメラの視界から消えました。 ～ アイソメトリック投影の 4つの方向 ～
アイソメトリック投影は見せる方向が限定されています。それは 0°、90°、180°、270°の 4つだけです。それを一度に撮影してしまう効率のいい方法が次の 3つです。
1> アイソメトリックとしての初期状態にする
1> アイソメトリックとしての初期状態にする
カメラをアイソメトリックにしたのに、なぜ正しいアイソメトリックの角度にならないのか、それは、住宅オブジェクト自体がアイソメトリックになるための "正しい初期の状態（ワールド軸に沿った状態）" になっていないからです。
カメラの画角に入るようになりましたが、まだセンターではありませんが、それよりも近づきすぎです。このようなとき、透視投影での C4Dの Lite版では【ズーム】が使えませんから、物理的にカメラを被写体に近づけたり遠ざけたりしたと思います。ところがアイソメトリック設定になると、カメラの遠近感が消えて座標をどんなに動かしても距離は変化しません。その代わりに【ズーム】が使えるようになります。 2> カメラの寄り、引きはカメラオブジェクトの【ズーム】を使う
【ズーム】を『0.6』ぐらいにして、オブジェクトがカメラの画角に入るようになりました。 拡大写真は "Ctrl+W" キーを押すと消えます
オブジェクトが見えるようにはなりましたが、まだセンターではありません。通常ならオブジェクトかカメラを動かしてちょうどいい位置に持っていきたいところですが、アイソメトリック状態では少し勝手が違います。 3> 被写体をカメラの構図に入れるときはアクティブビューでダイレクトにドラッグする
カメラの構図に被写体を入れるときは、カメラを動かすか、オブジェクトを動かすか、方法はどちらを選んでも問題ありませんが、これまでの透視投影状態とは少し動きが異なりますので、次のようにすると比較的楽になります。
① カメラはできれば動かさない。
～ アイソメトリック素材の見せる角度と視点について ～
透視投影の場合は、あらゆる角度や視点から見た映像が作れますが、アイソメトリックには "120°軸、奥行線が水平線から 30°" という制約があるため、見せられる角度や視点は限定されるという話は先に説明しましたが、さらに詳しく説明します。 拡大写真は "Ctrl+W" キーを押すと消えます
～ 本当に 25°や 28°じゃなく 30°なのか？ ～
さてだいたいそれらしくでき上りましたが、本当にこのオブジェクトの奥行線が水平線に対して 30°になっているのかという疑問です。この疑問を晴らすために、C4Dのガイドを持ち出して実際に 30°に傾けて、定規のようにオブジェクトにあててみようとしましたが、アイソメトリック設定になっているために、ガイドが 0°の段階で自動的に 30°と思われる角度に傾いてしまい、本当に 30°になっているのか検証するのが難しいです。 ～ オブジェクトに水平線と平行になる辺が無かったときはどうなるのか ～
この問題以外にも、水平線と平行の辺を持っているのに、回転座標を全て『0』にしても、ワールド軸（X、Y、Z）と合わない場合があります。それらはどうすればいいのか、順番に解決していきます。 ① ローカル軸に合っている親ヌルを作る
オブジェクトマネージャで斜めに狂ったオブジェクトを選択後、 "Alt＋G" でそのオブジェクトが入った親ヌルを作る。 ② ワールド軸に合ったヌルを作り、その中に①を入れる。
ワールド軸に合ったヌルは、単純に "ヌルオブジェクトを作る" ボタンで作ります。
【デザインとしてのアイソメトリックの美しさ】
実際に作ったアイソメトリック素材を、静止画としてAdobe illustrator（以降 Ai）で並べてみて、2Dレイアウトやイラストとして配置・合成したときはどうなるのか検証してみました。 拡大写真は "Ctrl+W" キーを押すと消えます
一つ一つで見るとパースも完璧で立体感あふれる素材です。個々のサイズ感が異なっているのは拡大、縮小すれば解決します。 拡大写真は "Ctrl+W" キーを押すと消えます
見るも無残です。どうやってもバラバラで、まったく噛み合う様子がありません。全てをまとめて一つの画像として再モデリングすれば完璧なものになるはずの 3D画像ですが、バラで使うと、このように目も当てられないレイアウトになってしまいます。
拡大写真は "Ctrl+W" キーを押すと消えます
適当に並べただけですが、何もしなくてもそろっているのがよく解ります。その理由は角度が統一されているからで、裏を返せば 4パターンしか角度が作れないというのが真相です。通常の 3Dは無限に作れることがこの場合のネックになってしまっています。
Aiに並べて、角度30°の赤いパスラインを作りました。ベースは角度マークが30°になっている赤い線で、変形パネルでも30°を示しています（右下のピンク枠内）。 拡大写真は "Ctrl+W" キーを押すと消えます
分かりやすいように、いくつかの同じ素材や異なる建物をコピペして並べてみましたが、どこに置いてもピタリと隙間なく噛み合います。 拡大写真は "Ctrl+W" キーを押すと消えます
他にもいろいろな視覚的表現で活用されています。例えば、現代の Webサイトやアプリの解説イラスト、複雑なシステムを図解する絵図面、さらにはおしゃれなオフィスのフロアマップなどでも、情報を整理しながら見た目よく表す手法として非常に好んで使われています。
では何がデザイン的にかつ数学的に美しいのでしょうか。
簡単にまとめると……。
3D画像をゆがみのない正確な 2D画像にするために遠近感を無くし、縦・横・高さの見た目の比率を完全な『1:1:1』として成立させるアングルを求めた結果が、アイソメトリックなのです。
見た目の比率とは、配置された場所に関わらず、常に元のサイズ比率（1:1:1）のまま表示されるという意味です。通常の3Dはカメラからの距離によって遠くのものが小さく見えますが、アイソメトリックではそれが一切起こりません。
さらに、図を描いて具体的に説明します。
中心の 1点から全方向（360°）へ均等に軸を広げると、円を3等分した120°という角度が得られます。
この絵ですね。
この中に例えば "サイコロ" 型（立方体）を置きます。もちろん普通の3D画像（透視投影）だとこうなります。
サイコロの底面を 120°の軸に無理やり合わせてみました。しかし透視投影（パース）のある空間では、遠近感があるため奥が狭くなったり、各面の角度が 90°に見えなくなったりします。このサイコロの絵は、人間の目で見た自然な形ですが、これを "正確な図面" として見るにはどうしても無理が生じます。
そこで次のようにすると……。
ただし長さや平行でない辺を持つ形状もありますが、物体の向きや位置によって長さや角度が変わってしまうような歪みは、アイソメトリック（平行投影）では一切起きず、正確な形がそのまま保たれています。
次に立体的なサイコロではなくて、サイコロの外側の輪郭だけに注目すると、そこに浮かび上がるのは "正六角形" です。そしてその中心から 120°ずつ広がる辺 B、A、Cできれいに分割され、3つのひし形で構成された、幾何学的な美しさをあわせもつ 2Dのサイコロが完成しています。
上の図に水平線を加えてみます。次の図の緑色の線です。
これがアイソメトリックであるための完成形となります。
このような理由から、120°の 3軸から構成され、奥行き線が水平線に対して 30°となるように作られた画像が『アイソメトリック投影法（等角投影図）』と呼ばれます。逆に、それ以外の角度になったものはすべての軸の比率が狂ってしまうため、アイソメとは呼べないというように厳密に区別されているわけです。
とまあ、ここまでは数学的な証明でしたが、本当にデザイン的に美しいのか？ という疑問が残っていると思いますので、その実験をしてみましょう。
まず例として 住宅の 3Dオブジェクトを使います。自家用車が止まっている一軒家です。それほど凝ったことはしていませんし、構造もほとんど立方体と平面の寄せ集めです。
ただ、住宅オブジェクトはその親ヌルの中に入れてあります。これはキーフレームアニメーションの鉄則で、回転や移動をやりやすくするためです。動画を撮るわけではないのですが、親ヌルにまとめておくのは必然的な処置です。
【レンダリングされるビューとカメラの関係】
次にこのままの状態で【投影法】を『アイソメトリック』に切り替えます。
別にバグでもエラーでもありません。カメラはこれまでの X、Y、Z軸が 90°で交差する世界から、120°に交差する世界に入ったため、住宅がカメラの構図から外れてしまっているだけです。
ここから先は、3面ビューに表示されたカメラのアイコン（3Dアイコン：視覚シンボル）は無いのも同然。まったくあてにはならなくなります。ここが初めてのときに戸惑うところです。でもちゃんと機能していますので安心してください。
ただし、もうカメラの角度は意味を失くしています。試しに H、P、Bの数値を変化させてみてください。カメラのアイコンは動きますが、映している映像は全く動きません。動かすことができるのは、X、Y、Z座標だけですが、Z軸（青い矢印）を動かしても奥行の移動ができず、被写体が上方向へ動くだけです。
これが、アイソメトリックのルールに従って動いている証拠です。ではどうするのか、このままでは住宅がカメラの構図に入りません。
初めてのときはワタシもずいぶん戸惑いました。でももっとも簡単に調整する方法をみつけました。しかも、次の方法を使うと 4方向から見たアイソメトリック素材を量産できます。
2> カメラの寄り、引きはカメラオブジェクトの【ズーム】を使う
3> 被写体をカメラの構図に入れるときはアクティブビューでダイレクトにドラッグする
順番に行きましょう。
画面からオブジェクトが外れてしまったり、角度が狂ったりしたときの調整はとても簡単です。
カメラと住宅オブジェクトの位置座標（P.X, P.Y, P.Z）と、回転座標（R.H, R.P, R.B)をすべて『0』にすればいいだけです。これだけでワールド軸の中心に、きれいに正対して初期状態に戻ります。簡単に書くと、上面ビューで見てカメラレンズの面とオブジェクトの水平線となる辺が、X軸と平行になればそれが初期位置です。
そのときの状態がこれです。
② オブジェクトを動かすには、3Dギズモを使わずにアイソメトリックビューで 【移動】ツールを使ってダイレクトにドラッグする。
理由や説明を読んで実行するよりも、これまでどおりの方法で実際にやってみるといいです。思わず『むむむ……っ』と唸るかもしれません。とくに、やりやすそうな上面ビューで 3Dギズモを使ってオブジェクトを動かすと面喰います。思っている方向とは異なる場所に移動するからです。これはレンダリングシステムがアイソメトリックの条件に合わせるために自動的に調整してしまうからです。
そこで、②で実行してみてください。比較的楽に好きな場所へ移動できると思います。
ちなみに、アイソメトリックビューというのは、先ほどの画面では左上端のビューポートです。AEでいうところのアクティブビューです。通常は【透視】と表示されていますが、いまは【アイソメトリック】という表示になっています。そのビューポート内で、【移動】ツールを使ってギズモには触れずに、オブジェクトをダイレクトに、2Dソフトのようにドラッグすると簡単に移動できます。
視点は俯瞰のみ、角度は 90°刻み、という厳しい条件がつきます。しかし 2Dで表す立体画像としてはこれで十分なのです。これ以上を求めるなら、アイソメトリックをやめてただの平行投影、あるいは通常の 3D映像にするのが賢明です。
この制限を効率よく自動化して量産するために、ワタシはオブジェクトの R.H（Heading / Y軸回転）を90°ずつ回転させるキーフレームを 4フレームに渡って打っています。こうすると連番書き出しで、4方向から見たアイソメトリック素材が一度に完成します。めちゃくちゃ便利ですから、ぜひ実践してみてください。
そのためには、少し手を加える必要があります。
この図を見てください。オブジェクトを 90°回転させた状態です。
このオブジェクトは中心から軸がズレていますが、このような現象は日常茶飯事です。かといって、このまま 90°回転のキーフレームを打つと、回転するたびにオブジェクトが構図（カメラの画角）からはみ出てしまいます。そこで各フレームごとに画面のセンターへ配置し直して、位置座標のキーフレームも一緒に打っておきます。
作るのはアニメーション動画ではなく素材画像です。そのためフレームごとに位置が変化しても問題は起きません。このようにキーフレームアニメーションを、素材の位置・角度の記録メモとして活用するのも、量産化における強力なテクニックの一つです。
さらに、オブジェクトマネージャにある表示・非表示のスイッチ（赤いランプのアイコン）にもキーフレームを打って、複数のオブジェクトを順次切り替えていけば、一回の連番レンダリングで大量の素材が完成します。
そこでワタシは、レンダリングした画像をスクショに撮って、一度 AEや Aiに持ち込み、2D空間上で正確に 30°傾けたパスラインを重ねて検証しました。結果はピタリと一致していました。
もし AEや Aiを使うのが面倒だという方は、文房具屋さんで透明な分度器を買ってきて、液晶ディスプレイの画面に直接当ててみてください。 本当にピッタリ 30°になっていて「おおっ！」と感動するはずです（笑）。
この検証は【デザインとしてのアイソメトリックの美しさ】の章で行いますので、それまでは アイソメトリックの初期状態に置かれた物体の奥行線は 30°になっていると信じて作業を進めてください。
それでは、3Dモデリングから見たアイソメトリックの美しさの最終章です。
平行になる辺を持たない人物や樹木の場合。
一番見せたい面を初期位置として、上面ビューで見て X軸と平行にします。ようは、アイソメトリック素材として並べたときに "どちらを向いているか（見栄えの良さ）" を決めるのは人間側の感性からくるものです。建築物のように物理的な基準辺がなくても、 "一番見せたい顔や正面の面" をワールドの X軸に正対させておくことで、4方向（90°回転）させたときにも破綻なく美しく並ぶようになります。
回転座標を全て『0』にしても合わないとき。
これはよくある現象です。慣れないうちに作ったオブジェクトとか、複雑に入れ込んだものとかは最初から斜めに軸が狂っていることがよくあり、逆にそろっているほうが少ないかもしれません。
ワタシは、できる限りワールド軸にそろえた状態でオブジェクトを作って、それを親ヌルに入れて、その親ヌルを回転させて任意の角度にしています。このようなクセをつけると、今回のようなときに苦労しなくて済みます。
とはいえ、狂ったものはどうしようもありません。そんなときは次のようにします。
これで最上位のヌルはアイソメトリックの恩恵を受けた角度になり、一段下のヌルはオブジェクトの回転ズレの微調整用と使えますから、そのヌルの R.H回転を目分量で調整して X軸と平行になれば完璧です。あとから 4方向の素材を作るときも最上位の親ヌルを 90°刻み回転させれば完了です。無理してオブジェクト自体の回転値をいじって直そうとすると、数値が小数点付きの複雑なものになり、あとから 90°ずつ回転させるときに計算がややこしくなって破綻します。
最初は普通に透視投影でモデリングした 3D画像から、いくつか検証用の素材を選んでみました。
次に、これらを同一の画面にキレイに整列できるかというと、やるまでもなく "不可能" と宣言できます。でも検証ですから、やるだけやってみました。
次がアイソメトリック素材です。
ところで、この素材は本当にアイソメトリックとしての条件に当てはまっているのか、レイアウトする前に検証してみます。
その赤線を、素材の要所に置いてみましたが、どれもぴったりと一致しています。そして平行になる辺もすべて平行でした。黒の線がそれです。
これをレイアウトしてみたのが次の画像です。
初めのころは「パースの狂った絵」などと侮っていましたが、実際にバラバラの 3D素材が、キレイにそろった格子の上でパズルのようにはまるこの快感がたまりません。これこそが、アイソメトリック素材が持つ圧倒的な整列美と視認性の高さを証明しています。
皆さんも、ぜひアイソメトリック素材を利用して、小さな箱庭風の景色をこしらえてみてください。
平行投影とアイソメトリック投影Topへ
