トマシープが学ぶ

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

WebCamの映像からIBLする

 超AR

 超ARという、私のARの原点であり超えられない壁。

kosakasakas.github.io

このブログの起源。

bibinbaleo.hatenablog.com

技術的にARはおまけみたいなもので、メインはWebCamの映像からIBLすること。

でも終わってから気づいちゃったけど、これって既にARkitとかで実装されている環境光推定なのでは~~~~

IBLとは

IBLとはイメージベースドライティングのこと。

画像(イメージ)をもとにライティングする。周りの風景が赤かったら物体もほのかに赤くなるみたいな。主に環境光。ふつうに写真に写る太陽や光源の画像から影をつけるのもIBLと思う。

bibinbaleo.hatenablog.com

再現するぞ!

 当時はUnity始めたばっかりでスクリプト見ても何も分からないマンだった。継承とかも全く分からなかったので多分そこで躓いて再現できなかったんだと思う。

今ならできるかな!がんばるぞ!!

当時の自分に教えるように当社比少し丁寧に書いていく。(かも)

環境はUnity2018.3.8のWindowsです

Luxシェーダーを適用する

 このLuxというアセットを入れる。

githubにもあるので、私はそっちからとってきた。

github.com

普通の使い方はこちらの記事が詳しい。

無料アセットで簡単にIBLが出来るオープンソースシェーダLux - Qiita

 

そして、ARしたい(もしくはIBLを反映させたい)オブジェクトのマテリアルにLux系のシェーダーを付ける。

f:id:bibinbaleo:20190815214116p:plain

とりあえずIBLさせるだけなら何でもいいのかな?

Unityちゃんでやるときは

自分は肌系はLux/Bumped Diffuse、洋服系はLux/Bumped Speculaer、髪はLux/Human/Hairを設定しています。

 だそうです。

 下準備終わり!

3年前の私も、今日の私もこの下準備をやっていなかったからできなかったんだ。。。

まじでアホや

IBLを動画に対応させる

 こちらのCustomSetupLuxを入れる。

ユニティちゃんを超ARしてみたときのコード群 · GitHub

gistのCustomSetupLux.csのスクリプトはクラス名がtestになってるから、適宜変えてファイル名と合わせようね。

f:id:bibinbaleo:20190815065519p:plain

CustomSetupLuxはSetUpLuxを継承している。

最初に入れたLuxアセットの中にあるSetUpLux.csのvoid Start()とvoid Update()の前にpublic virtualを付ける。

f:id:bibinbaleo:20190815065147p:plain

docs.microsoft.com

これでエラーは消えた!!当時はこの時点でエラーまみれで終わってた気がする。

 

またこれはオブジェクトの大きさによると思うけど、生成されるカメラのx位置が10になっていて半球の映像が映らなかったので私は0にしました。

f:id:bibinbaleo:20190815210906p:plain

なんで10なのかよくわからない。

 

 

その後CustomSetUpLux.csを適当なオブジェクトにつける

f:id:bibinbaleo:20190815203111p:plain

セットするのはTargetObjだけでいいと思う。

f:id:bibinbaleo:20190815203845p:plain

TargetObjは光を当てたいメインのオブジェクトのこと。

この位置をもとにカメラやcubemapを生成している

f:id:bibinbaleo:20190815203848p:plain

WebCamの映像でIBLする

こちらからsemiSphere.objを使わせてもらう。

ユニティちゃんを超ARしてみたときのコード群 · GitHub

メモ帳に中身コピーして.objで保存した

f:id:bibinbaleo:20190815070522p:plain

内側だけ描画される半球

マテリアルは何でもいい。Unlit/Textureとかのほうがきれいに映るかな

f:id:bibinbaleo:20190816065952p:plain

そして同じgistのWebCamBehaviourScriptを作って半球に貼る。

最初renderer.matrialのところに「これは非推奨です」って赤線出たけど、

f:id:bibinbaleo:20190815070839p:plain

いったん保存してUnity戻ってスクリプトに戻ったら勝手にいい感じに変わってた。そんな機能?あるんだ。

