rn.log

備忘録など

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

初めに

ProcessingとUnityのシェーダーグラフを組み合わせて、以下のような絵を作ってみました。

f:id:r-ngtm:20190108101745p:plain:w320
Processing+シェーダーグラフで作った絵

今回の記事では、この絵の作り方を解説します。

目次

解説

Processing

Processing側で円弧をランダムに大量に並べます。

f:id:r-ngtm:20190108102142p:plain:w320
Processingで描画したテクスチャ

シェーダーグラフ

これをUnityのシェーダーグラフに取り込んで色を付けて完成となります。

f:id:r-ngtm:20190108101745p:plain:w320
シェーダーグラフで色を付けたもの

作り方

STEP1 : Processingで絵を描く

f:id:r-ngtm:20190108102142p:plain:w256
Processingで描画する絵


以下のコードを実行すると、pdeファイルと同じ場所にpngとして絵が出力されます。

final boolean isSave = true; // save as png
final int N = 5000; // arc number
final int lineSize = 5; // arc line size
final float radiusMin = 10; 
final float radiusMax = 400;
float arcRange = radians(100); 

String getPngName()
{
  return "arc_"
    + "_N_" + N
    + "_lineSize_" + lineSize
    + "_radiusMin_" + radiusMin
    + "_radiusMax_" + radiusMax
    + "_arcRange_" + arcRange
    + ".png";
}


void setup()
{
    size(1024, 1024);
    background(255);
    strokeWeight(lineSize);
    strokeCap(RECT);
    noFill();

    // draw arc
    for (int i = 0; i < N; ++i) 
    {
        stroke(random(1, 255));
        drawArc();
    }
    
    if (isSave)
    {
      save(getPngName()); // save as png
    }
}

void drawArc()
{
    float x = width / 2;
    float y = height / 2;
    float r = random(radiusMin, radiusMax);
    float size = r * 2;
    float radian1 = random(0, 2 * PI);
    float radian2 = radian1 + arcRange;

    arc(x, y, size, size, radian1, radian2);
}


f:id:r-ngtm:20190108212737p:plain:w300
Processingによって出力されたpng

出力されたpngをUnityプロジェクトに取り込んだら、シェーダーグラフ上での作業に入ります。

STEP2 : シェーダーグラフで加工する(完成)

以下のようなシェーダーグラフを組みます。
f:id:r-ngtm:20190108212131p:plain


以下のような絵が出力されます。

f:id:r-ngtm:20190108101745p:plain:w512
シェーダーグラフで加工した結果

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

ProcessingとUnityシェーダーグラフを組み合わせて、雷の球っぽいものを作る方法を解説します。
f:id:r-ngtm:20190105202714p:plain:w512

目次

作り方解説

STEP1 : Processingでランダムウォークを描画

f:id:r-ngtm:20190105203013p:plain:w320
Processingで描画するテクスチャ

Processing上で下記のコードを実行すると、pdeファイルがある場所と同じ階層にpngとして絵を出力します。

final boolean isSave = true; // save as png

final int N = 5000; // random walk number
final int alpha = 15; // line alpha

// random walk parameter
final float startRadius = 45;
final float addRadius = 45;
final float degreeRandom = 180;
final float radianRandom = radians(degreeRandom); // degree -> radian

// save file name
String getFileName()
{
  return "randomWalkSpread_"
    + "_N_" + N 
    + "_Alpha_" + alpha 
    + "_StartRadius_" + startRadius 
    + "_AddRadius_" + addRadius
    + "_DegreeRandom_" + degreeRandom
    + ".png";
}

void setup()
{
  size(1024, 1024);
  background(255);
  stroke(0, alpha);
  
  for (int i = 0; i < N; i++)
  {
    drawLine(); // draw random walk line
  }
  
  fill(0, 255);
  ellipse(width/2, height/2, startRadius * 2, startRadius * 2);
  
  if (isSave)
  {
    save(getFileName()); // save as png
  }
    
}

// draw random walk line
void drawLine()
{
  float x1, y1;
  float x2, y2;
  x2 = width / 2;
  y2 = height / 2;
  
  float baseRadian = random(0, 2 * PI);
  x2 += startRadius * cos(baseRadian);
  y2 += startRadius * sin(baseRadian);
  while (dist(width/2, height/2, x2, y2) < width)
  {
    float radian = baseRadian + radianRandom * random(-0.5, 0.5);
    x1 = x2;
    y1 = y2;    
    x2 += addRadius * cos(radian);
    y2 += addRadius * sin(radian);
    
    line(x1, y1, x2, y2);
  }
}

f:id:r-ngtm:20190105203510p:plain:w512

コードの軽い解説

