[Shader] Part 2: How shaders work

 Dài dòng quá, mãi vẫn lý thuyết

U: 2 Part rồi toàn lý thuyết vậy (`皿´#)
M: Nào nào bình tĩnh (⊃。•́‿•̀。)⊃ Di chuyển chậm mà chắc !!

Điều cần thiết khi bạn bắt đầu học shader, đó chính là KIÊN NHẪN (PATIENT). Không được nóng vội mà bỏ cuộc, Dota 2 típ: “Everyone has to start somewhere” (づ ̄ ³ ̄)づ.


Cách một shader hoạt động

Trong những post tiếp theo của tôi, sẽ chỉ chủ yếu giải thích về vertex & fragment shader. Cấu trúc một file shader ra sao tôi đã nêu trong #part 1.

Đây là một shader chỉ điều khiển màu (color) của model bên trong script, không sử dụng một biến nào ở Properties:

Shader ".UnityCattus/UnlitColor"
{
	SubShader
	{
		Pass
		{
			CGPROGRAM
			// we got "vert" as function name down there
			#pragma vertex vert
			#pragma fragment frag

			// vertex inputs
			struct vertexInput
			{
				float4 vertex : POSITION;
			};

			// vertex outputs
			struct vertexOutput
			{
				float4 vertex : SV_POSITION;
			};

			// vertex shader
			vertexOutput vert (vertexInput IN)
			{
				vertexOutput OUT;
				OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
				return OUT;
			}

			// fragment shader
			fixed4 frag (vertexOutput IN) : COLOR
			{
				return fixed4(1, 0, 0, 0);
			}
			ENDCG
		}
	}
}

Có thể dễ dàng thấy bên trong snippets CGPROGRAM, ta có:

  • pragma
  • struct
  • function: ta có 2 hàm vertex shader, fragment shader (pixel shader)
  • khai báo biến cho CG language, nếu trên Properties đc khai báo

Một file shader có thể chạy mà không nhất thiết phải có tất cả các phần trên, nhưng để tạo thói quen tốt mình khuyên các bạn nên viết đẩy đủ ^^


Vậy nó hoạt động ra sao?

Các bạn có thể nhìn hình bên dưới cho dễ hình dung hơn

howitwork

  • Đầu tiên ta có các vertex-input (đã được định nghĩa bởi struct) được đưa vào vertex-shader (hàm vert đó) để xử lý.
  • Sau đó hàm vert trả về các vertex-output, các vertex-output đó được chuyển tới Rasterizer. Tui sẽ rành riêng một bài để nói về bước xử lý của Rasterizer nha !

AAEAAQAAAAAAAAhbAAAAJDYzNjk1NTUxLTNmMWUtNGZlOS1iZDc5LTg1YWFhMWE1ZDE1Mw

  • Qua khâu xử lý ở Rasterizer, các vertex sẽ được đưa tới cho fragment-shader (hàm frag) xử lý.
  • Tương ứng với những vertex-output được xử lý, hàm frag sẽ trả về những mảnh (fragment) màu fixed4(1, 0, 0, 0).
  • tương ứng Color(r, g, b, a) = (1, 0, 0, 0) -> mảnh sẽ có màu đỏ
  • Các bạn có thể tùy ý chỉnh 4 kênh màu để coi kết quả thay đổi ra sao :3

Chưa hiểu vertex, fragment, pixel là gì?

AAEAAQAAAAAAAAf5AAAAJGU1YTk2YjYyLWJhZTMtNDE4NC04MTM2LWRhOWRjYWYwODE0NA
Nếu bạn chưa hiểu vertex (đỉnh), fragment (mảnh), pixel (điểm ảnh) là gì. Hãy nhìn hình bên trên:

  • vertex: tương ứng với mỗi đỉnh của hình tam giác, 1 đỉnh là 1 vertex
  • pixel: là 1 điểm ảnh, tương ứng với ô vuông màu đỏ
  • fragment: là 1 mảnh màu của tam giác, tương ứng phần tứ giác màu tím

Bài viết dựa trên những kiến thức đọc hiểu của một người mới làm quen shader, nếu có gì sai sót hay cần chỉnh sửa, mong rằng được các cao nhân góp ý ^^

References:

  • link – project có file shader trên
  • link – đọc thêm về “data flow in and out of vertex and fragment shaders”
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: