รูปปกกระดานดำชอล์กสี

1. 🎯 ตอนที่ 3: บวกและลบเวกเตอร์: การเดินทางในโลกเกม

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

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

ในตอนที่แล้ว เราได้รู้จักกับ Vector ในฐานะ “ลูกศรเวทมนตร์” ที่คอยบอกทิศทางและระยะกระจัดกันไปแล้ว ทีนี้ลองนึกภาพตามพี่นะครับ… ถ้าเรามีตัวละครในเกมที่กำลังวิ่งไปข้างหน้า พร้อมกับถูกกระแสลมพัดให้ปลิวไปทางขวาด้วย ตัวละครของเราจะเคลื่อนที่ไปทางไหน? หรือถ้าเราอยากให้จรวดติดตามเป้าหมาย (Homing Missile) บินไปหาศัตรู มันจะรู้ได้อย่างไรว่าต้องหันหน้าไปทิศใด?

คำตอบของคำถามทั้งหมดนี้ ซ่อนอยู่ในวิชาคณิตศาสตร์ชั้นประถมที่เราคุ้นเคยกันดี นั่นคือ “การบวกและการลบ” ครับ! แต่ในโลก 3 มิติ เราไม่ได้บวกตัวเลขธรรมดา เรากำลังจะเอา “ลูกศรทิศทาง” มาบวกและลบกันต่างหาก รับรองว่าถ้าเข้าใจคอนเซปต์นี้ ระบบการเคลื่อนที่ (Movement) และฟิสิกส์ในเกมของคุณจะทำงานได้อย่างมีชีวิตชีวาเลยทีเดียว!

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

ในเชิงพีชคณิต (Algebra) การบวกและลบ Vector นั้นตรงไปตรงมาจนน่าตกใจครับ กฎเหล็กมีอยู่ข้อเดียวคือ: เราสามารถบวกหรือลบ Vector ได้เฉพาะเมื่อมันมีจำนวนมิติเท่ากันเท่านั้น โดยให้เอาตัวเลขในแกนเดียวกันมาบวกหรือลบกันตรงๆ เลย

สมมติว่าเรามี Vector $\mathbf{a}$ และ $\mathbf{b}$ ในโลก 3 มิติ: $$ \mathbf{a} = [a_x, a_y, a_z] $$ $$ \mathbf{b} = [b_x, b_y, b_z] $$

การบวกเวกเตอร์ (Vector Addition): $$ \mathbf{a} + \mathbf{b} = [a_x + b_x, a_y + b_y, a_z + b_z] $$

การลบเวกเตอร์ (Vector Subtraction): หลักการคือการบวกด้วย “เวกเตอร์ที่ติดลบ” (Negative Vector) ซึ่งการติดลบ Vector ก็แค่กลับเครื่องหมายทุกแกน ทำให้ลูกศรหันไปในทิศตรงกันข้าม: $$ \mathbf{a} - \mathbf{b} = \mathbf{a} + (-\mathbf{b}) = [a_x - b_x, a_y - b_y, a_z - b_z] $$ ง่ายเหมือนปอกกล้วยเข้าปากใช่ไหมครับ? แต่พลังที่แท้จริงของมันอยู่ที่ “ภาพ” ที่เกิดขึ้นหลังจากนี้ต่างหาก!

รูปประกอบการบวกและลบเวกเตอร์แบบ Tip-to-tail

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

ในโลกเรขาคณิต เราจะมองการทำงานนี้เป็นรูปธรรมผ่านสิ่งที่เรียกว่า กฎรูปสามเหลี่ยม (Triangle Rule) หรือที่เหล่านักพัฒนาเกมชอบเรียกว่า Tip-to-tail (หัวต่อหาง) ครับ

1. เวทมนตร์แห่งการบวก (The Magic of Addition) ลองจินตนาการว่า Vector คือ “คำสั่งการเดินทาง” สมมติ $\mathbf{a}$ คือคำสั่งให้ “เดินไปข้างหน้า” และ $\mathbf{b}$ คือคำสั่งให้ “เดินไปทางขวา” ถ้านำ $\mathbf{a} + \mathbf{b}$ ในเชิงเรขาคณิต เราจะเอา “หาง (Tail)” ของลูกศร $\mathbf{b}$ ไปต่อเข้ากับ “หัว (Head)” ของลูกศร $\mathbf{a}$ ผลลัพธ์ที่ได้คือ Vector ใหม่ที่ลากจากจุดเริ่มต้นของ $\mathbf{a}$ พุ่งตรงไปยังจุดปลายของ $\mathbf{b}$ เปรียบเสมือนการเดินลัดสนามหญ้า แทนที่จะเดินตามขอบถนนมุมฉากครับ! (นี่คือที่มาของชื่อ Triangle Rule เพราะลูกศร 3 เส้นจะประกอบกันเป็นรูปสามเหลี่ยมพอดี)

