iPhoneアプリ開発:AR 目次

 

 前編で追加したトーラスを単独で選んだあと、ボトムバーにあるオブジェクトモード項目をクリックして編集モードに切り替えてみてください。

 

 

 

 これで、選んだオブジェクトの3D形状を編集するモードに切り替わります。

 

 ボトムバーも微妙に変わる。

 

 

 これで、SceneKitで言えばSCNGeometoryの3D形状を編集することになります。

 ボトムバーの選択ツールが「頂点選択」になってるのを確認してから、トーラスの頂点のどれかをドラッグしてみましょう。ツノが伸びるはず。

 

 

 

頂点移動

 ツノができたら左クリックで確定しちゃってください。

 そのまま形状を確定したい時は左クリック、キャンセルしたい時は右クリック、ここらへん、オブジェクトモードと同じです。

 頂点選択してからG/R/Sて手順も全部使えるけど、頂点を回転・拡大縮小しても意味はないっす。

 選択ツールを「面選択」に切り替えてドラッグすると面単位でドラッグできる。

 

 ちなみに各面の中央にあらわれる黒い点は、面の中心部を示す指標で頂点ではないです。こっちも適当な面をドラッグしてツノにしたあと、左クリックで確定しちゃってください。

 

面をドラッグだ!


面移動

 確定後はドラッグした面が選択状態で残る。

 頂点選択状態だと頂点がオレンジになったけど、面選択状態だと面の周辺の辺と、面の中心部の指標がオレンジになる。

 で、そのまま面が選らばれた状態でXキー打つと、削除メニューが出るので「面だけ」項目を選ぶ。

 

 

 これで選択中の面だけが消える。

 

 

 他の「頂点」とか「辺と面のみ」とか選ぶとどうなるかは各自で試しましょう。

 controlキー押しながらのZキー打ちで直前の状態に戻せます。

アンドウ(Undo)

 いわゆるUndoです。ボトムバーのメッシュ>元に戻すメニューのショートカット。オブジェクトモードにもあるよ。

 Mac標準のcommand+Zは使えないので注意。

 選択ツールを「辺選択」にすれば、辺に対しても同じように作業できる。

 

 ちなみに辺や面を選択してる状態だと、回転や拡大縮小に意味が出てきます。ここらへんも試してみるといいでしょう。

 

 次に頂点の追加について。

頂点の追加

 まずは選択ツールを「頂点選択」に戻して、それから選択してる頂点があれば選択を解除する。選択解除にはお約束のAキーね。

 何も選択されてない状態になったら、controlキー+左クリックで投影画面をクリック。

 これで空間上に頂点が追加されます。

 

 追加された頂点は選択状態になってるので、今度は選択を解除せずに、別の位置にcontrolキー+左クリック。

 これでもう一つ頂点が追加され、同時に最初に追加した頂点とを結んだ辺も追加される。

 

頂点と辺の追加

 頂点が新しく追加される時、選択中の頂点があれば、それと結んだ線を作るって仕組みっす。複数の頂点が選択されてた時とか、いろいろな場合で動作が異なるので興味ある人は各自で試すといいでしょ。

 とりあえず、今は、このcontrolキー+左クリックを繰り返して五芒星の各頂点と辺を作っちゃえー。

 

 

 上の図の状態までできたら、一番最初の頂点をshift+右クリックで選びましょう。

 

 

 この2頂点を選んだ状態でFキー打ちます。

 2頂点を結んだ辺が追加される。

 

 

 これで、最初の追加頂点から、最後の追加頂点、そしてまた最初に戻る閉じた多角形が完成。

面/辺を貼る

 Fキー打ちは、ボトムバーのメッシュ>面>面/辺を貼る、およびメッシュ>辺>面/辺を貼るメニューのショートカットです。

 選択状況によってどっちかの処理が実行される。

 今回は2つの連結してない頂点が選ばれてたので辺が貼られることになった。

 で、例えば、この状態からcontrol+Lキー打つと五芒星が選択状態になるけど、この状態でFキー打つと平面ができる。

 今回の場合、3頂点以上が選択状態なんで面が貼られた。

control+Lキー打ちで五芒星を選択

 

Fキー打ちで面貼り

 

リンク選択

 control+Lキー打ちは、ボトムバーの選択>リンクのショートカット。controlキー押してなくても効く場合があるんだけど、違いは謎。

 未選択状態のAキー打ちと違って、現在選択中の頂点や辺、面と関連してる頂点とか辺、面を選択するってのがミソ。Aキー打ちだと立方体も選択しちゃうんだよ。

 

 余談ですが、今回作った五芒星の各頂点は、頂点追加中に視点を動かさない限り、一つの平面上に配置されることになるっす。

 その平面とは、3Dカーソルを含む投影面と平行な平面。

 

 

 なので、頂点追加中に視点ぐるぐる回しちゃうと平面上にはそろいません。

 い・ま・さ・らっ、もうやっちゃたよ〜と思った人もいると思うけど、今回は別に頂点が平面上に揃ってなくても問題ないんで気にしなくていいです。

 バラバラの頂点を平面上に揃える方法なんかもあるけど、それはまたの機会に。

 ここまでできたら編集モードを切り上げてオブジェクトモードに戻りましょ。

