วันอาทิตย์ที่ 2 พฤศจิกายน พ.ศ. 2557

Irrlicht Engine:: 5. Movement ภาคพิเศษ

Ninja
ตอนที่ 5  นี้้ดัดแปลงมาจากตอนที่ 4 (ตอนนี้ผมลองมั่วอย่างมีหลักการเอง...  )  โดยเอาโมเดลลูกบอล  และกล่องออกไป เปลี่ยนการควบคุม ไปที่นินจา โดยใช้ความรู้จากตอนที่ 1 ในการโหลดโมเดล และเชื่อม โมเดลเข้ากับโหนด จากนั้นกำหนดคุณสมบัติของโมเดลเช่น ขนาด  ตำแหน่ง แสง การหมุน  การแสดง เฟรมของภาพ ความเร็วของการแสดงเฟรม (Frame rate)  ผ่านทางโหนด
โมเดล  B3D  นินจา มีทั้งหมด 300 เฟรม ดูได้จากเอกสารประกอบ  ninja animation ranges.txt  ในตัวอย่าง  นี้จึงกำหนดให้แสดงตั้งแต่เฟรมที่ 0-300   การควบคุมเหมือนตอนที่ 4 ทุกอย่าง

Irrlicht Engine:: 4. Movement

Movement

ใน ตอนที่ ๔ นี้จะอธิบายการทำงานของโปรแกรมตัวอย่างใน Irrlicht Engine เรื่อง  Movement  ซึ่งเป็นการ ควบคุมการเคลื่อนไหวของโมเดล 3D  ทั้งแบบตั้งให้เคลื่อนไหวตามฟังก์ชั่นที่กำหนดไว้  และการเคลื่อนไหว
ตาม การกดคีย์บอร์ด   เราสามารถเลื่อนจุดสังเกตุ (กล้อง) ไปมาโดยใช้เมาส์  และ up/down/left/right  Arraow  ออกจากโปรแกรมโดยใช้ Alt+F4
ในตัว โปรแกรมจะกำหนดให้การเคลื่อนของลูกบอลขึ้นกับการกดคีย์  W, S, A ,D   โดยเราต้องสร้าง class MyEventReceiver  ซึ่งดีไรฟ์ จาก class  IEventReceiver ของ Irrlicht Engine  เอาไว้จับสถานะการกดคีย์บอร์ด 
ในการทำงานจะต้องสร้างโปรเจ็คใหม่ แล้วก็อปปี้ไฟล์บางส่วนมาจาก Irrlicht Engine
  
ไฟล์ที่ ก็อปปี้จาก Irrlicht Engine
นินจา  ninja.b3d , nskinrd.jpg , nskinbl.jpg -> จากโฟลเดอร์  ..\irrlicht-1.7.1\media
กล่อง  t351sml.jpg-> จากโฟลเดอร์  ..\irrlicht-1.7.1\media
ลูกบอล wall.bmp-> จากโฟลเดอร์  ..\irrlicht-1.7.1\media
Irrlicht Logo  irrlichtlogoalpha2.tga-> จากโฟลเดอร์  ..\irrlicht-1.7.1\media
main.cpp  ->จากโฟลเดอร์  ..\irrlicht-1.7.1\examples\04.Movement

Runtime Library
Irrlicht.dll  -> จากโฟลเดอร์  ..irrlicht-1.7.1\bin\Win32-gcc\..   เอาไปเก็บที่   c:\window\system32

ตั้งค่า Linker และ  Search Directory  ตามขั้นตอนดังแสดงในตอนที่ ๑ เพื่อให้ Compiler ของ  Code::Blocks
หาไลบราลี่และ เฮดเดอร์ไฟล์เจอ

ขั้นตอนการทำงานคร่าวๆ
1. สร้าง class  MyEventReceiver เอาไว้จับสถานะการกดคีย์บอร์ด
2. เลือก ระบบการแสดงผล OpenGL   DirectX ...
3. ต้องสร้างอ๊อบเจ็ค  device  พร้อมทั้งสร้างวินโดว์
4. สร้างพอย์เตอร์เข้าหาฟังก์ชั่นต่างๆเตรียมไว้ใช้งาน เช่น โหลดโมเดล  ...
5. โหลดข้อมูลโมเดล  B3D ที่เก็บโมเดลนินจา
6. สร้าง node ให้กับโมเดลที่โหลดมา ต่อไปจะติดต่อกับโมเดลนั้นผ่าน node ที่กำหนด
7. ย้ายโมเดลไปอยู่ที่ตำแหน่งพิกัดที่ต้องการ
8. เลือกใช้กล้องแบบ FPS
9.ไม่แสดงเมาส์เคอร์เซอร์
10. เข้าลูปแสดงผล
11. ยกเลิก อ๊อบเจค device เลิกการทำงาน

