rn.log

備忘録など

2019-01-01から1ヶ月間の記事一覧

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