オブジェクト/編集モードの切り替え

 オブジェクトと編集モードの切り替えにはショートカットが用意されてて、tabキーで交互に切り替わるようにもなってます。

 オブジェクトモードで形の変わったトーラスちゃんを回転、移動を駆使して立方体の上に持っていきましょう。編集モードで追加した五芒星がトーラスの形状として、一緒に移動したり回転したりするのがわかるはず。

 投影画面をホイールスクロールで調整しながら移動や回転をするとよくってよ。

 

 

 というところで、今日はこれくらいにしといたらあ。

 今回のモデルは手習いなので記念に保存してもいいし、捨てちゃってもかまいません。保存する場合は3Dビューの上にあるファイル>保存メニューね。

 

 

 疲れた…

 

 想像以上に疲れた…

 やめっかなBlender解説するの…

 いろいろサイトあるし、無駄に解説サイト増やしてもしょうがねーんだよな…

 そもそも前後編にしたのも、アメブロが「長げ〜よ、このブログ。無理」って言ってきたから泣く泣く分けたんであって、俺のせいじゃねーよっ

 などなどネガティブになりながらもなんとか、お気楽極楽Blender[1]終了〜。
 

 スーパーな人だと、今回の情報だけで、なるほど〜とか言って鼻歌交じりにキャラクタまでモデリングしちゃうんだろうけどね〜。

 さすがに凡人にそれは無理っすわ。もうちょっと効率的な作業方法知らないとね。その点を実際に油圧ショベル作りながら次回以降に解説。待て次回。

 え〜、やっとエンジンが温まってきたとこなのにぃいい

 という元気ハツラツ・レッドブルな人は、以下のYouTubeの「わにこ沼地辺境伯」さんのチャンネルで予習してみてください。

 具体的に動画でBlenderの作業を解説してくれてます。作るの大変だったろうな〜。

 特にパート4のTips集は必見。

 

 わにこ沼地辺境伯さんのYouTubeチャンネル

 https://www.youtube.com/channel/UCqHa5bmORg-H_EMELJ_ww6g/videos

 

 Blenderについて日本語で詳細に解説してくれてるサイトはここ。

 https://blender-cg.net


 他にもググればいっぱい出てきます。

 デワデワ。

iPhoneアプリ開発:AR 目次


 というわけでBlender触ってみます。

 ブツがないと心が通じあえんので、Blenderのホームページに行ってダウンロードしましょう。

 

 ↓Blenderのホームページはここな

 https://www.blender.org

 

 

 連れて行かれたダウンロードページでDownload Blenderボタンをクリックだ!

 

 

 

 基本、Windows用なのかMac用なのか、はたまたLinux用なのかの判断は向こうにお任せでいいでしょ。お任せ嫌だの人はボタン下の「Windows, Linux and other versions」で選ぶのも有りです。そっちだとソースコード丸ごともらって自分でビルド(BlenderはOpen Sourceなので)って選択肢も提供してくれます。

 まあ普通にDownload Blenderボタンクリックだよね。

 

 このページで待ってると自動でダウンロードが始まります。ページの中程にある「Join Now」ボタンは有料サポート申し込みページへの案内。1300円/月で、お役立ちツールとか色々手に入るみたいだから、Blender使ってみて仕事に使えるなと思ったなら入るのがいいんじゃないかと。

 私はまだ趣味の段階なので考え中。

 ダウンロードは結構時間がかかる・・・

 ダウンロードが完了するとダウンロードフォルダに、デスクイメージファイルができるのでダブルクリックでマウントしましょう。

 でもって開いたウィンドウ内のBlenderフォルダを右のフォルダに入れればインストール終了。

 このフォルダは、自分のMacのアプリケーションフォルダ(前回話した、Safariの入ってる場所)にリンクされているので、Blenderフォルダはそこに入ることになります。なのでLaunchpadにも出てくるようにもなる。

 blenderとblenderplayerてのが出てくるけど、今回使うのはblenderの方ね。

 

 

 もちろんBlenderフォルダ内のblenderアイコンを直接ダブルクリックで起動してもいい。

 起動したBlenderでは、メニューバーとして表示されるMac側メニューの他に、アプリウィンドウ内に表示されるBlender側メニューがあるんですが、使うのはBlender側メニューになります。

 

マルチプラットフォームアプリにありがちな…

 

 Mac側メニューには用がないんで、紛らわしいと思う人はフルスクリーン表示するのがいいかと思われ。

 ただし、複数のモニターを使ってない人は、このページ見ながらBlenderいじるために今は我慢だ。三本指横スワイプで簡単に画面が切り替わるけど面倒っちゃ面倒だからね。

 

注意)Blender側メニューWindow>Toggle Window FullscreenでもOK

 

 初期状態はこんな感じで、1枚の作業ウィンドウの上にスプラッシュスクリーンが表示されます。スプラッシュはスクリーン外をクリックでいつでも消せるけど、毎回出るのが鬱陶しい人はユーザー設定で出ないようにしましょう。

 

 

 あと、色々とネットの有志がBlenderの操作を解説してくれてるんですが、たいがいは日本語表示前提なので、日本語化もしておいたほうがいいです。

 ついでにマウスの設定も3ボタンじゃない人は2ボタン仕様にするとか、ノートブックなんかでテンキーない人はテンキー無しでも使える仕様にするとかもしましょう。

