Trang này được dịch bởi Cloud Translation API.

Tạo ứng dụng thực tế tăng cường (AR) bằng WebXR Device API

1. Trước khi bắt đầu

Lớp học lập trình này sẽ trình bày một ví dụ về cách tạo ứng dụng web AR. Công cụ này sử dụng JavaScript để hiển thị các mô hình 3D trông như thể chúng tồn tại trong thế giới thực.

Bạn sử dụng WebXR Device API để kết hợp chức năng thực tế tăng cường và thực tế ảo (VR). Bạn tập trung vào các tiện ích AR cho WebXR Device API để tạo một ứng dụng AR đơn giản chạy trên web tương tác.

Thực tế tăng cường là gì?

AR là một thuật ngữ thường dùng để mô tả sự kết hợp giữa hình ảnh đồ hoạ do máy tính tạo ra với thế giới thực. Đối với công nghệ thực tế tăng cường (AR) dựa trên điện thoại, điều này có nghĩa là bạn nên đặt đồ hoạ máy tính một cách thuyết phục trên một nguồn cấp dữ liệu camera trực tiếp. Để hiệu ứng này duy trì tính chân thực khi điện thoại di chuyển khắp thế giới, thiết bị hỗ trợ AR cần hiểu được thế giới mà điện thoại đang di chuyển và xác định tư thế (vị trí và hướng) của điện thoại trong không gian 3D. Chẳng hạn như phát hiện các bề mặt và ước tính ánh sáng của môi trường.

AR đã được sử dụng rộng rãi trong các ứng dụng sau khi ARCore và ARKit của Apple ra mắt, cho dù đó là bộ lọc tự chụp chân dung hay các trò chơi dựa trên AR.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng web đặt mô hình vào thế giới thực bằng công nghệ thực tế tăng cường. Ứng dụng này sẽ:

Sử dụng cảm biến của thiết bị mục tiêu để xác định và theo dõi vị trí cũng như hướng của thiết bị mục tiêu trên thế giới
Kết xuất mô hình 3D kết hợp từ chế độ xem camera trực tiếp
Thực thi thử nghiệm lượt truy cập để đặt đối tượng lên trên các nền tảng được khám phá trong thế giới thực

Kiến thức bạn sẽ học được

Cách sử dụng API Thiết bị WebXR
Cách định cấu hình cảnh thực tế tăng cường cơ bản
Cách tìm một nền tảng bằng cách sử dụng thử nghiệm nhấn AR
Cách tải và hiển thị mô hình 3D được đồng bộ hoá với nguồn cấp dữ liệu máy ảnh thực tế
Cách kết xuất bóng dựa trên mô hình 3D

Lớp học lập trình này tập trung vào các API AR. Các khái niệm và khối mã không liên quan được che đi và cung cấp cho bạn trong mã kho lưu trữ tương ứng.

Bạn cần có

Một máy trạm để lập trình và lưu trữ nội dung web tĩnh
Thiết bị Android hỗ trợ ARCore chạy Android 8.0 Oreo
Google Chrome
Đã cài đặt Dịch vụ Google Play cho Thực tế tăng cường (Chrome tự động nhắc bạn cài đặt Dịch vụ Google Play cho Thực tế tăng cường trên các thiết bị tương thích)
Máy chủ web bạn chọn
Cáp USB để kết nối thiết bị thực tế tăng cường với máy trạm
Mã mẫu
Trình chỉnh sửa văn bản
Kiến thức cơ bản về HTML, CSS, JavaScript và Công cụ cho nhà phát triển Google Chrome

Hãy nhấp vào Dùng thử trên thiết bị thực tế tăng cường để thử bước đầu tiên của lớp học lập trình này. Nếu bạn thấy một trang có thông báo "Trình duyệt của bạn không có các tính năng thực tế tăng cường", hãy kiểm tra để đảm bảo rằng thiết bị Android của bạn đã cài đặt Dịch vụ Google Play cho Thực tế tăng cường.

