lilToon

VRChatシェーダー入門

Unity 2022.3.22f1
中学生向け
最新対応 (2026年現在)

中学生でもわかる
VRChatシェーダー入門

lilToonを使ってアバターをかわいく魔法のように変身させよう!
具体例:相手が顔の正面に来たら目のテクスチャが入れ替わる方法も解説

1

シェーダーって何? lilToonって?

かんたん説明(中学生向け)

lilToon(リルトゥーン)は、無料で使える『アニメっぽい見た目を作るためのシェーダー』です。シェーダーとは、3Dのキャラクターの色や影のつき方を決める『色を塗る魔法のプログラム』のこと。VRChat(バーチャルチャット)のアバター用に開発されていて、なめらかな影やかっこいい輪郭線、キラキラ光る目などを作れます。

BOOTH(ぼうす)やGitHub(ギットハブ)から手に入り、Unity(ユニティ)というゲーム制作ソフトの中で使います。世界中のVRChatユーザーがよく使っている、定番のシェーダーです。

おすすめのイメージ
アニメ塗り
キラキラ目
軽くて速い
lilToonのいいところ
  • プリセットでワンクリックでかわいくなる
  • Unity 2018〜2023対応(2022.3.22f1もバッチリ)
  • PCもQuestも対応しやすい軽さ
  • 目や髪のレイヤー、発光、リムライトが豊富
2

準備:Unity 2022.3.22f1 + lilToonの入れ方

1. VCCを準備
  1. VCCで公式リポジトリ追加(https://lilxyzw.github.io/lilToon/ の『VCCに追加』クリック)
  2. Manage ProjectでlilToonをインストール(自動更新も便利)
  3. またはBOOTH/GitHubからunitypackageをダウンロードしてProjectウィンドウにドラッグ&ドロップ
2. プロジェクト作成

VCCで「Avatar 2022」を選んで新しいプロジェクトを作成。

lilToonはVPMリポジトリからも追加可能:
https://lilxyzw.github.io/vpm-repos/vpm.json
3. lilToonインストール
またはGitHubから最新リリース
Unityにドラッグ&ドロップでインポート!
VRChatアバターは「PC版」と「Quest版」でシェーダーが違う場合があるよ。lilToonは両方対応しやすい。
3

入門編:lilToonの基本の使い方

STEP 1: マテリアルにlilToonを適用
1. Project右クリック → Create → Material
2. Inspector上部のShaderを lilToon に変更(_lil内は特殊なので避ける)
3. 編集モードを「詳細設定」に切り替える(簡易設定は初心者向け)
STEP 2: テクスチャを貼る(特に目)
目のマテリアルで大事なところ
  • メインカラー → テクスチャ:普通の目の画像
  • 発光設定(Emission):瞳とハイライトだけ残したマスクを入れて暗い場所でも光る目を作る。蛍光スライダー推奨1〜2
  • • マスクのRチャンネル使用で瞳だけ別色に調整可能
発光2ndで左右目で違う光らせ方も。既存アバターで発光設定が使われているとアイテクスチャ変更しても効かない場合あり注意。
プリセット活用が最強!

Inspectorの「プリセット」タブから「かわいい」「アニメ風」などを選んで「適用」ボタンを押すだけ。自分で0から調整するよりずっと早い。

3.5

VRChat Quest版の大事な注意

PC版ではlilToonフル機能OK。でもQuest(Android)ではlilToonが使えません。

  • QuestではToon LitやToon Standardなどの軽いシェーダーに変換が必要
  • 変換ツール:VRCQuestTools(VQT)を使うと自動でやってくれる
  • PCとQuest両対応したい場合は「PC用lilToon」と「Quest用別マテリアル」の2本登録が一般的
  • アップロード時にQuest変換を挟めば同じBlueprint IDで両対応できるよ
モバイルはポリゴン数・マテリアル数に厳しい制限があるので、PCアバターをそのままQuestに上げると怒られることが多い。
4

応用編:レイヤーや効果で目を生き生きさせる

メインカラー2nd / 3rd

1枚の目テクスチャの上に、もう1枚の「別バージョン」(怒った目・ハート目・キラキラ目など)を重ねる「透明シール」のような機能。『デカール化』にチェックするとUnity上で位置・サイズ・角度をドラッグで調整できるよ。マスクに「目だけ白」の画像を入れると、目部分だけにだけレイヤーが効く!合成モードで加算(光らせる)や乗算(色を重ねる)も選べる。

例:通常の目+発光レイヤーで「夜に光る目」を作る

発光(Emission)

目の中にLEDみたいに光る部分を作れる。マスクで瞳のハイライトだけ光らせたり、点滅アニメも可能。暗いワールドで目だけギラギラさせたいときに最高!

・点滅の強さ・速度・ズレで「パクパク」っぽく
・グラデーションで色が時間で変わる
・「蛍光」をオンにすると暗い場所でだけ光る(おすすめ)

lilToonだけでできる「簡単な表情変化」

Dissolve(溶けるように目が変わる)
Distance Fade(近くで目が変わる)
UV Animation(目が動く)
AudioLink(音に合わせて光る)

lilToonだけで「時間」や「距離」で表情を変える近似は簡単(UVスクロール・デカールコマアニメ・Distance Fade・Dissolve)。でも「カメラが真正面に来た瞬間だけ即座に切り替え」たい場合は、次の具体例のようにカスタムシェーダー(_WorldSpaceCameraPosと内積dotで判定)が必要になるよ。

具体例:相手が顔の正面に入ったら目のテクスチャを入れ替える

目的

相手のアバター(正確にはその人のカメラ)が自分の顔の真正面に入ってきたら、自分のアバターの目が「びっくり目」や「ハート目」に変わる!

どうやって判定するの?

カメラの位置を使って計算するよ。
dot( 顔の正面ベクトル , 顔からカメラへの方向 ) > しきい値
→ 1に近い = 真正面  0.7以上なら「正面に入った」と判定

インタラクティブデモ(スライダーで試そう)

あなたの顔
← カメラがこちらに来ると目が変わる
横(0.0)
0.40
真正面(1.0)

実装コード例(シンプル版シェーダー)

// 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"
}
C#で動的に変えたいときは EyeSwapController スクリプトをアタッチして _Threshold をいじろう。
このシェーダーを目のマテリアルに適用。_AltEyeTexに「びっくり目」や「ハート目」のテクスチャをセット。_Thresholdで「どれだけ正面で反応するか」を調整。_Smoothを大きくするとふわっと変わる。
仕組みのヒント(中学生でもわかる版)
・_WorldSpaceCameraPos = 「今カメラがどこにいるか」の座標
・顔の正面ベクトル(head forward)と「顔→カメラ」の方向の内積(dot)で「どれだけ正面か」を0〜1で計算
・1に近い=真正面、0.5以上で反応、smoothstepでふわっと切り替え
・lilToon単体では「カメラ正面判定」はできないので、このようなカスタムシェーダーか、距離フェード/MatCapで近似する