Blender以外の環境設定

 ノートブックの人もマウスは早めに用意したほうがいいと思われ。安っすいのでいいからスクロールホイールがあるやつを。3番目のボタンを兼ねるスクロールホイール付きを選ぶのもいいんじゃないかと。

 ていうのもBlenderは、物をつかむのに右ボタンを使うし、スクロールホイールや3番目のボタンも何かと多用するんすよ

 AppleのMagic Mouse持ってる人は、システム環境設定で副ボタン(いわゆる右ボタンね、以後右ボタンと言う)を有効にしときましょう。3ボタン目に関してはBlender側のユーザー設定でなんとかなる。私はこれでやってます。

 

 トラックパッドであえて苦行を選ぶのも、ま〜、人それぞれだけど、私はお勧めしません。

Blenderのユーザー設定

 というわけでBlenderに戻ってユーザー設定。

 Blender側メニューのFile>User Preferences…を選んで表示される画面で以下の4つをやります。

  1. 日本語化
  2. マウスの2ボタン仕様化
  3. テンキー無しでも使える仕様化
  4. スプラッシュスクリーンの初期表示しない化

 いずれもやりたくない人はやらなくてもいいです。

日本語化

 Systemタブを選択してInternatinal fontsにチェックを入れる。
 

 

 

 チェックが入ると追加項目が現れるのでTranslate:項目のInterfaceとTooltipsをクリックして選択する。

 

 これで画面上の各項目やそのツールチップが日本語化されるはず。

 

 

 こんな感じにならない場合は、Translate:項目の上にあるLanguage:項目からJapanease(日本語)を選びましょう。

注意)Translate:項目のNew Data(新規データ)を選択しないのは、新規作成物に自動的に付く名前に「球」とか「立方体」って漢字が使われるより「Sphere」や「Cube」の方が、データをファイルとして書き出す時の制限が少なくなるから。Unicodeに対応してないファイル形式とかあるかもしれないからね。今時だけど。

 

マウスの2ボタン仕様化

 入力タブを選択して「3ボタンマウスを再現」にチェックを入れる。
 

 これで3ボタンの真ん中のボタンが、optionキーを押しながらの左クリックで代用できるようになります。

テンキー無しでも使える仕様化

 同じ入力タブにある「テンキーを模倣」にチェックを入れる。
 

 

 これでキーボード上段にある、テンキーじゃない方の数字1〜0キーがテンキーとして扱われるようになる。

スプラッシュスクリーンの初期表示しない化

 インターフェースタブを選択して「スプラッシュを表示」のチェックを外す。

 

 

 以上で設定終了。

 アプリを終了してもこの設定を残したい場合(普通、そうだろうけど)は、左下の「ユーザー設定の保存」ボタンをクリックして設定を保存しましょう。

 

Blenderでの作業開始

 で、いよいよ作業の開始。

 Blenderの画面をいじって、前回みたいな油圧ショベルを作っていくわけです。

 まずは現在の状態から。

 Blenderは開くべきファイルを指定されずに単独で起動された場合、新規の作業とみなして立方体、カメラ、光源をそれぞれ1つずつ配置した状態の3D空間を用意してくれます。

 で、その3D空間を3Dビューと呼ばれるビューで表示しているのが今の状態。

 今回はこの3Dビューでの作業となります。

 

 

 ここらへんはユーザー設定等の調整でいくらでも変わるんだけど、工場出荷時の設定はこうなってる。

3Dビュー

 この3Dビューの投影画面に表示された立方体、カメラ、光源を、Blenderではオブジェクトと呼び、それぞれ、移動や回転、拡大縮小ができるようになってます。

 

投影画面に表示されたオブジェクト群

 

 1つのオブジェクトが、SceneKitでいえば1つのSCNNodeにあたるわけですよ。SceneKitやSCNNodeがわからん人は「仮想体を置いてみる」あたりから読みなおすように。

オブジェクトの選択

 どのオブジェクトを移動や回転、拡大縮小するかは、投影画面内のオブジェクトを右クリックで選択して決めます。

 左じゃなくボタンね。

 左ボタンクリックすると3Dカーソルが移動するから。

 

やべっ、カメラ選ぼうとして左クリックしちゃった的な…

 

3Dカーソル

 

 すでにやっちゃった人は、特に支障はないので気にせず放置してください。3Dカーソルについては後で説明します。

 オブジェクトの追加選択や追加選択解除にはshiftキー押しながらの右クリックね。

注意)選択に右左どっちのボタン使うかもユーザー設定で変更できるけど、Blenderの使い方を紹介してくれるサイトで、左クリックで選択できるようにしてるのみたことないし、そんなカスタマイズした状態で説明聞いても混乱するだけなのでそのままにしておいたほうがいいです。

 

 選択されてるオブジェクトは外殻がオレンジになります。

 例えば、初期状態は立方体が選択されてて外殻がオレンジになってるんだけど、カメラを右クリックするとカメラの外殻がオレンジになります。

 

 

 shift+右クリックで追加選択して、複数のオブジェクトを選んだ時は、最後に選んだオブジェクト1つだけがオレンジで、他のオブジェクトの外殻はレッドになる。

 これはオレンジのオブジェクトだけが、後半で説明する編集モードの対象になることを意味し、残りは単に選択状態であることを示してる。

 どのオブジェクトも選択されてない状態にするのは、オレンジ枠の選択オブジェクトをshift+右クリックで選択解除していく必要がある。

 めんどくさいと思った人は、キーボードのAキーを1度打ちましょう。

