ตอนที่ 5: Dot Product: เลนส์วัดมุมและรากฐานแห่งแสงเงาในโลก 3 มิติ
1. 🎯 ตอนที่ 5: Dot Product: เลนส์วัดมุมและรากฐานแห่งแสงเงา
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับสู่โรงงานผลิตภาพในซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก ครับ
ในตอนที่แล้ว เราได้ลองเอา Vector ไปคูณกับตัวเลขธรรมดา (Scalar) เพื่อย่อ ขยาย หรือเพิ่มความเร็วกันไปแล้ว วันนี้พี่จะพาไปดูเวทมนตร์ขั้นกว่า นั่นคือการเอา “Vector มาคูณกับ Vector” ด้วยกันเอง! แต่เดี๋ยวก่อน… ในโลกของเวกเตอร์ การคูณไม่ได้มีแค่วิธีเดียวครับ วันนี้เราจะมาทำความรู้จักกับพระเอกตัวแรกของการคูณเวกเตอร์ ที่มีชื่อว่า Dot Product (ผลคูณจุด) หรือบางครั้งก็ถูกเรียกว่า Inner Product
ถ้า Matrix คือคาถาแปลงร่าง Dot Product ก็คือ “เลนส์เรดาร์สุดอัจฉริยะ” ที่ช่วยให้คอมพิวเตอร์ล่วงรู้ถึง “มุม” และ “ทิศทาง” ระหว่างวัตถุสองชิ้นได้ในพริบตา ถ้าไม่มี Dot Product โลกเกมของเราจะไม่มีระบบ Stealth (ลอบเร้น) ให้เราแอบหลังศัตรู และที่สำคัญที่สุด… โลกดิจิทัลของเราจะมืดมิดและแบนราบไร้แสงเงาโดยสิ้นเชิง! มันทำงานยังไง? หยิบแว่นตาเรดาร์ของคุณมาใส่ แล้วไปลุยกันเลยครับ!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
สมมติว่าเรามี Vector ในโลก 3 มิติสองตัวคือ $\mathbf{a}$ และ $\mathbf{b}$ การหาค่า Dot Product ในเชิงพีชคณิต (Algebra) นั้นง่ายจนน่าตกใจครับ เราแค่เอาตัวเลขในแกนเดียวกันมาคูณกัน แล้วจับทั้งหมดมาบวกกันจนกลายเป็นตัวเลขก้อนเดียว (Scalar) สูตรคือ: $$ \mathbf{a} \cdot \mathbf{b} = a_x b_x + a_y b_y + a_z b_z $$
ตัวอย่างเช่น ถ้า $\mathbf{a} = [4, 2, -1]$ และ $\mathbf{b} = [-1, 2, 2]$ ผลลัพธ์คือ $(4)(-1) + (2)(2) + (-1)(2) = -4 + 4 - 2 = -2$ เห็นไหมครับว่าผลลัพธ์เป็นแค่ตัวเลขธรรมดาๆ (Scalar) ไม่ใช่ลูกศรเวกเตอร์อีกต่อไป!
แต่เวทมนตร์ที่แท้จริงของ Dot Product ซ่อนอยู่ใน “สูตรทางเรขาคณิต (Geometric Formula)” ครับ นักคณิตศาสตร์ค้นพบว่า ตัวเลขที่เราบวกกันทื่อๆ ข้างบนนี้ มันมีความสัมพันธ์เชื่อมโยงกับ “มุม (Angle)” ระหว่างลูกศรสองเส้นนั้นอย่างลึกซึ้ง ผ่านสมการนี้:
$$ \mathbf{a} \cdot \mathbf{b} = |\mathbf{a}| |\mathbf{b}| \cos \theta $$
โดยที่ $|\mathbf{a}|$ และ $|\mathbf{b}|$ คือความยาว (Magnitude) ของเวกเตอร์ และ $\theta$ คือมุมที่อยู่ระหว่างเวกเตอร์ทั้งสองเส้นนั้น!
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
จากสูตรเรขาคณิตข้างต้น ถ้าเราย้ายข้างสมการนิดหน่อย เราจะสามารถใช้คอมพิวเตอร์คำนวณหามุม $\theta$ ระหว่างวัตถุสองชิ้นในโลก 3D ได้ทันที: $$ \cos \theta = \frac{\mathbf{a} \cdot \mathbf{b}}{|\mathbf{a}| |\mathbf{b}|} $$
แต่ในฐานะ Game Programmer บางครั้งเราก็ไม่ได้อยากรู้มุมเป๊ะๆ หรอกครับว่ามันกี่องศา เราแค่ต้องการ “จำแนกความสัมพันธ์” ระหว่างทิศทางสองทิศทาง ซึ่งเพียงแค่เรามอง “เครื่องหมาย (Sign)” ของผลลัพธ์ Dot Product เราก็จะรู้สถานการณ์ได้ทันที (เพราะฟังก์ชัน $\cos$ จะมีค่าเปลี่ยนไปตามช่วงมุม):
- ถ้า $\mathbf{a} \cdot \mathbf{b} > 0$ (เป็นบวก): มุม $\theta$ จะน้อยกว่า $90^\circ$ (Acute Angle) แปลว่าลูกศรทั้งสอง ชี้ไปในทิศทางเดียวกันโดยคร่าวๆ
- ถ้า $\mathbf{a} \cdot \mathbf{b} = 0$ (เป็นศูนย์): มุม $\theta$ จะเท่ากับ $90^\circ$ พอดีเป๊ะ! แปลว่าเวกเตอร์ทั้งสอง ตั้งฉากกัน (Orthogonal / Perpendicular) (นี่คือกฎเหล็กของการเช็คความตั้งฉากเลยครับ!)
- ถ้า $\mathbf{a} \cdot \mathbf{b} < 0$ (เป็นลบ): มุม $\theta$ จะมากกว่า $90^\circ$ (Obtuse Angle) แปลว่าลูกศรทั้งสอง หันหน้าสวนทางกันโดยคร่าวๆ
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
แล้วทฤษฎีนี้เอาไปทำอะไรในเกมล่ะ? นึกถึงเกมแนวลอบเร้น (Stealth) อย่าง Metal Gear Solid หรือเกมที่มี NPC คอยเดินตรวจตราดูสิครับ คอมพิวเตอร์จะรู้ได้อย่างไรว่า “ตัวละครผู้เล่น (Player) ยืนอยู่ด้านหน้า หรือแอบอยู่ด้านหลัง NPC?”
ขั้นตอนการใช้เวทมนตร์ Dot Product มีดังนี้ครับ:
- กำหนดให้ NPC ยืนอยู่ที่จุดตำแหน่ง (Point) $P$ และกำลังหันหน้าไปทางเวกเตอร์ทิศทาง (Vector) $\mathbf{v}$
- กำหนดให้ Player ยืนอยู่ที่จุดตำแหน่ง $X$
- เราจะสร้างเวกเตอร์ทิศทางจาก NPC ชี้ไปยัง Player (ตามกฎ Tip-to-tail จากตอนที่แล้ว: ปลายทาง ลบ ต้นทาง) จะได้เวกเตอร์ $\mathbf{d} = X - P$
- จับเวกเตอร์การมองเห็นของ NPC มา Dot กับ เวกเตอร์ตำแหน่งผู้เล่น: $\mathbf{v} \cdot \mathbf{d}$
ผลลัพธ์ที่ได้จะเป็นเลนส์วิเศษที่ตัดสินชะตาชีวิตผู้เล่นครับ!
- ถ้าผลลัพธ์ $> 0$ (เป็นบวก): Player อยู่ด้านหน้า NPC! (เตรียมตัวโดนจับได้เลย)
- ถ้าผลลัพธ์ $< 0$ (เป็นลบ): Player แอบอยู่ด้านหลัง NPC! (ปลอดภัย) เพียงแค่ใช้คณิตศาสตร์การคูณและบวกธรรมดาๆ เราก็สามารถสร้างระบบ AI การมองเห็นเบื้องต้นได้อย่างทรงพลังโดยไม่ต้องใช้สมการตรีโกณมิติที่กินทรัพยากรเครื่องเลยครับ!
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
เมื่อเราเจาะลึกเข้าไปใน Graphics Pipeline โดยเฉพาะส่วนของ Fragment/Pixel Shader… Dot Product คือเครื่องมือชิ้นเอกที่เสกให้วัตถุ 3 มิติเกิดความนูน ความลึก และมี “แสงเงา” อย่างสมจริงครับ!
ในธรรมชาติ ความสว่างของพื้นผิวจะแปรผันตามมุมที่แสงตกกระทบ ซึ่งอธิบายได้ด้วย Lambert’s Law (กฎของแลมเบิร์ต) กฎนี้บอกว่าพื้นผิวที่ตั้งฉากรับแสงตรงๆ จะสว่างที่สุด และจะค่อยๆ มืดลงเมื่อแสงตกกระทบแบบเฉียงๆ
เพื่อให้แสงเงาในเกมสมจริง โปรแกรมเมอร์จะกำหนดเวกเตอร์ 2 ตัว:
- $\mathbf{n}$ (Surface Normal): เวกเตอร์ยูนิต (ความยาว 1) ที่ตั้งฉากชี้พุ่งออกมาจากพื้นผิวโมเดล
- $\mathbf{l}$ (Light Vector): เวกเตอร์ยูนิต ทิศทางที่ชี้ไปยังหลอดไฟ
เมื่อจับสองเวกเตอร์นี้มา Dot กัน ($\mathbf{n} \cdot \mathbf{l}$) เนื่องจากความยาวของทั้งคู่คือ $1$ ผลลัพธ์ที่ได้จึงมีค่าเท่ากับ $\cos \theta$ พอดีเป๊ะ! (มีค่าตั้งแต่ $-1$ ถึง $1$)
- ถ้าแสงพุ่งลงมาตรงๆ ทับกับเส้น Normal พอดี ($\theta = 0^\circ$), $\mathbf{n} \cdot \mathbf{l} = 1$ (สว่าง 100%)
- ถ้าแสงส่องมาจากด้านข้างขนานกับพื้น ($\theta = 90^\circ$), $\mathbf{n} \cdot \mathbf{l} = 0$ (มืด 0%)
- ถ้าแสงมาจากด้านหลังโมเดล ($\theta > 90^\circ$), ค่าจะกลายเป็น ลบ
เพื่อป้องกันไม่ให้เกิดความสว่างแบบติดลบในจอภาพ (แสงดำ) เราจะใช้ฟังก์ชัน $\max(0, \mathbf{n} \cdot \mathbf{l})$ ครอบมันไว้ใน Shader เสมอครับ กระบวนการนี้เรียกว่า Diffuse Shading ซึ่งเป็นแกนกลางของระบบลงสีโมเดล 3D ทั่วโลก!
7. 🏁 บทสรุป (Level Cleared!)
เห็นไหมครับว่าเวทมนตร์ของคณิตศาสตร์มันน่าทึ่งแค่ไหน! จากการจับตัวเลขมาคูณกันง่ายๆ Dot Product กลายมาเป็นทั้งเรดาร์ตรวจจับศัตรู และเป็นรากฐานของการคำนวณแสงเงาที่ทำให้โลกสามมิติของเรามีชีวิตชีวาและมีมิติที่จับต้องได้
แต่การคูณเวกเตอร์ยังไม่จบแค่นี้ครับ ในตอนถัดไป เราจะไปทำความรู้จักกับพี่น้องของการคูณอีกตัวหนึ่งที่ซับซ้อนกว่า แต่ให้ผลลัพธ์ออกมาเป็น “เวกเตอร์ตัวใหม่” ที่ชี้ตั้งฉากสู่อวกาศ ซึ่งเวทมนตร์บทนั้นมีชื่อว่า “Cross Product” ครับ! เตรียมไม้กายสิทธิ์ของคุณไว้ให้ดี แล้วพบกันใหม่ Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p