การแสดงผลแอนิเมชันจากฐาน...

การแสดงผลแอนเมชนจากฐานขอมลการจบความเคลอนไหวออนไลน

Online Animation Displaying from Motion Capture Database

การแสดงผลแอนเมชนจากฐานขอมลการจบความเคลอนไหวออนไลน

Online Animation Displaying from Motion Capture Database

ชลธศ เถาทอง

การคนควาอสระเปนสวนหนงของการศกษาตามหลกสตร วทยาศาสตรมหาบณฑต สาขาวชาเทคโนโลยสารสนเทศและการจดการ

มหาวทยาลยกรงเทพ ปการศกษา 2558

©2559 ชลธศ เถาทอง สงวนลทสทธ

ชลธศ เถาทอง. ปรญญาวทยาศาสตรมหาบณฑต สาขาวชาเทคโนโลยสารสนเทศและการจดการ, พฤศจกายน 2559, บณฑตวทยาลย มหาวทยาลยกรงเทพ. การแสดงผลแอนเมชนจากฐานขอมลการจบความเคลอนไหวออนไลน (67 หนา) อาจารยทปรกษา: ผชวยศาสตราจารย ดร.วรวฒน เชญสวสด

บทคดยอ

ปจจบนไดมการน าเอาเทคโนโลยการจบความเคลอนไหวหรอโมชนแคปเจอรมาใชในการสรางตวละครแอนเมชนใหมความสมจรง ซงเทคโนโลยดงกลาวเปนการใหนกแสดงมาสวมใสชดทมเซนเซอรตดไวเพอบนทกการเคลอนไหวของนกแสดง ท าใหตวละครแอนเมชนมการเคลอนไหวทเหมอนจรงตามการเคลอนไหวของนกแสดง นอกจากนเทคโนโลย Motion Capture ยงถกน ามาประยกตใชในงานอกหลากหลายวงการ ถงแมวาปจจบนไดมการจดท าฐานของขอมลโมชนแคปเจอร ใหใชจ านวนมากแตการเปดดการเคลอนไหวของไฟลบนทกความเคลอนไหวนน ๆ ยงมความยงยากพอสมควรซงตองท าการดาวนโหลดไฟลขอมลทบนทกความเคลอนไหว และดาวนโหลดโปรแกรมทใชแสดงผล จงสามารถใชงานได ซงใชเวลาพอสมควรในการแสดงผลไฟลขอมลนน ๆ

งานวจยนไดน าเสนอเทคนคในการพฒนาโปรแกรมทสามารถแสดงผานเวบเบราเซอรของไฟลขอมลบนทกความเคลอนไหวบนเซรฟเวอรในลกษณะของแอนเมชนสามมตทมการเคลอนไหวทเสมอนจรงเพอตอบสนองความตองการของผใชในดานความสะดวกสบายและความรวดเรวในการใชงาน ผวจยไดท าการพฒนาระบบแสดงผลบน 3 แพลตฟอรมทนยมใชในการแสดงกราฟก 3 มตผานเวบ ซงไดแก Web 3D, Flash และ Unity 3D และไดเปรยบเทยบผลลพธของทงสามระบบทงในแงของความสมจรง ความปลอดภยของขอมล และการน าไปใชจรง

ค ำส ำคญ: กำรตรวจจบควำมเคลอนไหว, ตวละครแอนเมชน, ไฟลขอมลบนทกควำมเคลอนไหว, เวบสำมมต

Thaothong, C. M.S. (Information Technology and Management), November 2016, Graduate School, Bangkok University. Online Animation Displaying from Motion Capture Database (67 pp.) Advisor: Asst.Prof.Worawat Choensawat, Ph.D.

ABSTRACT

Nowadays, utilizing a motion capture technology known as MoCap can help animators creating the realistic character animation. By using markers or sensors attached to a human body, the motion capture system can capture the movement of real actors for using in the animation process. This is be because MoCap data provides accurate and semantically rich data. So far, several free MoCap databases have been provided on the Internet such as CMU database. However, for users to find their desired motion, they have to download the motion data and then use third party software to display the downloaded motion which is time-consuming and difficulties in work.

This research presents in the technical development program. That can generate animation character from motion capture database on the server. Users can visual 3D animation of the actual movement contains in motion capture data over the internet via any standard web browsers. Researchers have developed a display system on three popular platform used to display 3D graphics over the Web, which is the Web 3D, Flash and Unity 3D and compare the results of the three systems in terms of realism. Information security and implementing.

Keywords: Motion Capture, Animation Character, Motion Capture Database, Web 3D

ฉ

กตตกรรมประกาศ

การคนควาอสระในครงน ส าเรจลลวงไดดวยความกรณาจาก ผชวยศาสตราจารย ดร.วรวฒน

เชญสวสด อาจารยทปรกษาการคนควาอสระและ ผชวยศาสตราจารย ดร.กงกาญจน สขคณาภบาลซงไดใหความร การชแนะแนวทาง การศกษา ตรวจทานและแกไขขอบกพรองในงาน ตลอดจนการใหค าปรกษาซงเปนประโยชน ในการวจยจนงานวจยครงนมความสมบรณครบถวนส าเรจไปไดดวยด รวมถงอาจารยทานอน ๆ ทไดถายทอดวชาความรให และสามารถน าวชาการตาง ๆ มาประยกตใชในการศกษาวจยครงน ผวจยจงขอกราบขอบพระคณเปนอยางสง มาไว ณ โอกาสน

ชลธศ เถาทอง

ช

สารบญ

หนา บทคดยอภาษาไทย ง

บทคดยอภาษาองกฤษ จ

กตตกรรมประกาศ ฉ

สารบญตาราง ฌ

สารบญภาพ ญ

บทท 1 บทน า

1.1 ความเปนมาและความส าคญของปญหา 1

1.2 วตถประสงคของการวจย 2

1.3 ขอบเขตของงานวจย 3

1.4 ค าถามของงานวจย 4

1.5 ประโยชนทคาดวาจะไดรบ 4

1.6 ค านยามศพทเฉพาะ 4

บทท 2 ทฤษฎทเกยวของ

2.1 ตวละครแอนเมชน (Character Animation) 5

2.2 การตรวจจบความเคลอนไหว (Motion Capture) 6

2.3 รปแบบไฟลบนทกขอมลความเคลอนไหว (Motion Captue Data Format) 9

2.4 เวบ 3 มต (Web 3D) 15

2.5 โปรแกรมส าหรบพฒนาทใชในการอานไฟลขอมลบนทกความเคลอนไหว 16 และโปรแกรมทใชในการแสดงผลบนเวบไซตแบบสามมต

2.6 ความปลอดภยของขอมล 20

บทท 3 วธการด าเนนงานการวจย

3.1 ขนตอนการด าเนนงานวจย 22

3.2 เครองมอทใชในการศกษา 23

3.3 สถาปตยกรรมของระบบ 23

3.4 การออกแบบหนาจอการใชงาน 26

3.5 การปองกนความปลอดภยของไฟลจบความเคลอนไหว 27

3.6 การพฒนาระบบบนแพลตฟอรม Unity 3D 28

3.7 การพฒนาระบบบนแพลตฟอรม Flash 29

ซ

สารบญ (ตอ)

หนา บทท 4 ผลการด าเนนงาน

4.1 การเรมตนการใชงานระบบ BVH Player 31

4.2 หนาจอการแสดงผลตวละครแอนเมชน 3 มต 32

4.3 การใชงานหนาจอแสดงผลแอนเมชน 3 มต 33

4.4 เกณฑการใหคะแนนของแบบประเมน 40

4.5 สรปผลความพงพอใจของระบบ 41

บทท 5 สรปผล อภปรายผล และขอเสนอแนะ

5.1 สรปผลการศกษา 43

5.2 อภปรายผล 44

5.3 ปญหาของระบบ 45

5.4 แนวทางแกปญหา 46

5.5 ขอเสนอแนะ และแนวทางการพฒนาตอ 46

บรรณานกรม 47

ภาคผนวก ก หนงสอยนยอมเขารวมการวจย 49

ภาคผนวก ข แบบประเมนความพงพอใจของระบบ 51

ภาคผนวก ค JavaScript Source Code For BVH File Parsing 54

ประวตผเขยน 67

เอกสารขอตกลงวาดวยการอนญาตใหใชสทธในรายงานการคนควาอสระ

ฌ

สารบญตาราง หนา

ตารางท 1.1: ฟอรแมตทใชในการเคลอนไหว 2 ตารางท 2.1: เปรยบเทยบขอดและขอเสยการบนทกความเคลอนไหวเมอใชในงานแอนเมชน 8 ตารางท 2.2: รปแบบไฟลขอมลบนทกความเคลอนไหว (Motion Capture File Format) 10 ตารางท 4.1: แสดงระดบผลการประเมนความพงพอใจของระบบ 40 ตารางท 4.2: แสดงระดบผลการประเมน 41 ตารางท 4.3: แสดงแบบประเมนความพงพอใจของระบบ 41 ตารางท 4.4: ตารางสรปผลการประเมนความพงพอใจของระบบ 42 ตารางท 5.1: การเปรยบเทยบโปรแกรมทใชในการพฒนาระบบ 44

ญ

สารบญภาพ

หนา ภาพท 2.1: การใชเทคโนโลยตรวจจบความเคลอนไหวในการพฒนาเกมสกฬา (EA-Sport Game) 6 ภาพท 2.2: ตวอยางโครงสรางกระดกของรปแบบไฟล BVH 11 ภาพท 2.3: เปนภาพโครงสรางแบบล าดบชนของสวนตาง ๆ ของรางกายของไฟลบนทกความ 12 ภาพท 2.4: ตวอยางโคดสวน Header ของไฟลบนทกความเคลอนไหวรปแบบ BVH 13 ภาพท 2.5: ตวอยางโคดสวน Body ของไฟลบนทกความเคลอนไหวรปแบบ BVH 14 ภาพท 2.6: ภาพตวอยางละครสามมตและโครงกระดกทใชควบคมการเคลอนไหว 15 ภาพท 2.7: เวบจแอล (WebGL: Web Graphics Library) 16 ภาพท 2.8: ตวอยางโปรแกรมส าหรบการแสดงผลจากไฟลบนทกการเคลอนไหว ในภาษา C++ 17 ภาพท 2.9: ตวอยางการน าไฟลบนทกความเคลอนไหวมาใสในตวละครในโปรแกรม Unity 3D 18 ภาพท 2.10: หนาจอการท างานของโปรแกรม NetBeans IDE 8.1 19 ภาพท 2.11: ตวอยางโปรแกรมการแสดงผลแอนเมชนทพฒนาโดยใช NetBeans IDE 8.1 20 ภาพท 2.12: ตวอยาง URL ทถกเขารหสแลว 21 ภาพท 3.1: วธการสรางไฟลบนทกความเคลอนไหวแบบ BVH 24 ภาพท 3.2: Flow Chart ของระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหว 25 ภาพท 3.3: Flow Chart การใชงานระบบแสดงผลอนเมชนจากไฟลบนทกความเคลอนไหว 25 ภาพท 3.4: ฐานขอมลการตรวจจบความเคลอนไหว 26 ภาพท 3.5: หนาจอแสดงผลแอนเมชนจากไฟลการตรวจจบความเคลอนไหว 27 ภาพท 3.6: เครองมอ Avatar Configuration 27 ภาพท 3.7: เครองมอ Animator 28 ภาพท 3.8: โปรแกรม Visual Studio 29 ภาพท 3.9: หนาจอการแสดงผลบนแพลตฟอรม Flash 29 ภาพท 3.10: หนาจอการแสดงผลบนแพลตฟอรม Flash 30 ภาพท 4.1 หนาจอฐานขอมลการตรวจจบความเคลอนไหว 31 ภาพท 4.2: หนาจอการแสดงผลตวละครแอนเมชน 3 มต 33 ภาพท 4.3: การแสดงผลแอนเมชน ตวควบคมขนาด BoneSize ทขนาดเลกสด 33 ภาพท 4.4: การแสดงผลแอนเมชน ตวควบคมขนาด BoneSize ทขนาดใหญสด 34 ภาพท 4.5: การแสดงผลแอนเมชน ตวควบคมขนาด Scale ทขนาดเลกสด 34 ภาพท 4.6: การแสดงผลแอนเมชน ตวควบคมขนาด Scale ทขนาดใหญสด 35 ภาพท 4.7: การแสดงผลแอนเมชน ตวควบคมความเรว Speed ทความเรว ชาสด 35

ฎ

สารบญภาพ (ตอ) หนา

ภาพท 4.8: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน X -200 (PositionX) 36 ภาพท 4.9: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน X 200 (PositionX) 36 ภาพท 4.10: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน Y -200 (PositionY) 37 ภาพท 4.11: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน Y 200 (PositionY) 37 ภาพท 4.12: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน Z 200 (PositionZ) 38 ภาพท 4.13: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน Z 200 (PositionZ) 38 ภาพท 4.14: Seek Bar ตวควบคมการเลนแอนเมชน 39 ภาพท 4.15: การควบคมกลองและมมมองของฉาก 39 ภาพท 4.16: การควบคมกลองและมมมองของฉาก ทเปลยนจาก ภาพท 4.15 40

บทท 1 บทน า

1.1 ความเปนมาและความส าคญของปญหา

ในปจจบนเทคโนโลยดานมลตมเดยมการเปลยนแปลงอยางรวดเรว งานสรางสรรคหลายดานมการใชเทคโนโลยเขามาชวย ท าใหสงตาง ๆ ทเคยอยในความฝนสามารถแสดงออกมาใหเหนเปนจรงได เทคโนโลยการตรวจจบความเคลอนไหว (Motion Capture) เปนอกเทคโนโลยหนง ทชวยใหผก ากบภาพยนตรสามารถเนรมตรคดคนตวละครตาง ๆ ใหออกมาแสดงในภาพยนตรไดอยางมหศจรรยไมวาเปนการเคลอนไหวของตวละครแอนเมชนในการตน วดโอเกมส ระบบจ าลองตาง ๆ หรอ ในการวจยวเคราะหระบบรางกายของมนษย เปนตน ซงท าใหงานทออกมามความราบลนและสมจรง เปนเทคโนโลยทนยมใชในดานงานความบนเทงจ านวนมาก เพราะท าใหสรางสรรคผลงานไดรวดเรวมากยงขนระยะเวลาในการท างานทนอยลง ท าใหเทคโนโลยการตรวจจบความเคลอนไหวนมความส าคญมากในปจจบนและอนาคต จากตวอยางภาพยนตรเรอง Dawn of The Planet of The Apes ทใชเทคโนโลยการตรวจจบความเคลอนไหวมาใชในการสรางภาพยนตรเพอใหตวละครมการเคลอนไหวทสมจรงมากยงขน

