afjkの技術メモ

主に技術系備忘録

作ったもの (VR)

作ったもの、やった事をまとめてみる。

 

 

 https://twitter.com/afjk01/status/871546214897991681/video/1

 

 

 

 

 

 

 

 

 

Cocos3D 2.0.XでのARアプリ開発

このように、３Dオブジェクトをカメラプレビューに重ねる方法を解説します。

Cocos3D 2.0.Xの新規プロジェクト作成はうまくいきません。
チュートリアル動画にある通り、サンプルのHelloWorldをコピーしてプロジェクトを作成するのが良いようです。
Starting Cocos3d - 1 - Installing Cocos3d and starting a new project - YouTube

ベースとなるプロジェクトを"HelloAR"として作成したところから解説。

3Dオブジェクトの背景にカメラプレビューを表示する

コメントにある通り、以下のコメントを外し、Sceneのbackdropをコメントアウトする。

AppDelegate.m

-(CCScene*) startScene {
	:
	// For an Augmented Reality 3D overlay on the device camera, uncomment the following lines.
	// This must be done after the window is made visible. The 3D scene contains a solid backdrop.
	// To see the device camera behind the 3D scene, remove this backdrop, by commenting out the
	// backdrop property assignment in the initializeScene method of CC3HelloWorldScene.
	CC3DeviceCameraOverlayUIViewController* viewController = [[CC3DeviceCameraOverlayUIViewController alloc] init];
	viewController.isOverlayingDeviceCamera = YES;
	scene2D.colorRGBA = [CCColor colorWithCcColor4f: kCCC4FBlackTransparent];
    
	return scene2D;
}

HelloARScene.m

