海の底または近海を漂うナニカ?

きのむくままにいろいろかくですよー(≧◇≦)

Study!シェーダー!unityのやつ! このShaderたぶんVRchatでも使えそう!Σ(゚Д゚)の巻 その1

unityでのシェーダーについて(>_<)

vrchat のアバター、色々やりたいなーと思いながら見てるですが割と制限が多い……。

ってわけで、色々調べるうちにシェーダーというものを見つけましたです。ってわけでstudy now な感じなのですが、その纏めも兼ねまして少し書きたいと思います。(あくまで私の理解した範囲ですゆえ、間違っていましたらご指摘願いたいでござる(≧◇≦)) 

シェーダーとは

とりあえずシェーダーです。vrchatなどなどで使われるいわゆるモデルというものは、根本を辿ると点の集まりらしいです。でもって点には、情報をのせるです。例えば他のこの点とつながってるよー!ってあれば線になるですし、この三つで面が一つできるみたいな?

そしていわゆる3Dモデルってやつはこの面がいっぱい集まってできたやつですね。

f:id:matasaburou1999:20180605190617p:plain

他には UV展開された平面のこの点だよー!ってあればその三つの点に対応してテクスチャを貼ることもできるです。

f:id:matasaburou1999:20180605191626p:plain

要するにこんな感じでモデルの3D情報を画面にこういう風に写すんだぜー!って書いてあるのがシェーダーってことでいいのかな。

 

このシェーダーを使うことで、モデルの表示方法をいじれます。

Vrchatで言うなら、自分のアバターやワールドの表示方法もいじれます。

テクスチャーだけの unlite/texture は、vrchatでモデルを使うとよくご存知のやつですが、そういう感じで色んな絵作りができます。

 

なのでちょびっと勉強したいです。

Unityでのシェーダー

でもってVRchatも使ってるunityではどんな感じにシェーダーを使えるのかなってのを見てました。

f:id:matasaburou1999:20180605192934p:plain

よく聞くのは、次の三つっぽいです。

 

・ Vertexシェーダー 頂点シェーダー 

 3Dデータの点の座標を操作する感じ

・ Fragment シェーダー(ポイントシェーダーともいう)

 Vertexシェーダーで用意した点の座標から画面に色を塗る感じ。

ただし、色を塗るには、モデルにどういう風に光が当たってるとか、ここはテクスチャ使って!とか、透明にして~!とか、etc……。いろいろな要素が絡んでくるので、いっぱい指示がいるみたいです

Surfaceシェーダー(unity独自)

 Unityに搭載されている便利機能みたいな感じ。

 上の二つのシェーダーは、点をこうするよー!とかここはこうやって塗ってね!って全部指示しないと動いてくれないマニュアル野郎ですが、全部書くのは大変です。

なので、ある程度やること覚えていてくれて、もう少し大雑把にお願いしても大体いい感じに仕上げてくれるunityさんとこにすむ、フレンドリーなシェーダーらしいです。

 

ってわけで、大体わかったようで、私はたぶん何もわかってないのでunityでみてみるです。

 

Unityにて

f:id:matasaburou1999:20180605194120p:plain

まずシェーダーを用意してみるです。

Unityではベースになるシェーダーは生成することができるらしいですので、それを見てみます。とりあえずなので、使うのは Unlite シェーダーを。ライトなしでテクスチャだけついてるー!みたいなやつですね。vrchatで自作モデルするととりあえずつけてる方も多いかも?

 

unityを開きます。Assetのところを右クリックするですね。

Create → Shader → Unlit Shader 

で作成できるはずです。

できたら適当に名前を付けてダブルクリックしてみましょう。

たぶん、何かしらのエディタ(テキスト編集する奴)が動くはずです。

何書いてあるんだこれみたいな謎めいた文章が出てくるですが、これがシェーダー用のプログラムらしいです。

f:id:matasaburou1999:20180605195212p:plain

ざーっと説明するです。

一番上のオレンジのとこが Properties で、これはシェーダーの設定をunityで弄れるようにするための物らしいです。

次に紫色の辺り、これがシェーダーがどういう風に画面を作るかを指示する本体のようです。

そして、赤色のところがバーテックス(vertex) シェーダー、青色のところがフラグメント(fragment)シェーダーのようです。

でもって、今回vertexとfragmentを使ってます。ってことはUnlit/textureシェーダーは、surfaceシェーダーではなく、そっちの二つを使ったものっぽいですね。

 

というわけで、少し説明。

 

オレンジ色のとこのProptiesについて

例えば今回だと MainTex とか Texture とか書いてあるですね。なんかテクスチャっぽいです。で、unityの画面を見てみるです。

f:id:matasaburou1999:20180605195557p:plain

さっきと同じ感じでMaterial を追加してください。

先ほど作ったUnliteシェーダーをMaterialにドロップしてください。

たぶん、なんかマテリアルが白くなると思うです。

でもってそのマテリアルをクリックして見るとー!

f:id:matasaburou1999:20180605200158p:plain

こんな感じで、右上のとこにTexture none ってあるですね。

これがさっきのプロパティです。もう一回ちらっとシェーダーの長ったらしい謎の文章を見ると、オレンジのとこには下みたいなのが書いてあったですね。

 

Properties {

 _MainTex ("Texture", 2D) = "white" {}

}

 

このTexture っていうのがunityの画面の Textureだよって意味で、white っていうのが、なんも設定されてない時はこれにして!って感じです。

なので、先ほどシェーダーをマテリアルに入れたら真っ白になったですね。

(ちなみによく見てみると、fragmentシェーダーの中でここで指定されたテクスチャ(ない時は真っ白)を使って色を塗っているようです。)

 

ここでわかったのは、

この プロパティっていうのは、unityの画面でシェーダーのための設定を変えれるってことです。

でっ?って感じもするですね。

ですけどたぶんこれは結構便利です。

なぜなら、さっきの長ったらしい文章を書いてるときは、実際それを使うとどう書かれるか、わからんです。それをちまちま数字書き直して―!とかやるのはしんどいです。

ですけど、例えば、これ透明にしたい…だけどどれぐらいがいいかわからんなーって時とか、プロパティに、透明度の設定を書いて、フラグメントシェーダーでその設定された値を使って透明度を決めます。

すると、あとでプロパティをいじってこれぐらいにしようってunityで見ながら決めることができるみたいな感じです。たぶん、色々便利なのだと思います。(私がとりあえず思いついたのはこれぐらいでした)

 

ってわけで、シェーダーのざっぱな説明と、とりあえずプロパティについてでした。

 

ちょっと切りが悪いですが、なんか長くなってきましたので、また続きは今度書くですねー。

 

なおなお、今回シェーダーについてご紹介したですが、モデルここを光らせたい…!とか、ちょっとメタリックにしたい!とかってだけなら別にシェーダを自作しなくてもやれる方法はいろいろあると思うです。そのため、今回ご紹介するのが全てではないですので、調べてみるのもいいんじゃないかなーと思いました。

 

てっでー(≧◇≦)/

 

続く!!!!!

続き!