ในปจจบนไดมฐานขอมล Motion Capture ทอนญาตใหน าไปใชแบบไมมคาใชจายเชน ฐานขอมล Carnegie Mellon Mocap Database [Cite] และฐานขอมล Pollick lab Body Movement Library [Cite] แตการสบคนในฐานขอมลขนาดใหญเพอหาโมชนทตองการไมใชสงทงาย เนองจากตองดาวนโหลดไฟลขอมลและใชโปรแกรมเฉพาะในการแสดงผล ซงเปนการสนเปลองเวลาอยางมากความส าคญอกประการหนงของการมระบบทสามารถแสดงผลขอมล Motion Capture ในรปแบบเเอนเมชนกอนทผใชจะท าการดาวนโหลดคอ เรองสทธในการเขาถงขอมล เชนขอมลบางชดเปนลขสทธของนกแสดง โดยผใชตองไดรบอนณาตกอนทจะดาวนโหลดขอมลดงกลาวได ในกรณเชนนการมระบบแสดงผลจงเปนสงทจ าเปนทใหผใชรวาขอมลดงกลาวเปนอยางไร กอนทจะรองขอหรอซอขอมลดงกลาว ดงนนระบบการแสดงผลขอมล Motion Capture จงตองค านงถงดานความปลอดภยของขอมลดวย ปจจบนไดมการใชฟอรแมตในการบนทกการเคลอนไหวอยหลายฟอรแมต ซงแบงออกไดเปนสองกลมใหญคอระบบทเกบขอมลการเคลอนไหวในระบบพกดบอกต าแหนงเปนสามมต (3D Coordinates System) และระบบทเกบขอมลในแบบขอมลโครงสรางเชงล าดบชน ในตารางท 1.1 เปนการแสดงฟอรแมตหลกบางสวนทมการใชในการบนทกความเคลอนไหว

2

ตารางท 1.1: ฟอรแมตทใชในการจบความเคลอนไหว

ชอและนามสกลของไฟล บรษท/ผพฒนา ประเภทของฟอรแมต

TRC Motion Analysis 3D coordinates system C3D Developed by Dr. Andrew

Dainis 3D coordinates system

ASF & AMC Accliam Skeleton hierarchy information

BVH BioVision Skeleton hierarchy information

HTR Motion Analysis Skeleton hierarchy information

จากตารางท 1.1 รปแบบทไดรบความนยมคอ BVH (BioVision Hierarchical Data)

เนองจากเปนไฟลทนยมใชในการเกบขอมลทเปนการจบความเคลอนไหวและมความเปนสากลซงเครองมอหลาย ๆ ตวทท างานดาน Graphic สามารถรองรบ File Format BVH กคอ *.bvh เปนสกลไฟลทเกบขอมลเกยวกบ Motion Capture ของสงมชวต โดยจะมรปแบบการเกบเปน Skeleton ของสงมชวต แลวเกบขอมลวา Bone แตละชนจะมการขยบอยางไรในเฟรมใดบาง

จากปญหาดงกลาวผเขยนไดน าเสนอระบบโดยมสถาปตยกรรมระบบแบบทสามารถแสดงผลขอมลของไฟลบนทกการเคลอนไหวออกมาในรปแบบการเคลอนไหวของตวละครสามมตทสมจรง และสามารถใชงานบนอนเทอรเนตไดเลยโดยเปดผานเวบเบราวเซอร ไมตองลงอาศยโปรแกรมอน ๆ เพอแกไขปญหาดงกลาว ทเนนความสะดวก รวดเรว งายตอการใชงาน มความนาเชอถอความปลอดภยของไฟลบนทกความเคลอนไหวและประหยดคาใชจายในการท างาน ไดไฟลขอมลการเคลอนไหวทเหมาะสมกบงาน 1.2 วตถประสงคของการวจย

1.2.1 เพอศกษาเทคโนโลยการบนทกความเคลอนไหวและโครงสรางของไฟลขอมลบนทก ความเคลอนไหว

1.2.2 เพอพฒนาระบบทแสดงการเคลอนไหวของตวละคร จากไฟลขอมลบนทกความ เคลอนไหวบนอนเทอรเนต

3

1.2.3 เพอท าใหการแสดงผลไฟลบนทกขอมลความเคลอนไหว ไดสมจรงสะดวกและรวดเรวมากยงขน 1.2.4 เพอวเคราะหความปลอดภยของไฟลบนทกขอมลความเคลอนไหวทอยบนเซฟเวอร 1.3 ขอบเขตของงานวจย

1.3.1 แผนการด าเนนการ 1) ศกษาคนควารวบรวมขอมลและท าความเขาใจเกยวกบเทคโนโลยการตรวจจบ

ความเคลอนไหว 2) ศกษาเครองมอโปรแกรมทใชในการตรวจจบความเคลอนไหว 3) ศกษาโปรแกรมทใชในการพฒนาระบบ ไดแก NetBeans และ WebGL 4) วเคราะหและออกแบบโปรแกรมทสามารถน าการเคลอนไหวมาใสในตวละคร

แอนเมชน 5) พฒนาโปรแกรมตามทไดออกแบบ 6) ทดสอบและปรบปรงแกไขตวโปรแกรม 7) จดท ารายงานการคนควาอสระและคมอการใชงานของระบบ

1.3.2 ขอบเขตของระบบ 1) ระบบตองสามารถอานไฟลขอมลบนทกความเคลอนไหวทอยบนเซฟเวอรและ

แสดงผลผานตวละครแอนเมชนบนเวบทเปนสามมตได 2) ระบบตองสามารถควบคมการแสดงผลได เชน มตวควบคมต าแหนงการแสดง

ความเรว ขนาดของตวละครแอนเมชน มปมเลน ปมหยด ปมเรมตนใหม ปมเลนไป ขางหนา หรอถอยหลงทละเฟรม เปนตน

3) ระบบทงหมดท างานอยบนอนเทอรเนต โดยเปดผานเวบเบราวเซอรตามคณสมบตทก าหนดเทานน

4) การแสดงผลของตวละครแอนเมชนตองมการเคลอนไหวตามไฟลบนทกการเคลอนไหวไดอยางสมจรง

5) ไฟลบนทกความเคลอนไหวทอยบนเซฟเวอรมการก าหนดสทธการเขาถง 6) ระบบตองมความปลอดภยในการเกบรกษาขอมล

4

1.4 ค าถามของงานวจย

1.4.1 สามารถพฒนาระบบทแสดงผลขอมลการเคลอนไหวของตวละครผานเซฟเวอร ไดหรอไม

1.4.2 ความปลอดภยของไฟลขอมลบนทกความเคลอนไหวทแสดงผลอยในระดบใด 1.5 ประโยชนทคาดวาจะไดรบ

1.5.1 ไดระบบทสามารถอานไฟลขอมลบนทกความเคลอนไหวบนเซรฟเวอรและแสดงผล ผานตวละครแอนเมชนบนเวบสามมต 1.5.2 ไดเรยนรเกยวกบเทคโนโลยการจบภาพความเคลอนไหวโครงสรางของไฟลขอมลทบนทกความเคลอนไหว และการท างานของเวบสามมต 1.5.3 ไดการแสดงผลของไฟลบนทกความเคลอนไหวเพอทน าไปใชในการสรางภาพยนตแอนเมชนหรอเกมส ไดสะดวกและรวดเรวยงขน 1.5.4 ไดระบบทมความปลอดภยของขอมลและนาเชอถอ 1.6 ค านยามศพทเฉพาะ

1.6.1 การตรวจจบความเคลอนไหว (Motion Capture) หมายถง เทคโนโลยทใชในการ ตรวจจบการเคลอนไหว ถกน ามาใชในการสรางภาพยนตร การตนสามมต หรอเกมสสามมตโดยใชเซนเซอรตดตามรางกายของนกแสดง เพออานและแปรคาความเคลอนไหวเขาสคอมพวเตอรท าใหตวละครสามมตทสรางขนสามารถแสดงทาทางไดอยางสมจรง 1.6.2 ไฟลขอมลบนทกความเคลอนไหว หมายถง ไฟลทเกบขอมลเกยวกบการตรวจจบความเคลอนไหวของสงมชวตโดยมรปแบบการเกบเปนโครงกระดกของสงมชวตแลวเกบขอมลวากระดกแตละชนขยบอยางไรในเฟรมไหนบาง 1.6.3 เวบเบราวเซอร (Web Browser) หมายถง โปรแกรมคอมพวเตอรทผใชสามารถดขอมลและโตตอบกบขอมลสารสนเทศทจดเกบในหนาเวบไซตทสรางดวยภาษาเฉพาะเชนภาษาเอชทเอมแอล (html) ทจดเกบไวทระบบบรการเวบหรอเวบเซรฟเวอร 1.6.4 แอนเมชน (Animation) หมายถง การสรางภาพเคลอนไหวดวยการน าภาพนงมาเรยงล าดบกนและแสดงผลอยางตอเนองแบบเฟรมตอเฟรม (Key Frame Animation)

บทท 2 ทฤษฎทเกยวของ

งานวจยนเปนการแสดงผลแอนชนจากไฟลขอมลบนทกความเคลอนไหวทอยบนเซรฟเวอร

และแสดงผลผานตวละครแอนเมชนสามมตผานเวบเบราเซอร ซงพจารณาถงความปลอดภยของขอมลเปนสวนส าคญโดยท าการทบทวนเอกสารและงานวจยทเกยวของ ไดแก ตวละครแอนเมชน (Character Animation) การตรวจจบความเคลอนไหว (Motion Capture) รปแบบไฟลบนทกขอมลความเคลอนไหวแตละประเภท เวบจแอลทใชในการแสดงผล (WebGL) และความปลอดภยของขอมลซงรายละเอยดของเอกสารและงานวจยทเกยวของ มตามล าดบดงตอไปน 2.1 ตวละครแอนเมชน (Character Animation)

2.1.1 ความหมายของตวละครแอนเมชน ตวละครแอนเมชน คอ กระบวนการท าใหตวละครมชวต โดยกระบวนการ

นจะเกดจากการวาดรปดวยมอแบบสองมต การปนดวยดนเหนยวหรอการสรางดวยคณสมบตตาง ๆ ทใชในเทคนคคอมพวเตอรกราฟกเพอใหเกดการเคลอนไหว (Yu, Yang, Luo, Li, Brandt & Metaxas, 2016)

จากงานวจยขางตนเหนไดวาตวละครแอนเมชน (Character Animation) นนคอ ตวละครทถกสรางขนมาดวยวธตาง ๆ แลวใชเทคนคคอมพวเตอรกราฟกท าใหตวละครนนสามารถมชวตและเคลอนไหวไดตามทตองการ

2.1.2 ความส าคญของตวละครแอนเมชน ตวละครของคน (Humanlike Character) มความส าคญเปนอยางมากตองาน

คอมพวเตอรแอนเมชน ตวละครเหลานเปนสวนประกอบทมความส าคญตอการน าไปประยกตใชทหลากหลาย ดงเชน คอมพวเตอร เกมส ภาพยนตรทใชเทคนคพเศษในการถายท า (Cinematic Special Effects) การสอนในรปแบบสภาวะเสมอนจรงทจ าลองโดยเทคนคทางคอมพวเตอร (Virtual Reality Training) และงานศลปะทตองใชการแสดงออกทางสหนา (Artistic Expression) เปนตน (Reitsma & Pollard, 2007)

จากงานวจยขางตนเหนไดวาความส าคญของตวละครแอนเมชนนน มความส าคญมากตอการใชงานในดานตาง ๆ เชน งานดานความบนเทง ไมวาจะเปน เกมส ระบบจ าลอง ภาพยนตร หรอ การตน เปนตน ตางกใชตวละครแอนเมชนเปนสวนประกอบหลก ๆ เพอใหงานนน ๆ ออกมาสมบรณมชวตชวาเสมอนจรงมากทสด ดงนนตวละครแอนเมชนจงมความส าคญมาก เชนตวละครแอนเมชน

6

จากเรอง มาดากสกา (Madagascar) ซงแอนเมชนในหลาย ๆ เรองจะมตวละครแอนเมชนเปนองคประกอบหลกส าคญในการด าเนนเนอเรอง 2.2 การตรวจจบความเคลอนไหว (Motion Capture)

2.2.1 ความหมายการตรวจจบความเคลอนไหว การตรวจจบความเคลอนไหว หมายถง ขอมลทบนทกการเคลอนไหว และท าการแปลง

การเคลอนไหวนนใหอยในรปแบบดจตอล การสรางภาพเคลอนไหวใหกบตวละครสามมต (3D Character Animation) ไดมามบทบาทในอตสาหกรรมบนเทงอยางมาก ไมวาจะเปนการสรางภาพยนตรสามมต หรอการท าเกมสคอมพวเตอร โดยวธหนงทนยมใชกนมากกคอ การสรางความเคลอนไหวโดยวธโมชนแคปเจอร (Motion Capture) ซงคอการตรวจจบความเคลอนไหวของจดส าคญตาง ๆ บนตวละคร ซงมขอดกวาการสรางความเคลอนไหวดวยมออยางมาก เพราะชวยลดระยะเวลาในการสราง และยงใหการเคลอนไหวทสมจรงกวา (ดชกรณ ตนเจรญ, 2554)

การใชเทคโนโลยในการตรวจจบความเคลอนไหวโดยสวนใหญจะใชในดานอตสาหกรรมบนเทง เชน ภาพยนตร แอนเมชน หรอการพฒนาเกมส เปนตน จากภาพท 2.1 เปนการใชเทคโนโลยตรวจจบความเคลอนไหวในการพฒนาเกมสดานกฬาเพอใหตวละครในเกมสมการเคลอนไหวทสมจรงมากยงขน ภาพท 2.1: การใชเทคโนโลยการตรวจจบความเคลอนไหวในการพฒนาเกมสกฬา (EA-Sport Game)

ทมา: Ben, D. (2010). Sport sims motion capture technology. Caerleon: Usk Valley.

7

2.2.2 ประเภทของการบนทกความเคลอนไหว การบนทกความเคลอนไหวแบงไดเปน 3 ประเภทหลก ๆ ตามเทคโนโลยทใช ดงน

1) การบนทกความเคลอนไหวโดยชดเชงกล (Electro-mechanical Motion Capture System) ประเภทนใชกบการจบการเคลอนไหวของมนษย โดยเฉพาะชดทท าขนพเศษใหมนษยสวมใสส าหรบการบนทกความเคลอนไหว ชดจะมลกษณะเปนโครงสรางทเชอมตอกนมตวตานทานปรบคาไดในการวดการหมนของจดตาง ๆ ตามขอตอส าคญของรางกาย การรมมการหมนของจดตาง ๆ ท าใหสามารถรทาทางการเคลอนไหวของผสวมชดได (ดชกรณ ตนเจรญ, 2554)

