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

1. 🎯 ตอนที่ 16: Rotation Matrix (2D): หมุนโลกบนระนาบแบน

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

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

เรามีเวทมนตร์ย้ายตำแหน่ง (Translation) และเวทมนตร์ย่อขยาย (Scale) อยู่ในมือแล้ว แต่ถ้าโลกของเกมมีแค่นั้น ตัวละครของเราคงทำได้แค่วิ่งไถลไปมาแบบแข็งทื่อราวกับหุ่นยนต์! ลองนึกภาพเกมยานอวกาศ (Asteroids) ที่เราต้องหมุนยานเพื่อเล็งยิงอุกกาบาต หรือเกม Top-down Shooter ที่ตัวละครต้องหันปืนตามเคอร์เซอร์เมาส์ดูสิครับ การ “หมุน (Rotation)” คือสิ่งที่ทำให้โลกดิจิทัลมีชีวิตชีวาและเป็นธรรมชาติ

แต่พี่ต้องขอเตือนไว้ก่อนว่า คาถาหมุนโลกนี้ถือเป็น “เวทมนตร์ปราบเซียน” ที่สุดในบรรดา Transformation ทั้งหมด! เพราะมันต้องพึ่งพาฝันร้ายวัยเด็กของใครหลายคนอย่าง “ตรีโกณมิติ (Trigonometry)” เข้ามาช่วย แต่ไม่ต้องกลัวครับ วันนี้พี่จะพาไปดูว่าฟังก์ชันง่ายๆ อย่าง Sine และ Cosine จะถูกจับมาเรียงร้อยเป็นตาราง Matrix เพื่อหมุนโลกทั้งใบได้อย่างไร รับรองว่าเห็นภาพชัดเจนแน่นอน!

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

ก่อนที่เราจะไปสร้าง Matrix เราต้องไปทบทวนเพื่อนเก่าอย่าง ไซน์ (Sine) และ โคไซน์ (Cosine) กันก่อนครับ

ในวิชาคณิตศาสตร์ เรานิยามฟังก์ชันเหล่านี้ผ่าน “วงกลมหนึ่งหน่วย (Unit Circle)” สมมติว่าเรามีลูกศร (Vector) ความยาว 1 หน่วย เริ่มต้นชี้ไปทางขวาตามแกน X ทับกับพิกัด $(1, 0)$ หากเราหมุนลูกศรนี้ทวนเข็มนาฬิกาไปเป็นมุม $\theta$ (ทีต้า) ปลายลูกศรจะไปตกอยู่ที่พิกัดใหม่บนเส้นรอบวงกลม ซึ่งนักคณิตศาสตร์นิยามพิกัดใหม่นี้ไว้แบบตรงไปตรงมาเลยว่า:

  • พิกัดแกน X ใหม่คือ $\cos \theta$
  • พิกัดแกน Y ใหม่คือ $\sin \theta$

แปลว่าจุดใหม่บนวงกลมจะมีพิกัดเป็น $(\cos \theta, \sin \theta)$ เสมอ! นึกภาพง่ายๆ ว่า Cosine คือเงาของลูกศรที่ตกกระทบบนพื้น (แกน X) ส่วน Sine คือเงาของลูกศรที่ตกกระทบบนกำแพง (แกน Y) แค่นี้เองครับ แก่นแท้ของตรีโกณมิติ!

รูปประกอบการหมุน Basis Vectors บนวงกลมหนึ่งหน่วย

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

ทีนี้ เราจะเอา Sine กับ Cosine มาสร้างเป็นตาราง Rotation Matrix สำหรับโลก 2 มิติได้อย่างไร?

ย้อนกลับไปตอนที่ 11 พี่เคยบอกความลับของ Matrix ไว้ว่า “ตัวเลขในคอลัมน์ของ Matrix ก็คือทิศทางใหม่ของแกน X และ Y” (Basis Vectors) ดังนั้น เรามาลองจับแกนทั้งสองหมุนทวนเข็มนาฬิกาเป็นมุม $\theta$ ดูกันครับ:

  1. หมุนแกน X: แกน X เดิมคือเวกเตอร์ $$ เมื่อหมุนไป $\theta$ องศา ปลายลูกศรจะไปชี้ที่พิกัด $[\cos \theta, \sin \theta]$ เราจะเอาเลขชุดนี้ไปใส่เป็น “คอลัมน์แรก” ของ Matrix
  2. หมุนแกน Y: แกน Y เดิมคือเวกเตอร์ $$ (ชี้ขึ้นฟ้า) เมื่อหมุนไป $\theta$ องศา มันจะเอนไปทางซ้าย (ติดลบในแกน X) พิกัดใหม่ของมันคือ $[-\sin \theta, \cos \theta]$ เราจะเอาเลขชุดนี้ไปใส่เป็น “คอลัมน์ที่สอง”

บูม! เกิดเป็นโกโก้ครั้นช์! เราได้ตารางคาถาหมุนร่างในโลก 2 มิติ (2D Rotation Matrix) หน้าตาแบบนี้ครับ: $$ R(\theta) = \begin{bmatrix} \cos \theta & -\sin \theta \ \sin \theta & \cos \theta \end{bmatrix} $$

