รูปปกกระดานดำชอล์กสีเรื่องกฎแห่งลำดับ T-R-S

1. 🎯 ตอนที่ 18: กฎแห่งลำดับ T-R-S: หมุนก่อนเลื่อน หรือ เลื่อนก่อนหมุน?

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

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

หลังจากที่เราได้สะสม “คัมภีร์เวทมนตร์” มาจนครบทั้ง 3 บท ได้แก่ เวทมนตร์ย้ายตำแหน่ง (Translation), เวทมนตร์ย่อขยาย (Scale), และเวทมนตร์หมุนอวกาศ (Rotation) หลายคนคงคันไม้คันมืออยากจะจับคาถาทั้งสามมารวมร่างกันแล้วใช่ไหมครับ?

แต่ช้าก่อน! มีมือใหม่หลายคนที่เผลอจับ Matrix เหล่านี้มาคูณรวมกันมั่วๆ แล้วต้องเจอกับฝันร้าย… เช่น สั่งให้ตัวละครหมุนหันหลัง แต่มันดันวิ่งตีวงโค้งปลิวหายไปนอกอวกาศราวกับบูมเมอแรง! หรือสั่งให้ขยายร่าง 2 เท่า แต่ตัวละครดันกระเด็นทะลุกำแพงไปเสียอย่างนั้น! ทำไมถึงเป็นแบบนี้? คำตอบนั้นซ่อนอยู่ในกฎเหล็กทางคณิตศาสตร์ที่ว่า “การคูณเมทริกซ์สลับที่ไม่ได้” ครับ วันนี้พี่จะพาไปเจาะลึกถึง “ลำดับที่ถูกต้อง” ในการร่ายเวทมนตร์ เพื่อให้โลก 3 มิติของคุณอยู่ภายใต้การควบคุมอย่างสมบูรณ์แบบ!

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

ในวิชาคณิตศาสตร์ตอนประถม เราถูกสอนมาเสมอว่า $2 \times 3 = 3 \times 2$ ซึ่งเราเรียกมันว่า “กฎการสลับที่ (Commutative Law)” แต่ในโลกของพีชคณิตเชิงเส้น (Linear Algebra) เมื่อเราก้าวเข้าสู่การคำนวณแบบกลุ่มก้อนอย่างเมทริกซ์ กฎข้อนี้จะ “ถูกทำลาย” อย่างสิ้นเชิงครับ!

นักคณิตศาสตร์พิสูจน์มาแล้วว่า สำหรับ Matrix $A$ และ $B$ ใดๆ: $$ AB \neq BA $$ (ยกเว้นในกรณีพิเศษจริงๆ เท่านั้น)

ถ้าคุณมอง Matrix เป็นตารางตัวเลข มันอาจจะดูเข้าใจยากว่าทำไมถึงสลับที่ไม่ได้ แต่ลองมองเปรียบเทียบในชีวิตประจำวันดูสิครับ การทำ Transformation ก็เหมือนการแต่งตัว… “การใส่ถุงเท้าก่อนใส่รองเท้า” ย่อมให้ผลลัพธ์ที่แตกต่างจากการ “ใส่รองเท้าก่อนใส่ถุงเท้า” อย่างแน่นอน! การคูณ Matrix ก็คือการร้อยเรียงลำดับการกระทำ (Sequence of operations) หากคุณสลับที่ การกระทำก็จะถูกสลับลำดับ ส่งผลให้ภาพสุดท้ายในโลก 3 มิติออกมาคนละเรื่องเลยครับ!

รูปประกอบเปรียบเทียบผลลัพธ์ของการสลับลำดับ Translate และ Rotate

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

เรามาดูตัวอย่างยอดฮิตที่ทำให้โปรแกรมเมอร์หลายคนหัวหมุนกันครับ นั่นคือการผสมระหว่าง ย้ายตำแหน่ง (Translate - T) และ หมุน (Rotate - R)

สมมติว่าเรามีตัวละครยืนอยู่ที่จุดศูนย์กลางโลก (Origin) หน้าหันไปทางทิศเหนือ และเราต้องการให้ตัวละครเดินไปทางขวา 10 เมตร พร้อมกับหันหน้าไปทางทิศตะวันออก (หมุน 90 องศา)

กรณีที่ 1: เลื่อนก่อน แล้วค่อยหมุน (Translate then Rotate) ถ้าเราสั่งย้ายตัวละครไปทางขวา 10 เมตร (ค่า x = 10) จากนั้นสั่ง “หมุน” ด้วยเมทริกซ์ Rotation… กฎเหล็กมีอยู่ว่า การหมุนจะเกิดขึ้นรอบจุดศูนย์กลางโลกเสมอ! ดังนั้น ตัวละครที่ยืนอยู่ห่างจากศูนย์กลางไป 10 เมตร จะไม่หมุนรอบตัวเอง แต่มันจะถูกเหวี่ยงเป็นวงกลมรัศมี 10 เมตร (Orbit) ลอยไปตกอยู่ที่ค่า z = 10 แทน!

กรณีที่ 2: หมุนก่อน แล้วค่อยเลื่อน (Rotate then Translate) คราวนี้เราเปลี่ยนใหม่ เราสั่งให้ตัวละคร “หมุน” 90 องศาก่อน เนื่องจากมันยังยืนอยู่ที่จุดศูนย์กลางโลก มันจึงหมุนรอบตัวเอง (Rotate in place) อย่างสวยงาม จากนั้นเราค่อยใช้เมทริกซ์ Translation “เลื่อน” มันไปวางที่ระยะ 10 เมตร

