なおしのこれまで、これから

学んだこと・感じたこと・やりたいこと

VRChatで使えるホワイトボード

はじめに

今年の3月ぐらいに少しVRChatに触れました。たまたま初ログイン時にシェーダーが滅茶苦茶出来る方がいてシェーダー芸を見せてくれました。そこから、少しずつシェーダーを勉強しています。

今回紹介するのは5月ぐらいに作ってみた書くことが出来るホワイトボードです。

また、この内容は部活内LTで発表しました。仕組みについてはこちらを参照してください docs.google.com



準備

まず、カメラをCreateして次のように設定します。 f:id:vxd-naoshi-19961205-maro:20181112232211p:plain

  • ProjectionをOrthographicにする
  • Target TextureにRenderTextureを設定する


カメラの次にQuadを作成し、カメラのサイズと合わせます。 f:id:vxd-naoshi-19961205-maro:20181112232948p:plain



シェーダー

ここでシェーダーを書きます。あまり複雑なことはしてません。

Shader "Custom/WhiteBoardShader" {
    Properties{
        _MainTex("RenderTexture", 2D) = "white" {}
    }
    SubShader{
        Tags {
            "RenderType" = "Opaque"
        }
        LOD 100

        Pass {
            Cull off
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct Input {
                float2 uv_MainTex;
            };

            sampler2D _MainTex;

            float4 frag(v2f_img i) : SV_Target{

                fixed4 col = tex2D(_MainTex, i.uv);
                return col;

            }
            ENDCG
        }
    }
}

解説はブログの始めに張ったスライドのほうが詳しく書いていますが、両面描画するようにしたぐらいです。スライドのコードでは色はすべて黒に、このコードでは触られた色を描画するようにします。

シェーダーが出来たらマテリアルを作成し、RenderTextureをTextureに設定してQuadにマテリアルを設定すると完成します。

※補足:RenderTextureの解像度を上げるとジャギが減ります。



注意!

フレーム

早く書こうとする綺麗になりません。


位置ずれ

f:id:vxd-naoshi-19961205-maro:20181113012002p:plain

このようにカメラが少し上方向にずれていると同じ方向に書いた部分がずれていきます。


サイズが異なる

f:id:vxd-naoshi-19961205-maro:20181113012353p:plain

カメラとQuadのサイズが異なると書いた部分が外側に広がっていきます。



最後に

長くなりましたが、ホワイトボードの解説は以上になります。スライドで解説している他のシェーダーについても随時ブログにする予定です。

また、後々githubに公開する予定です。