Breaking News
Home / 勉強会レポート / 【勉強会レポート】Unity shader勉強会の様子

【勉強会レポート】Unity shader勉強会の様子


みなさんはshader、使っていますか?
shaderプログラミングをしたことがありますか?

shaderプログラミングというと、プログラミング言語の中でも特に難しそう…というイメージがあったり、
shaderの勉強にまで手が回らない、なんて思っている人が多いと思います

そんな方のために、今回TECH_SALONでは、Unityを使って学ぶshader勉強会を
株式会社Donutsの場所をお借りして開催しました!

unityshader

 

 

 

1.勉強会の概要

まずはshaderに関わる知識の解説(例えばポリゴン、モデル、Vertex shader)から始まり、1時間後くらいから実際にUnityを使ったshaderプログラミングを行いました。

UnityにはShaderLabというShaderを簡単に書けるようにUnity側で用意された言語がありますが、今回はそれを使用せずにHLSLというShader言語を使用しました。

2.勉強会の見どころ

○Unityを使用しているため、プログラミングの結果がすぐ分かり、理解しやすい!
今回はゲームエンジンであるUnityを使用しているため、コードを書いて保存すればすぐにScene上で確認が出来ます。

○ShaderLabではなく、HLSL言語を使用しているため、一からShaderプログラミングが学べる!
Unityの言語ではなくHLSL言語のため、Unity以外でも使用でき、より深く勉強することが出来ます。

 

report1

3.勉強会で学んだこと

まずは、Shaderの基礎の基礎知識として、3Dの描画に必要な

ポリゴン

Shader

Material

モデル

の4つについて解説して頂きました。

ポリゴン…頂点データ(ただの座標)の集まり。ちなみにポリゴンとモデルを混同する人が多いみたいですが、ポリゴンはモデルではなく、Fbxファイルでもありません。

Shader…頂点の加工(Vertex)と最終的な色の決定(Fragment)をするもの。

Material…Shaderを実体化するもの。

モデル…ポリゴンとMaterialを管理するもの。Fbxファイルもモデルの一つ。

 

つまり、ポリゴンの頂点データを加工し、最終的な色の決定をするのがShaderで、
そのShaderを実際にモデルに反映させるためにあるのがMaterialです。
そして、そのポリゴンとMaterialを管理しているのがモデルなのです。

Shaderプログラミングの準備

ここからは講義で実際に行ったプログラミングのうちいくつかをソースコードとともに紹介します。

UnityでShaderを書くには、Projectウィンドウ上で右クリックし、

Create > Shader > Standard Surface Shaderを実行し、“test1”と名前を付けます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-76

 

 

 

 

 

その後、そのShaderを右クリックして、Create > Material を実行します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-78

 

 

 

 

 

その後、Cubeを作成してこのMaterialをアタッチしてください。
これで、準備が整ったので、先ほど作成したShaderをダブルクリックしてエディタを起動します。

そして、一度すべてのソースコードを消して、以下のソースコードを記述してください。

これで保存して実行してみましょう。

1

 

 

 

 

 

 

Cubeが真っ白になってしまいました。

これは、最低限の記述しか書いていないため、

UnityデフォルトのMaterialが反映されて白で描画されています。

では、次にこちらを記述してみましょう。

ShaderにはVertexFragmentという処理があります。

Vertex…頂点データの加工を行う。

Fragment…最終的な色の決定をする。

 

そして、#pragmaというのは、その処理を行う関数名を指定しています。
今回で言うと、

上記の部分は「vertex処理を行うのは”vert”で、fragment処理は”frag”で行う」
ということになります。

 

次に、float4 pos : POSITIONの”POSITION”とは
セマンティクスと呼ばれ、その型がどういう属性なのか示すものです。

この文は「引数のposはPOSITION(頂点座標)です」
という意味です。

他にも”NORMAL”はNORMAL情報
SV_POSITIONは加工後の座標を返します。

後半のfragの処理についてですが、
ここにもCOLORというセマンティクスがあります。
このCOLORも最終的な色を返します。

についてはfloat4でRGBAを表現していて、
UnityではRGBAの値を0~1で表します。

今回はRGBAが全て1のため、白になります。

