トマシープが学ぶ

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

Web AR on Tango&ARtoolkit

 前回マーカーありwebARをA-frameでやりました。

bibinbaleo.hatenablog.com

今回はマーカーなし系をやります。

WebAR on ARkit

このgithubから、WebARonARkitまるまるダウンロードして、Xcodeでビルドします。

github.com

BundleIDをオリジナルにしないとエラーが出るので適当に名前を付け加えました。

そうしてiPadにアプリを入れた状態で、こちらの記事のリンクを開くとサンプルが遊べます。

Getting Started with AR on the Web  |  ARCore  |  Google Developers

 

A-frameでTango with glitch

tks-yoshinaga.hatenablog.com

マーカーありをしたときよりも簡単にできました。

あらかじめTangoのwebarのapkを端末に入れておきます。

github.com

ここにapkダウンロードできるところがあるので、このページを実機で開いてインストールしました。

そしてコード書いてどっかのサーバーに上げて、WebSRonTangoアプリを開いて、urlを入れるだけで実行できました。

f:id:bibinbaleo:20171210204556p:plainf:id:bibinbaleo:20171210204550p:plain

最初オブジェクトが画面に張り付いて、ARできなかったのですが、やり直したらできました。

前回はglitchでhttpsができるかわからなかったのでBItBalloonを使いましたが、glitchで余裕でできました><

f:id:bibinbaleo:20171210204740p:plain

objなどを入れるには左側のasstsを押してドラッグして、クリックしたらurlが発行されます。

f:id:bibinbaleo:20171210205044p:plain

f:id:bibinbaleo:20171210205047p:plain

それをこんな感じで組み込んだら表示されるはず

f:id:bibinbaleo:20171210211231p:plain

と思いきやpng(テクスチャ)が見つかりませんと言われたので、

f:id:bibinbaleo:20171210212858p:plain

こちらを参考にmtlをエディタで開いてurlをglitchのpngのurlに書き換えてみました。

vr-lab.voyagegroup.com

f:id:bibinbaleo:20171210212206p:plain

できました。

f:id:bibinbaleo:20171210212901p:plain

urlをアーダーコーダするのがめんどくさいなら、bitballoonでフォルダごとアップロードする方が楽だと思います。

組み込みwebAR

本当にやりたかったのは記事に組み込めるwebARであるWebAR-Articleです。

jyuko49.hatenablog.com

 

github.com

ここに書いてある通りにMacにコンソールでダウンロードして

git clone git@github.com:google-ar/webar-article.git article && cd article && npm install

npmを実行したらいいのですが

npm run dev

めっちゃエラー出ました。

f:id:bibinbaleo:20171207213537p:plain

ググったら一応解決策書いたるんですがうまく行きませんでした!!

コンソール嫌い

 

うまく行ったらローカルサーバー?が立ち上げられて、そこで

http://localhost:8000/public/

にアクセスしたら記事を見れるらしい。

そしてスマホで見るにはArkitやArcore、Tangoのwebarのapkも入れた状態で、同じネットワーク上(無線LAN)でさっきの記事を見たらARできる埋め込みが実行できる・・・・

ああ〜ん

石膏像にInk Painterでペイントする【Unity】

私には石膏像にインクでペイントしたいという欲望があります。

ボディペイント的なのってエロくないですか?

Unity+VRならできる!

モデル

モデルはこちらのミロのビーナスを使わせていただきます。

3dwarehouse.sketchup.com

poly.google.com

インク

色を塗るアセットといえばInkPainter

 

bibinbaleo.hatenablog.com

 またこちらのアセットもめっちゃ良さそうです。

www.youtube.com

流れ

UVmap展開

まずblenderなどでモデルのUVmapを展開しておかないとうまく塗れません。

展開はこちらを参考に

Blender入門#28:UVマッピング – CGrad Project

基本的にはEditモードにしてUを押してunwrapです。もしくはunwrapの下のを押したらできました。

f:id:bibinbaleo:20171209235626p:plain

おんなじアテリアルを適用していても、右側の展開していない方はのっぺりしてしまいます。

f:id:bibinbaleo:20171209235622p:plain

UV展開していないとInkPainterで塗ると一回で塗り潰れてしまいます。

f:id:bibinbaleo:20171209235632p:plain

Ink Painter設定

あとはサンプルシーンから色々パクったらできました。

f:id:bibinbaleo:20171210000657p:plain

まずカメラにはこの二つをつけて、(多分下のやつだけでいい)ここで色とかブラシの形を変えれます。

f:id:bibinbaleo:20171210101056p:plain

