FRA500 : Human-Robotics Interface Class Project [ Keep Posing and Everyone Survives ]

Keep Posing and Everyone Survives

เกมเกี่ยวกับการถอดรหัสโดยมีผู้เล่น 2 ฝ่าย ได้แก่ฝ่ายแกะรหัส (Web Camera User) และฝ่ายช่วยเหลือ (VR User) มีการสื่อสารจากฝ่ายแกะรหัสส่งข้อมูล คอยสนับสนุนและส่งข้อมูลด้วยรหัสลับจากมือ ส่งข้อมูลไปยังฝ่ายช่วยเหลือที่สามารถติดต่อกลับด้วยแผ่นกระดาน และดำเนินการช่วยเหลือต่อไปให้ได้
(ธีมปัจจุบัน : ไฟไหม้และแผ่นดินไหว)

วัตถุประสงค์

เพื่อพัฒนาระบบเกมเสมือนจริงแบบร่วมมือกันที่ไม่สมมาตร ที่ผู้เล่นสองฝ่าย (VR Field Agent และ Web Operator) ต้องสื่อสารและแก้ปัญหาร่วมกันเพื่อทำภารกิจให้สำเร็จ
เพื่อประยุกต์ใช้เทคโนโลยีปัญญาประดิษฐ์ด้าน Computer Vision ในการตรวจจับท่าทางมือ (Hand Gesture Recognition) รวมถึงการตรวจจับสี (Color Detection) เพื่อใช้เป็นอินเทอร์เฟซในการควบคุมระบบและส่งคำสั่ง
เพื่อสร้างและจำลองสภาพแวดล้อม 3 มิติ ด้วยเอนจิน Unity
เพื่อพัฒนาระบบกลไกและปฏิสัมพันธ์ภายในโลกเสมือน เพื่อให้ผู้เล่นสามารถโต้ตอบกับวัตถุ 3 มิติในฉากได้อย่างสมบูรณ์แบบ เช่น กลไกการวาดภาพเพื่อส่งข้อมูล (VR Drawing), การโต้ตอบกับแผงวงจร และการตอบสนองต่อระบบฟิสิกส์ในเกม
เพื่อออกแบบและพัฒนาระบบสื่อสารข้อมูลแบบเรียลไทม์ระหว่างแพลตฟอร์ม Web Application และแว่นตา Virtual Reality ผ่านโปรโตคอล MQTT ให้มีความเสถียรและมีความหน่วง (Latency) ต่ำ
เพื่อศึกษาและประเมินประสิทธิภาพของการออกแบบปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์
เพื่อทดสอบประสบการณ์ผู้ใช้งาน (User Experience – UX)

ภาพรวมของระบบ

System Scenario

System Data Flow

System Overview

การออกแบบ (Design)

1. การออกแบบสภาพแวดล้อมจำลอง

1.1 Physical Workspace Layout

ทำการแบ่งพื้นที่ออกเป็น 5 ห้องในแก้ดำเนินเนื้อเรื่องเพื่อแก้ปัญหา ประกอบด้วย

ห้องโถงกลาง ห้องแรกเมื่อเข้าไปภายในตัวอาคาร อยู่บริเวณตรงกลางของภาพ
ห้องสำหรับอธิบายวิธีการเล่น อยู่บริเวณด้านล่างซ้ายของภาพ
ห้องปัญหาที่ 1 ปิดวาล์วไฟ เพื่อไม่ให้ไฟลามและดับไฟ อยู่บริเวณด้านบนซ้ายของภาพ
ห้องปัญหาที่ 2 ตามหาปุ่มเปิดห้องลับ อยู่บริเวณชั้น 2 ที่ครอบคลุมห้องอื่น ๆ ทั้งหมด
ห้องปัญหาที่ 3 รหัสสีเปิดประตูนิรภัย อยู่บริเวณด้านบนขวาของภาพ
ห้องปัญหาที่ 4 รหัสตัวเลขตามสัญลักษณ์เปิดประตูทางออก อยู่บริเวณด้านล่างขวาของภาพ

1.2 3D Environment

Start / Story Scene

ตัวอาคาร

ชั้นที่ 1

ชั้นที่ 2

Tutorial Room

Puzzle

Win Scene

Lose Scene

2. Programming Design

2.1 AI Computer Vision Flow Chart

2.2 VR Game State Logic (State Diagram)

2.3 UI/UX Design

Web-Camera