では、このプログラムを実行してみましょう。
2

 

 

 

 

 

 

実行するとこのように失敗してしまいます。

これはvertexで頂点の加工をしていないからです。
ただ、fragmentの処理は正常に動作したため、
白で描画されたけどCubeの形ではない、という描画結果になりました。

Cubeの形になるように修正します。

3

 

 

 

 

 

 

しっかり表示されました!

ただ、mul関数を何度も使っていて面倒くさいですよね?

Unityならこの一行で済ませることができます。
便利ですね!

色の描画

今の段階では白のため、色を描画出来るようにします。

4

 

 

 

 

 

 

 

色が付きました!
このソースコードの解説をしますと、

ここは、fragment shaderでNormal情報も受け取れるようにするために
structで定義をし直しました。

ここでfloatの後ろにセマンティクスも定義しているため、その後のVertexとFragmentの部分ではセマンティクスを省略できます!

次に

この部分で先ほど定義したv2fに合わせて情報を返すようにしました。

fragmentも

v2fに書き直してあります。
ちなみにreturn float4の部分は
ピクセルごとの色の数値が0を下回らないように計算しています。

これで色を塗ることが出来増した。
でも、一々色をプログラム上で変更するのは面倒くさいですよね?

実は、ShaderのInspecter自作することが出来ます!

Shaderのプロパティ

プロパティ=MaterialのInspecterから自由に弄れる変数

5

 

 

 

 

 

 

 

 

つまり↑これです!

ではソースコードです!

変更点としては

SubShaderの前にプロパティを定義し、_CubeColorというプロパティ名を使用することで
Inspecter上でカラーパレットが表示されるようになります。

(1,1,1,1)の部分を変更すれば、カラーパレットの初期色を変更できます。

uniformとはvertexやfragmentで共通で使えるようにする修飾子です。

最後に、ここで_CubeColorの変更を反映させています。

これを保存して実行すると…

6 7

 

 

 

 

 

 

 

 

Inspecter上で変更することが出来ました!

4.勉強会の感想

今回、初めてShaderプログラミングをしてみましたが、
解説がとてもわかりやすく初心者でも理解できるような勉強会でした。

Shaderに関する基礎知識だけでなく、ソースコードの解説もとても丁寧で、
プログラミングに自身がない人でも十分理解できるような内容でした。

また、Inspecter上で色が変更できるという点が
Unityらしくもあり非常に便利なのでとてもよかったです!

講師の方がまだまだ基礎の基礎しか講習出来てないとおっしゃっていたので、
是非ともUnity Shader勉強会Vol.2をして頂きたいと思います!

 

report2 report3

 

5.企業の紹介

——————————
株式会社Donuts
——————————

「Change the Game」のスローガンの元、100%自己資本で現在急成長中の企業です。

モバイルゲーム事業・Webサービス事業・ASP事業の3つの事業を展開し、
最近ではオリジナルのモバイルゲームであるTokyo 7th シスターズが
アニメーション映像化プロジェクトを発表しています。

HP : http://www.donuts.ne.jp/

採用情報 : http://www.donuts.ne.jp/jobs/

—————————–
TECH_SALON
—————————–
TECH_SALONは「楽しいエンジニアイベントを!」をコンセプトに、

ファーストキャリアを技術職として歩んでいきたい学生のための、

スキルアップ・キャリアアップの機会を提供していくコミュニティです。

これからのIT世界を担っていく若手エンジニアにとって、

成長の機会となるような場を多く用意しています。

これまでに、30回以上の勉強会の開催20社以上のITベンチャー企業とのコラボ、

延べ300名近くの方々にプログラミング教育の場を提供してきております。

HP : http://tech-salon.com/

Facebook : https://www.facebook.com/techsalon.page/

Twitter : https://twitter.com/SNS_SALON

 


About T.H

T.H
2年間3DCGを学び、今はUnityをメインに勉強しています。UI/UXデザインやプランニングにも興味があり、目下勉強中です。

Check Also

14449044_636336903206071_8433563234841605190_n

【勉強会レポート】Elixirってどんな言語?Elixirを使ってFizzBuzzを解こう!の様子

1.勉強会の概要 GO言語以降 …