f:id:bibinbaleo:20190815070837p:plain

エラー:Renderがない

実行したらRenderがないって言われた。

f:id:bibinbaleo:20190815073047p:plain

半球の空の親にスクリプトを付けてた。

MeshRendereがついているほうにスクリプトを付けたら治った。

f:id:bibinbaleo:20190815195414p:plain

エラー:Could not find specified video device

もう一つエラー。

f:id:bibinbaleo:20190815195327p:plain

ERROR - Could not find specified video device
UnityEngine.WebCamTexture:Play()
WebCamBehaviourScript:Start() (at Assets/WebCamBehaviourScript.cs:27)

カメラがないみたいに出てるけど、ないときは

Debug.LogError("Webカメラが検出できませんでした。");って出るはずなので他の何か。

あとでVuforiaを設定したときに分かったけど、カメラの1番目がVRHMDのDellになっていたみたい。

f:id:bibinbaleo:20190815204934p:plain

こちらの記事を参考に3番目のカメラからwebCamTextureを作るようにした。

nn-hokuson.hatenablog.com

f:id:bibinbaleo:20190815205123p:plain

new WebCamTexture()の中の最初にdevices[2].nameを加えた。

半球に映像が映り、IBLされる

うまくいくとちゃんと半球にWebCamの映像が映り、Luxシェーダーを付けたオブジェクトにIBLされます。

f:id:bibinbaleo:20190815215415p:plain

ガンマの値を上げすぎたりしていると真っ白になるので調整したほうがいい

f:id:bibinbaleo:20190815215657p:plain

 

VuforiaでAR

はっきり言ってARはもはや何でもいい。もはやARしなくてもいいまである。

とりあえずなれているVuforiaで

世界一役に立つ私の過去記事を参考にARする。Unity2018

bibinbaleo.hatenablog.com

f:id:bibinbaleo:20190816070259p:plain


IBLする前にARした時はできたのに、今できなくなっちゃった!

f:id:bibinbaleo:20190815215949p:plain

はあ

WebCamTextureを貼ったら画面が真っ黒になるし、CustomSetUpLuxをアクティブにしたら上みたいになる。AR用のWebCamが生きてない感じ。

いろいろなモデル

youtu.be

この二人を置いてみます。

f:id:bibinbaleo:20190816070403p:plain

Luxのシェーダー付けたらトマシープちゃんが変になっちゃった。でも実行すると普通になる。

f:id:bibinbaleo:20190816070359p:plain

 

f:id:bibinbaleo:20190816070406p:plain

f:id:bibinbaleo:20190816070410p:plain

f:id:bibinbaleo:20190816070416p:plain

あんまりトマシープちゃんは環境光の影響受けてない。

最後に

なんかARできなかったけど、成長は感じられたので良かった。

当時は何が分からないかもわからなくて、誰にも聞けなくて結局あきらめた。

VuforiaARが載ってるらしいよ!

f:id:bibinbaleo:20190816071031p:plain

(おまけ)IBLされない問題

以下はマテリアルにLuxのシェーダーを付けてなくて、IBLされなかった時の嘆きです。

----------------------------------------------------------------------------------------------------------------

なぜーーー IBLされない!

f:id:bibinbaleo:20190815210138p:plain

まずスクリプトで生成されるカメラとcubemap2種類がちゃんと生成されているかを見る。

cameraとCubemapをpublicにします

f:id:bibinbaleo:20190815210313p:plain

実行中見てみるとちゃんと生成されています。

f:id:bibinbaleo:20190815210715p:plain

ダブルクリックするとインスペクタを見ることができました。

f:id:bibinbaleo:20190815210309p:plain

 

f:id:bibinbaleo:20190815210322p:plain

f:id:bibinbaleo:20190815210335p:plain

ちゃんと生きてそう。

ただカメラのx位置が10になっていて半球の映像が映っていないような気がするので0にします。

f:id:bibinbaleo:20190815210906p:plain

なんで10なのかよくわからない。