2. Thiết lập môi trường phát triển

Tải mã xuống

Nhấp vào đường liên kết sau để tải toàn bộ mã nguồn cho lớp học lập trình này trên máy trạm:

Giải nén tệp zip đã tải xuống. Thao tác này sẽ giải nén thư mục gốc (ar-with-webxr-master), thư mục này chứa các thư mục của một số bước trong lớp học lập trình này, cùng với tất cả tài nguyên bạn cần.

Các thư mục step-03 và step-04 chứa trạng thái kết thúc mong muốn của bước thứ ba và thứ tư của lớp học lập trình này, cũng như kết quả final. Bạn có thể tham khảo các thông tin này.

Bạn sẽ thực hiện mọi công việc lập trình trong thư mục work.

Cài đặt máy chủ web

Bạn thoải mái sử dụng máy chủ web của riêng mình. Nếu bạn chưa thiết lập máy chủ web, phần này sẽ hướng dẫn bạn cách thiết lập Máy chủ web cho Chrome.
Nếu chưa cài đặt ứng dụng đó trên máy trạm, bạn có thể cài đặt ứng dụng đó từ Cửa hàng Chrome trực tuyến.

Sau khi cài đặt ứng dụng Máy chủ web cho Chrome, hãy chuyển đến chrome://apps rồi nhấp vào biểu tượng Máy chủ web:

Tiếp theo, bạn sẽ thấy hộp thoại này. Hộp thoại này cho phép bạn định cấu hình máy chủ web cục bộ:

Định cấu hình máy chủ web Chrome

Nhấp vào chọn thư mục rồi chọn thư mục ar-with-webxr-master. Thao tác này cho phép bạn phân phát công việc đang tiến hành của mình thông qua URL được đánh dấu trong hộp thoại máy chủ web (trong phần (các) URL máy chủ web).
Trong phần Tuỳ chọn (cần khởi động lại), chọn hộp đánh dấu Tự động hiển thị chỉ mục.html.
Chuyển Máy chủ web thành Stop (Dừng), sau đó quay lại Started (Đã bắt đầu).
Xác minh rằng ít nhất một URL của máy chủ web xuất hiện: http://127.0.0.1:8887 – URL localhost mặc định.

Thiết lập chuyển tiếp cổng

Định cấu hình thiết bị thực tế tăng cường để thiết bị đó có thể truy cập vào cùng một cổng trên máy trạm khi bạn truy cập vào máy trạm localhost:8887.

Trên máy trạm phát triển, hãy truy cập vào chrome://console rồi nhấp vào Chuyển tiếp cổng...:
Sử dụng hộp thoại Cài đặt chuyển tiếp cổng để chuyển tiếp cổng 8887 đến localhost:8887.
Chọn hộp đánh dấu Bật chuyển tiếp cổng:

Định cấu hình chuyển tiếp cổng

Xác minh thiết lập của bạn

Kiểm tra kết nối của bạn:

Kết nối thiết bị thực tế tăng cường với máy trạm bằng cáp USB.
Trên thiết bị thực tế tăng cường trong Chrome, hãy nhập http://localhost:8887 vào thanh địa chỉ. Thiết bị thực tế tăng cường của bạn sẽ chuyển tiếp yêu cầu này đến máy chủ web của máy trạm phát triển. Bạn sẽ thấy một thư mục các tệp.
Trên thiết bị thực tế tăng cường, hãy nhấp vào step-03 để tải tệp step-03/index.html trong trình duyệt.

Bạn sẽ thấy một trang có nút Bắt đầu chế độ thực tế tăng cường	Tuy nhiên, nếu bạn thấy trang lỗi Trình duyệt không được hỗ trợ thì có thể thiết bị của bạn không tương thích.

Bây giờ, kết nối với máy chủ web của bạn sẽ hoạt động với thiết bị thực tế tăng cường.

