rn.log

備忘録など

【シェーダーグラフメモ その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プ…

【シェーダーグラフメモ その34】液晶モニターのノイズのようなエフェクト

モニターのノイズのようなエフェクトをかけるシェーダーグラフです。 作り方解説 STEP1 : テクスチャ表示 SampleTexture2Dノードを使い、テクスチャを表示します。 STEP2 : ノイズを加える UVのY座標を使って横じまのようなノイズを作り、これをUVのx座標に…

【シェーダーグラフメモ その33】波紋を利用して、テクスチャをスタイリッシュに切り替える

テクスチャをスタイリッシュに切り替えるシェーダーグラフです。 作り方解説 STEP1 波紋を作る 距離にPosterizeをかけて波紋を作ります。 STEP2 波紋を動かす 距離に数値を足すと波紋が動きます。 STEP3 テクスチャを混ぜる(完成) 距離<0.0の部分にテクスチ…

【シェーダーグラフメモ その32】ゆらゆら揺れる感じのエフェクト

テクスチャにゆらゆら揺れる感じのエフェクトをかけるシェーダーグラフです。 ノード全体 縦にスクロールするノイズをテクスチャのUVに足してゆらゆらせてています。 作り方解説 STEP1 : テクスチャを表示 Sample Texture 2Dノードを使い、テクスチャを表示…

2018年でアウトプットしたもの

はじめに 2018年も残すことあと1週間。 あっという間に過ぎ去った1年だったような気がします。 本記事では、私が2018年にアウトプットしたものをまとめたいと思います。 アウトプットしたもの 2018年にアウトプットしたものは以下の4つです。 ・シェーダー…

 【シェーダーグラフメモ その31】ドット絵風の炎の玉

以下のような、炎の玉っぽいエフェクトを作成する方法を解説します。 作り方解説 STEP1 : 中心からの距離をとる STEP2 : ノイズを距離で割る STEP3 : ノイズをスクロールさせる STEP4 : 炎っぽくする Divide, Power, Sample Gradientを組み合わせて炎っぽい…

 【シェーダーグラフメモ その30】ドット絵風の爆発エフェクト

以下のようなドット絵風の爆発を作る方法を解説します。 作り方解説 STEP1 : 中心からの距離をとる STEP2: 時間を引いて広がる波紋を作る 波紋が広がるような見た目になりました。 STEP3: 解像度を24x24にする Posterizeノードを使ってUVの解像度を24段階に…

 【シェーダーグラフメモ その29】ランダム頂点数の多角形を飛ばすパーティクルを作る

はじめに 今回は、シェーダーグラフとParticleSystemを組み合わせて頂点数がランダムな多角形を飛ばすパーティクルの作り方を解説します。 バージョン Unity2018.3.0f1 ShaderGraph Version4.1.0 作り方解説 STEP1 : ParticleSystem作成 まずはParticleSyste…

【シェーダーグラフメモ その28】集中線を作る

以下のような集中線の作り方を解説します ロゴに集中線エフェクトを加える、などといった使い方が考えられます。 作り方解説 STEP1 : ギザギザを作る x座標でノイズを生成し、y座標と足し合わせます。 下のほうが濃く、上のほうが色が薄いギザギザができまし…

【シェーダーグラフメモ その27】拡散する六角形の光

以下のような、六角形の光が広がる感じのシェーダーグラフの作り方を解説します 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderG…

【シェーダーグラフメモ その26】六角形シールド表現

以下のような、六角形が点滅するバリアのような表現を作る方法を解説します。 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderGra…

【シェーダーグラフメモ その25】ランダムな波紋をもつ六角形タイル

以下のような模様を作るシェーダーグラフです。 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。 六角形タイルを作るShaderGraphカスタムノード · GitHub He…

【シェーダーグラフメモ その24】六角形スキャンライン

六角形で流れる光の線(スキャンライン)を作るシェーダーグラフです。 サンプル https://github.com/rngtm/ShaderGraphExample/tree/master/Assets/ShaderGraphExample/24_HexScanline 準備 : 六角形カスタムノードを使えるようにする 以下のカスタムノードを…