รูปปกกระดานดำชอล์กสีเรื่องจุดตัดระหว่างรังสีและระนาบ

1. 🎯 ตอนที่ 10: จุดตัดเรขาคณิตเบื้องต้น (Intersection)

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

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

เคยสงสัยไหมครับว่า ในเกมวางแผนการรบ (RTS) หรือเกมแนวสวมบทบาท (RPG) เวลาที่เราขยับเมาส์ไปคลิกเลือกตัวละครที่ยืนอยู่บนพื้น 3 มิติ เอนจินเกมมันรู้ได้อย่างไรว่าเรากำลังจิ้มโดนตัวละครตัวไหน หรือจิ้มโดนพื้นดินตรงพิกัดใด? ทั้งๆ ที่หน้าจอคอมพิวเตอร์ของเราเป็นแค่แผ่น 2 มิติแบนๆ แท้ๆ!

ความลับนี้ซ่อนอยู่ในการผสานพลังเวทมนตร์สองบทที่เราเพิ่งเรียนกันไปครับ นั่นคือ “รังสี (Ray)” จากตอนที่ 8 และ “ระนาบ (Plane)” จากตอนที่ 9 เมื่อเรานำกระสุนรังสีมายิงใส่กำแพงระนาบ การคำนวณหา “จุดตัด (Intersection)” จะเกิดขึ้น และนี่แหละครับคือรากฐานของระบบ Mouse Picking หรือการใช้เมาส์เลือกวัตถุในโลก 3 มิติ วันนี้พี่จะพาไปเจาะลึกสมการที่ใช้จับผิดกระสุนทุกนัดในเกมกันครับ!

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

เรามาทบทวนคาถาสองบทที่เรามีในมือกันก่อนครับ:

  1. สมการรังสี (Ray Equation): $\mathbf{p}(t) = \mathbf{p}_0 + t\mathbf{d}$ (โดยที่ $\mathbf{p}_0$ คือจุดกำเนิด, $\mathbf{d}$ คือเวกเตอร์ทิศทาง, และ $t$ คือระยะทาง)
  2. สมการระนาบ (Plane Equation): $\mathbf{p} \cdot \mathbf{n} = d$ (โดยที่ $\mathbf{n}$ คือ Normal Vector ที่ตั้งฉากกับระนาบ, $\mathbf{p}$ คือจุดใดๆ บนระนาบ และ $d$ คือระยะห่างจากจุดกำเนิด)

คำถามคือ “รังสีจะพุ่งไปชนระนาบตรงจุดไหน?” ในทางคณิตศาสตร์ จุดตัด (Intersection Point) ก็คือจุด $\mathbf{p}$ ที่มีตัวตนอยู่บน ทั้งรังสีและระนาบ ในเวลาเดียวกันครับ ดังนั้น เราสามารถเอาสมการรังสี ลงไปยัดแทนที่ตัวแปร $\mathbf{p}$ ในสมการระนาบได้เลย: $$ (\mathbf{p}_0 + t\mathbf{d}) \cdot \mathbf{n} = d $$

เมื่อกระจาย Dot Product เข้าไปในวงเล็บ จะได้: $$ (\mathbf{p}_0 \cdot \mathbf{n}) + (t\mathbf{d} \cdot \mathbf{n}) = d $$

เป้าหมายของเราคือการหาว่ากระสุนต้องวิ่งไปไกลแค่ไหน (หาค่า $t$) ถึงจะชนระนาบ เราจึงย้ายข้างสมการเพื่อแก้หา $t$ ครับ: $$ t(\mathbf{d} \cdot \mathbf{n}) = d - (\mathbf{p}_0 \cdot \mathbf{n}) $$

ในที่สุด เราก็จะได้สมการหาระยะจุดตัดสุดมหัศจรรย์: $$ t = \frac{d - \mathbf{p}_0 \cdot \mathbf{n}}{\mathbf{d} \cdot \mathbf{n}} $$ เพียงแค่แทนค่าพิกัดจุดกำเนิด ทิศทาง และข้อมูลระนาบลงไป เราก็จะได้ระยะทาง $t$ ออกมาเป็นตัวเลขสเกลาร์ (Scalar) ทันที!

รูปประกอบการตัดกันของรังสีและระนาบ (Ray-Plane Intersection)

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