具体例アイデア
・近づいたらハート目:Distance Fade + 2ndレイヤーのハートデカール(開始0.3m / 終了0.05m)
・自動瞬き:デカールフレーム(FPS)でまぶたコマをループ
・暗闇で目だけ光る:Emission + 蛍光ON
・逆光で赤い目:Backlightの色を赤に
・カメラ正面で瞳孔キラリ:このシェーダーで正面判定+Altテクスチャ

中学生でもわかる応用テキスト(ドラフト)

『lilToonで目をいろいろに変える3ステップ:
1. 目だけ光らせたい→マスクで目だけ選ぶ(白いマスク画像をメインカラー2ndや発光のマスク欄へ)。
2. 表情を変えたい→2nd/3rdレイヤーに表情デカールを重ねて、アニメーションでオン/オフ。ハイライトは加算、目尻の赤は乗算、光る目は発光+点滅。
3. 近づいたら変わる→距離フェード(開始/終了/強度)を目のマテリアルに設定。
これだけならシェーダーを書かずにUnityだけでできる!
本当に「カメラが正面に来たら即変わる」にはカスタムシェーダー(dot計算)を使おう。』

さらに上級者向けTips

VRC Contact + アニメーション
シェーダーだけじゃなく、Contact Receiverで「近くに誰かいる」を検知 → アニメーターでマテリアルを切り替える方法も安定。
lilToonカスタム拡張
公式テンプレートを使って、lilToonの見た目を保ったまま「dot計算でテクスチャ差し替え」を追加可能。開発者向けドキュメント「カスタムシェーダーの作り方」を読もう。
Quest対応
Questは性能が低いので、複雑なシェーダーはLite版やシンプルなものに。2枚テクスチャ切り替えは比較的軽い。

このテキストは中学生でも読めるようやさしい言葉でまとめました。
Unity 2022.3.22f1 + lilToon最新(2026年時点情報)に基づく。

作ったHTMLは自由に使ってね! 質問はDiscordやBOOTHでどうぞ。