【Unity】Line Rendererで破線を引く(Shader Graph編)
前回の記事(ビルトインシェーダー編)に続き、今回はShader Graphを用いてLine Rendererで破線を引いてみたいと思います。既にUniversal Render Pipeline(URP)とLine Rendererが設定済みの場合は3へお進みください。
１．Line Rendererの設置と設定
Line RendererのSceneへの設置と設定は前回の1～2の項目と同様に行ってください。
２．Univsersal Render Pipelineの設定
Shader Graphを使用するためにはUnityのレンダーパイプラインをUniversal Render Pipeline(URP)に変更する必要があります。URPの設定方法はネットで検索すると詳しく解説している記事がたくさん見つかるため、ここでは軽く説明する程度に留めておきます。
手順
１．Package ManagerからURPをインストール
２．Project内にPipeline Assetを作成
３．Project SettingsのGraphicsで作成したPipeline Assetを設定
３．Shaderの作成
ここからShader Graphを使ってShaderを作成していきます。エディタ上のProjectパネルで右クリックし、[Create] > [Shader] > [Unlit Graph]を選択します。名前は「DashLine」とします。
４．マテリアルの作成
作成したShaderを選択した状態で右クリックし、[Create] > [Material]を選択します。名前はShaderと同じように「DashLine」とします。選択した状態で作成することでShaderとマテリアルが紐づけられます。
５．Shader Graphの作成
作成したShaderをダブルクリックするとビジュアルエディタが表示されます。以下の図のようにノードを繋げてください。
内容的には前回の記事のビルトインシェーダーで処理している内容＋少し拡張を行っています。簡単に解説すると
１．Tiling And Offsetでタイル状のUVを生成
２．Fractionで小数点のみを抽出
３．SplitでXのみのグラデーションを取得
４．Stepでしきい値を基準に0と1に変換
５．指定の色と乗算
６．指定の色をColor、Stepの値をAlphaとして出力
６．Line Rendererへのマテリアル設定
先ほど作成したマテリアルをLine RendererのMaterialsのElement 0へドラッグアンドドロップします。
７．確認！
うまく設定されていればLine Rendererは以下のような破線になります。
８．調整
Line Rendererの設定で線幅や長さを調整します。さらにインスペクタ上のShaderパラメータでは以下の設定が可能です。
１．Rate：透明と不透明の長さの比(0～1、0.5で同等幅)
２．Tiling：破線の間隔
３．Offset：破線の位置
４．Color：破線の色
Rateがスライダー式になっていない場合は、ビジュアルエディタのPropetiesのRateのModeを「Slider」に変更してください。
Offsetは破線の開始位置をずらすことができます。ただし、UVはタイル状になっているため位置をずらしても線が途切れることはありません。この値をShader GraphのTimerノードで時間的に変わるように設定すると以下のように破線が流れる演出が可能になります。
９．まとめ
Line RendererとShader Graphを使って破線を引くことができました。シェーダーを使っているため線の輪郭がくっきりと描画されます。
Shader Graphは視覚的にシェーダーを記述できるため分かりやすい部分もありますが、複雑な処理がやりたい場合やシェーダーテクニックの情報量を考えると従来のコードで記述するビルトインシェーダーにはまだ及ばない部分もあります。
またレンダーパイプラインをURPに変更することでシェーダー、カメラ、バッファ処理などの仕様が大きく変わるため、場合によってはやりたいことができなくなってしまうこともあります。
ビルトインレンダーパイプライン、URPそれぞれメリットとデメリットがありますので取り組んでいるUnityプロジェクト全体を考えながら適切なパイプラインを選択してください。
最後はレンダーパイプラインの話になってしまいましたが、シェーダー自体は気軽に扱えるようになると表現の幅が一気に増えますので、私自身も積極的に勉強していきたいと思っています。
それでは良いシェーダーライフを！🌱