การลงมือทำ (Implementation)

1. การจัดเตรียมสภาพแวดล้อม

1.1 Web-Camera

Workspace

1.2 VR

Workspace

2. Core Algorithms & Function Modules

System Architecture Diagram

2.1 Web-Camera

2.2 VR

System Evaluation

1. System Performance

1.1 ประสิทธิภาพการแสดงผลและการตอบสนองในโลกเสมือน (VR Client Performance)

จุดประสงค์: เพื่อประเมินความลื่นไหลของการแสดงผล (Frame Rate) ขณะผู้เล่นเคลื่อนที่และตอบสนองต่อปริศนา

วิธีการทดลอง: บันทึกค่าเฟรมเรต (FPS – Frames Per Second) ในสถานการณ์ต่างๆ เช่น ยืนนิ่ง, เคลื่อนที่ด้วยความเร็วสูงสุด, และขณะใช้ระบบวาดภาพ (VR Drawing)

ผลการทดลอง:

สถานการณ์	FPS – Frames Per Second (Max)
ยืนนิ่ง	72.3
เคลื่อนที่	72.2
ขณะวาดภาพ	71.9

สรุปผลการทดลอง:

ความเสถียรของการแสดงผล (Display Stability): ค่าเฟรมเรตในทุกสถานการณ์เกาะกลุ่มกันอยู่ที่ระดับประมาณ 72 FPS (ยืนนิ่ง: 72.3, เคลื่อนที่: 72.2, วาดภาพ: 71.9) ซึ่งตัวเลข 72 FPS นี้สอดคล้องกับค่าอัตราการรีเฟรชหน้าจอ (Refresh Rate) มาตรฐานของแว่น VR แบบ Standalone (เช่น Oculus Quest 2) ผลลัพธ์นี้แสดงให้เห็นว่าแอปพลิเคชันสามารถดึงประสิทธิภาพของฮาร์ดแวร์มาทำงานได้อย่างเต็มที่โดยไม่เกิดอาการคอขวด (Bottleneck)
ผลกระทบจากการประมวลผลระบบย่อย (Sub-system Impact): เมื่อเปรียบเทียบสถานการณ์ที่ใช้ทรัพยากรน้อยที่สุดอย่างการ “ยืนนิ่ง” (72.3 FPS) กับสถานการณ์ที่ต้องใช้ทรัพยากรเครื่องสูงที่สุดในเกมคือ “ขณะวาดภาพ” (71.9 FPS) พบว่าค่าเฟรมเรตตกลงเพียง 0.4 FPS เท่านั้น ซึ่งเป็นความแตกต่างที่น้อยมากจนไม่มีนัยสำคัญ (Negligible drop) บ่งบอกว่าอัลกอริทึมที่ใช้ควบคุมระบบลอจิกเกม การประมวลผล Line Renderer และระบบ Network ถูกปรับแต่งมาอย่างมีประสิทธิภาพ (Optimized) ไม่กินทรัพยากร (CPU/GPU) ของแว่น VR จนเกินไป

1.2 ประสิทธิภาพของระบบประมวลผลภาพและท่าทาง (AI Vision Processing Performance)

จุดประสงค์: เพื่อวัดความเร็วในการประมวลผล (Processing Time) และความแม่นยำ (Accuracy) ของโมเดล MediaPipe และ Color Detection

วิธีการทดลอง:

ความเร็ว: วัดระยะเวลาที่ AI ใช้ประมวลผลภาพ 1 เฟรม (หน่วยเป็นมิลลิวินาที – ms) และคำนวณเป็นเฟรมเรตของหน้าเว็บ
ความแม่นยำ: ทดสอบทำท่าทาง (Gesture) และโชว์สี 50 ครั้ง และจดบันทึกจำนวนครั้งที่ AI ทายถูก (True Positive) และทายผิด (False Positive)

ผลการทดลอง:

ความเร็ว

สถานการณ์	FPS – Frames Per Second (Max)
ไม่ส่งสัญลักษณ์ใด ๆ	31.97
ใช้ 1 มือ (0-9)	32.59
ใช้ 2 มือ (Command)	32.64
สี	33.13

ตวามแม่นยำ

สถานการณ์	True Positive	False Positive	Accuracy
ใช้ 1 มือ (0-9)	49	1	98%
ใช้ 2 มือ (Command)	47	3	94%
สี (บริเวณโถงชั้น 7)	50	0	100%

