トマシープが学ぶ

Mac/Unity/AR好きのミーハー初心者

展示にARを使いたかった。

3DプリンターやCNCなどで書き出した作品を展示する展示会があるのですが、せっかくなので元の3DデータをARで表示したいな〜と思って模索中です。

追記:結局しませんでした。

Unityに取り込む

とりあえずSTLSVGをfbxにしてUnityに取り込むところまではできました。

bibinbaleo.hatenablog.com

 f:id:bibinbaleo:20170710114422p:plain

無駄にライティングした。

AR何使おう?

最初はTangoでマーカーレス!と思ってたのですが、買ったばかりの端末を人のいない展示場に置くのは怖いし、出したい場所にCGを出すにはどうしたらいいのかもわからないので、今回は慣れているVuforiaでマーカーありにします。

Vuforiaならどの端末でも大体動くので、使っていないiPadで大きな画面表示もできますし、最悪パソコン+webカメラでもいいですし。

回転動作

ただ表示するだけなら簡単なので、ドラッグしたらCGがくるくる回って全体が見える感じにしたい。

qiita.com

こちらの記事のコードをそのまま貼り付けたら、普通のカメラではちゃんと回りましたが、ARだとダメでした。ARcameraはちゃんと取得できているので他の座標変換とかができていないのでしょうか?

ちなみにカメラの切り替えとかはここを参考に見ました。

qiita.com

ううーんでもARって動いているカメラと、そのwebカメラからの現実の風景を重ねているだけじゃないのかな?あっでもオブジェクトも一緒に動いているっけ?

ユニティちゃんARとかTangoの恐竜アプリでもくるくる回せる奴あったからあんな感じにしたいんだけどな〜

結局断念。

マテリアルとかライト

f:id:bibinbaleo:20170714103919p:plain

色々苦労してこんな感じになりました。

bibinbaleo.hatenablog.com

得意のskyboxによるIBLをやりたいので、あらかじめ展示場所の全天周画像を取ってきました。でも材質のせいなのかあまりライティングの効果は感じられない。

設置環境

ARを表示する端末の設置環境を考えねば。多分冷房がないので、端末が熱くなりそう。またスマホでする場合、どうやって固定させて置くか。三脚的なもので場所は固定させておきたい。

追記:現場がくそ汚かったので、AR展示はしないことにしました。

AR以外

イラレで作って、100均一で買ったパネルに貼り付けていました。

f:id:bibinbaleo:20170714104243j:plain

認識してくれるマーカーを作るのが大変でした。丸二日かかりました。

本番

結局AR展示はしなかったのですが、講評会の時にみんなに一瞬見せました。結構ウケは良かったです。

f:id:bibinbaleo:20170720223536p:plain

あと、講評会後にAR興味あるんですって話しかけてくれた方がいて嬉しかったです。Vuforiaの存在を教えました。この努力は無駄ではなかった。

Makey Makey+AR

Makey Makey

電気が通るものならなんでもキーボードにしてしまうやつです。

www.makeymakey.com

本体はこれ↓

f:id:bibinbaleo:20170716150141p:plain

パソコンに本体をつないで、ミノムシクリップを自分の体と、バナナなどの電気が通るものに通して、話ができたらキーボードが押したことになる。

f:id:bibinbaleo:20170716150630p:plain

昔展示で使った時はこんな感じになりました。

f:id:bibinbaleo:20170716150314p:plain

小麦粘土も電気が通るのでこれをボタンにしたりできます。

f:id:bibinbaleo:20170716150307p:plain

汚い

 

Makey Makey - An Invention Kit for Everyone - 電子工学 実験 発明キット

Makey Makey - An Invention Kit for Everyone - 電子工学 実験 発明キット

 

AR

2年前ぐらいに買って、展示で使って以来全く使ってませんでしたが、久しぶりに遊びたくなりました。

以前使った時はProcessingでやりましたが、今回はUnityで何かしたいな〜

shiropen.com

この記事みたいな感じで、ARマーカーにタッチしたら色とかライティングが変わるとか面白そう。って言うか記事のやつって深度センサーで物体の形をとっているらしいからTango使ったらできるのかな?kinectでやってるみたいですが。

Unity