Nhấp vào Bắt đầu chế độ thực tế tăng cường. Bạn có thể được nhắc cài đặt ARCore.

Cài đặt lời nhắc ARCore

Trong lần đầu chạy ứng dụng thực tế tăng cường, bạn sẽ thấy lời nhắc cấp quyền truy cập vào camera.

Chrome yêu cầu quyền truy cập vào máy ảnh → Hộp thoại quyền

Sau khi mọi thứ đã sẵn sàng, bạn sẽ thấy một cảnh gồm các khối phủ lên trên nguồn cấp dữ liệu máy ảnh. Khả năng hiểu cảnh sẽ cải thiện khi camera phân tích cú pháp nhiều khu vực khác trên thế giới, vì vậy việc di chuyển xung quanh có thể giúp ổn định mọi thứ.

3. Định cấu hình WebXR

Trong bước này, bạn sẽ tìm hiểu cách thiết lập phiên WebXR và cảnh thực tế tăng cường cơ bản. Trang HTML được cung cấp kiểu CSS và JavaScript để bật chức năng thực tế tăng cường cơ bản. Việc này giúp đẩy nhanh quá trình thiết lập, cho phép lớp học lập trình tập trung vào các tính năng thực tế tăng cường.

Trang HTML

Bạn xây dựng trải nghiệm thực tế tăng cường cho một trang web truyền thống bằng cách sử dụng các công nghệ web hiện có. Trong trải nghiệm này, bạn sử dụng canvas kết xuất toàn màn hình để tệp HTML không cần phải có quá nhiều phức tạp.

Các tính năng thực tế tăng cường yêu cầu cử chỉ của người dùng để bắt đầu. Vì vậy, có một số thành phần Material Design cho thấy nút Start AR (Bắt đầu thực tế tăng cường) và thông báo không được hỗ trợ trên trình duyệt.

Tệp index.html đã có trong thư mục work sẽ có dạng như sau. Đây là một phần nội dung thực tế; không sao chép mã này vào tệp của bạn!

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

Mở mã JavaScript chính

Điểm bắt đầu cho ứng dụng của bạn là ở app.js. Tệp này cung cấp một số mã nguyên mẫu để thiết lập trải nghiệm thực tế tăng cường.

Thư mục công việc của bạn cũng đã chứa mã ứng dụng (app.js).

Kiểm tra xem có hỗ trợ WebXR và AR hay không

Trước khi người dùng có thể làm việc với AR, hãy kiểm tra sự tồn tại của navigator.xr và các tính năng XR cần thiết. Đối tượng navigator.xr là điểm truy cập cho WebXR Device API, vì vậy, đối tượng này phải tồn tại nếu thiết bị tương thích. Ngoài ra, hãy kiểm tra xem chế độ phiên "immersive-ar" có được hỗ trợ hay không.

Nếu mọi thứ đều ổn, hãy nhấp vào nút Enter thực tế tăng cường để thử tạo một phiên XR. Nếu không, onNoXRDevice() sẽ được gọi (trong shared/utils.js) để cho thấy thông báo không được hỗ trợ thực tế tăng cường (AR).

Mã này đã có trong app.js, do đó bạn không cần thay đổi gì.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

Yêu cầu một `XRSession`

Khi bạn nhấp vào Nhập thực tế tăng cường, mã này sẽ gọi activateXR(). Thao tác này sẽ bắt đầu trải nghiệm thực tế tăng cường.

Tìm hàm activateXR() trong app.js. Một số mã bị bỏ sót:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

Điểm truy cập vào WebXR là thông qua XRSystem.requestSession(). Dùng chế độ immersive-ar để cho phép xem nội dung được kết xuất trong môi trường thực tế.

Khởi động this.xrSession bằng chế độ "immersive-ar":

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

Khởi chạy `XRReferenceSpace`