สรุปผลการทดลอง:

ความเร็วในการประมวลผล (Processing Speed & Frame Rate): ผลการทดสอบแสดงให้เห็นว่าระบบสามารถรักษาอัตราเฟรมเรตสูงสุด (Max FPS) ได้อย่างเสถียรในระดับ 31 – 33 FPS ในทุกสถานการณ์ ซึ่งถือว่ามีความลื่นไหลและเพียงพอต่อการใช้งานแบบเรียลไทม์ (Real-time Interaction) อย่างมาก และการประมวลผลอัลกอริทึมทั้งการตรวจจับสี (33.13 FPS) การจับโครงสร้างมือเดียว (32.59 FPS) และสองมือ (32.64 FPS) กลับให้ค่า FPS ที่สูงกว่าและใกล้เคียงกับตอนที่ระบบไม่ได้ตรวจจับสิ่งใดเลย (31.97 FPS) ผลลัพธ์นี้เป็นข้อพิสูจน์ว่า อัลกอริทึม MediaPipe และ OpenCV (Color Masking) ที่นำมาใช้ ได้รับการปรับแต่ง (Optimized) มาอย่างมีประสิทธิภาพ ไม่กินทรัพยากรเครื่องจนเกินไป และไม่ก่อให้เกิดปัญหาคอขวด (Bottleneck) ในฝั่งของ Web Client
ความแม่นยำในการตรวจจับ (Detection Accuracy): จากการทดสอบสถานการณ์ละ 50 ครั้ง พบว่าระบบมีความแม่นยำอยู่ในเกณฑ์ ดีเยี่ยม (สูงกว่า 90% ในทุกโหมด) โดยมีรายละเอียดเชิงลึกดังนี้:
- การตรวจจับสี (ความแม่นยำ 100%): ทำผลงานได้ดีที่สุดโดยไม่พบข้อผิดพลาด (0 False Positive) ปัจจัยหลักมาจากสภาพแวดล้อมที่ทำการทดสอบ (บริเวณโถงชั้น 7) มีสภาพแสงที่คงที่และเหมาะสม ทำให้การกรองช่วงสีผ่านปริภูมิ HSV ทำงานได้อย่างสมบูรณ์แบบ
- การตรวจจับภาษามือ 1 มือ (ความแม่นยำ 98%): การแยกแยะตัวเลข 0-9 มีความแม่นยำสูงมาก มีความผิดพลาดเพียง 1 ครั้ง คาดว่าเกิดจากมุมของกล้องหรือการงอนิ้วที่อาจไม่ชัดเจนในบางจังหวะ
- การตรวจจับคำสั่งพิเศษ 2 มือ (ความแม่นยำ 94%): แม้จะเป็นโหมดที่มีความแม่นยำต่ำที่สุดในการทดสอบ (พบความผิดพลาด 3 ครั้ง) แต่ตัวเลข 94% ก็ยังถือว่าสูงมากในทางปฏิบัติ สาเหตุที่มี False Positive เกิดขึ้นบ้าง เป็นข้อจำกัดทางเทคนิคปกติ (Technical limitation) เนื่องจากการใช้สองมือเพิ่มความซับซ้อนของพิกัด Landmark และมีโอกาสที่นิ้วมือจะบดบังกันเอง (Occlusion) ทำให้ AI คำนวณระยะห่างคลาดเคลื่อนในบางเฟรม

1.3 ประสิทธิภาพการสื่อสารข้อมูลแบบเรียลไทม์ (Network Data Transmission & Latency)

จุดประสงค์: เพื่อวัดความหน่วง (Latency) ในการส่งข้อมูลผ่าน MQTT Broker ระหว่าง Operator (Web) และ Field Agent (VR)

วิธีการทดลอง:วัดระยะเวลาตั้งแต่ฝั่ง A กดส่งข้อมูล จนถึงฝั่ง B ได้รับข้อมูล (หน่วยเป็นวินาที – s)

ผลการทดลอง:

ข้อมูล	เวลา – Second (Max)
สัญญาณมือจาก Web-Cam ส่งให้ VR	0.2
สีจาก Web-Cam ส่งให้ VR	0.2
ภาพวาดจาก VR ส่งให้ Web-Cam	0.4

สรุปผลการทดลอง:

