CG関連

【Unity】シェーダ(shader)入門 『サーフェスシェーダ』をまとめてみた。※随時更新

『シェーダ(Shader)』といえばもちろん、

  • 頂点シェーダ(vertex shader)
  • フラグメントシェーダ(fragment shader)

なのですが、

『Unity』では、

座標計算や、ライトの計算などややこしい箇所を『Unity』側でよしなにしてくれる

『サーフェスシェーダ(SurfaceShader)』なるものがあるそうで。

『サーフェスシェーダ(SurfaceShader)』についてぐぐってみると、

それはそれはわかりやすいサイトがありました。

7日間でマスターするUnityシェーダ入門

アオキ
めっさわかりやすい・・さすがですね・・

『シェーダ』超入門3記事と、
『サーフェスシェーダ(SurfaceShader)』関連の記事が20ページありましたので、

個人的にまとめてみることにしました。

Sponsored link

Unity シェーダー入門 サーフェスシェーダの立ち位置

Unity公式Youtubeに『シェーダ(Shader)』処理の流れがあったので拝借します。

本来『シェーダ(Shader)』で画面に描画するなら、

ステップ1からステップ8まで存在するそうです。

  1. 3Dモデルを準備
  2. Transformの値を4×4行列に変換
  3. 頂点ごとに描画位置を算出・・頂点シェーダ
  4. 表裏を調べ、裏なら描画しない・・カリング
  5. 描画点を確定
  6. 描画点をデプスバッファと比較
  7. 描画点に打つべき色を確定・・フラグメントシェーダ
  8. 点をうつ

『サーフェスシェーダ(Shader)』はちょうど、

『頂点シェーダ』と『フラグメントシェーダ』の間に位置することになるのかなと思います。

公式Youtubeによると、

  • 頂点シェーダはたいてい同じことを書く・・省略しても生成してくれる
  • フラグメントシェーダはたいてい複雑になる・・楽な記述で生成してくれる

というのが、『サーフェスシェーダ(Shader)』の立ち位置だそうです。

アオキ
Unityでシェーダーやるならはじめは『サーフェスシェーダ』からってことでしょうな。

Unity シェーダー入門 サーフェスシェーダの手順と初期コード

『サーフェスシェーダ(SurfaceShader)』をつくるには下記の手順が必要になります。

  1. 3Dモデルを準備
  2. シェーダーファイルを新規作成
  3. シェーダファイルを選んだ状態でMaterialを作成
  4. シェーダーを書く
  5. マテリアルを3Dモデルにアタッチする
アオキ
先に頂点情報のある3Dモデルを準備するのが『Unity』らしいなぁと思います。

『サーフェスシェーダ(SurfaceShader)』の初期コードは以下。

アオキ
『GLSL』とはずいぶん違うように見えますな・・

『Unity』では条件付きで『GLSL』も使えるそうですが、

正式に使える言語は『HLSL』という言語になります。

参考記事

surf関数の引数として、

  • Input IN と
  • input SurfaceOutputStandard o

の2つがあります。

頂点シェーダから渡ってきた頂点情報がINに入って、
inoutで色の設定などをフラグメントシェーダ側に渡しています。

タグ、ライティングモデル、構造体はいろいろ設定があるようで、

公式マニュアル見るとよさそうです。

Surface Shadersの記述 | unity 公式マニュアル

Sponsored link

Unity シェーダー入門 インスペクタに表示

『Properties』を追加すると、
『Unity』画面右側のエリア『インスペクタ』に表示させることができます。

型の種類として、

  • Color
  • Range(min, max)
  • 2D
  • Float

などがあります。

アオキ
public変数みたいな役割のようです。

Unity シェーダー入門 透明なシェーダをつくる

透明な『サーフェスシェーダ(SurfaceShader)』をつくるには下記3箇所の設定が必要です。

  • Tags {Queue} ・・描画の優先度
  • #pragma alpha ・・透過など宣言
  • o.Alpha = 0.6; ・・透過設定

『Queue』には描画の優先度を指定します。

『Queue』 の描画順序は、

Background -> Geometry -> AlphaTest -> Transparent -> Overlay

だそうです。

Sponsored link

Unity シェーダー入門 明るさ判定(ベクトル内積)

3Dプログラムでしょっちゅう目にする『ベクトル内積』。

『ベクトル内積』は2つのベクトル(絶対値)*cosθ で計算できますが、

専用の『dot』変数で計算します。

参考記事

