Chrome trên Android XR hỗ trợ WebXR. WebXR là một tiêu chuẩn mở của W3C, mang đến các API XR hiệu suất cao cho các trình duyệt được hỗ trợ. Nếu đang tạo ứng 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:
- Device API
- AR Module
- Mô-đun Tay cầm chơi game
- Mô-đun kiểm tra lượt truy cập
- Nhập bằng tay
- Anchors
- Cảm biến độ sâu
- Ước tính ánh sáng
Để 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 đúng khung WebXR. Điều này giúp nâng cao đáng kể năng suất của bạn và cải thiện chất lượng của những trải nghiệm mà bạn tạo ra.
- Để kiểm soát hoàn toàn 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 dùng three.js và babylon.js.
- Để tạo mẫu nhanh hoặc sử dụng cú pháp tương tự như HTML để xác định cảnh 3D, bạn nên 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.
Thích ứng với Android XR
Nếu đang chạy các trải nghiệm WebXR 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ụ: trải nghiệm WebXR tập trung vào thiết bị di động sẽ phải thích ứng từ một màn hình sang hai màn hình nổi 3D trong Android XR. Trải nghiệm WebXR nhắm đến thiết bị di động hoặc tai nghe hiện có có thể cần điều chỉnh mã đầu vào để ưu tiên bàn 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ù đắp cho thực tế là có hai màn hình – một cho mỗi mắt.
Giới thiệu về cách đảm bảo cảm giác về 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ọ, quy mô của đối tượng đó phải chính xác để đối tượng xuất hiện như thể nó thực sự thuộc về không gian đó. Ví dụ: trong một ứng dụng mua sắm đồ nội thất, người dùng cần tin rằng một chiếc ghế bành ảo sẽ vừa vặn hoàn hảo trong 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 nhận biết kích thước và đường viền của môi trường thực tế trên thiết bị. Thông tin về độ sâu này cho phép bạn tạo ra những tương tác chân thực và sống động 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 2 bản đồ độ sâu theo thời gian thực để tạo 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 hình có độ sâu lập thể.
Ví dụ sau đây kết xuất thông tin về độ sâu theo phương pháp 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ã
- Bạn phải trả về một tư thế hợp lệ để truy cập vào dữ liệu độ sâu.
pose.viewstrả về một khung hiển thị cho mỗi mắt và vòng lặp for tương ứng sẽ chạy hai lần.
Hình ảnh hoá độ sâu theo thời gian thực bằng WebXR Depth Sensing API. 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 hoạt độ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 nhập 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 tự nhiên với các đối tượng ảo bằng cách sử dụng cử chỉ và chuyển động tay để nắm bắt, đẩy hoặc thao tác 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 bộ đ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 chế độ nhập bằng tay. Phiên thực tế ảo sống động có 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 của bạn.
Ảnh động sau đây minh hoạ một ví dụ về việc kết hợp thao tác chụm với WebXR API để cho thấy người dùng "xoá" bề mặt của một không gian ảo để lộ ra một cửa sổ xuyên thấu vào thế giới thực.
Bản minh hoạ WebXR về cách dùng thao tác chụm hai ngón tay để xoá màn hình nhằm 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 cần có 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 camera. Quyền cũng bảo vệ quyền truy cập vào dữ liệu được theo dõi về khuôn mặt, mắt và bàn tay. Nếu bạn cấp tất cả các quyền cần thiết, việc 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 mà 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ẽ nhắc bạn cấp quyền lại. Nếu trải nghiệm WebXR yêu cầu nhiều quyền, Chrome sẽ nhắc cấp từng quyền một.
Giống như mọi quyền khác trên web, bạn nên xử lý đúng cách các trường hợp quyền bị từ chối.