![見出し画像](https://assets.st-note.com/production/uploads/images/92584022/rectangle_large_type_2_3692042c93c7d71688a1150207aa9c8a.png?width=1200)
マテリアルとBPを使った万華鏡表現
Unreal Engine (UE) Advent Calendar 2022の4日目の記事です。
作ったもの
UE5 Kaleidoscope Test
— くろさわ (@kurosaurus) November 30, 2022
No VAT#UnrealEngine pic.twitter.com/OtdFVqCDbw
たのしい…! pic.twitter.com/kotNN1kvIH
— くろさわ (@kurosaurus) November 30, 2022
元ネタ
![](https://assets.st-note.com/img/1670059460020-gy8h9beAaU.png?width=1200)
このような表現は一般的にはVATで表現したくなるところですが、VATは制作コストもデータサイズも高いので、もっとお手軽に作る方法を考えました。
※ 一般的にVATは描画コストは低いですが、非圧縮のHDR画像を必要とするのでデータサイズは大きめです。
考え方
一見かなり複雑な動きをしているようですが、よく見ればシンプルな特徴に気が付きます。
![](https://assets.st-note.com/img/1670130303088-XGexN5pcab.png?width=1200)
![](https://assets.st-note.com/img/1670130414681-bCzeqHltgE.png?width=1200)
![](https://assets.st-note.com/img/1670130839098-sUvf5qCpLL.png?width=1200)
![](https://assets.st-note.com/img/1670131247915-qmwEtQNRKV.png?width=1200)
これはマテリアルで行います。
![](https://assets.st-note.com/production/uploads/images/92574599/picture_pc_8b476ea6136a383b6b0701f26a5c7f0b.gif?width=1200)
オブジェクトを配置する
たくさんのオブジェクトを配置するので、手動で配置する方法のほかに、コンストラクションスクリプトでプロシージャルに配置する方法が考えられます。
今回は手動で配置する場合で解説します。
それぞれのオブジェクトに回転を加えつつ、グローバル座標で360°/Nづつ回転を加えるのは手動では計算が困難なので、SceneRootを使います。
SceneRootでは360°/Nづつのグローバルな回転を行い、メッシュの回転には同じ値を入れます。
同じ値の回転が加わることで、万華鏡のような鏡写しの関係にみえます。
![](https://assets.st-note.com/img/1670131911292-MGd9MOWG7G.png?width=1200)
例えばSceneRootB Mirrorは1個目の回転セットなので、90°回転しつつ、スケールにマイナスを入れます。
![](https://assets.st-note.com/img/1670132420213-UuWo2k2aTf.png?width=1200)
マテリアルによるオブジェクトのカット
任意の平面でオブジェクトをカットするにはWorldPositionとの内積で計算できます。
![](https://assets.st-note.com/img/1670060436743-s2JJRNHn1N.png?width=1200)
しかしこのままでは平面の角度を定義しにくいので、Directionの値をsin(rot)とcos(rot)から求めます。rotは0-1で一周します。
![](https://assets.st-note.com/img/1670061076764-AfUOJitwZE.png?width=1200)
同じ仕組みをもう一つ作って、終端まで角度をずらし、反転してminで和集合をとればピザ型の範囲を取得できます。
rotは0-1で一周するので8つの始端と終端は、1/8(=0.125)の差を設ければいいわけです。
カットしたい場合にはマテリアルをMaskedにしてOpacity Maskに接続してください。
![](https://assets.st-note.com/img/1670061234490-VUj8SR8PJ7.png?width=1200)
オブジェクトを回転させる
オブジェクトを回転させるには、シンプルにTickでRotationを更新するだけです。
Combine Rotatersを使うと、任意の軸で回転できます。
ちなみにRotaterの値に直接加算する場合、Pitchは90°以上は回転しなくなるため、回転にかなりの制限を受けます。そのためCombine Rotatersのようなクォータニオンの回転を使うのが便利です。
![](https://assets.st-note.com/img/1670062478933-5fRKdw07NZ.png?width=1200)
いかがだったでしょうか?
一見複雑な表現でも、法則性さえ見つければかなり簡単に実装できることがわかるかと思います。
ぜひ遊んでみてください。
この記事が気に入ったらサポートをしてみませんか?