点群データをUE4でボクセル表示　その１：色を変更できるキューブを作る

#はじめに
旧都城市民会館の点群データが研究や教材としての活用や、クリエーターによる自由な創作活動に繋がるよう[オープンソースとして公開](https://camp-fire.jp/projects/158741/activities/97179)されています。
そのデータを使って「[点群データをHoudiniでボクセル表示する](https://qiita.com/reisyu/items/1d57a7430139e97f2568)」で紹介した方法でボクセル市民会館を作ったのがこちら
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ボクセル市民会館からの点群市民会館からのボクセル市民会館<br>旧都城市民会館の汎用版点群データがオープンソースとして公開されました！<a href="https://twitter.com/hashtag/3DDA?src=hash&amp;ref_src=twsrc%5Etfw">#3DDA</a> <a href="https://twitter.com/hashtag/%E6%97%A7%E9%83%BD%E5%9F%8E%E5%B8%82%E6%B0%91%E4%BC%9A%E9%A4%A8?src=hash&amp;ref_src=twsrc%5Etfw">#旧都城市民会館</a> <a href="https://twitter.com/hashtag/Houdini?src=hash&amp;ref_src=twsrc%5Etfw">#Houdini</a> <a href="https://t.co/mp7q5jCeBm">pic.twitter.com/mp7q5jCeBm</a></p>&mdash; reisyu (@reisyu1) <a href="https://twitter.com/reisyu1/status/1171900821652430848?ref_src=twsrc%5Etfw">September 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

その後、「[HoudiniのアトリビュートをCSV Exporterで書き出す](https://qiita.com/reisyu/items/a626940076719434957b)」ことができたので、今回はそのCSVをUE4で読み込んでボクセル化して、その中を自由に歩き回りたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/ba820c29-6cbe-948d-6371-2cd691a246b8.png)

#環境
UnrealEngine 4.22.3

#ボクセルの色を変える方法を考える
ブループリントでマテリアルを変更する方法はUE4のチュートリアルにも情報がありました。でも変えたい色がたくさんあるときはどうするんだろう？色の種類の数だけマテリアルを作るの？と調べていたら、MozPacaさんのブログ「UE4初心者が頑張ってるブログ　[UE4 マテリアルの色をランダムに変更する](http://mozpaca.hatenablog.com/entry/20170816/1502873390)」にたどりつきました。
この内容を参考にさせていただき、ランダムではなく指定色に変更できるブループリントを作成しました。
## Materialを作る
`VoxelColor_MT`という名前でMaterialを作成。Vector Parameter を`BaseColor`という名前で作成しベースカラーに繋げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/3d18646a-2322-25a1-07e3-5ed1fe137e97.png)

##ボクセルのブループリントを作る
Actorを親クラスとして `Voxel_BP` という名前でブループリントを作成。コンポーネントを追加からキューブを追加し、このキューブのマテリアルを先ほど作成した`VoxelColor_MT`に変更します。可動性をスタティックにしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/89078683-51ec-66f7-f934-e9aec96767ec.png)

##Construction Script
`Voxel_BP`のConstruction Scriptに下記のノードを作成。Set Vector Parameter Value の Parameter Name にはマテリアルを作成したときにつけた Vector Parameter の名前 `BaseColor` を入力します。Value ピンを引き出して変数へ昇格し、変数名を `VoxelColor`にし、インスタンス編集にチェックを入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/653a9087-b2a4-fa29-4d11-f38325d91eee.png)

##Voxel_BPの動作確認
レベルにVoxel_BP をいくつか配置して VoxelColor を変更できるか動作確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/45500215-0043-5cf4-b602-bf6b5831d166.png)
自由に色を変更できるキューブができました。次はCSVデータをUE4に読み込んでいきます

#UE4にCSVデータを読み込む
##読み込むCSVデータ
今回読み込むCSVデータは[Houdiniで点群データを整理し](https://qiita.com/reisyu/items/1d57a7430139e97f2568)、[HoudiniのアトリビュートをCSV Exporterで書き出した](https://qiita.com/reisyu/items/a626940076719434957b)ものです。
ID：0からの連番、Px,Py,Pz：座標値、Cdx,Cdy,Cdz：RGBカラー　を表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/0b3692c9-a034-6ff4-911d-66bc7551804d.png)

##構造体を作成する
コンテンツブラウザの新規作成 > ブループリントから構造体を作成し、名前を`VoxelTable_STR`としました。`VoxelTable_STR`を開き次のように設定します。すべてFloat型です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/afa832cb-882c-b5a8-df39-8daf340156a5.png)

##CSVファイルを読み込む
CSVファイルをコンテンツブラウザにドロップすると下記のダイアログが表示されるので、先ほど作成した`VoxelTable_STR`を選んでOKを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/a2240b90-8117-0f44-26a0-70fb88bb11b0.png)
コンテンツブラウザ内にデータテーブルが作成されるので開いて確認すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/a3c95eba-3529-dd47-40f9-210c7a3e879f.png)
無事に読み込まれていました。

#つづく！
次はテーブルの座標値と色情報を使ってVoxel_BPをレベルに並べていきます。
[点群データをUE4でボクセル表示　その２：Blutilityでボクセルを配置する](https://qiita.com/reisyu/items/a6fdef7ff176e7a90313)

#参考
UE4初心者が頑張ってるブログ　[UE4 マテリアルの色をランダムに変更する](http://mozpaca.hatenablog.com/entry/20170816/1502873390)
ヒストリアさんのブログ　[[UE4] CSVデータを扱う方法　DataTable編](http://historia.co.jp/archives/779/)
[旧都城市民会館の点群データが完成！](https://camp-fire.jp/projects/158741/activities/97179)