Unity
以下のような、炎の玉っぽいエフェクトを作成する方法を解説します。 作り方解説 STEP1 : 中心からの距離をとる STEP2 : ノイズを距離で割る STEP3 : ノイズをスクロールさせる STEP4 : 炎っぽくする Divide, Power, Sample Gradientを組み合わせて炎っぽい…
以下のようなドット絵風の爆発を作る方法を解説します。 作り方解説 STEP1 : 中心からの距離をとる STEP2: 時間を引いて広がる波紋を作る 波紋が広がるような見た目になりました。 STEP3: 解像度を24x24にする Posterizeノードを使ってUVの解像度を24段階に…
はじめに 今回は、シェーダーグラフとParticleSystemを組み合わせて頂点数がランダムな多角形を飛ばすパーティクルの作り方を解説します。 バージョン Unity2018.3.0f1 ShaderGraph Version4.1.0 作り方解説 STEP1 : ParticleSystem作成 まずはParticleSyste…
以下のような集中線の作り方を解説します ロゴに集中線エフェクトを加える、などといった使い方が考えられます。 作り方解説 STEP1 : ギザギザを作る x座標でノイズを生成し、y座標と足し合わせます。 下のほうが濃く、上のほうが色が薄いギザギザができまし…
以下のような、六角形の光が広がる感じのシェーダーグラフの作り方を解説します 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderG…
以下のような、六角形が点滅するバリアのような表現を作る方法を解説します。 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderGra…
以下のような模様を作るシェーダーグラフです。 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderGraphカスタムノード · GitHub He…
六角形で流れる光の線(スキャンライン)を作るシェーダーグラフです。 サンプル https://github.com/rngtm/ShaderGraphExample/tree/master/Assets/ShaderGraphExample/24_HexScanline 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードを…
以下のような正六角形タイルを作る方法を解説します。 正六角形タイル 正六角形の作り方 まずは以下のような六角形を作ります。 横のサイズを√3/2倍すると正六角形になります. シェーダーグラフで六角形を作る まずは以下の六角形を作ります。 STEP1: 六角形…
リングが上昇する、パワーアップエフェクト風のものを作るシェーダーグラフです。 ノード全体 以下のようなノードを組みます。 Unlitノードは以下のように設定して、半透明かつ両面が描画されるようにします。 円柱に張り付ける(完成) 上記のシェーダーグラ…
以下のような回転リングを作るシェーダーグラフです。 回転リングについて 上記の回転リングですが、立方体の周りに２枚の板を配置しています。 これら２枚の板にシェーダーグラフを適用することで、立方体の周りを回転するようなリングを作ることができます…
マインクラフトの土ブロックっぽいものをシェーダーグラフで作ってみました。 ノード全体 草ドットと土ドットを作り、これをLerpで混ぜることでマインクラフトの土ブロックのような絵を作っています。 ノード解説 ノード解説(上部分) ノード解説(下部分) ノ…
以下のようなきらきらした模様をつくるシェーダーグラフの作り方を解説します。 ノード完成図 キラキラ模様を作ってみる STEP1 : 距離を使って円を描画してみる まずは以下のような円を作ってみます。 x2 + y2 < A を満たす領域が1.0になります(白くなります…
レイマーチング(ray marching)と呼ばれる手法を用いて以下のような絵を作ってみました。 目次 目次 サンプル レイマーチングのざっくりとした解説 準備 : レイマーチングを行うカスタムノードの作成 レイマーチングを行うカスタムノード 2018-12-05追記 カス…
3Dオブジェクトを液体が入った感じにするシェーダーグラフです。 ワールド座標ベースのサイン波で塗りつぶしており、オブジェクトを回転させても波の位置は固定されたままです。 サンプル ShaderGraphExample/Assets/ShaderGraphExample/17_Liquid at master…
マグマが広がるような表現を作る方法を解説します。 サンプル ShaderGraphExample/Assets/ShaderGraphExample/16_MagmaRipple at master · rngtm/ShaderGraphExample · GitHub ざっと解説 座標(X, Y, Z)のXZ成分を取り出し、座標(0, 0)からの距離をとります…
ドット絵風の海を作るシェーダーグラフです。 ノード解説 UV座標をPosterizeノードで解像度を落とし、Voronoiノードを使って模様を作っています。 海の動きについて VoronoiノードのAngleOffsetに時間を入力することで動きを作り出しています。
粉雪が降る感じのシェーダーグラフです。 ノード全体 ノード解説 : 左側 ランダムなスピードで増加する値を作り、これをY方向グラデーションに足しています。 ノイズと時間を乗算し、これをY座標に足しています。 ノイズの値が大きい部分は高速に、小さい部…
以下のようなドット絵のレンガのような絵を作るシェーダーグラフです ドット絵風のレンガを作る方法 STEP1 : レンガを作る まずは以下のようなレンガを作ります。 ノード全体 レンガを作るシェーダーグラフのノードは以下になります。 ノード解説(左側) X座…
以下のような矢印パターンを作るシェーダーグラフです。 ノード全体 ノード解説 y座標から0.5を減算してabsをかけることで、y=0.5を中心とする上下対称な模様を作り出しています。
ギラギラする感じのシェーダーグラフです。 シェーダーグラフ全体 ノード解説
今回のシェーダーグラフは雨のシェーダーグラフです。 今回はこのシェーダーグラフを完成させるまでの手順をゼロから１つずつ解説していきます。 STEP1 まずはUVからY座標を取り出してY方向のグラデーションを作ります STEP2 次に、X座標にPosterizeをかけた…
以下のような絵を出力するシェーダーグラフです。 ノード ノード全体 ノード解説 : 左下 Posterizeノードで解像度を落としたUVをSimpleNoiseに使うことで、モザイク柄のような画像を生成しています。 これに時間を足し、Fractionをかけることによってバラバ…
このような模様を作り出すシェーダーグラフです。(ちょっと目に痛いかも) はじめに 今回のシェーダーグラフですが、 実は前回のシェーダーグラフ(http://r-ngtm.hatenablog.com/entry/2018/11/24/160336)に少し手を加えることで簡単に作り出すことができます…
このような模様を生み出すシェーダーグラフです。 ノード(全体) ノード解説 距離を使ったノイズを角度へ加算して角度をランダムに揺らします。 この角度にFractionとStepをかけることでラインを作り出しています。
STEP1 : アニメーションなしのシェーダーグラフ 分かりやすさのため、まずはアニメーションさせないシェーダーグラフから。 ノード全体 ノード左側 角度とノイズで模様を作り、距離と足し合わせています。 ノード右側 ラインを作っている部分 大きい塗りつぶ…
ランダムに欠けたリングを作るシェーダーグラフです。どことなく、Sci-Fiな雰囲気が感じられます。 ノード(全体) ノード解説 : 円を作っている部分 距離から数値Aを引き、絶対値をかけることでAの位置で折り返すようなグラデーションを作ることができます。 …
シェーダーグラフ 斜線パターンを作るシェーダーグラフです。 ノード(全体) ノード解説 ノード(左側) x+yにfractionをかけることで、斜めのグラデーションの繰り返しを生み出しています。 ノード(右側) Stepノードをつかって斜線パターンを作り出し、Lerpノ…
シェーダーグラフ Sci-FiのHUDっぽいリングを作るシェーダーグラフです。 サンプルプロジェクト https://github.com/rngtm/ShaderGraphExample ノード(全体) ノード解説 リングとノイズの組み合わせで作られています ノード(左側) 角度から生成したノイズを…
エネルギー波がぶわっと広がる感じのシェーダーグラフです。 サンプルプロジェクト https://github.com/rngtm/ShaderGraphExample シェーダーグラフ ノード全体 ノイズと波紋の足し合わせで作られています。 波紋を作る部分 波紋とノイズを足す 色を付ける部…