เมื่อเราเอาตารางนี้ไปคูณกับพิกัดจุด Vertex เก่า $\mathbf{v} = [x, y]$ เราจะได้พิกัดใหม่ $\mathbf{v}’ = [x’, y’]$ ตามสมการนี้: $$ \begin{bmatrix} x’ \ y’ \end{bmatrix} = \begin{bmatrix} \cos \theta & -\sin \theta \ \sin \theta & \cos \theta \end{bmatrix} \begin{bmatrix} x \ y \end{bmatrix} $$ ซึ่งถ้าคูณแถวคูณหลักกระจายออกมา จะได้สมการสุดคลาสสิกที่โปรแกรมเมอร์กราฟิกยุคแรกๆ ต้องนั่งพิมพ์กันมือหงิก: $$ x’ = x\cos\theta - y\sin\theta $$ $$ y’ = x\sin\theta + y\cos\theta $$ เพียงแค่ใส่ค่ามุม $\theta$ เข้าไป โมเดลของคุณก็จะถูกจับหมุนวนรอบจุดกำเนิด (Origin) ทันที!

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

แล้วเวทมนตร์ 2D Rotation นี้ถูกใช้ทำอะไรบ้างใน Game Engine?

  • Sprite Rotation: ในเกม 2D ภาพตัวละคร (Sprite) มักจะเป็นรูปสี่เหลี่ยม การที่ยานอวกาศหันหัวตามการบังคับ ก็คือการเอาพิกัดมุมทั้ง 4 ของภาพสี่เหลี่ยมไปคูณกับ Rotation Matrix นี้นี่แหละครับ
  • ระบบเรดาร์ (Minimap): เวลาตัวละครของคุณเดินในฉากแล้วหันหน้าไปทางอื่น แผนที่มุมจอ (Minimap) มักจะหมุนตามเพื่อให้ทิศที่หันไปอยู่ด้านบนเสมอ เบื้องหลังคือการจับพิกัดของไอคอนศัตรูทั้งหมดมาคูณ Rotation Matrix (โดยใช้มุมติดลบ เพื่อหมุนสวนทาง) ให้มาอยู่ตรงหน้าผู้เล่นครับ!
  • ระบบ Inverse Kinematics (IK) เบื้องต้น: แขนกลหรือขาของตัวละคร 2D จะถูกสร้างจากท่อนกระดูกต่อกัน การคำนวณว่าปลายมือจะไปอยู่ที่ไหน ต้องใช้ Rotation Matrix คูณต่อเนื่องกันตามข้อต่อแต่ละชิ้นครับ

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

เมื่อนำทฤษฎีนี้ไปเขียนโปรแกรมจริง (เช่น ใน Vertex Shader ของ GPU) มีข้อควรระวังระดับปราบเซียนอยู่ 2 ข้อครับ:

  1. จงใช้เรเดียน (Radians) เสมอ! ฟังก์ชัน sin() และ cos() ในภาษาโปรแกรมเกือบ 100% (รวมถึง HLSL/GLSL บนการ์ดจอ) ไม่รู้จักมุม 0-360 องศานะครับ! มันรับค่าเป็นเรเดียน ($0$ ถึง $2\pi$) ดังนั้นก่อนจะร่ายมนตร์ คุณต้องคูณมุมองศาด้วย $\frac{\pi}{180}$ ก่อนเสมอ!
  2. GPU รัก Matrix สำเร็จรูป: การคำนวณ Sine และ Cosine เป็นงานที่หนักสำหรับคอมพิวเตอร์ (Expensive Operation) ดังนั้น Game Engine จะคำนวณ $\cos\theta$ และ $\sin\theta$ ให้เสร็จตั้งแต่ใน CPU สร้างเป็นตาราง Matrix ให้เรียบร้อย แล้วค่อยส่งทั้ง Matrix นั้นไปให้ GPU ทำหน้าที่แค่ “คูณบวกเลข” ธรรมดากับจุด Vertex นับล้านจุด ซึ่งจะทำให้เฟรมเรตพุ่งกระฉูดครับ!

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

เคลียร์ไปอีกด่านครับ! ตรีโกณมิติที่เคยเรียนมาในที่สุดก็ได้ออกโรงจริงๆ เสียที การนำความยาวเงาอย่าง Sine และ Cosine มาเรียงในตาราง Matrix คือศิลปะของการแปลงคณิตศาสตร์บริสุทธิ์ให้กลายเป็นเครื่องมือควบคุมการมองเห็น ทำให้โมเดลแบนๆ ในคอมพิวเตอร์สามารถหมุนตีลังกาได้อย่างอิสระ

แต่เดี๋ยวก่อน! โลกของเรามันมี 3 มิตินี่นา! ถ้าแค่โลก 2D ยังต้องใช้ Sine/Cosine มาพันกันขนาดนี้ แล้วการหมุนวัตถุในโลก 3D ที่ตีลังกาได้ทุกทิศทุกทางล่ะ มันจะซับซ้อนขนาดไหน? เตรียมพบกับฝันร้ายที่แท้จริง (แต่พี่จะทำให้มันง่ายที่สุด!) ในตอนถัดไปกับ “3D Rotation Matrix” ครับ ลับไม้กายสิทธิ์ของคุณไว้ให้คม แล้วเจอกัน Level Cleared!

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