Trong Chrome 67, chúng tôi công bố WebXR Device API cho cả thực tế tăng cường (AR) và thực tế ảo (VR), mặc dù chỉ bật các tính năng VR. Thực tế ảo là một trải nghiệm hoàn toàn dựa trên những gì có trong thiết bị điện toán. Mặt khác, AR cho phép bạn kết xuất hình ảnh đối tượng trong thế giới thực. Để cho phép đặt và theo dõi các đối tượng đó, chúng tôi vừa thêm API kiểm tra lượt truy cập WebXR vào Chrome Canary, một phương thức mới giúp mã web sống động đặt đối tượng vào thế giới thực.
Tôi có thể lấy ở đâu?
API này được dự định sẽ nằm trong Canary trong tương lai gần. Chúng tôi muốn có một thời gian thử nghiệm kéo dài vì đây là một đề xuất API rất mới và chúng tôi muốn đảm bảo hệ thống này vừa mạnh mẽ vừa phù hợp với nhà phát triển.
Ngoài Chrome Canary, bạn cũng sẽ cần:
- Đáp điện thoại thông minh tương thích đang chạy Android O trở lên.
- Cài đặt ARCore.
- 2 cờ Chrome (chrome://flags): API WebXRDevice (#webxr) và Lượt truy cập WebXR Thử nghiệm (#webxr-hit-test)
Bạn có thể đi sâu vào các bản minh hoạ hoặc tham gia lớp học lập trình của chúng tôi bằng các tính năng này.
Chỉ có web
Tại Google IO năm nay, chúng tôi đã giới thiệu công nghệ thực tế tăng cường bằng việc ra mắt phiên bản Chrome. Tôi đã nói nhiều lần điều gì đó với cả nhà phát triển lẫn những người không phải nhà phát triển trong ba ngày đó mà tôi ước rằng mình đã có thể bài viết trực quan trên web: "Đó chỉ là web".
"Tôi cần cài đặt tiện ích nào của Chrome?" "Không có tiện ích bổ sung nào. Chỉ là trên web".
"Tôi có cần một trình duyệt đặc biệt không?" "Đó chỉ là web".
"Tôi cần cài đặt ứng dụng nào?" "Không có ứng dụng nào đặc biệt. Đó chỉ là web".
Bạn có thể thấy rõ điều này vì bạn đang đọc nội dung này trên một trang web dành cho trên web. Nếu bạn xây dựng bản minh hoạ bằng API mới này, hãy chuẩn bị cho việc này . Bạn sẽ hiểu rõ lắm.
Nói về IO, nếu bạn muốn tìm hiểu thêm về web sống động nói chung, ở đâu, nơi nào sẽ thanh toán video này.
Lợi ích của việc này
Công nghệ thực tế tăng cường sẽ là một công cụ bổ sung hữu ích cho nhiều trang web hiện có. Ví dụ: AI tạo sinh có thể giúp mọi người học hỏi trên các trang web giáo dục và tạo điều kiện cho mọi người trực quan hoá các đồ vật trong nhà của mình khi mua sắm.
Bản minh hoạ của chúng tôi minh hoạ điều này. Chúng cho phép người dùng đặt hình ảnh đại diện như thật của một đối tượng như thể trong thực tế. Sau khi đặt, hình ảnh vẫn ở trên vị trí đã chọn bề mặt, xuất hiện theo kích thước dự kiến nếu mặt hàng thực tế nằm trên bề mặt đó, và cho phép người dùng di chuyển xung quanh cũng như gần hoặc xa hơn nó. Nhờ vậy, người xem sẽ hiểu rõ hơn về vật thể đó bằng hình ảnh hai chiều.
Nếu bạn không chắc chắn ý của tôi là gì thì mọi thứ sẽ rõ ràng khi bạn sử dụng các bản minh hoạ. Nếu bạn không có thiết bị có thể chạy bản minh hoạ, hãy truy cập vào đường liên kết đến video ở đầu bài viết này.
Bản minh hoạ và video không cho thấy cách AR có thể truyền tải kích thước của đối tượng thực. Video này minh hoạ một bản minh hoạ mang tính giáo dục mà chúng tôi xây dựng có tên là Chacmool. Bài viết đi kèm sẽ mô tả chi tiết bản minh hoạ này. Điều quan trọng của cuộc thảo luận này là khi đặt tượng Chacmool vào chế độ thực tế tăng cường, bạn sẽ thấy kích thước của nó như thể thực sự đang ở trong phòng với bạn.
Ví dụ về Chacmool mang tính giáo dục nhưng cũng có thể dễ dàng mang tính thương mại. Hãy tưởng tượng một trang web mua sắm nội thất cho phép bạn đặt một chiếc ghế dài trong phòng khách phòng. Ứng dụng AR sẽ cho bạn biết chiếc ghế bành có phù hợp với không gian của bạn không và nó có phù hợp với không gian đó hay không sẽ nằm cạnh đồ nội thất khác của bạn.
Tia sét, thử nghiệm nhấn và kẻ ô
Một vấn đề chính cần giải quyết khi triển khai công nghệ thực tế tăng cường là làm thế nào để đặt các đối tượng trong chế độ xem thế giới thực. Phương pháp để thực hiện việc này được gọi là truyền tia. đúc tia có nghĩa là tính toán giao điểm giữa con trỏ và một bề mặt trong thế giới thực. Giao lộ đó được gọi là lượt truy cập và xác định xem một lượt truy cập có xảy ra hay không là kiểm tra lượt truy cập.
Đây là thời điểm thích hợp để thử mã mẫu mới trong Chrome Canary. Trước khi làm bất cứ việc gì, hãy kiểm tra kỹ xem bạn đã bật cờ chính xác hay chưa. Bây giờ, hãy tải mẫu rồi nhấp vào "Bắt đầu thực tế tăng cường".
Hãy lưu ý một vài điều. Trước tiên, đồng hồ tốc độ mà bạn có thể nhận ra trên các mẫu sống động khác hiển thị 30 khung hình/giây thay vì 60 khung hình. Đây là tốc độ trang web nhận được hình ảnh từ máy ảnh.
Bản minh hoạ Thử nghiệm lượt truy cập thực tế tăng cường
Thứ khác bạn cần lưu ý là hình ảnh hoa hướng dương. Nó di chuyển khi bạn di chuyển và bám vào các bề mặt như sàn và mặt bàn. Nếu bạn nhấn vào màn hình, hoa hướng dương sẽ được đặt trên một bề mặt và một bông hoa hướng dương mới sẽ di chuyển cùng với thiết bị.
Hình ảnh di chuyển cùng với thiết bị của bạn và cố gắng khóa các bề mặt có tên là reticle (kẻ ô). Mặt kẻ ô là một hình tạm thời hỗ trợ việc đặt vật thể trong môi trường thực tế tăng cường. Trong bản minh hoạ này, mặt kẻ ô là bản sao của hình ảnh để được đặt. Tuy nhiên, bạn không cần phải làm như vậy. Ví dụ: trong bản minh hoạ của Chacmool, hộp chữ nhật có hình dạng gần giống với đáy của vật thể đang được đặt.
Phần mã
Bản minh hoạ của Chacmool cho thấy AR có thể trông như thế nào trong một ứng dụng phát hành chính thức. May mắn là có một bản minh hoạ đơn giản hơn nhiều trong kho lưu trữ mẫu WebXR. Mã mẫu của tôi đến từ thời gian Kiểm tra lượt truy cập thực tế tăng cường bản minh hoạ trong kho lưu trữ đó. FYI, tôi muốn đơn giản hoá các ví dụ mã để giúp bạn hiểu điều gì đang diễn ra.
Những khái niệm cơ bản để vào một phiên AR và chạy vòng lặp kết xuất là như nhau cho
Thực tế tăng cường đúng như thực tế ảo. Bạn có thể đọc
bài viết trước của tôi
nếu bạn không quen. Để cụ thể hơn, hãy nhập và chạy một phiên thực tế tăng cường
trông gần giống hệt
tham gia phiên cửa sổ kỳ diệu VR.
Giống như cửa sổ kỳ diệu, loại phiên không được chìm và khung hình
loại tham chiếu phải là 'eye-level'.
API mới
Bây giờ, tôi sẽ hướng dẫn bạn cách sử dụng API mới. Hãy nhớ rằng trong AR, ô
cố gắng tìm bề mặt trước khi đặt một mặt hàng. Điều này được thực hiện bằng một lần nhấn
thử nghiệm. Để kiểm thử lượt truy cập, hãy gọi XRSession.requestHitTest(). Thông báo sẽ có dạng như sau:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
Ba đối số cho phương thức này biểu thị một quá trình truyền tia. Cách truyền tia được xác định
bởi hai điểm trên tia (origin và direction) và nơi các điểm đó nằm
được tính từ (frameOfReference). Cả nguồn gốc và hướng đều là 3D
vectơ. Bất kể bạn gửi giá trị nào, các giá trị đó sẽ được chuẩn hoá
(đã chuyển đổi) thành độ dài là 1.
Di chuyển ô
Khi bạn di chuyển thiết bị, mặt kẻ ô cần di chuyển cùng với thiết bị để cố gắng tìm vị trí có thể đặt đối tượng. Điều này có nghĩa là mặt kẻ ô phải được vẽ lại trong mọi khung hình.
Bắt đầu bằng lệnh gọi lại requestAnimationFrame(). Giống như thực tế ảo, bạn cần có
buổi tập và tư thế.
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Do the hit test and draw the reticle.
}
}
Sau khi bạn có phiên tập và tư thế, hãy xác định vị trí tia truyền. Chiến lược phát hành đĩa đơn
sử dụng mã mẫu
thời gian
thư viện toán học gl-matrix.
Tuy nhiên, không bắt buộc phải dùng ma trận gl. Điều quan trọng là phải biết bạn đang
tính toán dựa trên vị trí của thiết bị. Truy xuất
vị trí thiết bị từ XRPose.poseModalMatrix. Với tia truyền trong tay,
gọi requestHitTest().
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Calculate the origin and direction for the raycast.
xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
.then((results) => {
if (results.length) {
// Draw for each view.
}
});
}
session.requestAnimationFrame(onXRFrame);
}
Mặc dù không rõ ràng trong mẫu thử nghiệm lượt truy cập, nhưng bạn vẫn cần quay vòng qua các khung hiển thị để vẽ cảnh. Quá trình vẽ được thực hiện bằng cách sử dụng API WebGL. Bạn có thể làm việc đó nếu bạn thực sự tham vọng. Tuy nhiên, bạn nên sử dụng khung. Web chìm hãy sử dụng một mẫu được tạo chỉ dành cho các bản minh hoạ được gọi là Cottontail, và Three.js đã hỗ trợ WebXR kể từ tháng 5.
Đặt một đối tượng
Một đối tượng được đặt trong môi trường thực tế tăng cường khi người dùng nhấn vào màn hình. Để làm được điều đó, bạn sử dụng
Sự kiện select. Điều quan trọng trong bước này là biết vị trí đặt quảng cáo.
Vì kẻ ô chuyển động mang đến cho bạn một nguồn liên tục các thử nghiệm nhấn, nên cách đơn giản nhất
cách đặt một vật thể là vẽ nó tại vị trí ô cuối cùng
thử nghiệm nhấn. Nếu cần, hãy giả sử bạn có lý do chính đáng để không hiển thị
reticle, bạn có thể gọi requestHitTest() trong sự kiện chọn như trong mẫu.
Kết luận
Cách tốt nhất để xử lý vấn đề này là duyệt qua mã mẫu hoặc dùng thử codelab. Hy vọng là tôi đã cung cấp đủ thông tin cơ bản để bạn hiểu rõ cả hai khái niệm này.
Chúng tôi chưa hoàn thành việc xây dựng các API web sống động, cũng như trong một khoảng thời gian dài. Chúng tôi sẽ xuất bản các bài viết mới trong quá trình tiến triển.