รูปปกกระดานดำชอล์กสีเรื่อง 3D Rotation Matrix

1. 🎯 ตอนที่ 17: Rotation Matrix (3D): หมุนรอบแกน X, Y, Z

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

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

ในตอนที่แล้ว เราได้เอาชีวิตรอดจากฝันร้ายของตรีโกณมิติ และสามารถสร้าง “คาถาหมุนโลก 2 มิติ” บนกระดาษแบนๆ ได้สำเร็จ แต่ในความจริง โลกของเกมที่เราสร้างนั้นมีมิติความลึก (Depth) เพิ่มเข้ามา ลองจินตนาการถึงเกมจำลองการบิน (Flight Simulator) ที่คุณต้องบังคับเครื่องบินรบให้เชิดหัวขึ้น เลี้ยวซ้ายขวา หรือหมุนควงสว่าน (Barrel Roll) หลบจรวดดูสิครับ การหมุนในโลก 3 มิติ (3D Rotation) นั้นซับซ้อนและมีอิสระมากกว่า 2 มิติอย่างเทียบไม่ติด!

วันนี้พี่จะพาพวกเราอัปเกรดคาถาจากตอนที่แล้ว ให้กลายเป็นสุดยอดเวทมนตร์แห่งการควบคุมทิศทาง เราจะมาดูกันว่านักคณิตศาสตร์จับโมเดล 3 มิติมาเสียบไม้หมุนรอบแกน X, Y, Z ได้อย่างไร และเราจะรวมคาถาทั้งสามเส้นนี้เข้าด้วยกันจนเกิดเป็นแนวคิดที่เรียกว่า Euler Angles ได้อย่างไร เตรียมไม้กายสิทธิ์ให้พร้อม แล้วไปหมุนโลกกันเลยครับ!

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

การหมุนในโลก 3 มิตินั้น อาศัยหลักการที่เรียกว่า “การหมุนรอบแกน (Rotation about an axis)” ครับ นึกภาพง่ายๆ ว่าเราเอาไม้ลูกชิ้นไปเสียบทะลุจุดศูนย์กลางของโมเดลตามแนวแกนใดแกนหนึ่ง แกนที่ถูกเสียบนั้นจะ “อยู่นิ่งกับที่” ในขณะที่ระนาบของอีกสองแกนที่เหลือจะหมุนวนไปรอบๆ เหมือนกงล้อ

ด้วยแนวคิดนี้ เราจึงสามารถแยก Rotation Matrix ขนาด $3 \times 3$ ออกเป็น 3 ท่ามาตรฐาน (Cardinal Axes) ได้ดังนี้ครับ:

1. หมุนรอบแกน Z (Roll): แกน Z หันหน้าเข้าหาเรา ทะลุหน้าจอออกไป การหมุนรอบแกน Z จะทำให้แกน X และ Y หมุนเหมือนเข็มนาฬิกา (ตรงกับตอนที่ 16 เป๊ะ!) สังเกตว่าแถวและคอลัมน์ของ Z จะเป็น $0, 0, 1$ เสมอ เพราะแกน Z ไม่ขยับ $$ R_z(\theta) = \begin{bmatrix} \cos\theta & -\sin\theta & 0 \ \sin\theta & \cos\theta & 0 \ 0 & 0 & 1 \end{bmatrix} $$

2. หมุนรอบแกน X (Pitch): แกน X ถูกเสียบให้อยู่นิ่ง การหมุนจะเกิดขึ้นบนระนาบ Y-Z ทำให้โมเดลเชิดหัวขึ้นหรือกดหน้าลง $$ R_x(\theta) = \begin{bmatrix} 1 & 0 & 0 \ 0 & \cos\theta & -\sin\theta \ 0 & \sin\theta & \cos\theta \end{bmatrix} $$

3. หมุนรอบแกน Y (Yaw / Heading): แกน Y หรือแนวตั้งถูกเสียบไว้ การหมุนจะเกิดขึ้นบนระนาบ X-Z เหมือนตัวละครหันหน้าซ้ายขวา $$ R_y(\theta) = \begin{bmatrix} \cos\theta & 0 & \sin\theta \ 0 & 1 & 0 \ -\sin\theta & 0 & \cos\theta \end{bmatrix} $$

รูปประกอบการหมุนรอบแกน X, Y, Z และการคูณเมทริกซ์

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

แล้วถ้าเราอยากให้เครื่องบินทั้งเชิดหัว (Pitch) เลี้ยวซ้าย (Yaw) และเอียงปีก (Roll) ไปพร้อมๆ กันล่ะ จะทำอย่างไร? คำตอบคือการ “รวมเวทมนตร์ (Matrix Concatenation)” ครับ! เราสามารถนำเมทริกซ์การหมุนทั้งสามตัวมาคูณกันเพื่อให้ได้ “เมทริกซ์หมุนรวม (Composite Rotation Matrix)” เพียงก้อนเดียว

ระบบที่ใช้มุม 3 มุมนี้มากำหนดทิศทางใน 3 มิติ เรียกว่า Euler Angles (อ่านว่า ออยเลอร์-แองเกิลส์) แต่กฎเหล็กของ Matrix ที่พี่เคยย้ำไว้ในตอนที่ 12 คือ “การคูณเมทริกซ์สลับที่ไม่ได้ (Not Commutative)” ดังนั้น การที่คุณหมุนแกน X ก่อน Y จะให้ผลลัพธ์ไม่เหมือนกับหมุน Y ก่อน X!

