技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

BlenderとXcode9.1でARをつくるぞ!!

2017-11-14 勉強会
須田アンド島田ペア
お昼ごはんは毎日おでん、デザイン部の島田です。
今回は須田CTOとタッグを組んでモノづくりをしました。
この勉強会で、「須田CTOの技術力を存分に無駄遣いしてやろう」と密かに企んでいた私は、「VRやってみたい!プロジェクションマッピングもいいな!ARもいいですね!」
などと、突拍子もない要望を須田CTOにぶつけてみました。
そうしたらなんと、「ARならできるかも」という須田CTOの頼もしい神発言を賜ることができたので、お互い何もかも初めてですが、協力プレイで【AR(拡張現実)】作り上げました!

制作にあたっての準備

今回の目標は以下2点
1、3Dでひとつオリジナルキャラクターを作成する
2、ARで平面を捉えて、そのキャラクターを映す

担当は以下の通り
■3Dキャラクター作成担当:島田
■プログラミング担当:須田CTO

使用したソフトについて

▼3Dキャラクター作成で使用したソフト
Blender(ブレンダー)https://blender.jp/(日本語訳サイト)
Blenderは3Dモデルを作成するためのアプリケーションです。オープンソースのフリーソフトウェアで、日本語対応、さらにマルチプラットフォームなので、WindowsでもMacでも使用可能です。

3Dモデルの静止画を作成するだけではなく、これ一つでアニメーション、シミレーション、スクリプト編集、レンダリングなどなど・・・様々なことができます。


▼プログラミングで使用したソフト
Xcode9.1
最新のXcode9.1をインストールするには、macOS がSierraが入るMacが必要なのですが、会社にあるMacは一つ前のEl Capitanまでしかいれることができず、ARやろう!といったけど、環境がない。。。

古いMacだけどあれでなんとかなるかと軽く考えていたのが、大誤算!code9.1が入るMacがないと何もできません・・・

おでん島田もARでその気になっちゃったし、しょうがない、買おう!ってことで、最新のMacを購入するところから勉強会の作品作りがスタートしました。
新Macブック

せっかく買ったので色々遊んでみたかったのですが、発表までの期日も迫っているので、寄り道せずXcodeをダウンロードして、最低限の環境だけ準備。
ARが動作する端末はiPhone6s 以降又は、iPad Pro以降なんですが、iPad Proを持っているので、そちらにインストールして色々実験しました。

3Dキャラクター作成(Blender)

Blenderはここからダウンロードできます。
https://www.blender.org/download/

ノートパソコン(Windows7・32bit)で作業しましたが、Blenderは問題なく動きました。

詳しい操作方法は調べればたくさん出てくるので、ここではザックリとした作業概要にさせていただきます。
さぁ、初めての3Dモデリング、まずはこの四角の状態から「犬」を作ります。

Blenderの易しい使い方

http://blender-cg.net/
最初はここで設定やショートカットキーなどを勉強しました。

blenderで犬をつくってみよう01 初期設定・モデリング

https://youtu.be/pkvMiEeJGro
犬作りはここで学びました。動画なので、何度も見返せるしわかりやすいです。

かんたんBlender講座

http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/index.html
大学の授業の演習課題用に作られたページのようですが、非常に参考になりました。
3D犬

やることは、ポリゴンを「複製→調整→複製→調整」の繰り返しでした。
これをコツコツと形に近づくまで根気強くやること6時間・・・最後に目鼻を追加し、色を付けて、出来上がりです。

作業の根本がわかったところで、オリジナルキャラクターを作成してみましょう!

作業その1:下絵から素体(そたい)をモデリング

基本的には、犬作成の時と同じです。
レイヤーを分けられるので、頭と体を分けて作成した後に、結合します。
素体の正面と側面

作業その2:素体(そたい)から洋服・靴・髪の毛を複製

例)パンツを作りたい場合
1、パンツにしたいポリゴンの頂点を選択→複製→別レイヤーに分離
2、パンツ部分のポリゴンの頂点を全選択し、「シュリンクラップ(※ビニール包装という意味らしい)」を設定
3、素体とパンツの距離感を設定
ザックリこのような手順で、服も靴も髪の毛も作成します。ペラペラの髪の毛は嫌だ、ということであれば「厚み付け」設定を行ってください。
服の生成

作業その3:服靴が被っている素体のポリゴンを削除し、服靴と素体を結合する。

服靴と素体を結合することで、ポリゴンが突き抜けるなどの現象を防ぐことができます。ここで髪の毛を結合しないのは、後々、色付けの時に作業しやすいからです。
余分なポリゴンを削除

作業その4:切れ目を入れて展開図をつくり色付けします。

