Unityシェーダーお絵描き入門 - 板ポリの色を変える

楽しいというワードに魅かれて、これをやってみようかと思います。

docs.google.com

「適当な板ポリを置いてその上に絵を描く」をやってみます。

Quadを作った

Mesh Renderer が Default-Material になっているので、

右クリック -> Create -> Material でこんな感じの設定のマテリアルを作って

アタッチすれば、水色になった

とりあえずサンプルコードを写経してみる

Shader "Custom/Shader1" {

     CGINCLUDE
     #include "UnityCG.cginc"
 
     float4 frag_test (v2f_img i) : SV_Target
     {
         return float4 (i.uv.x, i.uv.y, 0, 1);
     }
     ENDCG
 
     SubShader {
         Pass
         {
         CGPROGRAM
         #pragma vertex vert_img
         #pragma fragment frag_test
         ENDCG
         }
     }
 }

先ほど作成したMaterial のShaderの箇所から↑のシェーダーを選択（Shader "Custom/Shader1"

適用した結果。リアルタイムで反映されるのはいいですね。

調べていくと、どうやらCGINCLUDEは必須ではなさそう。もっと簡潔にこう書ける

Shader "Custom/Shader1" {
     SubShader {
         Pass
         {
         CGPROGRAM
         #include "UnityCG.cginc"
         #pragma vertex vert_img
         #pragma fragment frag_test
 
             float4 frag_test (v2f_img i) : SV_Target
             {
                 return float4 (i.uv.x, i.uv.y, 0, 1);
             }
         ENDCG
         }
     }
 }

ちなみにこれはフラグメントシェーダーというらしい。ある地点の座標を受け取って、その色を決める関数を作ると、GPUで全ピクセル分実行されて絵になるということらしいです。シェーダーの入門ではよくSurfaceシェーダーを見かけますが、こんな意見もあるようです。

Unityにおける Surface Shader と Vertex/Fragment Shader の大まかな使い分けは、ライトの影響を受けるモノには Surface Shader で、受けないモノには Vertex/Fragment Shader です。

が、勘違いしてはいけません。「Surface Shader > Vertex/Fragment Shader」ではなく、むしろシェーダーの基本は Vertex/Fragment の方です。（以降 V/F Shader と書きます）

tsumikiseisaku.com

コードの意味をわかる範囲で調べてみた。