เห็นไหมครับว่า ทฤษฎีเรขาคณิตบอกเราชัดเจนว่า “จงหมุน (และย่อขยาย) วัตถุในขณะที่มันยังอยู่ที่จุดกำเนิดเสมอ แล้วจึงค่อยย้ายมันไป!”

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

ใน Game Engine ระดับโลกอย่าง Unity, Unreal Engine, หรือแม้แต่ OpenGL การสร้าง Composite Matrix แบบเบ็ดเสร็จเพื่อแปลงพิกัดจาก Local Space (ในโมเดล) ไปสู่ World Space (ในฉาก) จะถูกบังคับให้ทำตามมาตรฐาน T-R-S Order อย่างเคร่งครัดครับ!

การคูณแบบ Column Vector ยอดนิยม จะมีสมการหน้าตาแบบนี้: $$ M_{world} = M_{translate} \times M_{rotate} \times M_{scale} $$

แม้เราจะเขียน $T$ ไว้ซ้ายสุด แต่เวลาทำงานจริง คอมพิวเตอร์จะอ่านจาก ขวาไปซ้าย (Right to Left) เมื่อมันคูณกับ Vector พิกัดโมเดล $\mathbf{v}$ ลำดับการเกิดเวทมนตร์จริงๆ คือ:

  1. Scale (S): บีบ ยืด หรือขยายขนาดของโมเดลให้เสร็จก่อนในขณะที่ศูนย์กลางยังอยู่ที่ Origin เพื่อหลีกเลี่ยงการบิดเบี้ยว (Shearing)
  2. Rotate (R): หมุนตัวละครให้หันหน้าไปในทิศที่ถูกต้องรอบๆ จุดศูนย์กลางตัวเอง
  3. Translate (T): หยิบโมเดลที่ปรับขนาดและหันทิศเรียบร้อยแล้ว เทเลพอร์ตไปวาง ณ พิกัดที่ผู้เล่นยืนอยู่!

$$ \mathbf{v}{new} = T(R(S(\mathbf{v}{old}))) $$ นี่คือคาถารวมร่างที่ทำให้โลกของเกมทำงานได้อย่างถูกต้องสมบูรณ์แบบครับ!

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

เมื่อโมเดล 3D ของเราถูกส่งเข้าสู่ Graphics Pipeline (ในขั้นตอน Vertex Shader) การ์ดจอ (GPU) จะไม่มานั่งเสียเวลาคำนวณ Scale, Rotate, Translate ทีละขั้นตอนให้กับจุด Vertex นับแสนจุดนะครับ เพราะมันเปลืองพลังงาน

สิ่งที่ Game Engine ทำคือการคำนวณ Matrix $M = T \times R \times S$ ให้เบ็ดเสร็จจากฝั่ง CPU จนกลายเป็นตารางตัวเลข $4 \times 4$ รหัสลับเพียงหนึ่งก้อน จากนั้นมันจะส่ง Matrix สำเร็จรูปก้อนนี้ไปให้ GPU

หน้าที่ของ GPU มีเพียงอย่างเดียวคือเอาตาราง $4 \times 4$ นี้ไปฟาดคูณเข้ากับพิกัด Vertex ทุกๆ จุดแบบขนาน (Parallel) ในพริบตาเดียว! ด้วยความมหัศจรรย์ของ Matrix Multiplication เพียงครั้งเดียว จุด Vertex จะถูกขยาย หมุน และกระเด็นไปอยู่ถูกที่ถูกทางเป๊ะๆ นี่คือความลับที่ทำให้เกมยุคนี้ประมวลผลโมเดลระดับ High-Poly ได้ด้วยเฟรมเรต 60 FPS ครับ!

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

เคลียร์ไปอีกด่านครับ! ตอนนี้เราได้รู้ซึ้งแล้วว่าในจักรวาลของคณิตศาสตร์กราฟิก $A \times B \neq B \times A$ ไม่ใช่เรื่องตลก ลำดับแห่ง Scale $\rightarrow$ Rotate $\rightarrow$ Translate (T-R-S) คือสูตรสำเร็จที่ Game Programmer ทุกคนต้องจำให้ขึ้นใจ เพื่อป้องกันไม่ให้ตัวละครของคุณหมุนควงสว่านหนีออกนอกจักรวาล!

อย่างไรก็ตาม แม้ว่าลำดับ T-R-S จะสมบูรณ์แบบ แต่การใช้ Matrix หมุน (Rotation Matrix) ที่สร้างมาจาก Euler Angles (แกน X, Y, Z) นั้นยังมีจุดอ่อนร้ายแรงอยู่จุดหนึ่งที่เรียกว่า Gimbal Lock ซึ่งทำให้ทิศทางการหมุนซ้อนทับกันจนบั๊ก! ในตอนถัดไป เราจะไปทำความรู้จักกับสุดยอดเวทมนตร์ปราบเซียนที่ถูกสร้างขึ้นมาเพื่อแก้ปัญหานี้โดยเฉพาะ… สิ่งนั้นคือ “Quaternion” ครับ! เตรียมตัวไว้ให้ดี แล้วพบกันใหม่ Level Cleared!

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