เจาะลึกการสร้าง Mesh ระนาบ WebXR สำรวจเทคนิคการสร้างรูปทรงพื้นผิวแบบไดนามิกและการสร้างประสบการณ์ความเป็นจริงเสริมที่สมจริงในหลากหลายแพลตฟอร์ม
การสร้าง Mesh ระนาบ WebXR: การสร้างรูปทรงพื้นผิวสำหรับประสบการณ์ที่สมจริง
WebXR กำลังปฏิวัติวิธีที่เราโต้ตอบกับโลกดิจิทัล โดยนำประสบการณ์ความเป็นจริงเสริม (AR) และความเป็นจริงเสมือน (VR) มาสู่เว็บเบราว์เซอร์โดยตรง แง่มุมพื้นฐานของการสร้างแอปพลิเคชัน AR ที่น่าสนใจด้วย WebXR คือความสามารถในการตรวจจับและสร้าง Mesh 3 มิติจากพื้นผิวในโลกแห่งความเป็นจริง ทำให้วัตถุเสมือนสามารถผสานรวมกับสภาพแวดล้อมของผู้ใช้ได้อย่างลงตัว กระบวนการนี้เรียกว่าการสร้าง Mesh ระนาบ ซึ่งเป็นจุดสนใจของคู่มือฉบับสมบูรณ์นี้
ทำความเข้าใจการตรวจจับระนาบใน WebXR
ก่อนที่เราจะสามารถสร้าง Mesh ได้ เราต้องเข้าใจว่า WebXR ตรวจจับระนาบในโลกแห่งความเป็นจริงได้อย่างไร ฟังก์ชันการทำงานนี้มีให้ผ่านอินเทอร์เฟซ XRPlaneSet ซึ่งสามารถเข้าถึงได้ผ่านเมธอด XRFrame.getDetectedPlanes() เทคโนโลยีเบื้องหลังอาศัยอัลกอริทึมคอมพิวเตอร์วิทัศน์ ซึ่งมักจะใช้ประโยชน์จากข้อมูลเซ็นเซอร์จากอุปกรณ์ของผู้ใช้ (เช่น กล้อง, มาตรความเร่ง, ไจโรสโคป) เพื่อระบุพื้นผิวที่เรียบ
แนวคิดหลัก:
- XRPlane: แสดงถึงระนาบที่ตรวจจับได้ในสภาพแวดล้อมของผู้ใช้ ให้ข้อมูลเกี่ยวกับรูปทรงเรขาคณิต, ตำแหน่ง และสถานะการติดตามของระนาบ
- XRPlaneSet: คอลเลกชันของออบเจกต์
XRPlaneที่ตรวจจับได้ในเฟรมปัจจุบัน - สถานะการติดตาม: บ่งชี้ถึงความน่าเชื่อถือของระนาบที่ตรวจจับได้ ระนาบอาจอยู่ในสถานะ 'ชั่วคราว' ในตอนแรก ในขณะที่ระบบรวบรวมข้อมูลเพิ่มเติม และในที่สุดจะเปลี่ยนเป็นสถานะ 'ติดตาม' เมื่อการติดตามมีความเสถียร
ตัวอย่างการใช้งานจริง:
พิจารณาสถานการณ์ที่ผู้ใช้กำลังมองห้องนั่งเล่นของตนผ่านกล้องสมาร์ทโฟนของตนโดยใช้แอปพลิเคชัน WebXR AR แอปพลิเคชันจะใช้การตรวจจับระนาบเพื่อระบุพื้น ผนัง และโต๊ะกาแฟ เป็นพื้นผิวที่เป็นไปได้สำหรับการวางวัตถุเสมือน พื้นผิวที่ตรวจจับเหล่านี้จะแสดงเป็นออบเจกต์ XRPlane ภายใน XRPlaneSet
วิธีการสร้าง Mesh ระนาบ
เมื่อเราตรวจจับระนาบได้แล้ว ขั้นตอนต่อไปคือการสร้าง Mesh 3 มิติที่แสดงถึงพื้นผิวเหล่านี้ มีหลายวิธีที่สามารถนำมาใช้ได้ ตั้งแต่ Mesh สี่เหลี่ยมอย่างง่ายไปจนถึง Mesh แบบไดนามิกที่ซับซ้อนมากขึ้น
1. Mesh สี่เหลี่ยมอย่างง่าย
วิธีที่ง่ายที่สุดคือการสร้าง Mesh สี่เหลี่ยมที่ประมาณระนาบที่ตรวจจับได้ ซึ่งเกี่ยวข้องกับการใช้คุณสมบัติ polygon ของ XRPlane ซึ่งให้จุดยอดของขอบเขตของระนาบ เราสามารถใช้จุดยอดเหล่านี้เพื่อกำหนดมุมของสี่เหลี่ยมของเรา
ตัวอย่างโค้ด (โดยใช้ Three.js):
// สมมติว่า 'plane' เป็นออบเจกต์ XRPlane
const polygon = plane.polygon;
const vertices = polygon.flatMap(point => [point.x, point.y, point.z]);
// ค้นหาค่า X และ Z น้อยสุดและมากสุดเพื่อสร้างสี่เหลี่ยมขอบเขต
let minX = Infinity;
let maxX = -Infinity;
let minZ = Infinity;
let maxZ = -Infinity;
for (let i = 0; i < vertices.length; i += 3) {
minX = Math.min(minX, vertices[i]);
maxX = Math.max(maxX, vertices[i]);
minZ = Math.min(minZ, vertices[i + 2]);
maxZ = Math.max(maxZ, vertices[i + 2]);
}
const width = maxX - minX;
const height = maxZ - minZ;
const geometry = new THREE.PlaneGeometry(width, height);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
// วาง Mesh ที่ตำแหน่งของระนาบ
const pose = frame.getPose(plane.planeSpace, xrReferenceSpace);
if (pose) {
mesh.position.set(pose.transform.position.x, pose.transform.position.y, pose.transform.position.z);
mesh.quaternion.set(pose.transform.orientation.x, pose.transform.orientation.y, pose.transform.orientation.z, pose.transform.orientation.w);
}
scene.add(mesh);
ข้อดี:
- ง่ายต่อการใช้งาน
- ต้นทุนการประมวลผลต่ำ
ข้อเสีย:
- อาจไม่แสดงรูปทรงที่แท้จริงของระนาบได้อย่างแม่นยำ โดยเฉพาะอย่างยิ่งหากไม่ใช่สี่เหลี่ยม
- ไม่สามารถจัดการกับการเปลี่ยนแปลงขอบเขตของระนาบได้ (เช่น เมื่อระนาบถูกปรับปรุงหรือถูกบดบัง)
2. Mesh แบบหลายเหลี่ยม
วิธีที่แม่นยำกว่าคือการสร้าง Mesh ที่ติดตามหลายเหลี่ยมของระนาบที่ตรวจจับได้อย่างใกล้ชิด ซึ่งเกี่ยวข้องกับการแบ่งหลายเหลี่ยมออกเป็นสามเหลี่ยมและสร้าง Mesh จากสามเหลี่ยมที่ได้
การแบ่งหลายเหลี่ยมเป็นสามเหลี่ยม:
การแบ่งหลายเหลี่ยมเป็นสามเหลี่ยมคือกระบวนการแบ่งหลายเหลี่ยมออกเป็นชุดของสามเหลี่ยม มีอัลกอริทึมหลายอย่างที่สามารถใช้สำหรับการแบ่งหลายเหลี่ยมเป็นสามเหลี่ยม เช่น อัลกอริทึม Ear Clipping หรืออัลกอริทึม Delaunay triangulation ไลบรารีอย่าง Earcut มักใช้สำหรับการแบ่งหลายเหลี่ยมเป็นสามเหลี่ยมอย่างมีประสิทธิภาพใน JavaScript
ตัวอย่างโค้ด (โดยใช้ Three.js และ Earcut):
import Earcut from 'earcut';
// สมมติว่า 'plane' เป็นออบเจกต์ XRPlane
const polygon = plane.polygon;
const vertices = polygon.flatMap(point => [point.x, point.y, point.z]);
// ทำให้จุดยอดแบนเป็นอาร์เรย์ 1 มิติสำหรับ Earcut
const flattenedVertices = polygon.flatMap(point => [point.x, point.z]); // Y สันนิษฐานว่ามีค่าเป็น 0 สำหรับระนาบ
// แบ่งหลายเหลี่ยมเป็นสามเหลี่ยมโดยใช้ Earcut
const triangles = Earcut(flattenedVertices, null, 2); // 2 บ่งชี้ว่ามี 2 ค่าต่อจุดยอด (x, z)
const geometry = new THREE.BufferGeometry();
// สร้างจุดยอด, ดัชนี และแนวฉากสำหรับ Mesh
const positions = new Float32Array(vertices);
const indices = new Uint32Array(triangles);
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
geometry.computeVertexNormals();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
// วาง Mesh ที่ตำแหน่งของระนาบ
const pose = frame.getPose(plane.planeSpace, xrReferenceSpace);
if (pose) {
mesh.position.set(pose.transform.position.x, pose.transform.position.y, pose.transform.position.z);
mesh.quaternion.set(pose.transform.orientation.x, pose.transform.orientation.y, pose.transform.orientation.z, pose.transform.orientation.w);
}
scene.add(mesh);
ข้อดี:
- แสดงรูปทรงของระนาบที่ตรวจจับได้อย่างแม่นยำยิ่งขึ้น
ข้อเสีย:
- ซับซ้อนกว่า Mesh สี่เหลี่ยมอย่างง่าย
- ต้องใช้ไลบรารีแบ่งหลายเหลี่ยมเป็นสามเหลี่ยม
- อาจยังไม่สามารถจัดการกับการเปลี่ยนแปลงขอบเขตของระนาบได้อย่างสมบูรณ์แบบ
3. การอัปเดต Mesh แบบไดนามิก
เมื่อระบบ WebXR ปรับปรุงความเข้าใจเกี่ยวกับสภาพแวดล้อม ระนาบที่ตรวจจับได้อาจเปลี่ยนแปลงไปตามกาลเวลา ขอบเขตของระนาบสามารถขยายใหญ่ขึ้นเมื่อตรวจพบพื้นที่มากขึ้น หรืออาจหดตัวหากส่วนหนึ่งของระนาบถูกบดบัง เพื่อรักษาการแสดงผลที่แม่นยำของโลกแห่งความเป็นจริง การอัปเดต Mesh ระนาบแบบไดนามิกจึงเป็นสิ่งสำคัญ
การนำไปใช้งาน:
- ในแต่ละเฟรม ให้วนซ้ำผ่าน
XRPlaneSetและเปรียบเทียบหลายเหลี่ยมปัจจุบันของแต่ละระนาบกับหลายเหลี่ยมก่อนหน้า - หากหลายเหลี่ยมมีการเปลี่ยนแปลงอย่างมีนัยสำคัญ ให้สร้าง Mesh ใหม่
- พิจารณาใช้เกณฑ์เพื่อหลีกเลี่ยงการสร้าง Mesh ใหม่โดยไม่จำเป็นสำหรับการเปลี่ยนแปลงเล็กน้อย
ตัวอย่างสถานการณ์:
ลองนึกภาพผู้ใช้เดินไปรอบๆ ห้องด้วยอุปกรณ์ AR ของตน ขณะที่พวกเขาเคลื่อนที่ ระบบ WebXR อาจตรวจพบพื้นมากขึ้น ทำให้ระนาบพื้นขยายใหญ่ขึ้น ในกรณีนี้ แอปพลิเคชันจะต้องอัปเดต Mesh พื้นเพื่อให้สะท้อนขอบเขตใหม่ของระนาบ ในทางกลับกัน หากผู้ใช้วางวัตถุบนพื้นซึ่งบดบังส่วนหนึ่งของระนาบ ระนาบพื้นอาจหดตัว ซึ่งต้องมีการอัปเดต Mesh อีกครั้ง
การปรับปรุงการสร้าง Mesh ระนาบเพื่อประสิทธิภาพ
การสร้าง Mesh ระนาบอาจใช้ทรัพยากรในการประมวลผลมาก โดยเฉพาะอย่างยิ่งกับการอัปเดต Mesh แบบไดนามิก จึงเป็นสิ่งสำคัญที่จะต้องปรับปรุงกระบวนการเพื่อให้แน่ใจว่าประสบการณ์ AR ที่ราบรื่นและตอบสนองได้ดี
เทคนิคการปรับปรุง:
- การแคช: แคช Mesh ที่สร้างขึ้นและสร้างใหม่เฉพาะเมื่อรูปทรงเรขาคณิตของระนาบมีการเปลี่ยนแปลงอย่างมีนัยสำคัญ
- LOD (Level of Detail): ใช้ระดับรายละเอียดที่แตกต่างกันสำหรับ Mesh ระนาบตามระยะห่างจากผู้ใช้ สำหรับระนาบที่อยู่ห่างไกล Mesh สี่เหลี่ยมอย่างง่ายอาจเพียงพอ ในขณะที่ระนาบที่อยู่ใกล้สามารถใช้ Mesh แบบหลายเหลี่ยมที่มีรายละเอียดมากขึ้น
- Web Workers: ถ่ายโอนการสร้าง Mesh ไปยัง Web Worker เพื่อหลีกเลี่ยงการบล็อกเธรดหลัก ซึ่งอาจทำให้เฟรมตกและกระตุก
- การทำให้รูปทรงเรขาคณิตง่ายขึ้น: ลดจำนวนสามเหลี่ยมใน Mesh โดยใช้อัลกอริทึมการทำให้รูปทรงเรขาคณิตง่ายขึ้น ไลบรารีอย่าง Simplify.js สามารถใช้สำหรับวัตถุประสงค์นี้ได้
- โครงสร้างข้อมูลที่มีประสิทธิภาพ: ใช้โครงสร้างข้อมูลที่มีประสิทธิภาพสำหรับการจัดเก็บและจัดการข้อมูล Mesh Typed arrays สามารถให้การปรับปรุงประสิทธิภาพที่สำคัญเมื่อเทียบกับ JavaScript arrays ทั่วไป
การผสานรวม Mesh ระนาบกับแสงและเงา
เพื่อสร้างประสบการณ์ AR ที่สมจริงอย่างแท้จริง สิ่งสำคัญคือต้องผสานรวม Mesh ระนาบที่สร้างขึ้นกับแสงและเงาที่สมจริง ซึ่งเกี่ยวข้องกับการตั้งค่าแสงที่เหมาะสมในฉากและการเปิดใช้งานการสร้างและรับเงาบน Mesh ระนาบ
การนำไปใช้งาน (โดยใช้ Three.js):
// เพิ่มแสงทิศทางไปยังฉาก
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 5, 5);
directionalLight.castShadow = true; // เปิดใช้งานการสร้างเงา
scene.add(directionalLight);
// กำหนดค่าแผนที่เงา
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 15;
// ตั้งค่า renderer ให้เปิดใช้งานเงา
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// ตั้งค่า Mesh ระนาบให้รับเงา
mesh.receiveShadow = true;
ข้อควรพิจารณาโดยรวม:
สภาพแสงแตกต่างกันอย่างมากในแต่ละภูมิภาคและสภาพแวดล้อม เมื่อออกแบบแอปพลิเคชัน AR สำหรับผู้ชมทั่วโลก ให้พิจารณาใช้แผนที่สภาพแวดล้อมหรือเทคนิคแสงแบบไดนามิกเพื่อปรับให้เข้ากับสภาพแสงของสภาพแวดล้อมโดยรอบ ซึ่งสามารถปรับปรุงความเป็นจริงและประสบการณ์ที่สมจริงของประสบการณ์ได้
เทคนิคขั้นสูง: การแบ่งส่วนเชิงความหมายและการจำแนกประเภทระนาบ
แพลตฟอร์ม AR สมัยใหม่กำลังรวมความสามารถในการแบ่งส่วนเชิงความหมายและการจำแนกประเภทระนาบเพิ่มมากขึ้น การแบ่งส่วนเชิงความหมายเกี่ยวข้องกับการระบุและติดป้ายประเภทต่างๆ ของวัตถุในฉาก (เช่น พื้น ผนัง เพดาน เฟอร์นิเจอร์) การจำแนกประเภทระนาบจะก้าวไปอีกขั้นโดยการจัดหมวดหมู่ระนาบที่ตรวจจับได้ตามการวางแนวและคุณสมบัติ (เช่น พื้นผิวแนวนอน, พื้นผิวแนวตั้ง)
ประโยชน์:
- การวางวัตถุที่ดีขึ้น: สามารถใช้การแบ่งส่วนเชิงความหมายและการจำแนกประเภทระนาบเพื่อวางวัตถุเสมือนบนพื้นผิวที่เหมาะสมได้โดยอัตโนมัติ ตัวอย่างเช่น โต๊ะเสมือนสามารถวางได้เฉพาะบนพื้นผิวแนวนอนที่ถูกจำแนกประเภทเป็นพื้นหรือโต๊ะ
- การโต้ตอบที่สมจริง: การทำความเข้าใจความหมายของสภาพแวดล้อมช่วยให้สามารถโต้ตอบระหว่างวัตถุเสมือนกับโลกแห่งความเป็นจริงได้อย่างสมจริงยิ่งขึ้น ตัวอย่างเช่น ลูกบอลเสมือนสามารถกลิ้งได้อย่างสมจริงบนพื้นผิวระนาบที่ตรวจจับได้
- ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง: ด้วยการทำความเข้าใจสภาพแวดล้อมของผู้ใช้โดยอัตโนมัติ แอปพลิเคชัน AR สามารถมอบประสบการณ์ผู้ใช้ที่ใช้งานง่ายและราบรื่นยิ่งขึ้น
ตัวอย่าง:
ลองนึกภาพแอปพลิเคชัน AR ที่ช่วยให้ผู้ใช้วางเฟอร์นิเจอร์เสมือนในห้องนั่งเล่นของตนได้ ด้วยการใช้การแบ่งส่วนเชิงความหมายและการจำแนกประเภทระนาบ แอปพลิเคชันสามารถระบุพื้นและผนังโดยอัตโนมัติ ทำให้ผู้ใช้วางเฟอร์นิเจอร์เสมือนในห้องได้อย่างง่ายดาย แอปพลิเคชันยังสามารถป้องกันไม่ให้ผู้ใช้วางเฟอร์นิเจอร์บนพื้นผิวที่ไม่เหมาะสม เช่น เพดาน
ข้อควรพิจารณาข้ามแพลตฟอร์ม
WebXR มุ่งมั่นที่จะมอบประสบการณ์ AR/VR ข้ามแพลตฟอร์ม แต่ก็ยังมีความแตกต่างบางประการในความสามารถในการตรวจจับระนาบในอุปกรณ์และแพลตฟอร์มต่างๆ ARKit (iOS) และ ARCore (Android) เป็นแพลตฟอร์ม AR พื้นฐานที่ WebXR ใช้ประโยชน์บนอุปกรณ์มือถือ และอาจมีความแม่นยำและการสนับสนุนคุณสมบัติต่างๆ แตกต่างกันไป
แนวทางปฏิบัติที่ดีที่สุด:
- การตรวจจับคุณสมบัติ: ใช้การตรวจจับคุณสมบัติเพื่อตรวจสอบความพร้อมใช้งานของการตรวจจับระนาบบนอุปกรณ์ปัจจุบัน
- กลไกการสำรอง: ใช้กลไกการสำรองสำหรับอุปกรณ์ที่ไม่รองรับการตรวจจับระนาบ ตัวอย่างเช่น คุณอาจอนุญาตให้ผู้ใช้กำหนดตำแหน่งวัตถุเสมือนในฉากด้วยตนเอง
- กลยุทธ์การปรับตัว: ปรับพฤติกรรมแอปพลิเคชันของคุณตามคุณภาพของการตรวจจับระนาบ หากการตรวจจับระนาบไม่น่าเชื่อถือ คุณอาจต้องการลดจำนวนวัตถุเสมือนหรือทำให้การโต้ตอบง่ายขึ้น
ข้อควรพิจารณาด้านจริยธรรม
เมื่อเทคโนโลยี AR แพร่หลายมากขึ้น สิ่งสำคัญคือต้องพิจารณาผลกระทบด้านจริยธรรมของการตรวจจับระนาบและการสร้างรูปทรงพื้นผิว ข้อกังวลประการหนึ่งคือศักยภาพในการละเมิดความเป็นส่วนตัว แอปพลิเคชัน AR สามารถรวบรวมข้อมูลเกี่ยวกับสภาพแวดล้อมของผู้ใช้ รวมถึงรูปแบบของบ้านหรือสำนักงานของตน เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องโปร่งใสเกี่ยวกับวิธีการนำข้อมูลนี้ไปใช้และให้ผู้ใช้ควบคุมการตั้งค่าความเป็นส่วนตัวของตน
แนวทางจริยธรรม:
- การลดปริมาณข้อมูล: รวบรวมเฉพาะข้อมูลที่จำเป็นเพื่อให้แอปพลิเคชันทำงานได้
- ความโปร่งใส: โปร่งใสเกี่ยวกับวิธีการรวบรวมและใช้ข้อมูล
- การควบคุมของผู้ใช้: ให้ผู้ใช้ควบคุมการตั้งค่าความเป็นส่วนตัวของตน
- ความปลอดภัย: จัดเก็บและส่งข้อมูลผู้ใช้อย่างปลอดภัย
- การเข้าถึง: ตรวจสอบให้แน่ใจว่าแอปพลิเคชัน AR สามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ
บทสรุป
การสร้าง Mesh ระนาบ WebXR เป็นเทคนิคที่ทรงพลังสำหรับการสร้างประสบการณ์ AR ที่สมจริง ด้วยการตรวจจับและแสดงพื้นผิวในโลกแห่งความเป็นจริงอย่างแม่นยำ นักพัฒนาจึงสามารถผสานรวมวัตถุเสมือนเข้ากับสภาพแวดล้อมของผู้ใช้ได้อย่างลงตัว เมื่อเทคโนโลยี WebXR พัฒนาอย่างต่อเนื่อง เราคาดหวังว่าจะได้เห็นเทคนิคที่ซับซ้อนยิ่งขึ้นสำหรับการตรวจจับระนาบและการสร้าง Mesh ซึ่งจะเปิดใช้งานแอปพลิเคชัน AR ที่สมจริงและน่าดึงดูดใจยิ่งขึ้น จากประสบการณ์อีคอมเมิร์ซที่อนุญาตให้ผู้ใช้วางเฟอร์นิเจอร์เสมือนในบ้านของตน (ดังที่เห็นทั่วโลกในแอป AR ของ IKEA) ไปจนถึงเครื่องมือเพื่อการศึกษาที่ซ้อนทับสื่อการเรียนรู้แบบโต้ตอบบนวัตถุในโลกแห่งความเป็นจริง ความเป็นไปได้นั้นกว้างใหญ่
ด้วยการทำความเข้าใจแนวคิดหลัก การเชี่ยวชาญเทคนิคการนำไปใช้งาน และการยึดมั่นในแนวทางปฏิบัติที่ดีที่สุด นักพัฒนาสามารถสร้างประสบการณ์ AR ที่น่าสนใจอย่างแท้จริง ซึ่งจะผลักดันขอบเขตของสิ่งที่เป็นไปได้บนเว็บ อย่าลืมให้ความสำคัญกับประสิทธิภาพ พิจารณาความเข้ากันได้ข้ามแพลตฟอร์ม และแก้ไขข้อควรพิจารณาด้านจริยธรรมเพื่อให้แน่ใจว่าแอปพลิเคชัน AR ของคุณน่าดึงดูดและมีความรับผิดชอบ
แหล่งข้อมูลและการเรียนรู้เพิ่มเติม
- ข้อกำหนด API อุปกรณ์ WebXR: https://www.w3.org/TR/webxr/
- Three.js: https://threejs.org/
- Babylon.js: https://www.babylonjs.com/
- Earcut (ไลบรารีการแบ่งหลายเหลี่ยมเป็นสามเหลี่ยม): https://github.com/mapbox/earcut
- ARKit (Apple): https://developer.apple.com/augmented-reality/arkit/
- ARCore (Google): https://developers.google.com/ar
เราขอแนะนำให้คุณสำรวจแหล่งข้อมูลเหล่านี้และทดลองสร้าง Mesh ระนาบในโปรเจกต์ WebXR ของคุณเอง อนาคตของเว็บนั้นสมจริง และ WebXR มอบเครื่องมือในการสร้างอนาคตนั้น