ARちかmakeymakeyを使うので複雑に見えますが、やることは単純にキー入力でマテリアルの色を変えるだけです。

docs.unity3d.com

docs.unity3d.com

ここら辺を組み合わせて、スペースを押したら色がランダムで変わるやつができました。

f:id:bibinbaleo:20170716160848p:plain

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class material_change : MonoBehaviour {

    public Color colorStart = Color.red;
    public Color colorEnd = Color.green;
    public float duration = 1.0F;
    public Renderer rend;
    void Start() {
        rend = GetComponent<Renderer>();
    }
    void Update() {
        if (Input.GetKeyDown (KeyCode.Space)) {
            
            float lerp = Mathf.PingPong (Time.time, duration) / duration;
            rend.material.color = Color.Lerp (colorStart, colorEnd, lerp);
        }
    }
}

 

makey+ARマーカー

電気が通ってマーカーにもなりそうなものがなかったので、マーカーとボタンは別々にしました。

makey makeyのスペースのところにさして、

f:id:bibinbaleo:20170716164727j:plain

完成がこちら

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

f:id:bibinbaleo:20170716165030p:plain

最後に

makeymakey自体は単純ですが、組み合わせを考えたら色々面白いことができそうです。何も思いつきませんが。

 

追記:MMDモデルのマテリアルを変えるっていうのをしようと思ったのですが、指定したマテリアルを変えることができませんでした。

ここからの話は意味不明だと思います。未来の自分への備忘録です。

f:id:bibinbaleo:20170716194135p:plain

 一つのオブジェクトに複数のマテリアルがついていて、スクリプトをつけたらそのうちの一つしか色変更されない。

インスペクタでマテリアルを指定して、そのマテリアルの色を変更するのってどうやるんでしょうね。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ginkitune : MonoBehaviour {
    //public Material material;
    public Color color1 = Color.red;
    public Color color2 = Color.green;
    public float duration = 1.0F;
    public Renderer[] rend;
    void Start() {
        //rend[0] = GetComponent<Renderer>();
        //rend[1] = GetComponent<Renderer>();
    }
    void Update() {
        //color1 = GetComponent<Color>();
        if (Input.GetKeyDown (KeyCode.Space)) {

            //float lerp = Mathf.PingPong (Time.time, duration) / duration;
            rend[0].material.color=color1;
            rend[1].material.color=color2;
            //rend.material.color = (colorkami);
        }
    }
}

Rend(gameobject?)を指定することで別々のオブジェクトなら一つのスクリプトで色を変えることができるのですが

f:id:bibinbaleo:20170716194807p:plain

MMDmecanimで変換されたFBXの構造の問題ですかね?

「rend.material.color=color1」のmaterialって指定するものではなく普遍的?な存在???だからここに指定したやつをつけても意味がなかった。

キタキツネをぎんぎつねに変えたかっただけなのに

モデルはヘナ羊様のキタキツネアニメ版です。かわいい

3d.nicovideo.jp

はてなブログの自分の記事を一覧表示できる機能はないのか?

サイトマップとか人物相関図的な、全ての記事を内容に分類して一望できるような機能ってないのかなと思って調べました。結論から言うと私が思っていたようなのはなかったです。(多分)

理想

Inoreaderと言うフィードサイトで自分のブログを見るとこんな感じで一覧表示されます。

f:id:bibinbaleo:20170715221257p:plain

他にもこんな表示もできます。

f:id:bibinbaleo:20170715221305p:plain

これでもまだ一つ一つがでかいし、近い内容やタグで表示位置を分類するようなのが理想です。

ビジュアル的には共起ネットワーク的な感じかな?サイトマップとか人物相関図とか?流動的に動くやつ?

近いもの

www.yellowpadblog.com

記事一覧ページってあったんですね。ブログの最後に/archiveをつけると表示されました。

bibinbaleo.hatenablog.com

Proではこれをトップページにできるそうです。

むにゃむにゃ

一つのタグでも大量の記事を書いている人のブログだと目的のものをなかなか探すのが大変なので、一つ一つを小さく、でもサムネ付きで分かりやすく表示って言うデザインがあったら理想だな〜と。

電動義手Hackberryについて調べた

HACKberry

