รูปปกกระดานดำชอล์กสีเรื่อง Orthographic Projection

1. 🎯 ตอนที่ 22: Orthographic Projection: มุมมองแบบเกม 8-bit

2. 📖 เปิดฉาก (The Hook)

สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับสู่โรงงานผลิตภาพในซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก ครับ

ในตอนที่แล้ว เราได้ใช้ View Matrix ดึงโลกทั้งใบมาวางไว้ตรงหน้ากล้องจำลองของเราเรียบร้อยแล้ว แต่มันก็ยังเป็นโลก 3 มิติอยู่ดี คำถามคือ เราจะ “บีบอัด” โลก 3 มิติให้แบนราบลงไปอยู่บนหน้าจอมอนิเตอร์ 2 มิติของเราได้อย่างไร?

ลองนึกถึงเกมปลูกผัก เกมสร้างเมือง (RTS) หรือเกม RPG ยุค 8-bit/16-bit ดูสิครับ คุณจะสังเกตเห็นเอกลักษณ์อย่างหนึ่งคือ “ไม่ว่าต้นไม้จะอยู่ใกล้หรือไกลหน้าจอ ขนาดของมันก็จะเท่ากันเสมอ” ไม่มีกฎที่ว่าของไกลต้องดูเล็ก ของใกล้ต้องดูใหญ่

เวทมนตร์ที่สร้างมุมมองคลาสสิกแบบนี้เรียกว่า “การฉายภาพแบบออร์โทกราฟิก (Orthographic Projection)” หรือการฉายภาพแบบขนานครับ มันคือคาถาแปลงร่างบทแรกในหมวด Projection Matrix ที่เรียบง่ายแต่ทรงพลังมาก โดยเฉพาะอย่างยิ่งเวลาที่เราต้องการวาด UI (User Interface) หรือ Minimap ทับลงไปบนหน้าจอ วันนี้พี่จะพาไปเจาะลึกสมการหลังบ้านของคาถาบทนี้กันครับ!

3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)

ในทางเรขาคณิต การฉายภาพ (Projection) คือการลดทอนมิติ (Dimension-reducing operation) โดยการลากเส้นตรงจากจุดบนโมเดล 3 มิติ วิ่งไปตกกระทบลงบน “ระนาบรับภาพ (Projection Plane)”

สำหรับ Orthographic Projection (หรือ Parallel Projection) เส้นสมมติที่ลากจากโมเดลมายังหน้าจอจะ “ขนานกันทั้งหมด (Parallel Projectors)” และพุ่งตั้งฉากเข้าหาหน้าจอครับ

ผลลัพธ์ที่ได้คือ มันจะไม่มีการหดตัวตามระยะทาง (No Perspective Foreshortening) วัตถุจะคงขนาดเดิมเป๊ะๆ ไม่ว่าจะอยู่ลึกเข้าไปในแกน Z แค่ไหนก็ตาม ด้วยเหตุนี้ ขอบเขตการมองเห็นของกล้อง (View Frustum) จึงไม่ได้มีรูปร่างเป็นปิรามิดเหมือนตาคนทั่วไป แต่มันจะเป็น “กล่องทรงสี่เหลี่ยมมุมฉาก (Axis-aligned Box)” ครับ

เราสามารถกำหนดขนาดของกล่องขอบเขตการมองเห็นนี้ได้ด้วยค่า 6 ค่า:

  • $l$ (left) และ $r$ (right) คือขอบซ้าย-ขวา
  • $b$ (bottom) และ $t$ (top) คือขอบล่าง-บน
  • $n$ (near) และ $f$ (far) คือระยะของระนาบตัดหน้า-หลัง
    รูปประกอบเปรียบเทียบกล่อง Orthographic Frustum และการฉายภาพแบบขนาน

4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)

เป้าหมายของ Matrix การฉายภาพ คือการบีบอัดไอ้เจ้ากล่องขอบเขต $[l, r] \times [b, t] \times [f, n]$ ตัวนี้ ให้กลายเป็น Canonical View Volume (กล่องลูกบาศก์มาตรฐานที่มีขนาดพิกัดตั้งแต่ $-1$ ถึง $1$ ในทุกๆ แกน X, Y, Z) เพื่อส่งต่อให้ฮาร์ดแวร์การ์ดจอทำงานต่อได้ง่ายที่สุด

การแปลงจากกล่องทรงผืนผ้าไปเป็นกล่องลูกบาศก์มาตรฐาน $(-1$ ถึง $1)$ แท้จริงแล้วมันก็คือการใช้เวทมนตร์ย้ายตำแหน่ง (Translate) เพื่อเลื่อนจุดกึ่งกลางกล่องไปไว้ที่ Origin $(0,0,0)$ แล้วใช้เวทมนตร์ย่อขยาย (Scale) เพื่อบีบให้ความกว้าง ความสูง และความลึกมีขนาดเท่ากับ 2 หน่วยพอดีครับ