-(void) initializeScene {

	// Optionally add a static textured, or solid-color, backdrop, by uncommenting one of these lines.
//	self.backdrop = [CC3Backdrop nodeWithTexture: [CC3Texture textureFromFile: @"BrushedSteel.png"]];
//	self.backdrop = [CC3Backdrop nodeWithColor: ccc4f(0.4, 0.5, 0.9, 1.0)];

これだけで、Hello Worldの背景にカメラプレビューが表示されます。

Landscape Rightにする

ハコスコで表示するため、LandscapeRightにする。

  • Targetの設定

Target>General>Deployment Info
Device OrientationをLandscape Rightに。
f:id:afjk:20150201020814p:plain

  • CCSetupScreenOrientationをLandscapeに設定

appDelegate.m

-(BOOL) application: (UIApplication*) application didFinishLaunchingWithOptions: (NSDictionary*) launchOptions {
	:
	   CCSetupAnimationInterval: @(1.0 / kAnimationFrameRate),	// Framerate (defaults to 60 FPS).
	   CCSetupScreenOrientation: CCScreenOrientationLandscape,		// Support all device orientations dyanamically
  • deviceCameraView.layerのOrientationをLandscapeRightに設定する処理を追加する。

これをしないと、カメラプレビュー画像がPortraitのまま、90度回転して表示される。
AppDelegate.m

-(CCScene*) startScene {
	:
	// For an Augmented Reality 3D overlay on the device camera, uncomment the following lines.
	// This must be done after the window is made visible. The 3D scene contains a solid backdrop.
	// To see the device camera behind the 3D scene, remove this backdrop, by commenting out the
	// backdrop property assignment in the initializeScene method of CC3HelloWorldScene.
	CC3DeviceCameraOverlayUIViewController* viewController = [[CC3DeviceCameraOverlayUIViewController alloc] init];
	viewController.isOverlayingDeviceCamera = YES;
	scene2D.colorRGBA = [CCColor colorWithCcColor4f: kCCC4FBlackTransparent];
	//この行を追加
	[viewController.deviceCameraView.layer setOrientation:AVCaptureVideoOrientationLandscapeRight];
    
	return scene2D;
}

端末の姿勢に合わせてCC3Cameraの方向を制御する。

下記記事を参照。
端末の傾きに合わせて3Dオブジェクトを表示する方法[cocos3d] - afjkの技術メモ

カメラの自動位置合わせをコメントアウト

起動時に３Dオブジェクト全体を捉えるようにカメラ位置を自動調整する機能が有効になっているので、コメントアウトする。
TwideeARScene.m

-(void) onOpen {
：
	// 以下の行をコメントアウト
	// Move the camera to frame the scene. The resulting configuration of the camera is output as
	// an [info] log message, so you know where the camera needs to be in order to view your scene.
	// [self.activeCamera moveWithDuration: 3.0 toShowAllOf: self withPadding: 0.5f]; // ここ。全体が表示されるようにカメラが動く。

	// Uncomment this line to draw the bounding box of the scene.
//	self.shouldDrawWireframeBox = YES;
}

Cocos3D 2.0.2インストール

オープンソース(MITライセンス)の3DライブラリCocos3D 2.0.2をインストールしたのでメモ。
Cocos3D Home
今までは0.7.2を使っていましたが、大幅に改修されました。

インストール

  • Cocos2D swift 3.2.1をダウンロード&解凍

Cocos2D – Swift Open Source Game Engine
Cocos2D zip archive 3.2.1

  • Cocos3D 2.0.2をダウンロード&解凍

Releases · cocos3d/cocos3d · GitHub

  • ターミナルでCocos3Dを解凍したディレクトリに移動し、Cocos2Dのパスを指定してインストールコマンド実行

$ ./install-cocos3d.sh -2 "../Cocos2d321"

試して気づいた点

  • 今までの0.7.2のプロジェクトも作れる。実はこれを一番心配していた。

f:id:afjk:20150130002608p:plain

  • ストーリーボード上に3D描画領域を重ね合わせたり、別の３D領域に遷移したりできる。

f:id:afjk:20150130003140p:plain

  • CC3Backdropで背景にテクスチャを張れる。

　何気に便利。
　カメラのプレビューをテクスチャに設定すれば、AR的なアプリも簡単に作れるんじゃないか？
　→と思ったら、むしろ設定してはダメだった。
　　コメントにちゃんとArgumented Rearityのやり方が書いてある！

Starting Cocos3d - YouTube

端末の傾きに合わせて3Dオブジェクトを表示する方法[cocos3d]

iOSアプリ開発

Twidee3Dのハコスコ対応で端末の傾きに合わせてカメラ制御方法を調べたので共有。
iOSアプリ向け。3D表示にcocos3Dを使っています。

  • 実装


iOS cocos3d cameraを端末の姿勢に合わせて制御する

xxScene.h

#import "CC3Scene.h"
#import <CoreMotion/CoreMotion.h>// この行を追加

@interface HelloARScene : CC3Scene {
    CMMotionManager* _motionManager; // この行を追加
}

@end

上記ソースコードを貼り付けて、sceneの初期化時にinitMotionManagerを呼び出せばactiveCameraが端末の姿勢に合わせて向きを更新するようになります。
xxScene.m

-(void) initializeScene {
	:
	CC3Camera* cam = [CC3Camera nodeWithName: @"Camera"];
	cam.location = cc3v( 0.0, 0.0, 18.0 );
	[self addChild: cam];
    
	[self initMotionManager]; //この行を追加

※CoreMotion.frameworkをリンクする必要があります。

  • 簡単な説明

１．CMMotionManagerを使って、端末の姿勢情報を取得。
　CMDeviceMotion.attitudeからは、quaternionやオイラー角など、いろいろな形で端末の姿勢情報を取得できる。ここではquaternion。
２．取得したquaternionを直接activeCameraに設定すると端末の下を向いてしまうので、X軸で90度回転。
３．Portraitの場合は、2まででOK。
　　Landscape Rightの場合は、さらにactiveCameraをZ軸で-90度回転。

３Dプログラミングをしていると、大概クォータニオンなどの数学的な箇所でつまづくので、Tips的に参考ソースがあるといいなと。
私も詳しくないので、他の方の方法を参考にしたり、試行錯誤しながらやっています。

カメラのクォータニオンでの回転方法はこちらを参考にしました。
iphone - Cocos3d and augmented reality - Stack Overflow

スカイドームの作り方（球に綺麗にパノラマ画像テクスチャを貼る方法）【blender2.7】

THETAで撮影した画像でスカイドームを作ったのでメモ。
f:id:afjk:20150103013230p:plain
作成には、下記サイトを参考にした。
「How To Unwrap A UV Sphere In Blender」
https://m.youtube.com/watch?v=yc0b5GcYl3U
http://www.enigmatoots.co.uk/#!unwrapping-sphere/cvnq

解説は参考サイトを見ていただくとして、ポイントだけ。
blenderでUV Sphereを作成し、UV展開すると下図のように上下の極周辺がうまく展開されない。
f:id:afjk:20150103015523p:plain
これは極周辺だけ三角ポリゴンのため。
これを解決するために、

  • 両極の頂点を一旦削除
  • 上下端を押し出し延長し、穴を小さくすぼめる。※完全には閉じない

　ループ選択（alt+右クリック）→延長（Ctrl+E)→サイズ変更(Sキー)→Shit+ZでZ軸変化を固定。

  • UV展開＞球状展開
  • テクスチャを貼り付けた後で、再度上下端の辺をループ選択→サイズ変更→0キーで完全に穴を塞ぐ。
  • 面をスムーズにする。

f:id:afjk:20150201134230p:plain
これで、上下の極も綺麗にテクスチャを貼り付ける事が出来る。
f:id:afjk:20150103014341p:plain

参考サイトは球の表面にテクスチャを貼る方法なので、スカイドームにするには面を反転させる事をお忘れなく。

RICOH デジタルカメラ RICOH THETA m15 ホワイト 360°全天球イメージ撮影デバイス 0910700

RICOH デジタルカメラ RICOH THETA m15 ホワイト 360°全天球イメージ撮影デバイス 0910700

有色地デッサン　女性のポートレート

有色地デッサンに挑戦。
美人を描くのは難しい。
ピンクの紙に鉛筆、色鉛筆、パステル白。
合計12時間
f:id:afjk:20141109104515p:plain
この本の長坂洋平の写真模写(p.56)。

図解ポートレイト・ライティング (コマーシャルフォトシリーズ (67))

図解ポートレイト・ライティング (コマーシャルフォトシリーズ (67))

使った色鉛筆
トンボ鉛筆 木物語 色鉛筆 12色 CB-RE12C 缶入

トンボ鉛筆 木物語 色鉛筆 12色 CB-RE12C 缶入

物理エンジンで作るBio-likeness(3)

iOS Bio-likeness 人工生命 物理エンジン(bullet)

全身の筋肉が重力に逆らいながら「楽な」姿勢を探した結果、重心が各関節の真上にあり揺らいでもわずかな力で復元出来る均衡状態を発見する。それが「立つ」ということらしい。

日経デザイン「デザインの小骨話　第一回」山中俊治

前回作成したCSL制御モーターを単純に繋いだロボットを作り、動かしてみました。
f:id:afjk:20140912080518j:plain

1関節で三つの剛体を接続した場合

中心部を浮かせて地面に置くと、関節を閉じて中心を持ち上げます。

片側を浮かせると関節は90度まで回転して止まり、片側の剛体を持ち上げます。

2関節の場合

接地した側の関節、浮いた側の関節が開いて端を持ち上げます。

開きすぎて逆側に倒れない様にユラユラ揺れながらバランスをとる。
関節を膝、足首に見たてると、一本の足が立ち上がっている様にも見えます。

3関節の場合

両端のみ接地させた状態だと、中心は閉じ、その両脇の関節は開いて全体を持ち上げます。

二本足ロボットのよう。
面白いのは、倒すと自力で同じ体勢に戻る事です。

また、他にも初めの体勢に応じ、様々な形態で安定する姿勢を探します。

これらに使用したモーター制御は、全て同じパラメータを使っています。
にもかかわらず、状況に応じて挙動を変え、それぞれが連携してバランスを取りながら重心を高い位置に持ち上げる。
つまり、「立つ」。

単純に外力に対抗するようモーター制御するだけで、このような動きになる。
マンフレッド氏の発想は素晴らしい。
モーター間の通信もなく、全体を制御する頭脳も必要としない。
協調動作により創発される起立動作。

問題点

今回試したこれらのロボットの問題点として、自身を構成するパーツ同士が接触すると、外部からの力と自分が加えた力の区別がつかないため、自分自身に力を加え続けてしまいます。
こうなると、バランスをとり立ち上がる能力は失われてしまう。

Bio-likeness展でのロボット達を振り返る

Apostrophは各パーツがすり抜ける構造になっていて、この問題は起こらない。

Fuhlerは、たまに力尽きたように脱力していた。もしかしたらこうした状況にはまり込まないように過剰な力が加わったら力をリリースしていたのかもしれない。
Waageは？どうなんだろう。1関節の構成なので、可動範囲を限定する事で容易に防げる気もする。
bio-likeness展で試すか質問出来ていれば。。。

もっとも、今回実際に作ったから気づけた事ではあります。
ただ「面白かった」で終わらせなくて良かった。

次回予告

今回は単純な構造で試しましたが、今度はApostrophの様にアーチ状の構造を組み合わせたような物や、あと、これ。
f:id:afjk:20140914173257j:plain
小さな同型のパーツをブロックの様に組み立てる。するとそれが動き出し「むくり」と立ち上がったらきっと楽しい。
そう思わせてくれる素敵な山中俊治先生のスケッチ。
リアルタイムに組み替えることが出来るアプリを作りたい。
（UI設計で死にそうですが。完成はいつになるかな）