株式会社exiiiが開発した「電動義手のデータや作り方を公開しているので3Dプリンターとかを使って、自分で安価に電動義手を作れるよっていうプロダクト」です。

HACKberry Open source community

2015年のグッドデザイン賞を取っていたので少し話題になりました(多分)

電動義手は高いし、日本では全然普及が進んでいないのですが、それに風穴を開けるかもしれないっていう存在です。HACKberryは電動義手の中でも、筋肉を流れる電気信号を読み取ってモーターで手先を動かす「筋電義手」という種類の義手です。

globe.asahi.com

発売はしていませんが、一時期電子部品や基盤のセットを数量限定販売していたようです。今は終了していますが。

Exiii - ///HACKberry製作キットを数量限定にて販売します... | Facebook

動画 

この動画がわかりやすかったです。これはHandiiiというHackberryの前のやつ。

www.youtube.com

 5:24らへんに実際に腕がない方がつけている様子がありました。腕の形は一人一人違うのでどうやっているんだろうと思っていたのですが、(おそらくですが)筋電位はコード付きのセンサーで拾って、腕の部分は、はめるというより挟んで固定する感じなのかな?

あと10万20万ぐらいで売れるようになりたいって言ってたのは少し驚きでした。オープンソースにしたのはあくまで開発者向けにコミュニティや知識を広げるためって感じなのかな?

データ

Hackberryのデータはこの下のgithubにあります。

github.com

f:id:bibinbaleo:20170714182502p:plain

githubで3Dモデル見れるんだ・・・

現在

Hackberryの開発は現在Mission ARM JapanというNPO法人に移ったそうです。

www.mission-arm.jp

元のexiiiの社長さんがこっちに移動して、exiiiは別の方が社長になって現在VRの触覚デバイス「EXOS」を開発しています。

www.moguravr.com

 これも面白そう!

実際に組み立てた人

朝日新聞のかたが実際に作り上げたレポ。テレビでも放送していたらしい。私は見ていないけど。

globe.asahi.com

こちらは同好会?での組み立てレポートです。

po3ddd.seesaa.net

fablabsetagaya.com

記事を少し見るだけでも簡単ではないことはわかります。

特にはんだごてとか電子基板3Dプリンターなど使ったことがない人には、まずそこから勉強しないといけない。データや説明があっても、理解していないと、うまくいかなかった時にどこが間違っていたのかがわからないから。こういう、ものづくりで一発でうまくいくことなんてないでしょうし。

記事

調べる際に色々見た記事をせっかくなので貼っておきます。どういう思い出作ったのかがわかっていいですね!

www.itmedia.co.jp

greenz.jp

careerhack.en-japan.com

soar-world.com

awai.jp.net

matome.naver.jp

義手をメガネのようにファッションとして自分の好きなデザインのものを身につけられるようにしたい、というのが分かりやすいかったです。

どこかで聞いた話ですが、視力が低い人はメガネやコンタクトがなかったら生活に支障が出る障害者です。目が悪い人を障害者じゃ無くさせているのはメガネのおかげ。今やメガネは伊達メガネのようにファッションアイテムになっている。電動義手もそのような存在になりたい。ということでしょう。 

最後に

私の親戚も腕がないのですが、義手つけてません。昔は持っていたのですが小さくなってつけれなくなって・・・そもそもあんまりつけてなかったけど。

電動義手なんて全く身近ではなかったのですが、Hackberryとかでが出てきたのと、私がAruduinoとか3Dプリンターとかに少し触れる機会があったことで若干身近になりましたね。まあ本人が興味ないとあんまり意味ないですけど。

私は情報や流れを見守るだけですね。実際作れと言われても私一人じゃ絶対無理だし。ただ別の研究室の人がHackberry作っているらしいので環境的には不可能ではないのですが。

本物見てみたいですね・・・。北九州でグッドデザイン賞展があったときは本物あるかなって思って見に行ったけどパネルだけでした。

追記:その後聞いたところ例の本人はロボットみたいなやつより本物の手に近い見た目の筋電義手がいいとのことでした。まあそうでしょうね。

 

追記:その他の電動義手

他のやつも調べてみました。

人工知能筋電義手

電通大の方が研究開発されている筋電義手

www.mugendai-web.jp