แม้สมการนี้จะดูง่ายและคำนวณเร็วมาก แต่คอมพิวเตอร์ก็อาจจะทำงานผิดพลาดได้ถ้าเราไม่ระวังข้อยกเว้นทางเรขาคณิตครับ เรามาดูผลลัพธ์ของค่า $t$ ในกรณีต่างๆ กัน:

  • เมื่อตัวหาร $\mathbf{d} \cdot \mathbf{n} = 0$: ถ้า Dot Product ของทิศทางรังสีและ Normal ของระนาบได้ 0 แปลว่าเวกเตอร์ทั้งสอง “ตั้งฉากกัน” ซึ่งในทางเรขาคณิตหมายความว่า “รังสีวิ่งขนานไปกับระนาบ (Parallel)” ครับ! ในกรณีนี้กระสุนจะไม่มีวันพุ่งชนกำแพง (ไม่มีจุดตัด) โปรแกรมเมอร์จึงต้องเขียนคำสั่ง if (denominator == 0) ดักไว้เสมอเพื่อป้องกันไม่ให้เกมแครชจากการหารด้วยศูนย์ (Divide by Zero)
  • เมื่อ $t < 0$ (ติดลบ): แม้สมการจะหาค่า $t$ ออกมาได้ แต่ถ้ามันติดลบ แปลว่าเป้าหมายหรือระนาบนั้น “อยู่ด้านหลัง” จุดกำเนิดรังสีครับ (เหมือนเรายิงปืนไปข้างหน้า แต่เป้าหมายอยู่ข้างหลังเรา) สำหรับรังสี (Ray) ซึ่งอนุญาตให้ $t \ge 0$ เท่านั้น เราจะถือว่า “ไม่เกิดการชน (No Intersection)”
  • เมื่อ $t \ge 0$: ยินดีด้วย! คุณยิงโดนเป้าหมาย เราสามารถเอาค่า $t$ นี้กลับไปใส่ในสมการ $\mathbf{p}(t) = \mathbf{p}_0 + t\mathbf{d}$ เพื่อหาเป็นพิกัด $(x, y, z)$ ของจุดตัดในโลก 3 มิติ เพื่อนำไปวาดรอยกระสุนหรือสร้างเอฟเฟกต์ระเบิดได้เลยครับ

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

สมการจุดตัดที่เราเพิ่งเรียนกันไป คือกระดูกสันหลังของระบบโต้ตอบในเกมและโปรแกรม 3D ทั่วโลกครับ:

  • ระบบ Mouse Picking (การเลือกวัตถุบนจอ): เมื่อผู้เล่นคลิกเมาส์บนหน้าจอ 2 มิติ เอนจินจะสร้าง Ray พุ่งทะลุจากดวงตา (Camera) ผ่านพิกเซลที่คลิก ลงไปในโลก 3 มิติ เพื่อหาว่ารังสีเส้นนี้ไปตัด (Intersect) กับกล่อง Bounding Box หรือระนาบของวัตถุไหนเป็นชิ้นแรก นั่นทำให้คุณสามารถสั่งให้ทหารเดินไปตรงพิกัดที่เมาส์ชี้ได้เป๊ะๆ
  • ปืนเลเซอร์และ Hitscan: กระสุนที่วิ่งเร็วเท่าแสง (ไม่ต้องคำนวณวิถีโค้งจากแรงโน้มถ่วง) จะใช้ Ray ยิงออกไปตัดกับระนาบกล่องรับการชน (Hitbox) ของศัตรู
  • ระบบตรวจสอบการมองเห็น (Line of Sight): AI ศัตรูจะใช้ Raycasting ยิงรังสีจากตาของมันไปยังผู้เล่น หากรังสีพุ่งชน (Intersect) ระนาบกำแพงก่อนที่จะถึงตัวผู้เล่น AI ก็จะรู้ได้ทันทีว่ามองไม่เห็นผู้เล่นครับ

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

นอกจากงานด้านเกมเพลย์แล้ว อัลกอริทึมนี้ยังเป็นหัวใจของการเรนเดอร์ภาพแบบสมจริงสูงสุดอย่าง Ray Tracing ด้วยครับ

ในกระบวนการ Ray Tracing พื้นฐาน แทนที่จะเอาสามเหลี่ยมมาวาดลงจอ (Rasterization) ระบบจะทำการ “ยิงรังสี” ออกจากดวงตาทะลุผ่านทุกๆ พิกเซลบนจอภาพ (Screen-space pixels) เข้าไปในฉาก 3 มิติ จากนั้นมันจะทำการหาระยะจุดตัด ($t$) ระหว่างรังสีเส้นนั้นกับ “ทุกวัตถุ” ในฉาก วัตถุที่ให้ค่า $t$ เป็นบวกและมีค่าน้อยที่สุด จะถือว่าเป็น “พื้นผิวที่มองเห็นได้ (Visible Surface)” เป็นชิ้นแรก (Closest object) เมื่อเจอแล้ว คอมพิวเตอร์จึงจะส่งค่าพิกัดนั้นไปให้ฟังก์ชัน Shading คำนวณแสงเงา คืนค่ากลับมาเป็นสีของพิกเซลนั้นๆ บนหน้าจอนั่นเองครับ!

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

เคลียร์ไปอีกด่านครับ! การคำนวณหาจุดตัดระหว่าง Ray และ Plane เป็นเครื่องพิสูจน์ชั้นดีว่าพีชคณิตเชิงเส้น (Linear Algebra) นั้นมีประโยชน์อย่างมหาศาล จากสมการคณิตศาสตร์ที่ดูเรียบง่าย กลายมาเป็นเวทมนตร์แห่งการสัมผัสโลก 3 มิติ ที่ให้เราใช้เมาส์คลิกหยิบจับสิ่งของ หรือยิงกระสุนปืนได้อย่างแม่นยำ

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

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