オブジェクトの全選択・全選択解除

 Aキーは多分Allって意味で、1つでも選択されてるオブジェクトがあれば、全オブジェクト選択解除、オブジェクトが何も選択されてない状態なら、全オブジェクトを選択状態にします。

 このAキー打ちは、3Dビュー下部のバー(以後、ボトムバーて呼ぶ)に「選択」って項目があって、そこクリックすると表示されるメニューの中から「全てを選択(解除)」を選ぶ作業のショートカット。

 

 

 「全てを選択(解除)」以外にも、ショートカットが使えるメニュー項目には、項目の右にアルファベット1文字が付いてて、その文字のキーがショートカットととして使うキーを意味してます。

 

 

注意)ShiftとかCtrlは同時に押しておく必要のあるキー。例えば「全てを選択(解除)」の上にある「反転」だと、Iキーだけじゃなくcontrol(Ctrl)キーを押しながらのIキー打ちです。

 

 ショートカットキーがあるメニュー項目は、わざわざボトムバーからメニュー出して選ばなくてもキーを打てば実行されるわけですよ。ちなみに、このショートカットキーは、マウス(トラックパッド)のカーソルが3Dビューの投影画面上にないと実行されないので、その点は気をつけましょう。

 

オブジェクトのドラッグ

 オブジェクトはドラッグもできるけど、一度ドラッグが始まると、マウスのボタンを放してもオブジェクトはマウスと一緒に動くようになっちゃいます。これを解除するには、右クリックか左クリックする必要がある。

 右クリックだとドラッグ開始時の位置に戻り(つまりドラッグのキャンセル)、左クリックだと現在の位置に移動(ドラッグの確定)となる。

 適当に立方体やカメラをドラッグして試してみてください。

 で、実は、この右ボタンによるドラッグも以下の一連の作業のショートカットでして…

  1. 右クリックでオブジェクトを指定
  2. キーボードのGキーを押すことで移動作業状態へ遷移
  3. マウス移動によるオブジェクトの移動

  注意)キーボードのGキーを打つ時に、マウスのカーソルが投影画面上にあること。Gキーは1度打つだけで良い。移動中ずっと押し続けている必要はない。

 

 この、2で遷移した移動作業状態から抜けるのに、改めてクリックを使っているという状態です。

 

 左クリック:作業の確定

 右クリック:作業のキャンセル

 

 オブジェクトの移動は頻繁に行う作業なんで、こういったショートカットジェスチャーが割り当てられてるんですな。

 回転や拡大縮小にはそういったショートカットジェスチャーは無いみたいで、オブジェクトを選択した状態から、RキーやSキーを打って回転や拡大縮小作業状態に遷移する必要があります。

オブジェクトの移動・回転・拡大縮小

 選択したオブジェクトに対して各作業状態へ遷移するためのキーは以下の通り。

 

 G  移動(多分GrabのG)

 R  回転(多分RotateのR)

 S  拡大縮小(多分ScaleのS)

 

 いずれも右または左クリックで作業終了ね。

 各作業状態に遷移後は、マウスの上下左右移動に合わせて移動や回転、縮小拡大が行われる。

 この移動/回転/拡大縮小に使うG/R/Sキー打ち自体も、3Dビューのツールタブにボタンが用意されてるんで、ショートカットちゃあショートカットなんですけどね。

 ボタンの方はまず使わんな。

 

 移動は直感的にわかりやすいと思う。

 拡大縮小も、特に指定しない限りオブジェクトの中心を拡大縮小の中心にして変化するので難しくない。

 回転は回転軸を意識しないといけない点でちょい難しい。

 回転中心自体は拡大縮小と同じくオブジェクトの中心を使うんだけど、軸がね。

 投影画面の中心を見た時の自分の視線が回転軸になる。

 軸を指定したりもできるけど、それはいずれ。

 

 

 投影画面はスクロールホイールを回す(Magic Mouseなら指先で表面を撫でる、トラックパッドなら二本指で表面を撫でる)ことで眺める位置を変えることができるんで、色々な場所から立方体を回して試してみるといいです。

 

 

 

投影画面の視点操作

 スクロールホイールを回すことで見る位置を変えるのが基本。

 shiftキー押しながら回すと左右上下に平行移動。

 controlキー押しながら回すとズーム。

 テンキー側の数字の1キーで正面からxz平面を眺める状態、7キーで上からxy平面を眺める状態に切り替えることもできる。テンキーの無い人はユーザー設定ね。

注意)Blenderはy軸じゃなくz軸を上下軸としてる。y軸は前後軸とされ、増加方向が奥方向となる

 

 ここらへんもお約束で、ボトムバーの「ビュー」にあるメニュー項目群のショートカットっす。

 

 

 メニューの中に、テンキー[5]ってショートカットの透視投影/平行投影があるけど、これは投影画面の表示方法の切り替え指定。

 たまに視点操作で誤爆して5を打って切り替わる。見た目が変わるだけなんで、誤爆した時は慌てずもう一回5を打ちましょう。

透視投影/平行投影

 視点から遠くの方が小さくなるように表示するのが透視投影で初期状態がこれ。人間の目と同じ感覚で操作できる。

 視点からの距離に関係なく同じ大きさなら同じ大きさで表示するのが平行投影。設計図っぽい。軸にそって精密な作業をする時に便利。下絵を使ってキャラクタ作る時に使います。
 

 ま〜、これで大雑把だけどオブジェクトの移動や回転、拡大縮小ができるようになったわけだ。

 いや、そうなんだけど、んじゃ、このオブジェクト自体はどうやって用意するのか?

