[Shader] Part 3: Your first shader

Lâm trận

Mất 3 part dạo đầu giờ mới bắt đầu lâm trận ( ̄▽ ̄*)ゞ

Nào ở #part 2, tôi đã giới thiệu về 1 shader – Unlit Color không sử dụng một biến nào trong Properties.

Ở bài viết lần này, tôi sẽ hướng dẫn shader – Unlit Color có một biến _Color để điều khiển màu qua Material. Sẽ làm từng bước một để bạn có thể tự tạo cho mình một shader đầu tiên nhé ( ̄▽ ̄)

Unlit là gì?

Unlit tức là tạo một bề mặt vật liệu – không bị ảnh hưởng bởi ảnh sáng (not provided with lighting)


Coi lại mối quan hệ giữa chúng một chút …

Có 4 thành phần cơ bản để tạo nên, bao gồm cả đối tượng “model”:

03fig05

Trong script Shader này, tôi sẽ không sử dụng texture. Vậy nên ta cần có:

  • Model
  • Material
  • Shader

Tiến hành khởi tạo

♠   Tạo Model, ở cửa sổ Hierarchy:   3D Object -> Capsule

♠   Tạo Material, ở cửa sổ Project:    Create -> Material

  • cầm cái material vừa tạo, kéo vô cái cục Capsule giùm cái :>

♠   Tạo Shader, ở cửa số Project:      Create -> Shader -> Unlit Shader

part3_0

♠   Mở script UnlitColor ra và xóa hết đi cho tui … (ノ ˘_˘)ノ*・゜゚~~ viết theo tui nào, đây là structure căn bản của shader:

Shader ".UnityCattus/Unlit Color"
{
	Properties
	{
		//declare properties
	}

	SubShader
	{
		Pass
		{
			CGPROGRAM

			//our shader code

			ENDCG
		}
	}
}

Bắt đầu viết nha

♠   Trong Properties, khai báo biến “_Color” ( chú ý cuối dòng không có “;” )

_Color (“My Color”, Color) = (1, 1, 1, 1)

  • Giải thích:
    • _Color:        tên biến
    • My Color:   tên hiển thị ngoài inspector
    • Color:          kiểu dữ liệu
    • (1, 1, 1, 1) :  4 kênh màu ( red = 1, green = 1, blue = 1, alpha = 1)

♠   Trong CGPROGRAM, ta sẽ viết lần lượt 4 phần

  1. pragma
  2. variables (cho phần CG code)
  3. structs
  4. vertex/fragment shader
1/ pragma:
      #pragma vertex vert
      #pragma fragment frag
  • Giải thích:
    • #pragma             là keyword
    • vertex vert:        hàm “vert” sẽ là hàm xử lý vertex shader
    • fragment frag:  hàm “frag” sẽ là hàm xử lý fragment shader
2/ variables:

uniform fixed4 _Color;

  • Giải thích:
    • uniform:      trong unity bạn có thể bỏ qua, không khai báo cũng được
    • fixed4:          kiểu dữ liệu dùng cho color
    • _Color:         tên biến, được khai báo giống hệt như trên Properties
3/ struct:
struct vertexInput
{
——-float4 vertex : POSITION;
};
struct vertexOutput
{
——-float4 pos : SV_POSITION;
};
  • Giải thích:
    • vertexInput, vertexOutput hoạt động ra sao tôi đã giải thích rõ ở #part2
    • POSITION, SV_POSITION được gọi là Semantics (tôi sẽ giải thích chi tiết sau)
4.1/ vertex-shader (vert function):
vertexOutput vert (vertexInput i)
{
——-vertexOutput o;
——-o.pos = mul(UNITY_MATRIX_MVP, i.vertex);
——-return o;
}
  • Giải thích:
    • ở đây mọi thứ đều k quá khó hiểu, trừ cái UNITY_MATRIX_MVP (`皿´#)
    • unity đã xử lý hết cho chúng ta phần rắc rối đó … link đọc thêm
    • hiểu một cách đơn giản đó là: vị trí của vertex được transform từ object space đến screen space ( xuất hiện trên screen tab )
    • còn hàm mul() – dùng để nhân ma trận – link đọc thêm
4.2/ fragment-shader (frag function):
fixed4 frag (vertexOutput i) : COLOR
{
——-return _Color;
}
  • Giải thích:
    • hàm frag ở đây khá là đơn giản, nó trả về biến màu _Color do ta chọn
    • điều cần chú ý ở đây đó là hàm frag trả về kiểu fixed4 cùng với semantic là COLOR
    • Mỗi mảng màu được trả về sẽ theo biến _Color

Kết quả 

Script hoàn thiện:

Shader ".UnityCattus/1b Unlit Color"
{
	Properties
	{
		_Color("My Color", Color) = (1, 1, 1, 1)
	}

	SubShader
	{
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			uniform fixed4 _Color;

			struct vertexInput
			{
				float4 vertex : POSITION;
			};

			struct vertexOutput
			{
				float4 pos : SV_POSITION;
			};

			vertexOutput vert (vertexInput i)
			{
				vertexOutput o;
				o.pos = mul(UNITY_MATRIX_MVP, i.vertex);
				return o;
			}

			fixed4 frag (vertexOutput i) : COLOR
			{
				return _Color;
			}
			ENDCG
		}
	}
}

Phew (//▽//) thử xem thành quả xem có “thỏa mãn” không ??

Chọn cái Material mà chúng ta tạo ở trên ấy, chọn shader như hình :>

chooseshader

Rùi ngay ở Material đó, ở biến My Color -> chọn màu thỏa thích và coi cái Capsule thay đổi nào :> TADAAAA …. \(≧▽≦)/

part3_3.JPG

Finally ( ̄Д ̄)

Thay vì dành tối chủ nhật cho gấu như bao người khác, tui lại ngồi ôm cái blog này :'< ai thương cho cái thân tui :'<

Nếu có vấn đề gì xin các bạn cứ pm nhiệt tình nha Facebook tui đây (つ≧▽≦)つ

References:

  • link – unitycookie fundamental flat color :>
  • link – mấy semantics hay gặp nè
  • link – github project của tui
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: