トマシープが学ぶ

Mac/Unity/AR好きのミーハー初心者 記事内容は自分用のメモ。何も求めないで

ARkitでタップしたところにプロ生ちゃんを表示

UnityのARkitのサンプル「UnityARShadow」を書き換えて、タッチしたところに何か任意のオブジェクトを表示したいと思います。

このサンプルは床のタッチしたところに小人を出現させるサンプルです。床に影が落ちます。

bibinbaleo.hatenablog.com

全然調べてないので、書いていることには無駄や間違いが含まれているかもです。

概要

f:id:bibinbaleo:20170922142601p:plain

MainCameraにスクリプトがついていました。

f:id:bibinbaleo:20170922143516p:plain

AR Camera Managerも大事そう。

f:id:bibinbaleo:20170922143611p:plain

そしてGenerate Planesについているスクリプトで床を検知&構成している?

f:id:bibinbaleo:20170922142556p:plain

小人表示

小人にはUnity AR Hit Test Exampleスクリプトがついていました。

f:id:bibinbaleo:20170922141628p:plain

ということでこれをプロ生ちゃんにつければ表示されると思います。

できました。

f:id:bibinbaleo:20170922154334p:plain

いつものカメラを見てくれるスクリプトをつけています。あとモーションはSDユニティちゃんからもらいました。© UTJ/UCL

床を検知?して構成するのに必要なのはUnity AR Generate Planeというスクリプトで、その中のPlane Prefabが床素材になります。

f:id:bibinbaleo:20170922142556p:plain

このshadowPlanePrefabはこんな感じで影だけ表示してくれるマテリアルがついたPlaneです。

f:id:bibinbaleo:20170922144552p:plain

f:id:bibinbaleo:20170922142552p:plain

shadow distanceを小さい値にして、影が綺麗に出る様に設定します。

f:id:bibinbaleo:20170922154644p:plain

これのマテリアルを変えたり、rigidbodyとかをつけたら色々できそうだけど、うまくいかなかったので今度挑戦します。

参考

www.lanstar-blog.com

cyario.hateblo.jp

ARkit!!サンプル実行して、アプリで遊んだ

待ちに待った、この日。始めましょう!サンプル動かすとこまでやりたいな〜

qiita.com

SDK

SDK自体は昔からダウンロードできたのか。もっと早くから準備しとけばよかった

Unity-Technologies / Unity-ARKit-Plugin / Downloads — Bitbucket

公式のsdkがBitbucketにあるの初めてなので戸惑いましたが、ダウンロードからダウンロードできました。

Xcode&ios

xcode9をapp storeからインストール & iPadをios11にアップデートしました。

ビルド

unityでサンプルをios用にビルド

何事もなくビルドできました。

サンプル

UnityARShadows

空中に立方体と3軸が出てきて、徐々に平面認識を初めて、タッチしたら小人が出てきた。一応小人から床に影が落ちる(こともある)。

f:id:bibinbaleo:20170920104128p:plainf:id:bibinbaleo:20170920095411p:plain

予想以上に平面をちゃんと認識して、ズレとかもなくてびっくりしました。Tangoを初めて使った時の感動に似ている。

UnityParticlePainter

ペイントというか画面の真ん中にパーティクルを発生させている。端末の近くに発生するのですごく書きにくいけど、ぶれたりはしない。

右上のoffボタンを押すと、色を選ぶ画面になって、Pickを押すと描画開始。

f:id:bibinbaleo:20170920104426p:plain

UnityARBallz

右上のMakeボタンでボールを表示させて、Break時にボールを触ると転がっていく。

最初青い枠が全然出なくて、遊べなかった。青い枠の挙動はいまいちよく分からない。

f:id:bibinbaleo:20170920104224p:plain

UnityAROcclusion

オクルージョンできるの!?と思ったけどうまくいきませんでした。ARshadowsと同じように小人が出るだけなんだけど、私が間違っているのか?

f:id:bibinbaleo:20170920110157p:plain

まさか物体同士がってことではないよね〜

tangoでも未だにオクルージョンできたことないし、私はオクルージョンができない星に生まれたのか

