Chrome trên Android XR hỗ trợ WebXR. WebXR là một tiêu chuẩn mở của W3C, mang các API XR hiệu suất cao đến các trình duyệt được hỗ trợ. Nếu đang xây dựng cho web, bạn có thể nâng cao các trang web hiện có bằng Mô hình 3D hoặc xây dựng trải nghiệm sống động mới.
Chrome dành cho Android XR hỗ trợ các tính năng WebXR sau:
- Device API
- AR Module
- Gamepads Module
- Hit Test Module
- Hand Input
- Anchors
- Depth Sensing
- Light Estimation
Để xem WebXR hoạt động, hãy khởi chạy Chrome trên thiết bị Android XR hoặc Trình mô phỏng Android XR rồi duyệt 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 tăng đáng kể năng suất của bạn và cải thiện chất lượng của các trải nghiệm mà bạn tạo.
- Để 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 phức tạp hoặc tuỳ chỉnh, bạn nên dùng three.js và babylon.js.
- Để tạo mẫu nhanh hoặc sử dụng cú pháp giống HTML để xác định cảnh 3D, chúng tôi khuyê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 và WebGL gốc, 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 có các trải nghiệm WebXR hiện có đang chạy trên các thiết bị khác, bạn có thể cần cập nhật mã để hỗ trợ đúng cách WebXR 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 thành 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 thiết bị đeo đầu 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ù đắp cho việc có hai màn hình – một cho mỗi mắt.
Giới thiệu về việc đả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 trong không gian thực của họ, tỷ lệ của đối tượng đó phải chính xác để đối tượng đó xuất hiện như thể 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 dành cho Android XR hỗ trợ Depth Sensing Module trong WebXR, giúp nâng cao khả năng cảm nhận kích thước và đường viền của môi trường thực tế của thiết bị. Thông tin về chiều sâu này cho phép bạn tạo các hoạt động 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 chiều sâu trên điện thoại di động, tính năng cảm biến chiều sâu trong Android XR là tính năng cảm biến chiều sâu âm thanh nổi, truyền trực tuyến hai bản đồ chiều 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 chiều sâu âm thanh nổi.
Ví dụ sau đây hiển thị thông tin về chiều sâu theo kiểu âm thanh nổi:
// 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 chiều sâu.
pose.viewstrả về một chế độ xem cho mỗi mắt và vòng lặp for tương ứng chạy hai lần.
Hình ảnh trực quan về chiều sâu theo thời gian thực bằng API cảm biến chiều sâu WebXR. Màu đỏ cho biết các điểm ảnh gần hơn, trong khi 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 hoạt động tương tác bằng tay vào ứng dụng WebXR giúp tăng 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 đầu vào 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, đẩ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ợ thao tác bằng tay. Bạn có thể cần cập nhật mã WebXR để hỗ trợ đúng cách thao tác bằng tay. Phiên VR sống động với thao tác bằng tay minh hoạ cách tích hợp tính năng theo dõi cử động của tay vào dự án WebXR.
Ảnh động sau đây cho thấy một ví dụ về việc kết hợp thao tác véo với WebXR API để cho người dùng thấy thao tác "lau sạch" bề mặt của một không gian ảo để hiển thị cửa sổ nhìn xuyên qua vào thế giới thực.
Bản minh hoạ WebXR về việc sử dụng thao tác véo tay để lau sạch 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 WebXR API yêu cầu quyền, Chrome sẽ nhắc người dùng cấp quyền cho trang web. Tất cả WebXR API đều yêu cầu quyền theo dõi camera và lập bản đồ 3D. 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à tay. Nếu tất cả các quyền cần thiết đều được
cấp, thì 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 do người dùng chọn sẽ được duy trì cho từng miền. Việc truy cập vào trải nghiệm WebXR trong một miền khác sẽ khiến Chrome nhắc lại quyền. Nếu trải nghiệm WebXR yêu cầu nhiều quyền, Chrome sẽ nhắc từng quyền một.
Giống như tất cả các quyền trên web, bạn nên xử lý đúng cách các trường hợp quyền bị từ chối.