ShaderGraph
はじめに 2021/03/21 に Unity ShaderGraphの本をリリースしました。 今回は、この本の魅力を紹介したいと思います。 zenn.dev 本書の特徴 20種以上のノードの解説 30種以上の作例 サンプルプロジェクト付き 特徴① : ノードの解説 ノードについての解説や、…
はじめに XOR演算を利用して、市松模様を作る方法を紹介します。 市松模様 今回はワールド座標のX,Z成分から市松模様を作ります。 目次 はじめに 目次 環境 市松模様の作り方 XORについて シェーダーグラフ実装 シマシマを作る 結果 ShaderGraphにXOR演算は…
はじめに 内積 を使って任意方向のグラデーションを作る方法を紹介します。 はじめに UV座標と2次元ベクトルの内積 = グラデーション 数式による解説 グラデーションの色の値 内積に使用するベクトルは正規化したほうが良い 3次元の内積 3次元座標とベクトル…
はじめに 1週間ゲームジャムUnity1Weekに参加したので、記事を書きたいと思います。 Unity 1週間ゲームジャム | フリーゲーム投稿サイト unityroom 作ったゲーム 空中でボールを蹴りながらゴールに入れるゲームを作りました。 空中キックボール | フリーゲー…
はじめに ShaderGraphで水中コースティクス表現を作る方法を紹介します。 コースティクス表現 ライトの向きを変えた時のコースティクス 水中コースティクスが発生する仕組み まず最初に、水中コースティクスの発生原理を簡単に紹介します。 水の外からやって…
SFテイストのエフェクトの作り方を解説しています。 使用ツール : Houdini, Substance Designer
はじめに 表と裏で別のテクスチャを貼る方法を紹介します。 シェーダーグラフ全体 Is Front Face ノードを使うと、メッシュの表裏を判定できるのでこれを利用します。
はじめに テクスチャを使わずにヒットエフェクトを作る方法を紹介します。 エフェクトの構成 今回のエフェクトは以下の二つで構成されています。 中心となる核(シェーダーグラフで作成) 拡散する破片 エフェクトの破片の作り方 基本はParticleSystemで四角形…
はじめに 今回は闇の炎っぽいものをシェーダーグラフで作る方法を紹介します。 環境 【Unityバージョン】 Unity2020.1.0a3 【パッケージ】 Universal RP (Version 7.1.2) テクスチャ 今回は以下のテクスチャを使用します。(解像度256x256) 上記のテクスチャ…
はじめに 以下のような雷のエフェクトをShuriken + ShaderGraphで作ってみました。 今回はこれの作り方を軽く紹介したいと思います。 雷エフェクト 雷エフェクトは基本的にShurikenのみで組んでいます。 点滅の部分はShaderGraphで作っています。 光のにじみ…
はじめに シェーダーグラフで以下のような水面を作ってみました。 今回はこのシェーダーグラフを紹介したいと思います。 シェーダーグラフで作る水面 シェーダーグラフ全体 シェーダーグラフ パラメータ設定 水面の作り方 STEP 1 : Voronoiを使って水面のベ…
はじめに 墨っぽい感じの竜巻エフェクトを作ってみました。 今回の記事では、このエフェクトをどうやって作ったのかを軽くをご紹介したいと思います。 墨の竜巻 STEP1. モデルの準備 (Houdini) 今回の竜巻エフェクトでは、以下のようなモデルを使用しました…
はじめに エフェクト1 : レーザー STEP1. テクスチャを用意 STEP2 :シェーダーグラフ作成 エフェクト2 : 黒い帯 STEP1. テクスチャを用意 STEP2: シェーダーグラフ作成 完成 はじめに シェーダーグラフを利用して、レーザービームっぽいものを作る方法を解説…
はじめに サンプル STEP1 : テクスチャ準備 STEP2 : シェーダーグラフ作成 STEP3 : 卵型のメッシュを作成(Houdini) STEP 3.1 非商用版Houdini Apprenticeの準備 STEP 3.2 Houdiniを起動する STEP 3.3 Geometryノード作成 STEP 3.4 geo1ノードの中に入る STEP…
はじめに GitHubサンプル 作り方解説 STEP1 : 板を作成 STEP2 : ノイズとx座標でStepをとる STEP3 : Lerpで色を付ける(シェーダーグラフ完成) STEP4 : メッシュをL字型にする STEP5 : UV EditorでUVを編集 STEP6 : 流れの向きを逆にしたシェーダーグラフを作…
はじめに サンプル 作り方解説 STEP1 : 横のラインを作る STEP2 : ラインをUVのx成分に足す STEP3 : ラインをランダムに動かす STEP4 : フレームレートを落とす(完成) 補足 : Posterizeのグラフ 微調整 微調整1 : ズレ幅をゆらす 微調整2 : ノイズをバラつか…
はじめに 準備 シェーダーグラフ1 : 横方向に切り替える ノード全体 STEP1 : Hexagonノードから六角形タイルを作る STEP2 : 右方向に向かって小さくする STEP3 : 六角形を動かす Sliderをプロパティ化 STEP4 : 六角形の大きさの変化を左右反転させる STEP5 :…
はじめに ノード全体 サンプル 作り方解説 STEP1 : テクスチャ表示 STEP2 : テクスチャを右に引き延ばす 軽い補足 STEP3 : しきい値をプロパティ化(完成) 左に引き延ばす 軽い補足 はじめに テクスチャを横に引き延ばすようなエフェクトをかけるシェーダーグ…
はじめに ノード全体 サンプル 作り方解説 STEP1. ノイズを作る STEP2. ノイズを動かす STEP3 . ノイズをバラつかせる(完成) 微調整 はじめに テレビの砂嵐っぽいシェーダーグラフの作り方を解説します。 ノード全体 サンプル github.com 作り方解説 STEP1. …
はじめに サンプル 解説 ノード全体 作り方解説 準備: 板を作る STEP1: 円を並べる STEP2 : 円とグラデーションを乗算する STEP3 : グラデーションを動かす STEP4 : 板を3倍に引き延ばす STEP5 : 模様を1/3倍に縮小する STEP6 : 色を付ける(シェーダーグラフ…
はじめに 作り方解説 STEP1 : モザイクをかける STEP2 : 円を並べる STEP3 : テクスチャの色を円のサイズに利用する(完成) はじめに テクスチャを水玉パターンのような見た目に加工するシェーダーグラフの作り方を解説します。 作り方解説 STEP1 : モザイク…
はじめに サンプル サウンド合成までの流れ OnAudioFilterReadについて Unity公式リファレンス OnAudioFilterReadの利用例 : ディレイエフェクト 実装 STEP1. ソースコード STEP2. シェーダーグラフを作る STEP3. マテリアル作成 STEP4. マテリアル登録 STEP…
はじめに サンプル シェーダーグラフ全体 作り方解説 STEP1 : ランダムな白黒ドットを作る STEP2 : 2種類の斜線パターンを作る STEP3 : 白黒ドットを使って斜線パターンを混ぜる STEP4 : マス目の数を12に設定(完成) はじめに 以下のような模様を出力するシ…
初めに ProcessingとUnityのシェーダーグラフを組み合わせて、以下のような絵を作ってみました。 Processing+シェーダーグラフで作った絵 今回の記事では、この絵の作り方を解説します。 目次 初めに 目次 解説 Processing シェーダーグラフ 作り方 STEP1 : …
ProcessingとUnityシェーダーグラフを組み合わせて、雷の球っぽいものを作る方法を解説します。 目次 目次 作り方解説 STEP1 : Processingでランダムウォークを描画 コードの軽い解説 STEP2 : シェーダーグラフで加工する(完成) 作り方解説 STEP1 : Processi…
はじめに Processingで作った絵をシェーダーグラフで加工してみた 作り方解説 STEP1 Processingで絵を描く STEP2 : シェーダーグラフで加工する(完成) 色を変えて遊んでみた。 はじめに 最近、Processingを触りはじめました。 https://processing.org/ 「Pro…
テクスチャに墨のような黒い煙を加えるシェーダーグラフの作り方を解説します。 和風のイラストと相性が良いかもしれません。 目次 目次 サンプル 準備 作り方解説 STEP1 : 模様を表示 STEP2 : 模様を動かす STEP3 : UVをスクロールさせる STEP4 : 色のコン…
テクスチャを歪ませながらフェードさせるシェーダーグラフです。 目次 目次 サンプル 作り方解説 STEP1 : テクスチャ表示 STEP2 : テクスチャにサイン波を足す STEP3 : サイン波を動かす STEP4 : Sliderをプロパティ化 STEP5 : TimePositionに応じてサイン波…
凱風快晴を正月っぽくするシェーダーグラフです。 凱風快晴はパブリックドメイン美術館からお借りしました。 パブリックドメイン美術館 富嶽三十六景 葛飾北斎 目次 目次 サンプル シェーダーグラフ全体 作り方解説 STEP 1: 模様を作る STEP2 : 模様を回転さ…
Unityロゴにエメラルドっぽい質感を与えるシェーダーグラフです。 エフェクトを加える前のUnityロゴは以下になります。 準備 今回のシェーダーグラフでは、以下の二つのカスタムノードを使用します。 下記リンクからカスタムノードをダウンロードしてUnityプ…