一般のアプリ

applestoreにいくつか無料のアプリがあったので遊びました。

Stack AR

積み木を重ねるようなゲーム。

机を認識して、そこにブロックが表示される。

f:id:bibinbaleo:20170920104201p:plain

Stack AR

Stack AR

  • Ketchapp
  • ゲーム
  • 無料

AR Dragon

多分ドラゴンを育てるゲーム 。餌をあげました。

f:id:bibinbaleo:20170920104144p:plain

終わり

次回は自分で設定したオブジェクトを出してみたいと思います。

WatosonをUnity使って会話するやつ

面白そうな記事があったので真似しました。WatosonってUnityで使えるんですね。そして色々な機能がある。

www.ibm.com

流れ

BlueMixに登録する。IBMのアカウント。30日フリーなので始める時期は見極めたほうがいいかも?

console.bluemix.net

unity用のsdkをダウンロードする

github.com

bluemix>カタログ>watosonから必要な機能を作成する。12個ぐらいある。今回はSpeech to TextとText to SpeechとConversationを使う。

f:id:bibinbaleo:20170919201808p:plain

それぞれ最初の〜文字、〜分は無料です、みたいなのがある。まあクレジットカード登録してないからお金が取られることはないと思う。

そこからjsonコードをゲットする。

そしてそれをunityのwatosonダイアログに入れたらその機能が使えるようになる。

f:id:bibinbaleo:20170919201845p:plain

あとは記事にあったスクリプトを書いて、適当なオブジェクトに貼って動かしました!

speech to textは自分の音声を認識して文字にしてくれる。

精度はそこまで良くないのかな?それか自分の声が小さいだけかもしれない。

f:id:bibinbaleo:20170919201841p:plain

ありがとうって言ったのにフォローありがとうになるの笑う。

f:id:bibinbaleo:20170919201837p:plain

text to speechスクリプトで指定した文章を音声が読んでくれました。声は女性の声

f:id:bibinbaleo:20170919202615p:plain

ちなみに記事のスクリプト一箇所だけミスがありました。「.」いらない

f:id:bibinbaleo:20170919201825p:plain

Conversationはあらかじめwebの方で設定が必要です。ある程度質問とそれに対する受け答えを設定しないといけないみたいです。

だんだん学習していくのかな?

f:id:bibinbaleo:20170919202953p:plainf:id:bibinbaleo:20170919202949p:plainf:id:bibinbaleo:20170919202946p:plainf:id:bibinbaleo:20170919201832p:plain

設定したら、そのIDを含めたスクリプトを使うと・・・

f:id:bibinbaleo:20170919201819p:plain

おはよう、と言ったらヤッホーと返してくれました。設定したまんまです。

どんな感じで学習していくのかはよく分からなかったです。そこは自分で調べないといけないですね。

最後に

githubに詳しい説明があるみたいでした。全部英語だったけど

GitHub - watson-developer-cloud/unity-sdk: Unity SDK to use the IBM Watson services.

他にも翻訳機能や声による感情認識、画像認識機能などがあります。せっかく30日間無料?なので資料があったら触ってみたいです。

翻訳機能を使っているものは見つけました。

qiita.com

ユニティちゃんステージ(Candy Rock Star)をいじる

2014年からユニティちゃんページで配布されいるCansy Rock Starの色をいじってモデルをMMDモデルに差し替えてみます。© UTJ/UCL

新たなシーンを作る

ユニティちゃんページからダウンロードして、まず最初にサンプルシーンを実行しました。爆音注意

ダウンロード - UNITY-CHAN!」

実行中にオブジェクトが生成されるタイプ?のやつだったのでサンプルを見ただけでは仕組みとかはよくわかりませんでした。

f:id:bibinbaleo:20170917092126p:plainf:id:bibinbaleo:20170917092118p:plain

そこで新しくシーンを作りUnitychanStage>Prefabsの中身を全部追加しました。

ステージが完成します。

色を変える

stageを一つ一つ見ていって、マテリアルでカラーで変えられるところは変えて、他はフォトショファイルで色味を変更しました。

