METAVERSE ใน SPATIAL.IO เบื้องต้น PROJECTT IN DIGITAL COMMUNICATION II คู่มือการสร้าง และการใช้งาน
สารบับัญ บั ญ บั
Spatial Metaverse คือคือะไร Spatial.io ใช้งช้านทำ อะไรได้บ้ด้าบ้ง ฝั่งฝั่ผู้ใผู้ช้งช้าน วิธีวิกธีารสมัคมัรใช้งช้าน การสร้าร้งAvatar วิธีวิกธีารเยี่ย ยี่ มชม Spatial.io วิธีวิกธีารใช้งช้านเบื้อ บื้ งต้นต้ ฝั่งฝั่ผู้ใผู้ช้งช้าน การสร้าร้งและแก้ไก้ข Environment การเพิ่มพิ่วัตวัถุหถุรือรืเนื้อ นื้ หา การอัปอั โหลดเนื้อ นื้ หา&ประเภทไฟล์ที่ล์ร ที่ องรับรั การทำ Skybox คำ แนะนำ การเตรียรีมโมเดล3D การเตรียรีมโมเดล จากโปรแกรม Blender
Spatial Metaverse คือคืแพลตฟอร์มร์สร้าร้งโลกเสมือมืนจริงริหรือรื Metaverse สำ เร็จร็รูปรูที่นำ ที่ นำเอาเทคโนโลยี Spatial VR (Virtual reality) มาสร้าร้ง เป็นป็ โลกเสมือมืนจริงริสำ เร็จร็รูปรูและเปิดปิ ให้ผู้ห้ ใผู้ช้งช้านสามารถใช้งช้านในโลกเสมือมืนเหล่าล่ นั้นนั้ ได้ ไม่ว่ม่าว่จะเป็นป็การเดินดิเยี่ย ยี่ มชม, พูดพูคุยคุและมีปมีฏิสัฏิมสัพันพัธ์กัธ์บกัผู้อื่น อื่ นอกจากนี้ผู้ นี้ ใผู้ช้งช้านยังสามารถนำ เทมเพลตโลกเสมือมืนที่มี ที่ ใมีห้มห้าพัฒพันา ต่อต่เป็นป็ Metaverse ของตนเองได้ และสามารถสร้าร้งสรรค์โค์ลกขึ้นมาใหม่ผ่ม่าผ่น โปรแกรมที่ใที่ ช้สช้ร้าร้งงาน 3มิติมิ ติโดยในปัจปัจุบัจุนบั Spatial.io สามารถใช้งช้านได้ทั้ด้งทั้ผ่าผ่น เว็บว็ ไซต์ แอปพลิเลิคชันชัรวมถึงถึให้บห้ริกริารในระบบ VR ผ่านแว่นว่และ Spatial.io ยัง เปิดปิ ให้ให้ช้งช้านฟรีไรีด้ทัด้นทัที Spatial Metaverse คือ คื อะไร
สามารถประยุกยุต์ใต์ช้เช้ป็นป็การจัดจั ประชุมชุออนไลน์ เรียรีนออนไลน์ และเป็นป็พื้น พื้ ที่ สำ หรับรัสร้าร้งปฏิสัฏิมสัพันพัธ์ด้ธ์วด้ยกิจกิกรรมในโลกเสมือมืนได้ สร้าร้ง Avatar ได้ด้ด้วด้ยตัวเลือลืกที่ห ที่ ลากหลาย ทั้งทั้ผ่านเทมเพลตสำ เร็จร็และ สร้าร้ง Avatar สไตล์สล์มจริงริที่ส ที่ ร้าร้งขึ้น ขึ้ จากรูปรูภาพของคุณคุ สร้าร้ง 3D Enviralment ได้อด้ย่าย่งอิสอิระและสามารถซื้อ ซื้ ขายได้ สามารถแชร์หร์น้าน้จอ และแชร์กร์ารวิดีวิโดีอคอลได้ สร้าร้ง Sticky Notes เพื่อ พื่ ทิ้งทิ้ข้อความเอาไว้บว้น Space ของคุณคุได้ เป็นป็พื้น พื้ ที่ใที่ นการสร้าร้ง และ Customize Space ของตัวเอง เพื่อ พื่ จัดจั กิจกิกรรมต่าต่งๆ เช่นช่การจัดจันิทนิรรศการ การประชุมชุอีเอีว้นว้ท์ และเข้าข้มาพบปะ สังสัสรรค์กัค์บกัเพื่อ พื่ นได้อด้ย่าย่งอิสอิระ โดยการใช้งช้านฟรีจรีะจำ กัดกัผู้ชผู้ มในห้อห้งไว้ที่ว้ ที่ 50 คน Spatial.io ใช้ง ช้ านทำ อะไรได้บ้ ด้ า บ้ ง
เข้าข้สู่ Spatial.io เปิดปิ ให้ให้ช้งช้านได้ฟด้รีโรีดยต้อต้ง Login หรือรื Sign up. วิธีวิก ธี ารสมัค มั รใช้ง ช้ าน เลือลืกสมัคมัรสมาชิกชิผ่าผ่นการผูกผูบัญบัชีต่ชีาต่งๆ ที่คุ ที่ ณคุมี เช่นช่ MetaMask, Google, Apple และ Microsoft หรือรืจะสมัคมัรใหม่ด้ม่วด้ยอีเอีมลก็ไก็ด้
ตั้งตั้ชื่อ ชื่ และสร้าร้ง 3D models Avatar ของคุณคุโดยสามารถเลือลืกได้ว่ด้าว่จะสร้าร้งเป็นป็ Avatar แบบสมจริงริที่ถ ที่ อดแบบมาจากรูปรูถ่าถ่ยของคุณคุก็ไก็ด้ หรือรื Customize ขึ้น ใหม่ทั้ม่งทั้หมดก็ไก็ด้ การสร้า ร้ งAvatar คุณคุสามารถเลือลืกและปรับรัแต่งต่ Avatarได้ตด้ามใจชอบ
เมื่อ มื่ สร้าร้ง Avatar เสร็จร็คุณคุจะก็สก็ามารถ เลือลืกเข้าข้ไปเดินดิเล่นล่และเยี่ย ยี่ มชม Space ต่าต่งๆ ที่มี ที่ คมีนสร้าร้งขึ้น ขึ้ ได้ ตามห้อห้งสาธารณะที่เ ที่ปิดปิ ให้เห้ข้าข้เยี่ย ยี่ มชม ไปที่ Explore Immersive Spaces วิธีวิก ธี ารเยี่ย ยี่ มชม Spatial.io
วิธีวิก ธี ารใช้ง ช้ านเบื้อ บื้ งต้น ต้ ใช้ปุ่ช้มปุ่ WASD ในการเคลื่อ ลื่ นที่ไที่ ป ข้าข้งหน้าน้ ข้าข้งหลังลัและข้าข้งๆ หรือรืใช้ ปุ่มปุ่ ลูกลูศร แทนได้ ในการเคลื่อ ลื่ นที่ข ที่ อง avatar ของคุณคุ ใช้ปุ่ช้มปุ่ Q และ E เพื่อ พื่ หมุนมุปรับรัมุมมุมอง ใช้ Spacebar ในการกระโดด ใช้ปุ่ช้มปุ่ คีย์คีย์ลัดลั 1-5 เพื่อ พื่ ลองแสดงท่าท่ทางต่าต่งๆ (เช่นช่เชียชีร์ และ ท่าท่เต้นเลียลีนแบบการกวน เนย)และปุ่มปุ่ C เพื่อ พื่ ปรบมือมื การควบคุมคุเมาส์ / Trackpad กดเมาส์เส์พื่อ พื่ เทเลพอร์ตร์ ไปยังยัตำ แหน่งน่ต่างๆ ในห้อห้ง กดและลากเมาส์เส์พื่อ พื่ หมุนมุปรับรัมุมมุ มอง เลื่อ ลื่ นหรือรืกางนิ้วนิ้เพื่อ พื่ ซูมซูเข้าข้และออก
เลือลืกที่ CREATE A SPACE การสร้า ร้ ง และแก้ไก้ ข Environment เลือลืกพื้น พื้ ที่ที่ ที่ ต้ ที่ อต้งการ มีทั้มีงทั้แบบเทมเพลตสำ เร็จร็รูปรูและคุณคุสามารถสร้าร้งพื้น พื้ ที่ข ที่ อง คุณคุเองได้ด้ด้วด้ย เลือลืกที่ Upload Custom Space
เลือลืก Select from your device Support (.FBX .GLTF .GLB) เลือลืกไฟล์ใล์นเครื่อ รื่ งของคุณคุแล้วล้รอ Upload Progress
คุณคุสามารถปรับรัแก้ไก้ขพื้น พื้ ที่ต ที่ ามแกน x,y,z หมุนมุได้ 360 องศา และปรับรัขนาดได้ อย่าย่งอิสอิระ เมื่อ มื่ ปรับรัเสร็จร็แล้วล้อยากแก้ไก้ขเพิ่มพิ่เติมติคุณคุสามารถเข้าข้ไปที่ Settings > Environment Settings > Edit Environment Position
เลือลืกที่ Add Content ไม่ว่ม่าว่จะเป็นป็งาน 3D 2D ภาพถ่าถ่ย และวิดีวิโดีอ Web App Toolkit จากซ้าซ้ยไปขวา: เพิ่มพิ่โน้ตน้ , ค้นค้หา, เพิ่มพิ่เนื้อ นื้ หาที่บั ที่ นบัทึกทึไว้,ว้สร้าร้งประตู (Portal), แชร์หร์น้าน้จอ การเพิ่ม พิ่ วัต วั ถุห ถุ รือ รื เนื้อ นื้ หา Object Toolkit จากซ้าซ้ยไปขวา: ดาวน์โน์หลดไฟล์,ล์ล็อล็กวัตวัถุ,ถุแก้ไก้ข, ทำ ซ้ำ , ตั้งตั้สภาพแวดล้อล้มเฉพาะ, แสดงแท่นท่วาง, ลบ
ประเภทไฟล์ ขนาดสูงสุด OBJ 100 MB glTF 100 MB GLB 100 MB ZIP 500 MB ไฟล์ 3D การอัปอั โหลดเนื้อ นื้ หา&ประเภทไฟล์ที่ ล์ ร ที่ องรับ รั ประเภทไฟล์ ขนาดสูงสุด FBX 100 MB DAE 60 MB PCD 10 MB ประเภทไฟล์ ขนาดสูงสุด PNG 10 MB JPEG 10 MB TIFF 10 MB รูปรูภาพ ประเภทไฟล์ ขนาดสูงสุด MP4 200 MB MOV 200 MB GIF 200 MB วิดีวิโดีอ เอกสาร ประเภทไฟล์ ขนาดสูงสุด PDF 100 MB MICROSOFT WORD .DOCX 100 MB MICROSOFT POWERPOINT .PPTX 100 MB MICROSOFT EXCEL .XLSX 100 MB
การทำ Skybox Skybox คือคืลูกลูกลม 360 องศาที่เ ที่ปลี่ย ลี่ นสภาพแวดล้อล้มของคุณคุคุณคุสามารถ แปลงภาพ 360 องศาใดๆก็ไก็ด้ใด้ห้เห้ป็นป็ Skybox 1. ดาวน์โน์หลดไฟล์ .zip นี้ ซึ่ง ซึ่ มี .jpg texture, .glTF โมเดล และ ไฟล์ .bin Skybox Spatial SampleDouble Side.zip สามารถดูลูดูกลูกลมได้จด้ากทั้งทั้ภายในและภายนอก https://drive.google.com/drive/folders/1RJvpOg6GPKYsaknhIhss5Ee4RlP7W0xX 2. Unzip ไฟล์ และลบ texture.jpg เก่าออก แล้วล้ลากภาพ 360 ของคุณคุมาใส่ใส่นไฟล์นี้ล์พ นี้ ร้อร้มตั้งตั้ชื่อ ชื่ ของไฟล์ที่ล์บั ที่ บันทึกทึทับทั ให้เป็น ‘texture.jpg’ (ใช้เช้ป็นไฟล์นล์ามสกุล .jpg เท่าท่นั้นนั้ )
3. ลากไฟล์ทั้ล์งทั้สามพร้อร้มกัน (Spatial Skybox Sample.gltf, Spatial Skybox Sample_data.bin, texture.jpeg) ลงใน http://glb-packer.glitch.me/ เพื่อ พื่ สร้าร้งไฟล์ glb ที่ส ที่ ามารถอัปอั โหลดได้ 4. พอได้ได้ฟล์นล์ามสกุล .GLTF แล้วล้เราสามารถ Add content นั้นนั้ลงใน World ได้เด้ลย
File Optimization แนะนำ สูงสูสุดสุ Textures 1024px x 1024px, และ สูงสูสุดสุ8 textures ต่อต่ 1 ไฟล์ 1024px x 1024 px, ไม่เม่กินกิ 16 textures หรือรื 2048px x 2048px, สูงสูสุดสุ4 textures ต่อต่ file Object Count 1. สำ หรับรัenvironment object: น้อน้ยกว่าว่ 10 2. สำ หรับรัsingle object: น้อน้ยกว่าว่ 3 1. สำ หรับรัenvironment object: 20 2. สำ หรับรัsingle object: 5 Vertex Count 1. สำ หรับรัenvironment object: 20. 2. สำ หรับรัsingle object: 5 1. สำ หรับรัenvironment object: 300k 2. สำ หรับรัsingle object: 50k Triangles 1. สำ หรับรัenvironment object: น้อน้ยกว่าว่ 60k 2. สำ หรับรัsingle object: น้อน้ยกว่าว่ 15k 1. สำ หรับรัenvironment object: 180k 2. สำ หรับรัsingle object: 30k Shaders Unlit Unlit,Metallic/RoughnessและSpecular/Gl ossiness PBR Shadows แนะนำ ให้ bake lighting ลงใน textures เพื่อพื่ ให้ไห้ด้โด้มเดลที่เที่สมือมืนจริงริมากขึ้นขึ้ realtime shadows เท่าท่นั้นนั้บนอุปอุกรณ์ไณ์ร้สร้าย (Android/iOS)แต่ไต่ม่ไม่ด้ใด้ห้คุห้ณคุภาพที่ดีที่ที่ดีสุที่ดสุ คำ แนะนำ การเตรีย รี มโมเดล3D
ขั้นขั้ที่ 1 เลือลืก Export และเลือลืกนามสกุลไฟล์ที่ล์ ที่ Spatial.io รองรับรัแนะนำ ให้ใช้ .glb / .gltf การเตรีย รี มโมเดล จากโปรแกรม Blender ขั้นขั้ที่ 2 เลือลืกที่เ ที่ ก็บไฟล์แล์ล้วล้ตั้งตั้ชื่อ ชื่
แนะนำ การตั้งตั้ค่าค่ กรณี export แค่วัค่ตวัถุที่ต้ ที่ อต้งการ ให้เลือลืกวัตวัถุที่ต้ ที่ อต้งการ export แล้วล้กดที่คำ ที่ คำว่าว่ Selected Objects กรณีที่ณีเ ที่ ราใช้ Modify Poperties ให้เลือลืก Apply modify เพื่อ พื่ ให้วัตวัถุยังคงสภาพเดิมดิ