ポリゴンに切れ目をいれて、展開図(UV展開)にします。
切り込みをいれて展開図をつくる

展開図に色付けします。今回は展開図をPNGで書き出して、Photoshopで着色しました。
いろつけ

作業その5:色付けした展開図をポリゴンに反映!

モデルに張り付け

作業その6:関節を作成、ポーズをつける

関節をつける

完成

感想:3Dモデラーは空間認識能力と観察力が大事!

私はテレビゲームが趣味なのですが、モノを立体的に捉える難しさに愕然としました。
「こんなに大変な作業をやっていたのか!」と、3Dキャラクターが出てくるゲームがいかに凄い技術の塊だったかを思い知り、改めてゲーム制作に携わる方々を尊敬しました。
しかし、最初は苦悩の連続だったBlenderも慣れてくれば非常に楽しくて、まだ自分の思い通りのモノは作れないですが、さらなるスキル習得の可能性を感じています。
もう少し勉強してみようと思いました。

ARプログラミング

ARアプリを作りには、ARKitと、3Dデータを扱うためにSceneKitというフレームワークを使います。
ARKitはiOS11から利用できるようになった最新のフレームワークで、ざっくり以下のことができるようです。


  • ポジショントラッキング

    現実空間での自分(iOS端末)の位置と向きを取得

  • 平面検出

    机や床などの平面を3D空間上の平面として取得

  • ポイントクラウド(3次元の点座標情報)取得

    現実空間内に存在する物体について、点単位で3D空間上の座標を取得

  • 周囲の明るさ推定

    周囲の明るさを単一の数値として取得

  • 現実空間への当たり判定(HitTest)

    端末位置から指定した位置に見えない線を伸ばし、当たり判定を行う

  • 現実空間とのスケール一致

  • カメラ画像の取得



これだけ色々できても、すべての機能を試すには時間がなさすぎるので、現実的な着地点として、おでん島田の作った「3Dキャラクターを平面検知した任意の場所にタップで召喚する」、というアプリを作ろうと思います。
まずは、素材としてもらった3DデータをXcodeのScene Editorで読み込みます
Xcode

Blenderで作るデータとXcodeで扱うデータでは、座標系が異なるため、x軸を-90度回転させる必要があります。
あと、ちゃんと地面に立ってもらうためにz軸も平面位置に来るように動かします。
この辺は比較的直感的に動かせるので、色々グリグリ動かしてみると面白いですね
3Dキャラクターの取り込みが完了したら、いよいよSwiftプログラミングです。

完成

緑色のメッシュが敷き詰められているところが、ARKitで平面を捕捉して可視化しているところです。
メッシュが壁のところで止まっているのがわかると思いますが、これが平面と壁の境目を認識している証です

その後カメラを動かしても一度敷き詰めたメッシュが現実空間に固定されていて動かなくなります。

この認識した平面をタップすると、その座標におでんガールが出現します。
もちろんカメラを動かしても現実空間の特定の位置から動きません。

片足が見えないのは、関節をつけてポーズを付けた際、足が後ろに曲がっているため、角度的に見えなくなっているだけで、取れてしまったわけではないです

このあとおでんガールを走らせたり追っかけたりしたかったのですが、夢中になりすぎて業務に支障を切らしてもあれなのでこのくらいにしておきます。

感想

初めてのiOSアプリの題材としてARは話題性もあり興味深い内容だったのですが、ARKit自体リリースされてから数ヶ月しか立っていないため、参考になるソースコードや優しく日本語で解説してくれるサイトが少なく、何度も挫折思しそうになりましたが、無事動くところまで作ることができて良かったです。

さいごに・・・

はじめての技術に触れまくった今回のものづくりは、短期間で思いのほか良い成果を得ることができたと思います。
専門分野がまったく違う二人が、互いにアイディアを出し合い、技術を補い合い、ベクトルを同じくして制作に挑めたのは非常に有意義でした。
ARがある未来への一歩は、少し不器用でしたが、確実に踏めたのではないでしょうか。
これが後に何につながる・・・?かは、まだ不明です!しかし、才能の無駄遣いは大成功でした!ありがとうございました!

最後はおでんガールと記念撮影して終了

ご清聴ありがとうございました。

インターパークでは、札幌本社の技術系の社員が持ち回りで、普段の業務ではあまりやらないけど興味のあることや、誰かのために何かを作るといったことをテーマにして、このような勉強会を隔週で行っています。
毎回大きなテーマをみんなで決めて、それに沿ってみんなで発表するのですが、今回は「プログラマーとデザイナーがペアになって何か作る」の回でした。
記事一覧へ

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部