マテリアルで変えれるのは下の写真の白い部分くらい。

f:id:bibinbaleo:20170917091718p:plain

あとはテクスチャをいじらないといけない。psdファイルを直接読み込めるの初めて知った。

f:id:bibinbaleo:20170917091706p:plain

f:id:bibinbaleo:20170917091758p:plain

ただし床のvisualizerはシェーダーで制御しているっぽいのでいじり方がわかりませんでした。白くしたかった・・・

キャラクター差し替え

©Kizuna_AIモデルを入れて、humanoidにしてアニメーションコントローラーをMocapC86にしたらすぐに動いてくれました。

f:id:bibinbaleo:20170917140701p:plain

髪などがふわふわなるようにMMD4Mechanimでコライダーを設定しました。

bibinbaleo.hatenablog.com

ついでに瞬きスクリプトもつけました。 

ウダサンコウボウ: [Unity]BlendShapeBlink - ブレンドシェイプでまばたき

bibinbaleo.hatenablog.com

 

あとカメラを見てくれるスクリプトもつけましたが、カメラ切り替わるのにずっとガン見してるのは若干ホラーなのでネタですね。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

 

リップシンクもしたかったのですが、やり方がわからなかったです。

ただ、MMDmechanim Speech Helperスクリプトを使えばゆくも!で作った音声ファイルをリップシンクすることはできました。今回は意味ないけど。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

 

あと手のところにsprayという名前のパーティクルがあり、動かすとキラキラが出ます。これも対象モデルにつけました。

f:id:bibinbaleo:20170917130403p:plain

カメラ

Mainカメラを消してもそのままでは動きませんでした。

MainCameraRigの中のMainCameraのScreenOverrayのチェックを外さないと白い画面のまま

f:id:bibinbaleo:20170917093159p:plain

f:id:bibinbaleo:20170917093203p:plain

そしてcamera SwitcherのTargetNameを差し替えモデルの適当な部位の名前にする。胸あたりがいいらしい。

AutoChangeにチェックを入れることでランダムにカメラの位置が切り替わる。

f:id:bibinbaleo:20170917091701p:plain

Back Screen Camera Rigも同様にCameraSwitcherで対象モデルの顔などの部位のな目にする。

なんで名前を直接入力形式なんだろう?ドラッグしたい。

Uniteln The Skyフォルダーの中にMusic Playerが入っているのでそれを追加します。

f:id:bibinbaleo:20170917095642p:plain

そのままでは音がならなかったので、MainのPlay On Awakeにチェックを入れたら開始と同時に曲が始まりました。

f:id:bibinbaleo:20170917100416p:plain

最後に

stage directorスクリプトを使えば全て制御してくれるらしいのですが、使い方がよくわかりませんでした。

破綻していないところを切り集めたものをyoutubeにあげてみました。音と映像が全くあってません。

www.youtube.com

参考

qiita.com

tsubakit1.hateblo.jp

VRコンテンツ開発ガイドを読んだ

 こちらの本で紹介されていた中で知らなかったやつや気になったやつをまとめます。

VRコンテンツ開発ガイド 2017

VRコンテンツ開発ガイド 2017

 

最近発売の本で、unityでの開発だけでなく360度映像やwebVR、またヘッドセットなどハード面にも触れられており、幅広く視点からVRの開発に関することを学べました。

携帯型VRグラス

手軽でいいですね

www.d-wackys.net

ABAL 複数人VR

videosalon.jp

Unity公式VRサンプル

 Viveでは動きません。なんで〜

NewtonVR

VRTK的存在

SteamVR

steamvrの中にもThe Lab的なサンプルがある。でも試したけどヘッドセットと連動しなかった。エラー直せば行けたのかな?

あとデフォルトはルームスケールモードなので設定のTracking Spaceで椅子モードに変更できる。

知らなかった!

Google VR SDK

一回もうまくいったことがないcardboard用SDKの設定方法が書いてあった。unity5.5がいいらしい。そしてMainCameraは消さなくていいらしい。

Unityの設定

リニアカラー、フォワードレンダリングアンチエイリアスX4

Oculus Audio SDK