2) การบนทกความเคลอนไหวโดยใชแมเหลก (Magnetic Motion Capture System) ใชเซนเซอรตดไวตามสวนตาง ๆ เพอวดคลนแมเหลกไฟฟาความถต าทออกมาจากแหลงก าเนดคลนทตดตงไวบรเวณทบนทก เซนเซอรแตละตวจะถกตอสายมาเขายงวงจรวดคาเพอหาต าแหนงของเซนเซอรแตละตวในสนามแมเหลก วงจรวดคาสงขอมลไปเขาเครองคอมพวเตอรเพอแสดงต าแหนงและการหมนในรปแบบสามมต (Ricci & Formica, 2014)

3) การบนทกความเคลอนไหวโดยใชกลองวดโอ (Optical Motion Capture System) ผแสดงใสชดทมจดสะทอนแสง (Reflective Dots) มกลองจบภาพอยโดยรอบ จดสะทอนแสงจะใชเพอวเคราะหการเคลอนไหวของผแสดง ตวอยางทใชในงานดานดนตร เชน การตรวจจบการเคลอนไหวของคอนดกเตอร (Conductor) และพฒนามาใชเพองานทางการแพทย (Biomedical) เชน การตรวจจบการบาดเจบในกฬาหรอการวเคราะหสมรรถภาพของนกกฬา เปนตน ขอดคอผแสดงสามารถเคลอนทไดอยางอสระ ไมมสายมาโยงกบอปกรณสามารถใชกบวตถขนาดใหญหรอวตถหลายชนได และยงไดขอมลทมความละเอยด สวนขอเสย อาจเกดการรบกวนของแสงจากภายนอก จดสะทอนแสงอาจแตกหกไดเนองจากผลกระทบของการแสดง ท าใหสญเสยขอมลบางสวน สามารถเพมเตมแกไขชดเชยขอมลไดโดยการประมาณต าแหนงจดทหายไป นอกจากนนนกแสดงจะตองใสชดทมจดสะทอนแสงและใชเวลาในการประมวลผลคอนขางนาน (Schubert, Eggensperger, Gkogkidis, Hutter, Ball & Burgard, 2016)

สามารถสรปความหมายของการตรวจจบความเคลอนไหวไดวา การใชเครองมอชดสวมใส (Body Suit) ทมเซนเซอร หรอ มารคเกอรตดไวทชดตามจดส าคญตาง ๆ ซงเครองมอทใชในการตรวจจบใหนกแสดงท าการแสดงโดยสวมใสชดเอาไว เมอเพมสวนของใบหนา นวมอ และรายละเอยดของทาทางลงไปแลว จะท าใหไดขอมลทจดเกบมคณภาพมากขน

2.2.3 ความส าคญของการตรวจจบความเคลอนไหว เทคโนโลยการตรวจจบความเคลอนไหว สามารถน ามาประยกตใชในงานทางการแพทยได

เชน การท าอปกรณถงมอทบนทกขอมลความเคลอนไหวทใชในการผาตดแบบเสมอนจรง ในงานวจยไดศกษาการพฒนาอปกรณตรวจจบความเคลอนไหวแบบพเศษขนมาเพอใชในการผาตดเสมอนจรง

8

(ตารางมตอ)

ซงอปกรณทใชในการตรวจจบความเคลอนไหวตองมความแมนย าสงเพอน าไปใชในการสอนการผาตดแบบเสมอนจรง (Cheng, Guo & Gao, 2010)

เทคโนโลย Optical Motion Capture เปนเคลดลบในการสรางงานแอนเมชน (Animation) การพฒนาเกมส (Games) และคอมพวเตอรกราฟก (Computer Graphics) ทใชในการจบการเคลอนไหวของนกแสดงจรงกอนทจะน าไปใชขบเคลอนตวละคร โดยสามารถลดระยะเวลาและตนทนกวาการท างานในแบบแอนเมตเฟรมตอเฟรม (Key Frame Animation) ไดเปนอยางมาก (สวชย พรรษา, 2552) การประยกตใชเทคโนโลยตรวจจบความเคลอนไหวในงานทางการแพทย ในปจจบนมการใชรปแบบจ าลองการผาตดเสมอนจรงจ านวนมากในการเรยนการสอนของนกศกษาแพทย แตอปกรณส าหรบการผาตดเสมอนจรงนนมราคาแพงเกนไป เนองจากอปกรณนนเอาไวใชในการสรางภาพยนตร จงไดจดท าอปกรณทเปนถงมอส าหรบการผาตดเสมอนจรงโดยเฉพาะในราคาทไมสงจนเกนไปและมความแมนย าเพอใหนกศกษาแพทยเอาไวใชในการศกษา (Cao, Gao, Wang & Li, 2016)

จากงานวจยขางตนเหนไดวาการตรวจจบความเคลอนไหวเปนเทคโนโลยทท าใหการสรางสรรคผลงานรวดเรวมากยงขนประหยดตนทนในการท างาน และยงไดตวละครแอนเมชนทมการเคลอนไหวทราบลน เสมอนจรงมากทสด ซงการสรางแอนเมชนสามารถท าไดทง 2 แบบไดแก การสราง แอนเมชนแบบเฟรมตอเฟรม (Key Frame Animation) และการใชเทคโนโลยตรวจจบความเคลอนไหวในการสรางแอนเมชน วธการเลอกใชงานจะขนอยกบงานทท า เพราะเทคโนโลยการตรวจจบความเคลอนไหวกยงมขอจ ากดบางประการ ดงตารางท 2.1 คอตารางเปรยบเทยบขอดและขอเสยของการใชเทคโนโลยบนทกความเคลอนไหวในการสรางแอนเมชน

ตารางท 2.1: เปรยบเทยบขอดและขอเสยของการบนทกความเคลอนไหวเมอใชในงานแอนเมชน

ขอดของการใชงานการบนทกความเคลอนไหวในงานแอนเมชน

ขอเสยของการใชงานการบนทกความเคลอนไหวในงานแอนเมชน

1) มความรวดเรวและเกบผลเปนแบบ Real-time

1) ใชอปกรณและโปรแกรมทมลกษณะพเศษทใชส าหรบเกบรวบรวมและประมวลผล

2) สามารถท าไดหลายรปแบบและหลายวธ 2) ราคาของอปกรณและโปรแกรมนนราคาสงเกนกวาทบคคลทวไปจะสามารถจายไดในธรกจขนาดเลก

9

ตารางท 2.1 (ตอ): เปรยบเทยบขอดและขอเสยของการบนทกความเคลอนไหวเมอใชในงาน แอนเมชน

ขอดของการใชงานการบนทกความเคลอนไหวในงานแอนเมชน

ขอเสยของการใชงานการบนทกความเคลอนไหวในงานแอนเมชน

3) ใชเวลาในการทานอยกวาแบบเฟรมตอเฟรม 3) การเคลอนไหวทไมเปนไปตามกฎหรอเสมอนจรงจะไมสามารถจดเกบได

4) การเคลอนไหวทซบซอนและการเคลอนไหวทเสมอนจรงในเรองของนาหนกและการแลกเปลยนของแรงสามารถสรางขนมาไดอยางเหมอนจรง

4) เมอมปญหาเกดขน การแกปญหาดวยการท าการบนทกความเคลอนไหวใหมอกครงงายกวาการแกไขขอมลทมอย

5) เมอใชเทคนคแบบดงเดมในการสรางแอนเมชน ตวงานทงหมดจะไมไดแปรผนตามความซบซอนหรอความยาวของชดขอมลในระดบเดยวกน

5) กระบวนการท างานของการบนทกความเคลอนไหวอาจจะตองการสภาพแวดลอมทพเศษเฉพาะส าหรบการท างาน

จากตารางท 2.1 การใชเทคโนโลยตรวจจบความเคลอนไหวจะเหมาะกบงานทมการ

เคลอนไหวทมนษยสามารถเลยนแบบได การเคลอนไหวทออกมานนจะมความสมจรงตางจากการสรางแอนเมชนแบบเฟรมตอเฟรมซงจะเหมาะส าหรบตวละครแอนเมชนทมนษยไมสามารถเคลอนไหวได 2.3 รปแบบไฟลบนทกขอมลความเคลอนไหว (Motion Captue Data Format)

รปแบบไฟลทใชในการบนทกความเคลอนไหวมหลากหลายประเภท ซงจะแบงไป ตามลกษณะการใชงาน แตละรปแบบจะมความแตกตางกน วธการเลอกใชงานแตละรปแบบจะขนอยกบความเหมาะสมของงานนน ๆ รปแบบไฟลขอมลบนทกความเคลอนไหว (Motion Capture File Format) ซงมหลากหลายรปแบบแตแบบทไดรบความนยมคอ BioVision Hierarchical หรอทเรยกวา BVH ดงตารางท 2.2 จะแสดงใหเหนถงรปแบบไฟลขอมลบนทกความเคลอนไหว (Motion Capture File Format) แตละแบบ

10

ตารางท 2.2: รปแบบไฟลขอมลบนทกความเคลอนไหว (Motion Capture File Format)

File Extension Associated Company/ Description

File Format Reference

ASC Ascension NO LINK ASF & AMC Acclaim http://www.darwin3d.com/gamedev/acclaim.zip

ASK & SDL BioVision/Alias NO LINK

BVA & BVH BioVision http://www.biovision.com/bvh.html BRD LambSoft

Magnetic Format http://www.dcs.shef.ac.uk/ ~mikem/fileformats/brd.html

C3D Biomechanics, Animation and Gait Analysis

http://www.c3d.org/c3d_format.htm

CSM 3D Studio Max, Character Studio

http://www.dcs.shef.ac.uk/ ~mikem/fileformats/csm.html

DAT Polhemous NO LINK

GTR, HTR & TRC

Motion Analysis http://www.cs.wisc.edu/graphics/Courses/cs- 838-1999/Jeff/ {HTR.html, TRC.html}

MOT & SKL Acclaim-Motion Analysis

(Under Development - http://www.cs.wisc.edu/graphics/Courses/cs- 838-1999/Jeff/SKL-MOT.html)

ทมา: Meredith, M., & Maddock, S. (2001). Motion capture file formats explained. Department of Computer Science, University of Sheffield, 211, 241-244.

2.3.1 ไฟลบนทกความเคลอนไหวแบบ BioVision: BVH (BioVision Hierarchical Data) 1) ความหมายของไฟลบนทกขอมลความเคลอนไหว (BVH File) คอไฟล รปแบบทเกยวกบดานการตรวจจบความเคลอนไหว (Motion Capture) BVH ยอมาจากค าวาBiovision Hierachy มค าแปลวา มโนภาพเกยวกบสงมชวตทมโครงสรางเปนล าดบขน โดยมรปแบบ

11

การเกบขอมลอยางเปนล าดบขน (*.bvh) เปนสกลไฟลทเกบขอมลเกยวการตรวจจบความเคลอนไหวของสงมชวต โดยจะมรปแบบการเกบโครงกระดกของสงมชวต แลวเกบขอมลวา กระดก แตละชนจะขยบอยางในเฟรมไหนบาง ดงภาพท 2.2 ตวอยางโครงสรางกระดกรปแบบไฟล BVH ภาพ (a) คอ ต าแหนงเรมตน และ ภาพ (b) คอ เฟรมแรกของการเคลอนไหว ภาพท 2.2: ตวอยางโครงสรางกระดกของรปแบบไฟล BVH

ทมา: Meredith, M., & Maddock, S. (2001). Motion capture file formats explained. Department of Computer Science, University of Sheffield, 211, 241-244.

1) ความส าคญของไฟลบนทกขอมลความเคลอนไหวรปแบบ BVH คอการ น าเอาไฟลทมขอมลบนทกความเคลอนไหวไปใสกบตวละครแอนเมชนสามมตได จะท าใหตวละครเหลานนสามารถขยบท าทาทางไดเหมอนกนสงมชวตจรง ๆ มากขนทงยงชวยประหยดเวลาในการท าแอนเมชน ไฟล BVH เปนไฟลขอมลบนทกการเคลอนไหว รปแบบขอมลแบบ BVH เปนรปแบบทนยมใชในการท าการบนทกความเคลอนไหวเพราะเปนรปแบบทแบงขอมลโครงกระดกเปนสวน ๆ ทงขอมลขนาดและขอมลการหมน ไฟล BVH จดเกบขอมลจดหมน 18 จดบรเวณขอตอตาง ๆ ดงภาพท 2.3 เปนภาพโครงสรางแบบล าดบชนของสวนตาง ๆ ของรางกายของไฟลบนทกความเคลอนไหวแบบ BVH

12

ภาพท 2.3: เปนภาพโครงสรางแบบล าดบชนของสวนตาง ๆ ของรางกายของไฟลบนทกความ เคลอนไหวแบบ BVH

ไฟล BVH ประกอบดวย 2 สวน ในสวนแรกคอสวนของ Header ซงอธบายเกยวกบ ล าดบชนและคาของขนาดโครงกระดกแตละสวน โดยเรมตนสวน Header ดวยคยเวรดทวา Hierarchy จากนนบรรทดตอมาตามดวยคยเวรด ROOT แลวตามดวยชอของโครงกระดกสวนทเปน ROOT โดยแตละสวนของโครงกระดกจะมขอมล OFFSET ซงเปนต าแหนงของโครงกระดกเพอใชในการก าหนดขนาดของโครงกระดก ขอมล CHANNELS เปนตวบอกวาขอมลทเราจะเกบในแตละเฟรมของภาพมอะไรบาง ซงในสวนของ ROOT จะเกบขอมลต าแหนงและขอมลการหมน กระดกสวนอนเกบเฉพาะขอมลการหมนเทานน ขอมลของขอตอสวนถดไปจะใชค าวา JOINT แลวตามดวยชอขอตอ โดยเมอถงขอตอสดทายเชน ขอมอ ขอเทา จะจบดวยค าวา End Site แลวตามดวยต าแหนงของสวนปลายของกระดกทอนนน ดงภาพท 2.4 ตวอยางโคดสวน Header ของไฟลบนทกความเคลอนไหวรปแบบ BVH

13

ภาพท 2.4: ตวอยางโคดสวน Header ของไฟลบนทกความเคลอนไหวรปแบบ BVH

