rn.log

備忘録など

ShaderGraph

【技術書】シェーダーグラフの書籍をリリースしました【ShaderGraph CookBook vol.1】

はじめに 2021/03/21 に Unity ShaderGraphの本をリリースしました。 今回は、この本の魅力を紹介したいと思います。 zenn.dev 本書の特徴 20種以上のノードの解説 30種以上の作例 サンプルプロジェクト付き 特徴① : ノードの解説 ノードについての解説や、…

【シェーダーグラフメモ その58】XOR演算を利用した市松模様

はじめに XOR演算を利用して、市松模様を作る方法を紹介します。 市松模様 今回はワールド座標のX,Z成分から市松模様を作ります。 目次 はじめに 目次 環境 市松模様の作り方 XORについて シェーダーグラフ実装 シマシマを作る 結果 ShaderGraphにXOR演算は…

【シェーダーグラフメモ その56】内積を使って任意方向のグラデーションを作る

はじめに 内積 を使って任意方向のグラデーションを作る方法を紹介します。 はじめに UV座標と2次元ベクトルの内積 = グラデーション 数式による解説 グラデーションの色の値 内積に使用するベクトルは正規化したほうが良い 3次元の内積 3次元座標とベクトル…

【Unity1Week/あける】シェーダー解説 (ShaderGraph)

はじめに 1週間ゲームジャムUnity1Weekに参加したので、記事を書きたいと思います。 Unity 1週間ゲームジャム | フリーゲーム投稿サイト unityroom 作ったゲーム 空中でボールを蹴りながらゴールに入れるゲームを作りました。 空中キックボール | フリーゲー…

【シェーダーグラフメモ その55】ボロノイを利用した、水中コースティクス表現

はじめに ShaderGraphで水中コースティクス表現を作る方法を紹介します。 コースティクス表現 ライトの向きを変えた時のコースティクス 水中コースティクスが発生する仕組み まず最初に、水中コースティクスの発生原理を簡単に紹介します。 水の外からやって…

Unityエフェクトレシピ01 - SFテイストのバリア

SFテイストのエフェクトの作り方を解説しています。 使用ツール : Houdini, Substance Designer

【シェーダーグラフメモ その54】メッシュの表裏で2枚のテクスチャを貼る

はじめに 表と裏で別のテクスチャを貼る方法を紹介します。 シェーダーグラフ全体 Is Front Face ノードを使うと、メッシュの表裏を判定できるのでこれを利用します。

【シェーダーグラフメモ その53】テクスチャ無しで作るヒットエフェクト

はじめに テクスチャを使わずにヒットエフェクトを作る方法を紹介します。 エフェクトの構成 今回のエフェクトは以下の二つで構成されています。 中心となる核(シェーダーグラフで作成) 拡散する破片 エフェクトの破片の作り方 基本はParticleSystemで四角形…

【シェーダーグラフメモ その52】闇の炎を作る

はじめに 今回は闇の炎っぽいものをシェーダーグラフで作る方法を紹介します。 環境 【Unityバージョン】 Unity2020.1.0a3 【パッケージ】 Universal RP (Version 7.1.2) テクスチャ 今回は以下のテクスチャを使用します。(解像度256x256) 上記のテクスチャ…

【シェーダーグラフメモ その51】アニメ調の雷エフェクトを作ってみた

はじめに 以下のような雷のエフェクトをShuriken + ShaderGraphで作ってみました。 今回はこれの作り方を軽く紹介したいと思います。 雷エフェクト 雷エフェクトは基本的にShurikenのみで組んでいます。 点滅の部分はShaderGraphで作っています。 光のにじみ…

【シェーダーグラフメモ その50】Voronoiを利用した水面エフェクト

はじめに シェーダーグラフで以下のような水面を作ってみました。 今回はこのシェーダーグラフを紹介したいと思います。 シェーダーグラフで作る水面 シェーダーグラフ全体 シェーダーグラフ パラメータ設定 水面の作り方 STEP 1 : Voronoiを使って水面のベ…

