見出し画像

AR Journey 16: ポータルAR + バーチャルギャラリー

Happy New Year🐉
今年はいい事がありますように。人生を楽しめますように💫
今回はねー架空のドアを配置して、中に仮想世界があるポータルARを活用した!
バーチャル個展的なものを作ったお!



ポータルARとは?

現実の世界の空間に架空のドア/入り口を設定して、そこから仮想世界へ移動することができるエフェクト。
VRとかMRとかメタバースとかと似たようなもんやんとは追ってるかもしれないけど、一応現実空間に設置されるため、まだARよ! VR/MRと違うのは、ゴーグル不要でスマホ1本で体験ができること!
例えば、みんなご存知のどこでもドアがそういった役割を果たしてるでしょ?
実際に行けない場所や実在しない場所へバーチャルアクセスつることで、リアルな体験ができちゃうのさ〜!

イメージコンテ

バーチャル空間を作るからには、総合性が求められるようになると思う。
その空間の中にプラスで仕掛けを入れて、非現実的な体験ができる。

ドアーの作成

他のポータルARでは滅多に見ない半円形ドアーにしてみた。円の頂点を半分消して半円にしてEキーで伸ばして作られた。扉が上にウィーンと開くアニメーションを追加した。


バーチャル空間の作成

ギャラリーの図面

ドアの向こうの空間にバーチャルギャラリーを作った。私の個展をバーチャルで開くようなもんね! 自分の描いた作品を、実際に展示会で展示できなくても、ARではできるのさ〜!
ほとんどは紙やiPadで描いた絵だけど、中には加工・修正して作ったものもある!
幅や天井の高さがあった方が、広々した雰囲気出せるでしょう。

ギャラリー画像の挿入


平面メッシュに入れることを勧める。立方体だと入れ込んだ時になんか大きくなってピッタリ埋めるのが複雑になるようで。
また、画像テクスチャーを入れると、なぜか右に勝手に回転されるんだけど。おかしくない??
そういう時に私は〜…

元の画像を左回転にさせてそれを画像テクスチャーで入れ込む。


また、新しい解決策を教わった✨ それがこれ⬇️

UV Editing tool
UV Editingツールで左でSキーで拡大縮小して範囲内に合わせること!!


⚠️ 新たな問題点 ⚠️

次の日にBlenderを開いたら、なんか画像が右回転されてて幅が伸びてたんだけどなんで!?
おそらく保存して閉じていた時に、左回転してたのを元に戻したからだと思ふ。

UVチェックしてみたけど、異常は見られなかった。仕方ないので、一回テクスチャーを外して、元に戻してたのをまた左回転させた。

ポータルのオクルーダー作成

Portal occluder tutorial

空間ボックスの外に、周りに合わせて人真っ割り大きめに作る。中央にドアの形に沿って、辺の線 (⌘R) を追加していくのさ!
中央に形ができたら、それを編集モードで選択してXキーで面を消す。半円形のドアーなので、ちょっと線が多めだから、直すときちょっとあれだった。

前の面の壁を建てる

空間を作り終えたところで、前の面の壁を作る。ないままだと、そこだけ丸見えです。中身を作る前に作ってあるとやりにくいし、修正する時でもめんどくさいので、別で作っていくのがいいと思ふ。裏の壁には好きな色で割り当てるだわ!

Loadingセグメント → ドアーポップアップ

After Effectsで3つの点のアニメーションを作成した。ARではドアーがあ最初からあるっていうより数秒ぐらい待たせる感じ?(もっと下に行けばわかる)
3秒後にこれが消えると同時ドアーがポップアップする演出なのだ!

オクルーダーで外側を隠す

ドアーは少し大きくする。

ギャラリーに入る

いよいよギャラリーの中へ!
Spark内にインポートしたギャラリー空間はこのようになったのでありんす。幅の長さを試行錯誤して広さを調整していった…
しばらくすると、真ん中の画廊にタップを誘導するものが出てくる。タップするとユニコーンが飛び出てくるのだ!

ユニコーンのモデリング + アニメーション

今回もさらに本格的なものに挑戦したのだ。待望のユニコーン!!🦄✨
正面、横、上からの馬の画像を参照に入れて、平面メッシュを使って形をトレースしたよぅ!
それができたらモディファイアー ▶︎ ミラーを適用! あちこち調整する時に綺麗に対称的にできるから楽な機能だ✨

こんな感じにできた〜。耳がちょっと小さいかな? だからこのあと大きくした👍

そこで次はリギングをしていくんだけど、一からリギングするよりもっと簡単にできるツールを知った。

Auto Rig Pro: 有料💰自動的にリギングされる。
Rigify Animbox: 無料✅ 犬、猫、馬を歩かせる&走らせるアニメーションを簡単にできる。しかもオリジナルの形を自分好みに変えられるらしい。

このどれかをダウンロードしたら、zipのままプリファレンスのアドオンにインポート☑️つける。
結局一からリギングして自力でアニメーションつくることに。

ジャンプ→走る

それぞれの足を動かした。ジャンプはなんとかできたけど、走るアニメーションが意外と大変だった。ジャンプ同様最初は前と後ろの両足を同じ動きでやってみたんだけど、なんかカンガルーみたいになってもうたので、動画やアニメーションの参照画像を元に12コマ組みましたべ。
動画をスローモーションで見てみたら、4本違う動きをしていた事がわかった。なので、急遽4本ともやり直すことになった。フレーム60から170まで走るアニメーション組んで、再生してみたらなんかそこだけスローモーションになってたw
そこで走る部分のキーフレームを圧縮して、フレームの終わりまでに複製した。
そうしたら「パカラッパカラッ」って聞こえてきたわ!w

⚠️ 問題点 #2 ⚠️

ジャンプ ➡️ 一瞬止まっている ➡️ 走り去る
一瞬止まっている時になんか引きずってるし、ジャンプの着地が出入口手前だから肝心の走るところが見えない!!!!

Animation → Keyframe → 3D Position
キーフレームのパッチ初めて使ったわ〜〜!

そこでSpark内Keyframeパッチを使って、動きをコントロールするっていうのだ! 右上の矢印をクリックするとキーフレームの編集画面が出てくる。

ここでXYZの位置を◇を動かす or 左下に数値を入力して、Addの右にある ◇+ クリックでキーフレームを挿入する。

こうなってできただわー!!


Instgramでバーチャル個展をお楽しみ下さりまし〜!!🦄✨

この記事が気に入ったらサポートをしてみませんか?