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 trình bày ví dụ về cách tạo một ứng dụng web thực tế tăng cường. Lớp học này sử dụng JavaScript để kết xuất các mô hình 3D xuất hiện 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 AR và thực tế ảo (VR). Bạn tập trung vào các tiện ích mở rộng thực tế tăng cường cho WebXR Device API để tạo một ứng dụng thực tế tăng cường đơn giản chạy trên web tương tác.

AR là gì?

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

Thực tế tăng cường (AR) đã được sử dụng rộng rãi trong các ứng dụng sau khi Google phát hành ARCore và Apple phát hành ARKit, cho dù đó là bộ lọc ảnh tự chụp hay 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ác 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ị đó trên thế giới
Hiển thị mô hình 3D được kết hợp ở trên cùng của chế độ xem camera trực tiếp
Thực hiện kiểm tra lượt truy cập để đặt các đối tượng lên trên các bề mặt đã phát hiện trong thế giới thực

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

Cách sử dụng WebXR Device API
Cách định cấu hình một cảnh thực tế tăng cường cơ bản
Cách tìm một bề mặt bằng cách sử dụng kiểm thử lượt truy cập AR
Cách tải và hiển thị một mô hình 3D được đồng bộ hoá với nguồn cấp dữ liệu từ camera trong thế giới thực
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 thực tế tăng cường. Các khái niệm và khối mã không liên quan được tinh chỉnh 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 để viết mã và lưu trữ nội dung tĩnh trên web
Thiết bị Android có 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ụ này trên các thiết bị tương thích)
Một máy chủ web do 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 Chrome

Nhấp vào 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 AR", 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 đây để tải toàn bộ mã cho lớp học lập trình này xuống máy trạm của bạn:

Giải nén tệp zip đã tải xuống. Thao tác này sẽ giải nén một thư mục gốc (ar-with-webxr-master), trong đó có 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 cuối cùng mong muốn của bước thứ ba và thứ tư trong lớp học lập trình này, cũng như kết quả final. Các thông tin này chỉ mang tính tham khảo.

Bạn 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 có thể sử dụng máy chủ web của riêng mình. Nếu bạn chưa thiết lập, phần này sẽ trình bày chi tiết cách thiết lập Web Server for 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 này từ Cửa hàng Chrome trực tuyến.

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

Tiếp theo, bạn sẽ thấ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. Điều này cho phép bạn phân phát công việc đang tiến hành thông qua URL được đánh dấu trong hộp thoại máy chủ web (trong phần URL máy chủ web).
Trong mục Options (needs restart) (Tuỳ chọn (cần khởi động lại)), hãy chọn hộp đánh dấu Automatically show index.html (Tự động hiện index.html).
Chuyển Máy chủ web sang trạng thái Dừng, sau đó chuyển lại sang trạng thái Đã bắt đầu.
Xác minh rằng ít nhất một(các) URL 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ị 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 localhost:8887 trên thiết bị.

Trên máy trạm phát triển, hãy chuyển đến chrome://inspect rồi nhấp vào Chuyển tiếp cổng...:
Sử dụng hộp thoại Port forwarding settings (Chế độ 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 tính năng chuyển tiếp cổng:

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

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

Kiểm tra kết nối:

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 chứa 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.

Giờ đây, thiết bị thực tế tăng cường của bạn có thể kết nối với máy chủ web.

Nhấp vào Bắt đầu chế độ thực tế tăng cường. Có thể hệ thống sẽ nhắc bạn cài đặt ARCore.

Lời nhắc cài đặt ARCore

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

Chrome yêu cầu cấp quyền truy cập camera → Hộp thoại quyền

Sau khi mọi thứ đã sẵn sàng, bạn sẽ thấy một cảnh có các khối lập phương được phủ lên trên nguồn cấp dữ liệu từ camera. Khả năng nhận biết cảnh sẽ cải thiện khi camera phân tích được nhiều cảnh vật hơn 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 một phiên WebXR và một 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 AR 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 tạo một trải nghiệm thực tế tăng cường vào 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 một canvas kết xuất toàn màn hình, vì vậy tệp HTML không cần quá phức tạp.

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

Tệp index.html đã có trong thư mục work của bạn sẽ có dạng như sau. Đây là một tập hợp con của nội dung thực tế; đừ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 khoá

Điểm xuất phát cho ứng dụng của bạn nằm trong 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 đã bao gồm mã ứng dụng (app.js).

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

Trước khi người dùng có thể sử dụng AR, hãy kiểm tra xem có navigator.xr và các tính năng XR cần thiết hay không. Đố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 để đảm bảo chế độ phiên "immersive-ar" được hỗ trợ.

Nếu mọi thứ đều ổn, việc nhấp vào nút Vào chế độ thực tế tăng cường sẽ cố gắng tạo một phiên XR. Nếu không, onNoXRDevice() sẽ được gọi (trong shared/utils.js) để hiển thị thông báo cho biết không có sự hỗ trợ thực tế tăng cường.

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

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

Yêu cầu `XRSession`

Khi bạn nhấp vào Vào chế độ thực tế tăng cường, mã 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ỏ qua:

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(). Sử 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 động một `XRReferenceSpace`

XRReferenceSpace mô tả hệ toạ độ được 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, với một 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 chạy this.localReferenceSpace trong onSessionStarted() bằng mã sau:

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

Xác định vòng lặp ảnh động

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 hình được vẽ, hãy xếp hàng đợi cho yêu cầu tiếp theo 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. Nó 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ị đúng cách trên thiết bị hiện tại. Mặc dù VR hình nổi có 2 chế độ xem (mỗi mắt một chế độ xem), nhưng các thiết bị thực tế tăng cường chỉ có một chế độ xem.
Thông tin trong pose.views thường được dùng để định cấu hình ma trận chế độ xem và ma trận phép chiếu của camera ảo. Điều này ảnh hưởng đến cách bố trí cảnh ở chế độ 3D. Khi camera được định cấu hình, cảnh có thể được kết xuất.
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 thử

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

Nếu bạn gặp vấn đề 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 một tâm ngắm

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

Tìm hiểu về thử nghiệm nhấn

Thử nghiệm nhấn thường là một cách để truyền một đường thẳng từ một điểm trong không gian theo một hướng nào đó và xác định xem đường thẳng đó có giao với bất kỳ đối tượng nào mà bạn quan tâm hay 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 sáng phát ra từ camera của thiết bị và chiếu thẳng vào thế giới thực trước camera.

WebXR Device API cho phép bạn biết tia này có giao 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 các chức năng AR cơ bản và khả năng hiểu biết về thế giới.

Video giải thích về thử nghiệm nhấn

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

Để thực hiện kiểm thử lượt nhấn, bạn cần có 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" làm 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 trên chế độ xem camera 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 câu lệnh chuyển động

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

Sử dụng "dom-overlay" từ bước trước để hiển thị lời nhắc chuyển động ở trên cùng của luồng video của camera.

Thêm <div> vào index.html có mã nhận dạng là stabilization. <div> này hiển thị một ảnh động cho người dùng, thể hiện trạng thái ổn định và nhắc họ di chuyển thiết bị để cải thiện quy trình SLAM. Hình ảnh này sẽ xuất hiện khi người dùng ở chế độ thực tế tăng cường và bị ẩn khi tâm ngắm 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 tâm ngắm

Sử dụng một tâm ngắm để cho biết vị trí mà chế độ xem của thiết bị đang hướng đến.

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 vào cảnh mới bằng một đối tượng biểu thị điểm va chạm. Lớp Reticle được cung cấp sẽ xử lý việc tải mô hình tâm ngắm 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);
}

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