そしてペイントされる側にはMesh ColliderとInk CanvasAlbedoに何かしらのテクスチャをつけたマテリアルをセットします。

f:id:bibinbaleo:20171210101101p:plain

なぜか自分の作ったカメラでは動かなくて、サンプルシーンから持ってきたやつでしか表示されないです・・・

あとGameビューが真っ暗になる。

f:id:bibinbaleo:20171210102128p:plain

接触で塗る

コリジョンが当たったところで塗るというサンプルはあったので、ブラシでも簡単にできるかと思ったらできませんでした。

基本的にはこライダーとCollision Painterスクリプトをつけたらいいはず。

f:id:bibinbaleo:20171210145115p:plain

床とかはこれで簡単に塗れました。

f:id:bibinbaleo:20171210145803p:plain

少し汚いですが石膏像も一応塗れます。ただしマウスでやるときよりは安定しない

f:id:bibinbaleo:20171210145759p:plain

これでブラシモデルの先にbox colliderをつけたらできるかと思いきや全然塗れませんで医者。

f:id:bibinbaleo:20171210145119p:plain

じゃあ子オブジェクトに球をつけたらいけるかと思いましたが、これも反応せず

f:id:bibinbaleo:20171210145112p:plain

どうしたらいいんでしょうね・・・

垂れる(ハイマップ)

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

Canvasの方にはHeight Fluidをつけて、Ink CancasのUse HeightMap Paintにチェックをつけて

f:id:bibinbaleo:20171210163859p:plain

マテリアルのHeightにも何か設定して置く

f:id:bibinbaleo:20171210164259p:plain

 

カメラなどのPainterにHeight Textureをつけて、あとrush TextureにはDefault-Particleにする。Height Blendを0より大きくする。

f:id:bibinbaleo:20171210163906p:plain

f:id:bibinbaleo:20171210163910p:plain

できました!

f:id:bibinbaleo:20171210164452p:plain

今後の展望

Vive trackerを使ってユーザーは実際にブラシを持って、発泡スチロールの胸像を用意して、位置合わせをして、触覚フィードバックもする。

石膏像 K?160 ミロ島ヴィーナス胸像(丸) H.60cm

石膏像 K?160 ミロ島ヴィーナス胸像(丸) H.60cm

 

 それにしても本当にミロのビーナスって美しいですよね・・・惚れ惚れする。

Google Cloud Speech Recognitionアセットを使えない><

音声認識アセット

Google Cloud Speech Recognition [VR\AR\Mobile\Desktop]買いました。

私が買った時はセールで15ドルでした。

まず使うにはAPIkeyを取得しないといけません。

ここから色々登録してAPIkeyをゲットします。

cloud.google.com

クレジットカードの登録が必要なのでビビりましたが、勝手に請求されることはないって書いてありました。

なんとかゲットしたらサンプルシーンの中にあるGCSpeechRecognitionの中のApikeyに入力します。

f:id:bibinbaleo:20171209114438p:plain

これで実行してjpを選んでStart Recordを押して喋ると・・・

f:id:bibinbaleo:20171209114654p:plain

・・・動きませんでした。

f:id:bibinbaleo:20171209114650p:plain

ググったらこちらのフォーラムに同じ質問があったんですが、答えを見てもよくわからない。

https://groups.google.com/forum/#!topic/cloud-speech-discuss/cRegEvAZ8Jw

APIkeyを使うときにコマンドで何かしないといけないのか???

わからない。

成功したらこんな感じで動くらしい。

www.youtube.com

一応jsonのファイルとかダウンロードはして見たけど何も変わらない。そもそもどこに置くのか??

magicbullet.hatenablog.jp

https://cloud.google.com/speech/docs/getting-started

qiita.com

最後に

このアセットを使った解説記事を書いている人が誰もいない。

またこのアセット自体はGoogle APIを介するだけのアセットで、音声認識本体はGoogleがやっているっぽい???

わからん何も

 

クリエイターのための「note」使ってみる

note

クリエイターがお金を稼ぐことができるノート

note.mu

twitterで回ってきたこちらの記事を見てこのサービスを知りました。

t.co

使う

f:id:bibinbaleo:20171209001806p:plain

ノートの種類は5種類あるみたい。

テキスト

テキストはブログ記事みたいな感じ。ツイートとか画像を埋め込める。

note.mu

f:id:bibinbaleo:20171209001833p:plain

公開設定では無料有料を選べます。

f:id:bibinbaleo:20171209002520p:plain

有料にしたらどこから有料にするかを設定できます。

f:id:bibinbaleo:20171209002821p:plain

記事の一番最後にラインを設定して、記事への投げ銭的な使い方をしている人も見るようです。