【シェーダーグラフメモ その49】墨の竜巻エフェクト

はじめに 墨っぽい感じの竜巻エフェクトを作ってみました。 今回の記事では、このエフェクトをどうやって作ったのかを軽くをご紹介したいと思います。 墨の竜巻 STEP1. モデルの準備 (Houdini) 今回の竜巻エフェクトでは、以下のようなモデルを使用しました…

【シェーダーグラフメモ その48】レーザービームを作る

はじめに エフェクト1 : レーザー STEP1. テクスチャを用意 STEP2 :シェーダーグラフ作成 エフェクト2 : 黒い帯 STEP1. テクスチャを用意 STEP2: シェーダーグラフ作成 完成 はじめに シェーダーグラフを利用して、レーザービームっぽいものを作る方法を解説…

【シェーダーグラフメモ その47】炎の卵を作る

はじめに サンプル STEP1 : テクスチャ準備 STEP2 : シェーダーグラフ作成 STEP3 : 卵型のメッシュを作成(Houdini) STEP 3.1 非商用版Houdini Apprenticeの準備 STEP 3.2 Houdiniを起動する STEP 3.3 Geometryノード作成 STEP 3.4 geo1ノードの中に入る STEP…

【シェーダーグラフメモ その46】滝を作る

はじめに GitHubサンプル 作り方解説 STEP1 : 板を作成 STEP2 : ノイズとx座標でStepをとる STEP3 : Lerpで色を付ける(シェーダーグラフ完成) STEP4 : メッシュをL字型にする STEP5 : UV EditorでUVを編集 STEP6 : 流れの向きを逆にしたシェーダーグラフを作…

【シェーダーグラフメモ その45】シンプルなGlitchエフェクト

はじめに サンプル 作り方解説 STEP1 : 横のラインを作る STEP2 : ラインをUVのx成分に足す STEP3 : ラインをランダムに動かす STEP4 : フレームレートを落とす(完成) 補足 : Posterizeのグラフ 微調整 微調整1 : ズレ幅をゆらす 微調整2 : ノイズをバラつか…

【シェーダーグラフメモ その44】六角形タイルを利用した画像切り替え4種類

はじめに 準備 シェーダーグラフ1 : 横方向に切り替える ノード全体 STEP1 : Hexagonノードから六角形タイルを作る STEP2 : 右方向に向かって小さくする STEP3 : 六角形を動かす Sliderをプロパティ化 STEP4 : 六角形の大きさの変化を左右反転させる STEP5 :…

【シェーダーグラフメモ その43】テクスチャを引き延ばすようなエフェクト

はじめに ノード全体 サンプル 作り方解説 STEP1 : テクスチャ表示 STEP2 : テクスチャを右に引き延ばす 軽い補足 STEP3 : しきい値をプロパティ化(完成) 左に引き延ばす 軽い補足 はじめに テクスチャを横に引き延ばすようなエフェクトをかけるシェーダーグ…

【シェーダーグラフメモ その42】テレビの砂嵐のようなノイズ

はじめに ノード全体 サンプル 作り方解説 STEP1. ノイズを作る STEP2. ノイズを動かす STEP3 . ノイズをバラつかせる(完成) 微調整 はじめに テレビの砂嵐っぽいシェーダーグラフの作り方を解説します。 ノード全体 サンプル github.com 作り方解説 STEP1. …

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

