ARCore, 10 मई को Google I/O पर वापस आ गया है! अभी रजिस्टर करें.

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

तीन.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 फ़ाइल पर जाएं. आपको हर तरफ़ से रंगीन क्यूब दिखना चाहिए.

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

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

अगले चरण