XRReferenceSpace mô tả hệ toạ độ dùng cho các đối tượng trong thế giới ảo. Chế độ 'local' phù hợp nhất với trải nghiệm thực tế tăng cường, có không gian tham chiếu có nguồn gốc gần người xem và khả năng theo dõi ổn định.

Khởi động this.localReferenceSpace trong onSessionStarted() bằng đoạn mã sau:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

Định nghĩa vòng lặp ảnh động

Sử dụng requestAnimationFrame của XRSession để bắt đầu một vòng lặp kết xuất, tương tự như window.requestAnimationFrame.

Trên mọi khung hình, onXRFrame được gọi bằng dấu thời gian và XRFrame.

Hoàn tất việc triển khai onXRFrame. Khi một khung được vẽ, hãy thêm yêu cầu tiếp theo vào hàng đợi bằng cách thêm:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

Thêm mã để thiết lập môi trường đồ hoạ. Thêm vào cuối onXRFrame:

// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);

Để xác định tư thế của người xem, hãy sử dụng XRFrame.getViewerPose(). XRViewerPose này mô tả vị trí và hướng của thiết bị trong không gian. Tệp này cũng chứa một mảng XRView mô tả mọi điểm nhìn mà cảnh phải được kết xuất để hiển thị chính xác trên thiết bị hiện tại. Trong khi công nghệ thực tế ảo (VR) lập thể có hai khung hiển thị (một khung hiển thị cho mỗi mắt), thì các thiết bị thực tế tăng cường chỉ có một khung nhìn.
Thông tin trong pose.views thường dùng nhất để định cấu hình ma trận khung hiển thị và ma trận chiếu của máy ảnh ảo. Điều này ảnh hưởng đến cách bố cục cảnh ở chế độ 3D. Khi camera được định cấu hình, bạn có thể kết xuất cảnh.
Thêm vào cuối onXRFrame:

// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

Kiểm tra

Chạy ứng dụng; trên thiết bị phát triển, hãy truy cập work/index.html. Bạn sẽ thấy nguồn cấp dữ liệu máy ảnh có các hình khối lơ lửng trong không gian và phối cảnh sẽ thay đổi khi bạn di chuyển thiết bị. Tính năng theo dõi cải thiện khi bạn di chuyển nhiều hơn, vì vậy, hãy khám phá xem điều gì phù hợp với bạn và thiết bị của bạn.

Nếu gặp sự cố khi chạy ứng dụng, hãy xem phần Giới thiệu và Thiết lập môi trường phát triển.

4. Thêm ô nhắm mục tiêu

Sau khi thiết lập cảnh thực tế tăng cường cơ bản, đã đến lúc bắt đầu tương tác với thế giới thực thông qua thử nghiệm lượt truy cập. Trong phần này, bạn sẽ lập trình một thử nghiệm nhấn và sử dụng thử nghiệm đó để tìm ra bề mặt trong thế giới thực.

Tìm hiểu về thử nghiệm lượt truy cập

Nói chung, thử nghiệm nhấn là một cách để tạo ra một đường thẳng từ một điểm trong không gian theo hướng nào đó và xác định xem đường thẳng đó có giao cắt với bất kỳ đối tượng quan tâm nào không. Trong ví dụ này, bạn hướng thiết bị vào một vị trí trong thế giới thực. Hãy tưởng tượng một tia đi từ máy ảnh của thiết bị và thẳng vào thế giới thực ở phía trước thiết bị.

WebXR Device API cho bạn biết liệu tia này có giao cắt với bất kỳ đối tượng nào trong thế giới thực hay không, được xác định bằng khả năng thực tế tăng cường cơ bản và hiểu biết về thế giới.

Thông báo giải thích về thử nghiệm lượt truy cập

Yêu cầu `XRSession` có thêm các tính năng

Để tiến hành thử nghiệm lượt truy cập, bạn cần có thêm các tính năng bổ sung khi yêu cầu XRSession.

