トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

マンホールコレクションをUnityで作る

どうもマンホール写真収集家のビビンバです。

今まで撮りっぱなしで何もしていないので、いい感じに並べてコレクションしたいですね。

Googleフォトに写真を上げておけば「マンホール」って検索したら自分が撮ったマンホールの写真が出てきてくれます!!

f:id:bibinbaleo:20190226140543p:plain

 

ペイント3D

とりあえずスクショを撮って丸型に切り抜いていきます。

f:id:bibinbaleo:20190226140536p:plain

Windowsのペイント3Dに自動で背景を切り抜いてくれる「マジック選択」という機能がありました!

範囲も追加や消去ができます!!!すっご!!!!フォトショいらんやん

f:id:bibinbaleo:20190226140601p:plain

切り抜いたら切り抜いた部分を動かせます。背景もいい感じに補完してくれる!!

f:id:bibinbaleo:20190226140555p:plain

どっひゃー!!

f:id:bibinbaleo:20190226140550p:plain

背景を透過で保存するにはキャンパスから「キャンパスを表示する」をオフにして、

f:id:bibinbaleo:20190226140521p:plain

名前を付けて保存。

透明度にチェックを入れたら背景が透過された!

f:id:bibinbaleo:20190226143117p:plain

カメラ位置とフレーミングの調整で画像いっぱいにマンホールを詰めた。

f:id:bibinbaleo:20190226143245p:plain

Unity

前使ったアセットで3Dにします。無料

assetstore.unity.com

bibinbaleo.hatenablog.com

 変換

f:id:bibinbaleo:20190226144159p:plain

マンホールの厚みってなんcmなんだろう?

調べてたらマンホール売ってた。2,3cm前後かな

kakaku.com

3cmにしました。

f:id:bibinbaleo:20190226154726p:plain

f:id:bibinbaleo:20190226154847p:plain

アスファルトのテクスチャ。

free-texture.net

f:id:bibinbaleo:20190226144203p:plain

ギャラリー

 Googleフォトに26個マンホールの画像があったので全部の マンホールにこれらの作業をしました。疲れた。。。

f:id:bibinbaleo:20190227075317p:plain

f:id:bibinbaleo:20190227075431p:plain

どこかにアップロードしたい(STYLY)

せっかく頑張ったし面白いものができたのでどこかにアップロードしたい

STYLYにアップしようと思ったけど2017.4系で作らないといけない。2018.3で作ってたので2017.4に持っていったら変になった。

styly.cc

あとモジュールのインストールが途中で止まってしまう。MacのモジュールってWindowsのにどうやって入れるんだ。

f:id:bibinbaleo:20190227075432p:plain

UnityHubからモジュールをインストールできるのはUnity/Hub以下にインストールしたUnityだけ。

f:id:bibinbaleo:20190227075436p:plain

2017.4は別のとこに入れてる。

 

WebGL

そうだ!WebGLにしてwebにアップしたらいいのか!と思ったけどUnityroomはゲームじゃないとダメなのかな・・・><

 サーバー持ってないし...

と思って検索したらgithubにアップして見れるらしい!!

for.hatenablog.jp

githubへのアップは簡単!

リポジトリー作ってUploadからbuildしたこの3点セットをドラッグするだけ!!sourcetreeもいらない

 

f:id:bibinbaleo:20190227083832p:plain

f:id:bibinbaleo:20190227083840p:plain

SettingからgithubPagesのSourceを選んで、そこに出ているURLに飛んだらWebGLが見れる

f:id:bibinbaleo:20190227083835p:plain

ここ

bibinba.github.io

エラー

なぜか全部のファイルをアップできてなかったみたいだし、今別のファイルをアップしようとしたらめっちゃエラーが出たりgithub自体が動作しなくなる

f:id:bibinbaleo:20190228074825p:plain

f:id:bibinbaleo:20190228074828p:plain

昔unityroomにアップしたときも出た。

f:id:bibinbaleo:20190227084110p:plain

多分もう動かない

かわりにunityroomにあげました

https://unityroom.com/games/manhole

別のプロジェクトではうまくいったのでgithubのご機嫌の問題かな???

bibinbaleo.hatenablog.com

移動実装

移動を自分で実装しないといけないのがめんどくさいな

と思ったけどFPSのいい感じのアセットが前紹介されてるのを見た!

sleepnel.hatenablog.com

これを入れてみる。

standardアセットとかほかのやつは入れてみたことあるけど、これは初めて。

2019/2/8発売だから新しい

プレハブをシーンに置いたらすぐに動く

f:id:bibinbaleo:20190227090706p:plain

高さはよくわからないけどプレハブの子のカメラの高さをいじったり、カプセルコライダーの高さをいじったりした。transformをYを低くすると床をすり抜けて落ちちゃう

f:id:bibinbaleo:20190227090654p:plain

カーソルはAutoCrossherをオフで消える

f:id:bibinbaleo:20190227090658p:plain

歩いたら首を振るのもいらなかったのでheadbobをオフ

f:id:bibinbaleo:20190227090703p:plain

これでOK!

 こちらにも追記した!

bibinbaleo.hatenablog.com

完成

完成したギャラリーの動画

www.youtube.com

位置によって光が反射するので本物の金属みたいに見える!

WebGLはファイルのアップロードがうまくいかなくて動かないです

こっそりこっちに限定公開しています。

https://unityroom.com/games/manhole

マンホールの輪

マンホール愛好会とかサイト、本があるほどマンホールの写真集めはメジャーな趣味です(たぶん)

私はそこまで熱心なわけではありませんが、旅先でデザインマンホールを見つけたら写真に撮っています。

www.ark-gr.co.jp

上の記事でインタビューされてる方が作った?マンホールサイト

manholemap.juge.me

APIまであってびっくりした

ハッシュタグもあるのか

twitter.com

本も何冊かある

オーストラリアの写真家の方が集めた日本のマンホールの写真集

最後に

VRで見てみたいけど、ローカルで見れてないんだよな。前はVRsupportにチェックを入れたらすぐにWinMRで見れたのになぜか見れなくなった。

VRchatはほかに人に見せられないし・・・

マンホールをobjとかで書き出して(それか最悪画像)STYLYでワールド作ってもいいけど。

 ARトライしたけどできなかった記事

bibinbaleo.hatenablog.com

 

f:id:bibinbaleo:20190409063451p:plain