ไฟลตวอยางขอมลทบนทกความเคลอนไหวในรปแบบ BVH สวนแรกของไฟลจะเรมตนดวยค าวา “HIERARCHY” บรรทดตอมาจะใชค าวา “ROOT” และชอของกระดกทเปนรากของล าดบชนโครงกระดก ค าวา “ROOT” จะบงบอกถงการเรมตนของโครงสรางล าดบชนโครงกระดก ค าทส าคญตอมาคอ “OFFSET” จะบงบอกต าแหนงการวางของกระดก ค าตอมาคอ “CHANNEL” จะบงบอกถงต าแหนงและทศทางการหมนของกระดก ค าตอมาคอ “JOINT” จะเปนสวนทบอกชอของกระดกชนนน ๆ ไดแก Chest, Neck, Head, LeftCollar, LeftShoulder, LeftElbow, LeftWrist, RightCollar, RightShoulder, RightElbow, RightWrist, LeftHip LeftKnee, LeftAnkle, RightHip, RightKnee และ RightAnkle สวนสดทายจะเปนสวนทบงบอกถงต าแหนงการเคลอนไหวของกระดกจะมค าเรมตนวา “Motion” ทดมาจะเปนค าวา “Frame” ซงจะบงบอกถงจ านวนเฟรมทงหมด และ “Frame Time” จะบอกถงจ านวนวนาทตอเฟรม ถงแมวา ไฟล BVH ทมสวนประกอบของโครงกระดกหลาย ๆ สวน ปกตแลวไฟล BVH 1 ไฟลจะมแคโครงกระดก 1 ราง

14

ในสวนทสองคอ สวนขอมลการเคลอนไหว โดยเรมตนดวยคยเวรดค าวา MOTION ตามดวยค าวา Frames ตามดวยตวเลขเพอบอกจ านวนเฟรมของการเคลอนไหว และ Frame Time เพอบอกขอมลการแสดงภาพของเฟรมหนง จากนนจะเปนสวนของขอมลการเคลอนไหวซงจะเรยงตาม CHANNELS ในสวนของ Header ดงภาพท 2.5 เปนภาพตวอยางโคดสวน Body ของไฟลบนทกความเคลอนไหวรปแบบ BVH ซงเปนสวนส าคญในการบนทกความเคลอนไหว ในการบอกต าแหนงของการเคลอนไหวตามสวนตาง ๆ ภาพท 2.5: ตวอยางโคดสวน Body ของไฟลบนทกความเคลอนไหวรปแบบ BVH

2.3.1 การจ าลองการเคลอนไหวจากไฟลขอมลการบนทกความเคลอนไหวแบบ BVH

ในการสรางงานแอนเมชน การออกแบบการเคลอนไหวใหกบตวละครมความยากล าบากและกนเวลามาก จงท าใหเกดแนวคดทจะใชการจ าลองการเคลอนไหวของมนษยมาใสในตวละครทสรางขน ซงท าใหเกดความสะดวกในการออกแบบการเคลอนไหวใหกบตวละครมากขน ในงานวจยนจะแสดงผลแอนเมชน 3 มต จากไฟลขอมลบนทกความเคลอนไหวแบบ BVH ทอยบนเซฟเวอร จะใชโครงกระดกมาแมพกบตวละครแอนเมชนเพอใหมความเคลอนไหวตามไฟลบนทกความเคลอนไหว แตตวละครแอนเมชนกบโครงกระดกตองมขนาดแตละสวนเทา ๆ กน ถาแตกตางกนมากจะท าใหการเคลอนไหวคลาดเคลอน ดงภาพท 2.6 ภาพตวอยางละครสามมตและโครงกระดกทใชควบคมการเคลอนไหว

15

ภาพท 2.6: ภาพตวอยางละครสามมตและโครงกระดกทใชควบคมการเคลอนไหว

ระบบไฟล BVH มการอางองต าแหนงขอตอตามรางกาย 18 จดเพออางองขอตอของตวละคร การสรางตวละครขนาดของโครงกระดกแตละทอนจะถกกาหนดไวในสวนของ Header ของไฟล และเมอมการเคลอนไหวขอตอสวนใด สวนทเปน Children Nodes ของขอตอสวนนนจะถกพาตามไปดวยเชน หมนหวไหลขางซายไปใหอยในลกษณะกางแขน สวนของขอศอกและขอมอกจะถกพาไปดวย 2.4 เวบ 3 มต (Web 3D)

2.4.1 เวบสามมต คอ เวบทมการแสดงผลภาพทางหนาจอทงแนวแกน X, Y และ Z ซงมมมมองเปนแบบสามมตสามารถเหนความกวาง ความยาว และความลกของภาพได ท าใหมมตทนาสนใจและสมจรงซงเหมาะส าหรบการแสดงผลในปจจบนททกอยางตองดเสมอนจรงมากทสดจงท าให เวบสามมตนนไดรบความนยมเปนอยางมาก เวบไซตแบบ 3 มต ซงผใชงานจะสามารถมองเหนไดหลายมมมองสามารถหมนมมกลองได จงท าใหเวบไซตนน ๆ มความนาสนใจและมมตการน าเสนอทมากขน 2.4.2 เวบจแอล (WebGL: Web Graphics Library)

เวบจแอล (WebGL) หรอไลบราร กราฟกสบนเวบ คอ รปแบบการใชงาน canvas ของ HTML เพอใชงานเอพไอส าหรบกราฟกสสามมตส าหรบเวบเบราวเซอรโดยไมจ าเปนตองตดตงปลกอนสเพม สเปกของเวบจแอลยงอยในขนตอนการดราฟต โดยบรหารและจดการโดยกลมโครโนส เวบจแอลมพนฐานอยบน OpenGL ES 2.0 และใหอนเตอรเฟซส าหรบงานกราฟกส 3 มต โดยการท างานของ HTML5 canvas element และการเขาถงอนเตอรเฟซของ Document Object Model Interfaces ตวอยางเวบไซตทใช ไลบราร กราฟกบนเวบหรอทเรยกวา WebGL ซงเปน

16

ไลบรารทชวยในการแสดงผลกราฟกแบบสามมตบนเวบไซต ดงภาพท 2.7 เปนภาพตวอยางการใชไลบราร กราฟกบนเวบหรอ WebGL ซงท าใหวตถทอยบนเวบมการเคลอนไหว ภาพท 2.7: เวบจแอล (WebGL: Web Graphics Library)

2.5 โปรแกรมส าหรบพฒนาทใชในการอานไฟลขอมลบนทกความเคลอนไหวและโปรแกรมทใชในการแสดงผลบนเวบไซตแบบสามมต

ภาษาของโปรแกรมทสามารถอานไฟลขอมลบนทกความเคลอนไหวมอยดวยกนหลายภาษาเชน C++, JAVA, JavaScript และ Python เปนตน ซงในงานวจยนจะยกตวอยางวธการอานไฟลบนทกความเคลอนไหวของภาษา C++ และ JavaScript

2.5.1 โปรแกรมทใชพฒนาระบบ วธการอานไฟลทบนทกขอมลความเคลอนไหวและการแสดงผลในภาษา C++ โปรแกรมมชอวา Bloodshed Dev-C++ Version 4.9.9.2. ซงเปนโปรแกรมทออกแบบมาเพอชวยใหผทท าการเขยนโปรแกรมใชในการสรางโปรแกรม โดยจะม อดเตอร (Editor) ส าหรบเขยนโคดของโปรแกรมและมตวแปลภาษามาใหพรอม ปจจบนมการออกชดพฒนามาหลายรนและเปลยนแปลงรวดเรวมาก เชน Microsoft C/C++, Microsoft Visual C# และ Microsoft Visual C++ .NET เปนตน ซงชดพฒนาแตละตวมวธการน าไปใชงานทแตกตางกน อยางไรกตามการเขยนโปรแกรมภาษาซไมวาจะเปน IDE ใด กมหลกการและวธการในการเขยนทคลายคลงกนจะตางกนบางตรงรายละเอยดบางอยางทเพมขน หรอพฒนาใหงายในการเขยนโปรแกรมโดยBloodshed Dev-C++ เวอรชน 4.9.9.2 ซงสามารถเขยนไดทงภาษา C และภาษา C++ เปนชดพฒนาขนมาเพอใชเปนฟรแวรและท างานภายใตระบบปฏบตการ Windows และใชไดกบ Windows

17

ทกรน โปรแกรมส าหรบการแสดงผลแอนเมชนในภาษา C++ จะตองดาวนโหลดซอฟตแวรกอนทจะเลอกไฟลบนทกความเคลอนไหว ดงภาพท 2.8 เปนโปรแกรมส าหรบการแสดงผลจากไฟลบนทกการเคลอนไหวโดยใชการเขยนโปรแกรมในภาษา C++ ภาพท 2.8: ตวอยางโปรแกรมส าหรบการแสดงผลจากไฟลบนทกการเคลอนไหว ในภาษา C++

2.5.2 โปรแกรมทใชในพฒนาระบบการแสดงผลผานเวบไซต 3 มต โดยตวโปรแกรมนนจะสามารถ Export ออกมาเปนไฟล HTML5 ทม ไลบราร กราฟกบนเวบเปนสวนส าคญในการแสดงผล ไดแก Unity 3D, Flash และ Netbeans เปนตน ซงในบทนจะกลาวถงทมาและความส าคญของแตละโปรแกรม เหตผลทเลอกโปรแกรมในการน ามาใชพฒนาระบบอานไฟลตวจบความเคลอนไหว

1) โปรแกรม Unity 3D คอเกมเอนจนส าหรบการสรางเกม ทถกพฒนาขนมาอยางตอเนอง ตงแตในชวงแรก ๆ ทรองรบการพอรทเกมลงบน Windows, OS X และเวบเทานน แตปจจบนไดเพมความสามารถในการพอรทลงบน iOS, Android และแพลตฟอรมอน ๆ เกอบทกแพลตฟอรมปจจบนโปรแกรม Unity สามารถท างานไดทงบน Windows และ OS X ซงมเวอรชนฟรใหใชดวย

การพฒนาเกม 3 มต มเกมเอนจนส าหรบพฒนาเกม 3 มต และชวยอ านวยความสะดวกใหกบนกพฒนาเปนอยางมาก เชน Dark Basic, Torque Game Engine เปนตน การใชงานเอนจนตาง ๆ และพบวา เอนจนทเหมาะกบผเรมตนและเหมาะทจะใชในการเรยนการสอนมากทสดคอ Unity หนาจอการท างานของโปรแกรม Unity 3D ซงในสวนการออกแบบหนาจอจะท าไดงายเนองจากมเครองมอส าหรบการออกแบบทกอยางเหมาะส าหรบการออกแบบเกมสเปนอยางมาก ใน

18

สวนเบองหลงจะเปนการเขยนโคดโดยใชภาษา C# ในการท างานของแตละฟงกชน ทมพฒนาทงขนาดใหญและขนาดเลก ใหความสนใจกบ Unity 3D เพราะเปนตวชวยใหสามารถสรางเกมไดอยางรวดเรว และคมคานนเอง ดงภาพท 2.9 ภาพตวอยางการน าไฟลบนทกความเคลอนไหวมาใสในตวละครโดยใชโปรแกรม Unity 3D ภาพท 2.9: ตวอยางการน าไฟลบนทกความเคลอนไหวมาใสในตวละครโดยใชโปรแกรม Unity 3D

2) โปรแกรม Flash Builder 4.6 เปนซอฟตแวรทชวยในการสรางสอมลตมเดยภาพเคลอนไหว (Animation) ภาพกราฟกทมความคมชดเนองจากเปนกราฟกแบบเวคเตอร (Vector) สามารถเลนเสยงและวดโอแบบสเตรโอไดสามารถสรางงานใหโตตอบกบผใช (Interactive Multimedia) มฟงกชนส าหรบการเขยนโปรแกรม (Action Script) ท างานในลกษณะ CGI โดยเชอมตอกบการเขยนโปรแกรมภาษาอน ๆ ไดมากมาย เชน ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C# และ JAVA เปนตน โดยเฉพาะขอดของโปรแกรม Flash คอ ความสามารถในการบบอดไฟลใหมขนาดเลก มผลท าใหแสดงผลไดอยางรวดเรว นอกจากนนยงแปลงไฟลไปอยในฟอรแมตอนไดเชน avi, gif, wav, bmp, jpg, gif และ png เปนตน โปรแกรม Flash เรมมชอเสยงประมาณป พ.ศ. 2539 จนถง ปจจบนไดถกน ามาใชงานอยางแพรหลาย โดยเฉพาะเทคโนโลยเวบ ท าใหการน าเสนอท าไดอยางนาสนใจ นอกจากนน โปรแกรม Flash ยงสามารถสรางแอพพลเคชน (Application) เพอใชท างานตาง ๆ รองรบการใชงานกบอปกรณท เชอมตอกบระบบเครอขายอนเตอรเนต และท างานไดกบหลาย ๆ แฟลตฟอรม (Platform)

19

3) โปรแกรม Netbeans คอโปรแกรมส าหรบพฒนาแอพพลเคชนดวยภาษาจาวา เปนเครองมอส าหรบโปรแกรมเมอรทจะใชพฒนา Application ดวยภาษา Java โปรแกรมNetBeans นนเปนโปรแกรมประเภท OpenSource software โดยผใชงานไมจ าเปนทจะตองเสยเงนเพอซอมาใชงาน

ปจจบน NetBeans ไดรบความนยมมากยงขน ไดรบการพฒนาใหมความสามารถเพมขน สามารถพฒนาโปรแกรมโดยใชภาษาอน ๆ ไดอกหลากหลายโดยตดตงโปรแกรมเสรม(Add-on)ไดจาก เวบไซต หรอผานตวอปเดตเซนเตอร (Update Center) ของ NetBeans เชน (C/C++ ), Web Application, Java EE, Mobility(Java ME), Java FX, Java Script และ PHP เปนตน ในเวอรชน 6.0 เปนตนไปมการรวมโปรแกรมเสรมตาง ๆ ทส าคญเขาในตวตดตงของ NetBeans โดยสามารถเลอกตดตงไดภายหลง

ภาพท 2.10: หนาจอการท างานของโปรแกรม NetBeans IDE 8.1

ขอดของโปรแกรมนกคอ โปรแกรม NetBeans นนท างานแยกสวนตาง ๆ ออกจากกนเปน Module จงท าใหสามารถน า Module ตาง ๆ ทมผทไดพฒนาตอเตมมาตดตงเพมเตมในภายหลงได ใชงานไดทงบนระบบปฏบตการ Windows และ Mac OS X การทจะแสดงผลเปนเวบเบราเซอร Chrome ตองตดตง Netbeans Connecter กอนจงจะสามารถแสดงผลสามมตได

20

ภาพท 2.11: ตวอยางโปรแกรมการแสดงผลแอนเมชนทพฒนาโดยใช NetBeans IDE 8.1

