ตอนที่ 21: View Matrix: ความลับช็อกโลก! กล้องไม่มีจริง มีแต่เลื่อนโลกทั้งใบถอยหลัง
1. 🎯 ตอนที่ 21: View Matrix: สร้างกล้องจำลองด้วยเมทริกซ์
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับเข้าสู่ซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก ครับ
วันนี้พี่มีความลับระดับสุดยอดของวงการกราฟิก 3 มิติมาเปิดเผยครับ… คุณเคยเล่นเกมสวมบทบาทแล้วหมุนมุมกล้องไปรอบๆ ตัวละครไหมครับ? หรือเคยดูแอนิเมชันที่กล้องบินโฉบเฉี่ยวผ่านช่องเขาอย่างอลังการหรือเปล่า? เราทุกคนต่างถูกหลอกให้เชื่อว่า “มีตากล้องถือกล้องวิ่งไปมาอยู่ในฉาก”
แต่ความจริงที่น่าตกใจที่สุดในโลกของ Game Engine ก็คือ… ในคอมพิวเตอร์ ไม่มีกล้องอยู่จริงครับ! ฮาร์ดแวร์ไม่สามารถย้ายหน้าจอหรือสร้างดวงตาบินเข้าไปหาโมเดลในโลก 3 มิติได้ สิ่งที่โปรแกรมเมอร์อย่างพวกเราทำคือ “กระบวนการสวนทาง (Passive Transformation)” แทนที่เราจะขยับกล้องไปหาโลก เรากลับร่ายคาถา จับโลกทั้งใบ เคลื่อนที่ถอยหลังมาอยู่ตรงหน้ากล้องต่างหาก!
คาถาสุดอลังการที่ใช้เตะจักรวาลให้มาอยู่ตรงหน้าคุณนี้ มีชื่อเรียกว่า “View Matrix” (หรือบางคนเรียกว่า LookAt Matrix) ครับ วันนี้เราจะมาเจาะลึกกันว่าคณิตศาสตร์เบื้องหลังการสร้างมุมกล้องหลอกตานี้ ทำงานอย่างไร!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
การจะสร้าง “กล้องจำลอง” ขึ้นมาได้ เราต้องกำหนดพิกัดอ้างอิงให้มันก่อนครับ ในทางคณิตศาสตร์กราฟิก เราจะสร้าง Camera Frame (หรือพิกัดอ้างอิงของกล้อง) ขึ้นมาจากข้อมูลเพียง 3 อย่างเท่านั้น:
- Eye Position ($\mathbf{e}$): จุดที่ตากล้องยืนอยู่ (พิกัด $x, y, z$)
- Gaze Direction ($\mathbf{g}$): ทิศทางที่ตากล้องมองไป (เช่น มองไปที่ตัวละคร)
- View-Up Vector ($\mathbf{t}$): เวกเตอร์ที่บอกว่า “ทิศชี้ขึ้นฟ้า” คือทางไหน (เพื่อไม่ให้กล้องเอียงคอ)
จากข้อมูล 3 อย่างนี้ เราจะนำมาสร้างแกนตั้งฉาก 3 มิติแกนใหม่ (Orthonormal Basis) ให้กับกล้อง ซึ่งเรามักจะเรียกว่าแกน $\mathbf{u}, \mathbf{v}, \mathbf{w}$ (แทน $X, Y, Z$ ของกล้อง) ด้วยเทคนิค Cross Product ที่เราคุ้นเคยกันดี:
- สร้างแกน $\mathbf{w}$ (แกนลึก): ในระบบมือขวา (Right-handed) กล้องจะมองไปในทิศ $-Z$ เสมอ ดังนั้นแกน $\mathbf{w}$ ของเราจะชี้ “สวนทาง” กับการมอง: $$ \mathbf{w} = \frac{-\mathbf{g}}{|\mathbf{g}|} $$
- สร้างแกน $\mathbf{u}$ (แกนขวา): เกิดจากการเอาทิศขึ้นฟ้า ($\mathbf{t}$) มา Cross กับทิศสวนการมอง ($\mathbf{w}$): $$ \mathbf{u} = \frac{\mathbf{t} \times \mathbf{w}}{|\mathbf{t} \times \mathbf{w}|} $$
- สร้างแกน $\mathbf{v}$ (แกนบนที่แท้จริงของกล้อง): เกิดจากการเอา $\mathbf{w}$ มา Cross กับ $\mathbf{u}$ เพื่อให้ได้แกนที่ตั้งฉากสมบูรณ์แบบ: $$ \mathbf{v} = \mathbf{w} \times \mathbf{u} $$
ตู้ม! ตอนนี้เราได้จุดกำเนิด $\mathbf{e}$ และแกนชี้ทิศ $\mathbf{u}, \mathbf{v}, \mathbf{w}$ ที่ประกอบร่างกันเป็น “กล้อง” ในโลก 3 มิติแล้วครับ!
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
เมื่อกล้องมีตัวตนในโลกแล้ว (เราเรียกมันว่า Camera’s Model Matrix) คำถามคือ เราจะแปลงพิกัดของโมเดลทั้งหมดในฉาก (World Space) ให้เข้ามาอยู่ในมุมมองของกล้อง (Camera Space / View Space) ได้อย่างไร?
หลักการคือ “ย้ายกล้องไปที่จุดกำเนิด $(0,0,0)$ แล้วหมุนให้หน้ากล้องตรงกับแกนโลก… ส่วนโมเดลทั้งหมดในโลกก็ต้องโดนลากตามไปด้วย!” ซึ่งนี่ก็คือการหา Inverse Matrix ของกล้องนั่นเองครับ!
เราสามารถสร้าง View Matrix ($M_{view}$) ได้โดยการทำ 2 ขั้นตอนย้อนกลับ (Inverse Transform) ดังนี้:
- Translate Inverse ($T^{-1}$): เลื่อนโลกทั้งใบถอยหลังด้วยระยะทางเท่ากับจุดที่กล้องยืนอยู่ ($-\mathbf{e}$)
- Rotate Inverse ($R^{-1}$): หมุนโลกทั้งใบให้สอดคล้องกับแกน $\mathbf{u}, \mathbf{v}, \mathbf{w}$ ของกล้อง (จำได้ไหมครับว่า Inverse ของ Rotation Matrix คือการทำ Transpose หรือการเอาแกนมาวางเป็นแนวนอน)
เมื่อจับสองเวทมนตร์นี้มาคูณรวมร่างกัน $M_{view} = R^{-1} T^{-1}$ เราจะได้สมการหน้าตาแบบนี้ครับ: $$ M_{view} = \begin{bmatrix} u_x & u_y & u_z & 0 \ v_x & v_y & v_z & 0 \ w_x & w_y & w_z & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & -e_x \ 0 & 1 & 0 & -e_y \ 0 & 0 & 1 & -e_z \ 0 & 0 & 0 & 1 \end{bmatrix} $$
ตารางเมทริกซ์ผลลัพธ์ $4 \times 4$ ก้อนนี้แหละครับ คือกุญแจสำคัญที่ Game Engine ใช้เปลี่ยนพิกัดดวงดาวทั้งกาแล็กซี ให้ถอยร่นลงมาจัดเรียงตัวกันอยู่ตรงหน้าเลนส์กล้องของคุณเป๊ะๆ!
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
ในฝั่งของการเขียนโค้ดทำเกม คุณแทบจะไม่ต้องมานั่งคำนวณ Cross Product หรือ Inverse เองเลยครับ เพราะทุก Library มีฟังก์ชันสำเร็จรูปเตรียมไว้ให้หมดแล้ว ฟังก์ชันที่โด่งดังที่สุดในวงการมีชื่อว่า LookAt ครับ
ตัวอย่างเช่นในคลังคำสั่ง GLM (OpenGL Mathematics) หรือคณิตศาสตร์ 3D มาตรฐาน:
glm::mat4 viewMatrix = glm::lookAt(
glm::vec3(0.0f, 5.0f, -10.0f), // จุดที่กล้องอยู่ (Eye)
glm::vec3(0.0f, 0.0f, 0.0f), // จุดที่กล้องมองไป (Center/Target)
glm::vec3(0.0f, 1.0f, 0.0f) // เวกเตอร์ชี้ขึ้นฟ้า (Up)
);ในเกม Action มุมมองบุคคลที่สาม (3rd Person) ทุกๆ ครั้งที่ตัวละครวิ่งไปข้างหน้า โค้ดจะสั่งอัปเดตตำแหน่ง Eye (ตามหลังตัวละคร) และ Target (ที่ตัวละคร) ตลอดเวลา แล้วจับโยนเข้าฟังก์ชัน lookAt เพื่อคำนวณหา View Matrix ใหม่ในทุกๆ เฟรม นี่คือสาเหตุที่ฉากหลังดูเหมือนกำลังเลื่อนหนีเราไปนั่นเองครับ!
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
เมื่อ View Matrix ถูกสร้างเสร็จในฝั่ง CPU มันจะถูกแพ็กส่งขึ้นสายพานเข้าไปใน Vertex Shader ของ GPU ควบคู่ไปกับ Model Matrix ครับ
ในขั้นตอนการวาดภาพ GPU จะรับพิกัดจุด (Vertex) ของโมเดลศัตรู ต้นไม้ใบหญ้า เข้ามา แล้วจัดการฟาดด้วย Matrix อย่างเป็นลำดับ: $$ \mathbf{p}{camera} = M{view} \times M_{model} \times \mathbf{p}_{local} $$
ทันทีที่สมการนี้ทำงานเสร็จ โมเดลต้นไม้ที่เคยวางอยู่ตรงพิกัด $(100, 0, 500)$ ในแผนที่โลก จะถูกจับหักลบและหมุนจนกลายมาเป็นพิกัดติดลบ (เช่น อยู่ลึกเข้าไปในหน้าจอ 20 เมตร ทางขวา 5 เมตร) ในมิติ Camera Space ซึ่งเป็นมิติที่เตรียมพร้อมที่สุดสำหรับการคำนวณแสงเงา (Lighting) และการตรวจสอบว่าวัตถุใดถูกวัตถุอื่นบัง (Depth Testing) ครับ!
7. 🏁 บทสรุป (Level Cleared!)
เคลียร์ไปอีกหนึ่งสเตจ! ตอนนี้คุณได้รับรู้ความลับอันยิ่งใหญ่แล้วว่า “กล้องคือความว่างเปล่า” มันเป็นเพียงแนวคิดทางคณิตศาสตร์ที่ใช้ร่ายเวทมนตร์ Inverse Matrix เลื่อนฉากทั้งฉากให้มาปรากฏตรงหน้าเรา ทฤษฎีนี้เปลี่ยนมุมมองของกราฟิกโปรแกรมเมอร์จากหน้ามือเป็นหลังมือเลยล่ะครับ
แต่เดี๋ยวก่อน! ตอนนี้โลก 3 มิติทั้งใบถูกย้ายมาอยู่หน้ากล้องแล้ว แต่มันก็ยังเป็นโลก 3 มิติที่มีความกว้าง ความยาว และความลึกอยู่ดี… แล้วคอมพิวเตอร์สามารถบีบอัดความลึกเหล่านั้น ให้กลายเป็นภาพ 2 มิติแบนๆ บนหน้าจอมอนิเตอร์ พร้อมสร้างเอฟเฟกต์สุดอลังการอย่าง “ของไกลดูเล็ก ของใกล้ดูใหญ่ (Perspective)” ได้อย่างไร? นั่นคือหน้าที่ของสุดยอดคาถาบทสุดท้ายในซีรีส์ Transformation ที่มีชื่อว่า “Projection Matrix” ครับ! เตรียมตัวดำดิ่งสู่มิติลวงตาได้ในตอนหน้า Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p