ประสิทธิภาพการส่งข้อมูลขนาดเล็ก (Small Payload Transmission): การส่งข้อมูลประเภทคำสั่ง (Command) เช่น สัญญาณมือและรหัสสี จากฝั่งหน้าเว็บไปยังแว่น VR ทำเวลาสูงสุดได้ที่ 0.2 วินาที (200 มิลลิวินาที) ซึ่งถือเป็นความหน่วงในระดับที่ต่ำมาก (Low Latency) สาเหตุที่สามารถทำความเร็วได้ในระดับนี้ เนื่องจากข้อมูลถูกส่งในรูปแบบข้อความตัวอักษร (String) ที่มีขนาดเล็กมาก (ไม่กี่ไบต์) ทำให้ตัวเซิร์ฟเวอร์ MQTT Broker สามารถทำ Message Routing กระจายข้อมูลไปยังปลายทางได้แทบจะในทันที
ประสิทธิภาพการส่งข้อมูลขนาดใหญ่ (Large Payload Transmission): ในสถานการณ์ที่ผู้เล่นฝั่ง VR ทำการส่ง “ข้อมูลภาพวาด” กลับมายังศูนย์ควบคุม ระบบใช้เวลาในการเดินทางสูงสุดที่ 0.4 วินาที (400 มิลลิวินาที) แม้จะใช้เวลามากกว่าคำสั่งประเภทข้อความถึง 1 เท่าตัว แต่ถือเป็นผลลัพธ์ที่ยอดเยี่ยมและเกินความคาดหมายทางวิศวกรรม เนื่องจากข้อมูลรูปภาพมีขนาดใหญ่กว่าคำสั่งข้อความหลายร้อยเท่า และต้องผ่านกระบวนการแปลงไฟล์ (Texture2D) เป็นการเข้ารหัสสายอักขระความยาวสูง (Base64 Encoding) ในฝั่ง Unity ก่อนส่ง และต้องนำไปถอดรหัสเพื่อแสดงผล (Rendering) บนแท็กรูปภาพในฝั่ง HTML อีกครั้ง การที่ระบบใช้เวลาเบ็ดเสร็จเพียง 0.4 วินาที พิสูจน์ให้เห็นถึงประสิทธิภาพของสถาปัตยกรรมระบบที่ออกแบบมาอย่างรัดกุม

2. Usability

Criteria

Usability(การใช้งาน)	User1 (ก่อนแก้ไข)	User1 (หลังแก้ไข)	User2 (ก่อนแก้ไข)	User2 (หลังแก้ไข)	User3 (หลังแก้ไข)	User4 (หลังแก้ไข)	User5 (ก่อนแก้ไข)	User5 (หลังแก้ไข)	Developer	Developer	Mean
ประสบการณ์ใช้งาน Hardware	ไม่เคยใช้ VR	ใช้ VR ครั้งนึง	ใช้ Webcam	ใช้ Webcam	ไม่ใช้ VR บ่อยมาก	เชี่ยวชาญ VR	ไม่เคยใช้ VR	ไม่เคยใช้ Web-cam	เชี่ยวชาญ webcam	เล่น VR ได้
ความพึงพอใจหลังการเล่น (Satisfaction)	5	3	4	4	5	3	4	2	4	4	3.8
เรียนรู้ง่าย (Learnability)	3	3	4	4	5	2	3	2	4	5	3.5
มีประสิทธิภาพและคุ้มค่า (Effectiveness)	5	3	4	4	5	4	3	3	3	5	3.9
น่าจดจำ (Memorability)	4	4	4	4	4	3	4	4	4	5	4
ข้อผิดพลาดที่เกิดขึ้น (Errors)	4	3	3	3	5	5	2	2	3	3	3.3

จากตารางการใช้งานของผู้ใช้งานดังกล่าวสามารถสรุปได้ว่า การเล่นเกมจำนวน 10 ครั้ง มีค่าเฉลี่ยอยู่ที่ [3.3,4] หรือคือให้ประสบการณ์ที่ปานกลางแต่ไม่ได้อยู่ในขั้นดีเยี่ยม ความพึงพอใจหลังการเล่นไปในทางที่พึงพอใจ มีความสับสนวิธีการเล่นระหว่างการเล่นบ้าง เกมค่อนข้างทำงานได้ดี, มีประสิทธิภาพสูง และมีจุดเด่นที่ทำให้น่าจดจำ โดยรวมแล้วพบข้อผิดพลาด (Error) บ้างแต่ยังสามารถเล่นต่อได้

3. Values for Specific Task

Criteria