จากภาพท 2.31: เปนตวอยางโปรแกรมการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวบนเซฟเวอรทพฒนาโดยใชโปรแกรม NetBeans IDE 8.1 ซงในงานวจยชนนกใชโปรแกรม NetBeans ในการพฒนาโปรแกรมการแสดงผลแอนเมชนจากฐานขอมลบนทกความเคลอนไหวบนเซฟเวอรเปนหลก เหตผลทเลอก NetBeans IDE 8.1 เพราะเปนโปรแกรมทสามารถแสดงผลผานเวบไซต ซงสามารถรองรบการท างานของ WebGL จงท าใหเวบไซตทแสดงผลออกมาเปนแบบสามมต ตรงกบความตองการของผพฒนา สวนภาษาทใชในการพฒนาจะม HTML เปนตวแสดงผลผานเวบไซต ภาษา CSS ส าหรบการตกแตงขอความ หนาอนเตอรเฟสของโปรแกรม และภาษา JavaScript ส าหรบฟงกชนการอานไฟลบนทกความเคลอนไหว การสรางโครงกระดก และการเคลอนไหวของตวละคร 2.6 ความปลอดภยของขอมล ในงานวจยชนนไดท าระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวทอยบนเซฟเวอร ท าใหขอมลของระบบทงหมดสามารถถกเขาถงไดจากบคคลภายนอก จงตองมการวเคราะหระบบการรกษาความปลอดภยของขอมล เนองจากระบบทงหมดถกพฒนาโดยใชภาษา JavaScript ซงเปนแบบ Client Side Script จงท าใหผใชงานสามารถด Source Code ของระบบและรทอยของไฟลบนทกความเคลอนไหวได จากปญหาดงกลาวผพฒนาจงใชวธการเขารหส URL เพอไมใหผเขามาใชงานระบบสามารถเข าถงไฟลบนทกความเคลอนไหว

21

2.6.1 การเขารหส URL

การเขารหส URL คอการปกปดขอมลอยางนงของระบบซงจะท าให URL อานไดยากกวาเดม เปนวธทนยมใช เพอปองกนการเขาถงขอมล ซงจะสามารถปองกนการเขาถงขอมลไดในระดบหนง ลกษณะของ URL ทถกเขารหสแลว จะมขอความบางสวนกลายเปนเครองหมายเปอรเซนต และตวเลขผสมอกษร 2 หลกแทรกอย (Cheng et al., 2010) ดงภาพท 2.12 เปนตวอยาง URL ทถกเขารหสไว ภาพท 2.12: ตวอยาง URL ทถกเขารหสแลว

บทท 3 วธการด าเนนงานการวจย

3.1 ขนตอนการด าเนนงานวจย การวจยนท าเพอสรางการแสดงผลแอนเมชนจากไฟลขอมลทบนทกความเคลอนไหวบนเซฟเวอรและการวเคราะหความปลอดภยของขอมล เพอแกปญหาการแสดงผลแอนเมชนทมในปจจบนซงตองท าการโหลดซอฟตแวรมาตดตงภายในเครองกอนและโหลดไฟลบนทกความเคลอนไหวมาใชในการแสดงผล ในงานวจยนไดท าเพอใหมความสะดวกในการใชงาน นาเชอถอและแสดงผลไดรวดเรวมากยงขนโดยมขนตอนการด าเนนการบนแพลตฟอรม Web 3D ดงน

3.1.1 การรวบรวมขอมล ศกษาและคนควางานทเกยวของกบเทคโนโลยการจบภาพเคลอนไหว การแสดงผลแบบสาม

มตบน Web Browser ทสามารถใชงานไดกบ WebGL และการใชโปรแกรมในการสรางระบบการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหว

3.1.2 การออกแบบ การออกแบบระบบส าหรบใชแสดงผลของไฟลบนทกความเคลอนไหวรปแบบ BVH บน

Web Browser ซงสามารถอานไฟลบนทกความเคลอนไหวรปแบบ BVH และแสดงการเคลอนไหวผานตวละครแอนเมชนสามมต ทไดเตรยมไว โดยไฟลทงหมดอยบนเซฟเวอร และออกแบบหนาจอส าหรบการแสดงผลแบบสามมต

3.1.3 การพฒนาระบบ พฒนาระบบโดยการเขยนโปรแกรมดวยภาษา Java Script, Html 5 และ CSS ผาน

โปรแกรม Netbeans ซงเปนโปรแกรมทสามารถท างานไดบน Web Browser อานไฟลบนทกความเคลอนไหวรปแบบ BVH แลวแปลงขอมลทไดมาใสในตวละครแอนเมชนสามมตทเตรยมไว มการควบคมการเลนของตวละครได

3.1.4 การทดสอบ การทดสอบจะทดสอบโดยใชไฟลบนทกความเคลอนไหวรปแบบ BVH ทอยบนเซฟเวอร

เปนตวทดลอง ซงระบบตองสามารถอานไฟลบนทกความเคลอนไหวรปแบบ BVH ไดและตวละครแอนเมชนตองมการเคลอนไหวทราบลนสมจรงตามไฟลตนฉบบและทดสอบความปลอดภยการเขาถงไฟลบนทกความเคลอนไหวทอยบนเซฟเวอร

23

3.2 เครองมอทใชในการศกษา

3.2.1 ซอฟตแวรทใชในการพฒนา 1) NetBeans IDE Version: 8.1 2) XAMPP Control Panel (Apache) Version: 3.2.2

เหตผลทเลอกใช NetBeans เพราะเปนโปรแกรมทพฒนาแอพพลเคชนดวยภาษาจาวา แลวยงสามารถพฒนาภาษาอน ๆ ไดอกหลากหลายโดยตดตงโปรแกรมเสรม (Add-on) ไดจาก เวบไซต หรอผานตวอปเดตเซนเตอร (Update Center) ของ NetBeans เชน Java Script, PHP และ HTML5 เปนตน ซงในงานวจยชนน ตองการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวทอยบนเซฟเวอร จงจ าเปนตองใชภาษาทสามารถท างานบนเวบสามมตได

3.2.3 เวบเบราเซอรทใชทดสอบ 1) Internet Explorer Version: 11 2) Firefox Version: 45 3) Chrome Version: 49

เวบเบราเซอรทใชในการทดสอบการวจยนเปนเวบทสามารถรองรบการท างานของ WebGL ไดเทานน ซงเวอรชนทไดกลาวถงดานบนเปนเวอรชนขนต าทสามารถรองรบการท างานของ WebGL และสามารถแสดงผลแบบสามมตได 3.3 สถาปตยกรรมของระบบ

สถาปตยกรรมระบบอธบายตงแตการสรางไฟลบนทกความเคลอนไหวแบบ BVH ไปจนถงการแสดงผลผานทางเวบเบราเซอรโดยไฟลบนทกความเคลอนไหวแบบ BVH ทระบบอานเปนไฟลทอยบนเซรฟเวอร 3.3.1 วธการสรางไฟลบนทกความเคลอนไหวแบบ BVH โดยการสรางไฟลบนทกความเคลอนไหวแบบ BVH นนใชนกแสดงมาสวมชดทมเซนเซอรตดไวตามตว ซงเซนเซอรทตดไวท าการสงสญญาณผาน WiFi ไปทเครองคอมพวเตอรทมโปรแกรมอดวดโอส าหรบการบนทกการเคลอนไหวของนกแสดง จากนนกไดไฟลบนทกความเคลอนไหวแบบ BVH ดงภาพท 3.1 ไดอธบายถงวธการสรางไฟลบนทกความเคลอนไหวแบบ BVH

24

ภาพท 3.1: วธการสรางไฟลบนทกความเคลอนไหวแบบ BVH

3.3.2 ขนตอนการสรางระบบแสดงผลแอนเมชนผานเวบสามมตจากไฟลฐานขอมลบนทกความเคลอนไหวทอยบนเซฟเวอร ซงมขนตอนดงน

1) น าไฟลบนทกความเคลอนไหวแบบ BVH ทมอย ไปเกบไวบนเซฟเวอรทไดจดเตรยมไว

2) สรางเวบไซตทสามารถแสดงผลแอนเมชนแบบสามมตได โดยใชภาษา HTML5 และ CSS ในการพฒนา

3) สรางระบบทอานไฟลบนทกความเคลอนไหวแบบ BVH โดยใชภาษา Java Script ในการพฒนา

4) น าคาทไดจากการอานไฟลบนทกความเคลอนไหวมาสรางตวละครแอนมนและ แมพการเคลอนไหวทาทางใหตรงกบไฟล

5) น าตวละครแอนเมชนทไดเตรยมไวมาแสดงผลทเวบไซตแบบสามมต 6) สรางตวควบคมการเลน ต าแหนงการแสดงผล และขนาดของตวละครแอนเมชน

3.3.3 การอธบายโครงสรางระบบการแสดงผลแอนเมชนจากไฟลฐานขอมลการตรวจจบความเคลอนไหวทอยบนเซฟเวอรซงไดอธบายขนตอนตงแตการสรางตวอานไฟล BVH จากนนน ารปแบบทไดสงไปท Motion Capture Node น า Node แตละ Node ไปทตวควบคมการเคลอนไหวหรอ Motion Controller จากนนไดโครงกระดกมาใสการควบคมแอนเมชนสดทายกสราง Animation Windows หรอ เวบสามมตทใชในการแสดงผล ดงภาพท 3.2 เปนภาพ Flow Chart ของระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวทอยบนเซฟเวอร

25

ภาพท 3.2: Flow Chart ของระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหว

3.3.4 อธบายโครงสรางการท างานของผใชระบบแสดงผลอนเมชนจากไฟลบนทกความ

เคลอนไหว แบงการท างานออกเปน 2 สวน 1) ผใชงานตองเลอกไฟลบนทกความเคลอนไหวจากฐานขอมลบนทกความเคลอนไหวทอยบนเซฟเวอร เพอใชในการแสดงผลแอนเมชน 2) สวนของการแสดงผลอนเมชนจากไฟลบนทกความเคลอนไหวทเลอกมา ดงภาพท 3.3 Flow Chart การใชงานระบบแสดงผลอนเมชนจากไฟลบนทกความเคลอนไหว

ภาพท 3.3: Flow Chart การใชงานระบบแสดงผลอนเมชนจากไฟลบนทกความเคลอนไหว

26

3.4 การออกแบบหนาจอการใชงาน

หนาจอการใชงานของระบบหลก ๆ มอยดวยกนทงหมด 2 หนาดงน 3.4.1 หนาจอ: ฐานขอมลการตรวจจบความเคลอนไหว ประกอบดวย 1 สวน คอ ตาราง

ฐานขอมลการตรวจจบความเคลอนไหว ซงม รหสไฟล ชอไฟล ประเภท ปมกดแสดงผลการเคลอนไหว ค าอธบาย และปมส าหรบเอาไวดาวนโหลด

ภาพท 3.4: ฐานขอมลการตรวจจบความเคลอนไหว

3.4.2 หนาจอ: การแสดงผลตวละครแอนเมชน 3 มต ประกอบดวย 2 สวน คอ

1) สวนแสดงผลตวละครแอนเมชน 3 มต 2) สวนควบคมการเลนและการแสดงผลของตวละครแอนเมชน 3 มต มปมควบคม

การเลนทงหมด 5 ปมไดแก (1) ปมเลน (2) ปมหยด (3) ปมเดนหนาทละเฟรม (4) ปมถอยหลงทละเฟรม (5) ปมยอนกลบ และบารควบคมการแสดงผลทงหมด 7 บาร ไดแก (1) ตวควบคมขนาดของกระดก (2) ตวควบคมสเกล (3) ตวควบคมความเรว (4) ตวควบคมต าแหนงในแกน X (5) ตวควบคมต าแหนงในแนวแกน Y (6) ตวควบคมต าแหนงในแนวแกน Z (7) ตวควบคมการเลนการเคลอนไหว

27

ภาพท 3.5: หนาจอแสดงผลแอนเมชนจากไฟลการตรวจจบความเคลอนไหว

จากภาพท 3.5 หนาจอการแสดงผลแอนเมชน 3 มตจากไฟลการตรวจจบความเคลอนไหว คอหนาทมาจากการกดปม Play ของหนาฐานขอมลการตรวจจบความเคลอนไหวซงในหนานแสดงการเคลอนไหวตามไฟลทเลอก 3.5 การปองกนความปลอดภยของไฟลจบความเคลอนไหว

การพฒนาระบบบนแพลตฟอรม Web 3D ซงระบบการแสดงผลแอนเมชนนจะท างานอยบนเซฟเวอร ผพฒนาจงไดเขารหส URL หรอทเรยกวาการ Encoding URL ทอยไฟลจบความเคลอนไหวเพอปองกนความปลอดภยของขอมล ดงภาพท 3.6 เปนโคดสวนการเขารหสทอยของไฟลจบความเคลอนไหว แตเนองจากเปนการท างานแบบ Client Side Script คอการท างานจากทางฝงของผใชงาน จงไมสามารถปองกนขอมลไดทงหมด ภาพท 3.6: โคดสวนการเขารหสทอยไฟลจบความเคลอนไหว

28

3.6 การพฒนาระบบบนแพลตฟอรม Unity 3D การพฒนาระบบบนแพลตฟอรม Unity 3D จะมการใชเครองมอและเทคโนโลยทแตกตางจากการพฒนาบนแพลตฟอรม Web 3D และ Flash เนองจาก Unity 3D จะมเครองมอทรองรบการพฒนาระบบแบบสามมต เทคโนโลยทใชในการพฒนาบนแพลตฟอรม Unity 3D จะมการอธบายถงวธการพฒนาระบบและเครองมอทใชในการพฒนาบนแพลตฟอรม Unity 3D ดงน 3.6.1 การตงคาตวละครใหเขากบไฟลขอมลบนทกความเคลอนไหว ซง Unity 3D จะมเครองมอทเรยกวา Avatar Configuration เอาไวส าหรบก าหนดจดตาง ๆ ของตวละครหรอทเรยกวาการ Mapping ในสวนของขอตอตาง ๆ ดงภาพท 3.7 เปนการตงคาในสวนของขอตอตาง ๆ ของตวละครเพอใหเขากบไฟลจบความเคลอนไหว ภาพท 3.7: เครองมอ Avatar Configuration

3.6.2 การใสการเคลอนไหวใหกบตวละคร Unity 3D จะมเครองมอทชอวา Animator เปนการก าหนดการเคลอนไหวหรอเงอนไขตาง ๆ ใหกบตวละครได ซงสามารถควบคมการท างานและเงอนไขตาง ๆ ไดโดยผานภาษา C# ดงภาพท 3.8 เครองมอ Animator ทใชในการใสการเคลอนไหวใหตวละคร

29

ภาพท 3.8: เครองมอ Animator ใชควบคมการเคลอนไหว

3.6.3 การแสดงผลการเคลอนไหวและเครองมอทใชในการพฒนาระบบแสดง Unity 3D จะมการเชอมตอกบ Visual Studio ซงการทจะพฒนาระบบตาง ๆ บนแพลตฟอรม Unity 3D จะตองตดตงโปรแกรมเสรมทชอวา Visual Studio เปนโปรแกรมส าหรบการเขยนโคดหรอค าสงตาง ๆ เพอควบคมการท างานของ Unity 3D ดงภาพท 3.9 เปนภาพโปรแกรม Visual Studio ภาพท 3.9: โปรแกรม Visual Studio ทใชในการแสดงผล

