rn.log

備忘録など

【Unity1Week/あける】シェーダー解説 (ShaderGraph)

 

 はじめに

1週間ゲームジャムUnity1Weekに参加したので、記事を書きたいと思います。

Unity 1週間ゲームジャム | フリーゲーム投稿サイト unityroom

 

作ったゲーム

空中でボールを蹴りながらゴールに入れるゲームを作りました。

空中キックボール | フリーゲーム投稿サイト unityroom

 

www.youtube.com

www.youtube.com

 

 

今回の記事

実装したシェーダー表現を4つほど紹介したいと思います。

  1. スクリーン座標を利用したスキャンライン表現
  2. 物陰に隠れない点線
  3. 輪郭線が太い3D矢印
  4. 六角形Sci-Fiシールド

 

環境

Unity2019.4.15f1

Universal RP 7.3.1

 

表現1 : スクリーン座標を利用したスキャンライン

www.youtube.com

 

 

スキャンライン(走査線)とは

モニターの走査線のような模様のことスキャンラインと呼びます。

f:id:r-ngtm:20201228183753p:plain

スキャンラインのON/OFF

スキャンラインの作り方 (ShaderGraph)

スクリーン座標(Screen Positionノード)のY成分を利用すると、横縞を作ることができます。

f:id:r-ngtm:20201228184359p:plain

ScreenPositionを利用したスキャンライン

 

ゲームで使用する際は、スキャンラインをSubGraphとして定義し、汎用的に使えるようにしています。

f:id:r-ngtm:20201228184544p:plain

SubGraphとしてスキャンラインを定義

 

シールド表現のスキャンライン

f:id:r-ngtm:20201228185544g:plain

スキャンライン

 

フレネル効果にスキャンラインを加算しています。

f:id:r-ngtm:20201228184746p:plain

 

ゴール表現にもフレネル+スキャンライン表現を利用しています。

f:id:r-ngtm:20201228190815p:plain

 

矢印模様のスキャンライン

f:id:r-ngtm:20201228190151g:plain

矢印表現のスキャンライン

モデルUVから矢印模様を作成し、そこにスキャンラインを乗算しています。

f:id:r-ngtm:20201228190525p:plain

スキャンラインを乗算

 

表現2 : 物陰に隠れない点線表現

今回のゲームでは、物陰に隠れない点線を作成しました。

f:id:r-ngtm:20201228192000g:plain

3Dモデルの裏に隠れない点線

 

Forward Renderer Dataを利用する

Universal Render Pipelineの Forward Rendererにて

「Overlayレイヤーの不透明オブジェクトはDepthテストを常に成功させる」

という設定を行いました。

 

これによってOverlayレイヤーのオブジェクトは手前のオブジェクトの裏に隠れなくなります。

 

以下はForwardRendererの設定例です。

 

f:id:r-ngtm:20201228192534p:plain

ForwardRendererの設定

 

点線オブジェクトの設定

点線オブジェクトは Overlay というレイヤーに設定します。

f:id:r-ngtm:20201228192717p:plain

点線オブジェクトのレイヤー

 

結果

点線は常に表示されるようになります。

f:id:r-ngtm:20201228192000g:plain

3Dモデルの裏に隠れない点線

 

表現3 : 輪郭が太い矢印の表現

今回のゲームでは以下のような矢印を作成しました。

矢印の3Dモデル2つを配置しています。

f:id:r-ngtm:20201228193424g:plain

矢印表現

矢印の3Dモデル(Houdini)

矢印の3Dモデルは、Houdiniを利用して作成しています。

f:id:r-ngtm:20201228194103p:plain

Houdiniで作成した矢印モデル 2つ

矢印モデルのマテリアルにはUnityの Universal Render Pipeline / Unlit シェーダーを適用します。

 

矢印はOverlayレイヤーにする

大きいモデルの中に小さいモデルを埋め込むと、通常だと内側のモデルは隠れてしまいます。

f:id:r-ngtm:20201228195801p:plain

 

矢印モデルのDepthテストを無視することにより、内側のモデルが見える状態にできます。

f:id:r-ngtm:20201228195915p:plain

 

f:id:r-ngtm:20201228195702p:plain

 

 

描画順のコントロール

内側のオレンジ色モデルのマテリアルはPriority = -1、

外側の白色の矢印モデルはPriority = 0 に設定します。

 

これにより、白色のモデルが描画された後にオレンジ色のモデルが描画されます。

f:id:r-ngtm:20201228194623p:plain

白色の矢印はPriority = -1 に設定

f:id:r-ngtm:20201228194808p:plain

オレンジ色の矢印はPriority = 0 に設定

 

表現4 : 六角形シールド表現

今回のゲームでは、以下のような六角形のシールド表現を作成しました。

サッカーボール状の3Dモデルにシェーダーで色を付けています。

f:id:r-ngtm:20201228200941g:plain

六角形シールド表現

 

 

3Dモデルの作成(Houdini)

シールド表現用の3DモデルはHoudiniで作成しました。

作り方は過去記事に載せているので、興味があればご覧ください。

Unityエフェクトレシピ 02 - 六角形シールド表現 (1/2) - rn.log (hatenablog.com)

 

f:id:r-ngtm:20201228201244p:plain

六角形シールド用3Dモデル

シェーダーで色を付ける

六角形シールドに使用したシェーダーは以下になります。

f:id:r-ngtm:20201228202223p:plain

六角形表現で使用しているシェーダー