Values for Specific Task (ระบบช่วยให้บรรลุเป้าหมาย)	User1 (ก่อนแก้ไข)	User1 (หลังแก้ไข)	User2 (ก่อนแก้ไข)	User2 (หลังแก้ไข)	User3 (หลังแก้ไข)	User4 (หลังแก้ไข)	User5 (ก่อนแก้ไข)	User5 (หลังแก้ไข)	Developer	Developer	Mean
ประสบการณ์ใช้งาน Hardware	ไม่เคยใช้ VR	ใช้ VR ครั้งนึง	ใช้ Webcam	ใช้ Webcam	ไม่ใช้ VR บ่อยมาก	เชี่ยวชาญ VR	ไม่เคยใช้ VR	ไม่เคยใช้ Web-cam	เชี่ยวชาญ webcam	เล่น VR ได้
Emotional (ความรู้สึก)	5	4	4	4	4	1	4	2	4	4	3.6
Persuasive (ความดึงดูดใจให้อยากเล่น)	5	4	3	4	3	3	4	2	3	5	3.6
Usable (ความสามารถในการเล่น / การควบคุม)	4	4	3	4	4	2	3	2	3	3	3.2
Desirable (ความน่าสนใจในการสั่งซื้อ/ต่อยอด)	4	3	3	3	3	2	3	3	3	4	3.1

จากตารางความพึงพอใจเมื่อเล่นให้บรรลุเป้าหมายดังกล่าวสามารถสรุปได้ว่า การเล่นเกมจำนวน 10 ครั้ง มีค่าเฉลี่ยอยู่ที่ [3.1,3.6] หรือคือค่อนข้างรู้สึกสนุกและเอนจอยกับเกม เกมมีความน่าสนใจและอยากเล่นอีก สามารถควบคุมเกมได้ในระดับทั่วไป แต่ยังมีจุดที่ต้องกำหนดจังหวะด้วยตนเอง รวมถึงแสดงความสนใจหากมีการปรับปรุงเกมเพิ่มเติมให้สมบูรณ์ยิ่งขึ้น

วีดีโอของการทำงาน

สรุปและข้อเสนอแนะ

ภาพรวมความพึงพอใจและประสิทธิภาพของเกม

คะแนนความพึงพอใจ: จากการเล่น 10 ครั้ง คะแนนเฉลี่ยโดยรวมอยู่ในระดับปานกลางถึงดี (ประมาณ 3.1 – 4.0) ผู้เล่นส่วนใหญ่รู้สึกพึงพอใจ สนุกกับเป้าหมายของเกม มีความสนใจอยากกลับมาเล่นซ้ำ และคาดหวังที่จะได้เห็นตัวเกมเวอร์ชันที่สมบูรณ์ขึ้น
ประสิทธิภาพของระบบ: ตัวเกมทำงานได้ดี มีประสิทธิภาพสูง และมีเอกลักษณ์ที่น่าจดจำ แม้จะพบข้อผิดพลาด (Error) ระหว่างทางบ้าง แต่ก็เป็นเพียงปัญหาเล็กน้อยที่ผู้เล่นยังสามารถเล่นต่อไปจนจบได้
ระบบการควบคุม: ผู้เล่นสามารถควบคุมเกมได้ในระดับมาตรฐาน แต่ยังมีจุดที่ต้องอาศัยการกะจังหวะหรือควบคุมด้วยตนเองอยู่บ้าง

ปัญหาและอุปสรรคที่ส่งผลกระทบต่อประสบการณ์ของผู้เล่น

อาการเวียนหัวจาก VR (Motion Sickness): เนื่องจากกลุ่มตัวอย่างส่วนใหญ่เป็นผู้เล่นมือใหม่ที่ไม่คุ้นเคยกับเทคโนโลยี VR ทำให้เกิดอาการเวียนหัว ซึ่งเป็นหนึ่งในปัจจัยที่บั่นทอนประสบการณ์และความสนุกในการเล่น
พฤติกรรมการข้ามคำแนะนำ (Instruction): ผู้เล่นส่วนใหญ่ (ตกอยู่ที่ 6 ครั้งต่อการเล่น 10 ครั้ง) ละเลยการอ่านวิธีการเล่นก่อนเริ่มเกม ส่งผลให้เกิดความสับสน ไม่เข้าใจกลไกของเกม และนำไปสู่ความรู้สึกว่าเกมไม่สนุกและน่าเบื่อในที่สุด