3.7 การพฒนาระบบบนแพลตฟอรม Flash การพฒนาระบบบนแพลตฟอรม Flash จะมการใชเครองมอและเทคโนโลยทแตกตางจากการพฒนาบนแพลตฟอรม Web 3D และ Unity 3D เนองจาก Flash จะไมมเครองมอทรองรบการพฒนาระบบแบบสามมต จงตองมการใชไลบรารทชอวา Paper Vision 3D ซงเปน ไลบรารทเอาไวส าหรบพฒนาระบบทเปนสามมต เทคโนโลยทใชในการพฒนาบนแพลตฟอรม Flash จะมการอธบายถงวธการพฒนาระบบและเครองมอทใชในการพฒนาบนแพลตฟอรม Flash ดงน

30

3.7.1 เทคโนโลยทใชและไลบรารเสรมส าหรบการพฒนาระบบแบบสามมตบนแพลตฟอรม Flash จะใชโปรแกรม Flash Builder ซงเปนโปรแกรมทใชเขยนดวยภาษา Action Script

3.7.2 เทคโนโลยทใชในการออกแบบหนาจอและแสดงผลการเคลอนไหวสามมต จะตองตดตงโปรแกรม Flash Professional ซงเปนโปรแกรมทใชในการออกแบบหนาจอและไลบรารส าคญทชอวา paperVision3D ซงเปนไลบรารส าหรบการแสดงผลสามมตบนแพลตฟอรม Flash ดงภาพท 3.10 หนาจอการแสดงผลบนแพลฟอรม Flash

ภาพท 3.10: หนาจอการแสดงผลบนแพลตฟอรม Flash

บทท 4 ผลการด าเนนงาน

หลงจากทไดสรางระบบการแสดงผลการเคลอนไหวของตวละครแอนเมชน 3 มต จาก

ฐานขอมลการตรวจจบการเคลอนไหวบนเซฟเวอรในสวนตาง ๆ ตามแผนงานทวางไวซงสามารถอธบายผลการด าเนนงานรายงานการวจยไดดงน 4.1 การเรมตนการใชงานระบบ BVH Player เมอเขามาทเวบไซต BVH Player หนาแรกเปนหนาฐานขอมลการตรวจจบความเคลอนไหว ซงในหนา Motion Capture Database เกบรวบรวมไฟลบนทกความเคลอนไหวรปแบบ BVH ไวบนเซฟเวอรซงมไฟลบนทกความเคลอนไหวเกบไวและมขอมลของไฟลบนทกความเคลอนไหวแสดงในตารางดงตอไปน

4.1.1 รหสไฟลบนทกความเคลอนไหว รปแบบ BVH 4.1.2 ชอไฟลบนทกความเคลอนไหว รปแบบ BVH 4.1.3 ประเภทของไฟลบนทกความเคลอนไหว รปแบบ BVH 4.1.4 ปมกดเลน เพอไปหนาการแสดงผล 4.1.5 ปม Description แสดงรายละเอยดของไฟล BVH 4.1.6 ปมดาวนโหลดส าหรบดาวนโหลดไฟล BVH ออกมาไวทเครองได

ดงภาพท 4.1 ผใชสามารถดชอไฟล ประเภทของไฟล รายละเอยดของไฟล สามารถกดแสดงผลแอนเมชนเพอไปหนาแสดงผลแอนเมชน 3 มตและสามารถดาวนโหลดไฟลบนทกความเคลอนไหวได ภาพท 4.1: หนาจอฐานขอมลการตรวจจบความเคลอนไหว

32

4.2 หนาจอการแสดงผลตวละครแอนเมชน 3 มต หนาจอการแสดงผลแบงเปน 2 สวนหลก ดงแสดงในภาพท 4.2 ประกอบดวย 2 สวน ดงน

4.2.1 สวนของการควบคมการแสดงผลแอนเมชน สวนของการควบคมการแสดงผลแอนเมชนไดมการออกแบบปมและบารส าหรบควบคมการม

ปฏสมพนธระหวางผใชงานกบตวละครแอนเมชนดงตอไปน 1) ปม Play เอาไวส าหรบกดเลนแอนเมชน 2) ปม Stop เอาไวส าหรบกดหยดแอนเมชน 3) ปม Next เอาไวส าหรบกดเลนทละเฟรม 4) ปม Previous เอาไวส าหรบกดถอยหลงทละเฟรม 5) ปม Return เอาไวส าหรบเรมตนใหม 6) Seek Bar เอาไวส าหรบควบคมการเลน 7) BoneSize Bar ส าหรบควบคมขนาดของกระดกได 8) Scale Bar ส าหรบควบคมสเกลของตวละครแอนเมชนได 9) Speed Bar ส าหรบควบคมความเรวของการเลนได 10) PositionX Bar, PositionY Bar และ PositionZ Bar ส าหรบยายต าแหนงของตวละครในแกน X, Y และ Z การออกแบบจากทกลาวมานผใชงานสามารถควบคมการแสดงผลการเลนโดยการกดปมไดไมวาจะเปนการกดเลน กดหยด กดเดนหนาหรอถอยหลงทละเฟรม และกดเรมเลนใหมได ในสวนของบารทใชในการปรบรปแบบทใชในการแสดงสามารถปรบขนาดของกระดก สเกลของตวละคร ความเรวของการเคลอนไหว และต าแหนงทแสดงผลในแกน X, Y หรอ Z ได 4.2.2 สวนของการแสดงผลตวละครแอนเมชน

สวนของการแสดงผลตวละครแอนเมชน ไดมการออกแบบตวละครจากวตถสามมตใหมรปรางเหมอนมนษยเพอใหแสดงผลการเคลอนไหวตามไฟลบนทกความเคลอนไหวทไดเลอกจากตารางฐานขอมลบนทกความเคลอนไหว ในหนา Motion Capture Database

33

ภาพท 4.2: หนาจอการแสดงผลตวละครแอนเมชน 3 มต

4.3 การใชงานหนาจอแสดงผลแอนเมชน 3 มต ดงทไดกลาวถงในหวขอท 4.2.1 ผใชสามารถควบคมการแสดงผลแอนเมชนไดทงขนาดของกระดก สเกลของตวละคร ความเรวของการเคลอนไหว และต าแหนงทแสดงผลของตวละครในแนวแกน X,Y และ Z ซงอธบายวธการใชงานการควบคมในสวนของหนาแสดงผลแอนเมชนดงน - บารควบคมขนาดกระดกของตวละครแอนเมชนแสดงในกรอบสเหลยม ในภาพท 4.3 บารทชอวา Bone Size มขนาดเลกทสดตงแต 0.5 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหวไปจนขนาดใหญสด 5 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหวซงสามารถควบคมไดตามความตองการ ดงภาพท 4.3 และ 4.4 แสดงใหเหนถงบารควบคมขนาดกระดก (Bone Size) ของตวละครแอนเมชน 3 มต จากขนาดเลกทสดไปจนถงขนาดใหญทสด ภาพท 4.3: การแสดงผลแอนเมชน บารควบคมขนาด BoneSize ทขนาดเลกสด

34

ภาพท 4.4: การแสดงผลแอนเมชน บารควบคมขนาด Bone Size ทขนาดใหญสด

- บารควบคมขนาดสเกลของตวละครแอนเมชน 3 มต บารทชอวา Scale มขนาดเลกสดท 1 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหวและขนาดใหญทสด 5 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหวซงสามารถควบคมไดตามตองการดงภาพท 4.5 และ 4.6 แสดงใหเหนถงบารควบคมขนาดสเกล (Scale) ของตวละครแอนเมชน 3 มต จากขนาดเลกทสด 1 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหวไปจนถงขนาดใหญทสด 5 เทาของขนาดจรงตามไฟลบนทกความเคลอนไหว ภาพท 4.5: การแสดงผลแอนเมชน บารควบคมขนาด Scale ทขนาดเลกสด

35

ภาพท 4.6: การแสดงผลแอนเมชน บารควบคมขนาด Scale ทขนาดใหญสด

- บารควบคมความเรวในการแสดงผลของตวละครแอนเมชน 3 มต บารทชอวา Speed มความเรวการเคลอนไหวตงแต 0.2 เทาของความเรวจรง ไปจนเทา 3 เทาของความเรวจรง (0.2x ถง 3x) ดงภาพท 4.7 แสดงใหเหนถงบารควบคมความเรวการเคลอนไหว (Speed) ของตวละครแอนเมชน 3 มต จากความเรว ชาสด 0.2 เทาของความเรวจรง ภาพท 4.7: การแสดงผลแอนเมชน บารควบคมความเรวการเคลอนไหว Speed ทความเรว ชาสด

- บารควบคมต าแหนงในการแสดงผลของตวละครแอนเมชน 3 มต ในแกน X หรอแนวนอน โดยบารทชอวา PositionX มคาตงแต –200px ไปจนถง 200px ดงภาพท 4.8 และ 4.9 แสดงใหเหน

36

ถงบารควบคมต าแหนงการแสดงผลของตวละครแอนเมชน 3 มต ในแนวแกน X จากดานซายสดไปดานขวาสดมคาตงแต –200px ไปจนถง 200px ภาพท 4.8: การแสดงผลแอนเมชน บารควบคมต าแหนงในการแสดงผลในแนวแกน X –200px

(PositionX)

ภาพท 4.9: การแสดงผลแอนเมชน ตวควบคมต าแหนงในแนวแกน X 200px (PositionX)

- บารควบคมต าแหนงในการแสดงผลของตวละครแอนเมชน 3 มต ในแกน Y หรอแนวตง โดยบารทชอวา PositionY มคาตงแต –200px ไปจนถง 200px ดงภาพท 4.10 และ 4.11 แสดงใหเหนถงบารควบคมต าแหนงการแสดงผลของตวละครแอนเมชน 3 มต ในแนวแกน Y จากดานลางสดไปดานบนสดมคาตงแต -200px ไปจนถง 200px

37

ภาพท 4.10: การแสดงผลแอนเมชน บารควบคมต าแหนงในแนวแกน Y –200px (PositionY)

ภาพท 4.11: การแสดงผลแอนเมชน บารควบคมต าแหนงในแนวแกน Y 200px (PositionY)

- บารควบคมต าแหนงในการแสดงผลของตวละครแอนเมชน 3 มต ในแกน Z หรอแนวลก โดยบารทชอวา PositionZ มคาตงแต –200px ไปจนถง 200px ดงภาพท 4.12 และ 4.13 แสดงใหเหนถงบารควบคมต าแหนงการแสดงผลของตวละครแอนเมชน 3 มต ในแนวแกน Z จากดานไกลสดไปดานใกลสดมคาตงแต –200px ไปจนถง 200px

38

ภาพท 4.12: การแสดงผลแอนเมชน บารควบคมต าแหนงในแนวแกน Z 200px (PositionZ)

ภาพท 4.13: การแสดงผลแอนเมชน บารควบคมต าแหนงในแนวแกน Z 200px (PositionZ)

- บารควบคมการเลนแอนเมชนหรอทเรยกวา Seek Bar เปนบารทบอกถงระยะเวลาในการเลนแอนเมชนนน ๆ วาการแสดงผลเพงเรมตนหรอใกลจบ โดยการกดปมทเปนรปไอคอน Play หลงจากนน Seek Bar ขยบตามเฟรมการเคลอนไหวของตวละคร และผใชงานสามารถเลอน Seek Bar โดยตวละครมการเคลอนไหวตามการขยบของ Seek Bar ดงภาพท 4.14 แสดงใหเหนถง Seek Bar เปนบารทควบคมการเลนของตวละครแอนเมชน

39

ภาพท 4.14: Seek Bar บารควบคมการเลนแอนเมชน

- สวนหนาจอการแสดงผลของระบบ จากระบบทไดจดท ามานแสดงผลในรปแบบของเวบไซตทเปนสามมต ซงเวบสามมตมมมมองทหลากหลายซงในระบบการแสดงผลนสามารถควบคมมมมองได ดงภาพท 4.15 และ ภาพท 4.16 เปนการเปลยนมมมองโดยสงเกตไดจากเงาของตวละครทเปลยนไป การควบคมบนหนาจอแสดงผลมดงน

1) กดคลกซายคางทเมาสเปนการหมนมมกลองไปรอบ ๆ ตวละคร 2) กดคลกขวาคางทเมาสเปนการขยบกลอง 3) สกอเมาสเลอนไปดานหนา เปนการ ซมเขา 4) สกอเมาสเลอนไปดานหลง เปนการ ซมออก ภาพท 4.15: การควบคมกลองและมมมองของฉาก

40

ภาพท 4.16: การควบคมกลองและมมมองของฉาก ทเปลยนจาก ภาพท 4.15

4.4 เกณฑการใหคะแนนของแบบประเมน

เนองจากงานวจยชนนไดมการท าระบบส าหรบการใชงาน จงตองมการประเมนผลงานของระบบในดานตาง ๆ เชน ความสวยงามของหนาจอ และการท างานเปนตน ดงตารางท 4.1 และ 4.2 เปนตารางแสดงระดบผลการประเมนระดบความพงพอใจของระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวทอยบนเซฟเวอร ตารางท 4.1: แสดงระดบผลการประเมนความพงพอใจของระบบ

ระดบผลการประเมน ระดบความพงพอใจ

มากทสด ความพงพอใจของระบบมากทสด มาก ความพงพอใจของระบบชนมาก

ปานกลาง ความพงพอใจของระบบปานกลาง นอย ความพงพอใจของระบบนอย

นอยทสด ความพงพอใจของระบบนอยทสด

จากตารางท 4.1 มเกณฑการประเมนระดบความพงพอใจแบงเปน 5 ระดบ ไดแก 1) ความ

พงพอใจของระบบมากทสด 2) ความพงพอใจของระบบชนมาก 3) ความพงพอใจของระบบปานกลาง 4) ความพงพอใจของระบบนอย 5) ความพงพอใจของระบบนอยทสด

41

ตารางท 4.2 แสดงระดบผลการประเมนความพงพอใจของระบบ

คะแนนความพงพอใจ ผลการประเมน

4.50 – 5.00 มากทสด 3.50 – 4.49 มาก

2.50 – 3.49 ปานกลาง

1.50 – 2.49 นอย 0.00 – 1.49 นอยทสด

จากตารางท 4.2 มเกณฑการใหคะแนนความพงพอใจแบงออกเปน 5 ชวง ไดแก 1) 4.5–5 พงพอใจมากทสด 2) 3.5–4.49 พงพอใจมาก 3) 2.5–3.49 พงพอใจปานกลาง 4) 1.5–2.49 พงพอใจนอย 5) 0–1.49 พงพอใจนอยทสด ตารางท 4.3 แสดงแบบประเมนความพงพอใจของระบบ