Shader "Custom/Shader1" {   

// シェーダーの名前を定義かな

SubShader {  

// シェーダーの1単位っぽい。ただ調べても Unity 公式ページが意味不明過ぎて・・

「Unity の各シェーダーはサブシェーダーの一覧から構成されます。Unity がメッシュを描画するとき、使用するシェーダーを見つけ、ユーザーのグラフィックカードで実行する最初のサブシェーダーを選択します。」

// 同一ファイルに複数のシェーダーを書きたい時はこのSubShaderを並列で並べればいいってことかな

Pass

 // フラグメントシェーダーだと必ずPassを書かないといけないらしい。Passって何？

// Unity公式は相変わらずよくわからない、もうちょっと初心者にわかりやすく書いてくれればな

「Pass ブロックはゲームオブジェクトのジオメトリを 1 回レンダリングします。」 

// 取るとエラーになるし、もうここはフラグメントシェーダーのおまじないってことで・・・

CGPROGRAM

// おそらくCGプログラムをこれから書きますよってこと。じゃあ、今まではCGプログラムじゃなかったのか？

#include "UnityCG.cginc"

// Unityが標準で用意しているシェーダープログラムを読み込む、だと思う

        #pragma vertex vert_img
        #pragma fragment frag_test 

// 頂点（Vertex）シェーダー に vert_img関数を、Fragmentシェーダー にfrag_test関数を使うと指定しているっぽい

// frag_test は自分でこのあと定義しているけど、vert_img はどっから出てきたかというと、どうやら UnityCG.cginc で定義されている関数っぽい

// ちなみに #pragma （プラグマ）はコンパイラに指示を与えるもので、コンパイルディレクティブっていうらしい

 // vert_img はこの記事の説明がわかりやすい

www.shibuya24.info

            float4 frag_test (v2f_img i) : SV_Target
             {
                 return float4 (i.uv.x, i.uv.y, 0, 1);
             }

// ここがメインの処理。uvは0〜1の座標が渡されるので、

// 左上が (0, 0, 0, 1)、左下が(0, 1, 0, 1)、右上が(1, 0, 0, 1)、右下が(1, 1, 0, 1)ってことでしょ？あれ？

// UVの座標系は原点が左下なのか、つまり左が0、上が1・・だと

// 左上が (0, 1, 0, 1): 緑、左下が(0, 0, 0, 1): 黒、右上が(1, 1, 0, 1): 黄、右下が(1, 0, 0, 1): 赤

// あってる！

シェーダーって前提となる知識が多くて苦労しそうな予感・・

HLSLシェーダーの魔導書 - 第1章

Windows PCを購入したので、DirectX12の魔導書と並行してHLSLシェーダーの魔導書も読み始めた。DirectX12の魔導書のほうはお風呂で読む感じで、こちらはPCで実装しながら覚えていく感じにしようかと。

動作環境の要件としてGeForce GTX 1060 もしくは GeForce GTX1660以上が必要とのことで...

ずっとMacしか使ってなかったからWindowsのことはよくわからず... 近所の電気屋行ってPC見たけどグラフィックボードがCPUとは別になっていないPCがほとんどで... ゲーミングPCぐらいの性能のPCってあんまり置いてないんだね

結局ネットで購入したけど、

・OS：Windows11

・CPU：Intel Core i7-12700H

・RAM：16GB

・GPU：NVIDIA GeForce RTX 3060

このスペックで書籍のサンプルが動くことを祈ってる...（動かなかったら詰む

第1章「レンダリングパイプライン入門」を読む。

DirectX12を読んだ後だから各所省略して説明しているのがよくわかる... が、初学者にはこれで十分な気がする。かなりサクッと読めた。

DirectX12の魔導書 - 第5章/第6章

第5章「ポリゴンにテクスチャを貼り付ける」

何かするたびにバッファーを確保してる気がする

第6章「行列による座標変換」

最初のほうこそ、行優先/列優先の座標変換の話だが、途中から定数バッファーの話になる

とりあえず買ったからにはざっとでも全部読むけど... この本は誰向けの本なんだろうと疑問がわく。

「3Dレンダリングの基礎から」とあるが、初心者向けではない。かといって、実際に業務で使うならこの辺りの低レイヤーAPIの話は隠蔽されるので、多くの人に取ってはここまで知る必要がない気がする。かといって、上級者向けというには説明が冗長すぎる。

じゃぁ、他に良い書籍があるかと言われれば、今のところ「これだ！」というものには巡り合えてないので、グラフィック関連の知識を体系的にまとめた本を出版してくれるだけでもありがたいといえばありがたいのだが...

ライティング基礎メモ

ライティングの基礎教材資料を見たので内容メモ

・PBRのマテリアル → Albedo(色) + meatless(金属) + roughness(粗さ)

・昔のマテリアル → Diffuse(色) + Specular(ハイライト) + Reflection(反射)

・光が物体に当たる → 反射(Reflection)、屈折(Refraction)、吸収(Absorption) 

• 主光源の存在理由を考える
• 光質を決める→色温度、明度(ライトの強さ)、減衰、角度
• 環境光を調整する

UnityのPost Processing Stack の動画

https://www.youtube.com/watch?v=r5mNmH68KPQ&t=91s

HDR(High Dynamic Range) → 幅広い輝度を表現できる

トーンマップ → HDRでレンダリングしたものをモニタに表示するために輝度を圧縮する

自分を照らす3点照明

・Key Light

・Fill Light

・Back Light（リムライト）

映画シルエット集

https://www.facebook.com/watch/?v=996588043807920

DirectX12の魔導書 - 第4章 - ひたすら初期化

第4章の「ポリゴンの表示」を読んだ

ポリゴンの表示というか、もうポリゴンを表示するまでの初期化手順が延々と書いてある感じ。

とりあえず、実装はせずにざっと読む方針なのもあって、読むのがつらいっ！

「初学者はx.x.x項まで読み飛ばしてもらって結構です」の記述が出てきたら、なぜかラッキーと思ってしまうw

ただ、たまに出てくる概念の説明のところは参考になるので、まぁ全く無意味というわけではないとは思うが...

151/629 = 0.24... 現在の進捗...約1/4

早く読んでしまって次行かねば！！

DirectX12の魔導書 - 第2章/第3章

第2章の「グラフィックスパイプラインとさまざまなシェーダー」を読んだ

読んだというかざっと目を通しただけ... 初心者には難しすぎる

お風呂で読んでるけど600ページもあるから重くて手が痛くなってくる

とりあえず、このグラフィックス パイプラインの流れだけは覚えた

IA > VS > HS > TS > DS > GS > RS > PS > OM

そして、第3章の「初期化から画面クリアまで」に入ったところで...

Windows PCがない！Macしか持ってない！！

しょうがない、Windows買うか〜...

最終的には手を動かさないと覚えられないけど、1周目は読むだけにしようかな

2周目に実際にコーディングしよ

じゃないと、読み終わるのに時間がかかりすぎて挫折しそう、急いで読まないと挫折するわ

3章ざっと目を通して..... 初期化処理多すぎない？

便利なメソッド1行呼ぶだけじゃなくて、低レイヤーのAPIを扱うとこうなるのか...

大変なものに手を出してしまったかもしれない

DirextX12の魔導書が届く

何から始めるのが正解かわからないけど、とりあえずDirectXをやってみることにする

AmazonからDirectX12の魔導書が届いた

【対象読者】

ある程度プログラミングを経験しているけれど

UnityやUnreal Engine 4といったゲームエンジンや、DxLibなどのライブラリではなく

DirectXを使ってもう少しハードウェアに近い部分のプログラミングに触れたい

これはぴったりなのでは？

第一章の前提となる知識とDirectX 12の概略を読む

読む... 読む....... 難しくない？

とりあえず半分くらいはあんまり理解していないけど、ざっと流さないと挫折する自信がある

あとでもう1周するよ、うん

もう強引に前提知識は入れたものとして明日は第2章に進むよ