ピクセル化して消えるマテリアル

## 0.相変わらず結果から見る
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">シェーダー？ <a href="https://t.co/LkKHija8Ev">pic.twitter.com/LkKHija8Ev</a></p>&mdash; 雙山 (@DrunkSouzan) <a href="https://twitter.com/DrunkSouzan/status/1738876947852366169?ref_src=twsrc%5Etfw">December 24, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ピクセル化して消えたり現れたりするね。

## 1.事前準備
いきなりだけど、新しいマテリアルを作って、このテクスチャー表面の座標を全部手に入れる、単位化する
（（0,0,0）はモデルの中心）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/146a8843-7194-b916-e5fd-1d4ec3fbc765.png)
UEのノードは以下の通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/0707ed54-eb28-6381-2be1-3a5b958231de.png)

## 2.ピクセル化する
今のアニメーションは先の単位座標全部<font color="red">**8**</font>倍で乗算して、Ceil算法で計算して
<font color="red">**8**</font>に割る（ここの８は自由に変わって大丈夫です）
上手く行けばこんな感じになれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/6ffcef7d-f4df-2da3-f345-1eb9ec060402.png)
でも今だと横行と立行は別々な感じで完全にピクセル化**されてない**
それの対策として
テクスチャーのX座標、Y座標をZ座標に掛け算する
横軸のピクセル化と縦軸のピクセル化を組みたつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/08dc35b7-d9fc-0845-033e-ff08cb0ca3fa.png)
こうするとピクセル化は成功した
ここにPerlin乱数図のUVに導入すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/2a0ecfcc-acf6-3dfd-cc34-ba42cf7266e1.png)
UEノードは以下の通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/6cbb0648-d5e7-4d93-eda7-b858e50300a9.png)

## 3.消える
同じ原理でもう一つ真っ白（テクスチャーなし）のテクスチャーを処理して、但しXY座標とZ座標の掛け算をしない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/995068a4-b17e-4aad-ed62-fde086237181.png)
このテクスチャーを変数αと足し算する
但しαはー1から１まで変化する（三角関数）
![111 00_00_00-00_00_30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/385c27d0-790c-388a-80b8-9dc736f80c96.gif)
先できた消えるテクスチャーと最初のピクセル化したテクスチャーを引き算すると
真っ黒（０以下）と真っ黒じゃない（０以上）の部分ｇはできた。
![WeChat_20231224193829 00_00_00-00_00_30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/fff3bc69-c160-ee80-254b-a405b74b0606.gif)
これでもうすでにピクセル化して消えるエフェクトはある程度見えるですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/caeee02f-2db5-74a3-7456-c4ebe8ee6070.png)
UEのノード↑
## 4.発光する
　随分良く見えてると思う人もいると思うけど、消えるならちょっと消えている部分は発光するとか、がある方がもっといいよね
 　そのために!先のテクスチャーを<font color="red">**3**</font>の階乗を求め、絶対値を計算する
   前と同じく赤の部分は自由に設定できる（大きいほど発光する部分が小さくなる）
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/1edf4218-5c8d-3b8f-e670-0915096381ef.png)
　そして、１ーこの絶対値を算出したら只今消えている部分だけが黒（０以下）ではない![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/b9117a70-4174-cf19-c885-715add0f63d0.png)
　ここで、先の算出したテクスチャーを好きな色に染めると発光の感じがある。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/75eb2cce-424c-d0ab-2b86-60656b9933ea.png)
　UEのノード↓
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/852f716a-0ee4-19ef-4abe-8164fb35bd94.png)
 

## 5.最後に
　黒（０以下）の部分を全部透明化して、発光部分と足し算したら、最後の結果ができた。
　テクスチャーや法線マッピングが欲しい場合は見える部分（０以上）に足し算すればいい
  
![WeChat_20231224194021 00_00_00-00_00_30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/1938cbbb-5bbf-6863-7cac-31d7830b3198.gif)

 以上
 UEのマテリアルの変数機能を使えばマテリアル実例とかで色んなモデルやテクスチャーも実現できるよ！