f:id:bibinbaleo:20171209002816p:plain

ただそもそもクリエイターに投げ銭することはできるので、この使い方はどうなんでしょうね・・・

f:id:bibinbaleo:20171209002948p:plain

f:id:bibinbaleo:20171209004333p:plain

イメージ

イメージは純粋に写真だけ。文字はハッシュタグ以外打てない

f:id:bibinbaleo:20171209002507p:plain

note.mut

トーク

あとはツイートのように140文字だけ呟けるトークと、

f:id:bibinbaleo:20171209124429p:plain

サウンド

mp3をアップロードできるサウンドと

note.mu

ムービー

youtube動画をあげられるムービーでした。

f:id:bibinbaleo:20171209124421p:plain

note.mu

最後に

みてくれるユーザー数がどれくらいいるんでしょうね?

写真にはひとついいねがつきました。

参考

www.huffingtonpost.jp

lifehacking.jp

blog.haiji.co

Dropbox Paper使う

就活が本格的に始まり、企業メモをネット上でしたいな〜と思いました。Evernoteでもいいんですが、リンクを貼った時にはてなブログみたいにサムネを表示してくれないし、リンクから飛ぶ時に一回確認が挟まってすごくイライラします。

そこで他のサービスを探しました。

Dropbox Paper

大学の先生が授業用の資料に使っていたりして、存在は元から知っていたのですが、なぜか有料と思い込んでいて使っていませんでした。

今見たら全然有料じゃなかった。

paper.dropbox.com

さ〜てリンクはいい感じに貼れるかな?

f:id:bibinbaleo:20171208112656p:plain

貼れませんでした。あれ〜貼れなかったっけ。そうか

 

一応ブレインストーミングテンプレでメルカリARのアイデア出しをやって見ました。

f:id:bibinbaleo:20171208112417p:plain

テンプレはこんな感じ

f:id:bibinbaleo:20171208112410p:plain

コンテンツを追加していくには左側の+を押していく感じです。

f:id:bibinbaleo:20171208112406p:plain

最終的にこんな感じになりました

f:id:bibinbaleo:20171208113743p:plain

 

 

最後に

結構使いやすいと思います。

ただチーム作業用に作られているので、個人でメモを作るだけなら別のサービスでも村内問題なさそう。

ちなみに下の記事を最近読んだのですが、Paperの目指しているところがすごくわかりやすかったです。

note.mu

 

いや〜それにしてもポートフォリオとか企業メモとかどこで作ろう・・・

はてなブログのエディタになれたら他のどのサービスも物足りなかったり使いにくい・・・

でもはてブロはやっぱりブログだから、ポートフォリオとかいうめっちゃフォーマル?なものや、企業メモという公開しないものにも少し向いていない。

新しいサービスを作ってもらえるように要望してみます。

追記:送りました。

いつもお世話になっております。
新しいサービス要望が2つあります。
ポートフォリオサイト
一つ目ははポートフォリオサイトを作って欲しいというものです。
はてなブログのエディタを普段使っていると、他のポートフォリオサイト(vivivitやwixなど)の動画の貼りにくさや、リンクのサムネが表示されないなどが物足りなくなってしまいます。なのではてなブログを少し変えた形のポートフォリオサイトがあると嬉しいです。

・自分用ノート
Evernoteのようなノートサービスも欲しいです。今のままのはてなブログエディタで、公開せずに簡単に保存・編集・閲覧ができるような機能があると嬉しいです。

あと既存のはてなブログのサービス要望としては、コメント返信機能と記事の限定公開機能をつけて欲しいです。
はてなブログの素晴らしい機能とデザインには本当に感謝しております。
ご検討よろしくお願いします。

無料会員のくせにめっちゃ生意気だな〜と思いながら・・・まあいつか働き始めたら有料にするかもしれないしね 

言葉を可視化して戦うVRを作る【準備・構想】

音声認識で言葉を可視化して、言葉で戦うVRを作ることになりました。

元ネタ

私がこのネタを思いついたのはおそ松さん2期の言葉のブーメランでした。

f:id:bibinbaleo:20171207221928p:plain

f:id:bibinbaleo:20171207221924p:plain

自分の言葉がブーメランになって刺さる

f:id:bibinbaleo:20171207221919p:plain

しかし、すでにHololensでされている方がいました。

https://atl-hiroo.recruit-tech.co.jp/showcase/archives/474

m2wasabi.hatenablog.com

github.com

またそもそもドラえもんコエカタマリンというひみつ道具がありました。

f:id:bibinbaleo:20171207222129j:plain

実装流れ

音声認識

