Tech Sketch Bucket of Technical Chips by TIS Inc.

3Dスキャンした物体をmetaio SDKでiPad上にAR表示しよう

Pocket

先日の記事 では、 Artec Studio 9 + Kinect を用いて実在の物体(自転車用空気入れ)を3Dスキャンし、三次元メッシュモデルを生成しました。今回は metaio SDK を用い、この「自転車用空気入れの三次元メッシュモデル」をiPad上にAR表示してみます。

マーカーをタップすると3Dアバターがしゃべって動くARアプリ 4

Pocket

動画のような「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」について、


第一回 では環境準備について、 第二回 ではAndARの改造ポイントについて、そして 第三回 では改造したAndARを用いた具体的なアプリケーションの実装のうちActivity部分について解説してきました。

最終回の今回は、具体的なアプリケーションの実装のうちアバターの基底となるPlayerBase、及び具体的なアバターを定義するクラスについて解説します。

なおソースコードや設定ファイルの全ては解説していません。実際に動くコードは、Github上に公開された下記リポジトリを参考にしてください。

https://github.com/tech-sketch/AR_Speaker

マーカーをタップすると3Dアバターがしゃべって動くARアプリ 3

Pocket

前々回前回 の記事に引き続き、AndARを改造して「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」の解説をします。

今回と最終回の次回を使って、「マーカーをタップしたことを判断するロジック」や「個々の3Dオブジェクトに独自のアニメーションを実装する方法」を、具体的なアプリケーションのソースコードを元に解説します。

なおこの「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」のソースコードは、Github上に公開しています。

https://github.com/tech-sketch/AR_Speaker

ぜひcloneして、このアプリの動作を確認してみてください。

マーカーをタップすると3Dアバターがしゃべって動くARアプリ 2

Pocket

前回 の記事に引き続き、AndARを改造して「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」の解説をします。
今回は「マーカーをタップする」というイベントをハンドリングするためにAndARに施した改造について、ソースコードを交えて解説します。

・・・AndARの内部構造の話やJNIバリバリのC言語のソースコードの話が出てきたりと、かなり濃いですが、ツイテキテネ!

マーカーをタップすると3Dアバターがしゃべって動くARアプリ 1

Pocket

スマートフォンやタブレットなど、カメラ・GPS・タッチスクリーンを装備したプログラマブルなデバイスの普及に伴い、様々な AR(Augmented Reality = 拡張現実) を用いたサービスが展開されています。
近頃は 頓知ドット のセカイカメラに代表される 位置情報を元にしたAR だけでなく、 Koozyt のGnG(GET and Go)が提供するような マーカーにカメラをかざすことによるAR(マーカー型AR) も注目を集めビジネス化が図られています。

特にAndroidは、 NyARToolkit for AndroidAndAR といった、OSSのマーカー型ARライブラリが公開されているため、マーカー型ARを試してみるにはもってこいの環境です。

そこで今回は、AndARを改造して「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」を作りたいと思います。


※音声が再生されます。注意してください。

3Dプログラミング基礎知識(6)

Pocket

3Dプログラミング基礎知識(5)の続きです。

画面に描画されるまでの流れ(おさらい)

Pipeline.png

前回までで画面上の「どこ」に描画されるかは求まりました。今回はライティング、テクスチャによって「どのように」描画されるかを見ていきたいと思います。

ライティング

光の影響を考慮して最終的にレンダリングされる色を決定する処理をライティングと呼びます。
現実の世界にある物体は太陽や蛍光灯など光源からの光があたり、それを反射することで、我々の目に見えています。これを3D空間上でシミュレートすることによって、3D空間上に配置されたオブジェクトの見た目を現実世界に近づけることができます。
しかし、実際には光源の性質として、光源の形状、物体からの距離、方向特性、光の強さ、減衰率など様々な要素が考えられ、これら全てをシミュレートすることはCPU/GPU負荷の面から見ても現実的ではありません。
そこで続きに示すように、代表的な光源や近似出来るような式を用いて光源処理を行うことになります。

