ตอนที่ 2: เวกเตอร์ (Vector) ไม่ใช่แค่ลูกศร แต่คือเวทมนตร์แห่งการกระจัด
1. 🎯 ตอนที่ 2: เวกเตอร์ (Vector) ไม่ใช่แค่ลูกศร แต่คือการกระจัด
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับเหล่านักสร้างโลกจินตนาการ! ยินดีต้อนรับกลับเข้าสู่ซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก กันอีกครั้งนะครับ
ในตอนที่แล้ว เราได้ปูผืนผ้าใบแห่งโลกดิจิทัลอย่าง Cartesian Coordinate System กันไปแล้ว ทีนี้ลองจินตนาการดูสิครับว่า ถ้าเรามีตัวละครยืนอยู่ในเกม การจะสั่งให้ตัวละครนั้น “พุ่งตัว (Dash)” ไปข้างหน้า หรือการคำนวณทิศทางของกระสุนปืนที่ยิงออกไป เราจะบอกคอมพิวเตอร์อย่างไร?
หลายคนอาจจะเคยได้ยินคำว่า Vector จากวิชาฟิสิกส์หรือคณิตศาสตร์สมัยมัธยม แล้วก็แอบเบือนหน้าหนีเพราะนึกถึงสมการยืดยาว แต่ในฐานะของนักพัฒนาเกม (Game Developer) พี่อยากบอกว่า Vector คือ “ลูกศรเวทมนตร์” ที่ทรงพลังที่สุดในคลังอาวุธของเราครับ มันไม่ใช่แค่วิชาคำนวณชวนง่วง แต่มันคือศาสตร์แห่ง “ทิศทางและการเคลื่อนที่” ที่ทำให้โลก 3 มิติของเรามีชีวิตขึ้นมาจริงๆ!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
ในมุมมองของนักคณิตศาสตร์สายพีชคณิตเชิงเส้น (Linear Algebra) Vector อาจจะเป็นแค่ลิสต์หรือกลุ่มของตัวเลขที่เรียงต่อกัน เช่น อาร์เรย์ (Array) มิติเดียว $$ \mathbf{v} = [x, y, z] $$ แต่สำหรับพวกเราสาย Computer Graphics หรือฟิสิกส์ เราจะมอง Vector ในเชิงเรขาคณิต (Geometric) ครับ เรามองว่ามันคือ เส้นตรงที่มีทิศทาง (Directed Line Segment) ซึ่งมีคุณสมบัติสำคัญเพียง 2 อย่างเท่านั้น คือ:
- Magnitude (ขนาด หรือ ความยาว): บอกว่าลูกศรนี้ยาวแค่ไหน ซึ่งแทนความเร็วหรือระยะทาง
- Direction (ทิศทาง): บอกว่าลูกศรนี้ชี้ไปทางไหน
การคำนวณหา “ความยาว” ของ Vector (หรือที่เราเรียกว่า Norm) นั้น อาศัยทฤษฎีบทพีทาโกรัส (Pythagorean theorem) ธรรมดาๆ เลยครับ หากเรามี Vector $\mathbf{v} = [x, y, z]$ ขนาดของมัน (เขียนแทนด้วย $|\mathbf{v}|$) จะคำนวณได้จาก:
$$ |\mathbf{v}| = \sqrt{x^2 + y^2 + z^2} $$
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
สิ่งหนึ่งที่มือใหม่มักจะสับสนมากที่สุดคือ “ความต่างระหว่าง Point (จุด) กับ Vector (เวกเตอร์)” ครับ เพราะเวลาเขียนในโค้ด เรามักจะใช้ตัวเลข 3 ตัว $(x, y, z)$ เหมือนกันเป๊ะ! แต่วิธีการที่มันถูกตีความในโลก 3 มิตินั้นต่างกันคนละเรื่องเลย
- Point (จุดตำแหน่ง): ระบุ “สถานที่ (Location)” ในอวกาศ เช่น “บ้านของฉันอยู่ที่พิกัด $(10, 5, 0)$” จุดนั้นอยู่กับที่ ไม่มีขนาด ไม่มีทิศทาง
- Vector (การกระจัด): ระบุ “การกระจัด (Displacement) หรือการเปลี่ยนตำแหน่ง” เช่น “เดินไปทางทิศเหนือ 3 ก้าว” สังเกตไหมครับว่าคำสั่งนี้ ไม่ได้บอกว่าคุณอยู่ที่ไหน แต่บอกว่า คุณต้องเคลื่อนที่ไปอย่างไร
กฎเหล็กคือ: Vector ไม่มีตำแหน่งที่ตั้งแน่นอน (No Absolute Position) เราสามารถเลื่อนลูกศร Vector ไปวางตรงไหนของหน้าจอก็ได้ ตราบใดที่มันยังมีความยาวและชี้ไปทิศทางเดิม มันก็ยังถือว่าเป็น Vector ตัวเดิมเสมอ!
แล้วถ้าเรามี Point สองจุด คือ จุด $A$ และจุด $B$ เราจะสร้าง Vector ที่ชี้จาก $A$ ไป $B$ ได้อย่างไร? เวทมนตร์นี้ทำได้ด้วย การลบเวกเตอร์ (Vector Subtraction) ครับ! เราสามารถนำพิกัดของจุดปลายทาง มาลบกับจุดต้นทางได้เลย: $$ \mathbf{d} = B - A $$ ลูกศร $\mathbf{d}$ ที่ได้ จะเป็น Vector ที่ทำหน้าที่บอกการกระจัด (Displacement) ที่พุ่งจาก $A$ ไปหา $B$ พอดีเป๊ะ!
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
ใน Game Engine ระดับโลกอย่าง Unity หรือ Unreal Engine แนวคิดเรื่อง Point และ Vector ถูกใช้ตลอดเวลาทุกเฟรมเรตครับ!
- การเคลื่อนที่ (Movement & Velocity): เมื่อคุณกดปุ่มเดินหน้า (W) เอนจินจะสร้าง Vector ที่ชี้ไปข้างหน้า และนำไป “บวก” เข้ากับ Point (ตำแหน่งปัจจุบันของตัวละคร) เพื่อหาตำแหน่งใหม่ในเฟรมถัดไป
- การหาระยะห่าง (Distance): หากเราต้องการให้ศัตรู (Enemy) รู้ว่าตัวผู้เล่น (Player) อยู่ไกลแค่ไหน เราแค่เอาพิกัด $\text{Point}{\text{Player}} - \text{Point}{\text{Enemy}}$ เราก็จะได้ Vector ที่ชี้จากศัตรูมาหาผู้เล่น และเมื่อเราเอา Vector นี้ไปคำนวณหา Magnitude ($|\mathbf{v}|$) เราก็จะได้ “ระยะทาง” เป็นตัวเลขออกมาทันที!
- Line of Sight: การทำ Raycasting ยิงเลเซอร์ออกจากปืน หรือตรวจสอบว่าศัตรูมองเห็นเราไหม ก็คือการใช้จุดเริ่มต้น (Origin Point) ยิง Vector ทิศทาง (Direction Vector) ออกไปเช็คการชนนั่นเอง
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
เมื่อเราเจาะลึกเข้าไปใน Graphics Pipeline ข้อมูลทุกอย่างของโมเดล 3D จะถูกส่งเข้าสู่กระบวนการที่เรียกว่า Vertex Shader ในขั้นตอนนี้ คอมพิวเตอร์จำเป็นต้องแยกให้ออกว่าตัวเลขไหนคือ Point ตัวเลขไหนคือ Vector!
เวลาที่เราใช้ Matrix มหัศจรรย์ (Transformation Matrix ขนาด 4x4) เข้ามาคูณเพื่อขยับ ขยาย หรือหมุนโมเดล (ซึ่งเราจะเจาะลึกในตอนต่อๆ ไป) เราจะใส่ “พิกัดที่ 4” หรือที่เรียกว่า Homogeneous Coordinate ($w$) เข้าไปต่อท้าย $x, y, z$ ครับ
- ถ้าเป็น Point เราจะให้ $w = 1$ (เช่น $[x, y, z, 1]$) เพราะเราต้องการให้มันถูก “เลื่อนตำแหน่ง (Translation)” ได้
- ถ้าเป็น Vector เช่นทิศทางแสง หรือ Surface Normal (เวกเตอร์ที่ตั้งฉากกับพื้นผิว) เราจะให้ $w = 0$ (เช่น $[x, y, z, 0]$) เพราะ Vector มีแค่ทิศทาง ไม่ได้มีตำแหน่ง การเลื่อนตำแหน่งจึงไม่มีผลใดๆ กับมัน!
ความลับนี้ทำให้ Graphics Pipeline สามารถประมวลผลแสงเงา (Lighting) การสะท้อน (Reflection) ออกมาเป็นพิกเซลที่งดงามโดยไม่ผิดเพี้ยนเลยครับ
7. 🏁 บทสรุป (Level Cleared!)
เห็นไหมครับว่า Vector ไม่ใช่แค่วิชาท่องจำสูตรชวนปวดหัว แต่เป็นเหมือนชุดคำสั่งแห่งทิศทางและการเคลื่อนไหว ที่ช่วยให้ Creator อย่างเราควบคุมทุกสิ่งในโลก 3 มิติได้ ไม่ว่าจะให้เดินหน้า ถอยหลัง ชน หรือกระดอน
หลังจากที่เราเข้าใจเวทมนตร์แห่ง Vector แล้ว ในตอนต่อไปเราจะมาดู “การโจมตีร่วมกัน” ของ Vector อย่าง Dot Product และ Cross Product ว่าสองสิ่งนี้จะเข้ามาสร้างแสงเงาที่สมจริงในเกมได้อย่างไร บอกเลยว่าสนุกแน่นอน รอติดตามกันได้เลยครับ Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p