[Shader] Part 4: Rasterization Stage

Bối rối…

Như đã hứa với các bạn ở #part 2, tui làm hẳn 1 post nói về Rasterization

Daijoubu, Daijoubu ( ̄ω ̄) lúc đầu tôi cũng thấy khó hiểu như các bạn thôi … Nhưng không có gì phải lo cả tôi sẽ cố gắng giải thích đơn giản hết mức có thể.

Đây không phải là lúc dừng lại, chán nản vì khó khăn !! it’s now or never !!

Tôi cũng là newbie giống mọi người thôi, nên lời giải thích của tôi chắc chắn sẽ cực kỳ dễ hiểu !! Let’s go !!

Vitboiroi26_pp_263


Rasterization

Như đã hứa với các bạn ở #part 2, tôi sẽ dành riêng một post này để nói về quá trình rasterization.

Quá trình xảy ra vào bước “trung gian” giữa bước (3) và (4), sau khi vertex shader trả về những vertex-output. Nó sẽ được đưa tới Rasterizer để xử lý:

howitwork


Quá trình Rasterization

Rasterization được chia làm 2 bước, ta sẽ lấy (geometric primitive – triangle) tam giác để dễ hình dung:

  • B1: Determine Pixels
    • là quá trình xác định những pixel được bao phủ bởi tam giác.
    • ở bản gốc dịch là “covered by primitive” (primitive – nguyên thủy, sơ khai).
    • primitive ở đây là những đỉnh (vertex), đường thẳng (line), tam giác (triangle).
  • B2: Interpolation
    • quá trình nội suy (interpolation).
    • đây là bước xử lý những pixel thu được ở bước 1, giúp xác định những thông tin về pixel đó, dựa trên 3 đỉnh tam giác (triangle vertices)
    • thông tin về thuộc tính (attibutes) của pixel đó, gồm: positioncolor

Reference article: link


Quá trình Interpolation

Chắc sẽ có nhiều người thắc mắc:

Tam giác có 3 đỉnh, tương ứng sẽ có 3 "vertex", mỗi vertex mang trong mình một giá trị "color"...
Vậy tại sao một tam giác lại có nhiều màu đến vậy ???

RTC11-TDTW-KDAB-Part1-Fig2_large-01

Đó chính là do quá trình nội suy (interpolation). 3 vertex mang trong mình 3 màu (color value) khác nhau red, green, blue sẽ tạo nên một tam giác như trên.

Phần việc của interpolation chính là tính toán position, color cho từng pixel ở trên.

Ta muốn tính giá trị {\displaystyle f_{P}} tại pixel P qua những 3 giá trị cho trước f_{1}, f_{2}, {\displaystyle f_{3}} tương ứng là thông tin của 3 vertex {\displaystyle V_{1}}, {\displaystyle V_{2}}, {\displaystyle V_{3}}. Có một số cách để tính toán, một trong số đó là sử dụng tọa độ trọng tâm (barycentric coordinates) là {\displaystyle \alpha _{1}}, {\displaystyle \alpha _{2}}, {\displaystyle \alpha _{3}}

{\displaystyle {\begin{array}{lcl}\alpha _{1}&=&{\frac {A_{1}}{A_{\text{total}}}}={\frac {{\text{area of triangle }}PV_{2}V_{3}}{{\text{area of triangle }}V_{1}V_{2}V_{3}}}\\\alpha _{2}&=&{\frac {A_{2}}{A_{\text{total}}}}={\frac {{\text{area of triangle }}V_{1}PV_{3}}{{\text{area of triangle }}V_{1}V_{2}V_{3}}}\\\alpha _{3}&=&{\frac {A_{3}}{A_{\text{total}}}}={\frac {{\text{area of triangle }}V_{1}V_{2}P}{{\text{area of triangle }}V_{1}V_{2}V_{3}}}\\\end{array}}}

{\displaystyle A_{1}}, {\displaystyle A_{2}}, {\displaystyle A_{3}}, và{\displaystyle A_{\text{total}}} là những diện tích tam giác (area of triangle).

Giả sử để tính đc diện tích tam giác QRS, ta sử dụng tích vô hướng:{\displaystyle {\begin{array}{lcl}{\text{area of triangle }}QRS&=&{\frac {1}{2}}|{\overrightarrow {QR}}\times {\overrightarrow {QS}}|\end{array}}}

Sau khi tính được {\displaystyle \alpha _{1}}{\displaystyle \alpha _{2}}, {\displaystyle \alpha _{3}}, interpolated value (gồm cả position, color) {\displaystyle f_{P}} sẽ được tính theo f_{1}, f_{2}, {\displaystyle f_{3}}:{\displaystyle {\begin{array}{lcl}f_{P}&=&\alpha _{1}f_{1}+\alpha _{2}f_{2}+\alpha _{3}f_{3}\end{array}}}

Reference Article:

  • barycentric coordinates – link
  • linear interpolation – link
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: