3Dモデリングとアニメーション

図3-1-0

第３部では、S2AR の応用について説明していきます。外部のアプリケーション・サービスと連携する「3Dモデリングとアニメーション」「地図を表示させる」「分子構造模型」を学びます。

MagicaVoxel

図3-1-1

MagicaVoxel 公式サイト

MagicaVoxel は、ephtracy がオープンソースで開発を進めている、ボクセルモデリングソフトです。Windows、Mac の両方に対応しており、公式サイトより無料でダウンロードできます。パストレーシングによる高品質なレンダリングも可能で、ゲーム素材の作成やアート作品の製作など、様々な用途で活用されています。

まだお持ちでない方は、自分のパソコンに合った最新バージョンの MagicaVoxel をダウンロードして、インストールしておきましょう。

ボクセルとは

図3-1-2

「ボクセル」とは3Dモデルを構成する最小単位で、サイズ「1 x 1 x 1」の立方体で表されます（２次元の「ピクセル」に対応した言葉）。ボクセルを積み上げて、複雑な3Dモデルを作成する「ボクセルアート」という分野は人気があり、様々な作品がネット上で公開されています。3Dプリンターを使って、現実世界に実体化することができますが、時間も費用もかかってしまいます。

S2AR は「3Dモデル作成」機能があり、拡張現実にボクセルアートをクラフトすることができます。そして「アニメーション」機能で、ボクセルアートを動かすことができるのです（ボクセルアニメ＝Voxel Animation）。

3Dモデルの作成（準備）

図3-1-3

MagicaVoxel を起動すると、サイズ「40 x 40 x 40」の立方体が表示されます（左のパレットで選ばれている色になります）。これからモデリングするのに邪魔になりますから、全て消してしまいます。

図3-1-4

右上のモデルサイズを「20 20 20」に変更します。左上のエディットモード「B（＝ボックス）」「Erase（＝消す）」を選択します。グリッド等を表示するために、左下のボタンは全て選択しておきましょう。
右手前下のボクセルをクリックして、クリックしたまま左上に動かしてください。ボックス（箱）単位で選択されたボクセルが削除されます。一度ですべてのボクセルが消せなかったときは、二度、三度同じ作業を繰り返して、全てのボクセルを消してしまいます。

図3-1-5

全てのボクセルが消された状態になりました。ここから3Dモデル作成がスタートします。まずマウスの操作を練習します。

マウス（右クリック）＝ボクセルを置く、消す、色を塗る等の操作を行う。
マウス（左クリック）＝視点の回転
マウス（中クリック）＝視点の移動
マウス（ホイール）＝視点の拡大縮小

このマウス操作は、ほとんどの3Dモデリングソフトでも共通操作なので覚えておくとよいでしょう。

マウス操作のコツがつかめたら、作りたいモデルをイメージしながら、次の節に進んでください。

3Dモデル作成（モデリング）

図3-1-6

モデリングに入っていきます。今回は簡単な「ひよこ」を作ってみようと思います。

まず左のパレットで設置するボクセルの色を選びます。茶色（r, g, b）＝（153, 0, 0）を選びました。次に左上のエディットモード「V（＝ボクセル）」「Attach（＝置く）」を選びます。左右対称の形状を作るときは、ミラーモード「X」を選んでおくと便利です。X-Y 平面（底面）の中心あたりをクリックして、ボクセルを置いてください。Y-Z 平面に対して対象の位置に、２つのボクセルが置かれました。

図3-1-7

エディットモード「F (=面）」「Attach」にすると、平面を置くことができます。

図3-1-8

後からボクセルの色を変えるには、エディットモード「Paint（＝塗る）」を選びます。左のパレットで塗りたい色を選んで、ボクセルを選択してください。

これでボクセルアートは完成です。「File（＝ファイル）」→「Save as（名前をつけて保存）」から「hiyoko.vox」と名前をつけて保存してください（保存する場所は「書類」「デスクトップ」など自分が使いやすいところを選んでください）。

次に、作成したモデルデータを iPhone に転送して、S2AR で「3Dモデル作成」する手順を説明します。

3Dモデル作成（S2AR）

図3-1-9

「File」→「Export（＝書き出し）」→「ply（ポリゴン・ファイル・フォーマット）」を選びます。

図3-1-10

「export」フォルダに「hiyoko.ply」を保存します。このデータを iPhone に転送します。

図3-1-11

iPhone を USBケーブルでパソコンと接続します。iTunes で iPhone を開き、「ファイル共有」を選びます。「s2ar」→「追加」で共有したいファイルを選びます。

図3-1-12

先ほど書き出した「hiyoko.ply」を選んで、「追加」をクリックします。これで iPhone にファイルが転送されました。

図3-1-13

パソコンのインターネットブラウザ（Chrome）でhttp://scratchx.org

を開いてください。

Extension URL

https://champierre.github.io/s2ar/extension/s2ar.js

を入力して、S2AR の拡張ブロックが使えるようにします。「3Dモデル作成ブロック」の PLYファイル入力欄に「hiyoko.ply」を入力して、実行します。

図3-1-14

拡張現実世界に、ボクセルアート「HIYOKO」をクラフトすることができました。第２部の自動車を作る

では、設計図を書いて、座標を読み取ってリスト化するなど、非常に手間がかかりましたが、MagicaVoxel との連携機能を使えば、簡単に 3Dモデル作成を行うことができるのです。

アニメーション

以下は書籍でご確認ください