WebXR का इस्तेमाल करके, इमर्सिव एआर (ऑगमेंटेड रिएलिटी) सेशन तैयार करें

इस पेज पर आपको WebXR का इस्तेमाल करके, आसान इमर्सिव एआर ऐप्लिकेशन बनाने का तरीका पता चलेगा.

शुरू करने के लिए आपको WebXR के साथ काम करने वाले डेवलपमेंट एनवायरमेंट की ज़रूरत होगी.

एचटीएमएल पेज बनाना

WebXR के लिए सेशन शुरू करने के लिए उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. activateXR() को कॉल करने वाला बटन बनाएं. पेज लोड होने के बाद, उपयोगकर्ता इस बटन का इस्तेमाल एआर का अनुभव शुरू करने के लिए कर सकता है.

index.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>

तीन.js को शुरू करें

'शुरू करें' बटन दबाने पर कुछ खास नहीं होगा. 3D एनवायरमेंट सेट अप करने के लिए, रेंडरिंग लाइब्रेरी का इस्तेमाल करके कोई सीन दिखाया जा सकता है.

इस उदाहरण में, three.js का इस्तेमाल किया जाएगा. यह एक JavaScript 3D रेंडरिंग लाइब्रेरी है जो WebGL रेंडरर उपलब्ध कराती है. Three.js, रेंडरिंग, कैमरे, और सीन ग्राफ़ को हैंडल करता है. इससे वेब पर 3D कॉन्टेंट दिखाना आसान हो जाता है.

कोई सीन बनाएं

आम तौर पर, 3D एनवायरमेंट को सीन के तौर पर दिखाया जाता है. ऐसा THREE.Scene बनाएं जिसमें एआर एलिमेंट हों. इस कोड की मदद से, एआर (ऑगमेंटेड रिएलिटी) में, बिना रोशनी वाले रंगीन बॉक्स को देखा जा सकता है.

इस कोड को 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);

third.js का इस्तेमाल करके रेंडरिंग सेट अप करना

इस सीन को एआर (ऑगमेंटेड रिएलिटी) में देखने के लिए, आपको रेंडरर और कैमरा की ज़रूरत होगी. रेंडरर, स्क्रीन पर आपके सीन को ड्रॉ करने के लिए, 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' मोड सबसे अच्छा है. इसमें रेफ़रंस स्पेस है, जो व्यूअर के ऑरिजिन के पास और स्टेबल ट्रैकिंग का इस्तेमाल करता है.

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);

नमस्ते WebXR चलाएं

अपने डिवाइस में WebXR फ़ाइल पर जाएं. आपको चारों तरफ़ से रंगीन क्यूब दिखना चाहिए.

हिट टेस्ट जोड़ना

एआर की दुनिया से इंटरैक्ट करने का एक आम तरीका हिट टेस्ट है. इसमें किरण और असल दुनिया की ज्यामिति के बीच के अंतर को ढूंढा जाता है. Hello WebXR में, आपको वर्चुअल दुनिया में सूरजमुखी दिखाने के लिए एक हिट टेस्ट का इस्तेमाल करना होगा.

डेमो क्यूब हटाएं

अनलिट क्यूब को हटाएं और उसकी जगह ऐसा सीन इस्तेमाल करें जिसमें लाइटिंग शामिल हो:

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-test सुविधा के साथ सेशन का अनुरोध करें. पिछला requestSession() फ़्रैगमेंट ढूंढें और उसमें hit-test जोड़ें:

const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});

मॉडल लोडर जोड़ें

फ़िलहाल, सीन में सिर्फ़ एक रंगीन क्यूब दिखाया गया है. अनुभव को ज़्यादा दिलचस्प बनाने के लिए, मॉडल लोडर जोड़ें. इससे GLTF मॉडल को लोड किया जा सकेगा.

अपने दस्तावेज़ के <head> टैग में, Three.js' GLTFLoader जोड़ें.

<!-- 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) => {

हिट टेस्ट सोर्स बनाना

असल दुनिया की चीज़ों के इंटरसेक्शन का हिसाब लगाने के लिए, XRSession.requestHitTestSource() का इस्तेमाल करके XRHitTestSource बनाएं. हिट की जांच करने के लिए इस्तेमाल की जाने वाली रे में, viewer रेफ़रंस स्पेस ऑरिजिन के तौर पर होता है. इसका मतलब है कि हिट की जांच, व्यूपोर्ट के बीच से की जाती है.

हिट टेस्ट सोर्स बनाने के लिए, 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 इवेंट मिलते हैं. किसी एआर (ऑगमेंटेड रिएलिटी) सेशन में, आपको उस स्क्रीन पर किसी टैप से पता चलता है.

शुरू करने के दौरान इस कोड को जोड़कर, उपयोगकर्ता के स्क्रीन पर टैप करने पर नया सूरजमुखी दिखाएं:

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);
  }
});

हिट टेस्ट की जांच करना

पेज पर जाने के लिए, अपने मोबाइल डिवाइस का इस्तेमाल करें. जब WebXR पर्यावरण को समझने में आपकी मदद कर लेता है, तब रेटिकल असल दुनिया की जगहों पर दिखने लगता है. सूरजमुखी के फूल को लगाने के लिए, स्क्रीन पर टैप करें. इसे चारों तरफ़ से देखा जा सकता है.

अगले चरण