オブジェクトの追加

 オブジェクトを追加するには、ボトムバーにある「追加」項目をクリックして表示されるメニューを使います。

 出てきたメニューの中のメッシュてのに、サブメニューとして立方体や球体なんかが用意されてるんですよ。

 メニュー項目の中から任意の形状を選ぶと、投影画面中にその形状のオブジェクトが出現します。

 SceneKitでSCNGeometoryを設定したSCNNodeを作った状態を連想してもらうといいんじゃないかと。

 ちなみに、ここで出現位置として使われるのが3Dカーソルのある場所。

3Dカーソル

 3Dカーソルは、投影画面が表示している3D空間の一点を示してます。

 

3Dカーソル

 マウスのスクロールホイール動かして投影画面の視点をずらすと、3Dカーソルが空間上の1点で固定されてるのがハッキリわかると思う。

 

 

 

 追加されたオブジェクトは、この3Dカーソルのある場所に現れる。

 試しに立方体と少し離れた場所を左クリックしてから、追加メニューでトーラスを追加してみてください。

 

そしてボトムバーの追加>メッシュ>トーラスでトーラス追加

 

でた!

 

 こうやってオブジェクトを増やしていく。

 いらないオブジェクトを削除する場合は、削除したいオブジェクトを選択してからXキーを打つ。

オブジェクトの削除

 Xキー打ちは、ボトムバーのオブジェクト>削除…メニューのショートカット。

 本当に削除していいか確認されるので、左クリックするか、enterキー打ちましょう。

 

円錐を追加して、削除してみる

 

 油圧ショベル作る時に説明するけど、SCNNode同様、オブジェクト同士に親子関係を設定したりもできる。

 

 と、まあ、こういった作業をする今現在のモードは、オブジェクトモードって呼ばれるモードなんですが…

オブジェクトモード

 んじゃあ油圧ショベルのような、複雑な形状のオブジェクトはどうやって用意したのって話になるわけですよ。結論から言うとオブジェクトモードでは無理っす。

 ああいう複雑な3D形状は、自分で作らないといけません。

 そのために用意されてるモードが編集モード。

編集モード

 指定したオブジェクトの3D形状を編集できるんですな。

 先に説明したとおり、オレンジの外郭の選択オブジェクトが対象となります。

 さっき追加したトーラスを単独で選んだあと、ボトムバーにあるオブジェクトモード項目をクリックして編集モードに切り替えてみてください。

 

 

 

 というところで後編に続く〜

 

iPhoneアプリ開発:AR 目次

 

 いかがですかラーマのお味は?、もとい、AR油圧ショベル(組み込み形状版)を動かしたご感想は?

 

 

 単純な形状だけど意外にね。意外に…

 ARなんで、近づいたり、見上げたり、大きさが実感できるのは、意外にアリなんじゃないかと…

 まーでも、やっぱとっても幾何学なわけですよ。

 もうちょっと、油圧ショベルらしくしたいと。

 そうなると、さすがに組み込みの形状では限界があるんですな。

 特にバケツ!てめーはダメだ!

 

 

 こういう時に出番なのがモデリングツールっす。いでよ〜

 Maya

 は、高いからやめておいて

 Blender

 使います。無料です。

 Mayaも学生さんはタダで使えるんだっけか。

 私は学生ではないのでBlenderで行きます。

 こいつは独立したアプリケーションでして、ClipStudioやPhotoshopが2Dの画像創作に使われるアプリなのに対し、Blenderは3Dの画像創作に使われるアプリって位置付けです。

 そんでもって3Dの画像製作には、大きく分けるとモデラー部、レンダラー部という2つのパートがあって、それぞれに担当アプリが用意されてる場合もあるんですが、Blenderの場合はどっちも兼ね備えてます。

  • モデラー:3D形状やマテリアルといった仮想体群を製作する
  • レンダラー:モデラー部で作った仮想体群を、どんな感じで配置するかとか、光源の配置とかを決めて、静止画や動画に落とし込む

  注意)マテリアルとか光源って何って人は「光あれ」ね。

 

 今回使うのは、Blenderのモデラーとしての機能。

 こいつを使うと多角形平面の組み合わせで自由に3D形状を作り出すことができるわけですよ。

 で、実際にBlenderで、ブーム、アーム、バケツの3D形状を用意したのがこれ。

 

  Blenderの画面↓

 

 これらの3D形状を、自分の油圧ショベルプロジェクトに組み込んでブーム、アーム、バケツノードのSCNGeometryとして使えれば、見た目が一気に華やかになるわけですわ。SCNGeometryがわからん人は「仮想体を置いてみる」ね。

 

 どうやって組み込むかというと、Blenderで用意した3D形状やマテリアル情報を、Xcodeが解釈できるファイル形式で書き出させて、そのファイルを読み込んで使います。

 

 

 書き出すファイルに指定するフォーマットはCOLLADA形式。

COLLADA

 こいつはPlaystation3の3Dアプリの開発用公式フォーマットとして策定されたものらしいっす。今はクロノス・グループ(OpenGLやWebGL管理してるとこね)が管理してるみたい。ファイルの拡張子は .dae (digital asset exchange)になります。

 で、上のBlenderで作ったブーム、アーム、バケツの3D形状を書き出したファイルがこれ。

 

