ตอนที่ 6: Cross Product: เวทมนตร์สร้างแกนใหม่ รากฐานแห่งพื้นที่ผิวและการชน!
1. 🎯 ตอนที่ 6: Cross Product: สร้างแกนใหม่ในโลก 3 มิติ
2. 📖 เปิดฉาก (The Hook)
สวัสดีครับนักสร้างโลกจินตนาการทุกคน! ยินดีต้อนรับกลับสู่ซีรีส์ ปูพื้นฐานคณิตศาสตร์สู่โลกคอมพิวเตอร์กราฟิก กันอีกครั้งนะครับ
ในตอนที่แล้ว เราได้รู้จักกับเรดาร์วัดมุมอย่าง Dot Product ที่ให้ผลลัพธ์ออกมาเป็นตัวเลข (Scalar) กันไปแล้ว วันนี้พี่จะพาไปรู้จักกับ “พี่น้องร่วมสาบาน” ของมันที่มีชื่อว่า Cross Product (ผลคูณไขว้) หรือบางครั้งเรียกว่า Vector Product ครับ
ลองจินตนาการดูนะครับว่า ถ้าเราสร้างกำแพงหรือพื้นดินในเกมขึ้นมาแผ่นหนึ่ง เราจะบอกคอมพิวเตอร์ได้อย่างไรว่า “ด้านไหนคือด้านหน้า” และ “ด้านไหนคือด้านหลัง”? หรือถ้าตัวละครของเราวิ่งไปพุ่งชนกำแพง ระบบฟิสิกส์จะรู้ได้อย่างไรว่าต้องสะท้อนตัวละครกระเด็นออกมาในทิศทางไหน? คำตอบของเวทมนตร์เหล่านี้ ซ่อนอยู่ใน Cross Product ครับ! มันคือคาถาที่เอา Vector สองเส้นมาผสมกัน แล้วเสก “แกนใหม่” ที่ตั้งฉากชี้โด่งทะลุอวกาศขึ้นมา! พร้อมจะร่ายมนตร์บทนี้หรือยังครับ? ถ้าพร้อมแล้ว ไปลุยกันเลย!
3. 🧮 จากตัวเลขสู่กราฟิก (Math to Graphics Foundation)
Cross Product เป็นปฏิบัติการพิเศษที่มีเฉพาะในโลก 3 มิติเท่านั้นครับ (ใน 2D ไม่มี Cross Product แบบมาตรฐาน) โดยเมื่อเรานำ Vector สองตัวมา Cross กัน ผลลัพธ์ที่ได้จะกระโดดกลับมาเป็น “Vector เส้นใหม่” ที่ตั้งฉาก (Perpendicular/Orthogonal) กับ Vector ต้นทางทั้งสองเส้นเสมอ!
สมมติว่าเรามี $\mathbf{a} = [a_x, a_y, a_z]$ และ $\mathbf{b} = [b_x, b_y, b_z]$ สูตรพีชคณิตของ Cross Product หน้าตาอาจจะดูชวนมึนสักนิด แต่ในโค้ดคอมพิวเตอร์มันคำนวณเร็วมากครับ: $$ \mathbf{a} \times \mathbf{b} = \begin{bmatrix} a_y b_z - a_z b_y \ a_z b_x - a_x b_z \ a_x b_y - a_y b_x \end{bmatrix} $$
จุดระวังปราบเซียน: ต่างจากตัวเลขทั่วไปที่ $2 \times 3 = 3 \times 2$, ในโลกของ Cross Product การสลับที่จะทำให้ทิศทางของลูกศรกลับด้านทันที! (Anti-commutative) $$ \mathbf{a} \times \mathbf{b} = -(\mathbf{b} \times \mathbf{a}) $$
แล้วเราจะรู้ได้ยังไงว่าผลลัพธ์มันจะชี้ไปทางไหน? กราฟิกโปรแกรมเมอร์จะใช้ “กฎมือขวา (Right-Hand Rule)” เข้ามาช่วยครับ: กางมือขวาออก ชี้สี่นิ้วไปตามทิศของ $\mathbf{a}$ จากนั้นกำนิ้วทั้งสี่เข้าหา $\mathbf{b}$ นิ้วโป้งของคุณที่ชี้ตั้งฉากออกมา นั่นแหละครับคือทิศทางของ $\mathbf{a} \times \mathbf{b}$!
4. 📐 เจาะลึกเรขาคณิตและการประมวลผลภาพ (Geometry & Image Processing)
นอกจากทิศทางแล้ว “ความยาว (Magnitude)” ของ Vector ที่เกิดจาก Cross Product ยังมีความลับที่น่าทึ่งซ่อนอยู่ครับ นักคณิตศาสตร์พิสูจน์มาแล้วว่า ความยาวของมันสัมพันธ์กับค่า $\sin$ ของมุม $\theta$ ระหว่าง Vector สองเส้น: $$ |\mathbf{a} \times \mathbf{b}| = |\mathbf{a}| |\mathbf{b}| \sin \theta $$
และที่ว้าวไปกว่านั้นคือ ในทางเรขาคณิต ค่า $|\mathbf{a} \times \mathbf{b}|$ นี้ มีขนาดเท่ากับ “พื้นที่ของรูปสี่เหลี่ยมด้านขนาน (Area of Parallelogram)” ที่ถูกสร้างขึ้นจากความกว้างและความสูงของ Vector สองเส้นนั้นพอดีเป๊ะ!
และเนื่องจากรูปสามเหลี่ยม (Triangle) คือครึ่งหนึ่งของสี่เหลี่ยมด้านขนาน ดังนั้น หากเรามีจุดยอด (Vertices) ของสามเหลี่ยม 3 จุด เราจะสามารถหา “พื้นที่ของสามเหลี่ยม (Triangle Area)” ในโลก 3D ได้ง่ายๆ ด้วยสูตรนี้ครับ: $$ \text{Area} = \frac{1}{2} |\mathbf{e}_1 \times \mathbf{e}_2| $$ โดยที่ $\mathbf{e}_1$ และ $\mathbf{e}_2$ คือ Vector ขอบ (Edge) ของสามเหลี่ยมนั่นเอง!
5. 🎮 เวทมนตร์นี้ในโลกความจริง (Real-World Game Applications)
ใน Game Engine (เช่น Unity, Unreal) การทำ Cross Product คือหัวใจสำคัญของระบบหลายๆ อย่างครับ:
- การหา Normal Vector (เวกเตอร์ตั้งฉากพื้นผิว): พื้นผิวทุกแผ่นในเกมประกอบขึ้นจากสามเหลี่ยม (Polygon) เพื่อจะบอกว่าสามเหลี่ยมนี้ “หันหน้า” ไปทางไหน เราต้องสร้างลูกศรชี้ตั้งฉากออกมาจากพื้นผิว เราเรียกมันว่า Normal Vector ($\mathbf{n}$) ซึ่งหาได้จากการนำขอบของสามเหลี่ยมมา Cross กัน: $\mathbf{n} = \mathbf{e}_1 \times \mathbf{e}_2$ ลูกศรนี้คือพระเอกที่จะบอกว่ากำแพงอยู่ทิศไหน
- ระบบการชนและฟิสิกส์ (Collision Detection & Physics): ตอนที่กล่องสองใบวิ่งมาชนกัน ระบบจะใช้เทคนิคที่เรียกว่า Method of Separating Axes (SAT) ซึ่งต้องการแกนทดสอบเพื่อดูว่าวัตถุซ้อนทับกันหรือไม่ แกนเหล่านั้นก็เกิดจากการเอา Normal Vector ของพื้นผิว หรือแม้แต่เอา Edge ของกล่องมา Cross Product กัน เพื่อหาว่าทิศทางไหนที่จะใช้ผลักกล่องให้กระเด็นออกจากกัน (Collision Response)
- Backface Culling (การซ่อนพื้นผิวด้านหลัง): เพื่อประหยัดทรัพยากร GPU จะไม่วาดสามเหลี่ยมที่หันหลังให้กล้อง มันจะเอา Normal Vector (ที่ได้จาก Cross Product) มาทำ Dot Product กับมุมกล้อง ถ้าผลลัพธ์ชี้ไปคนละทาง คอมพิวเตอร์ก็แค่ข้ามการวาดสิ่งนั้นไปเลย!
6. 🏭 เปิดโรงงานผลิตภาพ (The Graphics Pipeline)
เมื่อเจาะลึกเข้าไปใน Graphics Pipeline โดยเฉพาะในขั้นตอน Rasterization และ Pixel Shader… Normal Vector ที่เราได้จาก Cross Product จะถูกส่งต่อเข้าไปเป็นหัวใจหลักในการคำนวณแสง (Lighting Calculation) ครับ
ลองนึกถึงทฤษฎีแสงของลุง Lambert (Lambertian Shading) จากตอนที่แล้วสิครับ แสงจะสว่างแค่ไหนขึ้นอยู่กับมุมระหว่างแสงและพื้นผิว ถ้าไม่มี Cross Product เราจะไม่มีทางรู้เลยว่าพื้นผิวแต่ละโพลิกอนนั้นตั้งฉากเอียงไปทางไหน ยิ่งไปกว่านั้น ในเทคนิคระดับสูงอย่าง Bump Mapping หรือ Normal Mapping (การทำให้พื้นผิวดูขรุขระโดยไม่ต้องเพิ่มโพลิกอนจริง) เราต้องใช้ Cross Product ในการสร้างระบบพิกัดจำลองบนพื้นผิวที่เรียกว่า Tangent Space (ประกอบด้วยแกน Normal, Tangent และ Binormal) เพื่อหลอก GPU ให้แสงสะท้อนออกมาตามความขรุขระของ Texture ราวกับมีเวทมนตร์เลยล่ะครับ!
7. 🏁 บทสรุป (Level Cleared!)
เคลียร์ไปอีกหนึ่งด่านครับ! ตอนนี้เราได้เรียนรู้แล้วว่า Cross Product ไม่ใช่แค่สูตรคูณเวกเตอร์ที่ให้ผลลัพธ์หน้าตาประหลาด แต่มันคือ “เครื่องมือสร้างแกน 3 มิติแกนใหม่” ที่ช่วยให้คอมพิวเตอร์รู้จักคำว่า “การตั้งฉาก” รู้จัก “พื้นที่” และช่วยให้ระบบฟิสิกส์ในเกมรู้ว่าวัตถุชนกันในทิศทางใด
เราปูพื้นฐานเรื่อง Vector มาอย่างครบถ้วนแล้ว ในตอนหน้า ซีรีส์ของเราจะก้าวเข้าสู่อีกหนึ่งโครงสร้างที่ทรงพลังที่สุดในจักรวาลกราฟิก สิ่งนั้นเปรียบเสมือน “ตารางคาถา” ที่สามารถเสกโมเดลให้ย้ายที่ ย่อขยาย หรือหมุนตีลังกาได้ในพริบตาเดียว… สิ่งนั้นเรียกว่า “Matrix” ครับ! เตรียมตัวให้พร้อม แล้วพบกันในตอนหน้า Level Cleared!
สนใจพูดคุยแลกเปลี่ยนเทคนิคการพัฒนาเกม คอมพิวเตอร์กราฟิก หรือออกแบบระบบซอฟต์แวร์? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p