オブジェクトの法線ベクトルと、
視線ベクトルの『内積』をとって
0〜1で透明度や色を決めたり。

オブジェクトの法線ベクトルと、
雪が降る方向(上側)の『内積』をとって
白くしたりしなかったり。

『トゥーンエフェクト(マンガっぽくなる)』にも『内積』が使われます。

  • worldNormal オブジェクトの法線ベクトル
  • viewDir 視線ベクトル

『内積』をとって0〜1で透明度調整しています。

アオキ
3Dプログラムやるなら『内積』は必須っす。

参考記事
【Unityシェーダ入門】リムライティングのシェーダを作る

Unity シェーダー入門 オブジェクトにテクスチャを表示する (uv座標, tex2D)

『テクスチャ(画像)』を用意してオブジェクトに貼ることができます。

テクスチャは『テクスチャuv座標』で指定必要です。

  • uv_MainTex ・・テクスチャuv座標(左下0,0, 右上1,1)
  • tex2Dメソッド ・・ 座標色取得(引数2つ)
  • Sampler2D ・・ テクスチャ型

Sponsored link

Unity シェーダー入門 明るさ判定は『グレースケール』

単純に明るいか暗いかを判定させるには、

4次元情報のRGBAではなく、
1次元(明るさだけ)の『グレースケール』に変換すると便利です。

式は以下。

grayscale = 0.3 * R + 0.6 * G + 0.1 * B

Unity シェーダー入門 時間で動かす _Time

  • _Time変数 ・・ 時間
  • オフセットをかけて移動できる

『テクスチャuv座標』にスクロール速度×時間を足すことで、

動いているようにみせることができます。

スクロール速度×時間=移動距離

サンプルでは『Terrain(テライン)』で地形をつくって、『Plane』で池をつくっていました。

  • Terrain(テライン)・・ 簡単に地形生成できるめっちゃすごいツール

アオキ
uvスクロールさせるだけで池っぽくなってる・・すごいなぁ。

参考記事
【Unityシェーダ入門】uvスクロールで水面を動かす

Sponsored link

Unity シェーダー入門 テクスチャのブレンド(混ぜる) lerp

『テクスチャ』をブレンドするには3つの要素が必要になります。

  • テクスチャ1
  • テクスチャ2
  • マスク(どんな割合でブレンドするかの指標。通常は白黒の画像(ノイズみたいな))

マスク画像はPhotoShopなどでも作成できます。(白黒で雲模様)

  • lerp関数 ・・ ブレンドする関数
アオキ
lerp関数は『GLSL』だとmix関数にあたるようです。

参考記事

Unity シェーダー入門 distanceとsin

円やリングを動かすために、

座標間の距離を測りつつ、三角関数(sin)に時間を入れて動かすサンプルがありました。

  • distance関数・・2点間の距離を取得
  • sin ・・三角関数

三角関数の関連記事

アオキ
3Dプログラムには三角関数も必須っす。
Sponsored link

Unity シェーダー入門 ノイズ5種盛り

3Dプログラムで必須な『ノイズ』。

参考サイトにきれいに5種盛りで紹介されていました。

  • ランダムノイズ・・砂嵐
  • ブロックノイズ・・テレビの調子悪い時
  • バリューノイズ・・ブロックノイズをなめらかに
  • パーリンノイズ・・バリューノイズをさらになめらかに
  • fBmノイズ・・様々な解像度のノイズをずらしながら重ねる

参考記事
【Unityシェーダ入門】シェーダで作るノイズ5種盛り

ランダムノイズ

ランダムの値はこの記事からきているようです。

ランダムな値を返す関数 on GLSL

ブロックノイズ

ランダムノイズからブロックごとに1点を選んで()ベタ塗りしています。

バリューノイズ

ブロックノイズで使った四隅の色からブロック内の色を補間しています。

パーリンノイズ

炎や雲などにみられる自然な変化のノイズを表現するのに使われています。

ブロック内の点の座標(A)を指定します。

ブロック内の点(A)から四隅に向かうベクトルと、
四隅からランダムなベクトルを発生させて、
その『内積』をとって,色情報として扱います。

ブロック内の点が動けば四隅の色もなだらかに変わります。

アオキ
これ考えたケン・パーリンさんはアカデミー賞とったそうです、すごい。

fBmノイズ

地形や雲など幅広い表現に使われています。

パーリンノイズの解像度を変えたテクスチャを足して生成します。

  • オクターブ・・いくつの階層のノイズを合成するか
  • パーシステンス・・それぞれのノイズをどのような割合で合成するか

