Trang này được dịch bởi Cloud Translation API.

Thực tế tăng cường cho web

Joe Medley

Trong Chrome 67, chúng tôi đã công bố API thiết bị WebXR cho cả tính năng 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 thực tế ảo. Thực tế ảo là một trải nghiệm hoàn toàn dựa trên nội dung trong thiết bị điện toán. Mặt khác, AR cho phép bạn kết xuất các đối tượng ảo 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 Thử nghiệm lượt truy cập WebXR vào Chrome Canary, một phương thức mới giúp mã web nhập vai đặt các đối tượng trong thế giới thực.

Tôi có thể tải bản cập nhật ở đâu?

API này dự kiến sẽ vẫn được cung cấp trong Canary trong thời gian sắp tới. Chúng tôi muốn có một khoảng thời gian thử nghiệm kéo dài vì đây là đề xuất API rất mới và chúng tôi muốn đảm bảo rằng API 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 cần có:

Một điện thoại thông minh tương thích chạy Android O trở lên.
Để cài đặt ARCore.
Hai cờ Chrome (chrome://flags): API WebXRDevice (#webxr) và Kiểm tra lượt truy cập WebXR (#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ỉ là web

Tại Google IO năm nay, chúng tôi đã trình diễn công nghệ thực tế tăng cường thông qua phiên bản ban đầu của Chrome. Trong ba ngày đó, tôi đã nhiều lần nói đ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 rằng tôi ước gì mình có thể đưa vào bài viết trực quan trên web của mình: "Đó chỉ là web".

"Tôi cần cài đặt tiện ích Chrome nào?" "Không có tiện ích nào. Đó chỉ là web".

"Tôi có cần một trình duyệt đặc biệt không?" "Chỉ là web thôi."

"Tôi cần cài đặt ứng dụng nào?" "Không có ứng dụng đặc biệt nào. Đó chỉ là web".

Điều này có thể hiển nhiên với bạn vì bạn đang đọc bài viết này trên một trang web dành riêng cho web. Nếu bạn tạo bản minh hoạ bằng API mới này, hãy chuẩn bị cho câu hỏi này. Bạn sẽ hiểu rõ lắm.

Nhân đây, về IO, nếu bạn muốn tìm hiểu thêm về web sống động nói chung, về vị trí của nền tảng này, hãy xem video này.

Lợi ích của việc này

Thực tế tăng cường sẽ là một tính năng bổ sung có giá trị cho nhiều trang web hiện có. Ví dụ: API này có thể giúp mọi người tìm hiểu trên các trang web giáo dục và cho phép người mua tiềm năng trực quan hoá các đối tượng trong nhà khi mua sắm.

Các bản minh hoạ của chúng tôi minh hoạ điều này. Các đối tượng này cho phép người dùng đặt một bản trình bày kích thước thực của một đối tượng như thể trong thực tế. Sau khi đặt, hình ảnh sẽ vẫn nằm trên bề mặt đã chọn, xuất hiện theo kích thước tương đương nếu mục thực tế nằm trên nền tảng đó, đồng thời cho phép người dùng di chuyển xung quanh cũng như gần hoặc xa hơn mục đó. Điều này giúp người xem hiểu rõ hơn về đối tượng so với hình ảnh hai chiều.

Nếu bạn không chắc tôi muốn nói gì về tất cả những điều đó, bạn sẽ hiểu rõ khi 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 xem đường liên kết đến video ở đầu bài viết này.

Một điều mà bản minh hoạ và video không cho thấy là cách AR có thể truyền tải kích thước của một đối tượng thực. Video này cho thấy 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 đồng hành sẽ mô tả chi tiết bản minh hoạ này. Điều quan trọng trong cuộc thảo luận này là khi đặt bức tượng Chacmool trong thực tế tăng cường, bạn sẽ thấy kích thước của bức tượng như thể bức tượng đó thực sự ở trong phòng với bạn.

Ví dụ về Chacmool là nội dung giáo dục nhưng cũng có thể là nội dung 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. Ứng dụng AR sẽ cho bạn biết liệu chiếc ghế dài có phù hợp với không gian của bạn hay không và hình dáng của chiếc ghế dài sẽ như thế nào khi đặt cạnh các đồ nội thất khác.

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à cách đặt các đối tượng trong chế độ xem thực tế. Phương thức để thực hiện việc này được gọi là kết xuất tia. Truyền tia có nghĩa là tính toán giao điểm giữa tia con trỏ và một bề mặt trong thế giới thực. Giao điểm đó đượ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ẫu mã mới trong Chrome Canary. Trước khi làm bất cứ điều gì, hãy kiểm tra kỹ để đảm bảo rằng bạn đã bật đúng cờ. Bây giờ, hãy tải mẫu và nhấp vào "Bắt đầu AR".

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 từ các mẫu sống động khác cho thấy 30 khung hình/giây thay vì 60. Đây là tốc độ mà trang web nhận hình ảnh từ máy ảnh.

AR chạy ở tốc độ 30 khung hình/giây

Bản minh hoạ Thử nghiệm lượt truy cập thực tế tăng cường

Một điều khác bạn nên chú ý là hình ảnh hoa hướng dương. Chế độ này di chuyển khi bạn di chuyển và chụp nhanh vào các bề mặt như sàn nhà và mặt bàn. Nếu bạn nhấn vào màn hình, một hoa hướng dương sẽ được đặt trên một bề mặt và một hoa hướng dương mới sẽ di chuyển theo thiết bị của bạn.

Hình ảnh di chuyển cùng thiết bị và cố gắng khoá vào các bề mặt được gọi là lưới ngắm. Mặt kẻ ô là một hình ảnh tạm thời hỗ trợ việc đặt một đối tượng trong chế độ thực tế tăng cường. Trong bản minh hoạ này, đường ngắm là bản sao của hình ảnh cần đặt. Nhưng không nhất thiết phải như vậy. Ví dụ: Trong bản minh hoạ của Chacmool, đó là một hộp hình chữ nhật có hình dạng gần giống với đáy của đối tượng được đặt.

Phần mã

Bản minh hoạ Chacmool cho thấy giao diện của AR trong một ứng dụng chính thức. May mắn thay, 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 được lấy từ bản minh hoạ Kiểm thử lượt nhấn AR trong kho lưu trữ đó. FYI, tôi muốn đơn giản hoá các ví dụ về mã để giúp bạn hiểu điều gì đang xảy ra.

Những khái niệm cơ bản để vào một phiên thực tế tăng cường và chạy vòng lặp kết xuất là giống nhau đối với thực tế tăng cường và cho thực tế ảo. Bạn có thể đọc bài viết trước của tôi nếu chưa quen. Cụ thể hơn, việc nhập và chạy một phiên AR gần giống như việc nhập một phiên cửa sổ ảo hoá thực tế ảo. Giống như cửa sổ ma thuật, loại phiên phải không chìm và khung của 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, mặt kẻ ô cố gắng tìm một bề mặt trước khi một mục được đặt. Việc này được thực hiện bằng kiểm thử lượt truy cập. Để kiểm thử lượt nhấn, 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ố của phương thức này đại diện cho một tia sáng. Tia sáng được xác định bằng hai điểm trên tia sáng (origin và direction) và vị trí tính toán các điểm đó (frameOfReference). Điểm gốc và hướng đều là vectơ 3D. Bất kể bạn gửi giá trị nào, các giá trị này sẽ được chuẩn hoá (chuyển đổi) thành độ dài là 1.

Di chuyển đường ngắm

Khi bạn di chuyển thiết bị, mặt kẻ ô cần di chuyển cùng với nó vì nó cố gắng tìm vị trí có thể đặt đối tượng. Điều này có nghĩa là bạn phải vẽ lại đường ngắm trong mọi khung hình.

Bắt đầu bằng lệnh gọi lại requestAnimationFrame(). Cũng như với VR, bạn cần có một phiên và một 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 có phiên và tư thế, hãy xác định vị trí tia sáng đang chiếu. Mã mẫu sử dụng 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à bạn biết mình đang tính toán gì và thông tin đó dựa trên vị trí của thiết bị. Truy xuất vị trí thiết bị từ XRPose.poseModalMatrix. Khi bạn đã có tia chiếu, hãy 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 như trong mẫu kiểm thử lượt nhấn, nhưng bạn vẫn cần lặp lại các thành phần hiển thị để vẽ cảnh. Quá trình vẽ được thực hiện bằng các API WebGL. Bạn có thể làm việc đó nếu thực sự có tham vọng. Tuy nhiên, bạn nên sử dụng một khung. Các mẫu web sống động sử dụng một mẫu được tạo riêng cho các bản minh hoạ có tên là Cottontail và Three.js đã hỗ trợ WebXR kể từ tháng 5.

Đặ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 việc đó, 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 nút. Vì ô di chuyển cung cấp cho bạn một nguồn liên tục để kiểm thử lượt truy cập, cách đơn giản nhất để đặt một đối tượng là vẽ đối tượng tại vị trí của ô ở lần kiểm thử lượt truy cập gần nhất. Nếu cần, giả sử bạn có lý do chính đáng để không hiển thị reticule, 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à xem mã mẫu hoặc thử lớp học lập trình. Tôi hy vọng đã cung cấp cho bạn đủ thông tin cơ bản để hiểu rõ cả hai.

Chúng tôi vẫn chưa hoàn tất việc xây dựng API web sống động, chưa tính đến việc xây dựng API web sống động. Chúng tôi sẽ xuất bản các bài viết mới tại đây trong quá trình phát triển.