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

Joe Medley
Joe Medley

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 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 chỉ cần thêm WebXR Hit Test API vào Chrome Canary. Đây là một phương thức mới giúp mã web sống động đặ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ó:

Với những kiến thức này, bạn có thể tìm hiểu các bản minh hoạ hoặc thử tham gia lớp học lập trình của chúng tôi.

Đó chỉ là web

Tại Google IO năm nay, chúng tôi đã minh hoạ công nghệ thực tế tăng cường bằng một bản dựng Chrome ban đầu. Trong ba ngày đó, tôi đã lặp đi lặp lại một câu với cả nhà phát triển và những người không phải nhà phát triển. Tôi ước gì mình đã biết để đưa câu này vào bài viết về web sống động: "Đó chỉ là web thôi".

"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ỉ có 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ẽ thấy thông báo này rất nhiều lần.

Nói về IO, nếu bạn muốn nghe thêm về web sống động nói chung, vị trí hiện tại và tương lai của web sống động, hãy xem video này.

Công cụ này hữu ích khi nào?

Thực tế tăng cường sẽ là một bổ sung có giá trị cho nhiều trang web hiện có. Ví dụ: công nghệ 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 hình dung các đối tượng trong nhà trong khi mua sắm.

Các bản minh hoạ của chúng tôi minh hoạ điều này. Các công cụ 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 được đặt, hình ảnh sẽ vẫn nằm trên bề mặt đã chọn, xuất hiện ở kích thước tương ứng nếu mục thực tế nằm trên bề mặt đó, đồng thời cho phép người dùng di chuyển xung quanh hình ảnh cũng như di chuyển gần hoặc xa hình ảnh hơn. Đ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. Một bài viết đồng hành mô tả chi tiết về 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ế bành 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.

Truyền tia, kiểm thử lượt nhấn và reticles

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à việc xác định xem đã có lượt truy cập hay chưa được gọi là kiểm thử 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ứ việc gì, hãy kiểm tra kỹ để đảm bảo 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ạ kiểm thử lượt nhấn AR

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. Dòng kẻ mục tiêu là một hình ảnh tạm thời giúp đặt đối tượng trong 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 bạn không cần phải làm vậy. Ví dụ: trong bản minh hoạ Chacmool, đó là một hộp hình chữ nhật có hình dạng gần giống với đế của đối tượng đang được đặt.

Xem 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ữ đó. Xin lưu ý rằng tôi muốn đơn giản hoá các ví dụ về mã để giúp bạn hiểu được những gì đang diễn ra.

Kiến thức cơ bản về cách tham gia phiên AR và chạy vòng lặp kết xuất cũng giống như đối với VR. 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, đường ngắm cố gắng tìm một bề mặt trước khi đặt một mục. 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 (origindirection) 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ị đó sẽ được chuẩn hoá (chuyển đổi) thành độ dài 1.

Di chuyển đường ngắm

Khi bạn di chuyển thiết bị, đường ngắm cần di chuyển cùng thiết bị khi thiết bị 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, gl-matrix không phải là yêu cầu bắt buộc. Đ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à CottontailThree.js đã hỗ trợ WebXR kể từ tháng 5.

Đặt đối tượng

Một đối tượng được đặt trong AR 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ì tâm ngắm di chuyển cung cấp cho bạn một nguồn kiểm thử lượt nhấn không đổi, nên cách đơn giản nhất để đặt một đối tượng là vẽ đối tượng đó tại vị trí của tâm ngắm trong lần kiểm thử lượt nhấn gần đây 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 khi tiến hành.