บทสรุป

ตัวเกมมีพื้นฐานที่ดีและมีศักยภาพในการดึงดูดผู้เล่น แต่ประสบการณ์เชิงบวกถูกลดทอนลงจาก ความไม่คุ้นเคยกับ VR และ พฤติกรรมการข้ามคำแนะนำ เป็นหลัก

ข้อเสนอแนะ

เพื่อแก้ปัญหาดังกล่าว อาจพิจารณาเปลี่ยนจากการใช้ข้อความให้อ่านเป็นระบบสอนเล่นเบื้องต้นที่ผู้เล่นต้องทำตามก่อนเริ่มเกมจริง เพื่อบังคับให้เข้าใจระบบโดยไม่ต้องอ่าน และอาจพิจารณาเพิ่มระบบช่วยเหลือหรือตั้งค่าการเคลื่อนไหวเพื่อลดอาการเวียนหัวสำหรับผู้เล่นมือใหม่

นอกจากนี้ยังมีข้อเสนอแนะจากฝั่ง Web Camera Developer ดังนี้

อัพโหลด Website Demo ขึ้นเป็น Website ที่สามารถ Interactive ได้จริง
เพิ่มวิธีการส่งข้อความให้หลากหลายมากขึ้นเพื่อเพิ่มเส้นทางในการสื่อสาร เช่น รับค่าสถานะความสำเร็จในแต่ละฐานจากแอพพลิเคชันบน VR เมื่อผู้เล่นฝั่ง VR ทำ puzzle สำเร็จในแต่ละฐาน หรือใส่รหัสผิดพลาด / ไม่ผ่านด่าน เพื่อให้ผู้เล่นฝั่ง Web Camera รับทราบการกระทำว่าควรหยุดส่งรหัสได้แล้ว หรือฝั่ง VR ยังต้องการรับค่าข้อมูลต่อ

และข้อเสนอแนะจากฝั่ง VR Developer ดังนี้

ตอนนี้พบข้อจำกัดตรงการ Build Application เป็นแอพพลิเคชันเกมจริงบนคอมพิวเตอร์ เนื่องจากมีการใช้ Library MQTT ที่ขาดความเสถียรในการส่งข้อมูลในรูปแบบของการใส่รหัส (SSL) ทำให้ขาดองค์ประกอบสำคัญในการขับเคลื่อนเกม และไม่สามารถเล่นเป็นเกมจริงได้
เพิ่มการติดต่อข้อมูลไปยังฝั่ง Web Camera ให้ง่ายและมองออกง่ายกว่านี้
ปรับการควบคุมในเกมให้ควบคุมง่ายขึ้น
เพิ่ม puzzle ให้มีความหลากหลาย และน่าตื่นเต้นมากกว่านี้

สมาชิก

1. เพลงพิณ ขวัญจิรา รหัส 66340500036

หน้าที่การพัฒนา : ออกแบบ Webcam & VR User Application

ความรับผิดชอบ :

ออกแบบและพัฒนาแอปพลิเคชันบนเว็บ (Web Camera Application): ดูแลสถาปัตยกรรมโดยรวมและการทำงานของฝั่งเว็บทั้งหมด
พัฒนาระบบ AI Vision และ Image Processing: ศึกษาและประยุกต์ใช้ MediaPipe (Hand Landmarks) ควบคู่กับการคำนวณ Euclidean Distance เพื่อตรวจจับท่าทางมือ (เช่น ท่าแตะนิ้วชี้, ภาษามือ ASL 0-9) และพัฒนาระบบตรวจจับสี (Color Detection) โดยใช้ไลบรารี OpenCV ในการแปลงค่า BGR เป็น HSV และทำ Color Masking เพื่อสร้างเงื่อนไข (If-Else Logic) ในการส่งคำสั่ง
พัฒนาระบบประมวลผลเสียงฝั่งเว็บ (Web Audio API): พัฒนาระบบบันทึกเสียงและแปลงสัญญาณเสียง (จาก PCM Analog เป็น WAV Blob และ Base64) เพื่อส่งข้อความเสียงผ่าน MQTT รวมถึงการรับข้อมูล Base64 จากฝั่ง VR กลับมาแปลงและเล่นเสียงผ่านหน้าเว็บ
พัฒนาระบบส่วนติดต่อผู้ใช้งาน (Web UI) และ MQTT Client: สร้างอินเทอร์เฟซเพื่อรับและแสดงผลข้อมูลรูปภาพ (Base64) จากแอปพลิเคชัน VR และจัดการส่งข้อความคำสั่งจาก Web Camera ผ่าน MQTT Broker ไปยังแอปพลิเคชัน VR
พัฒนาแอปพลิเคชัน VR (ส่วน UI และ Scene Management): พัฒนาฉากเปิด-ปิดเกม (Main Menu และ End Scene) จัดการระบบการเปลี่ยนฉาก (Scene Transition) และออกแบบพร้อมพัฒนาปริศนา (Puzzle) ในพื้นที่ชั้น 2
พัฒนาระบบรับคำสั่งใน VR (Action Handling): เขียนสคริปต์เพื่อรับคำสั่งจาก MQTT Broker ที่ฝั่ง Web Camera ส่งมา และแปลงเป็น Action ภายในเกม
การทดสอบและจัดทำเอกสาร: ดำเนินการทดสอบระบบร่วมกับผู้ใช้งานจริง (User Testing) รวบรวมข้อผิดพลาด (Debug) ทำเอกสารสรุป และอัปเดตความคืบหน้าผ่านบล็อก (Blog)