เพื่อให้ Game Engine ทั่วโลกทำงานตรงกัน นักพัฒนาจึงต้องตกลง “ลำดับการคูณ (Rotation Order)” กันไว้ก่อน ลำดับที่นิยมที่สุดในวงการเกมและ Aerospace คือการสร้างเมทริกซ์ตามลำดับ Roll -> Pitch -> Yaw ($R_z, R_x, R_y$) ซึ่งถ้าเขียนในรูปสมการคูณเมทริกซ์ (แบบ Column Vector) จะได้เป็น: $$ M_{rotation} = R_y(\text{yaw}) \times R_x(\text{pitch}) \times R_z(\text{roll}) $$ เมื่อนำไปคูณกับจุด Vertex พิกัดของจุดนั้นจะถูกส่งผ่านระนาบ Z, X, และ Y ตามลำดับ ออกมาเป็นท่าทางที่สมบูรณ์แบบครับ!

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

Euler Angles ถือเป็น “ภาษาพื้นฐาน” ที่มนุษย์และ Game Programmer ใช้สื่อสารกับคอมพิวเตอร์ครับ เพราะมันจินตนาการตามได้ง่ายมาก:

  • การควบคุมเครื่องบินหรือมุมกล้อง (Camera Controller): ในเกมแนว FPS หรือ Flight Sim เราจะเก็บค่าการขยับเมาส์เป็นมุม Pitch (เงยหน้า/ก้มหน้า) และ Yaw (หันซ้าย/ขวา) จากนั้นนำมุมเหล่านี้ไปสร้าง $R_x$ และ $R_y$ มาคูณกันเพื่ออัปเดตทิศทางการมองของกล้อง
  • Skeletal Animation (ระบบกระดูก): ข้อต่อแต่ละจุดของตัวละครในเกม (เช่น หัวไหล่, ข้อศอก) จะเก็บค่าการหมุนเป็น Euler Angles (X, Y, Z) ไว้ในทุกๆ คีย์เฟรม เพื่อบอกว่าแขนกำลังบิดไปในองศาไหน
  • ระบบ Hierarchy: ถ้าตัวละครถือก้อนหินอยู่ในมือ การหมุนของก้อนหินจะเกิดจากการนำ Rotation Matrix ของมือ มาคูณกับของแขน และคูณกับของลำตัว ต่อกันไปเรื่อยๆ จนถึงจุดศูนย์กลางของโลกครับ

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

เมื่อข้อมูลจาก Game Engine ถูกส่งเข้าสู่การ์ดจอ (GPU) ในขั้นตอน Vertex Shader มันจะไม่ได้ส่งมุม $\theta$ หรือฟังก์ชัน $\sin, \cos$ ไปให้การ์ดจอคำนวณทีละจุดนะครับ เพราะมันช้าเกินไป! (Expensive operation)

สิ่งที่จะเกิดขึ้นคือ CPU จะคำนวณค่า $\sin$ และ $\cos$ ของมุมทั้งสาม จับมาคูณกันตามลำดับ $R_y \times R_x \times R_z$ ให้เสร็จสรรพ กลายเป็นตาราง Matrix ขนาด $3 \times 3$ ก้อนเดียว จากนั้นมันจะถูกนำไปฝังไว้ใน “มุมซ้ายบน” ของตารางคาถาแปลงร่างขนาด $4 \times 4$ (Homogeneous Matrix) ร่วมกับเวทมนตร์ย้ายตำแหน่ง (Translation) และย่อขยาย (Scale) ที่เราเรียนไปในตอนก่อนๆ

ผลลัพธ์คือ Model Matrix ($M = T \times R \times S$) โครงสร้างข้อมูลเพียงก้อนเดียว ที่มีพลังมากพอจะเตะโมเดล 3D ทั้งตัวให้พุ่งทะยาน หมุนควง และขยายร่างได้ ภายในสมการคูณรวดเดียวบน GPU!

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

ยินดีด้วยครับ! ตอนนี้เรารวบรวมชิ้นส่วนของคาถา Transformation (Translation, Scale, Rotation) เข้าด้วยกันได้ครบสมบูรณ์แล้ว Euler Angles ช่วยให้เราควบคุมวัตถุ 3 มิติได้อย่างเป็นธรรมชาติผ่านมุม X, Y, Z และรวมกันเป็น Matrix $4 \times 4$ อันทรงพลัง

แต่ทุกเวทมนตร์ย่อมมีช่องโหว่… แม้ Euler Angles จะใช้งานง่าย แต่มันก็ซ่อน “คำสาป” ร้ายแรงที่ชื่อว่า “Gimbal Lock” เอาไว้ ซึ่งเป็นภาวะที่แกนหมุนสองแกนเกิดซ้อนทับกันจนโมเดลของเราสูญเสียมิติการเคลื่อนที่ไปหนึ่งมิติ! (เช่น หันซ้ายขวาไม่ได้) ในตอนหน้า เราจะมาไขความลับของคำสาปนี้ และเปิดตัวสุดยอดอาวุธคณิตศาสตร์ที่ Game Engine ยุคใหม่ขาดไม่ได้… เตรียมพบกับเวทมนตร์ระดับพระกาฬ “Quaternion” ได้เลยครับ Level Cleared!

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