トマシープが学ぶ

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

VR/UI研究所アプリを作る!!!【構想】

いい加減二次創作じゃなくてオリジナルのVRを作りたいと思います。

あと修論の研究テーマ全く決まってないのですが、VRの UIデザインについてやれたらいいな〜と思っており、せっかくなので色々なUIを試せる実験的なアプリを作りたいです。

まだ全く作ってないです。自分の尻叩きように記事にしただけです。

構想

ホームシーンがあってそこの壁にドアがいくつか並んでおり、それぞれのドアの先に、ガンシューティング、VR彼氏、アート体験、結界師、360度映像視聴・・・などの別々のコンテンツ(世界観)がある。

それぞれのコンテンツで求められるUIやUXデザインは違うと思うのでそれら全部を試したい。

以下で各コンテンツのイメージを述べる。

ホーム

こんなイメージ。

f:id:bibinbaleo:20171020220408p:plainf:id:bibinbaleo:20171020220402p:plain
床は円状になっており、ドアの数を増やしやすいようにする。天井はガラス張りのドーム。

ProBuilderで作りました。 

bibinbaleo.hatenablog.com

 

時間を変えれるようにして、夜と昼をユーザーが好きに変えれるようにする。夜はドアの近くにランプを照らす。

月明かりでなんとなく見える。

ガンシューティング

何種類かの銃と、射的のようなオブジェと、押したら敵が向かって来るボタンを配置したい。

ただ銃のこと全くわからないけど。適当でいいや。

ここでは主にコントローラーのボタンと銃の対応関係の表示などのUIかな〜

<参考>

すっごいリアルなガンシュミレーター

store.steampowered.com

www.youtube.com

VR彼氏

会話のUI研究のため。イケメンとイケメンの部屋でお話したい。イケメンのフリーモデルってあるのでしょうか?見た事ないんだけど。

<参考>

サマーレッスン

summer-lesson.bn-ent.net

サマーレッスンを作った方の講演を聞いたことがあるのですが、UIにもこだわっていてUIをキャラより前に表示しないとか、自分の台詞も一通りしかないけどそれをあえて選ばせることでそれを自分の発した台詞だと思わせる?とか言っていました。↓

www.famitsu.com

あと囚われのパルマのVRもやりたいな〜福岡来ないかな

dengekionline.com

アートorインスタレーション体験

これはUIというか純粋に私がやってみたいだけですね。綺麗な空間でコントローラーから謎の綺麗な粉が出るとか、音がなる球を作れるとか。ゲームとかよりこういう何も考えないのが好きです。

<参考>

store.steampowered.com

www.youtube.com

結界師

これも私がやりたいだけです。コントローラーで結界を作りたい!

指定した場所でトリガーを押した状態で上に振り上げると結界ができる!

自分の足元でそれをやると自分ごと上に移動する!とか。

結界師を見たことがある人ならわかるはず。

できる気がしないけどやりたいです。 

360度動画/画像閲覧

どうやってみるのが一番楽しいんでしょうね・・・

ただ低解像度の写真があってもあんまり没入感もないし360度動画・画像の見せ方も研究の余地ありそう。

私のHP

ホームページをVRで構築するっていうのをやってみたいです。

トップ画面は普通にボタンがある感じかな?

で写真とかのギャラリーは美術館みたいにちゃんと展示するの

そして自作モデルとかはVR空間内でリアルに見れるようにする。

めっちゃUI考えないといけなさそう。

っていうかできなさそう!これは組み込まずに別でやるかもな〜

メニューのサムネとかは画像じゃなくてモデルになるのかな。

ポスター部屋

アニメのポスターとかを貼れる空間が欲しい。

もう現実の部屋には貼りきれない・・・

これも別で作るかもしれないですね。

共通部分

共通部分としては、メニューボタンで「ホームに戻る」と「ゲームをやめる」を選べるメニュー画面を表示すること。

あとホーム画面から各コンテンツへの移動方法