コードでやっていることは、
「画面中央から画面の外側へ向かって点をランダムに動かし、その軌跡を描画する」
これを5000回繰り返しています。

Processingが出力したpngをUnityプロジェクトに取り込んだら、シェーダーグラフ上の作業に移ります。

STEP2 : シェーダーグラフで加工する(完成)

SampleTexture2Dノードでテクスチャを取り込み、Smoothstepで明暗のコントラストを補正します。
OneMinusノードで明暗を反転、Powerノードで色味を補正、最後にSampleGradientノードで色を付けます。
f:id:r-ngtm:20190105204210p:plain

上記のシェーダーグラフを組むと、以下のような絵が出力されます。
f:id:r-ngtm:20190105202714p:plain:w320

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

はじめに

最近、Processingを触りはじめました。

https://processing.org/


「Processingを使って何か面白いことはできないだろうか?」と考えていたところ、

「Unityのシェーダーグラフと組み合わせれば面白いことできそうじゃない?」

と思いつきました。  

Processingで作った絵をシェーダーグラフで加工してみた

そこで、Processingで描画した以下の絵を引っ張り出してきて、

f:id:r-ngtm:20190104233418p:plain:w320
 
Unityシェーダーグラフに取り込み、SampleGradientで色を付けてみました。
 

そして出来上がった絵が以下になります。
f:id:r-ngtm:20190104233731p:plain:w320

お、いろいろ遊べそう。

 

前置きが長くなってしまいましたが、今回の記事ではこの絵を作る方法を解説します。

 

作り方解説

STEP1 Processingで絵を描く

以下のコードをProcessingで実行します。

final int N = 15000; // line number
final int alpha = 15;

String getFileName()
{
  return "lines" + "_N_" + N + "_alpha_" + alpha +".png";
}

void setup()
{
  size(1024, 1024);
  background(255);
  stroke(0, alpha);
  for (int i = 0; i < N; i++)
  {
    drawLine();
  }
  
  save(getFileName());
}

void drawLine()
{
  line(random(0, width), random(0, height), random(0, width), random(0, height));
}

やっていることはシンプルで、
「キャンバス上でランダムな位置の点を2か所とり、2点を結ぶ線を描画する」
これを15000回繰り返しているだけです

上記のコードをProcessing上で実行すると以下のような絵が出力され、pdeファイルと同じ場所にpngとして保存されます
f:id:r-ngtm:20190104233418p:plain:w320


f:id:r-ngtm:20190104234520p:plain


出力されたpngをUnityプロジェクトに取り込んだら、次にUnity上でのシェーダーグラフ上での作業に入ります。

STEP2 : シェーダーグラフで加工する(完成)

SampleTexture2Dノードでテクスチャを取り込み、Smoothstepで色味を補正。
最後にSampleGradientノードで色をつけて完成です。
f:id:r-ngtm:20190104235327p:plain

f:id:r-ngtm:20190104233731p:plain:w320

色を変えて遊んでみた。

SampleGradientの色を変更すると絵の色も変化します。
色を弄っているだけでもいろいろ遊べそうです。

f:id:r-ngtm:20190105000637p:plain:w300
f:id:r-ngtm:20190105000145p:plain:w320


f:id:r-ngtm:20190105000239p:plain:w280
f:id:r-ngtm:20190105000347p:plain:w280
f:id:r-ngtm:20190105001153p:plain:w280
f:id:r-ngtm:20190105001431p:plain:w280
f:id:r-ngtm:20190105001553p:plain:w280

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

テクスチャに墨のような黒い煙を加えるシェーダーグラフの作り方を解説します。

和風のイラストと相性が良いかもしれません。

f:id:r-ngtm:20190103123620g:plain

目次

 

サンプル

github.com

 

準備 

今回のシェーダーグラフでは、ドメインワーピングのカスタムノードを使用します。

 

下記URLにあるDomainWarpingカスタムノードをUnityプロジェクトに追加してください。