oculus社からでているけどViveでも使える。リアルな空間の音?

qiita.com

天球モデル

360度映像を投影するのに良い球モデルをこちらで配布されている

No hack, no work • UnityとOculusで360度パノラマ全天周動画を見る方法【無料編】

WebVR環境

WebVR Boilerplate

qiita.com

webで作業できるゲームエンジン

vizor.io

PlayCanvas 3D HTML5 Game Engine

コントローラーモデル

github.com

 aframeのgithubで配っている

f:id:bibinbaleo:20170916140535p:plain

キタキツネ・ギンギツネと温泉宿VRを作る【表情変化機能】

最近VRかまくらを作ったばかりですが、キャベツ鉢さん作の温泉宿が投稿された上に、JAKさんがMMDモデルの表情を変えるVR動画を投稿されていたので、作るしかないと思いキタキツネ第2弾を作ります。

完成がこちらです。

youtu.be

 

基本的にはこちらの動画でされていることを真似て、表情をコントローラーの動作で変えます。

www.nicovideo.jp

また前作で、瞬きがなくて怖いというコメントがあったので瞬き機能も実装します。あと自分がギンギツネになる「憑依?」機能もつけます。

 前作

bibinbaleo.hatenablog.com

お借りするもの

seiga.nicovideo.jp

3d.nicovideo.jp

3d.nicovideo.jp

表情を変える

表情は、実行中にMorphに種類が表示されバーを動かすと変わります。私の環境では実行中しかバー表示されませんでした。

f:id:bibinbaleo:20170909211659p:plain

そして実行中にバーを変えると表情が変わります。

f:id:bibinbaleo:20170909211654p:plainf:id:bibinbaleo:20170909211645p:plainf:id:bibinbaleo:20170909212123p:plain

スクリプトで設定するにはMMD4 Moroh Helperスクリプトを使って、名前を指定して、weightにスライダーの値を入れておけば、その表情になります。

f:id:bibinbaleo:20170909211640p:plain

コントローラータッチで振動

コントローラーにInteractUse(ボタンが使える)とInteractTouch(触れる)をつける。そしてモデルにInteractableObjectとInteractHaptics(振動)をつける。

f:id:bibinbaleo:20170909214143p:plain

IntaractableObjectのIs Usableにチェック。

f:id:bibinbaleo:20170909213305p:plain

振動はstrengthの大きさを変えておく。

f:id:bibinbaleo:20170909213311p:plain

またrigidbodyとcolliderも必要。

コントローラーで表情を変化

「using VRTK;」で色々な関数が使えるようになっていました。

動画内で紹介していただいてたスクリプトを真似たら無事にできたので詳しいことは省略。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

近づいたら目を閉じて、触ったらえーっていう顔をして、トリガーでニコってします。

瞬き

こちらのスクリプトをお借りしました。

udasankoubou.blogspot.jp

Sizeに設定する個数を入れて、Skinned Mesh Renderにそのキャラの顔の部分のMeshを入れて、Indexにモーフの番号を入れたら瞬きしてくれました!

f:id:bibinbaleo:20170912213941p:plain

何番が瞬きかわからなかったのですが、数字を入れたら名前を表示してくれるので1番から順に入れていきました。

 

ちなみにユニティちゃんにはデフォルトで瞬きスクリプトがあるようだが、プロ生ちゃんやクエリちゃんは目などの作りが違うらしく、スクリプトを書き換える必要があるらしい。

onoty3d.hatenablog.com

fantom1x.blog130.fc2.com

憑依

自分がギンギツネちゃんになりました。まだ未完成なので詳しくは別記事で書きますが、以前使ったIKスクリプトでギンギツネの手の位置をコントローラーの位置にして、体の位置をヘッドセットの位置にしたらとりあえずは憑依できました。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

本当はキャラクターの頭の位置にヘッドセットをつけないといけないのですが、よくわからなかったのでVRTK内のヘッドセットの少し下に空のゲームオブジェクトをつけ、それをbodyにつけました。(意味不明) 

そのため頭を傾けると体ごと回転してしまいます。足元も見れない。