あとキーコンフィグでoculusとvive両方できるようにする?winMRもできるのかな?

プロジェクト管理

sourcetreeとgithubを使って管理したいです。unityのクラウドのやつも使いたいけど一緒に使えるのかな?

とりあえずVR機器が研究室にしかないので、確実に家と研究室でデータのやり取りをする必要が出るんですよね〜

それだけならunitycollabがいいだろうけど、バージョン管理とか公開とかはgithub的なの使いたいし〜

bibinbaleo.hatenablog.com

UIデザイン

UIやるとか言っておいてなんですが、全くの初心者なんですよね

ということで勉強します。

 今現在↓を読んでいます。いろいろあって全然進んでないけど、ちゃんとメモしながら読んでいるのでそのうち記事にします。

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

 

 あと他には↓の二つも読んでみようかなと思います。twitterで流れてた

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

 
インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

 

 

 

Unityでモデリング!ProBuilderアセット

ProBuilder Basic

unity上でモデリングできるアセットのFreeバージョン!

Adovanceという有料版もある。1万円ぐらい?

使い方

この公式動画を見れば大体わかります。らだしこれは有料版の解説なので、無料版では一部使えない機能がありました。

www.youtube.com

準備

アセットを入れたらTolls>Probuilder>Probuilder Basic Window

f:id:bibinbaleo:20171020085316p:plain

するとこんなwindowが開く。macの場合後ろに隠れてた。

Aと横に書いてあるものは、Advance(有料版)の機能なので使えません。

f:id:bibinbaleo:20171020085312p:plain

このwindowで右クリックしてUse Icon Modeにしたら

f:id:bibinbaleo:20171020090817p:plain

アイコンモードになる。可愛い。

f:id:bibinbaleo:20171020090812p:plain

New Shapeを押して、物体を作る。

f:id:bibinbaleo:20171020085305p:plain

いろんな形が選べる。

f:id:bibinbaleo:20171020085309p:plain

形を選んでパラメーターもいじったら、Build~を押す。

形を変える

頂点モード

f:id:bibinbaleo:20171020091043p:plain

線モード

f:id:bibinbaleo:20171020091048p:plain

面モード

f:id:bibinbaleo:20171020091039p:plain

面モードでShiftを押した状態で引っ張ると面が飛び出ます。

f:id:bibinbaleo:20171020092654p:plain

また、Shift+scaleで小さい面を作れる。

f:id:bibinbaleo:20171020092832p:plainf:id:bibinbaleo:20171020092827p:plain

deleteボタンで面を消す。

f:id:bibinbaleo:20171020092921p:plain

その他編集

Extrude Facesで面を増やして

f:id:bibinbaleo:20171020093613p:plain

その面を下げることで、ボックスができます。

f:id:bibinbaleo:20171020093617p:plain

有料版だとベベルとかできるようですが、無料版はできません><

色ぬり

有料版だとテクスチャやUV編集などができるようですが、無料版は単色をつけるだけっぽいです。

Vertex Colorsの横の+ボタンを押して、Paletteモードにすると、面ごとに色をつけられます。

f:id:bibinbaleo:20171020095424p:plain

Paintモードにするとこんな感じでブラシで塗れます。

f:id:bibinbaleo:20171020095212p:plainf:id:bibinbaleo:20171020095428p:plain

書き出し

エクスポート機能もありました。

f:id:bibinbaleo:20171020104706p:plain

作ってみた

円柱と天井を作ってみました!天井は結構頑張った。

f:id:bibinbaleo:20171020220402p:plain

天井は球(icosahedron)を頑張って半球にして、一面ずつExtrude縮小で小さい面を作ってそれをdelete.

円柱はpipeを細かくして薄くしたらできる。

天井は内側から見たら透明になってしまうので、スタンダードシェーダーに「cull off」という文を付け加えたのを作ったら、両面から見れました。

f:id:bibinbaleo:20171020232833p:plain

カリングという機能が原因だそうです。シェーダー書かなくても変更できるようにしてほしい!