Trong app.js, hãy tìm navigator.xr.requestSession.
Thêm các đối tượng "hit-test" và "dom-overlay" dưới dạng requiredFeature như sau:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

Định cấu hình lớp phủ DOM. Xếp lớp phần tử document.body lên khung hiển thị máy ảnh thực tế tăng cường như sau:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

Thêm lời nhắc chuyển động

ARCore hoạt động tốt nhất khi đã xây dựng được sự hiểu biết đầy đủ về môi trường. Điều này đạt được thông qua một quá trình gọi là bản địa hoá và ánh xạ đồng thời (SLAM), trong đó các điểm đối tượng riêng biệt về mặt thị giác được dùng để tính toán thay đổi về đặc điểm vị trí và môi trường.

Sử dụng "dom-overlay" ở bước trước để hiện lời nhắc chuyển động ở đầu luồng camera.

Thêm <div> vào index.html có mã stabilization. <div> này hiển thị một ảnh động cho người dùng về trạng thái ổn định và nhắc họ di chuyển bằng thiết bị để cải thiện quá trình SLAM. Thông tin này sẽ xuất hiện sau khi người dùng chuyển sang AR và bị ẩn sau khi kẻ ô tìm thấy một bề mặt do các lớp <body> kiểm soát.

  <div id="stabilization"></div>

</body>
</html>

Thêm kẻ ô

Sử dụng kẻ ô để chỉ ra vị trí mà chế độ xem của thiết bị đang trỏ tới.

Trong app.js, hãy thay thế lệnh gọi DemoUtils.createCubeScene() trong setupThreeJs() bằng một Three.Scene() trống.

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

Điền sẵn một đối tượng đại diện cho điểm va chạm vào cảnh mới. Lớp Reticle được cung cấp sẽ xử lý việc tải mô hình lưới trong shared/utils.js.
Thêm Reticle vào cảnh trong setupThreeJs():

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

Để kiểm thử lượt truy cập, bạn sử dụng XRReferenceSpace mới. Không gian tham chiếu này cho biết một hệ toạ độ mới từ góc nhìn của người xem để tạo ra một tia phù hợp với hướng xem. Hệ thống toạ độ này được sử dụng trong XRSession.requestHitTestSource(), có thể tính toán các bài kiểm thử lượt truy cập.

Thêm các dòng sau vào onSessionStarted() trong app.js:

async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}

Sử dụng hitTestSource này, thực hiện kiểm tra lượt truy cập trên mọi khung hình:
- Nếu không có kết quả cho kiểm tra lượt truy cập, thì tức là ARCore chưa có đủ thời gian để hiểu về môi trường. Trong trường hợp này, hãy nhắc người dùng di chuyển thiết bị bằng cách sử dụng <div> chống rung.
- Nếu có kết quả, hãy di chuyển ô đến vị trí đó.
Sửa đổi onXRFrame để di chuyển ô:

onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

Thêm hành vi khi nhấn vào màn hình

XRSession có thể phát các sự kiện dựa trên tương tác của người dùng thông qua sự kiện select (đại diện cho hành động chính). Trong WebXR trên thiết bị di động, hành động chính là nhấn vào màn hình.

Thêm trình nghe sự kiện select ở cuối onSessionStarted:

this.xrSession.addEventListener("select", this.onSelect);

Trong ví dụ này, thao tác nhấn vào màn hình khiến một bông hoa hướng dương được đặt ở ô kẻ ô.

Tạo phương thức triển khai cho onSelect trong lớp App:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

Kiểm thử ứng dụng

Bạn đã tạo một lưới mà bạn có thể nhắm đến bằng cách sử dụng thiết bị của mình bằng cách sử dụng kiểm thử lượt truy cập. Khi nhấn vào màn hình, bạn có thể đặt hoa hướng dương tại vị trí mà lưới ô chỉ định.

