ตอนที่ 8: เส้นตรงและรังสี (Lines & Rays): กระสุนเวทมนตร์แห่ง Raycasting
1. 🎯 ตอนที่ 8: เส้นตรงและรังสี (Lines & Rays): กระสุนเวทมนตร์แห่ง Raycasting
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับสู่ซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก ครับ
เวลาที่เราเล่นเกมแนว FPS (First-Person Shooter) แล้วใช้ปืนสไนเปอร์ยิงศัตรูที่อยู่ไกลลิบตา หรือเวลาที่มอนสเตอร์หันมาเจอเราแล้วเดินเข้ามาโจมตี เคยสงสัยไหมครับว่า Game Engine มันรู้ได้อย่างไรว่า “เส้นทางการยิง” หรือ “เส้นสายตา” นั้นไปกระทบกับเป้าหมายเข้าพอดี? ทฤษฎีฟิสิกส์ที่คำนวณแรงโน้มถ่วงแบบสมบูรณ์แบบอาจจะช้าเกินไปสำหรับกระสุนที่วิ่งเร็วเท่าแสง
ในวงการพัฒนาเกม เรามีเวทมนตร์บทหนึ่งที่ทำงานได้รวดเร็วปานสายฟ้าแลบ สิ่งนั้นเรียกว่า Raycasting ครับ! และหัวใจหลักที่ขับเคลื่อนระบบนี้ทั้งหมด ก็คือแนวคิดทางเรขาคณิตที่เราท่องจำกันมาตั้งแต่เด็กอย่าง “เส้นตรง (Line)” และ “รังสี (Ray)” นั่นเอง วันนี้พี่จะพาไปดูว่า สมการคณิตศาสตร์ธรรมดาๆ จะกลายร่างเป็นกระสุนปืนเลเซอร์ที่แม่นยำที่สุดในโลก 3 มิติได้อย่างไร!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
ในวิชาเรขาคณิตคลาสสิก เรามักจะนิยามเส้นประเภทต่างๆ ไว้ 3 แบบหลักๆ ครับ:
- Line (เส้นตรง): เส้นที่ยืดยาวออกไปอย่างไม่มีที่สิ้นสุดทั้งสองทิศทาง
- Line Segment (ส่วนของเส้นตรง): ส่วนหนึ่งของเส้นตรงที่มีความยาวจำกัด และมีจุดปลาย (Endpoints) ปิดหัวท้ายชัดเจน
- Ray (รังสี): “ครึ่งหนึ่ง” ของเส้นตรง โดยมีจุดเริ่มต้น (Origin) แล้วพุ่งยาวออกไปในทิศทางเดียวอย่างไม่มีที่สิ้นสุด
แต่ในโลกของวิทยาการคอมพิวเตอร์และเรขาคณิตเชิงคำนวณ (Computational Geometry) นิยามของ Ray จะถูกปรับแต่งให้ใช้งานได้จริงมากขึ้นครับ โดยเราจะมองว่า Ray คือ “ส่วนของเส้นตรงที่มีทิศทาง (Directed Line Segment)” ซึ่งมีทั้งจุดเริ่มต้น (Origin) มีความยาวจำกัด (Finite Length) และมีทิศทาง (Direction) ที่ชัดเจน
เพื่อที่จะนำเส้นเหล่านี้มาเขียนโปรแกรม เราจะไม่ใช้สมการแบบ $y = mx + c$ ทั่วไป เพราะมันจัดการกับเส้นแนวตั้งตรงๆ (ความชันเป็นอนันต์) หรือโลก 3 มิติได้ยาก สิ่งที่เราใช้คือสุดยอดสมการที่เรียกว่า สมการพาราเมตริก (Parametric Equation) ครับ!
$$ \mathbf{p}(t) = \mathbf{p}{org} + t\mathbf{d} $$
สูตรนี้คือคาถาหากินของ Game Programmer เลยครับ! โดยที่ $\mathbf{p}{org}$ คือจุดเริ่มต้น (Point), $\mathbf{d}$ คือเวกเตอร์ทิศทาง (Vector), และ $t$ คือตัวเลขสเกลาร์ (Scalar) ที่ทำหน้าที่เป็นตัวแปรพารามิเตอร์
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
ลองมาดูความเจ๋งของสมการ $\mathbf{p}(t) = \mathbf{p}_{org} + t\mathbf{d}$ กันครับ ถ้าเราแยกส่วนประกอบออกมา เราจะเห็นการทำงานร่วมกันของสิ่งที่เราเรียนไปในตอนก่อนๆ อย่างสมบูรณ์แบบ:
- $\mathbf{p}_{org}$ (Origin): คือ Point หรือพิกัดจุดเริ่มต้นของเรา
- $\mathbf{d}$ (Direction): คือ Vector เวกเตอร์การกระจัดที่บอกทิศทาง (มักจะทำ Normalization ให้เป็น Unit Vector)
- $t$ (Time / Distance): คือ Scalar เปรียบเสมือน “คันเร่ง” ถ้า $t$ มีค่าเพิ่มขึ้น จุด $\mathbf{p}(t)$ ก็จะขยับเลื่อนไปตามทิศทางลูกศร $\mathbf{d}$
ความมหัศจรรย์คือ เราสามารถควบคุม “ขอบเขต” ของเส้นได้เพียงแค่จำกัดค่า $t$ ครับ:
- ถ้า $t$ เป็นจำนวนจริงใดๆ ($-\infty < t < \infty$): มันคือ Line เส้นตรงที่ยาวไม่สิ้นสุด
- ถ้าเราระบุให้ $t \ge 0$: มันคือ Ray รังสีที่เริ่มต้นจาก $\mathbf{p}_{org}$ แล้วพุ่งไปข้างหน้าอย่างเดียว (ถ้า $t < 0$ คืออยู่ด้านหลังจุดกำเนิด)
- ถ้าเรากำหนดโดเมนให้ $0 \le t \le 1$: มันคือ Line Segment ที่เชื่อมระหว่างจุดเริ่มต้นและจุดปลายพอดี!
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
สมการพาราเมตริกเพียงบรรทัดเดียวนี้ ถูกนำไปประยุกต์ใช้ในเกมแบบนับไม่ถ้วนครับ ตัวอย่างที่ชัดเจนที่สุดคือ:
- Hitscan Weapons (ปืนเลเซอร์/สไนเปอร์): เมื่อผู้เล่นกดยิง เกมจะสร้าง Ray ขึ้นมาโดยให้ $\mathbf{p}_{org}$ คือตำแหน่งปลายกระบอกปืน และ $\mathbf{d}$ คือทิศทางที่กล้องหันไป จากนั้นเกมจะส่ง Ray นี้ออกไปในโลก 3 มิติเพื่อตรวจสอบว่ามันไปตัด (Intersect) กับ Hitbox ของศัตรูที่ค่า $t$ เท่าไหร่ ตัวที่ค่า $t$ น้อยที่สุด (ใกล้ที่สุด) คือผู้โชคร้ายที่โดนยิง!
- Line of Sight (ระบบสายตา AI): ศัตรูในเกมจะรู้ว่าเราซ่อนอยู่หลังกำแพงหรือไม่ โดยการยิง Ray จากตาของมันมาที่ตัวผู้เล่น ถ้าระหว่างทางที่ตัวแปร $t$ วิ่งมาหาเรา มันดันไปชนกับกำแพง (Triangle Mesh) เข้าเสียก่อน AI ก็จะมองไม่เห็นเราครับ
- UI & Mouse Picking: เวลาที่คุณเล่นเกมแนวสร้างเมือง (RTS) แล้วเอาเมาส์คลิกไปที่ยูนิตในโลก 3D เบื้องหลังคือเอนจินเกมจะยิง Ray จากกล้อง (Camera) วิ่งทะลุจอภาพตรงพิกเซลที่คุณคลิก ลงไปในโลก 3D เพื่อดูว่าชนกับอะไร
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
นอกจากเรื่องของเกมเพลย์แล้ว นิยามของ Ray ยังเป็นหัวใจระดับแกนกลางของเทคโนโลยีการเรนเดอร์ภาพที่สมจริงที่สุดในโลกอย่าง Ray Tracing ด้วยครับ!
ในกระบวนการ Ray Tracing พื้นฐาน เราจะกำหนดให้กล้อง (Camera/Eye) เป็นจุด $\mathbf{e}$ และยิง “Viewing Ray” ออกไปทะลุหน้าจอคอมพิวเตอร์ทีละพิกเซล สมการก็คือ $\mathbf{p}(t) = \mathbf{e} + t(\mathbf{s} - \mathbf{e})$ โดยที่ $\mathbf{s}$ คือพิกัดของพิกเซลบนหน้าจอ 2D เมื่อ Ray เส้นนี้พุ่งออกไปชนกับวัตถุแรกสุดในฉาก เราจะสามารถคำนวณหาสี แสงเงา (Shadow Rays) และการสะท้อน (Reflection) เพื่อนำสีนั้นกลับมาระบายลงบนพิกเซลบนหน้าจอของเราครับ! ทุกพิกเซลที่คุณเห็นในภาพยนตร์แอนิเมชันระดับโลก ล้วนเกิดจากการยิง Ray นับล้านๆ เส้นแบบนี้ทั้งสิ้น!
7. 🏁 บทสรุป (Level Cleared!)
เห็นไหมครับว่า สมการพาราเมตริกของเส้นตรงและรังสี $\mathbf{p}(t) = \mathbf{p}_{org} + t\mathbf{d}$ ที่ดูเรียบง่ายนี้ แท้จริงแล้วคือกระสุนเวทมนตร์แห่งโลกกราฟิกและ Game Logic มันคือสะพานเชื่อมระหว่างการควบคุมของผู้เล่น (คลิกเมาส์/ยิงปืน) กับปฏิกิริยาของโลก 3 มิติ!
แต่เดี๋ยวก่อน! การที่เรามี “กระสุน” พุ่งออกไปแล้ว มันจะไม่มีประโยชน์เลยถ้าคอมพิวเตอร์ไม่รู้ว่ากระสุนนั้นไป “ชน” กับเป้าหมายจริงๆ หรือไม่ ในตอนถัดไป เราจะนำ Ray ไปปะทะกับรูปทรงเรขาคณิตต่างๆ เพื่อหา “จุดตัด (Intersection)” และนั่นคือจุดเริ่มต้นของระบบ Collision Detection อันทรงพลัง! เตรียมตัวให้พร้อม แล้วพบกันใหม่ Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p