nn-hokuson.hatenablog.com

まあそんなこんなでunityだけでこんな空間が作れました!やったぜ!

f:id:bibinbaleo:20171020220408p:plain

感想

すごくいいですね!

穴の空いた立方体とか、ボックス型のものを作るときいつもcubeを組み合わせて作っていたのですが、これ使ったほうが早いし綺麗なものができそう!!

東京でいっぱいVRしてきました。

東京に行ってきました。

いつも旅行記は別の日常系ブログに書いているのですが、今回はVR満載なのでこっちに書きます。

XR女子部

mr-girls.connpass.com

女性開発者のMeetup!男性もいっぱいいましたが、やはりこれだけの女性率の勉強会はなかなかないと思うので貴重でした!

色々なお話を聞けました。

スライド等勝手に貼ります。

XR動向とコミュニティ活動のすすめ

www.slideshare.net

こちらの発表の中で私が知らなかったもの

JapanVR Fest(VRコミュニティ)

JapanVR Fest.(旧オキュフェス) – 全てはVRのために

SVVRJapan(VRコミュニティ)

https://www.facebook.com/SVVRJapan/

TECH PLAY(イベント情報サイト)

techplay.jp

Doorkeeper(イベント情報サイト)

www.doorkeeper.jp

Meta2(MRデバイス

bluebirdofoz.hatenablog.com

友達と3人でVRゲーム制作して展示した話

docs.google.com

具体的なグループ作業の流れやソフトの話などがありとてもためになりました。

グループでするのは、自分の持っていない技能を取り入れられる反面、やっぱり色々大変なんだな〜って改めて思いました。

あと下手でも未完成でもいいから公開する事は大事だなと思いました。

 

・知らなかったもの

MODO(3DCG制作ソフト)

blog.fujiu.jp

Mixamo(ボーンを入れてくれる)

Mixamo

MARI(テクスチャをかける)

3dnchu.com

初めてのUWPアプリ

www.slideshare.net

windows系アプリの開発についてでした。WinMRでも動くんですね!

dellのWinMRが本気で欲しいのでもし買ったら参考にします。

HoloInkShooter

Hololensでスプラみたいな事ができるアプリを作ったお話を聞きました。あと実際に体験もさせてもらえました!ちゃんと塗れてました

qiita.com

www.microsoft.com

シェーダー書けるようになったらできることの幅が広がりそうです。

VRZONE 

翌日は新宿のVRZONEに行きました!

f:id:bibinbaleo:20171018225255p:plain

平日の10時オープン時に行ったため人はかなり少なかったです。当日券だと現金で買えるので楽ですね

vrzone-pic.com

私はマリオカート、釣りVR、ハネチャリ、ガンダムをやりました。

マリオカート

ぼっちで行ったのですが4人プレイなので、3人家族に混ぜてもらって対決しました。

私はVR上級者なので?堂々の一位!

めっちゃ楽しかった。周りの景色を見る余裕もあって気持ちよかったです。

www.youtube.com

釣りVR

釣りはしたことないしそんなに興味ないのですが、評判がすごく高かったのでやりました。

www.youtube.com

とてもリアルな感覚だったのですが、リールを巻くのが下手すぎて全然うまくいかなかったです。スキージャンプやればよかった。

釣りやった事がある人にとっては楽しいのかな?

ハネチャリ

自転車こいで移動するやつ!これも前評判がすごくよかったので体験しました!

www.youtube.com

実際すごく面白かったです。景色が綺麗だし、難易度もそこそこ高いし。

人も一番並んでいたと思います。

私下手すぎてなんども崖とかにぶつかったんですが、最初はぶつかる時すごい怖いかったのですが、だんだん慣れちゃいました。

ガンダム

ガンダムの手のひらに乗れるVR

www.youtube.com

手の形のソファに座って親指に捕まって揺れて楽しかったです

エヴァとかドラゴンボールもあったのですが、どれもわからなかったので単純そうなガンダムにしました。

VR PARK TOKYO

渋谷にあるVRパーク。VRZONEと同じようにいっぱいアトラクションが遊べます。

www.adores.jp

VRZONEよりは狭いんですが、90分の時間制限と人数制限があるのでほとんど並ばずに遊べます。フリードリンクもあって、90分あっという間で濃密な時間でした。

私はレースができるT3Rが好きでした。シートが本物感あります。

www.youtube.com

またソロモン・カーペットは実際に揺れる絨毯の上に乗って体験するもので、立ったままプレイするタイプでした。

f:id:bibinbaleo:20171018225243p:plain

www.youtube.com

Omuni ARENAは歩けるVRデバイスOmuniを使っている。歩くっていうか、そういう滑り方をする特殊な機械って感じでした。

www.youtube.com

天空VR

池袋のサンシャインビルの展望台でVR体験が3つぐらいできるそうです。

天空でVR(バーチャルリアリティ)体験

あっでもそのうちの一つはVRPARKにもありました。鉄塔を渡れるやつ

f:id:bibinbaleo:20171018225235p:plain

www.youtube.com

あとは大砲に入って東京を旅できるやつ

www.youtube.com

ただ16時半が最終入場だそうで、ギリギリ間に合いませんでした。

今だけなのかわからないです。HP書いてない!

おそ松さんVR

この冬おそ松さんVRが来るそうです。

『おそ松さん』×アドアーズ|おそ松さん コラボレーション|アドアーズ

 

そのPVがみれるコラボカフェに行ってきたのですが、見れませんでした。ただ私が早めに帰ったから、そのあとに流れてたのかもしれませんが・・・

アニメプラザ|AnimePlaza|コラボレーションカフェ公式サイト

f:id:bibinbaleo:20171018225249p:plain

まあいいや!VRは絶対見にいくから!

アドバンスドテクノロジーラボ

もし見学できるなら見に行きたいと思っていた、VR開発施設

atl.recruit-tech.co.jp

ホームページがなさそうだったし、登録がメール経由みたいなので見送りました。

最後に

今回の東京旅行のVRシーンはこんな感じです。

そのほかの泊まれる本屋や成田空港などは日常ブログの方に書きました!

bibinbaday.hatenadiary.jp

紹介したサービス・ツールの中で本当に良かったもの

このブログを始めて一年ちょい経ちましたが、「ツール・サービス紹介」というタグで93個も記事を書いてきました()。

f:id:bibinbaleo:20171014193620p:plain

私は暇に任せて気になったものはなんでも試してみるタイプなのでこんな数になってしまいましたが、実際に今でも使ってるものはそんなに多くないのでそれらを紹介して行きたいと思います。ほとんど無料です。

全部で11個にまで絞れました。

古い順に行きます。

 Amazonアソシエイト

bibinbaleo.hatenablog.com

広告収入サービス?

今年の3月に始めたのでちょうど7ヶ月か・・・

今見たら1000円ぐらいでした。ありがたい><

Skitch

bibinbaleo.hatenablog.com

画像に矢印とか文字を入れれるソフト

モザイクを入れるのに今でもたまに使っています。

MendelyのChrome拡張機能

bibinbaleo.hatenablog.com

論文管理サービス

クッソ便利です。論文管理が捗ります。(読むとは言ってない)

Inoreader

bibinbaleo.hatenablog.com

神。これをもう一度紹介するためだけにこの記事を書いたと言っても過言ではない。

このRSSリーダーでVRinsideとMoguraVRの記事を全部チェックしています。

あと自分のブログもこれでサムネ確認したりしています。

f:id:bibinbaleo:20171014200215p:plain

HTC Vive

bibinbaleo.hatenablog.com

VR沼への入り口。そろそろ自分用のVRデバイスも欲しい

Post Processing(Unityアセット)

bibinbaleo.hatenablog.com

Unityの画面効果アセットです。自分でUnityを触るぶんにはあんまり使っていないけど、外に出すゲームを作る時とかはこれを使ってかっこよくしています。

bibinbaleo.hatenablog.com

Giphy

個別に記事書いていませんでしたが、gif画像をブログに貼り付けるのにGiphyCaptureというソフトを使っています。Macのみですが、すっごく使いやすいです。

giphy.com

キャプチャはこんな感じで大きさも自由に変えれます。

f:id:bibinbaleo:20171014202307p:plain

録画したものは、動画のカットや大きさなどの編集ができます。そしてアップロードボタンを押すと、gipthのサーバーに保存されそのリンクが表示されます。

f:id:bibinbaleo:20171014202455p:plain

そのリンクをブログに貼り付けるとすぐに表示されます。

https://media.giphy.com/media/xT9IgIx2g9kMWLRPpu/giphy.gif

gipthにログインして使うと、アップロードしたものがサイトで一覧で見ることができ使い回しできます。

f:id:bibinbaleo:20171014202926p:plain

逆にいうとログインとかしなくても使えるのが神ですね。

Sketchfab

bibinbaleo.hatenablog.com

自作モデ自作モデルをアップロードして、webでグルグル見れるようにするやつ。

sketchfab.com

AR機能もついたしこれからも期待しています。

bibinbaleo.hatenablog.com

 Unityリンクメーカー

bibinbaleo.hatenablog.com

unityのAssetstoreにあるアセットのリンクをかっこよくブログなどに貼れるもの

こんな感じで

読書メーターとCalilay

bibinbaleo.hatenablog.com

読書メーターは読んだ本を記録できるもの。一応今でもこまめに記録しています。

f:id:bibinbaleo:20171014201424p:plain

レビューを13件も投稿してるの偉い。

CalilayはAmazonで検索した本が図書館にあるか調べれる拡張機能。お世話になっています。

Pushbullet

bibinbaleo.hatenablog.com

自分の端末間でちょっとしたリンクや画像を送りたいときに便利。

これもすごい使っています。

最後に

ブログを始めたことで好奇心も高まり、たくさんの素晴らしいサービスに出会えました。

Vive以外全部無料っていうのもすごい。

Unity2017.2に統合されたVuforiaをパソコンで実行

Unity2017.2からVuforiaが統合されたので、やってみます。

noshipu.hateblo.jp

準備

Unity2017.2をダウンロードするときに、build support一覧でVuforia~にチェックを入れておかないといけない。後からでも入れれると思うけど

f:id:bibinbaleo:20171014152037p:plain

そしたらGameObjectにVuforiaの欄があります。

f:id:bibinbaleo:20171014152031p:plain

使うにはPlayersettingでXR SettingのVuforiaのところにチェックを入れる。

f:id:bibinbaleo:20171014152122p:plain

使う

新しいシーンにVuforia>ARCameraとImageTargetオブジェクトを置く。

ImageTargetの子オブジェクトとして、表示させたい物体を置く。

f:id:bibinbaleo:20171014172407p:plain

f:id:bibinbaleo:20171014172411p:plain

ARCameraのVuforiaBehaviorのOpen~っていうボタンを押して、

f:id:bibinbaleo:20171014172424p:plain

Configurationを作る?基本的には何もしなくていいっぽい。

外付けのwebカメラを使うときはこのVuforiaConfigurationの下の方でカメラを選べます。

f:id:bibinbaleo:20171014153924p:plain

あとはImageTargetsフォルダーの中のマーカーを印刷するなり、画面に表示するなりして、

f:id:bibinbaleo:20171014153916p:plain

ARを実行!できました。

f:id:bibinbaleo:20171014172420p:plain

任意マーカーはできない?

ImageTargetのBehaviorでマーカー画像を色々変えれそう。やり方はよくわからないけど。

f:id:bibinbaleo:20171014173821p:plain

TypeをUserDefinedに変えて

f:id:bibinbaleo:20171014172416p:plain

昔作ってたマーカーセットをインポートして、LicenseKeyも入れて、Load ar ibl Databaseにチェック入れて、

f:id:bibinbaleo:20171014184400p:plain

UserDefinedマテリアルにマーカー画像を入れて実行したら、カメラは反応している。

f:id:bibinbaleo:20171014184408p:plain

ただ表示するオブジェクトのMeshRendrerとかが、本来ならマーカ認識されたと同時にオンになるんだけど、この状態だとOnにならないので自分でOnにしたら一応表示はされた。

マーカーにも追従する。

f:id:bibinbaleo:20171014184416p:plain

 どうするのが正しいやり方なんだろう?

虫歯を倒す2Dゲームを作る with iTween【バグ編】

前回の2Dゲーム製作の続きです。

ほとんど進んでいないに等しい

bibinbaleo.hatenablog.com

バイキンにタッチで表情を変える

バイキンをクリックするとやっつけれるようにするのですが、その時バイキンの表情を変えてみます。

表情・ポーズを切り替える | Live2D Manuals & Tutorials

公式マニュアルによるとanimatorのblendという機能を使うと、スクリプトから表情を変化させれるそうです。その場合表情パラメーターをいじるのではなく、変化後の表情をlive2Dで作って置いて、アニメーションとして取り込んで、それをブレンドする形でした。

f:id:bibinbaleo:20171005211207p:plain

マニュアルのスクリプトを動かすと、こんな感じでインスペクタのバーで表情を変えることができます。

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

この値を、クリックした時に変えるスクリプトを書かないと・・・

deltaTimeとか使って書いて見たけどうまくいかなかったので、結局表情は変えないでいいや・・・

健康な歯から虫歯へのフェードアウト

unityをやっているとたまに聞くiTweenというアセット。やっと使いました。

アニメーションがスクリプト経由で簡単にできるらしい。

スプライトの透明度を変えてフェードアウト的な処理をしてみました。

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

ちなみに透明度を下げるオブジェクトの下に虫歯画像を置いています。これはteratailで質問して得られた回答をもとに作りました。

https://teratail.com/questions/95199

本当は画像から画像へスムーズに変換する機能とかあるのかなと思ってたけど、ないのかな?

こんな感じです。

if ( Input.GetKeyDown( KeyCode.Space )){
            iTween.ValueTo(gameObject, iTween.Hash("from", 1f, "to", 0f, "time", 2f, "onupdate", "SetValue"));

        }

    void SetValue(float alpha) {
        // iTweenで呼ばれたら、受け取った値をImageのアルファ値にセット
        MainSpriteRenderer.color = new Color(255,255,255, alpha);
    }

 

参考

doggy.hatenablog.com

tech.camph.net

megumisoft.hatenablog.com

バイキンのランダム発生

前回Live2Dのモデルがプレハブ化できなくて、インスタンスによるランダム発生ができないって書きましたが、Live2Dの最新のSDKを入れたらできるようになったので、普通にプレハブを使ってランダム発生させます。

前回同様こちらを参考に

tiro105.hateblo.jp

こんな感じで1秒ごとにMakeEnemyされるようにしました。

        if (timeleft <= 0.0) {
            timeleft = 1.0f;
            MakeEnemy ();
        }

    void MakeEnemy() {
            GameObject enemy = (GameObject)Instantiate(enemyPrefab);
            Vector3 p = enemy.transform.position;
            p.x = Random.Range(-9, 9);
            p.y = Random.Range (-3, 3);
            enemy.transform.position = p;
    }

なんかすごく偏る気がするけど気のせいかな?

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

本当は歯の近くにバイキンを出したいのですが、やり方がよくわからないので、画面全体にランダムに出して、歯とバイキンの距離が近かったら歯が虫歯に変わる、って感じにしようと思います。 

歯とバイキンの距離が近くなったら、虫歯になる

distance関数で、バイキンと歯の距離が2以下になったらitweenを発動させるっていうスクリプトを作ったのですが、

UnassignedReferenceException: The variable objB of kin has not been assigned.
You probably need to assign the objB variable of the kin script in the inspector.

というエラーが出ます。

f:id:bibinbaleo:20171013145148p:plain

 調べたら、初期化ができてないからって書いてありました。

初期化って何?

westhillapps.blog.jp

hamazakifactory.hatenablog.com

なんかどうやってもこのエラーが治らない。ゲームは動くのですが、tweenされない。

クローンを消しても点数が入らない

現れたバイキンをクリックすると点数が入るように前回していました。

しかしプレハブ化してクローンとして現れた敵をクリックしても点数が入りません。

原因として、外部のスコアを管理しているスクリプトをバイキンにアタッチしているのですが、クローンのバイキンはそれがアタッチされてない状態になってしまうこと

元:

f:id:bibinbaleo:20171013155112p:plain

クローンだと

f:id:bibinbaleo:20171013155108p:plain

こうなってしまう。

f:id:bibinbaleo:20171013155102p:plain

内容としては下の記事が近そうなのですが、頭が回っていなくてこれを読んでもどうしたらいいか全然わかりません。

qiita.com

最後に

完成しない気がする。

2Dゲーム作ったことがないから作りたい、せっかくLive2Dも触り始めたからそれも組み合わせようっていうモチベーションで始めたけど、ゲームを作るのそんなに好きじゃないのかもしれない・・・

作っているのも面白いゲームじゃないのは明らかだし、今モチベーションがゼロだ〜

VRしようかな

 

こちらの記事も参考になりそう。

gametukurikata.com

BlenderのPrincipled BSDF機能

Blenderがすごいってtwitterで話題になっていました。

物理ベースレンダリング?マテリアル?機能が追加されたことで簡単にリアルなマテリアルをつくれるようになり、色々な環境でリアルに描写できるようになったらしいです。

その説明も含めて、下の動画がすごくわかりやすかったです。

また15分あたりから、一つ一つの機能を実際にやって見せてくれています。

www.youtube.com

PBR系はUnityだと下のアセットで使えます。 

bibinbaleo.hatenablog.com

 またSubstancrPainterもリアルな質感を3Dオブジェクトにペイントするためのソフトです。 

bibinbaleo.hatenablog.com

使う準備

blenderのver2.79をダウンロードします。

https://builder.blender.org/download/

新しい機能はノードを使うそうです。

ノードとか使ったことがないので、下の動画を見ました。

www.youtube.com

上の方の画面設定からCompositionを選んで、

f:id:bibinbaleo:20171010124214p:plain

こんん感じの分割画面にする。

f:id:bibinbaleo:20171010124202p:plain

もしくは左下の立方体マークからNode Editorを選ぶ。

f:id:bibinbaleo:20171010130228p:plain

ノードには3バージョンあるらしく、今回はマテリアルを編集するのでマテリアルを選んでUse Nodeにチェックを入れるとノードが現れる。

f:id:bibinbaleo:20171010130247p:plain

新しいノードを作るにはShift+A

f:id:bibinbaleo:20171010124208p:plain

ここで例のPrincipled BSDFがあるはずなんだけど・・・ない!

f:id:bibinbaleo:20171010130344p:plain

調べたらレンダーモードをCycle Renderにしないといけないそうです。上の方にある

f:id:bibinbaleo:20171010131459p:plain

この状態で新しくマテリアルを作ったら、さっきとノードの種類も変わって、検索したらPrincipled BSDFノードもありました!やったー!

f:id:bibinbaleo:20171010131552p:plain

Diffuse BSDFノードはXキーで消して、BSDFとSurfaceをつないで準備OK

あといちいちレンダリングボタンを押すのがめんどくさいときは、ビューをRenderモードにしていたらリアルタイムでレンダリングしてくれる。

f:id:bibinbaleo:20171011145620p:plain

やってみる

上の方から順番にやって見ます。これがデフォルトの状態。IBLしたけど。

f:id:bibinbaleo:20171011160455p:plain

BaceColor

そのまんま。色がつく

f:id:bibinbaleo:20171011160618p:plain

 

subsurface

人肌とか牛乳、大理石などを再現するやつ。

f:id:bibinbaleo:20171011160544p:plain

ちょっとやりすぎた。

f:id:bibinbaleo:20171011161728p:plain

Metal

金属の場合は1。それ以外は0。間は存在しない

f:id:bibinbaleo:20171011162616p:plain

f:id:bibinbaleo:20171011162620p:plain

Roughnessの値でツルツル度が変わる。上は0.5、下は0

f:id:bibinbaleo:20171011162611p:plain

Specular

いじらない。自然界?は全部0.5らしい。ツルツルさは、全部Roughnessで変化させるべし。

Roughness 

ザラザラ度。

f:id:bibinbaleo:20171011162821p:plain

0にするとプラスチックとか陶器っぽい。

f:id:bibinbaleo:20171011163454p:plain

0.5はデフォルト

f:id:bibinbaleo:20171011163447p:plain

Anisotropic

フライパンのうらや、髪の毛の天使の輪的なやつ。ほとんど使わない?

Sheen

布を表現するときに使う。繊細な光がうっすら現れる。

一応左がSheen1、右が0。

f:id:bibinbaleo:20171011164647p:plain

f:id:bibinbaleo:20171011101255p:plainf:id:bibinbaleo:20171011101300p:plain

ClearCoat

木目にニスを塗った時とか、車の塗装とかに使う?

 

基本的にはプラスチック(roughness0)とそんなに変わらない気がします。

f:id:bibinbaleo:20171011173744p:plain

左がクリアコート

f:id:bibinbaleo:20171011173333p:plainf:id:bibinbaleo:20171011173740p:plain

Transmission+IOR

透明度。Metalを0にした状態で、Transmissionを1にするとガラスになる。

IORは屈折率。デフォルトの1.45はガラスみたいですね

屈折率データ

f:id:bibinbaleo:20171011180106p:plain

Roughness1だとすりガラスみたいになる。

f:id:bibinbaleo:20171011180113p:plain

IOSを適当に3.8にしたら水銀みたいになった

f:id:bibinbaleo:20171011182002p:plain

水(0.85)だとこう!水ですね!CGっぽくて好き

f:id:bibinbaleo:20171011182239p:plain

Blender Addon Review : IOR値を調べないで済むアドオン(IOR Reference) – CGrad Project

テクスチャを使う

この動画で詳しく説明してありました。

www.youtube.com

テクスチャを入れるときはノードでImageTextureを追加して、テクスチャを選ぶ。それをBaseColorにつなぐ。

f:id:bibinbaleo:20171010135856p:plain

https://www.poliigon.com/texture/2197

動画で紹介していたテクスチャは上のリンクからすぐにダウンロードできた。基本は有料みたいだけど、いくつかFreeのテクスチャがある。

UVは展開しておかないと、テクスチャが反映されない。Editorモードにした状態で、Uキーを押してUnrap(展開)。

他のノーマルマップなどはColorをNonColorDateにする。

f:id:bibinbaleo:20171011182320p:plain

おまけ:IBL

unityでいうskybox的存在のIBLをCycles Renderでやった。

tofusan.cocolog-nifty.com

デフォルトのrenderはこっち

bibinbaleo.hatenablog.com

マテリアル何もいじってないのにこんなに綺麗!だからIBLはやめられない

f:id:bibinbaleo:20171010232555p:plain

 

おまけ:レンダリング

こちらのサイトを参考にレンダリング設定を見直しました。

www.storange.jp

ずっと白いツブツブが出ていたのですが、SamplinのRenderの数字を大きくしたら解決しました。

f:id:bibinbaleo:20171011160436p:plain

最後に

blenderに慣れてないためすごく時間がかかりましたが、めっちゃ楽しかったです。

ずっとIBLとマテリアルに触れ合っていたい。

f:id:bibinbaleo:20171011200535p:plain