2. อัยย์รดา สินพัฒน์ฐากุล รหัส 66340500064

หน้าที่การพัฒนา : ออกแบบ VR User Application

ความรับผิดชอบ :

พัฒนาสภาพแวดล้อม 3 มิติ (3D Environment): ศึกษาและสร้างโมเดลโครงสร้างบ้านภายใน Unity โดยใช้เครื่องมือ ProBuilder
พัฒนาระบบเครือข่ายและ IoT (Network & Communication): ออกแบบระบบให้แอปพลิเคชัน VR สามารถสื่อสารกับ Web Camera ผ่าน HiveMQ (MQTT Broker) โดยรองรับทั้งการส่งข้อความตัวอักษรและข้อความเสียง (Voice/Text Communication) พร้อมทั้งศึกษาการเข้ารหัสข้อมูลแบบส่วนตัว (Private Message)
พัฒนาระบบรับคำสั่งและกลไกตอบสนองใน VR (Action Handling): เขียนสคริปต์ (Switch-Case) เพื่อประมวลผลคำสั่งจาก MQTT Broker และสร้าง Event ตอบสนองในเกม เช่น ระบบไฟ Blacklight (เปลี่ยน Material ของวัตถุ), ระบบ Thermal Vision (เปิดใช้งานแสงและปรับขนาดวัตถุ), ระบบหยุดเวลา (Time Freeze 10 วินาที) และระบบแสดงข้อความเมื่อไม่เข้าใจคำสั่ง
พัฒนาระบบกระดานวาดภาพจำลอง (Virtual Drawing Board): ประยุกต์ใช้คอมโพเนนต์ LineRenderer ควบคู่กับ RenderTexture เพื่อบันทึกพิกัดการวาดภาพของผู้เล่นใน VR พร้อมพัฒนาระบบแปลงภาพวาดเป็นไฟล์รูปภาพ (JPG) และเข้ารหัสเป็น Base64 เพื่อส่งข้อมูลกลับไปยังหน้าเว็บ
พัฒนาปริศนา (Puzzle) หลัก: รับผิดชอบออกแบบและพัฒนาปริศนาที่เหลือจำนวน 4 ด่านภายในแอปพลิเคชัน VR
พัฒนาระบบเกมเพลย์ (Gameplay Mechanics): สร้างระบบนับเวลาถอยหลัง (Countdown Timer) และจัดการระบบเสียงประกอบ (Audio/Sound Effects) ภายในฉาก
พัฒนาระบบปฏิสัมพันธ์ (VR Interaction & Navigation): สร้างระบบนำทางและปรับแต่งการโต้ตอบระหว่างผู้เล่นกับปุ่มหรือวัตถุ (GameObjects) ในโลก VR ให้ลื่นไหลและมอบประสบการณ์ที่ดีแก่ผู้เล่น
การนำเสนอและจัดทำเอกสาร: ดำเนินการทดสอบระบบ (User Testing) จัดทำเอกสาร อัปเดตบล็อก และรับผิดชอบการออกแบบสไลด์สำหรับการนำเสนอโครงงาน

แหล่งอ้างอิง

1. กลุ่มระบบ AI Vision และการประมวลผลภาพ (AI & Computer Vision)

