内蔵シェーダのコード解説(3) - Unlit/Transparent Cutout

今回解説するのは Unlit/Transparent Cutout はアルファ値が幾つ以上の時に描画するかを指定可能なシェーダです。指定の値以下のアルファ値の部分は描画されません。

シェーダの全コード

// Unlit alpha-cutout shader.
// - no lighting
// - no lightmap support
// - no per-material color

Shader "Unlit/ Transparent Cutout" {
Properties {
	_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
	_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
}

SubShader {
	Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
	LOD 100
	
	Pass {
		Lighting Off
		Alphatest Greater [_Cutoff]
		SetTexture [_MainTex] { combine texture } 
	}
}
}

解説

今回は Unlit/Transparent とほとんど同じなのでそちらと異なる部分だけ解説します。それ以外の場合は Unlit/Transparent の記事を参照下さい。

	Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}

"Queue" は "AlphaTest" が指定して有ります。今回はアルファ値によって描画を切り分けるのでそのままの指定ですね。 "RenderType" もそのままの "TransparentCutout" を指定。

	_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5

プロパティの部分で値の範囲を 0〜1 で指定出来る様に指定しています。

この値は Pass ブロックの以下の部分で使われています。

Alphatest Greater [_Cutoff]

この記述でアルファ値の比較条件を指定します。 Greater が指定されているので指定の値(ここでは _Cutoff )に比べてアルファの値が大きい時に描画されます。

_Cutoff の 0〜1 という設定可能な値の範囲は一般的なCGツールでは 0〜255 に当たります。例えば Alpha cutoff の値を 0.5 に設定されている場合にはアルファ値が127より大きい部分だけがレンダリングされます。

このシェーダは例えばこの様な上から下へとアルファ値がグラデーションしている画像や円錐形のグラデーションになっている画像を準備し、

【画像サンプル】※今回使用した画像をPNGファイルで保存したもの。

Alpha cutoff の値を変更するとこの様な演出を行う事が出来ます。

綺麗なエフェクトにするにはテクスチャの設定は以下の様に Wrap Mode を Clamp 、 Format を True Color にします。

後、もちろん綺麗にグラデーションしているアルファ値を設定するもの重要です。自分はまだまだ Photoshop を使いこなせてないのでアルファ値が綺麗なグラデーションになって成っていません。その為、動画ではちょっと汚い表示になっている箇所が有ります。

皆さんが作られる場合はその辺りはデザイナーさんの助けなどを借りて綺麗なグラデーションを作るようにしましょう。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

内蔵シェーダのコード解説(3) - Unlit/Transparent Cutout

シェーダの全コード

解説

関連情報