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

1. 🎯 ตอนที่ 15: Scaling Matrix: คาถาย่อส่วนและขยายร่าง

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

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

ในตอนที่แล้ว เราได้อัญเชิญพลังของมิติที่ 4 (พิกัด $w$) มาสร้างคาถาเทเลพอร์ตย้ายตำแหน่ง (Translation) ให้กับโมเดล 3 มิติของเรากันไปแล้ว คราวนี้ลองจินตนาการถึงเหตุการณ์คลาสสิกในเกมดูครับ… มอนสเตอร์สไลม์ตัวจิ๋วที่ดรอปไอเทมกากๆ จู่ๆ ก็ดูดกลืนพลังงานรอบตัว แล้ว “ขยายร่าง” กลายเป็นบอสขนาดยักษ์สูงตระหง่านท่วมจอ! หรือเวลาที่ตัวละครมาริโอ้กินเห็ดแล้วตัวโตขึ้น เกมเอนจินรู้ได้อย่างไรว่าต้องยืดขยายโมเดลพวกนี้ออกไปทางไหน และต้องใช้สมการอะไรควบคุม?

คาถาที่เราจะใช้ในวันนี้ง่ายและตรงไปตรงมาที่สุดในบรรดาเวทมนตร์ Transformation ทั้งหมดครับ มันมีชื่อว่า “Scaling Matrix” ซึ่งเคล็ดลับของมันไม่ได้ซ่อนอยู่ที่ไหนไกล แต่ซ่อนอยู่ตรง “เส้นทแยงมุม” ของตารางตัวเลขของเรานี่เอง! เตรียมไม้กายสิทธิ์ให้พร้อม แล้วมาเสกคาถาขยายร่างกันเลยครับ!

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

หากยังจำกันได้ในตอนที่ 13 เราได้พูดถึง Identity Matrix ที่มีเลข $1$ วางพาดทแยงมุม ซึ่งเปรียบเสมือนการคูณด้วย $1$ ทำให้โมเดลคงขนาดเท่าเดิมทุกประการ

แต่ถ้าเราอยากจะเปลี่ยนขนาดของโมเดลล่ะ? สิ่งที่เราต้องทำก็แค่ เปลี่ยนตัวเลขบนเส้นทแยงมุมหลัก (Main Diagonal) ให้เป็นอัตราส่วนที่เราต้องการ (Scale Factors) ครับ! สมมติว่าเราต้องการขยายแกน X ด้วยอัตราส่วน $S_1$, แกน Y ด้วยอัตราส่วน $S_2$, และแกน Z ด้วยอัตราส่วน $S_3$ หน้าตาของตารางเวทมนตร์ $4 \times 4$ ของเราจะเป็นแบบนี้ครับ: $$ S = \begin{bmatrix} S_1 & 0 & 0 & 0 \ 0 & S_2 & 0 & 0 \ 0 & 0 & S_3 & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} $$

เมื่อเรานำตารางนี้ไปคูณ (Multiply) กับพิกัดจุด Vertex ของโมเดล $P = (x, y, z, 1)$ ลองดูผลลัพธ์ที่เกิดขึ้นสิครับ: $$ \begin{bmatrix} x’ \ y’ \ z’ \ 1 \end{bmatrix} = \begin{bmatrix} S_1 & 0 & 0 & 0 \ 0 & S_2 & 0 & 0 \ 0 & 0 & S_3 & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix} = \begin{bmatrix} S_1x \ S_2y \ S_3z \ 1 \end{bmatrix} $$

เห็นไหมครับ! พิกัดในแต่ละแกนจะถูกคูณด้วยสเกลาร์ (Scalar) ประจำแกนของมันเองอย่างอิสระ ไม่มีใครไปยุ่งกับพิกัดของใครเลย นี่แหละครับความสวยงามของตารางแนวทแยง (Diagonal Matrix) ที่ทำให้การคำนวณรวดเร็วปานสายฟ้าแลบ!

รูปประกอบการวางค่า Scale Factor บนเส้นทแยงมุมของ Matrix

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

ในโลกของการปรับขนาดด้วย Scaling Matrix เราสามารถแบ่งประเภทของการร่ายมนตร์ออกเป็น 2 สายหลักๆ ครับ:

  1. Uniform Scale (การปรับขนาดแบบสมส่วน): เกิดขึ้นเมื่อเราตั้งค่าตัวเลขบนแนวทแยงมุมให้ “เท่ากันทั้งหมด” (เช่น $S_1 = S_2 = S_3 = 2$) เวทมนตร์สายนี้จะขยายโมเดลให้ใหญ่ขึ้น 2 เท่าในทุกๆ มิติ สิ่งสำคัญคือมันจะรักษา “มุม (Angles)” และ “สัดส่วน (Proportions)” ของโมเดลเดิมไว้ได้อย่างสมบูรณ์แบบ ทรงกลมก็จะยังคงเป็นทรงกลมอยู่ดี
  2. Non-uniform Scale (การปรับขนาดแบบไม่สมส่วน): เกิดขึ้นเมื่อเราตั้งค่าตัวเลขบนแนวทแยงมุมให้ “มีค่าไม่เท่ากัน” (เช่น $S_1 = 1, S_2 = 2, S_3 = 1$) สิ่งที่เกิดขึ้นคือวัตถุจะถูก “ยืด (Stretch)” หรือ “บีบอัด (Squash)” ในทิศทางเฉพาะ มุมของรูปทรงจะบิดเบี้ยว ทรงกลมอาจจะถูกบีบจนกลายเป็นรูปไข่ (Ellipsoid) เวทมนตร์สายนี้ต้องใช้ความระมัดระวัง เพราะถ้าคุณ Non-uniform Scale พ่อครัวในเกม เขาอาจจะดูเหมือนเอเลี่ยนหัวโตตัวลีบไปเลยก็ได้!