** รายละเอียดของคำสั่ง ดูจากเอกสารที่ติดมากับ  Irrlicht Engine ***

Irrlicht Engine:: 3. Quake3Map


ใน ตอนที่ ๓ นี้จะอธิบายการทำงานของโปรแกรมตัวอย่างใน Irrlicht Engine เรื่อง Quake3Map ซึ่งเป็นการ แสดงโมเดล 3D แบบ  Quake3Map  เป็นรูปปราสาท เราสามารถเลื่อนจุดสังเกตุ (กล้อง) ไปมาโดยใช้เมาส์
และ up/down/left/right  Arraow   ออกจากโปรแกรมโดยใช้ Alt+F4
โมเดล แบบ  Quake3Map จะเป็นโมเดลแบบอยู่นิ่งๆ เช่น บ้าน อาคาร โดยข้อมูลจะมีแค่ เฟรมเดียว ภายในข้อมูลบรรจุ รูปทรงเรขาคณิต และข้อมูล material  รูปภาพ เทกเชอร์..
ในการทำงานจะต้องสร้างโปรเจ็คใหม่ แล้วก็อปปี้ไฟล์บางส่วนมาจาก Irrlicht Engine
ไฟล์ที่ ก็อปปี้จาก Irrlicht Engine
map-20kdm2.pk3 -> จากโฟลเดอร์  ..\irrlicht-1.7.1\media โมเดลปราสาท
main.cpp  ->จากโฟลเดอร์  ..\irrlicht-1.7.1\examples\02.Quake3Map

Runtime Library
Irrlicht.dll  -> จากโฟลเดอร์  ..irrlicht-1.7.1\bin\Win32-gcc\..   เอาไปเก็บที่   c:\window\system32

ตั้งค่า Linker และ  Search Directory  ตามขั้นตอนดังแสดงในตอนที่ ๑ เพื่อให้ Compiler ของ  Code::Blocks
หาไลบราลี่และ เฮดเดอร์ไฟล์เจอ

ขั้นตอนการทำงานคร่าวๆ
1. เลือก ระบบการแสดงผล OpenGL..  DirectX ...
2. ต้องสร้างอ๊อบเจ็ค  device  พร้อมทั้งสร้างวินโดว์
3. สร้างพอย์เตอร์เข้าหาฟังก์ชั่นต่างๆเตรียมไว้ใช้งาน เช่น โหลดโมเดล  ...
4. โหลดไฟล์ี่แบบ  Quake3map ที่เก็บโมเดลที่จะแสดง ซึ่งเป็น zip file แบบหนึ่ง (.pk3) เข้าระบบก่อน
5. โหลดข้อมูลโมเดล
6. สร้าง node ให้กับโมเดลที่โหลดมา ต่อไปจะติดต่อกับโมเดลนั้นผ่าน node ที่กำหนด
7. ย้ายโมเดลไปอยู่ที่ตำแหน่งพิกัดที่ต้องการ
8. เลือกใช้กล้องแบบ FPS
9.ไม่แสดงเมาส์เคอร์เซอร์
10. เข้าลูปแสดงผล
11. ยกเลิก อ๊อบเจค device เลิกการทำงาน

Irrlicht Engine:: 2. HelloWorld อีกที

ดาวน์โหลด Source Code

อธิบายการทำงานของ โค๊ด
คำสั่งของ Irrlicht Engine แบ่งออกเป็น 5 กลุ่มตามลักษณะการทำงานและถูกกำหนดไว้ภายใต้  เนมสเปซ  core , gui , io , scence, video โดยที่เนมสเปซ ทั้ง  5  อยู่ภายใต้เนมสเปซใหญ่สุดคือ  irr หน้าที่ของแต่ละคำสั่ง
ภายใต้ เนมสเปซมีดังนี้
irr
เนมสเปซ อันดับพื้นฐานสุด เป็นทางเข้าหา คำสั่งในเนมสเปซ อื่นๆ
irr::coreคำสั่งทั่วไป เช่น  vectors, planes, arrays, lists ..
irr::guiคำสั่งที่ทำหน้าที่  graphical user interface
irr::ioคำสั่งที่ทำหน้าที่   input/output: Reading and writing files, accessing zip archives, xml files, ..
irr::sceneโหลดโมเดล , special scene nodes like octrees and billboards, ..
irr::videovideo driver. All 2d and 3d rendering is done here