COLLADAファイル:

 http://tetera.jp/xcc/book-sample/yumbo.dae.zip

 

 このyumbo.dae.zipファイルを解凍してできたyumbo.daeファイルは、Macのプレビューで内容を見ることもできるんで、ダウンロードしてダブルクリックもしくはQuickViewしてみてください。

 

プレビューアプリでの表示

 Blenderのインストール、3D形状の作り方は次回からゆっくりやるとして、とりあえず、今回はこのyumbo.daeファイルを使い、私がBlenderで作った3D形状ちゃんをSceneKitのSCNNodeに組み込んでみます。

 まずはiPhoneアプリでのファイルの扱いから。

iPhoneアプリへのファイルの組み込み

 今回のような3D形状やマテリアル情報の入ったファイルを、アプリで使いたい場合、使いたいファイルをワークスペースウィンドウのナビゲーションエリアにドラッグ&ドロップしてプロジェクトに加えてやることで、そのファイルはアプリと一緒にコピーされるようになって利用可能になります。

 

 ちなみに、音楽やムービーなんかも含め、こういったファイルをリソース(Resource:素材)と呼んだり、アセット(Asset:資産)と呼んだりします。

 Appleでは、こういったリソースファイル群とアプリとの結びつけを、バンドルという仕組みで実現してまして…

バンドル

 って何だ?っていうと、こいつは特定のルールに従って構成されたフォルダ階層群を意味してます。

 その最上位フォルダは、MacのFinderだとアイコンで表示され1つのファイルみたいに扱われることになってまして、MacのFinder上で見えるアプリアイコンなんかがこのバンドルです。

 実行可能ファイルだと思った?残念フォルダーちゃんです。

 実際のアプリ、つまり実行可能ファイルはこのバンドルフォルダーの中に入ってます。そのままダブルクリックしてもアプリが起動しちゃうだけので、内容を見たい場合はFinder上のアイコンを右クリックして、コンテキストメニューを出して「パッケージの内容を表示」を選びます。

 例えばSafariだとこんな感じ。

 

 こんな風に、アプリ本体と関連ファイル群はバンドルというフォルダ構成でひとまとめにされてまして、今回のように追加したファイルは、Macのアプリの場合だと、このバンドル内のResourcesて名前のフォルダにコピーされることになってるんですよ。ちなみにiPhoneアプリの場合はバンドル最上位フォルダ直下になる。

 

 で、こうやって関係付けたファイルをアプリから利用する場合、当然、使いたいファイルの置き場所を指定してやる必要があるわけでして、そのためには、まずファイルを格納してるフォルダの位置を知る必要があります。

 そのためにプログラムから利用するのがswiftだとBundleクラス。

Bundle

 こいつはバンドルを表現したクラスで、そのクラスオブジェクトが持つmainプロパティには、アプリを収納したバンドルがBundleオブジェクトとして設定されてます。

 で、そのオブジェクトにurl(forResource:withExtension:)メッセージを送ることで、バンドル内に配置されているファイルのURLが取り出せるようになってるんですよ。

URL

 URL(Uniform Resource Locator)は、これまでブラウザでさんざん見てきたと思うけど"https://aaa.bbb.com/ccc.html"といった文字列のことです。ファイル位置の場合は"https:"が"file:"になって、最上位のフォルダからファイルまでの階層を / (スラッシュ)で区切って書いていくことになる。

注意)細かく言えば"https:"や"file:"はscheme(スキーム)と呼ばれ、今だとURI(Uniform Resource Identifier)の一部として定義されてる。URIの意味は、統一された資源識別子って感じかな。ま〜、もともとWebで資源位置を示す統一された表現ってことでURLが作られ、それ見て、これって他にもいろいろ使いみちがありそうだねと、公式に定義を拡張したのがURIって感じで私は解釈してます。

 

 url(forResource:withExtension:)メッセージが戻すのは、このURLを表現するオブジェクト。クラス名は、まんまURLという名前で、swiftでは、こいつを使って利用したいファイルの位置を特定することになります。

url(forResource:withExtension:)メッセージ

 てなわけでBundleに対し、このメッセージを送ることで、そのバンドル内に配置されているファイルのURLがもらえます。アプリの入ったバンドルはBandleクラスオブジェクトのmainプロパティに設定されてるBundleなので、Bundle.mainに対してこのメッセージを送るわけですな。

 forResource:引数にファイル名、withExtension:に拡張子を指定する決まりなので、今回のyumbo.daeファイルなら

   let yumboURL = Bundle.main.url(forResource: "yumbo", withExtension: "dae")

て感じです。このメッセージ、ファイルが見つからない時はnilを戻すので注意が必要。使うときはguard文等でチェックするように。nilやguard文がわからん人は「アンラップしてチン♪」ね。

 うまくいけばyumboURLにyumbo.daeファイルの位置を示すURLが設定されます。

