🌈

そろそろShaderをやるパート75 穴あきAR表現

2022/08/14に公開

そろそろShaderをやります

そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。

という感じでやってます。

※初心者がメモレベルで記録するので
 技術記事としてはお力になれないかもしれません。

下準備

下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識~フラグメントシェーダーで色を変える)

デモ

このような感じのものを作成しました。

Shaderサンプル

Shader "Custom/Hole"
{
    //Inspectorに出すプロパティー
    Properties
    {
        _ClipSize("ClipSize", Range(0,1)) = 0.5
    }

    SubShader
    {
        Tags
        {
            "Queue"="geometry-1"
        }

        Blend Zero SrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            
            float _ClipSize;

            float circle(float2 p, float radius)
            {
                return length(p) - radius;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float2 f_st = frac(i.uv) * 2 - 1;
                float ci = circle(f_st, 0);
                float4 col = step(_ClipSize,ci);
                
                //引数の値が"0以下なら"描画しない すなわち"Alphaが0.5以下なら"描画しない
                clip(col.a - 0.5);
                return col;
            }
            ENDCG
        }
    }
}

仕組みはシンプルです。
フラグメントシェーダーで以下の処理を行っています。

  1. 真ん中に円を描画
  2. 円の箇所にはClipで何も描画しない命令
  3. その他の箇所はBlendの仕組みでオクルージョン処理の命令

【参考リンク】:そろそろShaderをやるパート70 オクルージョン用のShaderを作成する

あとは、穴の下にのぞき込める空間を作ってあげればOKです。
横から見ると以下のようになります。完成時には横からは見えないようにオクルージョン処理が可能な板ポリを置いています。

Blenderで穴あきのモデルを作る

穴自体はPlaneですが、穴の下にある土管みたいなやつは自作の3Dモデルです。
Shaderよりもこちらの方が時間がかかりました。
ちょっとまとめるのは面倒なので役立ったリンクだけ貼っておきます。

【Blender2.9】オブジェクトをくり抜く(風穴をあける)方法
blender円柱を滑らかにする方法

参考リンク

そろそろShaderをやるパート26 Skyboxに星をちりばめて良い感じにグラデーション
シェーダで図形の描画

Discussion