【UE4】嘘パースで遊ぼう

## はじめに

**これを見てもらうのが早いです！**

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">嘘パース設定がお手軽になった。<br>カメラフォーカス設定を真似して、対象Actorを指定するようにした。パースが変わる面のデバッグ表示も追加。<br>かなり使いやすくなった… はず。<a href="https://twitter.com/hashtag/VRM4U?src=hash&amp;ref_src=twsrc%5Etfw">#VRM4U</a> <a href="https://twitter.com/hashtag/UE5?src=hash&amp;ref_src=twsrc%5Etfw">#UE5</a> <a href="https://t.co/o6h1ToJ2BR">pic.twitter.com/o6h1ToJ2BR</a></p>&mdash; はるべえ haru (@ruyo_h) <a href="https://twitter.com/ruyo_h/status/1437180470026911744?ref_src=twsrc%5Etfw">September 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

----


**パースを使ったギミックに興味が湧いたでしょうか？**
私が思うパースの面白ポイントは以下のとおりです。

 - 見た目の迫力がある
 - いろんな実現方法がある
 - 操作性について工夫の余地がある

使うだけでなく、作るのも楽しいです。
今回は手軽にこの楽しさを味わえるよう、実際に**「嘘パース」を実装する例**を紹介します。


:::note info
「嘘パース」について、ここでは「カメラに近いものが より大きく見える」という効果として説明します
:::

**利用したUEのバージョン**
UE4.27.1 ＆ UE5EA