注意)実はUIImageでの画像ファイル読み込みも、内部でやってることは同じ。UIImageはイニシャライザのname:引数で指定された名前をもとに、バンドル最上位フォルダ直下や、その中に置かれた画像用Assetフォルダ内の画面解像度に適した画像ファイルを探すような仕組みができてる。ここら辺に興味がある人はAppleの「Xcode Overview」の「Adding Data Sets」や「Asset Catalog Format Reference」を読みましょう。
 
 あとは、どうやって、このyumboURLで示されるファイルを読み込んで、3D形状やマテリアル情報を取り出すかってことになるんだけど…
 SceneKitはCOLLADAファイルからSCNSceneを作り出せるようになってまして、url:引数を持つSCNSceneのイニシャライザに、読み込ませたいCOLLADAファイルのURLを渡しちゃえば、COLLADAファイルに記述される3D形状やマテリアル群は、SCNNodeの階層構造に変換され、作成されたSCNSceneのrootNodeに登録済みになっちゃうんですな。グレート。
 今回ならyumboURLを渡しちゃえばいい。
   let yumboScene = SCNScene(url:yumboURL)

 ファイルの読み込みに失敗した時は例外を投げるので注意するように。try?等で対応しましょう。try?がわからん人は「キャッチして」ね。

 

 Blender自体はオランダの人が作ったオープンソースのアプリで、Appleとは無関係なんだけど、詳細が公開されてるCOLLADAフォーマットでファイルを書き出すことで、3D形状やマテリアル情報をXcodeも解釈できるようになるわけですな。

 フォーマット大事。

 

 というわけでファイルに記述された3D形状群は、それぞれがSCNGeometory派生オブジェクトになり、そのオブジェクトを持つSCNNodeが用意されることになります。
 さらには、あらかじめBlenderで、作った3D形状に名前をつけておいてやれば、その3D形状をSCNGeometoryとして持つSCNNodeにも、その名前がつくようになっているので、読み込んで出来上がったSCNSceneのrootNodeに対し、その名前で検索かければ、Blenderで作った3D形状をgeometoryプロパティに持つSCNNodeが手に入るってわけですよ。
 例えばBlenderでブームの3D形状に"boom"って名前を付けてたならこうやる。回転の時と同じです。
   let node = yumboScene.rootNode.childNode(
   		withName: "boom", recursively: true)
 この見つけたSCNNodeをそのまま利用できるわけです。
 BlenderでSCNGeometoryごとの原点位置は調整してるので、pivotの設定は無用。マテリアルもSCNGeometoryに設定済み。あとはaddChildNodeで順に親子関係を結んで、親側での位置を指定していけばいい。
 前回のExcavatorのイニシャライザとの違いはこんな感じ。
class Excavator {
	・・・
    init() {
        土台・肩はこれまでどおり
        let base = SCNBox()
        let baseNode = SCNNode(geometry: base)
        let shoulder = SCNSphere()
        let shoulderNode = SCNNode(geometry: shoulder)
        shoulderNode.name = Excavator.sholderID
        baseNode.addChildNode(shoulderNode)
        
        COLLADAファイルを読み込みSCNSceneオブジェクト作成
        guard let yumboURL = Bundle.main.url(
        	forResource: "yumbo", withExtension: "dae") else {
            return
        }
        guard let yumboScene = try? SCNScene(url:yumboURL) else {
            return
        }
        
        作成したSCNSceneオブジェクトから
        ブームを取り出し、子ノードとして登録
        let boom = SCNCone(
        	topRadius: 0.3, bottomRadius: 0.4, height: 3)
        let boomNode = SCNNode(geometry: boom)
        boomNode.name = Excavator.boomID
        guard let boomNode = yumboScene.rootNode.childNode(
        	withName: Excavator.boomID, recursively: true) else {
            return
        }
        shoulderNode.addChildNode(boomNode)
        
        アーム・バケットも同様
        
        ・・・
            
        ブーム・アーム・バケットのpivotは設定不要
        baseNode.pivot = SCNMatrix4MakeTranslation(
        	0, baseNode.geometry!.boundingBox.min.y, 0)
        shoulderNode.position = SCNVector3(
        	x:0, y:baseNode.geometry!.boundingBox.max.y, z:0)
        boomNode.pivot = SCNMatrix4MakeTranslation(
        	0, boomNode.geometry!.boundingBox.min.y, 0)
        boomNode.position = SCNVector3(
        	x:0, y:shoulderNode.geometry!.boundingBox.max.y - 0.3, z:0)
        ・・・
        
        ブーム・アーム・バケットのfirstMaterialは設定不要
        base.firstMaterial?.diffuse.contents = UIColor.red
        shoulder.firstMaterial?.diffuse.contents = UIColor.yellow
        boom.firstMaterial?.diffuse.contents = UIColor.blue
        ・・・

        root = baseNode
    }

 やろうと思えばBlender側で親子関係自体も構築可能と思われ。

 この点は次回試してみます。

 という具合に、Blenderの3D形状をSceneKitで使うのは結構簡単なんですが、1点だけ注意する点があるんすよ。

3D形状モデリングにBlenderを使う注意点

 それはBlenderの3D空間が上下の基準にz軸を使っている点。

 ここで3D形状を作成して、そのまま3D空間の上下の基準にy軸を使っているSceneKitで利用すると、形状が横になっちゃうんですな。

 

 

 これが全て仮想空間で完結してるなら、SceneKit側の仮想カメラ視線を変えるって方法を取れなくもないけど、SceneKitを使うARKitの仮想カメラは、現実のカメラの向きと連動してて、実空間の上下基準にもy軸を使ってるんで変更できないのよ。

 実際どうなるか興味がある人のために、単にファイルをプロジェクトに登録して利用した場合のサンプルを置いておきます。

 

サンプル:

