夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

ShaderGraphで電光掲示板のShaderを描く

本日はShader勉強枠です。

〇電光掲示

電光掲示板は多数のLED照明の集合として1つの絵を描いています。

電車やバスの行き先表、空港の案内などいたるところで見る電光掲示板を今回はUnityで再現します。

①プロジェクトウィンドウで右クリックし[UnlitGraph]でShaderGraphを作成します。

f:id:Holomoto-Sumire:20211004202908p:plain

今回は[LEDBoard]という名前でShaderを作成しています。

f:id:Holomoto-Sumire:20211004203024p:plain

②[UV]ノード、[Tiling And offset]ノード、[Fraction]ノード、[Rectangle]ノードをそれぞれ画像のようにつなぎます。

f:id:Holomoto-Sumire:20211004203333p:plain

③[Backboard]に[Vector2]型で変数を作ります。今回は[LEDSize]としました。

f:id:Holomoto-Sumire:20211004203659p:plain

[LEDSize]はLEDの数=解像度になります。[GraphInspector]ウィンドウでデフォルト値として30を設定しています。

f:id:Holomoto-Sumire:20211004203823p:plain

④[LEDSize]を[Tiling And offset]ノードの[Tiling]へとつなぎます。

f:id:Holomoto-Sumire:20211004220048p:plain

これによって電光掲示板の元となるLEDの束が作成されます。

f:id:Holomoto-Sumire:20211004220207p:plain

⑤[Sample Texture 2D]ノードを作成し、[Multiply]ノードで掛け合わせます。

f:id:Holomoto-Sumire:20211004220545p:plain

⑥最後に[Backboard]に[Texture2D]の変数を作成し[Sample Textue 2D]と接続します。

f:id:Holomoto-Sumire:20211004220824p:plain

以上で電光掲示板のShaderが完成しました。

Planeのオブジェクトで見ると表現を見ることができます。

f:id:Holomoto-Sumire:20211004221302p:plain

今回は以下のテクスチャを作成しました。

f:id:Holomoto-Sumire:20211004221333p:plain

しかしこのままではLEDライトの半分がひかり、半分が黒いという現実ではあまり見ない見た目になっています。

現実の電光掲示板ではLEDライト一つで一つの光方をします。Shaderでもこれを再現します。

[Sample Texture 2D]の[UV]に[Posterize]ノードをつなぎます。

f:id:Holomoto-Sumire:20211004221815p:plain

これによってモザイク処理のような効果がかかります。

以上でShaderが完成しました。

f:id:Holomoto-Sumire:20211004222026p:plain