はじめに サンプル 解説 ノード全体 作り方解説 準備: 板を作る STEP1: 円を並べる STEP2 : 円とグラデーションを乗算する STEP3 : グラデーションを動かす STEP4 : 板を3倍に引き延ばす STEP5 : 模様を1/3倍に縮小する STEP6 : 色を付ける(シェーダーグラフ…

【シェーダーグラフメモ その40】テクスチャを水玉パターンに加工する

はじめに 作り方解説 STEP1 : モザイクをかける STEP2 : 円を並べる STEP3 : テクスチャの色を円のサイズに利用する(完成) はじめに テクスチャを水玉パターンのような見た目に加工するシェーダーグラフの作り方を解説します。 作り方解説 STEP1 : モザイク…

UnityのShaderGraphで音を作る

はじめに サンプル サウンド合成までの流れ OnAudioFilterReadについて Unity公式リファレンス OnAudioFilterReadの利用例 : ディレイエフェクト 実装 STEP1. ソースコード STEP2. シェーダーグラフを作る STEP3. マテリアル作成 STEP4. マテリアル登録 STEP…

【シェーダーグラフメモ その39】ランダムな斜線パターン

はじめに サンプル シェーダーグラフ全体 作り方解説 STEP1 : ランダムな白黒ドットを作る STEP2 : 2種類の斜線パターンを作る STEP3 : 白黒ドットを使って斜線パターンを混ぜる STEP4 : マス目の数を12に設定(完成) はじめに 以下のような模様を出力するシ…

【Unityシェーダーグラフ+Processing その3】 ランダムに円弧を敷き詰めて色を付けてみた

初めに ProcessingとUnityのシェーダーグラフを組み合わせて、以下のような絵を作ってみました。 Processing+シェーダーグラフで作った絵 今回の記事では、この絵の作り方を解説します。 目次 初めに 目次 解説 Processing シェーダーグラフ 作り方 STEP1 : …

【Unityシェーダーグラフ+Processing その2】ランダムウォークを利用して雷の球っぽいものを作る

ProcessingとUnityシェーダーグラフを組み合わせて、雷の球っぽいものを作る方法を解説します。 目次 目次 作り方解説 STEP1 : Processingでランダムウォークを描画 コードの軽い解説 STEP2 : シェーダーグラフで加工する(完成) 作り方解説 STEP1 : Processi…

【Unityシェーダーグラフ+Processing その1】線をたくさん出して色を付けてみた

はじめに Processingで作った絵をシェーダーグラフで加工してみた 作り方解説 STEP1 Processingで絵を描く STEP2 : シェーダーグラフで加工する(完成) 色を変えて遊んでみた。 はじめに 最近、Processingを触りはじめました。 https://processing.org/ 「Pro…

【シェーダーグラフメモ その38】テクスチャに墨のような煙を加える

テクスチャに墨のような黒い煙を加えるシェーダーグラフの作り方を解説します。 和風のイラストと相性が良いかもしれません。 目次 目次 サンプル 準備 作り方解説 STEP1 : 模様を表示 STEP2 : 模様を動かす STEP3 : UVをスクロールさせる STEP4 : 色のコン…

【シェーダーグラフメモ その37】サイン波を利用したディストーションエフェクト

テクスチャを歪ませながらフェードさせるシェーダーグラフです。 目次 目次 サンプル 作り方解説 STEP1 : テクスチャ表示 STEP2 : テクスチャにサイン波を足す STEP3 : サイン波を動かす STEP4 : Sliderをプロパティ化 STEP5 : TimePositionに応じてサイン波…

【シェーダーグラフメモ その36】凱風快晴を正月っぽくする

凱風快晴を正月っぽくするシェーダーグラフです。 凱風快晴はパブリックドメイン美術館からお借りしました。 パブリックドメイン美術館 富嶽三十六景 葛飾北斎 目次 目次 サンプル シェーダーグラフ全体 作り方解説 STEP 1: 模様を作る STEP2 : 模様を回転さ…

【シェーダーグラフメモ その35】Unityロゴにエメラルドのような質感を与える

Unityロゴにエメラルドっぽい質感を与えるシェーダーグラフです。 エフェクトを加える前のUnityロゴは以下になります。 準備 今回のシェーダーグラフでは、以下の二つのカスタムノードを使用します。 下記リンクからカスタムノードをダウンロードしてUnityプ…