หน้านี้จะแนะนำการสร้างแอปพลิเคชัน AR แบบสมจริงแบบง่ายๆ โดยใช้ WebXR
คุณจะต้องมีสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ที่เข้ากันได้กับ WebXR เพื่อเริ่มต้นใช้งาน
สร้างหน้า HTML
WebXR ต้องใช้การโต้ตอบของผู้ใช้เพื่อให้เริ่มเซสชันได้
สร้างปุ่มที่เรียกใช้ activateXR()
เมื่อโหลดหน้าเว็บแล้ว ผู้ใช้จะใช้ปุ่มนี้เพื่อเริ่มประสบการณ์ AR ได้
สร้างไฟล์ใหม่ชื่อ index.html
และเพิ่มโค้ด HTML ต่อไปนี้ลงในไฟล์
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Hello WebXR!</title>
<!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
</head>
<body>
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
<button onclick="activateXR()">Start Hello WebXR</button>
<script>
async function activateXR() {
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const gl = canvas.getContext("webgl", {xrCompatible: true});
// To be continued in upcoming steps.
}
</script>
</body>
</html>
เริ่มต้น 3.js
จะมีการทำงานน้อยลงเมื่อกดปุ่ม Start ในการสร้างสภาพแวดล้อม 3 มิติ คุณสามารถใช้ไลบรารีการแสดงผลเพื่อแสดงฉาก
ในตัวอย่างนี้ คุณจะใช้ three.js
ซึ่งเป็นไลบรารีการแสดงผล 3 มิติ JavaScript ที่มีตัวแสดงผล WebGL Three.js
จะจัดการการแสดงผล กล้อง และกราฟฉาก ซึ่งช่วยให้แสดงเนื้อหา 3 มิติบนเว็บได้ง่ายขึ้น
สร้างฉาก
โดยทั่วไป สภาพแวดล้อมแบบ 3 มิติจะได้รับการสร้างโมเดลเป็นฉาก สร้าง THREE.Scene
ที่มีองค์ประกอบ AR
โค้ดต่อไปนี้จะทำให้คุณดูกล่องสีที่ไม่มีไฟในโหมด AR ได้
เพิ่มโค้ดนี้ที่ด้านล่างของฟังก์ชัน activateXR()
const scene = new THREE.Scene();
// The cube will have a different color on each side.
const materials = [
new THREE.MeshBasicMaterial({color: 0xff0000}),
new THREE.MeshBasicMaterial({color: 0x0000ff}),
new THREE.MeshBasicMaterial({color: 0x00ff00}),
new THREE.MeshBasicMaterial({color: 0xff00ff}),
new THREE.MeshBasicMaterial({color: 0x00ffff}),
new THREE.MeshBasicMaterial({color: 0xffff00})
];
// Create the cube and add it to the demo scene.
const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
cube.position.set(1, 1, 1);
scene.add(cube);
ตั้งค่าการแสดงผลโดยใช้Three.js
หากต้องการดูฉากนี้ใน AR ได้ คุณจะต้องมีผู้แสดงภาพและกล้อง โหมดแสดงภาพใช้ WebGL เพื่อวาดฉากของคุณไปยังหน้าจอ กล้องจะอธิบายวิวพอร์ตที่ใช้ดูฉากนั้นๆ
เพิ่มโค้ดนี้ที่ด้านล่างของฟังก์ชัน activateXR()
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const renderer = new THREE.WebGLRenderer({
alpha: true,
preserveDrawingBuffer: true,
canvas: canvas,
context: gl
});
renderer.autoClear = false;
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
// to handle the matrices independently.
const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false;
สร้าง XRSession
จุดเข้าถึง WebXR คือผ่าน XRSystem.requestSession()
ใช้โหมด immersive-ar
เพื่อดูเนื้อหาที่แสดงผลในสภาพแวดล้อมจริง
XRReferenceSpace
อธิบายระบบพิกัดที่ใช้สำหรับวัตถุในโลกเสมือน
โหมด 'local'
เหมาะกับการใช้งาน AR มากที่สุด โดยมีพื้นที่อ้างอิงซึ่งมีต้นทางอยู่ใกล้กับแว่นและมีการติดตามที่เสถียร
หากต้องการสร้าง XRSession
และ XRReferenceSpace
ให้เพิ่มโค้ดนี้ที่ด้านล่างของฟังก์ชัน activateXR()
// Initialize a WebXR session using "immersive-ar".
const session = await navigator.xr.requestSession("immersive-ar");
session.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
// A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');
แสดงภาพฉาก
ตอนนี้คุณสามารถแสดงภาพฉากได้แล้ว XRSession.requestAnimationFrame()
กำหนดเวลาเรียกกลับซึ่งจะทำงานเมื่อเบราว์เซอร์พร้อมที่จะวาดเฟรม
ในระหว่างการเรียกกลับเฟรมภาพเคลื่อนไหว ให้เรียก XRFrame.getViewerPose()
เพื่อดูท่าทางของผู้ชมเทียบกับพื้นที่พิกัดในพื้นที่
ซึ่งใช้เพื่ออัปเดตกล้องในฉาก เปลี่ยนวิธีที่ผู้ใช้มองโลกเสมือนก่อนที่โหมดแสดงภาพจะวาดฉากโดยใช้กล้องที่อัปเดตแล้ว
เพิ่มโค้ดนี้ที่ด้านล่างของฟังก์ชัน activateXR()
// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
// Queue up the next draw request.
session.requestAnimationFrame(onXRFrame);
// Bind the graphics framebuffer to the baseLayer's framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(referenceSpace);
if (pose) {
// In mobile AR, we only have one view.
const view = pose.views[0];
const viewport = session.renderState.baseLayer.getViewport(view);
renderer.setSize(viewport.width, viewport.height)
// Use the view's transform matrix and projection matrix to configure the THREE.camera.
camera.matrix.fromArray(view.transform.matrix)
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
// Render the scene with THREE.WebGLRenderer.
renderer.render(scene, camera)
}
}
session.requestAnimationFrame(onXRFrame);
เรียกใช้ Hello WebXR
ไปที่ไฟล์ WebXR ในอุปกรณ์ คุณควรจะเห็นลูกบาศก์สีจากทุกด้าน
เพิ่มการทดสอบ Hit
วิธีที่ใช้กันทั่วไปในการโต้ตอบกับโลก AR คือการทำผ่านการทดสอบ Hit ซึ่งจะหาจุดตัดระหว่างเรขาคณิตของแสง (Ray) กับโลกจริง ใน Hello WebXR คุณจะใช้การทดสอบ Hit เพื่อวางดอกทานตะวันในโลกเสมือนจริง
นำลูกบาศก์สาธิตออก
นำลูกบาศก์ที่ไม่ได้ส่องแสงออกและแทนที่ด้วยฉากที่มีการจัดแสง ดังนี้
const scene = new THREE.Scene();
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
directionalLight.position.set(10, 15, 10);
scene.add(directionalLight);
ใช้ฟีเจอร์ hit-test
ในการเริ่มต้นฟังก์ชันทดสอบ Hit ให้ขอเซสชันด้วยฟีเจอร์ hit-test
ค้นหาส่วนย่อย requestSession()
ก่อนหน้าแล้วเพิ่ม hit-test
ลงในส่วนย่อยนี้
const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
เพิ่มตัวโหลดโมเดล
ขณะนี้ฉากดังกล่าวมีเพียงลูกบาศก์สีเท่านั้น เพิ่มตัวโหลดโมเดลซึ่งจะทำให้โหลดโมเดล GLTF ได้เพื่อมอบประสบการณ์การใช้งานที่น่าสนใจยิ่งขึ้น
เพิ่ม Three.js' GLTFLoader
ในแท็ก <head>
ของเอกสาร
<!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
โหลดโมเดล GLTF
ใช้ตัวโหลดโมเดลจากขั้นตอนก่อนหน้าเพื่อโหลดเส้นยึดการกำหนดเป้าหมายและทานตะวันจากเว็บ
เพิ่มโค้ดนี้ไว้เหนือ onXRFrame
:
const loader = new THREE.GLTFLoader();
let reticle;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
reticle = gltf.scene;
reticle.visible = false;
scene.add(reticle);
})
let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
flower = gltf.scene;
});
// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
สร้างแหล่งที่มาของการทดสอบ Hit
หากต้องการคำนวณจุดตัดที่มีวัตถุในโลกจริง ให้สร้าง XRHitTestSource
โดยใช้ XRSession.requestHitTestSource()
แสงที่ใช้สำหรับการทดสอบ Hit มีพื้นที่อ้างอิง viewer
เป็นต้นทาง ซึ่งหมายความว่าการทดสอบ Hit จะทำจากตรงกลางของวิวพอร์ต
หากต้องการสร้างแหล่งที่มาของการทดสอบ Hit ให้เพิ่มโค้ดนี้หลังจากสร้างพื้นที่อ้างอิง local
:
// A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');
// Create another XRReferenceSpace that has the viewer as the origin.
const viewerSpace = await session.requestReferenceSpace('viewer');
// Perform hit testing using the viewer as origin.
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
การวาดเส้นกรอบการกำหนดเป้าหมาย
เพิ่มจุดยึดเป้าหมายในฉากเพื่อแสดงให้เห็นอย่างชัดเจนว่าจะวางดอกทานตะวันที่ใด เส้นโครงนี้จะดูเหมือนว่ายึดกับพื้นผิวของโลก ซึ่งแสดงถึงตำแหน่งที่ดอกทานตะวันจะตรึงอยู่
XRFrame.getHitTestResults
แสดงผลอาร์เรย์ของ XRHitTestResult
และแสดงทางแยกด้วยเรขาคณิตในโลกแห่งความเป็นจริง
ใช้จุดตัดเหล่านี้ในการวางตำแหน่งเส้นแบ่งการกำหนดเป้าหมายในทุกเฟรม
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0 && reticle) {
const hitPose = hitTestResults[0].getPose(referenceSpace);
reticle.visible = true;
reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
reticle.updateMatrixWorld(true);
}
การเพิ่มการโต้ตอบเมื่อแตะ
XRSession
จะได้รับเหตุการณ์ select
เมื่อผู้ใช้ทำการดำเนินการหลักเสร็จ
ในเซสชัน AR ตัวเลขนี้จะตรงกับการแตะหน้าจอ
ทำให้ทานตะวันใหม่ปรากฏขึ้นเมื่อผู้ใช้แตะหน้าจอโดยการเพิ่มรหัสนี้ระหว่างการเริ่มต้น:
let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
flower = gltf.scene;
});
session.addEventListener("select", (event) => {
if (flower) {
const clone = flower.clone();
clone.position.copy(reticle.position);
scene.add(clone);
}
});
ทดสอบการใช้งาน Hit
ใช้อุปกรณ์เคลื่อนที่เพื่อไปยังหน้าเว็บ หลังจากที่ WebXR สร้างความเข้าใจเกี่ยวกับสิ่งแวดล้อมแล้ว เส้นโครงร่างควรปรากฏบนพื้นผิวในชีวิตจริง แตะหน้าจอเพื่อวางดอกทานตะวันซึ่งมองเห็นได้จากทุกด้าน