ぐーるらいふ

底辺。

【Unity】InkPainterをちょっと理解してみたかった

お疲れ様です。
年末商戦とか関係なく休日が潰れてしまうぐーるです。
ゼノブレイド2を買ったのですが、全然出来なくて困ってます。

InkPainter

突然ですが、InkPainterってご存知でしょうか
f:id:ghoul_life:20171212221512p:plain
https://www.assetstore.unity3d.com/jp/#!/content/86210
Unityでスプラトゥーンごっこが出来ちゃう!しかも無料!

製作者さんはこちら
esprog.hatenablog.com
twitter.com

「おおー、すげー」で終わらせたいのだけど、

内部的にどうなってるのかな?
最小限で必要な要素ってなんだろう?

とふと気になったのでちょっと調べてみました。

最小構成の全体の流れ

まずは流れを掴むためにnormalmapもheightmapも無視した状態の最小構成を調査しました。
最小限必要な処理の流れを抜き出してみると

  1. materialからmainTextureを取り出して、RenderTextureにコピー
  2. materialのrenderTextureとmainTextureを差し替える(renderTextureがセットされた状態になる)
  3. bufferを利用してrenderTextureにインクを描画する

というすごくシンプルな実装という事がわかった。

最小構成に整理したスクリプト

オリジナルのInkPainterを読むと色々と機能があるが、
最低限必要なものだけを抜き出して整理したスクリプトはこんな感じ。


最小構成のシェーダー

shaderもcgincで共通化されていた箇所を取り出してきて、
1ソース内に収めて、整理したらこんな感じ。


Unityプロジェクトに落とし込む

1.Unityでprojectを作る
f:id:ghoul_life:20171212190149p:plain

2.planeを生成してカメラを調整でもしておく
f:id:ghoul_life:20171212190153p:plain

3.Scriptを作る(ソースは上に)
f:id:ghoul_life:20171212190211p:plain

4.Shaderを作る(同じくソースは上に)
f:id:ghoul_life:20171212190218p:plain

5.リソースを用意する(brushとmainTexture)
f:id:ghoul_life:20171212190208p:plain
f:id:ghoul_life:20171212190248p:plain
f:id:ghoul_life:20171212190257p:plain
↑使用したリソース二つなのだけど、見えないかも…?

6.materialを作り、planeにアタッチ
f:id:ghoul_life:20171212190156p:plain

7.Scriptもplaneにアタッチ
f:id:ghoul_life:20171212190221p:plain

8.実行する
f:id:ghoul_life:20171212190446p:plain
マウスでドラッグした箇所にブラシで設定したテクスチャの
形に描画をすることが出来るようになっており、
ゲームを止めて起動し直すと全てが初期化されているのが
確認出来ました。(リソースを破壊してない)

感想

この実装ではマウスでやってるけど、ボールが転がった跡にしたり、
一定時間で消したりとか使用用途はありそう。

平たく言えば

「テクスチャの上にブラシテクスチャで描画出来るようにしただけ」

になってしまったが、
mainTextureをコピーしてRenderTextureを作り、
それを利用してカスタマイズした表現をするという方法を理解して貰えればと。

normalmapも合わせて色の変化やにじみとかもやれるようにすると
もっと表現の幅が広がりそうなのでもしかすると続きを書くかも。

とりあえず一旦ここまで。
ゼノブレイド2やるぞーやるぞー…。

追記

Unity 5.6.0以前で開くと、エラーが出ていた。
Shaderに

#include "UnityCG.cginc"

が必要みたいだったので、追記しておきました。