MediaPipe (โดย Google):
- การใช้งานในโปรเจกต์: ใช้โมดูล Hand Landmarks ในการตรวจจับพิกัดโครงสร้างมือ เพื่อนำมาคำนวณ Euclidean Distance สำหรับระบุท่าทาง (Gesture) เช่น ท่าแตะนิ้วชี้ หรือภาษามือ ASL
- แหล่งอ้างอิง: MediaPipe Hand Landmarker
OpenCV (Open Source Computer Vision Library):
- การใช้งานในโปรเจกต์: ใช้ในการประมวลผลภาพ (Image Processing) เช่น การแปลงพื้นที่สีจาก BGR เป็น HSV, การทำ Color Masking, และฟังก์ชัน findContours สำหรับแยกแยะสีของวัตถุและหาพื้นที่ที่ใหญ่ที่สุด
- แหล่งอ้างอิง: OpenCV.js หรือ OpenCV Official

2. กลุ่มระบบเครือข่ายและการสื่อสาร (Networking & Communication)

MQTT Protocol (Message Queuing Telemetry Transport):
- การใช้งานในโปรเจกต์: โพรโทคอลหลักที่ใช้ส่งข้อมูลแบบ Publish/Subscribe ระหว่าง Web Camera และ VR Application ทำให้ส่งคำสั่งได้แบบเรียลไทม์
- แหล่งอ้างอิง: MQTT Official Website
HiveMQ (MQTT Broker):
- การใช้งานในโปรเจกต์: ทำหน้าที่เป็นตัวกลาง (Broker) ในการรับส่งข้อความผ่าน Topic ต่างๆ เช่น drcc/vr/command, drcc/vr/voice
- แหล่งอ้างอิง: HiveMQ Official Website
Eclipse Paho MQTT JavaScript Client:
- การใช้งานในโปรเจกต์: ไลบรารีที่ฝั่ง Web Camera ใช้เพื่อเชื่อมต่อและจัดการการทำงานของ MQTT Client
- แหล่งอ้างอิง: Eclipse Paho JavaScript Client

3. กลุ่ม Game Engine และสภาพแวดล้อมเสมือนจริง (VR & 3D Environment)

Unity (Game Engine):
- การใช้งานในโปรเจกต์: ซอฟต์แวร์หลักที่ใช้พัฒนา VR Application ทั้งหมด (การจัดการ Scene, UI, 3D GameObjects, Action Scripting)
- แหล่งอ้างอิง: Unity Official Website หรือ Unity Documentation
ProBuilder (Unity Package):
- การใช้งานในโปรเจกต์: เครื่องมือสำหรับสร้างและปรับแต่งโมเดล 3 มิติ (3D Modeling) เช่น โครงสร้างบ้าน ภายในเอนจิน Unity โดยตรง
- แหล่งอ้างอิง: Unity ProBuilder Documentation
Unity LineRenderer & RenderTexture:
- การใช้งานในโปรเจกต์: คอมโพเนนต์ที่ใช้สำหรับสร้างกระดานวาดภาพจำลอง (Virtual Drawing Board) โดยรับพิกัดมาวาดเส้นและบันทึกลงเป็นพื้นผิวรูปภาพ
- แหล่งอ้างอิง: LineRenderer Docs และ RenderTexture Docs
Unity Free Asset
- แหล่งอ้างอิง : asset ทั้งหมดที่ใช้

4. กลุ่มเทคโนโลยีเว็บไซต์และการจัดการข้อมูล (Web API & Data Encoding)

Web Audio API & MediaRecorder:
- การใช้งานในโปรเจกต์: ใช้บันทึกเสียงผู้ใช้งานจากไมโครโฟนบนเว็บเบราว์เซอร์ แปลงสัญญาณ (PCM Analog) ให้กลายเป็นไฟล์เสียงดิจิทัล (WAV Blob) รวมถึงการรับเสียงมาเล่นออกลำโพง
- แหล่งอ้างอิง: MDN Web Docs: Web Audio API และ MediaRecorder API
Base64 Encoding:
- การใช้งานในโปรเจกต์: รูปแบบการเข้ารหัสข้อมูลที่ใช้แปลงไฟล์รูปภาพ (JPG จาก VR) และไฟล์เสียง (WAV จาก Web) ให้เป็นสายอักขระ (String) เพื่อให้สามารถส่งผ่าน MQTT Payload ได้
- แหล่งอ้างอิง: MDN Web Docs: Base64