เขียนโดย
Sirasit Boonklang – BorntoDev Co., Ltd.
ทำไมต้องสร้าง VR บนเว็บ
เมื่อนึกถึง VR เราก็จะนึกถึง VR Headset อย่าง Oculus Quest, HTC Vive, Google cardbord หรือ Samsung Gear VR แต่หากเราไม่ได้มีอุปกรณ์เหล่านี้ เรายังสามารถใช้ทำ VR บนเว็บและใช้งานข้ามแพลตฟอร์มไม่ว่าจะเป็นบนอุปกรณ์คอมพิวเตอร์๋หรือสมาร์ทโฟนของเพื่อนๆได้ ซึ่งการนำโมเดลหรือฉากต่างๆมาแสดงผ่านหน้าเว็บสามารถทำได้อย่างง่ายดายด้วยตัวช่วยอย่าง A-Frame นั่นเอง
A-Frame คืออะไร
A-Frame คือเว็บเฟรมเวิร์กสำหรับสร้าง Virtual Reality (VR) ด้วยภาษา HTML ที่แสนง่ายดายและยังเป็นโอเพ่นซอร์สใน VRcommunity ที่ใหญ่ที่สุดอีกด้วย จะน่าสนใจขนาดไหนลองดูตัวอย่างได้ที่ลิงก์นี้ได้เลยครับ 🔗 https://demo-wervr-aframe.azurewebsites.net
A-Frame รองรับ VR headsets เกือบทั้งหมด ไม่ว่าจะเป็น Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go และยังใช้กับ AR ได้อีกด้วย
คุณสมบัติเด่นของ
-
VR Made Simple: เพียงใส่ <script> และ <a-scene> A-Frame ก็จะจัดการรูปแบบ 3D, การตั้งค่า VR และการควบคุมเริ่มต้นต่างๆให้มาพร้อม ง่ายต่อการใช้งาน
-
Declarative HTML: ใช้ HTML ง่ายต่อการอ่าน ทำความเข้าใจ คัดลอกและวางโค้ด HTML เหมาะกับ web developers , ผู้ที่ชื่นชอบ VR, ศิลปิน, นักออกแบบ แม้แต่นักการศึกษาและเด็ก ๆ
-
Entity-Component Architecture: A-Frame เป็น three.js เฟรมเวิร์ก โครงสร้างเอนทิตี นำกลับมาใช้ใหม่ได้ HTML เป็นเพียงส่วนเล็กๆ ส่วนโค้ดหน้าบ้านเท่านั้น developers สามารถเข้าถึง JavaScript, DOM APIs, three.js, WebVR และ WebGL ได้
-
VR Cross Platform: ไม่มี VR Headsets ไม่มีปัญหา A-Frame สามารถทำงานได้ทั้ง บนเดสก์ท็อปและสมาร์ทโฟน
-
Visual Inspector: A-Frame มีเครื่องมือตรวจสอบภาพ 3 มิติในตัวที่สะดวก เ กด <ctrl> + <alt> + i แล้วเลื่อนไปรอบๆได้เลย
มาเริ่มต้นทำ Web VR กันเลย
1.เราสามารถเปิดโปรแกรม Visual Studio Code แล้วสร้างไฟล์ index.html ขึ้นมาทำการ Emmet HTML โดยใช้คำสั่ง ! แล้วกด TAB จะได้คำสั่งดังรูป
2.ทำการเพิ่มคำสั่งในการเรียกใช้งาน Aframe
3.ภายในแท็ก <body> สามารถ เพิ่มแท็ก <a-scene> ซึ่งแท็ก <a-scene> เป็นฉากที่ถูกแสดง และเป็น global root object แสดงเอนทิตีทั้งหมดที่อยู่ในฉาก
สามารถใส่สีพื้นหลังหรือภาพ 360° ให้กับฉากได้ด้วยแท็ก <a-sky> </a-sky> ดังรูป
4.และสามารถใช้โปรแกรม Google Street View เพื่อถ่ายภาพ 360 องศาแล้วนำภาพมาใส่ในแท็ก <a-sky> </a-sky> ได้ดังรูป
5.สามารถใส่ข้อความต่างๆลงไปได้ด้วยแท็ก <a-text”></a-text> ตัวอย่างเช่น
6.หากต้องการเพิ่มรูปทรง 3 มิติต่างๆ Aframe จะมีเป็นแท็กที่เกี่ยวกับรูปทรงเช่น ทรงกลม <a-sphere></a-sphere>, ทรงกระบอก <a-cylinder></a-cylinder> หรือรูปทรงสี่่เหลี่ยมด้วยแท็ก <a-box></a-box>
7.และยังสามารถนำไฟล์โมเดล 3 มิติที่อยู่ในรูปแบบไฟล์ glTF มาใส่ได้อีกด้วย โดยสามารถลองดาวน์โหลดไฟล์โมเดล 3 มิติได้จากเว็บแสดงโมเดล 3 มิติต่างๆ ที่มีทั้งแบบที่ฟรีและเสียเงินเช่น https://sketchfab.com/
8.หลังจากนั้นนำไฟล์ทั้งหมดที่ดาวน์โหลดมาใส่ไว้ในโฟลเดอร์
เดียวกับไฟล์ html แล้วใช้คำสั่ง <a-gltf-model src=”ชื่อไฟล์.gltf” width=”ขนาด” position=”ตำแหน่งแกน x ตำแหน่งแกน y ตำแหน่งแกน z”></a-gltf-model>
จะได้ผลลัพธ์ดังรูป
9.เมื่อเราใส่ฉากใส่โมเดลหรือองค์ประกอบต่างๆของเราเรียบร้อยแล้วเมื่อต้องการใช้จริง สามารถนำเว็บดังกล่าว Deploy ไปยังคลาวด์หรือเซิร์ฟเวอร์ได้เลย โดยในบทความนี้ผมขอ deploy ไปยัง azure app service แบบฟรีนะครับ ก่อนอื่นติดตั้ง Azure App Service extension for Visual Studio Code ก่อนนะครับ ดาวน์โหลดได้ที่ลิงก์นี้ครับ Azure App Service – Visual Studio Marketplace
10.ไปยัง Azure extension แล้วกดที่ปุ่ม + ใน APP SERVICE เลือก Create new web app แล้วตั้งชื่อเว็บโดยตัวอย่างจะใช้ชื่อว่า “demo-webvr360-aframe”
11.เลือก runtime stack เป็น PHP 8.0
12.เลือก pricing tier หรือระดับราคา โดยเราจะเลือกแบบ F1 ซึ่งจะฟรีและสำหรับ Dev/Test
13.เลือกโฟลเดอร์ของโปรเจคที่ต้องการ deploy
14.เมื่อมีการแจ้งเตือนว่า Deployment to “ชื่อโปรเจค” เสร็จแล้วสามารถกด Browse Website ได้เลย
เพียงเท่านี้ก็สามารถลองเล่นกันได้ทั้งจากในคอมพิวเตอร์และสมาร์ทโฟนได้เลยที่ลิงก์นี้
https://demo-webvr360-aframe.azurewebsites.net/
ตัวอย่างการใช้งาน 📱
สามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Aframe.io ได้ที่ A-Frame School (aframe.io)
หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?
อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้
-
ลดราคา!
-
ลดราคา!
-
ลดราคา!
-
ลดราคา!
