2017-04-12

InkPainterがリリースされました

Unity InkPainter

おしらせ

InkPainterを正式にGitHubおよびAssetStoreで公開しました。

GitHub - EsProgram/InkPainter: Texture-Paint on Unity. Asset Store

もともとUnityTexturePaintとして販売し、国内外様々な方から色々な意見、レビューをいただいていたのですが、ある時期にAssetStoreから「似たような名前のプロダクトが既に存在し、混乱を招くので」ということで、AssetStoreから削除されてしまいました。

Textureにペイントを行えるプロダクトは確かにいくつかあるのですが、プロダクトごとに個性があるので、AssetStoreでの公開は辞めたくないなと思い、リネーム等の作業を行いリリースし直したのがInkPainterになります。

この作業に伴い、主にディレクトリ構造、ネームスペース、クラス名等改修が入っていますので、ご注意ください。

また、ドキュメントのURLも変更になりました。 InkPainter: Main Page

UnityTexturePaintをご利用下さっていた皆様にはご迷惑をお掛けして、大変申し訳ございません。

新しくなったInkPainterをご利用いただき、ご意見いただけましたら幸いです。

できること

ランタイムにテクスチャへの書き込みが可能になります。 InkPainterと名付けたので、インクっぽさを追求していくつもりです。例えばこんなことができます。

f:id:es_program:20170401115516g:plain:w420

Unity Texture Paint
雨の日カメラ with Unity

今後の事

さて、お知らせという事でお堅い文章ズラズラと書きなぐりましたが、ここからは今後のリリース予定についてザックリとメモしていきます。こうする事で、僕が開発から逃げる可能性が減ります。

Inspectorに表示されるUIのカスタマイズ
ブラシ画像を回転させて塗布する機能の追加
動画によるHow toや応用事例紹介
ComputeShader実行可能環境におけるペイント処理にGPGPUを用いた高速化が望めそうならば実装

因みに現在ComputeShaderが利用可能な環境は以下のようになります(https://docs.unity3d.com/ja/540/Manual/ComputeShaders.html より引用)

DirectX 11グラフィックスAPIとShader Model 5.0 GPUを伴うWindowsとWindowsストアアプリケーション
現段階で一般的に使用されているコンソール (Sony PS4、Microsoft XboxOne)
現段階で一般的に使用されているOpenGLプラットフォーム (LinuxかWindows上のOpenGL 4.3、Android上のOpenGL ES 3.1)

Mac OS X は OpenGL 4.3 に対応していないため、コンピュートシェーダーはまだ利用できません。

ここらへん効果があるのか、効果があるとしたらどの程度なのかが詳しく分かっていません。ペイントを施す場合、たとえ同じマテリアルのオブジェクトが2つあったとしても、テクスチャを別物として扱う必要があり、マテリアルのコピーが発生するため、バッチングが効かなくなります。オブジェクトが多すぎて描画処理のネックとなるのがこの部分であることが大半なので、恐らく大きな効果は見込めなさそうに思います。

2017-04-03

雨の日のカメラを作る

C# Unity Shader UnityTexturePaint Graphics

はじめに

カメラのレンズに雨が付着した感を出してみました。

ささっと作ったのですが、ちょっといい感じになったので自分で驚いてます。雨粒が付着した部分は背景の映り込みが歪むようになっています。

Unity Standerd Assetに含まれるガラスシェーダーを使いまわしたので、10分くらいで実装することが出来ました。

実装方法

UnityTexturePaintを使います。

github.com

まずは以下の画像のように Assets -> Import Package -> Effectsを選択して、Glass Refractionをインポートします。 Glass Refractionでは、GrabPassで取得したテクスチャと法線マップを使い、写り込んだ背景を歪ませる処理が行われています。このシェーダーをそのまま利用し、透明な状態で法線情報だけを更新していき、水滴が付着したように見せるという寸法です。

f:id:es_program:20170403212428p:plain:w600

次に、カメラ正面にQuadを置き、Quadのマテリアルを先程インポートしたGlassRefractiveに変更し、テクスチャを真っ白なものに差し替えます。QuadのコンポーネントにDynamicCanvasとHeightFluidをアタッチしたら準備は完了です。

f:id:es_program:20170403213207p:plain:w600

あとはTexturePaintを使って、Quadの適用な位置にHeight(液体の付着量)情報をペイントしてやります。

具体的には

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Es.TexturePaint;

public class RainPainter : MonoBehaviour
{
    [SerializeField]
    private DynamicCanvas canvas;

    [SerializeField]
    private PaintBrush brush;

    [SerializeField]
    private float minSize;

    [SerializeField]
    private float maxSize;

    [SerializeField, Range(0, 100)]
    private float aboutCallPercentOnFrame = 10;

    private void OnWillRenderObject()
    {
        if(Random.Range(0f, 100f) > aboutCallPercentOnFrame)
            return;

        for(int i=Random.Range(1, 10);i>0;--i){
            brush.Scale = Random.Range(minSize, maxSize);
            canvas.PaintUVDirect(brush, new Vector2(Random.Range(0f, 1f), Random.Range(0f, 1f)));
        }
    }
}