ขั้นตอนการทำงานคร่าวๆ
1. ต้องสร้างอ๊อบเจ็ค  device  พร้อมทั้งสร้างวินโดว์
2. กำหนด  วินโดว์ caption(อักษรปรากฏบนกรอบวินโดว์)
3. สร้างพอย์เตอร์เข้าหาฟังก์ชั่นต่างๆเตรียมไว้ใช้งาน เช่น โหลดโมเดล  เทกเชอร์  สร้างแถบอักษร ...
4. แสดงแถบอักษร
5. โหลดโมเดล
6. สร้าง node ให้กับโมเดลที่โหลดมา ต่อไปจะติดต่อกับโมเดลนั้นผ่าน node ที่กำหนด
7. กำหนดคุณสมบัติอื่นๆของ node เช่น แสง ...
8. โหลดเทกเชอร์ให้กับ node
9. กำหนดจุดตั้งกล้อง และจุดมองไปของกล้อง
10. เข้าลูปแสดงผล
11. ยกเลิก อ๊อบเจค device เลิกการทำงาน

Irrlicht Engine:: 1. HelloWorld

เพื่อให้เข้าใจการทำงานของ Irrlicht Engine ยิ่งขึ้น เราจะใช้ Code::Blocks  สร้างโปรเจ็คใหม่ชื่อว่า HelloWorld   แล้วทำการก็อปปี้ไฟล์ที่เกี่ยวข้องดังที่กล่าวจากตอนที่ผ่านมาไปที่โฟลเดอร์ ที่เก็บโปรเจ็คใหม่ แล้วทำการดัดแปลง Source code เล็กน้อย
ไฟล์ที่ ก็อปปี้
sydney.bmp -> จากโฟลเดอร์  ..\irrlicht-1.7.1\media\..  เป็น Texture สำหรับ โมเดล sydney.md2
sydney.md2 ->จากโฟลเดอร์  ..\irrlicht-1.7.1\media\..   เป็นไฟล์ที่เก็บโมเดล sydney.md2 น้องหนูเสื้อดำ !!
main.cpp  ->จากโฟลเดอร์  ..\irrlicht-1.7.1\examples\01.HelloWorld\..
Runtime Library
Irrlicht.dll  -> จากโฟลเดอร์  ..irrlicht-1.7.1\bin\Win32-gcc\..   เอาไปเก็บที่   c:\window\system32
ตั้ง ค่า Linker และ  Search Directory  ตามขั้นตอนดังแสดงในรูปต่อไปนี้เพื่อให้ Compiler ของ  Code::Blocks หาไลบราลี่และ เฮดเดอร์ไฟล์เจอ
1. เลือก Properties
CodeBlock1

Irrlicht Engine:: แนะนำ

จาก ประสบการณ์แบบว่า..มือใหม่หัดขับของผมเองครับ .. กว่าจะอ่าน..ทำความเข้าใจ..สร้างและแสดงภาพ 3D ได้ซักภาพ โดยการเขียนโค๊ดเอง  เอาแค่เฉพาะการทำความเข้าใจภาษา  C++ เอง  ก็แทบอ๊วก  ไหนจะต้องทำความเข้าใจ กับ OpenGL ซึ่งหาหนังสือภาษาไทยอ่านมีน้อยมาก  เว็บภาษาไทยที่อธิบายเป็นเรื่องเป็นราวก็ไม่มี  นี่ยังไม่รวม การศึกษาพวกโปรแกรม 3D เช่น Maya..Blender..3ds Max... ซึ่งส่วนมากก็สอนเฉพาะการขึ้นรูปโมเดล  แต่ไม่ได้บอกว่าเอามาใช้ในเกมส์ได้อย่างไร
การใช้ เกมส์เอนจิ้น จะช่วยให้มือใหม่เรียนรู้ได้ง่ายขึ้น  เกมส์เอนจิ้นมีอยู่หลายค่าย ซึ่งผมเองก็ไม่เคยใช้มาก่อนเลย.. ..   มีทั้งแบบที่เป็นของฟรีและที่ต้องซื้อต้องหา  เหตุที่ลองใช้  Irrlicht Engine เพราะว่าเขียนด้วย  C++ และมีลักษณะเป็น ไลบราลี่ซึ่งมีฟังก์มากมายให้เลือกใช้ ทำให้สามารถนำมาประยุกต์ใช้ กับการเขียนเกมส์ด้วย  C++ ที่กำลังเรียนรู้ด้วยตนเอง อยู่พอดี กะอยู่ว่าลองๆใช้ไป แล้วจะก๊อปปี้ซะเลย... ซึ่งเจ้าของก็ไม่หวงซะด้วย  
เพื่อไม่เป็นการชักช้าเสียเวลา  ดาวน์โหลด Irrlicht Engine ที่  irrlicht.sourceforge.net จะได้ Zip file ทำการแตกไฟล์ จะได้โฟลเดอร์  irrlicht-1.7.1 (ข้อมูลวันที่  9 เมษายน 2553)  เก็บไว้ไดรฟ์ ไหนก็ได้ของผมเก็บไว้ที่  c:\irrlicht-1.7.1    ภายในประกอบด้วย โฟลเดอร์
bin....   เก็บไฟล์    .exe   ของไฟล์ตัวอย่างจาก  examples มีให้เลือกหลายระบบ  -> เราจะใช้  win32-gcc
doc..   เก็บไฟล์  html
examples...  เก็บ source code ตัวอย่าง
include..  เก็บ เฮดเดอร์ไฟล์    xxx.h
lib...   เก็บ ไลบราลี่ มีให้เลือกหลายระบบ ->เราจะใช้  win32-gcc
media... เก็บข็อมูลมีเดีย เช่น รูปภาพ  โมเดลต่างๆ
source.. เก็บ source code ของ Irrlicht
tools... ตัวอย่างเครื่องมือต่างๆ
win32-gcc   ??  ไม่มีอะไร