รายละเอยด ระดบความพงพอใจ 5 4 3 2 1

1. รปแบบหนาตา (Interface) 1.1 1.1 ความเหมาะสมของการจดวางรปแบบ มความสะดวกและ

จดจ างาย

1.2 ความสวยงาม และความเรยบรอยของรปแบบ 2. การท างานของตวระบบ

2.1 2.1 ใชงานไดงาย ไมซบซอน 2.2 ระบบสามารถท างานไดรวดเรวทนใจผใชงานระบบ 2.3 ระบบมสงจ าเปนทผใชงานระบบตองการ

จากตารางท 4.3 เปนการแสดงตารางแบบประเมนทใชในการประเมน โดยมทงหมด 6 ขอ

และชองการใหคะแนน 5 ชอง โดยผทท าการประเมนตองท าเครองหมายถกไวในชองทเตรยมไวให

4.5 สรปผลความพงพอใจของระบบ

สรปผลความพงพอใจของระบบการแสดงผลขอมลการตรวจจบความเคลอนไหวผานตวละครแอนเมชน 3 มต จากการเกบรวบรวมขอมลแบบประเมนความพงพอใจและความคดเหน จากบคคลทวไป จ านวน 30 คนแบงเปนผชาย 14 คนและผหญง 16 คน

42

น าขอมลจากแบบสอบถามความพงพอใจตอระบบมาวเคราะหหาระดบความพงพอใจตอระบบโดยใชวธการค านวณการหาคาเฉลยและสวนเบยงเบนมาตรฐาน (Standard Deviation: S.D.,S,s) เพอก าหนดระดบความพงพอใจทมตอระบบการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหว โดยใชสตรการหาสวนเบยงเบนมาตรฐาน (Standard Deviation: S.D.)

√ ∑ ∑

ตารางท 4.4: ตารางสรปผลความพงพอใจของระบบ

รายละเอยด คาเฉลย สวน

เบยงเบนมาตรฐาน

ระดบความพงพอใจ

1. รปแบบหนาตา (Interface) 1.2 1.1 ความเหมาะสมของการจดวางรปแบบ มความสะดวก

และจดจ างาย 4.23 0.57 มาก

1.2 ความสวยงาม และความเรยบรอยของรปแบบ 3.9 0.71 มาก 2. การท างานของตวระบบ

2.2 2.1 ใชงานไดงาย ไมซบซอน 4.23 0.63 มาก 2.2 ระบบสามารถท างานไดรวดเรวทนใจผใชงานระบบ 4.1 0.61 มาก 2.3 ระบบมสงจ าเปนทผใชงานระบบตองการ 4 0.64 มาก

จากการสรปผลส ารวจความพงพอใจตอระบบการแสดงผลแอนเมชนจากไฟลบนทกความ

เคลอนไหวรปแบบ BVH ซงจากผลการประเมนแบงออกเปนสวนของรปแบบหนาตาของระบบและการท างานของตวระบบ ระบบมความเหมาะสมของการจดวางรปแบบ ความสะดวกในการใชงานและสามารถจดจ าไดงาย ความสวยงามความเรยบรอยของรปแบบในการน าเสนอ การใชงานทเออประโยชน และความสมบรณของระบบตอผใชงานในภาพรวมของระบบอยในระดบความพงพอใจมาก

บทท 5 สรปผล อภปรายผล และขอเสนอแนะ

5.1 สรปผลการศกษา

จากการศกษาพบวาภาษาทใชในการพฒนาระบบส าหรบแสดงผลกราฟก 3D บนเวบเบราเซอร ทนยมใชกนมอยดวยกนทงหมด 4 ภาษา ซงประกอบดวยภาษา C++, Python, Java Applets, Flash + Action Script และ Java Script + HTML5 ส าหรบภาษา C++, Python และ Java เปนการท าระบบทใชงานบนเครอง Client โดยตองโหลดซอฟตแวรมาตดตงภายในเครองตางจาก Java Script ทระบบทงหมดท างานอยบนเซฟเวอรโดยเปดผานเวบเบราเซอรซงสามารถเขาใชงานไดโดยไมตองตดตงอะไรเพมเตม

เพอใหเหนถงขอดขอเสยของเครองมอและภาษาตาง ๆ การพฒนาในโครงงานนไดทดลองพฒนาโดยใชเครองมอทแตกตางกนดงน

5.1.1 การพฒนาบน Unity 3D ในการพฒนาระบบแสดงผลแอนเมชนจากการจบความเคลอนไหว แตเนองจากโปรแกรม Unity 3D เหมาะสมกบการสรางเกมส โดยภาษาหลกทเหมาะสมในการพฒนาคอภาษา C# ซงมความยากในการเขยนระบบเพออานคาจากไฟลบนทกความเคลอนไหว เนองจาก Unity 3D เปนโปรแกรมทมเครองมอเหมาะส าหรบการสรางตวละครแอนเมชนและน าเอาไฟลบนทกความเคลอนไหวมาแมพเขากบตวละคร สวนดานความปลอดภยของไฟลฐานขอมลจบความเคลอนไหวจะไมสามารถปองกนได เนองจาก Unity 3D ใช HTML5+WebGL ในการพฒนาระบบแสดงผลแอนเมชนออนไลนซงเปนการท างานทางฝงของผใชงานจงไมสามารถปองกนการเขาถงได

5.1.2 การพฒนาบนแพลตฟอรม Flash ในการพฒนา เนองจากโปรแกรม Flash Builder ใชพนฐานภาษา Action Script การทพฒนาระบบแสดงผลแอนเมชนบนเวบเบราเซอรแบบสามมตจ าเปนตองลงตวเสรม (Flash Professional) เพอท าใหรองรบไลบรารกราฟกบนเวบและแสดงผลผานเวบได นอกจากนการแสดงผลจากโปรแกรม Flash ไมซพพอรทการแสดงผลบน IOS ในดานความปลอดภยของไฟลจบความเคลอนไหว โปรแกรม Flash มตวปองกนโคดทชอวา Sandbox ซงท าใหผใชงานไมสามารถดโคดทอยไฟลได

5.1.3 การพฒนาระบบบนแพลตฟอรม Web 3D ภาษา Java Applets มาเปนโปรแกรม Netbeans ภาษา Java Script+HTML5 เพอใหสามารถใชงานไดบนเวบเบราเซอรและรองรบการท างานของ WebGL

44

(ตารางมตอ)

5.2 อภปรายผล 5.2.1 จากการทดสอบระบบการแสดงผล Motion Capture ผานเวบเบราเซอร 3 มต ผพฒนาระบบสามารถสรปผลการท างานของระบบไดวา ผใชงานระบบ (User) สามารถกระท างานไดทกฟงกชนงาน ไดแก 1) การอานขอมลไฟล Motion Capture ทอยบนเซฟเวอร และน ามาแสดงผลผานตวละครแอนเมชน 3 มต 2) การควบคมการเลนของตวละครแอนเมชน 3 มต 3) การจดต าแหนงการแสดงผลของตวละครแอนเมชน 3 มต 5.2.2 จากการทดสอบการแสดงผลบนเวบเบราเซอรตาง ๆ กนซง Chrome สามารถแสดงผลไดดทสด เนองจากผพฒนาใช Chrome เปนเวบเบราเซอรตนแบบในการทดสอบการแสดงผลแอนเมชน ในสวนของเวบเบราเซอร Firefox และ Internet Explorer สามารถแสดงผลไดแตมต าแหนงของวตถคลาดเคลอนไป 5.2.3 การใชโปรแกรมส าหรบในการพฒนาระบบ ซงในงานวจยนไดทดลองใชทงหมด 3แพลตฟอรม ไดแก Web 3D, Unity 3D และ Flash จากแพลตฟอรมทกลาวมาทงหมดสามารถใชในการพฒนาระบบแสดงผลแอนเมชนจากไฟลตรวจจบความเคลอนไหวไดซงในงานวจยนวเคราะหและเปรยบเทยบการใชงานของแตละแพลตฟอรม ดงตารางท 5.1 เปนตารางการเปรยบเทยบแพลตฟอรมทใชในการพฒนา ตารางท 5.1: การเปรยบเทยบโปรแกรมทใชในการพฒนาระบบ

คณสมบต/ชอโปรแกรม Web3D Unity3D Flash

1.ภาษาและเทคโนโลยทใช HTML5, WebGL, JavaScript3D

HTML5, WebGL, C#, Animator

Action Script, paperVision3D,

Flash Professional

2.การแสดงผลแอนเมชนแบบ Realtime

Real Time ไม Real Time Real Time

3.การปองกนความปลอดภยของขอมล

Encode URL Encode URL Sandbox

45

ตารางท 5.1 (ตอ): การเปรยบเทยบโปรแกรมทใชในการพฒนาระบบ

คณสมบต/ชอโปรแกรม

Web3D Unity3D Flash

4.แพลตฟอรมทรองรบ

Web Browser (ทรองรบ WebGL)

Web Browser (ทรองรบ WebGL)

Web Browser แตไมรองรบการแสดงผลบน IOS

จากตารางท 5.1 การเปรยบเทยบโปรแกรมทใชในการพฒนาระบบ สามารถสรปไดดงน จาก

โปรแกรมทกลาวมขางตนสามารถพฒนาระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวไดทกโปรแกรม แตมยากงายแตกตางกนไปตามความเหมาะสมซงผพฒนาไดเลอกโปรแกรม NetBeans ในการพฒนาระบบเพราะเปนโปรแกรมทไมมคาใชจายในการใชงาน ซงตางจาก Flash Builder และตวโปรแกรมสามารถรองรบภาษา Java Script, HTML5, PHP และ CSS ซงสามารถตดตงโปรแกรมเสรมไดสะดวก ในสวนการแสดงผลโปรแกรม NetBeans รองรบการท างานของ Web Server, WebGL โดยการตดตง NetBeans Connector ท าใหสามารถระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวผานเวบแบบสามมตได 5.2.4 การทดสอบความปลอดภยของระบบ ซงระบบแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวไดท าการเขารหส URL ท าใหผใชงานเขาถงไฟลขอมลทบนทกความเคลอนไหวทอยบนเซฟเวอรไดยากขนในระดบหนง แตไมสามารถปองกนไดอยางสมบรณ เนองจากระบบเปนการท างานแบบ Client Side Script ซงเปนการท างานจากฝงของผใชงาน จงไมสามารถปองกนไดทงระบบ

5.2.5 จากการสรปผลส ารวจความพงพอใจตอระบบการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวรปแบบ BVH ซงจากผลการประเมน ระบบมความเหมาะสม สวยงาม การใชงานทเออประโยชน และความสมบรณของระบบตอผใชงานในภาพรวมของระบบอยในระดบความพงพอใจมาก

5.3 ปญหาของระบบ

5.3.1 เวบเบราเซอรทไมรองรบการท างานของ WebGL ไมสามารถแสดงผลแอนเมชนได 5.3.2 การแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวบางไฟลมต าแหนงและขนาดไมตรงตามทก าหนดไว

46

5.3.3 เวบเบราเซอรทตางกน ใหการแสดงผลของหนาจอเชน บารควบคมมรปแบบทแตกตางกน 5.4 แนวทางแกปญหา

5.4.1 ตองใชเวบเบราเซอรทรองรบการท างานของ WebGL หรอ Web 3D ตามทไดก าหนดไวในรายงาน 5.4.2 มเครองมอทใชในการควบคมต าแหนงการแสดงผล และ ขนาดของตวละครแอนเมชน ซงสามารถปรบไดตามความตองการ 5.5 ขอเสนอแนะ และแนวทางการพฒนาตอ

จากขอเสนอแนะทไดจากการท าแบบสอบถามความพงพอใจในระบบการแสดงผลแอนเมชนจากไฟลบนทกความเคลอนไหวบนเซฟเวอร สามารถสรปไดดงน

5.5.1 สามารถท าใหอานไฟลขอมลความเคลอนไหวจากเวบไซตตาง ๆ ได 5.5.2 ท าใหทกไฟลทบนทกขอมลความเคลอนไหวทน ามาแสดงผลมขนาดและต าแหนงทเหมอนกนเปนมาตรฐาน 5.5.3 เพมรปแบบตาง ๆ ของตวละครแอนเมชน 3 มต เชน ส หรอ รปราง เปนตน 5.5.4 เพมฉากหรอวตถตาง ๆ เพอใหมความนาสนใจมากขน

47

บรรณานกรม ดชกรณ ตนเจรญ. (2554). เทคโนโลยการตรวจจบการเคลอนไหวและการประยกตใชงาน. วารสาร ปญญาภวฒน, 3(1), 113-122. สวชย พรรษา. (2552). Motion capture จนตนาการทสมผสได. สบคนจาก http://suwichai.blogspot.com. สทธชย ทพยสงห. (ม.ป.ป.). บทเรยนออนไลนการสรางแอนเมชนดวย Flash. สบคนจาก http://www.kroojan.com/flash/content/flash-intro.html. Ben, D. (2010). Sport sims motion capture technology. Caerleon: Usk Valley. Bodenheimer, B., Rose, C., Rosenthal, S., & Pella, J. (1997). The process of motion capture: Dealing with the data. In Computer Animation and Simulation’97 (pp. 3-18). New York: Springer Vienna. Cao, Q., Gao, C., Wang, Y., & Li, T. (2016, May). The motion capture data glove device for virtual surgery. In Nanoelectronics Conference (INEC), IEEE International (pp. 1-2). New York: IEEE Press. Cheng, K., Guo, R., & Gao, M. (2010, August). An optimizing chinese string matching algorithm based on the url encoding. In Information Engineering (ICIE), WASE International Conference on Vol. 1 (pp. 23-25). New York: IEEE Press. Edin, M. (2013). BVH file loading and displaying. Retrieved from http://www.gamedev.net. Maestri, G. (2006). Digital character animation 3. New Jersey: New Riders. Menache, A. (2000). Understanding motion capture for computer animation and video games. San Francisco: Morgan kaufmann. Meredith, M., & Maddock, S. (2001). Motion capture file formats explained. Department of Computer Science, University of Sheffield, 211, 241-244. Phunsa, S., Potisarn, N., & Tirakoat, S. (2009, February). Edutainment--Thai art of self- defense and boxing by motion capture technique. In Computer Modeling and Simulation, ICCMS'09. International Conference on (pp. 152-155). New York: IEEE Press. Reitsma, P. S., & Pollard, N. S. (2007). Evaluating motion graphs for character animation. ACM Transactions on Graphics (TOG), 26(4), 18.

48

Ricci, L., & Formica, D. (2014, November). Dynamic accuracy assessment of data-fusion techniques for wearable, inertial and magnetic based human motion capture. In IEEE SENSORS 2014 Proceedings (pp. 2215-2218). New York: IEEE Press.

