AR上にShaderを動かしてみた

本記事は[Unity Advent Calendar 2018](https://qiita.com/advent-calendar/2018/unity)の9日目の記事です。

半年前ぐらいにこんなものを作りましたが、ちょっとするとShaderがジャギってくるので解決できないか調査してみました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">これを調査しようと考えていたんやけども<a href="https://t.co/FCVPyMG8FV">https://t.co/FCVPyMG8FV</a></p>&mdash; gremito:#ものラジ (@grem_ito) <a href="https://twitter.com/grem_ito/status/1071816164882374656?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

## 環境


- Unity 2018.1.0f2
- AR: [Vuforia Core Samples](https://assetstore.unity.com/packages/templates/packs/vuforia-core-samples-99026)
- 端末: SAMSUNG GALAXY note 8

## 作った経緯

いろんなサイトを参考に初歩的なところを抑えながらShaderのソースコードを書いていました。

```
Shader "Custom/MyShader" {

    Properties
    {
        _MainTex("MainTex", 2D) = "white"{}
    }

    SubShader
    {
        Pass
        {
            CGPROGRAM

            #pragma vertex vert_img
            #pragma fragment wave_circle_frag

            ENDCG
        }
    }    

    CGINCLUDE
    #include "UnityCG.cginc"

    float4 wave_circle_frag(v2f_img i) : SV_Target
    {
        float2 st = i.uv;
        float distort = st * (1.0 + 0.1 * sin(st.x * 5.0 + _Time.z) + sin(st.y * 3.0 + _Time.z));

        return step(
            0.5,
            abs(sin(distance(float2(0.5, 0.5), distort) * 30))
        );
    }

    ENDCG
}
```

### 試しにGPUを使って解決できないか試してみた

- [グラフィックスパフォーマンスの最適化](https://docs.unity3d.com/ja/2018.1/Manual/OptimizingGraphicsPerformance.html)
- [【Unity】GPU Instancingで遊ぶ](http://tsubakit1.hateblo.jp/entry/2016/06/28/233000)
- [【Unity】パーティクルをGPU Instancingで描画してみる & 対応シェーダーを自作してみる](http://tsubakit1.hateblo.jp/entry/2018/01/30/012440)
- [Unity の GPU Instancing に対応するシェーダのコードを調べてみた](http://tips.hecomi.com/entry/2018/09/24/232125)

などを参考に`Instancing`を付けて動作させてみたところ**全く状況変わらず**でした。  

となると、単純に計算のずれから起きているものだと思ったので、他ShaderをAR上で動かそうと考えました。


## 他のShaderを使ってAR上で動作

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">シェーダーお絵描き入門勉強会の資料を公開しました🙇 <a href="https://twitter.com/hashtag/spzcolab?src=hash&amp;ref_src=twsrc%5Etfw">#spzcolab</a><a href="https://t.co/kwRANl48uC">https://t.co/kwRANl48uC</a></p>&mdash; setchi (@setchi) <a href="https://twitter.com/setchi/status/983912323239690241?ref_src=twsrc%5Etfw">2018年4月11日</a></blockquote>

の資料を参考に一部のShaderを書いて動作してみたところ、以下のようにキレイに動作することを確認しました。  

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">結局、sin関数内の計算 or _Time. の掛け算で数値がずれたっぽいから別のShader書いて試してみたところ、問題なかった😇笑<a href="https://t.co/1RDGQe2Bcq">https://t.co/1RDGQe2Bcq</a></p>&mdash; gremito:#ものラジ (@grem_ito) <a href="https://twitter.com/grem_ito/status/1071816671554203648?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>


## まとめ
まだまだShader勉強中なので、作りたいものを普通に作れるぐらい習得したいなと。
また最初の方から、パフォーマンスを意識した作りをできるようなれるように楽しんで覚えていきますー！
＼＼\\٩( 'ω' )و //／／


また今回、Advent Calendarの記事でアップしましたが遅れてしまい失礼しましたm(_ _)m

FirebaseとUnityに関するネタで前編後編を[Unity Advent Calendar 2018](https://qiita.com/advent-calendar/2018/unity)と[Firebase Advent Calendar 2018](https://qiita.com/advent-calendar/2018/firebase)で投稿しようと考えていたり、Unity2018の最新でLINQはパフォーマンス的に使えるのかなども書こうか迷ってしまい、寝かせていた半年前ぐらいにAR上でShaderを動かしたプロジェクトのジャギっている問題を調査・解決するネタで書こうと思い、上記のようなことで遅れてしまっての投稿となってしまいました。。。笑汗  

他にもAR上にShaderを動かすネタでやりたいことが1~2個あるんで、また何か試して来年どっかでアップしようと思いますー( ✌︎'ω')✌︎