Phát triển bằng WebXR

Chrome trên Android XR hỗ trợ WebXR. WebXR là một tiêu chuẩn mở của W3C, cung cấp các API XR hiệu suất cao cho các trình duyệt được hỗ trợ. Nếu đang xây dựng cho web, bạn có thể cải thiện các trang web hiện có bằng mô hình 3D hoặc tạo trải nghiệm sống động mới.

Chrome cho Android XR hỗ trợ các tính năng WebXR sau:

Để xem WebXR hoạt động, hãy chạy Chrome trên thiết bị Android XR hoặc Trình mô phỏng Android XR rồi duyệt xem các mẫu WebXR chính thức.

Điều kiện tiên quyết: Chọn một khung WebXR

Trước khi bắt đầu phát triển, bạn cần chọn khung WebXR phù hợp. Điều này giúp nâng cao đáng kể năng suất của riêng bạn và cải thiện chất lượng của các trải nghiệm mà bạn tạo ra.

  • Để có toàn quyền kiểm soát các cảnh 3D và tạo các hoạt động tương tác tuỳ chỉnh hoặc phức tạp, bạn nên sử dụng three.js và babylon.js.
  • Để tạo bản mô hình nhanh hoặc sử dụng cú pháp giống HTML để xác định cảnh 3D, bạn nên sử dụng A-Frame và model-viewer.
  • Bạn cũng có thể xem thêm các khung và mã mẫu.

Nếu bạn muốn sử dụng JavaScript gốc và WebGL, hãy tham khảo WebXR trên GitHub để tạo thử nghiệm WebXR đầu tiên.

Điều chỉnh cho Android XR

Nếu đang có trải nghiệm WebXR chạy trên các thiết bị khác, bạn có thể cần cập nhật mã để hỗ trợ WebXR đúng cách trên Android XR. Ví dụ: các trải nghiệm WebXR tập trung vào thiết bị di động sẽ phải điều chỉnh từ một màn hình sang hai màn hình âm thanh nổi trong Android XR. Các trải nghiệm WebXR nhắm đến thiết bị di động hoặc kính thực tế ảo hiện có có thể cần điều chỉnh mã đầu vào để ưu tiên thao tác bằng tay.

Khi làm việc với WebXR trên Android XR, bạn có thể cần cập nhật mã để bù cho việc có hai màn hình – một màn hình cho mỗi mắt.

Giới thiệu về cách đảm bảo cảm giác chiều sâu trong WebXR

Khi người dùng đặt một đối tượng ảo vào không gian thực của họ, tỷ lệ của đối tượng đó phải chính xác để có vẻ như đối tượng đó thực sự thuộc về không gian đó. Ví dụ: trong ứng dụng mua sắm nội thất, người dùng cần tin tưởng rằng một chiếc ghế bành ảo sẽ vừa vặn với phòng khách của họ.

Chrome cho Android XR hỗ trợ Mô-đun cảm biến độ sâu trong WebXR, giúp tăng khả năng của thiết bị trong việc nhận biết kích thước và đường viền của môi trường thực tế. Thông tin độ sâu này cho phép bạn tạo ra các tương tác sống động và chân thực hơn, giúp người dùng đưa ra quyết định sáng suốt.

Không giống như tính năng cảm biến độ sâu trên điện thoại di động, tính năng cảm biến độ sâu trong Android XR là tính năng lập thể, truyền trực tuyến hai bản đồ độ sâu theo thời gian thực để có tầm nhìn hai mắt. Bạn có thể cần cập nhật mã WebXR để hỗ trợ đúng cách các khung độ sâu âm thanh nổi.

Ví dụ sau đây kết xuất thông tin chiều sâu theo chế độ lập thể:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Các điểm chính về mã

  • Phải trả về một tư thế hợp lệ để truy cập vào dữ liệu độ sâu.
  • pose.views trả về một thành phần hiển thị cho mỗi mắt và vòng lặp tương ứng của thành phần hiển thị này sẽ chạy hai lần.

Hình ảnh hoá độ sâu theo thời gian thực bằng API cảm biến độ sâu WebXR. Màu đỏ cho biết các điểm ảnh gần hơn, còn màu xanh dương cho biết các điểm ảnh xa hơn.

Thêm tính năng tương tác bằng tay trong WebXR

Việc thêm tính năng tương tác bằng tay vào ứng dụng WebXR sẽ nâng cao mức độ tương tác của người dùng bằng cách mang lại trải nghiệm trực quan và sống động hơn.

Thao tác bằng tay là cơ chế tương tác chính trong Android XR. Chrome cho Android XR hỗ trợ Hand Input API làm phương thức nhập mặc định. API này cho phép người dùng tương tác với các đối tượng ảo một cách tự nhiên, sử dụng cử chỉ và chuyển động tay để nắm bắt, đẩy hoặc thao tác với các phần tử trong cảnh.

Các thiết bị như điện thoại di động hoặc thiết bị XR tập trung vào tay điều khiển có thể chưa hỗ trợ tính năng nhập bằng tay. Bạn có thể cần cập nhật mã WebXR để hỗ trợ đúng cách tính năng nhập bằng tay. Phiên thực tế ảo sống động với bàn tay minh hoạ cách tích hợp tính năng theo dõi bàn tay vào dự án WebXR.

Ảnh động sau đây cho thấy ví dụ về cách kết hợp thao tác chụm với API WebXR để hiển thị người dùng "xoá sạch" bề mặt của không gian ảo để hiển thị cửa sổ xuyên thấu vào thế giới thực.

Bản minh hoạ WebXR về cách sử dụng cử chỉ chụm tay để xoá màn hình để nhìn xuyên qua thực tế vật lý.

Quyền trong WebXR

Khi bạn sử dụng các API WebXR yêu cầu cấp quyền, Chrome sẽ nhắc người dùng cấp quyền cho trang web. Tất cả API WebXR đều yêu cầu quyền lập bản đồ 3D và theo dõi máy ảnh. Quyền truy cập vào dữ liệu về khuôn mặt, mắt và bàn tay được theo dõi cũng được bảo vệ bằng các quyền. Nếu bạn cấp tất cả quyền cần thiết, thì lệnh gọi navigator.xr.requestSession('immersive-ar', options) sẽ trả về một phiên WebXR hợp lệ.

Lựa chọn ưu tiên về quyền do người dùng chọn sẽ được duy trì cho từng miền. Khi bạn truy cập vào một trải nghiệm WebXR trong một miền khác, Chrome sẽ yêu cầu cấp quyền lại. Nếu trải nghiệm WebXR yêu cầu nhiều quyền, Chrome sẽ lần lượt nhắc cấp từng quyền.

Giống như mọi quyền trên web, bạn nên xử lý đúng cách các trường hợp bị từ chối cấp quyền.