メインコンテンツまでスキップ

トゥーンシェーダー

トゥーンシェーダーを使ってゲームを表現するためには、特にカートゥーン風のスタイルでオブジェクトを描画する方法を設定する必要があります。トゥーンシェーダーは、シャドウやハイライトを明確に分け、滑らかなグラデーションを使わずにブロック状の色分けを強調するスタイルが特徴です。Unityでトゥーンシェーダーを使ってゲームを作るための基本的な手順は以下の通りです。

1. トゥーンシェーダーの基本的な理解

トゥーンシェーダーでは、グラデーションの代わりに明確な色の境界(セルシェーディング)が使われます。これにより、ハイライトとシャドウがはっきりと分かれて、漫画やアニメのようなスタイルを再現できます。これを実現するために、通常は以下の技術が使われます。

  • シャドウの階段状の変化(セルシェーディング)
  • ライティングの強調(ハイライトやアウトライン)
  • 輪郭線(アウトライン)(オブジェクトの外周を強調)

2. トゥーンシェーダーの作成方法

a. Shader Graphを使ったトゥーンシェーダーの作成

UnityのShader Graphを使えば、視覚的にトゥーンシェーダーを作成できます。以下の手順でシェーダーを作成します。

  1. Shader Graphの作成:

    • Unityエディタで、右クリックして「Create」 > 「Shader」 > 「PBR Graph」を選択します。
    • 新しいShader Graphを作成し、名前を付けます(例: ToonShader)。
    • ダブルクリックしてShader Graphエディタを開きます。
  2. トゥーンライティングの実装:

    • Normal Vectorノードを使って法線ベクトルを取得します。
    • Light Directionノードで光源の方向を取得します。
    • Dot Productノードを使って、法線ベクトルと光源ベクトルのドット積を計算します。これにより、光の強さを得ます。
    • StepノードやSmoothstepノードを使って、ドット積の値を分けて、色分けされたトゥーンシェーディングを実現します。例えば、2つ以上の色(ハイライト、メインカラー、シャドウなど)を設定して、ドット積に基づいて色を選びます。
    - Dot Product (Normal, Light Direction)
    - Smoothstep or Step for color thresholds
    - Color output for highlights, mid-tones, and shadows
  3. アウトラインの実装(オプション): アウトライン効果を追加することで、よりトゥーン風のスタイルを強調できます。アウトラインは通常、モデルの法線を反転させて拡大し、内側を透明にする方法で実装します。以下の手順でアウトラインを実装できます。

    • Normal Vectorを反転させ、モデルをわずかに拡大します。
    • 拡大したモデルに別のマテリアルを適用し、アウトライン専用のカラーを設定します。
  4. 色の設定: トゥーンシェーダーでは、シャドウとハイライトの間に明確な色の分割が必要です。これには、シャドウ領域(暗い部分)とハイライト領域(明るい部分)を異なる色で設定します。

b. シェーダーコード(HLSL)を使ってトゥーンシェーダーを作成

もしShader Graphではなく手動でシェーダーコードを記述する場合、以下のようなHLSLコードを使ってトゥーンシェーダーを実装できます。

Shader "Custom/ToonShader"
{
Properties
{
_MainTex ("Base Texture", 2D) = "white" {}
_Color ("Color", Color) = (.5, .5, .5, 1)
}

SubShader
{
Tags { "RenderType"="Opaque" }

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
};

struct v2f
{
float4 pos : POSITION;
float3 normal : NORMAL;
};

float4 _Color;
float4 _MainTex_ST;

v2f vert(appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.normal = v.normal;
return o;
}

half4 frag(v2f i) : SV_Target
{
float lightIntensity = dot(i.normal, float3(0, 1, 0)); // 上方向からのライティング
half4 color = _Color;

// シンプルなセルシェーディング
if (lightIntensity > 0.5)
color.rgb = _Color.rgb * 1.0; // ハイライト
else
color.rgb = _Color.rgb * 0.3; // シャドウ

return color;
}
ENDCG
}
}
}

3. トゥーンシェーダーの適用と調整

作成したトゥーンシェーダーをマテリアルに適用し、シーン内のオブジェクトに設定します。トゥーンシェーダーは、キャラクターや背景、エフェクトなどの視覚スタイルに合わせて調整できます。

  • カメラの調整: トゥーンシェーダーのスタイルを最大限に活用するために、カメラのクリアカラーやエクスポージャーの設定を調整します。
  • ライティングの調整: トゥーンシェーダーではライティングの強調が重要です。シーン内での光源の配置や色温度を調整し、シャドウやハイライトが強調されるようにします。

4. トゥーンシェーダーの最適化

トゥーンシェーダーはパフォーマンスに影響を与えることがあるため、特に大規模なシーンやモバイル環境では、最適化を考慮することが重要です。

  • ライト数の制限: 複数のライトを使用する場合、シーン内でのライト数を適切に制限します。
  • アウトラインの簡略化: アウトラインの描画処理を軽量にし、必要に応じてビジュアルのクオリティを調整します。

まとめ

トゥーンシェーダーを使ったゲーム表現は、アニメやマンガ風のスタイルを再現するための非常に効果的な方法です。Shader GraphやHLSLを使用して、ライティングの強調、セルシェーディング、アウトライン効果を適切に設定することで、魅力的なトゥーン風のビジュアルを実現できます。シーンやオブジェクトに合わせて調整し、パフォーマンスへの影響を最小限に抑えるようにしましょう。