WebVR API

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

Note: WebVR API được thay thế bởi WebXR API. WebVR chưa bao giờ được phê chuẩn thành một tiêu chuẩn, chỉ được triển khai và bật mặc định trong rất ít trình duyệt, và chỉ hỗ trợ một số ít thiết bị.

WebVR cung cấp hỗ trợ để đưa các thiết bị thực tế ảo - ví dụ như màn hình đeo đầu như Oculus Rift hoặc HTC Vive - ra cho các ứng dụng web, cho phép nhà phát triển chuyển thông tin vị trí và chuyển động từ màn hình thành chuyển động trong một cảnh 3D. Điều này có rất nhiều ứng dụng thú vị, từ tham quan sản phẩm ảo và ứng dụng đào tạo tương tác cho đến trò chơi góc nhìn thứ nhất nhập vai.

Khái niệm và cách dùng

Bất kỳ thiết bị VR nào được kết nối với máy tính của bạn sẽ được trả về bởi phương thức Navigator.getVRDisplays(); mỗi thiết bị sẽ được biểu diễn bởi một đối tượng VRDisplay.

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

VRDisplay là giao diện trung tâm trong WebVR API - thông qua các thuộc tính và phương thức của nó, bạn có thể truy cập các chức năng để:

Lấy thông tin hữu ích để nhận diện màn hình, các khả năng nó có, các bộ điều khiển đi kèm, và nhiều hơn nữa.
Lấy frame data cho mỗi khung nội dung bạn muốn hiển thị trên màn hình, rồi gửi các khung đó để hiển thị ở tốc độ nhất quán.
Bắt đầu và dừng việc trình chiếu lên màn hình.

Một ứng dụng WebVR điển hình (đơn giản) sẽ hoạt động như sau:

Navigator.getVRDisplays() được dùng để lấy tham chiếu tới màn hình VR của bạn.
VRDisplay.requestPresent() được dùng để bắt đầu trình chiếu lên màn hình VR.
Phương thức chuyên dụng của WebVR, VRDisplay.requestAnimationFrame(), được dùng để chạy vòng lặp render của ứng dụng ở tốc độ làm mới phù hợp với màn hình.
Bên trong vòng lặp render, bạn lấy dữ liệu cần để hiển thị khung hiện tại (VRDisplay.getFrameData()), vẽ cảnh hiển thị hai lần - một lần cho góc nhìn của mỗi mắt - rồi gửi khung đã render tới màn hình để hiển thị cho người dùng (VRDisplay.submitFrame()).

Ngoài ra, WebVR 1.1 bổ sung một số sự kiện trên đối tượng Window để cho phép JavaScript phản hồi các thay đổi về trạng thái của màn hình.

Note: Bạn có thể tìm hiểu thêm rất nhiều về cách API hoạt động trong các bài viết Using the WebVR API và WebVR Concepts.

Khả dụng của API

WebVR API, vốn chưa bao giờ được phê chuẩn như một tiêu chuẩn web, đã bị ngừng khuyến nghị để thay bằng WebXR API, một API đang đi khá tốt trên con đường hoàn thiện quá trình tiêu chuẩn hóa. Vì vậy, bạn nên cố gắng cập nhật mã hiện có để dùng API mới hơn. Nhìn chung, việc chuyển đổi sẽ khá suôn sẻ.

Ngoài ra, trên một số thiết bị và/hoặc trình duyệt, WebVR yêu cầu trang phải được tải bằng secure context, qua kết nối HTTPS. Nếu trang không hoàn toàn an toàn, các phương thức và hàm WebVR sẽ không khả dụng. Bạn có thể kiểm tra điều này dễ dàng bằng cách xem phương thức Navigator getVRDisplays() có là NULL hay không:

if (!navigator.getVRDisplays) {
  console.error("WebVR is not available");
} else {
  /* Use WebVR */
}

Dùng bộ điều khiển: Kết hợp WebVR với Gamepad API

Nhiều cấu hình phần cứng WebVR có các bộ điều khiển đi kèm với headset. Chúng có thể được dùng trong ứng dụng WebVR thông qua Gamepad API, cụ thể là Gamepad Extensions API, API này bổ sung các tính năng để truy cập controller pose, haptic actuators, và nhiều hơn nữa.

Note: Bài viết Using VR controllers with WebVR của chúng tôi giải thích những điều cơ bản về cách dùng bộ điều khiển VR với ứng dụng WebVR.

Các giao diện WebVR