3Dプログラミング基礎知識(5)

Pocket

3Dプログラミング基礎知識(4)の続きです。

画面に描画されるまでの流れ(おさらい)

Pipeline.png

パイプラインには書かれていませんが「ビューポート変換」と「Zバッファ」についてみていきたいと思います。

ビューポート変換

射影変換を行った後の座標系は、視錐台の領域をX軸(-1.0 ~ +1.0)、Y軸(-1.0 ~ +1.0)、Z軸(0.0 ~ +1.0)に変換したものになります。これを実際に描画する座標へ変換するのがビューポート変換です。
実際の描画サイズはPC、スマートフォンなどのデバイスによって異なりますが、今回は640 × 480の画面に描画する場合を考えます。

射影変換済み頂点において、 X = -1.0 は視錐台の左面、すなわち視野の左端に相当します。その為、この頂点を画面に描画する際には X = 0 px の場所に描画されます。
同様に X = +1.0 が画面右端のため X = 639 px に、 Y = +1.0 が画面上端のため Y = 0 px に描画されます。

ViewPort.png

3Dプログラミング基礎知識(4)

Pocket

3Dプログラミング基礎知識(3)の続きです。

画面に描画されるまでの流れ(おさらい)

Pipeline.png

今回は「射影変換」についてみていきたいと思います。

射影変換

前回書いた「ビュー変換」によってカメラが定義され、カメラから見た光景が表現されました。
しかし、この時点ではオブジェクトはまだ3D座標系に位置しており、2Dのディスプレイ上に表示することはできません。
遠近法などを考慮した上で、3D座標上のオブジェクトを2Dの平面に投影する。この変換を行うのが「射影変換」になります。

3Dプログラミング基礎知識(3)

Pocket

3Dプログラミング基礎知識(2)の続きです。

画面に描画されるまでの流れ(おさらい)

Pipeline.png

今回は「ビュー変換」についてみていきたいと思います。

ビュー変換

前回書いた「ワールド変換」によって、3D空間に立方体が配置されました。
しかし、残念なことに現在一般的に使われているディスプレイが表示できるのは平面のみに限られており、3D空間に配置した立方体をそのまま表示することはできません。

現実という3D空間に対してカメラを向け、写真を撮ると3D空間を2Dの平面上に表現することができます。これと同じく、仮想的な3D空間においても仮想的なカメラを配置し、3D空間を特定の方向から眺めた結果を求めることで、2D平面上に表現することが可能です。

この変換を行うのが「ビュー変換」と、次回取り上げる「射影変換」になります。

3Dプログラミング基礎知識(2)

Pocket

3Dプログラミング基礎知識(1)の続きです。

画面に描画されるまでの流れ

前回の記事では3Dモデルを定義しましたが、これが画面に表示されるまでには様々な処理が行われています。

Pipeline.png

最近のPCやスマートフォンにはグラフィック処理を専門に行うGPUが搭載されており、プログラム中で定義された頂点情報や、面を構成する頂点の情報はCPUからGPUへと渡され、GPUで処理が行われます。
ここで行われる処理はOpenGL ES 1.0と2.0で極端に異なっており、OpenGL ES 1.0の場合は「固定機能パイプライン」と呼ばれる定番の処理が行われます。
これは3Dオブジェクトの移動やカメラ位置に応じた変換、光源の処理などを含んでおり基本的な3D表現であれば出来るようになっています。

OpenGL ES 2.0の場合ですが、「プログラマブルシェーダ」としてGPUで行う処理を製作者が自由に指定できるようになっています。
固定機能パイプラインが行っていたカメラ位置に応じた変換や光源の処理を自分で記述する必要はありますが、固定機能パイプラインとは違い、シェーダプログラムを記述することで製作者の考えに応じて頂点情報、ピクセル情報を変更することが可能です。

シェーダプログラムに関しては第五回で改めて取り上げる予定ですので、今回は「固定機能パイプライン」について見ていきたいと思います。