ドメインワーピング( http://www.iquilezles.org/www/articles/warp/warp.htm ) をシェーダーグラフで使うためにカスタムノード化したものです · GitHub

 

DomainWarpingカスタムノードはもやのような模様を出してくれます。

f:id:r-ngtm:20190101161252p:plain

 

作り方解説

STEP1 : 模様を表示

先ほど追加したDomainWarpingカスタムノードを使用して、模様を表示します。

f:id:r-ngtm:20190103111746p:plain

f:id:r-ngtm:20190103111828p:plain



STEP2 : 模様を動かす

Timeノード、Vector4ノードを以下のように接続し、模様を動かします。

f:id:r-ngtm:20190103112117p:plain

f:id:r-ngtm:20190103112655g:plain

 

STEP3 : UVをスクロールさせる

UVのx座標に時間を足し、UVを横方向にスクロールさせます。

f:id:r-ngtm:20190103113016p:plain

f:id:r-ngtm:20190103113239g:plain

 

STEP4 : 色のコントラストをつける

Smoothstepノードを使い、色にコントラストを付けます。

f:id:r-ngtm:20190103113558p:plain

f:id:r-ngtm:20190103113849g:plain

 

補足 : Smoothstepについて

f:id:r-ngtm:20190103115150p:plain

 

smoothstep(0.44, 0.66, x)は以下のようなグラフを描きます。

  • x < 0.44の場合に0.0を出力
  • x > 0.66の場合に1.0を出力
  • それ以外では滑らかに補間するような値を出力

f:id:r-ngtm:20190103114847p:plain

 

元の色とsmoothstepの出力の色の対応関係は以下のようになります。

値 > 0.66の部分は1.0(真っ白)、値<0.44の部分は0.0(真っ黒)になります。

f:id:r-ngtm:20190103122118p:plain

STEP5 : テクスチャと合成(完成)

Lerpノードを使用して、テクスチャと黒色を合成します。

模様の色が白い部分ほど、黒が多く混ざります。

f:id:r-ngtm:20190103123411p:plain

 

f:id:r-ngtm:20190103123620g:plain

 

煙の濃さを調整

Smoothstepノードのパラメータを変更するとで、煙の量や濃さが変化します。

 

調整1 : 煙を濃くする

SmoothstepのEdge1の数値を減らすと黒が多く混ざるようになります。

f:id:r-ngtm:20190103124733g:plain

 

調整2 : 煙を薄くする

SmoothstepのEdge2の数値を増やすと黒が混ざる量が減ります。

f:id:r-ngtm:20190103125100g:plain

 

調整3 : 煙をぼかす

SmoothstepのEdge1とEdge2に差の大きな数値を設定すると墨がボケた感じになります。

f:id:r-ngtm:20190103130704p:plain

 

調整4 : 煙をクッキリとした感じにする

SmoothstepのEdge1とEdge2に差が小さい数値を設定すると、

墨がくっきりとした感じになります。

f:id:r-ngtm:20190103131140p:plain

 

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

テクスチャを歪ませながらフェードさせるシェーダーグラフです。

f:id:r-ngtm:20190102103259g:plain

 

目次

 

サンプル

github.com

作り方解説

STEP1 : テクスチャ表示

Sample Texture 2Dノードを使い、テクスチャを表示します。

f:id:r-ngtm:20190102103518p:plain

f:id:r-ngtm:20190102103650p:plain


STEP2 : テクスチャにサイン波を足す

f:id:r-ngtm:20190102105024p:plain

 

テクスチャに波のようなディストーションがかかりました。

f:id:r-ngtm:20190102105046p:plain


STEP3 : サイン波を動かす 

Y座標に数値を足すと、サイン波が動くようになります。

f:id:r-ngtm:20190102110220p:plain

f:id:r-ngtm:20190102110519g:plain

 

STEP4 : Sliderをプロパティ化

Sliderなどの数値はプロパティ化するとマテリアルのInspector上から値を変更できるようになります。

Sliderを右クリックしてConver to Propertyを選択することで、プロパティ化できます。

f:id:r-ngtm:20190102133838p:plain

 

Sliderをプロパティ化すると、Vector1プロパティが追加され、SliderはVector1プロパティに置き換わります。

f:id:r-ngtm:20190102134418p:plain

 

マテリアルのInspector上から数値が変更できるようになりました。

f:id:r-ngtm:20190102135006g:plain

 

Vector1という名前は曖昧で分かりにくいので、TimePosition(時間の位置)という名前に変えます。

f:id:r-ngtm:20190102135544p:plain

 

STEP5 : TimePositionに応じてサイン波を小さくする

サイン波に(1.0 - TimePosition)を乗算し、時間(TimePosition)の増加に伴ってディストーションが弱まるようにします。

f:id:r-ngtm:20190102140149p:plain

 

f:id:r-ngtm:20190102140419g:plain

 

STEP6 : 波を速くする

波が遅すぎて、動いている感じがしないのでSineノードの入力に使用しているTimePositionを6.0倍します。

Sineの係数にもTimePositionがいますが、こちらは触りません。

f:id:r-ngtm:20190102141120p:plain

 

サイン波の速度が6.0倍になったので、動いている感じが出ました、

f:id:r-ngtm:20190102141333g:plain

 

STEP 7: フェードアウトを入れる(完成)

テクスチャの色に(1.0 - TimePosition)を乗算します。

TimePositionの増加に伴って線形にテクスチャが暗くなります。

f:id:r-ngtm:20190102142313p:plain

 

暗くフェードするようになりました。

f:id:r-ngtm:20190102142624g:plain

 

微調整

調整1: 縦方向の波の動きを加える

ほぼ完成ですが、動きがやや単調に感じます。

縦方向の波を加えて動きを複雑にしてみましょう。

 

STEP1 ~ STEP7ではY座標で作ったサイン波をUVのX座標に足していましたが、

さらにX座標で作ったサイン波UVのY座標に足します

f:id:r-ngtm:20190102151431p:plain

 

より複雑な形状のディストーションがかかるようになりました。

f:id:r-ngtm:20190102152013g:plain

 

調整2: ディストーションの時間を反転させる(完成)

Sin波の係数として(1.0 - TimePosition)を乗算していましたが、

TimePositionを乗算するように変更してみましょう。

ディストーションの時間が反転します。

f:id:r-ngtm:20190102152959p:plain

 

f:id:r-ngtm:20190102153146g:plain


ロゴなどの出現演出に使うとイイ感じになりそうです。

 

 

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

凱風快晴を正月っぽくするシェーダーグラフです。

f:id:r-ngtm:20190101222300g:plain

 

 凱風快晴はパブリックドメイン美術館からお借りしました。

パブリックドメイン美術館 富嶽三十六景 葛飾北斎

 

目次

 

サンプル

github.com

シェーダーグラフ全体

背景をアルファ抜きした凱風快晴を使って日の丸の模様と赤富士を合成しています。

f:id:r-ngtm:20190101222613p:plain

 

作り方解説

STEP 1: 模様を作る

PolarCoordinatesノードのG成分(角度)を利用して模様を作ります。

f:id:r-ngtm:20190101223405p:plain

 

これに円を合わせます。

f:id:r-ngtm:20190101223805p:plain

 

日の丸ができました。

f:id:r-ngtm:20190101223827p:plain

 

STEP2 : 模様を回転させる

角度に時間を足して、模様を回転させます。

f:id:r-ngtm:20190101224225p:plain

 

日の丸の模様が回転するようになりました。めでたい。

f:id:r-ngtm:20190101224348g:plain

 

STEP3 : 赤富士を重ねる(完成)

背景のアルファ値を0に加工した凱風快晴を利用して日の丸と赤富士を重ねます。

f:id:r-ngtm:20190101225108p:plain

 

正月っぽい赤富士の完成です。

f:id:r-ngtm:20190101225258g:plain

 

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

Unityロゴにエメラルドっぽい質感を与えるシェーダーグラフです。

f:id:r-ngtm:20181229135711g:plain

 

 

エフェクトを加える前のUnityロゴは以下になります。

f:id:r-ngtm:20181229140149p:plain

 

準備

今回のシェーダーグラフでは、以下の二つのカスタムノードを使用します。

下記リンクからカスタムノードをダウンロードしてUnityプロジェクトへ入れてください。

正三角形タイルを出力するShaderGraphカスタムノード · GitHub

ドメインワーピング( http://www.iquilezles.org/www/articles/warp/warp.htm ) をシェーダーグラフで使うためにカスタムノード化したものです · GitHub

 

カスタムノードの解説

三角形タイル カスタムノード

正三角形タイルを出力するShaderGraphカスタムノード · GitHub

このカスタムノードは以下のような三角形タイルを出力します。

 

f:id:r-ngtm:20190101161133p:plain

ドメインワーピング カスタムノード

ドメインワーピング( http://www.iquilezles.org/www/articles/warp/warp.htm ) をシェーダーグラフで使うためにカスタムノード化したものです · GitHub

このカスタムノードはもやのような模様を出してくれます。

f:id:r-ngtm:20190101161252p:plain

 

作り方

STEP1 : ドメインワーピングを出す

DomainWarpingとTimeノードを以下のようにつなぎます。

f:id:r-ngtm:20190101161844p:plain

 

もやもやした感じの絵が出力されます。

f:id:r-ngtm:20190101162439g:plain



STEP2 : UVを三角形タイルにする

Triangleカスタムノードが出力する三角形UVをDomainWarpingノードのUVとして入力します。

f:id:r-ngtm:20190101163055p:plain

 

三角形がキラキラする感じの絵が出力されます。

f:id:r-ngtm:20190101163903g:plain

 

STEP3: 色を付ける

SampleGradientを利用して、色を付けます。

f:id:r-ngtm:20190101163421p:plain

 

エメラルドがきらきらする感じの色合いになりました。

f:id:r-ngtm:20190101163640g:plain

 

STEP4 : Unityロゴと乗算

最後に、このエメラルド色の三角形タイルとUnityロゴと乗算して完成です。

f:id:r-ngtm:20190101164403p:plain

 

f:id:r-ngtm:20190101164559g:plain