2. เวทมนตร์แห่งการลบ (The Magic of Subtraction) ถ้าการบวกคือการรวมการเดินทาง “การลบ” คือการหา “เส้นทางสู่เป้าหมาย” ครับ! สมมติว่าเรามี Point $A$ (ตำแหน่งปัจจุบันของเรา) และ Point $B$ (ตำแหน่งของหีบสมบัติ) เราจะสร้างลูกศรชี้จากเราไปหาหีบสมบัติได้อย่างไร? ความลับคือสูตรนี้ครับ: $$ \mathbf{d} = B - A $$ เมื่อเอาพิกัดของจุด “ปลายทาง” (Target) ลบด้วย “ต้นทาง” (Source) เสมอ เราจะได้ Vector $\mathbf{d}$ ที่ชี้จาก $A$ พุ่งตรงไปหา $B$ อย่างแม่นยำ นี่คือกฎที่สำคัญที่สุดที่ Game Programmer ทุกคนต้องจำให้ขึ้นใจครับ!

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

แล้วเราเอาการบวกและการลบ Tip-to-tail นี้ไปใช้ทำอะไรใน Game Engine (เช่น Unity หรือ Unreal)? เยอะมากครับ!

  • ระบบเดินและวิ่งของตัวละคร (Character Locomotion): ในแต่ละเฟรม (Frame) ตัวละครจะเคลื่อนที่โดยการอัปเดตตำแหน่ง (Point) ด้วยการ บวก ค่าความเร็ว (Velocity Vector) เข้าไป: NewPosition = CurrentPosition + (VelocityVector * Time.deltaTime) นี่คือการใช้สมการบวก Vector เพื่อนำทางตัวละครขยับไปตามลูกศรบนหน้าจอนั่นเอง (ในทางฟิสิกส์ เราเรียกกระบวนการนี้ว่า Euler Integration)
  • การรวมแรง (Combining Forces): ถ้าตัวละครกำลังกระโดดขึ้นไปในอากาศ (แรงชี้ขึ้น $+y$) และมีกระแสลมพัด (แรงชี้ไป $+x$) Game Physics Engine จะทำการจับ Vector แรงทั้งสองมาบวกกัน (Tip-to-tail) ทำให้เกิดลูกศรเฉียงๆ และนั่นคือทิศทางที่ตัวละครจะพุ่งไปจริงๆ ในเกมครับ
  • ระบบ AI และการติดตามเป้าหมาย (AI & Targeting): เมื่อมอนสเตอร์ต้องการเดินมาตีผู้เล่น มันจะต้องคำนวณทิศทางด้วยการ ลบ ตำแหน่ง: DirectionToPlayer = Player.Position - Monster.Position หลังจากได้ Vector DirectionToPlayer มาแล้ว มันก็แค่สั่งให้ตัวละครเดินไปตามลูกศรเส้นนั้น!

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

ลึกลงไปใน Graphics Pipeline กระบวนการเรนเดอร์ภาพ (Rendering) ก็ใช้การบวกเวกเตอร์อยู่เบื้องหลังเงียบๆ ตลอดเวลาครับ!

ในขั้นตอนการคำนวณแสง (Lighting) ที่ Fragment Shader คอมพิวเตอร์จำเป็นต้องรู้ทิศทางของแสง (Light Vector) และทิศทางจากพื้นผิวไปยังมุมกล้อง (View Vector) การหาทิศทางเหล่านี้ก็ล้วนเกิดจากการเอาตำแหน่งของแหล่งกำเนิดแสงหรือกล้อง มาลบกับตำแหน่งของจุดพิกเซล (Pixel) บนโมเดล 3D ($LightPosition - PixelPosition$)

นอกจากนี้ การแปลงตำแหน่งพิกัดแบบเลื่อน (Translation Matrix) ที่ดึงโมเดลจากกึ่งกลางโลก (Origin) ไปวางตามมุมต่างๆ ของฉาก เนื้อแท้ของมันก็คือการเอาพิกัดของจุด Vertex มาบวก (Add) ด้วย Vector การกระจัดนั่นเอง แต่ Pipeline สมัยใหม่จะจับการบวกนี้ยัดลงไปในเมทริกซ์ขนาด $4 \times 4$ เพื่อให้คำนวณรวดเร็วผ่านฮาร์ดแวร์ GPU ครับ

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

เห็นไหมครับว่า การบวกและลบเวกเตอร์ ไม่ใช่แค่การเอาตัวเลขมาจับคู่บวกกันทื่อๆ แต่มันคือ “ไวยากรณ์แห่งการเดินทาง” ในโลก 3 มิติ การบวกคือการรวมผลลัพธ์ของทิศทาง ส่วนการลบคือการค้นหาเส้นทางไปสู่เป้าหมาย (ปลายทาง ลบ ต้นทาง) แค่จำกฎ Tip-to-tail และ $B - A$ นี้ไว้ คุณก็มีพลังมากพอที่จะควบคุมการเคลื่อนไหวทุกอย่างในเกมแล้วครับ!

สำหรับตอนต่อไป เราจะมาทำความรู้จักกับการคูณ Vector ที่ซับซ้อนขึ้นอีกนิด แต่ทรงพลังระดับที่ใช้สร้างระบบแสงเงาฟิสิกส์ (Physically Based Rendering) ได้เลย สิ่งนั้นเรียกว่า “Dot Product” และ “Cross Product” ครับ เตรียมไม้กายสิทธิ์ของคุณให้พร้อม แล้วเจอกันใหม่ Level Cleared!

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