FBMノイズはこちらのサイトが詳しいです。

非整数ブラウン運動 | TheBookOfShaders

Sponsored link

Unity シェーダー入門 ShaderToyから移植

『GLSL』で書かれた『ShaderToy』から移植する方法が書かれていました。

参考記事
【Unityシェーダ入門】粘性のある液体をシェーダで作る

オリジナルコード
ShaderToy

アオキ
シェーダーは『Unlit Shader』でつくる必要があるようです。
  • Unlit ・・ unlightingの略。ライティングなし。

移植先は『フラグメントシェーダー内』。

修正前

修正後

変換箇所。

  • fract -> frac
  • vec -> half
  • mix -> lerp
  • iResolution.xy -> uv.xy
  • iGlobalTime -> _Time.w
アオキ
一部関数変換必要なのでこちらも参考にしてみてください。

関連記事

Unity シェーダー入門 テクスチャの両面を描画する(カリングオフ)

裏面も表示させるには『カリング』をオフにする必要があります。

  • カリング・・裏側は描画しない機能。処理軽くなる

こちらも『Unlit Shader』で作成必要です。

Unity シェーダー入門 頂点シェーダを動かす

『頂点シェーダ』にフックすることで、

『頂点シェーダ』を動かして、旗が揺れるような動きをつくれます。

頂点の座標データを操作する場合は、

『頂点シェーダ』を自分で作ることもできます。

Sponsored link

Unity シェーダー入門 オブジェクトが重なった部分をくり抜く

抜きたい形のオブジェクトをA。
抜かれる側をBとして。

オブジェクトAを『デプスバッファ』に書き込みつつ、
カラーバッファに書き込まないことで、

描画はされないけれど、深度が記録された状態になります。

その後オブジェクトを通常通り描画すると、

『デプスバッファ』にオブジェクトAが書き込まれてるのでこの部分だけ描画されなくなります。

アオキ
数が増えるほど深度の順番も把握しないと、ってことですかね。

Unity シェーダー入門 ポリゴンをポイント(点)で表現する

3Dモデルの頂点情報は『MeshTopology(メッシュトポロジ)』で定義されています。

  • トポロジ・・位相・位置関係など

『トポロジ』はいろいろあるようです。

  • Triangles ・・三角形(デフォルト)
  • Quads ・・四角形
  • Lines ・・線
  • LineStrip ・・線分
  • Points ・・点

『頂点』をポイントで表示するなら『MeshTopology.Points』と指定します。

アオキ
これは『C#スクリプト』側だそうです。要チェック。

Sponsored link

Unity シェーダー入門 をやってみた感想

『WebGL/GLSL』と比べると、
3Dモデルを置いたりインスペクタが使えたりで、
少し操作を覚えればとても使いやすいなと感じました。

『HLSL』文法も、仕組みさえわかれば、
今のところ『GLSL』とそんなに変わらないかなと思います。

となるとやっぱり必要なのは、

  • 独創力 = 場数 ・・どれだけ作品を見たか・マネしたか
  • 数学力 ・・複雑な動作をさせるなら必須

の2つになってくるよなと思います。

アオキ
学生時代に数学やっとけばよかったですわホンマに・・まさかこんなに使うことになるとは・・

 

『Unity』関係ではこんな記事も読まれています。

1. 【Unity】本のおすすめはこれで決まり!【初心者向け】1冊をとことんやって次に行きましょ

2. 【Unity】シェーダ入門(サーフェスシェーダ) をまとめてみた。※随時更新

3. 【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】

4. 【Unity】よく使う用語集【初心者向け】※随時更新


  

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. CG関連

    【GLSL(シェーダー)】プログラミングでかっこいい映像をつくる『レイマーチング』

    プログラミングでかっこいい映像をつくるには、『GLSL(ジーエルエスエ…

  2. CG関連

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

    プログラミングでアートだったりデザインを作ることを『クリエイティブコ…

  3. CG関連

    【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

    遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエ…

  4. CG関連

    【GPGPUパーティクルシステム】を試してみた【TouchDesigner】

    プログラミングで格好いい映像を作りたいと始めた『TouchDesign…

  5. CG関連

    【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

    インターネット(Web)で3D表現をする方法として、おそらく一番人…

  6. CG関連

    【GLSL(シェーダー)】『レイマーチング』入門その1 距離関数とレイとカメラの設定

    かっこいい『3Dプログラム』をつくりたいとググって見つけた『レイマー…

Sponsored link

最近の記事

  1. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  4. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  5. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述