FinalIKという有料アセットを使ったらもう少し自然にできるらしいので、そこらへんも別記事でやりたい。

f:id:bibinbaleo:20170913191659p:plain

サムネ用

 

MagicVoxelを使って、うちの子を作ってUnityで動かした

マイクラみたいなボクセルでモデイングできるソフト

ephtracy.github.io

このソフトを使って、こちらの記事を真似して、うちの子を作ってボーンを入れてUnityで動かすっていうのをやりたいと思います。

github.dev7.jp

ついに念願のうちの子が作れるかもしれない!

開く

アプリを開いたら真っ黒で画面が出ません。HPに

「If you get black screen on macOS Sierra, try this:
extract the whole folder
move "MagicaVoxel-mac.app" outside the folder and back to it again」

と書いてあったので、アプリだけをフォルダーの外に出して、また戻したら表示されました。

f:id:bibinbaleo:20170911103440p:plain

この四角の範囲内でモデリングできるようです。

f:id:bibinbaleo:20170911103430p:plain

影が綺麗ですね。

Brudhの種類をV(voxel)にしてAttachで生成、Eraseで消せます。

f:id:bibinbaleo:20170911103650p:plain

大きさはVoxで値を変えます。

f:id:bibinbaleo:20170911103646p:plain

ここの設定をsphereとか2Dにしたら平面や球も作れました。

f:id:bibinbaleo:20170911103936p:plain

レイヤー的なものもありますね。

f:id:bibinbaleo:20170911103932p:plain

素体を開く

先ほどの記事でリンクが貼られていた素体を開きます。File>Openから.voxファイルを開けば開きました。

すごい!可愛い。勝手に使っても大丈夫なのでしょうか?

f:id:bibinbaleo:20170911104443p:plain

とりあえずぽちぽちしていきます。

f:id:bibinbaleo:20170911105701p:plain

この矢印マーク「>」を押したら色が一斉に変わりました。

f:id:bibinbaleo:20170911105708p:plain

f:id:bibinbaleo:20170911105705p:plain

真ん中のーは同じ色のブロックが全部消え、<は色のスポイト機能でした。

そんなこんなでできました。

f:id:bibinbaleo:20170911111401p:plain

これをobjで書き出します。

blenderでボーン入れ

素体を開きモデルを読み込み位置を合わせました。あとボーンを選んでポーズモードにして、頭のボーンを身長に合わせました。

f:id:bibinbaleo:20170911112730p:plain

重複頂点を消さないといけないらしい。メッシュを選択した状態でWキーで重複頂点を消去を選びました。また細分化もしました。

f:id:bibinbaleo:20170911112905p:plain

これであっているかよくわかりません。blender詳しくない。

 

あとは親子関係にしたら良さそう。

メッシュ、ボーンの順で選んで、オブジェクト>親>自動のウェイトでにしたら

f:id:bibinbaleo:20170911114256p:plain

アレント対象も自動のウェイトでにしました。

f:id:bibinbaleo:20170911115849p:plain

するとボーンの中にメッシュが入っています。

この状態でポーズモードにしてボーンを動かすと・・・

f:id:bibinbaleo:20170911115648p:plain

おおー!メッシュがついてきました!感動!!!

実はここまで何回か失敗してたので本当に感動しました。

あとはfbxで書き出します。

Unityに取り込む

 入れたらテクスチャが入ってませんでした。

f:id:bibinbaleo:20170911121028p:plain

blenderの設定のせいだと思いますが、テクスチャファイルはvoxelを書き出したフォルダに入っているので、それを直接unityに入れて、マテリアルにセットしたらちゃんと表示されます。

f:id:bibinbaleo:20170911121024p:plain

あとはhumanoidにしてアニメーターを入れたら・・・

f:id:bibinbaleo:20170911121430p:plain

ウェーイ!!

ちなみにポーズはmayaで自作したやつです。

bibinbaleo.hatenablog.com

最後に

見た目がボクセルでしかも素体とかボーンを借りたとはいえ、初めて自分の子を作れて、動かせて感動しました。

今回の経験をもとに、そのうちアニメキャラ風のイケメンうちの子を作りたいです。