ใช้ Code::Blocks เปิดโปรเจ็ค  ใน  examples/01.HelloWorld/HelloWorld.cbp   -> Compile -> Run    จะได้ภาพดังน้องหนูเสื้อดำดังรูป .. อะจึ๋ย !!

เพื่อ ให้เข้าใจการทำงานของ Irrlicht Engine ยิ่งขึ้น เราจะใช้ Code:::Blocks  สร้างโปรเจ็คใหม่ แล้วทำการก็อปปี้ ไฟล์ที่เกี่ยวข้องของ Hello World ไปที่โปรเจ็คใหม่ แล้วทำการดัดแปลง  Source code เล็กน้อย ดังจะแสดงในตอน ต่อไป ..

วันเสาร์ที่ 1 พฤศจิกายน พ.ศ. 2557

Math 3D:: 2. Quaternion

Quaternion เป็นคณิตศาสตร์เลขเชิงซ้อน ที่ถูกนำมาใช้งานใน การหมุน ภาพในระบบ 3D เนื่องด้วยความง่าย กระทัดรัด และวิธีการที่ต้องบอกว่าพิศดาร ไม่เยิ่นเย้อยุ่งยาก เหมือนการหมุนโดยวีธีการของ Matrix  แต่ว่าเป็นวิชาคณิตศาสตร์ที่ทำความเข้าใจยาก มองภาพไม่ค่อยออกว่ามาได้ยังไง...     บทความนี้จะใช้หลักการกฏมือขวาในการอธิบาย Quaternion  เพื่อ ให้เข้ากับ OpenGL ที่ใช้กฏมือขวาในการหมุนเหมือนกัน  ถ้าไปเจอบทความอื่นที่ใช้กฏมือซ้าย ก็อย่าแปลกใจที่เจอว่าเทอมต่างๆ อยู่สลับที่สลับทาง  กับที่ได้อธิบายในบทความนี้
quaternion

เทอมของ quaternion เขียนได้ดังนี้
q  =  w  +  x i   +   yj   +  zk      i , j , k  เป็นเลขเชิงซ้อน หนึ่งหน่วย     w,x,y,z เป็นจำนวนจริง

พิจารณาจากเวคเตอร์หนึ่งหน่วย  Quaternion มีกฏกติกามารยาทดังนี้  
i =   j2  =  k =   i j k   =   -1
 ij = k  ;   ji = -k
 jk = i  ;   kj = -i
 ki =j   ;  ik = -j
เวลาใช้งานจริงเราจะมองว่า  x,y,z  คือแกนการหมุน  ค่า w จะสัมพันธ์กับมุมที่จะหมุน   กล่าวโดยรวมๆ คือ Quaternion คือ มือหมุนนั่นเอง แต่ว่ายังมีเงื่อนไขอื่นๆเพิ่มเติมที่ต้องรู้ก่อนการใช้งาน   ก่อนที่จะแสดงการใช้งาน quaternion นี้เรามาศึกษากฏกติกาเพิ่มเติมอีกซักเล็กน้อย โดยเฉพาะการคูณ