Zenn
📝

Shader Graph事始め

2025/02/19に公開
cluster
tech

はじめに

概要

一般公開されているシェーダーを作る経緯について記述します。

開発環境(ワールド作り)

  • Unity 2021.3.4f1
  • Windows10
  • Cluster Creator Kit 2.30.0
    • 特に決めていない、最新であればよい
  • Shader Graph 12.1.7
    • Unityレジストリからインストール
  • (Universal Render Pipeline(URP)はClusterで対応していません)

ワールドづくり

ワールドコンセプト

Shader Graphで生成したマテリアルを展示するためのワールドです。BOOTHやBGMerから展示に適したアイテムを利用させていただいています。
ワールドそのものについて作りこむことはしません

シェーダー作り

シェーダー作り方針

初めて行う場合、まずは一般公開されているものを自分でやってみる、数(とりあえず20個くらい)をこなそうと思います。何も作ったことないのに夢と希望だけ膨らませても仕方ありませんからね。オリジナリティとか自分らしさは、まぁ1000個くらい作って出てきたらいいんじゃないんですかねぇ(白目)

シェーダー作り始め

CUBEの世界(宇宙猫)で語った通り、もともとはワールドオブジェクトの平行移動を表現するために、Skyboxで恒星を平行移動させようと思ったのがきっかけです。今回のワールドの最初に、この時作ったマテリアルを展示しています。

参考資料

まずは資料探しの旅に出かけます。適当に"Shader graph ###"で検索して簡単に中身を見てリンクを置いておきます

火

水

雷

風

雪

霧

*【ShaderGraph】デプスバッファを利用した霧の表現

オーロラ

結晶

光の粒子

波紋

夢幻の花

影

その他

実践(nity ShaderGraph CookBook vol.1【ShaderGraph 入門)

波紋

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】の波紋を参考に、とりあえずグラフを設定してみました。

ブレード

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】のPosterizeを参考に、とりあえずグラフを設定してみました。

UV Scroll

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】のUVスクロールを参考に、とりあえずグラフを設定してみました。

3D Scan Line

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】の3Dスキャンラインを参考に、とりあえずグラフを設定してみました。

集中線

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】の集中線エフェクトを参考に、とりあえずグラフを設定してみました。うまくいきませんでした。(alpha値をTextureのalpha値として採用することができませんでした。)
    • ぴえん

ディゾルブ

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】のディゾルブを参考に、とりあえずグラフを設定してみました
  • 。

カゲロウ

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】の陽炎表現を参考に、とりあえずグラフを設定してみました。できませんでした。(つらい)
    • URPの設定の問題なのかわかりません
    • 半透明の問題なのかわかりません
    • SceneColorを通すとColorが表示されません。
    • あきらめ

頂点シェーダ波打

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】の板モデルを参考に、とりあえずグラフを設定してみました。

座標位置でのRGBA変化

  • Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】のParticleSystemとの連携(カメラ距離)を参考に、とりあえずグラフを設定してみました。
    • View Direcionノードをどうやってうまく使うのかわかりません、もしかすると考え方が違うのかも(つらい)

実践(炎)

揺らめく炎

ShaderGraphを利用した炎エフェクト

揺れる炎の生成

闇の炎を作る

実践(水)

水のShaderを作ってみる]

水の深度表現

実践(雷)

雷エフェクト

  • アニメ調の雷エフェクト
    • パーティクルに設定する、点滅の部分のshader graphが記載されている
    • 今回はちかちかするので、頻度をかなり落としています
    • 粒子用のマテリアルの作り方は不明
      • マテリアルに粒子自体は何も表示しない設定と思われる
      • Trailマテリアルが今回の点滅を設定している
    • 雷のようなパーティクルシステムはUnity ParticleSystemで稲妻を作るのように別の表現方法も可能

発光

スクリーン

*Clusterスクリーンの特殊表現
* 謎
* アスペクト比やタイリングがどうなるのか不明。。。

Shader Graphで簡単に葉を揺らす方法

実践(雪)

積雪表現1

*03 Shader Graph Snow
* 積雪の記事は少ないようでした
* (現実は積雪表現2を先に用意していました)
* 個人的には積雪表現1で十分かな。。。
*
*ShaderGraphでオブジェクトを回転させるシェーダーを作成する
* 積雪はY軸上方向のみ色づく設計になっています
* 平面オブジェクトの場合、色づきがわかりにくいので、回転させてみました(嘘)
* すみません、積雪方向を配置アイテムに合わせて調整しました

積雪表現2

実践(霧)

霧

*デプスバッファを利用した霧
* こちら_CameraDepthTextureをつかった、LWRPのパイプラインということで、おそらくBuilt-inのパイプラインとは設定方法が違うはず。。。(涙)
* カメラとレンダラーマテリアルを用意してなんとなくデプスのテクスチャを用意して、、、とかやってみたんですがよくわかりません(つらい)

霧2

実践(光)

レーザー

*【Unity VFXGraph】レーザーエフェクトを作ってみた
* うう、ううう。

流れるLEDライト

*【シェーダーグラフメモ その41】流れるLEDライトのような表現を作る
*
*

波

マグマ

エネルギー波

広がる切り抜き

Twirl

Spherize

顔の陰影処理。。。

光沢

Glitch（グリッチ）エフェクト

(コラム)動くアクセサリー

Discussion