ตอนที่ 20: สถาปัตยกรรม Spaces: เคลื่อนย้ายมวลสารจาก Local สู่ World และ View Space!
1. 🎯 ตอนที่ 20: สถาปัตยกรรม Spaces: Local, World, View
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับเข้าสู่ซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก ครับ
ในตอนก่อนๆ เราได้เรียนรู้วิธีร่ายเวทมนตร์ย้ายตำแหน่ง ย่อขยาย และหมุนโมเดลด้วย Matrix รวมถึงการใช้คาถาย้อนเวลาอย่าง Inverse Matrix กันไปแล้ว วันนี้พี่จะพาทุกคนไปดู “ภาพรวมระดับสถาปัตยกรรม” ของจักรวาล 3 มิติกันครับ!
เคยสงสัยไหมครับว่า โมเดลตัวละครที่คุณปั้นมาในโปรแกรม Blender หรือ Maya มันเดินทางไปโผล่ในฉากของเกม Open World อันกว้างใหญ่ได้อย่างไร? แล้วเวลากล้อง (Camera) ในเกมเคลื่อนที่ตามตัวละคร ทำไมทุกสิ่งทุกอย่างบนหน้าจอถึงขยับตอบสนองได้อย่างสมบูรณ์แบบเป๊ะๆ? ความลับทั้งหมดนี้ถูกควบคุมด้วยระบบโครงสร้างพิกัดอ้างอิงที่เรียกว่า “Spaces” หรืออวกาศจำลองนั่นเองครับ ถ้าเปรียบ Matrix เป็นคาถาแปลงร่าง Spaces ก็คือ “มิติ” ที่เรากำลังร่ายคาถาใส่ วันนี้เราจะมากระโดดข้ามมิติกันครับ ไปลุยกันเลย!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
ในโลกของการพัฒนาเกม ทุกอย่างไม่ได้อยู่ใน “อวกาศ” เดียวกันตั้งแต่เริ่มครับ นักคณิตศาสตร์และกราฟิกโปรแกรมเมอร์ได้แบ่งระบบพิกัดออกเป็น 3 มิติหลักๆ เพื่อให้ง่ายต่อการจัดการ ได้แก่:
- Local Space (หรือ Object Space / Model Space): นี่คือ “มิติส่วนตัว” ของโมเดลแต่ละชิ้นครับ เวลาที่ 3D Artist ปั้นโมเดลหุ่นยนต์ขึ้นมาสักตัว เขาจะให้จุดศูนย์กลางของมิตินี้ (Origin $0,0,0$) อยู่ที่ตำแหน่งหว่างขาหรือจุดศูนย์ถ่วงของหุ่นยนต์ ในมิตินี้ หุ่นยนต์จะไม่รู้เลยว่าโลกภายนอกมีหน้าตาเป็นอย่างไร มันรู้แค่ว่าแขนขวาของมันอยู่ห่างจากจุดศูนย์กลางตัวเองไปกี่เมตร
- World Space: นี่คือ “มิติระดับจักรวาล” หรือฉากของเกมนั่นเองครับ มันคือแผนที่ขนาดใหญ่ที่มีจุด Origin $(0,0,0)$ เพียงจุดเดียวเป็นศูนย์กลางของโลก
การที่เราจะดึงหุ่นยนต์จากมิติส่วนตัว (Local) มาวางในแผนที่เกม (World) เราจะต้องใช้เวทมนตร์ Scale, Rotate, Translate เรียงตามกฎ T-R-S ที่เราเรียนไป เพื่อสร้างคาถาที่เรียกว่า Model Matrix ($M_{model}$) และนำมาคูณกับพิกัดจุด Vertex ของโมเดลครับ:
$$ P_{world} = M_{model} P_{local} $$
เพียงเท่านี้ โมเดลนับพันชิ้นก็จะมีตัวตนและพิกัดที่แท้จริงในจักรวาลร่วมกันแล้วครับ!
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
เมื่อทุกอย่างมาอยู่ใน World Space แล้ว ระบบฟิสิกส์สามารถคำนวณการชนกัน (Collision) ได้อย่างสมบูรณ์แบบ แต่มันยังไม่พร้อมที่จะถูกวาดลงบนหน้าจอคอมพิวเตอร์ครับ! เพราะผู้เล่นจะต้องมองโลกนี้ผ่าน “กล้อง (Camera)”
และนี่คือความจริงที่น่าตกใจที่สุดในโลกของคอมพิวเตอร์กราฟิก… ในคอมพิวเตอร์ ไม่มีกล้องอยู่จริงครับ! ฮาร์ดแวร์ไม่สามารถเคลื่อนที่กล้องไปหาวัตถุได้ สิ่งที่คอมพิวเตอร์ทำคือกระบวนการสวนทาง: “เราไม่ได้ขยับกล้องไปหาโลก แต่เราจับโลกทั้งใบ เคลื่อนที่ถอยหลังมาอยู่ตรงหน้ากล้องต่างหาก!”
เพื่อทำให้กล้องกลายเป็นจุดศูนย์กลางของทุกสิ่ง เราจึงต้องสร้างมิติที่ 3 ขึ้นมา นั่นคือ View Space (หรือ Camera Space/Eye Space) ในมิตินี้ กล้องจะถูกบังคับให้นั่งนิ่งๆ อยู่ที่จุด Origin $(0,0,0)$ เสมอ และมองตรงไปข้างหน้า (ตามแกน Z)
แล้วเราจะย้ายจักรวาล (World Space) มาอยู่ใน View Space ได้อย่างไร? พระเอกของเราก็คือปุ่ม Undo จากตอนที่แล้ว หรือ Inverse Matrix นั่นเองครับ! สมมติว่ากล้องของคุณมี Model Matrix เป็นของตัวเองที่บอกว่ากล้องอยู่ตรงไหนในฉาก ($M_{camera_model}$) คาถาที่เราจะใช้เตะจักรวาลให้สวนทางกับกล้อง ก็คือ Inverse ของมันครับ! เราเรียกคาถานี้ว่า View Matrix ($M_{view}$): $$ M_{view} = (M_{camera_model})^{-1} $$
เมื่อเรานำตารางตัวเลข $M_{view}$ นี้ไปคูณกับทุกๆ จุดใน World Space… $$ P_{view} = M_{view} P_{world} $$ ทาดา! โลกทั้งใบจะถูกดึง เลื่อน และหมุน มาอยู่ตรงหน้าเลนส์กล้องของคุณอย่างพอดิบพอดีเป๊ะๆ ครับ!
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
แนวคิดการกระโดดข้าม Spaces นี้เป็นหัวใจของการทำ Game Engine ทุกตัวบนโลกครับ:
- การควบคุมมุมกล้อง (Camera Controller): ในเกม FPS (First-Person Shooter) เวลาผู้เล่นขยับเมาส์หันซ้ายขวา โค้ดของเกมจะไปอัปเดตแกนการหมุนของตัวละคร จากนั้นจับมันทำ Inverse กลายเป็น View Matrix แล้วส่งไปให้ GPU เพื่อหมุนฉากทั้งฉากรอบตัวผู้เล่น!
- การคำนวณแสงเงา (Lighting & Shading): โปรแกรมเมอร์หลายคนชอบคำนวณแสงเงาแบบสมจริง (Specular, Diffuse) ภายในมิติ View Space ครับ เพราะในมิตินี้ พิกัดของกล้อง (Viewer Position) คือ $(0,0,0)$ เสมอ ทำให้สมการการสะท้อนแสงถูกตัดทอนให้สั้นลง คำนวณได้เร็วขึ้นมหาศาล!
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
เมื่อเจาะลึกลงไปใน Graphics Pipeline (ในส่วนของ Vertex Shader) GPU ของเราซึ่งมีหน้าที่ต้องคำนวณพิกัดจุด Vertex นับล้านๆ จุดในทุกๆ 16 มิลลิวินาที (ที่ 60 FPS) มันจะไม่มีเวลามานั่งคูณ Matrix ทีละสเต็ป ($Local \rightarrow World \rightarrow View$) หรอกนะครับ!
สิ่งที่ Game Engine ฝั่ง CPU ทำ คือการจับคาถาแปลงร่างทั้งสองมิติ มา “คูณรวบยอด (Concatenate)” ไว้ล่วงหน้า กลายเป็นสุดยอดคาถาเพียงหนึ่งเดียวที่ชื่อว่า ModelView Matrix: $$ M_{modelview} = M_{view} M_{model} $$
จากนั้น CPU จะส่งเมทริกซ์ $4 \times 4$ ก้อนนี้ไปให้ GPU ภายใน Shader โปรแกรมเมอร์ก็จะเขียนโค้ดแค่บรรทัดเดียว:
float4 posView = mul(M_modelview, inVertex.posLocal);
เพียงแค่การคูณครั้งเดียว จุดบนปลายนิ้วของหุ่นยนต์ ก็จะถูกเทเลพอร์ตออกจาก Local Space ลอยข้าม World Space และมาหยุดโพสท่าอยู่หน้ากล้องใน View Space ทันที! รวดเร็วปานสายฟ้าแลบ!
7. 🏁 บทสรุป (Level Cleared!)
เคลียร์ไปอีกหนึ่งด่านระดับบอสครับ! ตอนนี้เราเข้าใจสถาปัตยกรรมอวกาศของโลกกราฟิกแล้ว ทุกสรรพสิ่งเริ่มต้นจากการปั้นใน Local Space, ถูกนำมาจัดวางใน World Space ด้วย Model Matrix, และถูกดึงมาอยู่หน้าดวงตาของเราใน View Space ด้วย View Matrix
แต่เดี๋ยวก่อน! ตอนนี้โลกทั้งใบมากองอยู่หน้ากล้องแล้ว แต่มันก็ยังคงเป็นภาพ 3 มิติอยู่ดี แล้วคอมพิวเตอร์จะบีบอัดมิติความลึก (Depth) ให้กลายเป็นภาพ 2 มิติแบนๆ บนหน้าจอมอนิเตอร์ของคุณ พร้อมกับสร้างเอฟเฟกต์ “ของไกลดูเล็ก ของใกล้ดูใหญ่” ได้อย่างไร? นี่คือหน้าที่ของเวทมนตร์บทสุดท้ายในกลุ่ม Transformation ที่ทรงพลังที่สุด… เตรียมตัวพบกับ “Projection Matrix” ได้ในตอนหน้าครับ! Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p