Khi chạy ứng dụng, bạn sẽ thấy một mặt kẻ ô chỉ bề mặt sàn nhà. Nếu không, hãy thử từ từ nhìn quanh bằng điện thoại.
Khi bạn nhìn thấy mặt kẻ ô, hãy nhấn vào mặt kẻ ô đó. Bạn nên đặt một bông hoa hướng dương lên trên đó. Bạn có thể phải di chuyển một chút để nền tảng thực tế tăng cường cơ bản có thể phát hiện các bề mặt trong thế giới thực chính xác hơn. Ánh sáng yếu và các bề mặt không có tính năng sẽ làm giảm chất lượng hiểu cảnh, đồng thời tăng khả năng phát hiện thấy không có va chạm. Nếu bạn gặp vấn đề, hãy xem mã step-04/app.js để xem ví dụ về cách thực hiện bước này.

5. Thêm bóng

Để tạo một cảnh chân thực, bạn cần sử dụng nhiều yếu tố như ánh sáng và bóng đổ phù hợp trên các đối tượng kỹ thuật số để thêm cảm giác chân thực và sống động trong cảnh.

Ánh sáng và bóng đổ do three.js xử lý. Bạn có thể chỉ định đèn nào sẽ tạo bóng, chất liệu nào sẽ nhận và hiển thị các bóng này, cũng như lưới nào có thể đổ bóng. Cảnh trong ứng dụng này chứa một ánh sáng đổ bóng và một bề mặt phẳng để chỉ hiển thị bóng.

Bật bóng trên WebGLRenderer của three.js. Sau khi tạo trình kết xuất, hãy đặt các giá trị sau trên shadowMap của trình kết xuất:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

Cảnh mẫu được tạo trong DemoUtils.createLitScene() chứa một đối tượng có tên là shadowMesh. Đây là một bề mặt phẳng, nằm ngang chỉ hiển thị bóng. Bề mặt này ban đầu có vị trí Y là 10.000 đơn vị. Sau khi đặt hoa hướng dương, hãy di chuyển shadowMesh sao cho có cùng chiều cao với bề mặt trong thế giới thực, sao cho bóng của hoa hiển thị trên mặt đất trong thế giới thực.

Trong onSelect, sau khi thêm clone vào cảnh, hãy thêm mã để đặt lại vị trí mặt phẳng bóng:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

Kiểm tra

Khi đặt hoa hướng dương, bạn nên có thể nhìn thấy bóng đổ của hoa hướng dương. Nếu bạn gặp vấn đề, hãy xem mã final/app.js để xem ví dụ về cách thực hiện bước này.

6. Tài nguyên khác

Xin chúc mừng! Bạn đã kết thúc lớp học lập trình này về AR bằng WebXR.

Tạo ứng dụng thực tế tăng cường (AR) bằng WebXR Device API

1. Trước khi bắt đầu

Thực tế tăng cường là gì?

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Thiết lập môi trường phát triển

Tải mã xuống

Cài đặt máy chủ web

Thiết lập chuyển tiếp cổng

Xác minh thiết lập của bạn

3. Định cấu hình WebXR

Trang HTML

Mở mã JavaScript chính

Kiểm tra xem có hỗ trợ WebXR và AR hay không

Yêu cầu một XRSession

Khởi chạy XRReferenceSpace

Định nghĩa vòng lặp ảnh động

Kiểm tra

4. Thêm ô nhắm mục tiêu

Tìm hiểu về thử nghiệm lượt truy cập

Yêu cầu XRSession có thêm các tính năng

Thêm lời nhắc chuyển động

Thêm kẻ ô

Thêm hành vi khi nhấn vào màn hình

Kiểm thử ứng dụng

5. Thêm bóng

Kiểm tra

6. Tài nguyên khác

Tìm hiểu thêm

Yêu cầu một `XRSession`

Khởi chạy `XRReferenceSpace`

Yêu cầu `XRSession` có thêm các tính năng