Schubert, T., Eggensperger, K., Gkogkidis, A., Hutter, F., Ball, T., & Burgard, W. (2016). Automatic bone parameter estimation for skeleton tracking in optical motion capture. Proc. of the IEEE, 1, 256-263.

Yu, Q., & Terzopoulos, D. (1998, June). Synthetic motion capture for interactive virtual worlds. In Computer Animation 98. Proceedings (pp. 2-10). New York: IEEE Press.

Yu, X., Yang, J., Luo, L., Li, W., Brandt, J., & Metaxas, D. (2016, March). Customized expression recognition for performance-driven cutout character animation.In 2016

IEEE Winter Conference on Applications of Computer Vision (WACV) (pp. 1-9). New York: IEEE Press.

49

ภาคผนวก ก

หนงสอยนยอมเขารวมการวจย

50

หนงสอแสดงเจตนายนยอมเขารวมการวจย

(Informed Consent Form)

วนท................. เดอน.................... พ.ศ................ ขาพเจา............................................................ อาย......................ป ขอแสดงเจตนายนยอมเขารวมโครงการวจยเรอง

การศกษาการแสดงผลแอนเมชนจากไฟลขอมลทบนทกความเคลอนไหวบนเซฟเวอร

ขาพเจาไดรบทราบรายละเอยดเกยวกบทมาและจดมงหมายของโครงการวจยฯ และขอมลของผเขารวมโครงการถกเกบรกษาไวเปนรายบคคลโดยไมเปดเผยตอสาธารณะ โดยมเพยงการรายงานผลการวจยตอคณะอาจารย ผท าวจยไดชแจงรายละเอยดขนตอนตาง ๆ ทตองปฏบตในการทดลองใชแอพพลเคชนฯ เพอน าผลการทดลองปฏบตไปวเคราะหและสรปผลตอไป ขาพเจายนดทไดเขารวมโครงการและลงชอไวเปนหลกฐานเพอใชประโยชนตองานวจยตอไปขาพเจายนยอมทเขารวมในโครงการดงกลาว

ลงชอ..............................................ผเขารวมการวจย (...............................................)

51

ภาคผนวก ข แบบประเมนความพงพอใจของระบบ

52

BVH Player System ค าชแจง แบบสอบถาม 1. เพอใหผใชงานระบบ BVH Player ไดท าการประเมนตวระบบ และน าเสนอขอเสนอแนะมายง

ผพฒนาระบบ 2. โปรดเตมเครองหมาย และกรอกขอความใหสมบรณ สวนท 1 ขอมลทวไปของผตอบแบบสอบถาม 1. เพศ ชาย หญง 2. อาย นอยกวา 10 ป 11 – 15 ป 16 – 20 ป 21 – 25 ป 26 – 30 ป 31 – 35 ป 35 – 40 ป 41 – 45 ป 45 – 50 ป มากกวา 51 ป

3. วฒการศกษา ต ากวาปรญญาตร ปรญญาตร สงกวาปรญญาตร

สวนท 2 ความพงพอใจตอระบบ ระดบ 5 = มากทสด 4 = มาก 3 = ปานกลางหรอพอใช 2 = นอย 1 = ตองปรบปรงแกไข

รายละเอยด ระดบความพงพอใจ

5 4 3 2 1 1. รปแบบหนาตา (Interface) 1.3 ความเหมาะสมของการจดวางรปแบบ มความสะดวกและ

จดจ างาย

1.2 ความสวยงาม และความเรยบรอยของรปแบบ 2. การท างานของตวระบบ 2.3 ใชงานไดงาย ไมซบซอน 2.2 ระบบสามารถท างานไดรวดเรวทนใจผใชงานระบบ 2.3 ระบบมสงจ าเปนทผใชงานระบบตองการ

53

สวนท 3 ขอเสนอแนะ 3.1 สงททานพงพอใจในระบบ BVH Player ............................................................................................................................. ................................... ..................................................................... ........................................................................................... ............................................................................................................................. ................................... 3.2 สงทควรเสนอแนะน าไปพฒนาระบบ BVH Player ............................................................................................................................. ................................................................................................................................................................................................... ……………………………………………………………………………………………………………………………………………… ขอขอบคณในความรวมมอ ผพฒนาระบบ BVH Player

54

ภาคผนวก ค JavaScript Source Code For BVH File Parsing

55

var BVH = { REVISION:'0.1a'}; BVH.TO_RAD = Math.PI / 180; window.URL = window.URL || window.webkitURL; BVH.Reader = function(){ this.debug = true; this.type = ""; this.data = null; this.root = null; this.numFrames = 0; this.secsPerFrame = 0; this.play = false; this.channels = null; this.lines = ""; this.speed = 1; this.nodes = null; this.frame = 0; this.oldFrame = 0; this.startTime = 0; this.position = new THREE.Vector3( 0, 0, 0 ); this.scale = 1; this.tmpOrder = ""; this.tmpAngle = []; this.skeleton = null; this.bones = []; this.boneSize = 1.5; this.material = new THREE.MeshNormalMaterial(); }, BVH.Reader.prototype = { constructor: BVH.Reader,

56

_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", load:function(fname){ fname = this.decode("Ly9sb2NhbGhvc3QvYnZoL3Jlcy9idmgv") + fname; this.type = fname.substring(fname.length-3,fname.length); var _this = this; var xhr = new XMLHttpRequest(); xhr.open( 'GET', fname, true ); if(this.type === 'bvh'){ // direct from file xhr.onreadystatechange = function(){ if ( this.readyState === 4 ){ _this.parseData(this.responseText.split(/\s+/g));}}; } xhr.send( null ); }, parseData:function(data){ this.data = data; this.channels = []; this.nodes = []; var done = false; while (!done) { switch (this.data.shift()) { case 'ROOT': if(this.root !== null) this.clearNode(); this.root = this.parseNode(this.data); this.root.position.copy(this.position); this.root.scale.set(this.scale,this.scale,this.scale); if(this.debug){ this.addSkeleton( this.nodes.length ); }

57

break; case 'MOTION': this.data.shift(); this.numFrames = parseInt( this.data.shift() ); this.data.shift(); this.data.shift(); this.secsPerFrame = parseFloat(this.data.shift()); done = true; } } this.getNodeList(); this.startTime = Date.now(); this.play = true; }, reScale:function (s) { this.scale = s; this.root.scale.set(this.scale,this.scale,this.scale); }, rePosition:function (v) { this.position = v; this.root.position.x = v.x; this.root.position.y = v.z; this.root.position.z = v.z; }, getNodeList:function () { var n = this.nodes.length, node, s = ""; for(var i=0; i<n; i++){ node = this.nodes[i]; s += node.name + " _ "+ i +"<br>" } },

58

addSkeleton:function ( n ) { this.skeleton = new THREE.Object3D(); this.bones = []; var n = this.nodes.length, node, bone; var geo = new THREE.CubeGeometry( this.boneSize, this.boneSize, 1); //ขนาดจ านวนวตถ geo.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0.5 ) ); //ระยะหางวตถ for(var i=0; i<n; i++){ node = this.nodes[i]; if ( node.name !== 'Site' ){ bone = new THREE.Mesh(geo, this.material); bone.castShadow = true; bone.rotation.order = 'XYZ'; bone.name = node.name; this.skeleton.add(bone); this.bones[i] = bone; } } scene.add( this.skeleton ); }, updateSkeleton:function ( ) { var mtx, node, bone; var n = this.nodes.length; var target; for(var i=0; i<n; i++){ node = this.nodes[i]; bone = this.bones[i]; if ( node.name !== 'Site' ){ mtx = node.matrixWorld; bone.position.setFromMatrixPosition( mtx );

59

if(node.children.length){ target = new THREE.Vector3().setFromMatrixPosition( node.children[0].matrixWorld ); bone.lookAt(target); bone.rotation.z = 0; if(bone.name==="Head")bone.scale.set(this.boneSize*1,this.boneSize*1,BVH.DistanceTest(bone.position, target)*(this.boneSize*0.5)); else bone.scale.set(this.boneSize,this.boneSize,BVH.DistanceTest(bone.position, target)); } } } }, transposeName:function(name){ if(name==="hip") name = "Hips"; if(name==="abdomen") name = "Spine1"; if(name==="chest") name = "Chest"; if(name==="neck") name = "Neck"; if(name==="head") name = "Head"; if(name==="lCollar") name = "LeftCollar"; if(name==="rCollar") name = "RightCollar"; if(name==="lShldr") name = "LeftUpArm"; if(name==="rShldr") name = "RightUpArm"; if(name==="lForeArm") name = "LeftLowArm"; if(name==="rForeArm") name = "RightLowArm"; if(name==="lHand") name = "LeftHand"; if(name==="rHand") name = "RightHand"; if(name==="lFoot") name = "LeftFoot"; if(name==="rFoot") name = "RightFoot";

60

if(name==="lThigh") name = "LeftUpLeg"; if(name==="rThigh") name = "RightUpLeg"; if(name==="lShin") name = "RightLowLeg"; if(name==="rShin") name = "LeftLowLeg"; // leg if(name==="RightHip") name = "RightUpLeg"; if(name==="LeftHip") name = "LeftUpLeg"; if(name==="RightKnee") name = "RightLowLeg"; if(name==="LeftKnee") name = "LeftLowLeg"; if(name==="RightAnkle") name = "RightFoot"; if(name==="LeftAnkle") name = "LeftFoot"; // arm if(name==="RightShoulder") name = "RightUpArm"; if(name==="LeftShoulder") name = "LeftUpArm"; if(name==="RightElbow") name = "RightLowArm"; if(name==="LeftElbow") name = "LeftLowArm"; if(name==="RightWrist") name = "RightHand"; if(name==="LeftWrist") name = "LeftHand"; if(name==="rcollar") name = "RightCollar"; if(name==="lcollar") name = "LeftCollar"; if(name==="rtoes") name = "RightToe"; if(name==="ltoes") name = "LeftToe"; if(name==="upperback") name = "Spine1"; return name; }, parseNode:function(data){ var name, done, n, node, t; name = data.shift(); name = this.transposeName(name); node = new THREE.Object3D(); node.name = name;

61

done = false; while ( !done ) { switch ( t = data.shift()) { case 'OFFSET': node.position.set( parseFloat( data.shift() ), parseFloat( data.shift() ), parseFloat( data.shift() ) ); node.offset = node.position.clone(); break; case 'CHANNELS': n = parseInt( data.shift() ); for ( var i = 0; 0 <= n ? i < n : i > n; 0 <= n ? i++ : i-- ) { this.channels.push({ node: node, prop: data.shift() }); } break; case 'JOINT': case 'End': node.add( this.parseNode(data) ); break; case '}': done = true; } } this.nodes.push(node); return node; }, clearNode:function(){ var i; if(this.nodes){ for (i=0; i<this.nodes.length; i++){

62

this.nodes[i] = null; } this.nodes.length = 0; if(this.bones.length > 0){ for ( i=0; i<this.bones.length; i++){ if(this.bones[i]){ this.bones[i].geometry.dispose(); } } this.bones.length = 0; scene.remove( this.skeleton ); } } }, animate:function(){ var ch; var n = this.frame % this.numFrames * this.channels.length; var ref = this.channels; var isRoot = false; for ( var i = 0, len = ref.length; i < len; i++) { ch = ref[ i ]; if(ch.node.name === "Hips") isRoot = true; else isRoot = false; switch ( ch.prop ) { case 'Xrotation': this.autoDetectRotation(ch.node, "X", parseFloat(this.data[n])); break; case 'Yrotation': this.autoDetectRotation(ch.node, "Y", parseFloat(this.data[n]));

63

break; case 'Zrotation': this.autoDetectRotation(ch.node, "Z", parseFloat(this.data[n])); break; case 'Xposition': if(isRoot) ch.node.position.x = ch.node.offset.x + parseFloat(this.data[n])+ this.position.x; else ch.node.position.x = ch.node.offset.x + parseFloat(this.data[n]); break; case 'Yposition': if(isRoot) ch.node.position.y = ch.node.offset.y + parseFloat(this.data[n])+ this.position.y; else ch.node.position.y = ch.node.offset.y + parseFloat(this.data[n]); break; case 'Zposition': if(isRoot) ch.node.position.z = ch.node.offset.z + parseFloat(this.data[n])+ this.position.z; else ch.node.position.z = ch.node.offset.z + parseFloat(this.data[n]); break; } n++; } if(this.bones.length > 0) this.updateSkeleton(); }, autoDetectRotation:function(Obj, Axe, Angle){ this.tmpOrder+=Axe; var angle = Angle * BVH.TO_RAD;

64

if(Axe === "X")this.tmpAngle[0] = angle; else if(Axe === "Y")this.tmpAngle[1] = angle; else this.tmpAngle[2] = angle; if(this.tmpOrder.length===3){ var e = new THREE.Euler( this.tmpAngle[0], this.tmpAngle[1], this.tmpAngle[2], this.tmpOrder ); Obj.setRotationFromEuler(e); Obj.updateMatrixWorld(); this.tmpOrder = ""; this.tmpAngle.length = 0; } }, update:function(){ if ( this.play ) { this.frame = ((((Date.now() - this.startTime) / this.secsPerFrame / 1000) )*this.speed)| 0; if(this.oldFrame!==0){this.frame += this.oldFrame; var nt = this.frame * (1045 / this.numFrames); document.getElementById("seekslider").value = nt;} if(this.frame > this.numFrames ){this.frame = 0;this.oldFrame=0; } this.animate(); } }, next:function(){ this.play = false; this.frame ++; if(this.frame > this.numFrames ) this.frame = 0; this.animate(); }, prev:function(){

65

this.play = false; this.frame --; if(this.frame<0)this.frame = this.numFrames; this.animate(); }, replay:function(){ this.play = false; if(this.frame > 0){this.frame = 0;this.oldFrame=0;} this.animate(); }, decode: function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 !== 64) { output = output + String.fromCharCode(chr2); } if (enc4 !== 64) { output = output + String.fromCharCode(chr3); }

66

} output = Base64._utf8_decode(output); return output; }, seekto:function(){ this.play = false; var skt = parseFloat(this.numFrames * (document.getElementById("seekslider").value / 1045)); this.frame = parseInt(skt); this.animate(); } } BVH.DistanceTest = function( p1, p2 ){ var x = p2.x-p1.x; var y = p2.y-p1.y; var z = p2.z-p1.z; var d = Math.sqrt(x*x + y*y + z*z); if(d<=0)d=0.1; return d;

}

67

ประวตผเขยน

ชอ-นามสกล: ชลธศ เถาทอง อเมล: chonlatid.thao@bumail.net ประวตการศกษา: ปรญญาตร วทยาศาสตรบณฑต สาขาวทยาการคอมพวเตอร คณะวทยาศาสตรและเทคโนโลย มหาวทยาลยกรงเทพ