Thêm nội dung 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 thử nghiệm nhấn cho mỗi khung hình:
- Nếu không có kết quả nào cho thử nghiệm nhấn, thì ARCore chưa có đủ thời gian để xây dựng sự hiểu biết 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 tính năng ổn định <div>.
- Nếu có kết quả, hãy di chuyển tâm ngắm đến vị trí đó.
Sửa đổi onXRFrame để di chuyển tâm ngắm:

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 ra các sự kiện dựa trên lượt 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, thao tác chính là nhấn vào màn hình.

Thêm một 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 sẽ đặt một bông hoa hướng dương tại tâm điểm.

Tạo một quy trình 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 tâm ngắm mà bạn có thể nhắm bằng thiết bị của mình thông qua các bài kiểm thử lượt nhấn. Khi nhấn vào màn hình, bạn sẽ có thể đặt một bông hoa hướng dương tại vị trí mà tâm ngắm chỉ định.

Khi chạy ứng dụng, bạn sẽ thấy một tâm ngắm theo dõi bề mặt sàn nhà. Nếu không, hãy thử quan sát xung quanh một cách chậm rãi bằng điện thoại.
Khi bạn thấy tâm ngắm, hãy nhấn vào tâm ngắm đó. 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 AR cơ bản có thể phát hiện các bề mặt trong thế giới thực một cách hiệu quả hơn. Ánh sáng yếu và bề mặt không có đặc điểm sẽ làm giảm chất lượng của tính năng hiểu cảnh và tăng khả năng không tìm thấy điểm truy cập. Nếu bạn gặp vấn đề, hãy xem mã step-04/app.js để biết ví dụ minh hoạ về bước này.

5. Thêm bóng

Việc tạo ra một cảnh chân thực bao gồm các yếu tố như ánh sáng và bóng đổ thích hợp trên các vật thể kỹ thuật số, giúp tăng độ chân thực và tính sống động cho cảnh.

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

Bật bóng đổ trên three.js WebGLRenderer. 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 ví dụ được tạo trong DemoUtils.createLitScene() có chứa một đối tượng tên là shadowMesh, 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, để bóng của hoa được kết xuất 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ã để định vị lại 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 thử

Khi đặt một cây hoa hướng dương, bạn sẽ thấy cây này đổ bóng. Nếu bạn gặp vấn đề, hãy xem mã final/app.js để biết ví dụ minh hoạ về bước này.

6. Tài nguyên khác

Xin chúc mừng! Bạn đã hoàn thành lớp học lập trình này về thực tế tăng cường 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

AR 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 khoá

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

Yêu cầu XRSession

Khởi động một XRReferenceSpace

Xác định vòng lặp ảnh động

Kiểm thử

4. Thêm một tâm ngắm

Tìm hiểu về thử nghiệm nhấn

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

Thêm câu lệnh chuyển động

Thêm tâm ngắm

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 thử

6. Tài nguyên khác

Tìm hiểu thêm

Yêu cầu `XRSession`

Khởi động một `XRReferenceSpace`

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