VRChatシェーダー入門
lilToonを使ってアバターをかわいく魔法のように変身させよう!
具体例:相手が顔の正面に来たら目のテクスチャが入れ替わる方法も解説
lilToon(リルトゥーン)は、無料で使える『アニメっぽい見た目を作るためのシェーダー』です。シェーダーとは、3Dのキャラクターの色や影のつき方を決める『色を塗る魔法のプログラム』のこと。VRChat(バーチャルチャット)のアバター用に開発されていて、なめらかな影やかっこいい輪郭線、キラキラ光る目などを作れます。
BOOTH(ぼうす)やGitHub(ギットハブ)から手に入り、Unity(ユニティ)というゲーム制作ソフトの中で使います。世界中のVRChatユーザーがよく使っている、定番のシェーダーです。
VCCで「Avatar 2022」を選んで新しいプロジェクトを作成。
Inspectorの「プリセット」タブから「かわいい」「アニメ風」などを選んで「適用」ボタンを押すだけ。自分で0から調整するよりずっと早い。
PC版ではlilToonフル機能OK。でもQuest(Android)ではlilToonが使えません。
1枚の目テクスチャの上に、もう1枚の「別バージョン」(怒った目・ハート目・キラキラ目など)を重ねる「透明シール」のような機能。『デカール化』にチェックするとUnity上で位置・サイズ・角度をドラッグで調整できるよ。マスクに「目だけ白」の画像を入れると、目部分だけにだけレイヤーが効く!合成モードで加算(光らせる)や乗算(色を重ねる)も選べる。
目の中にLEDみたいに光る部分を作れる。マスクで瞳のハイライトだけ光らせたり、点滅アニメも可能。暗いワールドで目だけギラギラさせたいときに最高!
lilToonだけで「時間」や「距離」で表情を変える近似は簡単(UVスクロール・デカールコマアニメ・Distance Fade・Dissolve)。でも「カメラが真正面に来た瞬間だけ即座に切り替え」たい場合は、次の具体例のようにカスタムシェーダー(_WorldSpaceCameraPosと内積dotで判定)が必要になるよ。
相手のアバター(正確にはその人のカメラ)が自分の顔の真正面に入ってきたら、自分のアバターの目が「びっくり目」や「ハート目」に変わる!
// WORKER-3提供の完全版(中学生向けコメント付き)
// 2枚の目テクスチャを「カメラが正面に来たら」滑らかに切り替えるシェーダー
Shader "Custom/FaceFrontEyeSwap_Complete"
{
Properties
{
_MainTex ("通常の目", 2D) = "white" {}
_AltEyeTex ("正面の目(ハートやびっくり)", 2D) = "white" {}
_Color ("色", Color) = (1,1,1,1)
_Emission ("発光の強さ", Range(0,1)) = 0
_Threshold ("正面判定のしきい値 (0=横もOK / 1=真正面のみ)", Range(0,1)) = 0.5
_Smooth ("ふわっと変わる幅", Range(0.01,0.3)) = 0.1
[Toggle(_SWAP_ENABLED)] _SwapEnabled ("正面で切り替える(ON/OFF)", Float) = 1
}
SubShader
{
Tags { "RenderType"="Opaque" }
CGPROGRAM
#pragma surface surf Lambert
#pragma shader_feature _SWAP_ENABLED
sampler2D _MainTex;
sampler2D _AltEyeTex;
float4 _Color;
float _Emission;
float _Threshold;
float _Smooth;
struct Input { float2 uv_MainTex; float3 worldPos; };
void surf (Input IN, inout SurfaceOutput o)
{
// 顔の正面 = 頭のローカルZ軸(青矢印)をワールドに変換
float3 headFwd = normalize(UnityObjectToWorldDir(float3(0,0,1)));
// カメラから顔への方向(逆じゃないよ!)
float3 cameraDir = normalize(_WorldSpaceCameraPos - IN.worldPos);
// 内積:1=真正面、0=横、-1=後ろ
float facing = dot(cameraDir, headFwd);
// しきい値で0〜1にふわっと変換
float sw = smoothstep(_Threshold - _Smooth, _Threshold + _Smooth, facing);
#if !defined(_SWAP_ENABLED)
sw = 0.0;
#endif
// 2枚のテクスチャを混ぜる
fixed4 col = lerp(tex2D(_MainTex, IN.uv_MainTex),
tex2D(_AltEyeTex, IN.uv_MainTex), sw);
o.Albedo = col.rgb * _Color.rgb;
o.Alpha = col.a * _Color.a;
o.Emission = col.rgb * _Emission;
}
ENDCG
}
FallBack "Diffuse"
}
『lilToonで目をいろいろに変える3ステップ:
1. 目だけ光らせたい→マスクで目だけ選ぶ(白いマスク画像をメインカラー2ndや発光のマスク欄へ)。
2. 表情を変えたい→2nd/3rdレイヤーに表情デカールを重ねて、アニメーションでオン/オフ。ハイライトは加算、目尻の赤は乗算、光る目は発光+点滅。
3. 近づいたら変わる→距離フェード(開始/終了/強度)を目のマテリアルに設定。
これだけならシェーダーを書かずにUnityだけでできる!
本当に「カメラが正面に来たら即変わる」にはカスタムシェーダー(dot計算)を使おう。』
このテキストは中学生でも読めるようやさしい言葉でまとめました。
Unity 2022.3.22f1 + lilToon最新(2026年時点情報)に基づく。
作ったHTMLは自由に使ってね! 質問はDiscordやBOOTHでどうぞ。