 http://tetera.jp/xcc/book-sample/yumbo-flip.zip

 

 ご覧の有様だよ。

 

 そこらへんを吸収するために必要なのが、3D形状を構成する頂点群の、yとz座標の入れ替えなんですが、ここら辺を一気にSceneKitにお任せする方法としてSecneKit Catalogフォルダを作って、その中にCOLLADAファイルを置くという方法があるっす。

SecneKit Catalogフォルダ

 新規に作る場合はFile>New>File…メニューを選んで表示される画面からSecneKit Catalogを選ぶとプロジェクトに追加できます。

 

 

 

 これで指定した名前のSecneKit Catalogがナビゲーションエリアに追加されます。

 

 この、追加されたSecneKit Catalog項目を選ぶと右に表示される内容が、SecneKit Catalog内に置かれたファイルに対するSecneKitがおこなう調整内容っす。このうちのAlway uses the Y-up axisが、今回のy軸が上下軸に設定されてない問題の解決用。「いつでもy軸を3D空間の上下軸として使うよ〜」て感じかな?

 もっとも、Blenderで書き出したCOLLADAファイルは、ファイルをこのSecneKit Catalog内に入れさえすれば、Alway uses the Y-up axisがチェックになってなくても補正してくれます。多分COLLADAファイル内に記述されてる

 

  <up_axis>Z_UP</up_axis>

 

を解釈してるんだろうと思われ。

 おそらく、修正をかけたいという意思を示すために、SecneKit Catalog内に入れる必要があるんでしょう。

注意)COLLADAファイルはXMLで記述されるので、内容をテキストとして読むことも可能。ナビゲーションエリアのCOLLADAファイル項目を右クリックしコンテキストメニューからOpen As>Source Codeを選べば確認できる。元の表示に戻すには同じようにメニューを出させOpen As>SceneKit Documentを選べば良い。元の表示であるSceneKit Document表示については次回以降に説明。

 

 とにかく、あとは、このSecneKit Catalogフォルダにさっきのyumbo.deaファイルを置くだけ。ナビゲーションエリアのSecneKit Catalogの項目にドロップでもいいし、FinderでSecneKit Catalogのフォルダに直接ドロップでもいいです。

 

 FinderでSecneKit Catalogのフォルダに直接ドロップと書いたように、SecneKit Catalogはフォルダとしても存在します。

 ナビゲーションエリアでSecneKit Catalog項目を右クリックして出てくるメニューからShow in Finderを選べば、そのフォルダを表示してくれるんで、その中にyumbo.deaファイルをドロップしてもいい。

 

 

既存のSecneKit Catalogフォルダの登録

 軸変換からは話がそれるけど、Xcodeは.scnassets拡張子が付いた名前のフォルダならSecneKit Catalogのフォルダだと解釈するようで、File>New>File…メニューを使わなくても、.scnassets拡張子のフォルダをナビゲーションエリアにドロップすることでもSecneKit Catalogをプロジェクトに登録できるみたい。

 この時に重要なのは、フォルダのドロップ直後に出てくる設定画面でAdded folders:をCreate folder referencesにすること。

 

 

 こっちにしておくと、登録されたフォルダの内部は、そのまま丸ごとバンドルにコピーされることになるっす。

Create groupsとCreate folder referencesの違い

 もう1つの方のCreate groupsを選ぶと、ドロップしたフォルダ名を使ったグループ(Group)を作り、そのグループ中に、ドロップした時点でのフォルダ内のファイル群をそれぞれ登録することになる。以後、Finder上でフォルダ内を変更してもナビゲーションエリアに反映されることはない。

 

 

 これに対し、Create folder referencesだと、ドロップしたフォルダそのものがフォルダ参照として登録されることになり、以後、そのフォルダの内容物の変化がそのままナビゲーションエリアにも連動して反映されることになる。

 

 

 File>New>File…メニューでSecneKit Catalogを指定した場合も、このフォルダ参照の設定になってて、フォルダ自体を作るまでをやってくれる。

 

 話を軸変換に戻す。

 メニューだろうとドラッグ&ドロップだろうといいので、とにかく用意したSecneKit Catalogフォルダ内に、Blenderで作ったCOLLADAファイルを置きましょう。そうするとyとz座標の入れ替えを自動でやってくれます。

 気をつける点として、バンドルにはSecneKit Catalogフォルダごとコピーされるので、読み込み時のURLとしては、このフォルダ名(拡張子含む)をファイルの親フォルダとして指定すること。

 そのためにはurlメッセージのforResource:に渡す名前を、フォルダ名とファイル名を /(スラッシュ)で結んだものにすればいいです。

    let yumboURL = Bundle.main.url(
    	forResource: "SceneKit Asset Catalog.scnassets/yumbo", 
		withExtension: "dae")

 

注意)url(forResource:withExtension:subdirectory:)メッセージを使ってもいい。というか、こっちの方が正当な気もする。

 

 それ以外の作業は横向きになっちゃうよ版と同じです。

 Runするとこんな感じ。

 

 

 

サンプル:

 http://tetera.jp/xcc/book-sample/yumbo-blender.zip

 

 いや〜、一気に雰囲気上がりますな。
 こんな風に3D形状を自由に作れるなら、アイマスとか初音ミクとかも作れんじゃね?と思った人。

 大正解。

 次回からBlenderの操作も含め、そこらへんを調査していく。