スライドショー

【Unity入門】シェーダーを書いてみよう!ShaderLabの簡単な書き方!

みなさんこんにちは!

フリーランスプログラマーのsatoです!

ShaderLabはとは Unity上でシェーダーを記述する言語です。

言語と聞くと、難しそうですが…安心してください!

記述のルールさえ覚えてしまえば、実は非常にシンプルな内容なんです!

言語の書き方自体もC#などと大差ないため、覚えることは非常に少ないです。

ぜひこの記事でその記述のルールを学んでみてください!

それではアジェンダです。

[基本] シェーダーとは?
[基本] まずはシェーダーを用意しよう!
[基本] ShaderLabとは?
[基本] シェーダーを書いてみよう!
[応用] 中身を理解しよう!

今回は実際にUnity上でシェーダーを準備し記述までしていきましょう。

もちろん基礎部分の説明もリンクで用意していますので、基礎に不安がある人はそちらを読んで理解しておきましょう。

それではよろしくお願いいたします。

ShaderLabとは?

ShaderLabを一言でいうと「Unity上でシェーダーを記述する言語」です。

先ほども言ったように、非常にシンプルなルールで成り立っているため、一度覚えてしまえば簡単です!

ぜひ今回で基礎部分を学び終えましょう!

そもそもShaderとは?

Shader(シェーダー)を一言で表すと「描画方法を記述したプログラム」と言えるでしょう。

このプログラムがあるからこそ、画面にオブジェクトが表示されるんです。

逆になければ画面には何も表示されません。

「でもそんなの書いた記憶ないよ!」と思う人も多いでしょう。

しかし実はそれは、デフォルトで選択されている「スタンダートシェーダー」が一般的な描画処理を行ってくれているからなんです。

以下の画像は、いつもの四角いCubeオブジェクトです。

この画面の、Inspectorをよく見てください。

スタンダードシェーダーを選択しているのが確認できると思います。

普段意識していなかったかもしれませんが、シェーダーはいつも使用していた機能なんです!

この辺りは以下の記事で詳細を記述していますので、基礎部分がわからない人はぜひ読んでおきましょう。

【Unity入門】Shaderってなんだ?誰でもわかるシェーダー解説!
更新日 : 2018年12月25日

シェーダーの仕組み

シェーダーの書き方に入る前に、その仕組みを学ぶ必要があります。

最低限「頂点シェーダー」「フラグメントシェーダー」については理解していないと、シェーダーを書くことは難しいでしょう。

そのためまずは以下の記事で、その仕組みを学んでみてください。

【Unity入門】シェーダーを触るなら必須!まずは仕組みを知ろう!
更新日 : 2019年5月13日

シェーダーのファイルを準備しよう

シェーダーを書くために、まずはシェーダーファイルを用意しましょう。

Shaderファイルを作ってみよう!

作り方は簡単です。

「Projectウィンドウ上で右クリック」→「Shader」→「Unlit Shader」を選択しましょう。

また生成時に付ける名前は、今回は「MyShader」という名称にしておきます。

ちゃんと作れましたね!

Shaderファイルをマテリアルに設定しよう!

あとはそれをマテリアルに設定する必要があります。

Custumの項目に、先ほど作ったシェーダーが自動的に追加されているはずなので、そこから選びましょう。

もしくは、いつものようにアイコンを投げ入れる方法でも反映できます。

Shaderスクリプトを開こう!

ここまでうまくいっていれば、マテリアルのinspectorウィンドウの表記は画像のようなに変わっているはずです。

それが確認できたら、スクリプトを一度開いてみましょうか。

先ほど作ったシェーダーファイルをダブルクリックしてエディタ開きましょう!

無事開ければ、ソースコードが表示されるはずです。

シェーダーを書いてみよう!

ではここからは実際に、シェーダーを記述してみましょう!

まずは一番簡単な処理で実行をしてみましょうか。

現在のシェーダープログラムを一度空っぽに削除して、以下のスクリプトを貼り付けてみてください。

このプログラムはシンプルに、モデルを設定した色で表示するシェーダー処理です。

※ただしMyShaderの部分だけ、自分の命名したファイル名に変更しておいてください。

// シェーダーの情報
Shader "Unlit/MyShader"
{
    // Unity上でやり取りをするプロパティ情報
    // マテリアルのInspectorウィンドウ上に表示され、スクリプト上からも設定できる
    Properties
    {
        _Color ("Main Color", Color) = (1,1,1,1) // Color プロパティー (デフォルトは白)   a____
    }
    // サブシェーダー
    // シェーダーの主な処理はこの中に記述する
    // サブシェーダーは複数書くことも可能が、基本は一つ
    SubShader
    {
        // パス
        // 1つのオブジェクトの1度の描画で行う処理をここに書く
        // これも基本一つだが、複雑な描画をするときは複数書くことも可能
        Pass
        {
            CGPROGRAM   // プログラムを書き始めるという宣言

            // 関数宣言
            #pragma vertex vert    // "vert" 関数を頂点シェーダー使用する宣言
            #pragma fragment frag  // "frag" 関数をフラグメントシェーダーと使用する宣言

            // 変数宣言
            fixed4 _Color; // マテリアルからのカラー   a____

            // 頂点シェーダー
            float4 vert (float4 vertex : POSITION) : SV_POSITION
            {
                return UnityObjectToClipPos(vertex);
            }

            // フラグメントシェーダー
            fixed4 frag () : SV_Target
            {
                return _Color;   a____
            }

            ENDCG   // プログラムを書き終わるという宣言
        }
    }
}