名前をつけたら調べやすいのですが・・・今はまだ製品ではないけどそのうちということでしょう。

オットーボック

ドイツの会社。最王手。ここによる寡占が続いて競争が起きていなかったらしい。

www.ottobock.co.jp

Openbionics

イギリスの会社。アニメに出てくる手をつけられる。

www.openbionics.com

wired.jp

ニコニコ

ニコニコ動画に上がってた。高校生が作り始めた電動義手。すごい。

www.nicovideo.jp

 

JUNK:TECH on Strikingly

間取り再現楽しいー!

 私の趣味はアニメなどに出てくる家をSweetHome3Dで再現することです。

bibinbaleo.hatenablog.com

 家を作ったら、そこにMMDモデルを置いたりVRに取り込んで移動したり、映像作れたりと楽しみ方が広がります。

ということで今まで作ったやつを時系列順にまとめてみました。

トルバトゥール(怪盗クイーン)

怪盗クイーンという小説に出てくる主人公たちが住んでいる飛行船です。

skfb.ly

 この本に間取りが載っていたので作りました。

 部屋の細かいとことかはめんどくさかったので全体の部屋の形だけですが。

Pixivにあげました。

www.pixiv.net

pixivの貼り付けってこんな表示のされ方なんだ。

七瀬家(Free!

Free!の主人公七瀬遙が住んでいる家です。

skfb.ly

これは推測しがいがありました。一応この雑誌に若干の情報は載っていたのですが、

TVアニメ「Free! 」パーフェクトファイル (生活シリーズ)

TVアニメ「Free! 」パーフェクトファイル (生活シリーズ)

 

 全体の間取りの情報とかはなくて(どっかにあるのかもしれない)アニメ見ながら、家が写っている部分は全部スクショして考察しました。

四畳半神話体系のOPパロを作りたくて家再現しました。

www.nicovideo.jp

正確かはわからないけどまあまあのクオリティなのでは?

これもpixivにあげてます。

www.pixiv.net

f:id:bibinbaleo:20170714143010p:plain

キズナアイ

バーチャルユーチューバーのキズナアイが動画で書いていた理想の家を再現したやつです。これは間取りを書いていてくれていたので簡単でした。

sketchfab.com

これも動画にしました。

www.nicovideo.jp

またtangoを使って歩けるVRみたいなのにもしました。

ちなみに元ネタはこの動画です。

www.youtube.com

ジャパリカフェ(けものフレンズ

skfb.ly

これはVRにして遊びました。

www.nicovideo.jp

 

考察の様子は下の記事を参考にしてください。けもフレはスクショOKらしいのでスクショ付きでがっつり考察してます。

bibinbaday.hatenadiary.jp

bibinbaday.hatenadiary.jp

貞子が出てくる部屋(リング)

貞子がテレビから出てくる有名なシーンの部屋。

skfb.ly

貞子の動きとかゲーム性とかをつけれたら動画にしたいですね。

今後

おそ松さん

おそ松さんもやろうと思ったんですよ!そしたら既におそ松くんのを再現しているのがあったんです!

間取り探偵『おそ松くん』-名作マンガ・アニメの間取りを推理-イエマガ

matomame.jp

考察している人も多いし。ということでやらなかったのですが、二期がくるので自分でもやろうかなと思います。

温泉(けものフレンズ

f:id:bibinbaleo:20170714115056p:plain

可愛い。

DVDのブックとかで建物の情報が出たりするのかな?そのうち図書館とか作っているあの方が作りそうではありますが、可愛いMMDモデルも出ているので作ってVRしたいですね。

どうでもいいけどニコニコ静画で温泉のモデルがないか調べるために「けものフレンズ 温泉」で検索したらエロいのばっかり出てきたの許せない。ちゃんとR-15つけろ。R-15ついてるやつの方がエロくないってどういうことだよ。

最後に

家具とかは他の人が作っているやつなので配布とかはしにくいけど、簡単に再現できてobj書き出しもできるのでモデリングが苦手な人はぜひSweetHOme3Dで遊んでみてください。

自分の理想の部屋を作るのが楽しいです。

 

Tangoで現実の床に仮想物体の影を落とす

現実世界の床に仮想物体の影が落ちるARをTangoで実装します。

MeshBuilderサンプルを使う

TangoSDKの中にあるExperimentalMeshBuilderWithPhysicsを改造します。これは部屋の面を認識してメッシュを構成するサンプルです。

f:id:bibinbaleo:20170712200936p:plain

こんな感じになります。タッチするとボールが発射されて、メッシュの上で転がります。

このメッシュのマテリアルを影のみ表示するシェーダーをつけたマテリアルに変えます。

元のサンプルシーンはコピーを取っておいたほうがいいかもしれませんね。

マテリアルを作る

このシェーダーをコピーして、Create>Shaderで作ったshaderに貼り付けます。

gist.github.com

次に新しいMaterialを作って、Shaderをさっきのにします。FX/mmatにあります。

f:id:bibinbaleo:20170712200842p:plain

そしてそれをDynamicMeshというゲームオブジェクトにつけます。

この状態でビルドするとしたみたいな感じ。

f:id:bibinbaleo:20170712200950p:plain

カメラ画像を読み込んでなかったし、メッシュ自体の影が落ちてしまってすごいことになっています。

細かな設定

DynamicMeshのMeshRendererのCast ShadowsをOffにしてメッシュ自身の影を落とさないようにします。

Receive Shadowにはチェックが入っているのでボールの影は落ちます。

f:id:bibinbaleo:20170712200850p:plain

次にTango CameraのTango AR Screenにチェックを入れます。これでカメラ画像が表示される。

f:id:bibinbaleo:20170712200838p:plain

Tango ManagerのEnable Video Overrayにもチェックを入れる。

f:id:bibinbaleo:20170712203332p:plain

その状態でビルドするとこんな感じ・・・だったかな?

f:id:bibinbaleo:20170712200958p:plain

とりあえずできたはできた。

ライトの調整

影が濃いのでDirectional LightのIntensityを0.18、Strengthを0.9ぐらいにする。あとLightingのAmbient Intensityを1.54にして、skyboxは自分の部屋のやつにした。 

bibinbaleo.hatenablog.com

 あと右下に表示されるObserver Cameraが影を落として邪魔だったのでそれ関係のを消したら・・・

結果

最初の動画みたいなやつができました。

f:id:bibinbaleo:20170712201020p:plain

ちゃんと壁を認識して当たってくれるし、影も落ちるし楽しーーー!

まあMesh構成がされているのかが表示されないので右下のはあった方がいいのかもしれませんね。

UnityでFBXにテクスチャの模様がつかないのはUVのせい?

Unityでりんごもどきにアーティスティックな赤い模様のテクスチャを貼ったのだが、模様が全然反映されない。色だけ反映される。

f:id:bibinbaleo:20170711170956p:plain

f:id:bibinbaleo:20170711155836p:plain

展開?の仕方が悪いのかなと思って、球でやったら球ではできた。

f:id:bibinbaleo:20170711155832p:plain

シェーダーをUnlit>Textureにしたら下のような感じになった。ということは形やテクスチャが悪いのではなく、FBXで読み込んだのが悪いのか?

f:id:bibinbaleo:20170711155827p:plain

Maya

とくわからないのでMayaでテクスチャをつけようと思ったけどテクスチャの読み込み方がわかなかった。

読み込みマークがない。

f:id:bibinbaleo:20170711162015p:plain

下の記事だと、読み込みマークになっているのに、私のはチェックじゃん。

テクスチャ作成、MAYAでモデルに貼る

blender

仕方がないのでblenderでやる。最初お前もかよ!という感じで表示されなかったけどよくみたら左側に「データなし」「UVレイヤなし」って書いてあった。

f:id:bibinbaleo:20170711162010p:plain

なるほどUVレイヤがなかったからなのか。シンプルなUVを追加というボタンを押すとこんな感じになった。

f:id:bibinbaleo:20170711162947p:plain

思ってたのと違うけどもういいや。

最後

最終的にUnityでこんなライティングをしてた。何やっているんだろう。

f:id:bibinbaleo:20170711164247p:plain

本当は普通にりんごのテクスチャを貼ろうと思ったけどフリーでいいのなかったし、自分で作るのもめんどくさいので、3000円で買った高級テクスチャパックから使った。

アートだと自分に言い聞かせて納得した。

ameblo.jp

この方のすごい。