เมื่อเราประกอบสมการเหล่านั้นออกมาเป็น Matrix ขนาด $4 \times 4$ เราจะได้สุดยอดคาถา Orthographic Matrix ($M_{orth}$) ดังนี้ครับ: $$ M_{orth} = \begin{bmatrix} \frac{2}{r-l} & 0 & 0 & -\frac{r+l}{r-l} \ 0 & \frac{2}{t-b} & 0 & -\frac{t+b}{t-b} \ 0 & 0 & \frac{2}{n-f} & -\frac{n+f}{n-f} \ 0 & 0 & 0 & 1 \end{bmatrix} $$

สังเกตความลับในบรรทัดสุดท้ายให้ดีครับ: แถวล่างสุดคือ $$ หมายความว่าเมื่อนำไปคูณกับพิกัด $(x, y, z, 1)$ ค่ามิติที่ 4 ($w$) ของเราจะยังมีค่าเป็น $1$ เสมอ! ($w = 1$) ซึ่งจุดนี้แหละคือคีย์สำคัญที่ทำให้มันไม่มีความลึกครับ

5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)

ทำไมเรายังต้องใช้ Orthographic Projection อยู่ ในยุคที่เกม 3D ครองเมือง? คำตอบคือมันมีประโยชน์เฉพาะทางที่แสนวิเศษครับ:

  1. ส่วนต่อประสานผู้ใช้ (HUD & UI): หลอดเลือด, เป้าเล็งปืน, หรือตัวหนังสือบนหน้าจอ สิ่งเหล่านี้คือโมเดลสี่เหลี่ยม (Quad) ที่ถูกวาดโดยใช้ Orthographic Projection ครับ เพราะเราต้องการให้มันแปะติดอยู่บนจอโดยมีขนาดพิกเซลที่แน่นอน ไม่เล็กลงเมื่อเราเดินขยับกล้องในเกม 3D
  2. เกม 2.5D / Isometric: เกมแนว Simulation สร้างเมือง หรือ Action-RPG มุมมองพระเจ้าหลายเกม ใช้มุมกล้องแบบขนานเพื่อให้ผู้เล่นกะระยะทางและคำนวณพื้นที่สร้างตึกได้อย่างแม่นยำ (เพราะสี่เหลี่ยมจัตุรัสทุกช่องในกริด จะมีขนาดบนหน้าจอเท่ากันเป๊ะ 100%)
  3. การวาดเงา (Shadow Mapping): เมื่อเราคำนวณแสงเงาจากดวงอาทิตย์ (Directional Light) ซึ่งแสงเดินทางมาเป็นเส้นขนาน Game Engine จะสร้างกล้อง Orthographic จำลองขึ้นมาที่ดวงอาทิตย์ เพื่อเรนเดอร์ความลึกของวัตถุเก็บไว้เป็นแผนที่เงา (Shadow Map) ครับ

6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)

เมื่อขุดเข้าไปดูในสถาปัตยกรรม Graphics Pipeline ของ GPU ในขั้นตอน Vertex Shader เมื่อจุดพิกัดถูกคูณด้วย $M_{orth}$ ตัวพิกัดจะถูกปรับให้มาอยู่ในช่วง $-1$ ถึง $1$ (Clip Space)

หลังจากนั้น Hardware จะทำการหารทุกแกนด้วยค่า $w$ (เรียกว่าขั้นตอน Perspective Divide / Homogeneous Division) แต่ทว่า… สำหรับ Orthographic นั้น ค่า $w$ จะเป็น $1$ เสมอ! นั่นแปลว่า $x/1 = x$, $y/1 = y$ การหารด้วยหนึ่งจึงไม่มีผลอะไรเลย แกน $X$ และ $Y$ (ที่กำหนดความกว้าง-สูงบนหน้าจอ) จะรอดพ้นจากการถูกความลึก (แกน $Z$) เข้ามาแทรกแซงอย่างสมบูรณ์แบบ! วัตถุที่อยู่ไกลจึงไม่มีวันถูกบีบให้เล็กลง นี่คือความชาญฉลาดของการออกแบบคณิตศาสตร์ระบบมิติที่ 4 ($w$) ของวงการกราฟิกครับ

7. 🏁 บทสรุป (Level Cleared!)

เคลียร์ไปอีกหนึ่งด่าน! เราได้เรียนรู้วิธีแบนโลก 3 มิติลงบนกระดาษแบบขนานด้วยคาถา Orthographic Projection สิ่งนี้คือพระเอกตัวจริงสำหรับสายทำเกม 2 มิติ สายทำ UI และสายงานเขียนแบบสถาปัตยกรรมที่ต้องการความเป๊ะของขนาดเรขาคณิต

แต่แน่นอนครับ โลกความเป็นจริงของเรามีระยะตื้นลึกหนาบาง ของที่อยู่ไกลต้องดูเล็กลงเพื่อสร้างมิติภาพที่สมจริง! ในตอนหน้า พี่จะพาคุณเข้าสู่คาถาที่ซับซ้อนและงดงามที่สุดใน Graphics Pipeline นั่นคือ “Perspective Projection Matrix” ที่จะทำให้โมเดล 3D ของคุณมีชีวิตและมิติความลึกที่สมบูรณ์แบบ! เตรียมไม้กายสิทธิ์ของคุณให้พร้อม แล้วเจอกันครับ Level Cleared!

สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p