ตอนที่ 1: ปลุกชีพเรขาคณิต! เปลี่ยนตัวเลขบนหน้ากระดาษให้เป็นจักรวาล 3 มิติ
1. 🎯 ตอนที่ 1: ระบบพิกัดคาร์ทีเซียน: ผืนผ้าใบแห่งโลกดิจิทัล
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! กลับมาพบกันอีกครั้งในซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก เคยสงสัยไหมครับว่า เวลาที่เราวิ่งตะลุยไปในโลก Open-world ที่กว้างใหญ่ไพศาลของเกมโปรด หรือตอนที่ดอดจ์หลบกระสุนเวทมนตร์แบบสโลว์โมชัน เบื้องหลังภาพที่สวยงามอลังการเหล่านั้น มันไม่มีโลกทางกายภาพอยู่จริงเลยแม้แต่นิดเดียว! ทุกภูเขา ทุกตึกรามบ้านช่อง และทุกการเคลื่อนไหว ล้วนถูกสร้างขึ้นจาก “ตัวเลข” ล้วนๆ
สำหรับใครที่เคยรู้สึกเกลียดวิชาคณิตศาสตร์ หรือมองว่าสมการเป็นเรื่องชวนปวดหัว พี่อยากให้ลองเปิดใจปรับมุมมองใหม่ดูครับ เพราะในโลกของการพัฒนาเกมและ Computer Graphics คณิตศาสตร์ไม่ใช่ปีศาจร้าย แต่เป็น “เวทมนตร์” ที่ให้พลัง Creator อย่างพวกเราเสกสร้างทุกสิ่งได้ดั่งใจนึก และเวทมนตร์บทแรกที่เราต้องทำความเข้าใจก่อนจะเริ่มสร้างโลก ก็คือตารางผืนผ้าใบที่เรียกว่า ระบบพิกัดคาร์ทีเซียน (Cartesian Coordinate System) นั่นเองครับ!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
ทุกอย่างเริ่มต้นขึ้นเมื่อประมาณ 400 กว่าปีก่อน โดยนักคณิตศาสตร์และนักปรัชญาชาวฝรั่งเศสชื่อ René Descartes ผู้ซึ่งได้สร้างระบบคณิตศาสตร์แบบคาร์ทีเซียนขึ้นมา ถือเป็นการรวมตัวกันครั้งยิ่งใหญ่ของพีชคณิต (Algebra) และเรขาคณิต (Geometry)
ในโลก 2 มิติ (2D) เรามีแกนสองแกนที่ตัดกันตั้งฉาก จุดที่แกนทั้งสองตัดกันเราเรียกว่า Origin หรือจุดกำเนิด มีพิกัดเป็น $(0, 0)$ แกนแนวนอนคือแกน X (X-axis) และแกนแนวตั้งคือแกน Y (Y-axis) เวลาเราจะระบุตำแหน่งใดๆ บนผืนผ้าใบนี้ เราจะใช้คู่ลำดับ $(x, y)$ เพื่อบอกระยะห่างที่มีเครื่องหมาย (Signed distance) จากจุดกำเนิด,
แต่โลกของเกมเรามันเป็น 3 มิติ (3D) ครับ! สิ่งที่เราต้องทำก็แค่เพิ่มมิติที่สามเข้ามา นั่นคือแกน Z (Z-axis) ซึ่งตั้งฉากกับทั้งแกน X และ Y ทำให้การระบุตำแหน่งหรือจุด Vertex ของโมเดล 3 มิติ ต้องใช้ชุดตัวเลข 3 ตัว คือ $(x, y, z)$
สมมติว่าเรามีจุด $P$ ในอวกาศ 3 มิติ เราสามารถเขียนระบุตำแหน่งของมันได้เป็น:
$$ P = (x, y, z) $$
ตัวเลขสามตัวนี้แหละครับ คือรากฐานของจุดทุกจุด (Vertices) ที่ประกอบร่างกันขึ้นมาเป็นโมเดลตัวละคร โพลิกอน (Polygon) และโลกทั้งใบในคอมพิวเตอร์!
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
พอเราขยับจาก 2D มาเป็น 3D ปัญหาปราบเซียนก็เริ่มปรากฏตัวขึ้นครับ นั่นคือเรื่องของ “ทิศทาง” ของแกน Z ในโลก 2D เราสามารถหมุนพิกัดยังไงก็ได้ให้มันกลับมาทับกันสนิท แต่ในโลก 3D ระบบพิกัด 3 มิติไม่ได้ถูกสร้างมาเท่าเทียมกันทั้งหมด, เราจะแบ่งมันออกเป็น 2 ตระกูลหลักๆ คือ:
- Left-handed Coordinate Space (ระบบพิกัดมือซ้าย): ลองยกมือซ้ายขึ้นมา ทำนิ้วโป้งกับนิ้วชี้เป็นรูปตัว ‘L’ แล้วชี้นิ้วกลางไปข้างหน้า นิ้วโป้งจะชี้ไปทางขวา ($+x$) นิ้วชี้ชี้ขึ้นฟ้า ($+y$) และนิ้วกลางชี้ตรงไปข้างหน้า ($+z$)
- Right-handed Coordinate Space (ระบบพิกัดมือขวา): ลองทำแบบเดียวกันกับมือขวา นิ้วโป้งคุณจะชี้ไปทางซ้ายแทน! ถ้านิ้วชี้คือ $+y$ และนิ้วกลางคือ $+z$ นิ้วโป้งที่ชี้ไปทางซ้ายก็คือ $+x$
ลองพยายามหมุนข้อมือให้ตายยังไง นิ้วทั้งสามของมือซ้ายกับมือขวาก็ไม่มีวันชี้ไปในทิศทางเดียวกันได้เป๊ะๆ นอกจากนี้ การกำหนดว่าการหมุนมุมแบบบวก (Positive Rotation) จะหมุนตามเข็มหรือทวนเข็มนาฬิกา ก็ยังขึ้นอยู่กับกฎมือซ้ายและกฎมือขวาด้วย (Left-hand / Right-hand Rule) เปรียบเสมือนการบิดเกลียว ถ้าใช้มือซ้ายกำรอบแกนหมุนโดยให้นิ้วโป้งชี้ไปทางฝั่งบวกของแกน ทิศทางที่นิ้วทั้งสี่กำเข้ามาคือทิศทางการหมุนที่เป็นบวก (ตามเข็มนาฬิกาเมื่อมองจากปลายแกน),
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
แล้วนักพัฒนาเกมเขาใช้อะไรกันล่ะ? คำตอบคือ “แล้วแต่ศาสนาของ Engine ที่ใช้ครับ!” ไม่มีระบบไหนดีกว่าระบบไหน เป็นเพียงความแตกต่างทางโครงสร้าง
- หนังสือกราฟิกส์แบบดั้งเดิม หรือคณิตศาสตร์แนว Linear Algebra มักนิยมใช้ Right-handed (เช่น OpenGL)
- แต่ใน Game Engine ยุคใหม่หลายค่าย หรือโปรแกรม 3D บางตัว มักนิยมใช้ Left-handed เพราะมัน Make sense สำหรับผู้เล่นมากกว่า (มองเข้าไปในจอคือ Z เป็นบวก),
แต่กฎเหล็กสูงสุดของ Computer Graphics (First Law of Computer Graphics) มีอยู่ว่า “ถ้ามันดูถูกต้อง มันก็คือถูกต้อง (If it looks right, it is right)” หากวันหนึ่งเราเอาโมเดล 3D มาใส่ในเอนจินแล้วภาพมันกลับด้านซ้ายขวา หรือเดินหน้าแล้วกลายเป็นถอยหลัง ไม่ต้องตกใจครับ รุ่นพี่ฝากเทคนิคไว้ว่า ให้ลองสลับเครื่องหมาย (Flip sign) ลบให้กลายเป็นบวกที่แกน Z ดู ทุกอย่างอาจจะกลับมาเป็นปกติราวกับร่ายมนตร์แก้คำสาปเลยทีเดียว!
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
คำถามที่สำคัญที่สุดคือ: โลก 3 มิติที่เราสร้างมาด้วยแกน X, Y, Z สุดท้ายแล้วมันมาแบนแต๊ดแต๋อยู่บนจอภาพ 2 มิติ (ที่ประกอบด้วยเม็ด Pixel) ของเราได้อย่างไร?
กระบวนการนี้ใน Render Pipeline เราเรียกว่า การฉายภาพ (Projection), เปรียบเสมือนการตั้งกล้องถ่ายรูปในโลกจำลองครับ โดยมีสองเทคนิคหลักๆ ที่เราใช้บ่อย:
- Orthographic Projection (การฉายภาพแบบขนาน): เส้นรังสีการมองเห็น (Projectors) จะขนานกันทั้งหมด ลืมเรื่องความใกล้ไกลไปได้เลย วัตถุที่อยู่ไกลจะไม่เล็กลง ภาพที่ได้จะรักษาสัดส่วนและมุมไว้ได้ดีเยี่ยม, เหมาะกับเกมแนวสร้างฐาน (Isometric/RTS) หรือการวาดแผนที่ UI ขอบเขตการมองเห็น (View Frustum) ของกล้องแบบนี้จะเป็นรูปทรงกล่องสี่เหลี่ยม
- Perspective Projection (การฉายภาพแบบทัศนมิติ): นี่คือวิธีที่ดวงตาของมนุษย์เราทำงานครับ! รังสีการมองเห็นทุกเส้นจะวิ่งมาตัดกันที่จุดๆ เดียว เรียกว่า “Center of projection” (เปรียบเหมือนรูรับแสงของกล้อง Pinhole), ส่งผลให้เกิดปรากฏการณ์ Perspective Foreshortening หรือการที่วัตถุอยู่ไกลจะมีขนาดเล็กลงบนหน้าจอ
ในทางคณิตศาสตร์ เราทำเวทมนตร์นี้ได้ด้วยการใช้ Matrix พิกัด 4 มิติ (Homogeneous Coordinates) มาคูณกับพิกัด $(x, y, z, 1)$ ของเรา เพื่อหาร (Divide) ค่า x และ y ด้วยระยะความลึก $z$ (หรือเก็บไว้ในตัวแปร $w$), ผลลัพธ์ที่ได้คือภาพสามมิติถูก “บีบ” และ “แบน” ลงมาประทับบนระนาบ 2D (Projection Plane) กลายเป็นภาพพิกเซลที่เราเห็นบนจอนั่นเองครับ!,
7. 🏁 บทสรุป (Level Cleared!)
เห็นไหมครับว่า ระบบพิกัดคาร์ทีเซียน ไม่ใช่แค่เส้นแกนกากบาทน่าเบื่อบนกระดานดำ แต่มันคือ “ผืนผ้าใบและกฎฟิสิกส์” ที่เราใช้กำหนดกฎเกณฑ์ทุกอย่างในจักรวาลดิจิทัล จากจุดและตัวเลข แปลงเป็นการเคลื่อนไหว และฉายภาพ 3 มิติลงบนจอ 2 มิติให้ผู้เล่นได้สัมผัส
ในตอนหน้า เราจะมาทำความรู้จักกับลูกศรนำทางที่มีชื่อว่า “Vector” และคาถาแปลงร่างสุดทรงพลังอย่าง “Matrix” กันต่อ รับรองว่าความลับของแอนิเมชันในเกมจะถูกคลี่คลายออกมาอีกเพียบ รอติดตามกันได้เลยครับ Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p