処理を書いて、保存するとモデルにシェーダーが反映されて、画像のように真っ白になるはずです。

そして、以下の画像のようにマテリアルのColorパラメーターを変更することで色が変更できるはずです。

まずは、シェーダーの記述に成功しましたね!

次はこのプログラムの意味を順に見ていきましょう。

シェーダーの基礎の基礎!

非常に長いプログラムだったので、気が引けている人もいるかもしれませんが…

内容はシンプルなので、重要な箇所を一箇所ずつ見ていけば簡単です!

重要な箇所は以下の4箇所です。

・プロパティ情報
・関数宣言
・変数宣言
・頂点シェーダー
・フラグメントシェーダー

一つずつ見ていきます。

プロパティ情報

// Unity上でやり取りをするプロパティ情報
// マテリアルのInspectorウィンドウ上に表示され、スクリプト上からも設定できる
Properties
{
  _Color ("Main Color", Color) = (1,1,1,1) // Color プロパティー (デフォルトは白)   a____
}

この部分へは、Unity側から送ってほしい情報を書くことになります。

ここに書いた内容は「このシェーダーを保持しているマテリアル」の「Inspectorウィンドウ上」に表示されています。

この部分ですね!

確かにUnity上から色パラメーターを送ることが出来ているようです。

より具体的な処理内容は以下の通りです。

_Color ("Main Color", Color) = (1,1,1,1) // Color プロパティー (デフォルトは白)   a____

①第一引数「Main Color」という名称で、
②第二引数「Color型」のデータを取得し、
③のちの変数定義箇所でしている_Color変数へ代入している

取得さえしてしまえば、後はシェーダー内の処理で好きに判定や反映を行えますね!

関数宣言

// 宣言
#pragma vertex vert    // "vert" 関数を頂点シェーダー使用する宣言
#pragma fragment frag  // "frag" 関数をフラグメントシェーダーと使用する宣言

一行目は「頂点(vertex)シェーダーでは、vertという関数を呼び出してね!」という意味で…

二行目は「フラグメント(fragment)シェーダーでは、fragという関数を呼び出してね!」という意味です。

これを定義することにより、各シェーダー処理が実行される時に、自作した「vert」「frag」関数を呼び出してもらえるんですね!

関数宣言

// 変数定義
fixed4 _Color; // マテリアルからのカラー

_Colorという変数を準備しています。

先ほどのプロパティ情報箇所の指定によって、この変数にUnityから取得してきたデータが入ることになったわけです。

頂点シェーダー

// 頂点シェーダー
float4 vert (float4 vertex : POSITION) : SV_POSITION
{
    return UnityObjectToClipPos(vertex);
}

頂点シェーダーは先ほど説明で出てきた、頂点情報を操作するシェーダーです。

フラグメントルシェーダー

// フラグメントシェーダー
fixed4 frag () : SV_Target
{
  return _Color;  a____
}

フラグメントシェーダーは、先ほど説明で出てきたピクセル情報を操作するシェーダーです。

今回覚えておくべきこと

今回はShaderLabでのシェーダーの記述の内容について見てきました。

まずは何が書かれているのかを、把握しておきましょう。

今回見てきた中で、重要な箇所は以下の5箇所です。

プロパティ情報 ・・・ Unityから情報を取得するために定義
関数宣言 ・・・ シェーダー処理で、呼ぶ関数を指定
変数宣言 ・・・ 「Unityからデータをうけとる」などの目的のため、変数を定義
頂点シェーダー ・・・ 頂点シェーダーの処理
フラグメントシェーダー・・・ フラグメントシェーダーの処理

処理内容を簡潔にまとめると以下と言えるでしょう。

①変数宣言・プロパティ情報で、必要な情報を取得し…

②関数宣言で指定した頂点シェーダー・フラグメントシェーダー関数で、実際に行う処理を記述する。

これだけ理解できれば、ネット上に転がっている実例や、Unity公式のサンプルを読み解けると思います。

言語の細かい部分として、型などを勉強しつつ、実装していけそうですね!

まとめ

今回はUnityのShaderの書き方について見てきました。

変数の型の詳細など細かい点までは、まだ見ることが出来ていませんが、大まかな流れは理解してもらえたかと思います。

最後にまとめた内容を、忘れずににShaderを引き続き学んでいきましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説