VRDisplay: Đại diện cho bất kỳ thiết bị VR nào được API này hỗ trợ. Nó bao gồm thông tin chung như mã định danh thiết bị và mô tả, cũng như các phương thức để bắt đầu trình chiếu một cảnh VR, lấy tham số mắt và khả năng hiển thị, cùng các chức năng quan trọng khác.
VRDisplayCapabilities: Mô tả các khả năng của một VRDisplay - các đặc điểm của nó có thể được dùng để thực hiện kiểm tra khả năng của thiết bị VR, ví dụ nó có trả về thông tin vị trí hay không.
VRDisplayEvent: Đại diện cho đối tượng sự kiện của các sự kiện liên quan đến WebVR (xem các sự kiện cửa sổ được liệt kê bên dưới).
VRFrameData: Đại diện cho toàn bộ thông tin cần thiết để render một khung duy nhất của cảnh VR; được tạo bởi VRDisplay.getFrameData().
VRPose: Đại diện cho trạng thái vị trí tại một dấu thời gian nhất định (bao gồm orientation, position, velocity, và acceleration).
VREyeParameters: Cung cấp quyền truy cập tới toàn bộ thông tin cần thiết để render đúng một cảnh cho từng mắt, bao gồm thông tin field of view.
VRFieldOfView: Đại diện cho field of view được xác định bởi 4 giá trị độ khác nhau mô tả tầm nhìn từ một điểm trung tâm.
VRLayerInit: Đại diện cho một lớp sẽ được trình chiếu trong một VRDisplay.
VRStageParameters: Đại diện cho các giá trị mô tả khu vực stage đối với các thiết bị hỗ trợ trải nghiệm room-scale.

Các mở rộng cho giao diện khác

WebVR API mở rộng các API sau, bổ sung những tính năng được liệt kê.

Gamepad

Gamepad.displayId Read only: Trả về VRDisplay.displayId của VRDisplay liên kết - VRDisplay đang điều khiển cảnh hiển thị của gamepad.

Navigator

Navigator.activeVRDisplays Read only: Trả về một mảng chứa mọi đối tượng VRDisplay hiện đang trình chiếu (VRDisplay.isPresenting là true).
Navigator.getVRDisplays(): Trả về một promise resolve thành một mảng các đối tượng VRDisplay đại diện cho mọi màn hình VR sẵn có được kết nối với máy tính.

Sự kiện Window

vrdisplaypresentchange: Được kích hoạt khi trạng thái trình chiếu của một màn hình VR thay đổi - tức là chuyển từ đang trình chiếu sang không trình chiếu hoặc ngược lại.
vrdisplayconnect: Được kích hoạt khi một màn hình VR tương thích được kết nối với máy tính.
vrdisplaydisconnect: Được kích hoạt khi một màn hình VR tương thích bị ngắt kết nối khỏi máy tính.
vrdisplayactivate: Được kích hoạt khi một màn hình có thể được trình chiếu.
vrdisplaydeactivate: Được kích hoạt khi một màn hình không còn có thể được trình chiếu nữa.

Ví dụ

Bạn có thể tìm thấy một số ví dụ tại các vị trí sau:

webvr-tests - các ví dụ rất đơn giản đi kèm với tài liệu WebVR của MDN.
Carmel starter kit - các ví dụ đơn giản, có chú thích tốt, đi kèm với Carmel, trình duyệt WebVR của Facebook.
WebVR.info samples - các ví dụ sâu hơn một chút cùng mã nguồn
A-Frame homepage - các ví dụ cho thấy cách dùng A-Frame

Thông số kỹ thuật

API này được định nghĩa trong WebVR API cũ, vốn đã bị thay thế bởi WebXR Device API. Nó không còn trên lộ trình trở thành một tiêu chuẩn nữa.

Cho đến khi mọi trình duyệt đã triển khai các WebXR APIs mới, bạn nên dựa vào các framework như A-Frame, Babylon.js, hoặc Three.js, hoặc một polyfill, để phát triển các ứng dụng WebXR có thể hoạt động trên mọi trình duyệt. Đọc hướng dẫn Meta's Porting from WebVR to WebXR để biết thêm thông tin.

Khả năng tương thích với trình duyệt

Xem thêm

A-Frame - framework web mã nguồn mở để xây dựng trải nghiệm VR.
webvr.info - thông tin cập nhật về WebVR, thiết lập trình duyệt và cộng đồng.
threejs-vr-boilerplate - một mẫu khởi đầu hữu ích để viết ứng dụng WebVR.
Web VR polyfill - triển khai JavaScript cho WebVR.
WebVR Directory - danh sách các trang WebVR chất lượng.

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content