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

Liên khúc Joe
Joe Medley

Trong Chrome 67, chúng tôi đã công bố WebXR Device API cho cả công nghệ thực tế tăng cường (AR) và thực tế ảo (VR), mặc dù chỉ có các tính năng thực tế ảo được bật. Thực tế ảo (VR) 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. Trong khi đó, 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 Kiểm thử lượt truy cập WebXR vào Chrome Canary, một phương thức mới giúp sống động và phát triển các đối tượng mã web trong thực tế.

Tôi có thể lấy ở đâu?

API này dự kiến sẽ tiếp tục hoạt động trong Canary trong tương lai gần. Chúng tôi muốn có khoảng thời gian thử nghiệm kéo dài vì đây là đề xuất API rất mới, đồng thời chúng tôi muốn đảm bảo đề xuất này vừa hiệu quả vừa phù hợp cho nhà phát triển.

Ngoài Chrome Canary, bạn cũng cần có:

Với những tài nguyên này, bạn có thể đi sâu vào 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 đã trình diễn công nghệ thực tế tăng cường với bản dựng ban đầu của Chrome. Tôi đã nói đi nói lại điều gì đó với cả nhà phát triển lẫn nhà phát triển không phải nhà phát triển trong ba ngày đó, tôi ước gì mình đã biết để đưa vào bài viết sống động trên web của mình: "Đó chỉ là web".

"Tôi cần cài đặt tiện ích nào của Chrome?" "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".

"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".

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 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ẽ học được rất nhiều thứ.

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

Tính năng này hữu ích với mục đích gì?

Công nghệ 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ụ: tính năng 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 đồ vật trong nhà họ khi mua sắm.

Các 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 mô tả một đối tượng theo kích thước thật 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 nếu mục 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 hơn hoặc xa mục hơn. Điều này giúp người xem hiểu rõ đối tượng hơn so với hình ảnh hai chiều.

Nếu bạn không chắc chắn về tất cả những điều đó, sẽ rõ ràng khi bạn sử dụng 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 đối tượng thực. Video ở đây là một bản minh hoạ hướng dẫn mà chúng tôi đã xây dựng có tên là Chacmool. Bài viết đi kèm mô tả chi tiết bản minh hoạ này. Điều quan trọng của buổi thảo luận này là khi đặt tượng Chacmool trong chế độ thực tế tăng cường, bạn sẽ thấy kích thước của tượng như thể nó thực sự ở trong phòng với bạn.

Ví dụ của Chacmool mang tính giáo dục nhưng cũng có thể dễ dàng được thương mại hoá. 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 cho bạn biết liệu chiếc ghế dài có vừa với không gian của bạn hay không và trông nó ra sao bên cạnh đồ nội thất khác.

Quá trình diễn xuất, thử nghiệm thành công và kẻ ô vuông

Một vấn đề quan trọng 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 pháp thực hiện việc này được gọi là truyền bằng 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ực tế. Giao điểm đó được gọi là lần truy cập và việc xác định xem có xảy ra lần truy cập hay không là thử nghiệm nhấn.

Đây là thời điểm thích hợp để dùng thử mã mẫu 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 bạn đã bật cờ phù hợp. Bây giờ, hãy tải mẫu và nhấp vào "Start 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 độ trang web nhận được hình ảnh từ máy ảnh.

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

Bản minh hoạ Kiểm tra lượt truy cập thực tế tăng cường (AR)

Một điều nữa bạn nên chú ý là hình ảnh hoa hướng dương. Thanh này 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 hoa hướng dương mới sẽ di chuyển cùng thiết bị của bạn.

Hình ảnh di chuyển cùng với thiết bị và cố gắng khoá vào các bề mặt được gọi là kẻ ô vuông. Kẻ vẽ là hình ảnh tạm thời giúp đặt một đối tượng trong chế độ thực tế tăng cường. Trong bản minh hoạ này, kẻ ô vuông là bản sao của hình ảnh cần đặt. Nhưng không nhất thiết phải là như 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 được đặt.

Hiểu rõ về mã

Bản minh hoạ Chacmool cho thấy AR trong ứng dụng 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 được lấy từ bản minh hoạ Kiểm tra lượt truy cập thực tế tăng cường 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 điều gì đang xảy ra.

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

Di chuyển kẻ ô vuông

Khi bạn di chuyển thiết bị, ô vuông cần di chuyển cùng với nó khi nó cố gắng tìm một vị trí có thể đặt đối tượng. Điều này có nghĩa là ô vẽ 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ư VR, bạn cần có một phiên hoạt động 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 bạn có được phiên và tư thế, hãy xác định nơi tia được truyền. Mã mẫu sử dụng thư viện toán học gl-trix. Tuy nhiên, bạn không bắt buộc phải sử dụng ma trận gl. Điều quan trọng là bạn phải biết bạn đang tính toán điều gì với dữ liệu đó và dữ liệu đó 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 truyền tia, 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 hiển thị rõ ràng trong mẫu kiểm thử lượt truy cập, nhưng bạn vẫn cần lặp lại 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 được điều đó nếu bạn thực sự có tham vọng. Tuy nhiên, bạn nên sử dụng một khung tiêu chí. Các mẫu web sống động sử dụng 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 vật thể

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

Chúng ta chưa xây dựng xong các API web toàn màn hình, cũng không phải chỉ cần viết một đoạn mã dài. Chúng tôi sẽ xuất bản các bài viết mới tại đây khi có tiến bộ.