まず音声認識は昔使ったwatosonを使おうかな

bibinbaleo.hatenablog.com

Speech to textを使えば言葉をテキストデータにできる。

 もしくはこの有料アセット

magicbullet.hatenablog.jp

ビジュアル化

 そしてビジュアライズはCharacter Particleというアセットが良さそう。

bibinbaleo.hatenablog.com

確かパーティクルってコライダーつけれるはず

gametukurikata.com

コライダーはチェックボックスをつけるだけで簡単にできた。

f:id:bibinbaleo:20171208140910p:plain

RenderをMeshのQuadにして

f:id:bibinbaleo:20171208141141p:plain

Collisionにチェックを入れてTypeをWorldにする。

f:id:bibinbaleo:20171208141145p:plain

ただ思ったようなパーティクルを出せない><

 Textに入れた1フレーズだけを一回だけ表示したいけど、わからないEmissionをやればいいと思うけど・・・

f:id:bibinbaleo:20171208141800p:plainf:id:bibinbaleo:20171208141822p:plain

あと文字を立体にするのは難しそう

と思ったら別のアセットで立体があった。日本語も扱えてるしこれでもいいかも

qiita.com

やってみないとわからないけど、一つの言葉くくりで当たり判定するの難しそう。

あと声の大きさによって文字の大きさを変えるとか

tips.hecomi.com

最後に

グループで作るのですが、私本当は別の案押しだった。

基本的に音声認識嫌いだし(喋るのが嫌だし、認識してくれないから)、ゲームもそんなに好きじゃないので乗り気じゃない

あとUnity技術レベルが自分とおんなじくらいの人がもう一人いるだけだから難しいこと乗り越えられるか不安。

twitterとかteratailで聞くしかない

それよりメルカリどうしよう

Vive Trackerを使う。

Vive Tracker

1万2500円するViveのセンサーです。

www.vive.com

Viveのコントローラーみたいな感じで位置と向きが取れるはず。

バットなどに取り付けて本物のバッドを振ると、VRの中のバッドもふれる・・・みたいなのが作れます。

www.hmv.co.jp

案だし

何につけたら面白いかな〜と考えます。すでにあるものも含めて

・バッド(野球!以前作ったから)

・人形、クッション(ふわふわ)

・カメラ(公式HPで推してた)

・キーボード(パソコンのキーボードの位置がわかる)

・カップラーメン(目の前にあったから)

とりあえずバット

Unityで使う

認識させるにはドングルっていうやつをusbでパソコンにつないで

f:id:bibinbaleo:20171207143329p:plain

本体の電源入れて

f:id:bibinbaleo:20171207143337p:plain

はい。結構簡単でした。

f:id:bibinbaleo:20171207143343p:plain

Unityで表示させるのはこちらのサイトを参考に・・・

cycling.hateblo.jp

基本的にはコントローラーのプレハブを複製して、CameraRigのSteamVR_ControllerManagerにセットするだけ。

SteamVR_TrackedObjectというスクリプトがついているものがトラッキングされる。

オリジナルのオブジェクトを表示するにはその複製したプレハブの子オブジェクトにしたら良いです。

f:id:bibinbaleo:20171207142928p:plain

バットがトラッカーに連動して動くようになりました。

ただここまで来るのに何回も失敗してます。

表示されなかったり、トラッキングされなかったり・・・

コントローラーともすごく関連しているみたいだし

バットに直接スクリプトをつけたらめっちゃ上の方に表示されたり

トラッカーをものにつける

ただトラッカーをものにつけるには別の付属品を買うか、自作したりする必要がありそうです。

三脚の雲台に直接つける事はできるので、身近な雲台で何か考えるのもいいかも

f:id:bibinbaleo:20171207143355p:plain

アンテナみたいになった・・・

f:id:bibinbaleo:20171207143351p:plain

最初から長さが調整できるゴムバンドみたいなの付属してくれてもいいのに・・・

www.gamebusiness.jp

手足につけるものが15ドルぐらいで売っていました。

TrackStrap™rebuffreality.com

こちらの方がデータを公開されているので3Dプリンタで印刷・・・

www.thingiverse.com

写真はこちらで見れます。

teruaki-tsubokura.com

足につけるのはクロックスみたいなスリッパにタイラップというやつで止めているようです。結束バンドとか良さそう。

panora.tokyo

またビールのそこにつけているかたもいた。

両面テープかな 

pafuhana1213.hatenablog.com

あと昨日ガンシューターが発売されたらしい。

ascii.jp

またそのうちラケットもでるそう。

ascii.jp

キーボードも

www.gamespark.jp

いろいろある