注目キーワード

cluster向け・Shader Graph(シェーダーグラフ)の事始め

  • 2024年5月3日
  • 2024年5月11日
  • cluster
  • 44回
  • 0件
clusterでシェーダーグラフは使えるの?

そのような疑問にお答えします。

結論から言うと、clusterのワールド作りにシェーダーグラフを使うことができます!

その結果、

  • もっと演出にこだわりたい
  • 草やオブジェクトを点滅させたい
  • 自分オリジナルのskyboxを作りたい

    など、自分好みのシェーダーを作ることができます

    有名どころのシェーダーを使うと、似たものになって困る

    こんな悩みがあったらシェーダーグラフを取り入れることで、オリジナル要素が高いワールドを作ることができるようになります!

     

    この記事では、主に以下の内容について解説します。

    • シェーダーグラフでどんなワールドができるの?
    • シェーダーグラフの知識は、どうやって取り入れるには?
    • シェーダーグラフを導入する上での注意点は?

     

    シェーダーグラフでどんなワールドができるの?実例を紹介します!

    シェーダーグラフを使うとどんなことができるのか、実例を用いて紹介します!

    オリジナルのskybox

    skyboxに動きを入れています。動画の例では、星が点滅したり、オーロラを出現させています。

    草を光らせる

    草画像をベースに、水玉模様+Emissionを組み合わせて、光る草を作りました。

    実際に作成したワールド

    メタバースプラットフォーム cluster(クラスター)

    ここは、1つの物語が終わるときに、必ず訪れる場所です。また新たな旅立ちの場所でもあります。旅立つ前に、まずは休憩していき…

    湖を作る

    湖を作りました。最近、clusterで影表示をできるようにしてくれたおかげで、浅瀬部分の色を変化させることができるようになりました。

    ただし、IOSだと、なぜか浅瀬部分の判定ができない(デプスバッファの判定ができない)のか、色の変化をつけることができません。

     

    シェーダーグラフとは何?

    シェーダーグラフがあれば、比較的簡単にシェーダーを作れる

    シェーダーグラフは、プログラマ以外の人でも、直感的な操作、見た目でシェーダーを作成できるようにしたものです。

    その結果、プログラマじゃ無くてもシェーダーを作ることができます。

    しかし、シェーダーグラフは、完全にプログラミングスキルは必要ないかというと、そうでも無いです。

    例えば、skyboxを作るときは、ワールド座標という入力、カメラの位置情報から色を決定するなど、中学程度(一部、高校数学のsin,cos計算が含まれる)の数学力は必要です。

    何日間か、シェーダーグラフを触っていると、処理の意味がなんとなくわかるレベルになります。

    シェーダーに付随して必要になる知識

    シェーダーは、シェーダーグラフを含めて、作成方法を覚えただけでは利用できません。

    シェーダーは、以下のような知識も関連して必要になってきます。

    • テクスチャ画像を作成できる
      • テクスチャを動かしたりするから
    • 簡単なモデリング
      • 例:エネルギー弾、竜巻などの演出でモデリングすることになる
    • UVマップ・UV展開の理解
      • UVマップの情報を下にシェーダーで描画(色つけのこと)するから
    • マテリアルの理解
      • シェーダーと1対1で対応するから

     

    オススメしないシェーダーの取り組み方【付録的な記事】

    いきなりシェーダープログラミングはおすすめしません。

    現役のプログラマーでも、シェーダーのコードを読んでも何をしているのかわからず、即挫折しました。

    たとえば、内積の計算式などいきなり出てくるが、なぜ必要なのかわからない。

    ネットで調べても計算式の意味がわからないことが多いんですね。

    その結果、プログラミングから入るのはオススメできません。

    シェーダーグラフを使っていると、シェーダー作成の流れがわかってくるので、流れがわかってきたタイミングでプログラミングしても問題ありません。

     

    【必読】シェーダーグラフをインストールする際の注意点

    シェーダーグラフのインストールは、新しく作成したプロジェクトにインストールするのがオススメです。

    特に、1つのプロジェクトで複数のワールドを作っている場合は、注意が必要です。

    その理由をこの章で解説します。

    シェーダーグラフは、Unity公式のアセットです。

    しかし、clusterがサポートしているUnity2021.3.4ではstandardシェーダーのcutoffが反映されない不具合が残っています

    その結果、以下のように透過が含まれるテクスチャが綺麗に表示されない(透明の部分が黒くなる)問題が残ります。

    その結果、

    プレビューでは問題なくても、clusterにアップロードしたときに気づく不具合で厄介なものです。

    また、VRMアバターでもcutoffが反映されない。つまりPNG画像の透過が使えず、以下のように透過の部分が黒く表示されます。

    以上のことから、シェーダグラフをインストールする際は、これまで使っているプロジェクトでは無く、新しいプロジェクトに入れた方が、安全です。

    もし、シェーダーグラフを入れてしまってもアンインストールは可能ですが、Unityのファイル構成など、ある程度の知識が必要のため、アンインストールはオススメしません。

     

    追記:

    上記の不具合の対処方法をまとめました!

    関連記事

    ある日のこと・・・ あれ?いつの間にか透明部分が黒くなって居るぞ? 原因を探っていたら、Shader Graph(シェーダーグラフ)の不具合であることがわかりました。 不具合の結果、standardシェーダーのcutoutの設定が[…]

     

    シェーダーグラフのインストール方法(ビルドイン版)

    それでは、シェーダーグラフのインストール方法を述べます。

    Unityのバージョン:

    2021.3.4f1

    インストール方法

    1. Package Managerを開く
    2. Packagesから「Unity Registry」を選ぶ
    3. 検索窓に「shader」と打ち込む
    4. 「Package」のところに「Shader Graph」が出てくるのでインストールする

     

    以上、シェーダーグラフのインストール方法でした。

    シェーダーグラフ関係の動画ではURP(Unity Universal Render Pipelineの略。レンダリング方法の一つ)を使うこと前提に解説されているが、上記の方法でビルドイン(clusterではこちらのレンダリング方法が使われている)でもインストールできます。

     

    どうやってシェーダーグラフのスキルを身につけると良いの?

    シェーダーグラフは、動画をみてスキルを身に着けていくのが早いです。

    まずは、シェーダーグラフ関連のチュートリアル動画を見ていきます。

    動画のほとんどはURPを使うことを前提にしているが、clusterで使われているbuildinでも、基本的に動作するので安心してください!

    一番先に見るものは、チュートリアル系の動画

    ここから、筆者が役に立ったと感じる動画を紹介していきます。

    まずは、Shader Graphの基礎になるものから!

     

     

    筆者
    まずは、チュートリアル動画で基礎を学びましょう!
    面倒だけど、一番早く理解できるます!

     

    やりたいこと別!オススメの参考動画

    揺れる草を作るのに参考になる動画!

    水のシェーダーを作る参考動画

     

    星空を作るに参考になる動画

     

    スカイボックスの基礎

     

    まとめ

    今回は、clusterのワールド制作にシェーダーグラフを取り入れて、よりオリジナル要素が高いワールドを作ろうという話をしました。

    これを機に試してみてはいかがでしょうか?