**利用したキャラクタモデル**
Twitterのリンクで利用しているのは [シェンナさん](https://rokota.booth.pm/items/2661189) と [シアノスさん](https://rokota.booth.pm/items/3224415) です。
実装サンプルはVRoidStudioより [AvatarSample_Aさん](https://hub.vroid.com/characters/2843975675147313744/models/5644550979324015604) です。
感謝！


## 嘘パース実装の方針

簡単に言ってしまえば「カメラに近いものが より大きく見える」ようになれば良いです。
以下の2つのアプローチが思いつきます。順に作って紹介します。

 - 骨アニメーション（移動・スケール）で制御
 - マテリアルで制御

##骨を使った嘘パース
###伸ばす・スケールする
**骨を動かしてAnimationSequenceを作成します！**

|リターゲティングオプションを Animationに設定し、骨を動かす|
|-|
|![anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/e2529315-0d32-915c-487c-3427fba2fe62.png)|


|通常|腕骨を伸ばす|手骨を拡大する|
|-|-|-|
|![ScreenShot00034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/bc592f40-a947-e4b3-b97a-9d0962d79314.png)|![ScreenShot00035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/998f387c-7957-5ea2-f19c-01c88ce5e279.png)|![ScreenShot00036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/2bd239d3-0d28-d7d6-cdf4-374082d426fe.png)|

|上から見た図（左から  通常 / 腕伸ばし / 手拡大）|
|-|
|![ScreenShot00037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/1c3e1305-54ae-8eee-1e81-124c091d8077.png)|


**簡単！** …ですが、**エディタ上でのお手軽な調整には不向きです**。動的な制御をする場合はAnimBPやControlRigに仕込む必要があります。
ゲームプログラム的な視点では、スケールによる揺れ骨やコリジョンの整合性も気になります。

一般的にはDCCツール（MayaとかBlender）でカットシーン（カメラを含めた全アニメーション）を作るような作業フロー向けだと思います。
もちろんUE4上でもカットシーンは作成できますが、骨の細かな制御には難アリです。

もっと手軽 かつ 汎用的に使いたいので、**マテリアルでなんとかする方法**を考えます。

##マテリアルを使った嘘パース

###頂点をカメラに近づける
**「カメラに近いものを より近づける」ようにマテリアルを組みます！**
WorldPositionOffsetによって、頂点をカメラに近づけるよう変形します。

|カメラに近いものが より近づく|
|-|
|![node0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/46e0ab82-9991-bdbe-95b8-f7c4d231e1b5.png)|

|通常|手の頂点をカメラに近づける|
|-|-|
|![camdire0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/c9db5330-e710-bed6-9ae8-026c0a0a035d.png)|![camdire1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/b9abd67b-972e-cf99-007f-3ba0cb491582.png)|

一見良さそうな結果に見えます。しかし実際に使ってみると構図を決めづらいです。
カメラを左右に動かすと違和感があります。腕の向きが変化するような見た目になります。
<img width="75%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/45c910fe-3e3f-f940-eb09-3b6d95aec4d1.gif">

扱いづらい理由は「カメラの注視点を中心に拡大している」からです。**中心を変更する方法**を考えます。


###頂点をカメラに近づける 改良版
**前段の方法にパラメータを追加して、拡大の中心点を指定できるようにします！**

|カメラの向きを考慮して近づける|
|-|
|![node1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/7480eca5-341f-2bec-3a2d-ceb5c21d2218.png)|

扱いやすくなりました。
カメラを左右に動かしても自然に変形します。（スケール中心座標を右手に設定しています）
<img width="75%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/b264063e-a3d9-bad4-871c-23ef6ef68f28.gif">

これで嘘パースとして、十分使いやすい機能になりました。

ただ細かい点を挙げるなら…

- 遠近法で拡大したように見せているため、頂点がカメラに近づきすぎるとモデルの見た目が歪む
- 深度がズレるため、被写界深度(ピンぼけ)を併用した調整が難しい
 
色々解消するため、**投影面で変形する方法**を考えます。


###投影面上で拡大する
**スクリーン座標で拡大します！**
(中身は煩雑なので気にしなくてもOKです。興味ある方だけどうぞ。拡大方向の計算がちょっと面倒です…）

|投影面に沿って拡大する|
|-|
|![node3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/22be4de2-953a-272a-67e2-1f93cde8015a.png)|

これにて、モデルが破綻しにくくなりました。


|通常|手の頂点を投影面で拡大する|
|-|-|
|![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/b9ce618a-1a03-8248-bf8c-a99f9004f434.png)|![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/6df1cefe-545d-5c43-6e4a-dc9a8db55c2d.png)|

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">嘘パース<br>投影面で変形する様子<a href="https://twitter.com/hashtag/VRM4U?src=hash&amp;ref_src=twsrc%5Etfw">#VRM4U</a> <a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://t.co/UQJgdp6uCm">pic.twitter.com/UQJgdp6uCm</a></p>&mdash; はるべえ haru (@ruyo_h) <a href="https://twitter.com/ruyo_h/status/1468190766144970753?ref_src=twsrc%5Etfw">December 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さぁ準備は整いました！

## エディタ上で遊んでみよう

|||
|-|-|
|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パース制御が簡単で、面白くなってきた！<br>操作性は重要やね。<a href="https://twitter.com/hashtag/VRM4U?src=hash&amp;ref_src=twsrc%5Etfw">#VRM4U</a> <a href="https://twitter.com/hashtag/UE5?src=hash&amp;ref_src=twsrc%5Etfw">#UE5</a> <a href="https://t.co/UtVHGiG0gH">pic.twitter.com/UtVHGiG0gH</a></p>&mdash; はるべえ haru (@ruyo_h) <a href="https://twitter.com/ruyo_h/status/1439718946836525067?ref_src=twsrc%5Etfw">September 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パースを変えつつ、指先を固定。<a href="https://twitter.com/hashtag/VRM4U?src=hash&amp;ref_src=twsrc%5Etfw">#VRM4U</a> <a href="https://twitter.com/hashtag/UE5?src=hash&amp;ref_src=twsrc%5Etfw">#UE5</a> <a href="https://t.co/yA3y1lOtUU">pic.twitter.com/yA3y1lOtUU</a></p>&mdash; はるべえ haru (@ruyo_h) <a href="https://twitter.com/ruyo_h/status/1438629518139219972?ref_src=twsrc%5Etfw">September 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|

パースを利用すると、ひと味違った絵が出て新鮮ですね。Blueprintと連動させて操作性を上げるのも楽しいです。

**ちょっと不便な点**
マテリアルによる制御では、不必要なパーツも拡大されてしまうことがあります。
より細かな制御をするには、拡大エリアのマスク処理等が必要そう… ですが、そこまでやるなら骨による制御を追求した方が良いかもしれません。
だんだんお手軽じゃなくなってきますね。

##おわりに

嘘パースが動く様子を紹介しました。パースで遊んでみたくなりましたか？
色々工夫して、迫力ある絵を作ってみましょう！

**「細かいことは置いといて、とにかく使ってみたい！」**という方は… 拙作ですが [**VRM4Uプラグイン**](https://ruyo.github.io/VRM4U/) **でお試しできます（宣伝）**
これは私が個人活動で作成している、UE4/UE5用のVRMモデルインポーターです。
プラグインにはこの他にも、キャラパース変更の機能があります。興味あればお試しどうぞー

おわり