ความลับของสเกลติดลบ (Negative Scale): ถ้าเราใส่ค่าตัวเลขบนเส้นทแยงมุมให้ติดลบล่ะ? (เช่น $S_1 = -1$) มันไม่ได้ทำให้โมเดลหดจนกลายเป็นสสารมืดหรอกนะครับ แต่มันคือคาถา “กระจกสะท้อน (Reflection)” โมเดลของคุณจะถูกพลิกกลับด้านแบบ Mirror ทันที! (ระวังให้ดี การทำแบบนี้อาจทำให้ Normal Vector ของพื้นผิวกลับด้าน และทำให้การเรนเดอร์แสงเงาผิดเพี้ยนได้ในบาง Game Engine)

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

Scaling Matrix เป็นเครื่องมือที่ใช้บ่อยมากๆ ในการทำเกมครับ ตัวอย่างเช่น:

  • Squash and Stretch Animation: หลักการแอนิเมชันระดับโลกที่ทำให้ตัวละครดูมีน้ำหนักและยืดหยุ่น เวลามาริโอ้กระโดดตกลงมากระแทกพื้น เราจะใช้ Non-uniform Scale บีบแกน Y ให้ลดลง (Squash) และขยายแกน X กับ Z ออกเพื่อให้ดูเด้งดึ๋ง เป็นเทคนิคที่ใช้ในเกม 3D ทุกวันนี้เพื่อประหยัดการทำแอนิเมชันกระดูก (Bones)
  • สร้างความหลากหลายให้โมเดล (Asset Variation): ในเกมที่มีป่าใหญ่ เราคงไม่อยากปั้นต้นไม้ 100 แบบ Programmer จะโหลดโมเดลต้นไม้มาแค่ 1 แบบ แล้วสุ่มค่า Uniform Scale คลุมมันด้วย Scaling Matrix เพื่อสร้างต้นไม้ขนาดเล็ก กลาง ใหญ่ กระจายไปทั่วฉากโดยไม่กินหน่วยความจำ
  • Hitbox Sizing: กล่องรับการชน (Bounding Box) ที่ล้อมรอบตัวละคร จะถูกปรับขนาดตาม Scaling Matrix ของโมเดลเสมอ เพื่อให้ระบบฟิสิกส์รู้ว่าตอนนี้ตัวละครขยายร่างแล้วและต้องโดนโจมตีกว้างขึ้น

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

เมื่อเข้าสู่ Graphics Pipeline (ใน Vertex Shader) การทำ Scaling ไม่เคยทำงานโดดๆ ครับ มันจะถูกนำไปคูณรวม (Concatenation) เป็นส่วนหนึ่งของ Model Matrix เสมอ ($M = Translation \times Rotation \times Scale$)

กฎเหล็กแห่งลำดับการคูณ (Order of Transformation): ใน 3D Engine เราบังคับเสมอว่า “ต้องทำ Scale เป็นอันดับแรกสุด” ก่อนที่จะหมุน (Rotate) หรือย้ายตำแหน่ง (Translate) ทำไมถึงเป็นเช่นนั้นล่ะ? ลองนึกภาพตามนะครับ ถ้าคุณย้ายตำแหน่งวัตถุออกไปห่างจากจุดกำเนิด (Origin) เป็นระยะทาง 10 เมตร แล้วค่อยสั่งขยายขนาด 2 เท่า… วัตถุของคุณจะไม่ใช่แค่ใหญ่ขึ้น 2 เท่า แต่มันจะถูก “ถีบกระเด็น” ออกไปไกลเป็น 20 เมตรด้วย! (เพราะ Scale จะคูณระยะห่างนั้นเข้าไป) และถ้าคุณหมุนก่อนแล้วค่อย Non-uniform Scale วัตถุของคุณจะบิดเบี้ยวเป็นสี่เหลี่ยมขนมเปียกปูน (Shear) ทันที ดังนั้น แกนกลางของระบบ Hierarchy ในเกมจึงต้องคำนวณ Scale จากแกน Local ของมันเองตั้งแต่ยังอยู่ที่จุดกำเนิดเสมอครับ

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

เคลียร์ไปอีกหนึ่งด่านครับ! ตอนนี้เรารู้แล้วว่าการปรับขนาดวัตถุ ไม่ว่าจะยืด หด หรือพลิกกลับด้านกระจก ทั้งหมดถูกควบคุมด้วยปุ่มวอลลุ่มเล็กๆ ที่เรียงตัวกันอยู่บน “เส้นทแยงมุม” ของ Matrix ตารางเวทมนตร์ของเรา

เรามีเวทมนตร์ย้ายตำแหน่ง (Translation) และเวทมนตร์ย่อขยาย (Scale) ครบแล้ว สิ่งสุดท้ายที่ทรงพลังและขึ้นชื่อว่า “ปราบเซียน” ที่สุดในบรรดา Transformation คือการจับโมเดล 3D มาตีลังกาหมุนรอบตัวเอง! ในตอนถัดไป เราจะมาเจาะลึกความลับของ “Rotation Matrix” กันครับ รับรองว่าตรีโกณมิติ (Trigonometry) จะกลับมาหลอกหลอน (เอ๊ย! กลับมาสนุก) แน่นอน แล้วพบกันครับ Level Cleared!

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