Cách Tạo Trải Nghiệm AR Với Unity Và Vuforia

Trong bài viết này, bạn sẽ học cách tạo trải nghiệm thực tế tăng cường bằng Vuforia và Unity. Bạn cũng sẽ học cách kiểm tra và chạy ứng dụng của mình trên điện thoại thông minh Android.

Đây là những gì bạn sẽ xây dựng

Khối lập phương này có thể được thay thế bằng bất kỳ đối tượng 3D nào khác, nhưng vì lợi ích đơn giản, chúng tôi sẽ chỉ bám vào một khối lập phương trong hướng dẫn này.

Dưới đây là sự cố về những gì đang xảy ra trong video trên:

1. Máy ảnh của điện thoại phát hiện một hình ảnh
2. Hình ảnh được xác định là một điểm đánh dấu
3. Sau đó, điện thoại hiển thị một đối tượng trên đầu hình ảnh (hoặc điểm đánh dấu)

Những trải nghiệm AR như vậy, trong đó điện thoại của bạn hiển thị nội dung 3D trên hình ảnh, được gọi là trải nghiệm AR dựa trên điểm đánh dấu. Đây là những gì chúng tôi muốn tạo ngày hôm nay và chúng tôi sẽ làm điều đó bằng cách sử dụng SDK có tên Vuforia.

Tại sao Vuforia?

Vuforia có nhiều tính năng như:

1. Theo dõi hình ảnh
2. Theo dõi đối tượng
3. Theo dõi mặt đất
4. Đa mục tiêu
5. Nhận dạng đám mây
6. Các nút ảo

và nhiều hơn nữa.

Một trong những lý do tại sao tôi sử dụng Vuforia trong hướng dẫn này là nó nhanh chóng và đơn giản để thiết lập. Bạn có thể tạo trải nghiệm AR đầu tiên của mình mà không gặp rắc rối khi viết mã.

Bên cạnh đó, nếu bạn biết các bước cấu hình Vuforia trên nền tảng như Android, bạn sẽ có thể áp dụng các bước tương tự cho iOS. Điều này có nghĩa là bạn có thể phát triển một lần và phát hành ứng dụng của mình cho nhiều nền tảng.

Ưu điểm lớn nhất của Vuforia so với ARCore và ARKit là nó hỗ trợ nhiều loại thiết bị. Ngoại trừ điện thoại thông minh và máy tính bảng, Vuforia cũng hỗ trợ tai nghe thực tế tăng cường như Microsoft Hololens và Magic Leap. Bạn có thể tìm thấy danh sách đầy đủ các thiết bị được Vuforia đề xuất tại đây .

Điều kiện tiên quyết

Trước khi chúng tôi chuyển sang Unity và bắt đầu với dự án, hãy đảm bảo rằng bạn đã hoàn thành các tác vụ sau:

1. Đăng ký làm nhà phát triển công cụ Vuforia
2. Đảm bảo bạn đã cài đặt Unity 2021.3 (phiên bản LTS)
3. Kiểm tra xem thiết bị của bạn có hỗ trợ thực tế tăng cường hay không

Đây là những gì chúng tôi sẽ đề cập đến:

• Thiết lập dự án
• Thiết lập Vuforia với Unity
• Làm cách nào để bạn tạo Mục tiêu hình ảnh trong Vuforia?
• Hiển thị nội dung 3D trên Mục tiêu hình ảnh

Thiết lập dự án

Nếu bạn chưa làm như vậy, hãy tạo một dự án Unity 3D mới và đặt tên là “Hello Vuforia”.

Bạn có thể làm như vậy bằng cách khởi chạy Unity Hub trên máy tính của mình và nhấp vào Dự án mới .

Sau khi nhấp vào Dự án mới , cửa sổ bên dưới bật lên. Để đảm bảo rằng chúng tôi đang tạo một dự án 3D, hãy thực hiện các bước sau:

1. Chọn 3D từ các mẫu
2. Cập nhật Tên dự án từ Dự án của tôi thành Hello Vuforia
3. Nhấp vào nút Tạo dự án

Dự án sẽ mất vài phút để mở trong Unity.

Giữ cho dự án luôn mở và hãy bắt tay vào tích hợp Vuforia.

Thiết lập Vuforia với Unity

Trong bước này, bạn sẽ thêm gói Vuforia vào dự án Hello Vuforia trong Unity.

Để bắt đầu, hãy tải xuống gói Vuforia . Xin lưu ý rằng bạn không thể tải xuống gói trừ khi bạn đã đăng ký bản thân là Nhà phát triển Vuforia.

Tiếp theo, nhấp đúp vào gói Unity đã tải xuống và bạn sẽ thấy nó tự động bật lên trong Unity Editor. Nhấp vào nhập .

Để xác minh xem Vuforia có được nhập thành công hay không, hãy nhấp chuột phải vào bảng Cấu trúc phân cấp trong Unity Editor. Nếu bạn thấy Vuforia Engine trong danh sách thả xuống, điều đó có nghĩa là Vuforia đã được nhập thành công.

Xóa Camera chính khỏi cảnh. Sau đó, nhấp chuột phải vào bảng Phân cấp > Vuforia Engine > Thêm AR Camera vào cảnh.

Trong Cửa sổ Dự án , đi tới Tài sản > Tài nguyên và nhấp đúp vào VuforiaConfiguration để xem các thuộc tính của nó trong bảng kiểm tra. Bạn sẽ thêm khóa cấp phép trong bước tiếp theo.

Để thêm khóa cấp phép, hãy truy cập Cổng thông tin nhà phát triển Vuforia > Trình quản lý giấy phép và nhấp vào Nhận cơ bản .

Kế hoạch cơ bản (có sẵn miễn phí) bao gồm các tính năng như Mục tiêu hình ảnh, Đa mục tiêu, Mục tiêu hình trụ, VuMarks và Mặt đất. Bạn có thể xây dựng và xuất bản số lượng ứng dụng không giới hạn mà không có hình mờ Vuforia. Tuy nhiên, nếu ứng dụng của bạn sử dụng các tính năng nâng cao của Vuforia như Mục tiêu mô hình và Mục tiêu khu vực, thì Vuforia Watermark sẽ xuất hiện. Điều này có nghĩa là bạn có thể phát triển ứng dụng của mình bằng cách sử dụng các tính năng này cho mục đích nghiên cứu cá nhân nhưng không thể xuất bản ứng dụng trên bất kỳ nền tảng nào.

Nếu bạn muốn có quyền truy cập vào Mục tiêu mô hình và Mục tiêu khu vực mà không có Hình mờ Vuforia được hiển thị trong ứng dụng của bạn, bạn có thể mua gói Premium. Để hiểu chi tiết hơn về Vuforia bạn có thể vào link này .

Giữ tên giấy phép giống như tên dự án của bạn; tức là, Xin chào Vuforia . Bạn có thể đặt bất kỳ tên nào cho giấy phép của mình. Chọn hộp điều khoản và điều kiện, sau đó nhấp vào Xác nhận .

Tiếp theo, sao chép khóa cấp phép.

Và dán nó vào trường Khóa cấp phép ứng dụng trong Unity.

Hoàn hảo! Bạn đã cấu hình thành công Vuforia và dự án Unity của mình.

Bây giờ chúng ta có thể chuyển sang phần thú vị: nhận dạng hình ảnh.

Làm cách nào để bạn tạo Mục tiêu hình ảnh trong Vuforia?

Trong bước này, chúng tôi sẽ thêm hình ảnh (hoặc điểm đánh dấu) để Vuforia có thể phát hiện và theo dõi chúng. Những hình ảnh được phát hiện và theo dõi này được gọi là Mục tiêu Hình ảnh trong Vuforia. Tập hợp các Mục tiêu Hình ảnh được lưu trữ trong Cơ sở dữ liệu.

Cả Mục tiêu Hình ảnh và Cơ sở dữ liệu đều được tạo từ Cổng nhà phát triển Vuforia .

Để bắt đầu với Mục tiêu hình ảnh, trong Cổng nhà phát triển Vuforia, hãy chuyển đến Trình quản lý mục tiêu . Sau đó nhấp vào Thêm cơ sở dữ liệu .

Đặt Tên cơ sở dữ liệu là “ HelloVuforia ” (không có khoảng trắng) và chọn Loại thiết bị . Cơ sở dữ liệu loại thiết bị là cơ sở dữ liệu tồn tại trong ứng dụng của bạn. Nếu bạn có Cơ sở dữ liệu lớn, hãy chọn Loại đám mây . Cuối cùng, nhấp vào Tạo .

Sau khi Cơ sở dữ liệu được tạo, hãy mở HelloVuforia và nhấp vào Thêm mục tiêu .

Chọn Hình ảnh làm Loại của bạn . Bạn có thể tải lên bất kỳ hình ảnh nào trong trường Tệp ; Tôi đã sử dụng cái này từ Pixabay . Hình ảnh này sẽ là Mục tiêu hình ảnh của bạn, có nghĩa là nó sẽ được ứng dụng của bạn phát hiện và theo dõi.

Sau khi điền vào phần còn lại của các chi tiết của bạn ở trên, hãy nhấp vào Thêm . Bạn sẽ thấy các hình ảnh được liệt kê trong Cơ sở dữ liệu của mình. Tương ứng với mỗi hình ảnh có một thuộc tính là Đánh giá . Cố gắng tải lên hình ảnh có số lượng sao cao hơn. Số lượng sao càng cao, hình ảnh càng dễ phát hiện và theo dõi.

Trong hình ảnh bên dưới, bạn sẽ thấy hai Mục tiêu Hình ảnh. Mục tiêu được gọi là stone_image chỉ có 3 sao, nhưng mục tiêu của lens_image có 5 sao. Cả hai hình ảnh đều có thể tăng cường, nhưng lens_image sẽ cho hiệu suất tốt hơn.

Nhấp vào Tải xuống cơ sở dữ liệu > Unity Editor > Tải xuống . Sau khi tải xuống, bạn sẽ nhận được một tệp có tên HelloVuforia.unitypackage . Nhấp đúp vào tệp này để mở tệp trong Unity.

Bạn sẽ nhận được cửa sổ bật lên bên dưới. Nhấp vào Nhập .

Sau khi Cơ sở dữ liệu được nhập trong Unity, trong bảng điều khiển dự án, hãy chuyển đến Tài sản > Tài nguyên và nhấp đúp vào VuforiaConfiguration để xem các thuộc tính trong bảng Thanh tra . Trong phần Cơ sở dữ liệu , bạn sẽ thấy HelloVuforia được liệt kê. Điều này có nghĩa là bạn đã nhập thành công cơ sở dữ liệu vào dự án Unity của mình.

Hiển thị nội dung 3D trên Mục tiêu hình ảnh

Bây giờ bạn đã sẵn sàng để hiển thị một Khối lập phương ở phía trên Mục tiêu Hình ảnh. Thực hiện theo các bước còn lại trong hướng dẫn này để làm như vậy.

Nhấp chuột phải vào Bảng phân cấp > Vuforia Engine và thêm Mục tiêu hình ảnh vào Cảnh của bạn.

Chọn ImageTarget để xem các thuộc tính của nó trong bảng Thanh tra . Trong Hành vi mục tiêu hình ảnh (Tập lệnh) , hãy thực hiện các thay đổi sau:

1. Đặt Loại thành Từ Cơ sở dữ liệu
2. Đặt Cơ sở dữ liệu thành HelloVuforia
3. Đặt Mục tiêu Hình ảnh thành lens_image (hoặc bất kỳ hình ảnh nào khác mà bạn đã tải lên Cơ sở dữ liệu HelloVuforia của mình )

Bây giờ, thêm một khối lập phương làm con của ImageTarget trong Scene như sau:

Thu nhỏ khối lập phương xuống 0,2 (hoặc nhỏ hơn nếu bạn muốn).

Sau đó, di chuyển khối lập phương theo trục y dương một chút để nó trông giống như đang lơ lửng trên hình ảnh.

Đó là nó! Bây giờ bạn đã sẵn sàng để chạy ứng dụng trên thiết bị Android của mình.

Nhấp vào nút phát để chạy cảnh bằng webcam của bạn.

Sau khi nhấn nút phát, hãy trỏ webcam của bạn vào hình ảnh và khối lập phương xuất hiện một cách kỳ diệu trên đầu hình ảnh. Tôi đã tải hình ảnh xuống iPad của mình, nhưng bạn có thể lấy bản in của hình ảnh ra và hướng webcam vào bản in. Nó cho kết quả tương tự.

Sự kết luận

Xin chúc mừng!

Bạn vừa tạo trải nghiệm thực tế tăng cường với Unity và Vuforia. Hướng dẫn này là hướng dẫn cơ bản cho những người đang cố gắng tạo trải nghiệm AR đầu tiên của họ. Tuy nhiên, khối lập phương có thể được thay thế bằng bất kỳ mô hình 3D nào khác. Hãy thử một lần!

Nguồn: https://blog.logrocket.com/create-ar-experience-unity-vuforia/

 #unity #vuforia 

What is GEEK

Buddha Community

Cách Tạo Trải Nghiệm AR Với Unity Và Vuforia

Trong bài viết này, bạn sẽ học cách tạo trải nghiệm thực tế tăng cường bằng Vuforia và Unity. Bạn cũng sẽ học cách kiểm tra và chạy ứng dụng của mình trên điện thoại thông minh Android.

Đây là những gì bạn sẽ xây dựng

Khối lập phương này có thể được thay thế bằng bất kỳ đối tượng 3D nào khác, nhưng vì lợi ích đơn giản, chúng tôi sẽ chỉ bám vào một khối lập phương trong hướng dẫn này.

Dưới đây là sự cố về những gì đang xảy ra trong video trên:

1. Máy ảnh của điện thoại phát hiện một hình ảnh
2. Hình ảnh được xác định là một điểm đánh dấu
3. Sau đó, điện thoại hiển thị một đối tượng trên đầu hình ảnh (hoặc điểm đánh dấu)

Những trải nghiệm AR như vậy, trong đó điện thoại của bạn hiển thị nội dung 3D trên hình ảnh, được gọi là trải nghiệm AR dựa trên điểm đánh dấu. Đây là những gì chúng tôi muốn tạo ngày hôm nay và chúng tôi sẽ làm điều đó bằng cách sử dụng SDK có tên Vuforia.

Tại sao Vuforia?

Vuforia có nhiều tính năng như:

1. Theo dõi hình ảnh
2. Theo dõi đối tượng
3. Theo dõi mặt đất
4. Đa mục tiêu
5. Nhận dạng đám mây
6. Các nút ảo

và nhiều hơn nữa.

Một trong những lý do tại sao tôi sử dụng Vuforia trong hướng dẫn này là nó nhanh chóng và đơn giản để thiết lập. Bạn có thể tạo trải nghiệm AR đầu tiên của mình mà không gặp rắc rối khi viết mã.

Bên cạnh đó, nếu bạn biết các bước cấu hình Vuforia trên nền tảng như Android, bạn sẽ có thể áp dụng các bước tương tự cho iOS. Điều này có nghĩa là bạn có thể phát triển một lần và phát hành ứng dụng của mình cho nhiều nền tảng.

Ưu điểm lớn nhất của Vuforia so với ARCore và ARKit là nó hỗ trợ nhiều loại thiết bị. Ngoại trừ điện thoại thông minh và máy tính bảng, Vuforia cũng hỗ trợ tai nghe thực tế tăng cường như Microsoft Hololens và Magic Leap. Bạn có thể tìm thấy danh sách đầy đủ các thiết bị được Vuforia đề xuất tại đây .

Điều kiện tiên quyết

Trước khi chúng tôi chuyển sang Unity và bắt đầu với dự án, hãy đảm bảo rằng bạn đã hoàn thành các tác vụ sau:

1. Đăng ký làm nhà phát triển công cụ Vuforia
2. Đảm bảo bạn đã cài đặt Unity 2021.3 (phiên bản LTS)
3. Kiểm tra xem thiết bị của bạn có hỗ trợ thực tế tăng cường hay không

Đây là những gì chúng tôi sẽ đề cập đến:

• Thiết lập dự án
• Thiết lập Vuforia với Unity
• Làm cách nào để bạn tạo Mục tiêu hình ảnh trong Vuforia?
• Hiển thị nội dung 3D trên Mục tiêu hình ảnh

Thiết lập dự án

Nếu bạn chưa làm như vậy, hãy tạo một dự án Unity 3D mới và đặt tên là “Hello Vuforia”.

Bạn có thể làm như vậy bằng cách khởi chạy Unity Hub trên máy tính của mình và nhấp vào Dự án mới .

Sau khi nhấp vào Dự án mới , cửa sổ bên dưới bật lên. Để đảm bảo rằng chúng tôi đang tạo một dự án 3D, hãy thực hiện các bước sau:

1. Chọn 3D từ các mẫu
2. Cập nhật Tên dự án từ Dự án của tôi thành Hello Vuforia
3. Nhấp vào nút Tạo dự án

Dự án sẽ mất vài phút để mở trong Unity.

Giữ cho dự án luôn mở và hãy bắt tay vào tích hợp Vuforia.

Thiết lập Vuforia với Unity

Trong bước này, bạn sẽ thêm gói Vuforia vào dự án Hello Vuforia trong Unity.

Để bắt đầu, hãy tải xuống gói Vuforia . Xin lưu ý rằng bạn không thể tải xuống gói trừ khi bạn đã đăng ký bản thân là Nhà phát triển Vuforia.

Tiếp theo, nhấp đúp vào gói Unity đã tải xuống và bạn sẽ thấy nó tự động bật lên trong Unity Editor. Nhấp vào nhập .

Để xác minh xem Vuforia có được nhập thành công hay không, hãy nhấp chuột phải vào bảng Cấu trúc phân cấp trong Unity Editor. Nếu bạn thấy Vuforia Engine trong danh sách thả xuống, điều đó có nghĩa là Vuforia đã được nhập thành công.

Xóa Camera chính khỏi cảnh. Sau đó, nhấp chuột phải vào bảng Phân cấp > Vuforia Engine > Thêm AR Camera vào cảnh.

Trong Cửa sổ Dự án , đi tới Tài sản > Tài nguyên và nhấp đúp vào VuforiaConfiguration để xem các thuộc tính của nó trong bảng kiểm tra. Bạn sẽ thêm khóa cấp phép trong bước tiếp theo.

Để thêm khóa cấp phép, hãy truy cập Cổng thông tin nhà phát triển Vuforia > Trình quản lý giấy phép và nhấp vào Nhận cơ bản .

Kế hoạch cơ bản (có sẵn miễn phí) bao gồm các tính năng như Mục tiêu hình ảnh, Đa mục tiêu, Mục tiêu hình trụ, VuMarks và Mặt đất. Bạn có thể xây dựng và xuất bản số lượng ứng dụng không giới hạn mà không có hình mờ Vuforia. Tuy nhiên, nếu ứng dụng của bạn sử dụng các tính năng nâng cao của Vuforia như Mục tiêu mô hình và Mục tiêu khu vực, thì Vuforia Watermark sẽ xuất hiện. Điều này có nghĩa là bạn có thể phát triển ứng dụng của mình bằng cách sử dụng các tính năng này cho mục đích nghiên cứu cá nhân nhưng không thể xuất bản ứng dụng trên bất kỳ nền tảng nào.

Nếu bạn muốn có quyền truy cập vào Mục tiêu mô hình và Mục tiêu khu vực mà không có Hình mờ Vuforia được hiển thị trong ứng dụng của bạn, bạn có thể mua gói Premium. Để hiểu chi tiết hơn về Vuforia bạn có thể vào link này .

Giữ tên giấy phép giống như tên dự án của bạn; tức là, Xin chào Vuforia . Bạn có thể đặt bất kỳ tên nào cho giấy phép của mình. Chọn hộp điều khoản và điều kiện, sau đó nhấp vào Xác nhận .

Tiếp theo, sao chép khóa cấp phép.

Và dán nó vào trường Khóa cấp phép ứng dụng trong Unity.

Hoàn hảo! Bạn đã cấu hình thành công Vuforia và dự án Unity của mình.

Bây giờ chúng ta có thể chuyển sang phần thú vị: nhận dạng hình ảnh.

Làm cách nào để bạn tạo Mục tiêu hình ảnh trong Vuforia?

Trong bước này, chúng tôi sẽ thêm hình ảnh (hoặc điểm đánh dấu) để Vuforia có thể phát hiện và theo dõi chúng. Những hình ảnh được phát hiện và theo dõi này được gọi là Mục tiêu Hình ảnh trong Vuforia. Tập hợp các Mục tiêu Hình ảnh được lưu trữ trong Cơ sở dữ liệu.

Cả Mục tiêu Hình ảnh và Cơ sở dữ liệu đều được tạo từ Cổng nhà phát triển Vuforia .

Để bắt đầu với Mục tiêu hình ảnh, trong Cổng nhà phát triển Vuforia, hãy chuyển đến Trình quản lý mục tiêu . Sau đó nhấp vào Thêm cơ sở dữ liệu .

Đặt Tên cơ sở dữ liệu là “ HelloVuforia ” (không có khoảng trắng) và chọn Loại thiết bị . Cơ sở dữ liệu loại thiết bị là cơ sở dữ liệu tồn tại trong ứng dụng của bạn. Nếu bạn có Cơ sở dữ liệu lớn, hãy chọn Loại đám mây . Cuối cùng, nhấp vào Tạo .

Sau khi Cơ sở dữ liệu được tạo, hãy mở HelloVuforia và nhấp vào Thêm mục tiêu .

Chọn Hình ảnh làm Loại của bạn . Bạn có thể tải lên bất kỳ hình ảnh nào trong trường Tệp ; Tôi đã sử dụng cái này từ Pixabay . Hình ảnh này sẽ là Mục tiêu hình ảnh của bạn, có nghĩa là nó sẽ được ứng dụng của bạn phát hiện và theo dõi.

Sau khi điền vào phần còn lại của các chi tiết của bạn ở trên, hãy nhấp vào Thêm . Bạn sẽ thấy các hình ảnh được liệt kê trong Cơ sở dữ liệu của mình. Tương ứng với mỗi hình ảnh có một thuộc tính là Đánh giá . Cố gắng tải lên hình ảnh có số lượng sao cao hơn. Số lượng sao càng cao, hình ảnh càng dễ phát hiện và theo dõi.

Trong hình ảnh bên dưới, bạn sẽ thấy hai Mục tiêu Hình ảnh. Mục tiêu được gọi là stone_image chỉ có 3 sao, nhưng mục tiêu của lens_image có 5 sao. Cả hai hình ảnh đều có thể tăng cường, nhưng lens_image sẽ cho hiệu suất tốt hơn.

Nhấp vào Tải xuống cơ sở dữ liệu > Unity Editor > Tải xuống . Sau khi tải xuống, bạn sẽ nhận được một tệp có tên HelloVuforia.unitypackage . Nhấp đúp vào tệp này để mở tệp trong Unity.

Bạn sẽ nhận được cửa sổ bật lên bên dưới. Nhấp vào Nhập .

Sau khi Cơ sở dữ liệu được nhập trong Unity, trong bảng điều khiển dự án, hãy chuyển đến Tài sản > Tài nguyên và nhấp đúp vào VuforiaConfiguration để xem các thuộc tính trong bảng Thanh tra . Trong phần Cơ sở dữ liệu , bạn sẽ thấy HelloVuforia được liệt kê. Điều này có nghĩa là bạn đã nhập thành công cơ sở dữ liệu vào dự án Unity của mình.

Hiển thị nội dung 3D trên Mục tiêu hình ảnh

Bây giờ bạn đã sẵn sàng để hiển thị một Khối lập phương ở phía trên Mục tiêu Hình ảnh. Thực hiện theo các bước còn lại trong hướng dẫn này để làm như vậy.

Nhấp chuột phải vào Bảng phân cấp > Vuforia Engine và thêm Mục tiêu hình ảnh vào Cảnh của bạn.

Chọn ImageTarget để xem các thuộc tính của nó trong bảng Thanh tra . Trong Hành vi mục tiêu hình ảnh (Tập lệnh) , hãy thực hiện các thay đổi sau:

1. Đặt Loại thành Từ Cơ sở dữ liệu
2. Đặt Cơ sở dữ liệu thành HelloVuforia
3. Đặt Mục tiêu Hình ảnh thành lens_image (hoặc bất kỳ hình ảnh nào khác mà bạn đã tải lên Cơ sở dữ liệu HelloVuforia của mình )

Bây giờ, thêm một khối lập phương làm con của ImageTarget trong Scene như sau:

Thu nhỏ khối lập phương xuống 0,2 (hoặc nhỏ hơn nếu bạn muốn).

Sau đó, di chuyển khối lập phương theo trục y dương một chút để nó trông giống như đang lơ lửng trên hình ảnh.

Đó là nó! Bây giờ bạn đã sẵn sàng để chạy ứng dụng trên thiết bị Android của mình.

Nhấp vào nút phát để chạy cảnh bằng webcam của bạn.

Sau khi nhấn nút phát, hãy trỏ webcam của bạn vào hình ảnh và khối lập phương xuất hiện một cách kỳ diệu trên đầu hình ảnh. Tôi đã tải hình ảnh xuống iPad của mình, nhưng bạn có thể lấy bản in của hình ảnh ra và hướng webcam vào bản in. Nó cho kết quả tương tự.

Sự kết luận

Xin chúc mừng!

Bạn vừa tạo trải nghiệm thực tế tăng cường với Unity và Vuforia. Hướng dẫn này là hướng dẫn cơ bản cho những người đang cố gắng tạo trải nghiệm AR đầu tiên của họ. Tuy nhiên, khối lập phương có thể được thay thế bằng bất kỳ mô hình 3D nào khác. Hãy thử một lần!

Nguồn: https://blog.logrocket.com/create-ar-experience-unity-vuforia/

 #unity #vuforia 

Why unity 3D is best for game app development

We can see an exponential growth in the game development industry today and the market for game development will increase day by day ,thanks to the increasing number of smartphone users and the technological advancements.Unity 3D is the trending game app development framework to serve the best quality.This game development framework enables developers to conduct 2D or 3D rendering with more than 1 mobile game to assist them in ratcheting. Apart from this the great qualities like cross-platform integration with asset management, high-end visual quality, intuitive design, interface flexibility and gameplay can now be leveraged.India is the leading game development hub and now people are** hire dedicated unity 3D developers in India** to create a high performing game app with best quality at affordable price which you can spread your games to larger audience.Lets have a look at why unity a 3D is the best platform for game development.
**
Support cross-platform**

Cross platforms save time and money as a single script can be compiled and used for multiple platforms such as Android, iOS, PC, Web and even Mac etcFeatures such as agile methodology allow speedy prototyping and constant releases to speed up the process of game development.

Open source

The large open source community of Unity 3D with an easy-to-understand documentation allows developers to come up with the most accurate and precise code and it saves a lot of time.

Graphics

Unity 3D can support graphic rendering from engines that use OpenGL ES, OpenGL and Direct 3D, as well as applications like 3DS Max, Blender and Adobe Photoshop. It enables high-quality audio and visual effects to be adapted without any distortion or compromise with quality.
**
Play mode feature
**
This feature allows easy and hassle free testing by allowing developers to look and play within the game instantly, evaluate and even review it,and also the Play or Play Plus mode can also be used to achieve frame to frame referencing.

Debugging

With Unity game development, the analysis and modification is incredibly easier as all the game factors are seen during ongoing interaction, which helps the engineers to troubleshoot the process at runtime.

These advantages make unity as the best game development platform and people h**ire dedicated unity 3D developers** for the best output.With Unity, countless games have been made and some of them have become instant classics.Take a look at some of the all-time trending Unity games .

• Kerbal Space Program

• Firewatch

• Subnautica

• Hollow Knight

• Arizona Sunshine

• Cuphead

• Ori And The Blind Forest

• Hearthstone

• Beat Saber

• Cities Skylines

• Getting Over It With Bennett Foddy
  In terms of graphics, gameplay, consistency and realism, technical advances and rise of new technologies like AR & VR and AI & ML make the game more ambitious day by day.Today the entire global game development is booming and mobile gaming business are hire unity 3D developers in India to meet this heavy market.**Hire dedicated unity 3D developers **will benefits the following,

• International standard game app development at lower cost.

• Skilled and experienced game developers

• Faster time to market

• Best infrastructure

Conclusion

Unity 3D has taken over the business and has altered the advancement of cross-platform app development paths. Unity 3D has already become the favourite of developers as they can import games created from iOS, PC, Play Store or other game consoles from other platforms and allow minimum game modifications to take full advantage of Unity 3D’s features. So if you have any game development hire unity 3D developers with great experience.

#hire unity 3 d developers in india #hire dedicated unity 3 d developers in india #hire unity 3 d programmers in india #hire unity 3 d developers #hire dedicated unity 3 d developers #hire unity 3 d programmers

A Template Language That Completely Separates Structure and Logic/Ruby

Curly

Curly is a template language that completely separates structure and logic. Instead of interspersing your HTML with snippets of Ruby, all logic is moved to a presenter class.

Installing

Installing Curly is as simple as running gem install curly-templates. If you're using Bundler to manage your dependencies, add this to your Gemfile

gem 'curly-templates'

Curly can also install an application layout file, replacing the .erb file commonly created by Rails. If you wish to use this, run the curly:install generator.

$ rails generate curly:install

How to use Curly

In order to use Curly for a view or partial, use the suffix .curly instead of .erb, e.g. app/views/posts/_comment.html.curly. Curly will look for a corresponding presenter class named Posts::CommentPresenter. By convention, these are placed in app/presenters/, so in this case the presenter would reside in app/presenters/posts/comment_presenter.rb. Note that presenters for partials are not prepended with an underscore.

Add some HTML to the partial template along with some Curly components:

<!-- app/views/posts/_comment.html.curly -->
<div class="comment">
  <p>
    {{author_link}} posted {{time_ago}} ago.
  </p>

  {{body}}

  {{#author?}}
    <p>{{deletion_link}}</p>
  {{/author?}}
</div>

The presenter will be responsible for providing the data for the components. Add the necessary Ruby code to the presenter:

# app/presenters/posts/comment_presenter.rb
class Posts::CommentPresenter < Curly::Presenter
  presents :comment

  def body
    SafeMarkdown.render(@comment.body)
  end

  def author_link
    link_to @comment.author.name, @comment.author, rel: "author"
  end

  def deletion_link
    link_to "Delete", @comment, method: :delete
  end

  def time_ago
    time_ago_in_words(@comment.created_at)
  end

  def author?
    @comment.author == current_user
  end
end

The partial can now be rendered like any other, e.g. by calling

render 'comment', comment: comment
render comment
render collection: post.comments

Curly components are surrounded by curly brackets, e.g. {{hello}}. They always map to a public method on the presenter class, in this case #hello. Methods ending in a question mark can be used for conditional blocks, e.g. {{#admin?}} ... {{/admin?}}.

Identifiers

Curly components can specify an identifier using the so-called dot notation: {{x.y.z}}. This can be very useful if the data you're accessing is hierarchical in nature. One common example is I18n:

<h1>{{i18n.homepage.header}}</h1>

# In the presenter, the identifier is passed as an argument to the method. The
# argument will always be a String.
def i18n(key)
  translate(key)
end

The identifier is separated from the component name with a dot. If the presenter method has a default value for the argument, the identifier is optional – otherwise it's mandatory.

Attributes

In addition to an identifier, Curly components can be annotated with attributes. These are key-value pairs that affect how a component is rendered.

The syntax is reminiscent of HTML:

<div>{{sidebar rows=3 width=200px title="I'm the sidebar!"}}</div>

The presenter method that implements the component must have a matching keyword argument:

def sidebar(rows: "1", width: "100px", title:); end

All argument values will be strings. A compilation error will be raised if

• an attribute is used in a component without a matching keyword argument being present in the method definition; or
• a required keyword argument in the method definition is not set as an attribute in the component.

You can define default values using Ruby's own syntax. Additionally, if the presenter method accepts arbitrary keyword arguments using the **doublesplat syntax then all attributes will be valid for the component, e.g.

def greetings(**names)
  names.map {|name, greeting| "#{name}: #{greeting}!" }.join("\n")
end

{{greetings alice=hello bob=hi}}
<!-- The above would be rendered as: -->
alice: hello!
bob: hi!

Note that since keyword arguments in Ruby are represented as Symbol objects, which are not garbage collected in Ruby versions less than 2.2, accepting arbitrary attributes represents a security vulnerability if your application allows untrusted Curly templates to be rendered. Only use this feature with trusted templates if you're not on Ruby 2.2 yet.

Conditional blocks

If there is some content you only want rendered under specific circumstances, you can use conditional blocks. The {{#admin?}}...{{/admin?}} syntax will only render the content of the block if the admin? method on the presenter returns true, while the {{^admin?}}...{{/admin?}} syntax will only render the content if it returns false.

Both forms can have an identifier: {{#locale.en?}}...{{/locale.en?}} will only render the block if the locale? method on the presenter returns true given the argument "en". Here's how to implement that method in the presenter:

class SomePresenter < Curly::Presenter
  # Allows rendering content only if the locale matches a specified identifier.
  def locale?(identifier)
    current_locale == identifier
  end
end

Furthermore, attributes can be set on the block. These only need to be specified when opening the block, not when closing it:

{{#square? width=3 height=3}}
  <p>It's square!</p>
{{/square?}}

Attributes work the same way as they do for normal components.

Collection blocks

Sometimes you want to render one or more items within the current template, and splitting out a separate template and rendering that in the presenter is too much overhead. You can instead define the template that should be used to render the items inline in the current template using the collection block syntax.

Collection blocks are opened using an asterisk:

{{*comments}}
  <li>{{body}} ({{author_name}})</li>
{{/comments}}

The presenter will need to expose the method #comments, which should return a collection of objects:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def comments
    @post.comments
  end
end

The template within the collection block will be used to render each item, and it will be backed by a presenter named after the component – in this case, comments. The name will be singularized and Curly will try to find the presenter class in the following order:

• Posts::ShowPresenter::CommentPresenter
• Posts::CommentPresenter
• CommentPresenter

This allows you some flexibility with regards to how you want to organize these nested templates and presenters.

Note that the nested template will only have access to the methods on the nested presenter, but all variables passed to the "parent" presenter will be forwarded to the nested presenter. In addition, the current item in the collection will be passed, as well as that item's index in the collection:

class Posts::CommentPresenter < Curly::Presenter
  presents :post, :comment, :comment_counter

  def number
    # `comment_counter` is automatically set to the item's index in the collection,
    # starting with 1.
    @comment_counter
  end

  def body
    @comment.body
  end

  def author_name
    @comment.author.name
  end
end

Collection blocks are an alternative to splitting out a separate template and rendering that from the presenter – which solution is best depends on your use case.

Context blocks

While collection blocks allow you to define the template that should be used to render items in a collection right within the parent template, context blocks allow you to define the template for an arbitrary context. This is very powerful, and can be used to define widget-style components and helpers, and provide an easy way to work with structured data. Let's say you have a comment form on your page, and you'd rather keep the template inline. A simple template could look like:

<!-- post.html.curly -->
<h1>{{title}}</h1>
{{body}}

{{@comment_form}}
  <b>Name: </b> {{name_field}}<br>
  <b>E-mail: </b> {{email_field}}<br>
  {{comment_field}}

  {{submit_button}}
{{/comment_form}}

Note that an @ character is used to denote a context block. Like with collection blocks, a separate presenter class is used within the block, and a simple convention is used to find it. The name of the context component (in this case, comment_form) will be camel cased, and the current presenter's namespace will be searched:

class PostPresenter < Curly::Presenter
  presents :post
  def title; @post.title; end
  def body; markdown(@post.body); end

  # A context block method *must* take a block argument. The return value
  # of the method will be used when rendering. Calling the block argument will
  # render the nested template. If you pass a value when calling the block
  # argument it will be passed to the presenter.
  def comment_form(&block)
    form_for(Comment.new, &block)
  end

  # The presenter name is automatically deduced.
  class CommentFormPresenter < Curly::Presenter
    # The value passed to the block argument will be passed in a parameter named
    # after the component.
    presents :comment_form

    # Any parameters passed to the parent presenter will be forwarded to this
    # presenter as well.
    presents :post

    def name_field
      @comment_form.text_field :name
    end

    # ...
  end
end

Context blocks were designed to work well with Rails' helper methods such as form_for and content_tag, but you can also work directly with the block. For instance, if you want to directly control the value that is passed to the nested presenter, you can call the call method on the block yourself:

def author(&block)
  content_tag :div, class: "author" do
    # The return value of `call` will be the result of rendering the nested template
    # with the argument. You can post-process the string if you want.
    block.call(@post.author)
  end
end

Context shorthand syntax

If you find yourself opening a context block just in order to use a single component, e.g. {{@author}}{{name}}{{/author}}, you can use the shorthand syntax instead: {{author:name}}. This works for all component types, e.g.

{{#author:admin?}}
  <p>The author is an admin!</p>
{{/author:admin?}}

The syntax works for nested contexts as well, e.g. {{comment:author:name}}. Any identifier and attributes are passed to the target component, which in this example would be {{name}}.

Setting up state

Although most code in Curly presenters should be free of side effects, sometimes side effects are required. One common example is defining content for a content_for block.

If a Curly presenter class defines a setup! method, it will be called before the view is rendered:

class PostPresenter < Curly::Presenter
  presents :post

  def setup!
    content_for :title, post.title

    content_for :sidebar do
      render 'post_sidebar', post: post
    end
  end
end

Escaping Curly syntax

In order to have {{ appear verbatim in the rendered HTML, use the triple Curly escape syntax:

This is {{{escaped}}.

You don't need to escape the closing }}.

Comments

If you want to add comments to your Curly templates that are not visible in the rendered HTML, use the following syntax:

{{! This is some interesting stuff }}

Presenters

Presenters are classes that inherit from Curly::Presenter – they're usually placed in app/presenters/, but you can put them anywhere you'd like. The name of the presenter classes match the virtual path of the view they're part of, so if your controller is rendering posts/show, the Posts::ShowPresenter class will be used. Note that Curly is only used to render a view if a template can be found – in this case, at app/views/posts/show.html.curly.

Presenters can declare a list of accepted variables using the presents method:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
end

A variable can have a default value:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
  presents :comment, default: nil
end

Any public method defined on the presenter is made available to the template as a component:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author_link
    # You can call any Rails helper from within a presenter instance:
    link_to author.name, profile_path(author), rel: "author"
  end

  private

  # Private methods are not available to the template, so they're safe to
  # use.
  def author
    @post.author
  end
end

Presenter methods can even take an argument. Say your Curly template has the content {{t.welcome_message}}, where welcome_message is an I18n key. The following presenter method would make the lookup work:

def t(key)
  translate(key)
end

That way, simple ``functions'' can be added to the Curly language. Make sure these do not have any side effects, though, as an important part of Curly is the idempotence of the templates.

Layouts and content blocks

Both layouts and content blocks (see content_for) use yield to signal that content can be inserted. Curly works just like ERB, so calling yield with no arguments will make the view usable as a layout, while passing a Symbol will make it try to read a content block with the given name:

# Given you have the following Curly template in
# app/views/layouts/application.html.curly
#
#   <html>
#     <head>
#       <title>{{title}}</title>
#     </head>
#     <body>
#       <div id="sidebar">{{sidebar}}</div>
#       {{body}}
#     </body>
#   </html>
#
class ApplicationLayout < Curly::Presenter
  def title
    "You can use methods just like in any other presenter!"
  end

  def sidebar
    # A view can call `content_for(:sidebar) { "some HTML here" }`
    yield :sidebar
  end

  def body
    # The view will be rendered and inserted here:
    yield
  end
end

Rails helper methods

In order to make a Rails helper method available as a component in your template, use the exposes_helper method:

class Layouts::ApplicationPresenter < Curly::Presenter
  # The components {{sign_in_path}} and {{root_path}} are made available.
  exposes_helper :sign_in_path, :root_path
end

Testing

Presenters can be tested directly, but sometimes it makes sense to integrate with Rails on some levels. Currently, only RSpec is directly supported, but you can easily instantiate a presenter:

SomePresenter.new(context, assigns)

context is a view context, i.e. an object that responds to render, has all the helper methods you expect, etc. You can pass in a test double and see what you need to stub out. assigns is the hash containing the controller and local assigns. You need to pass in a key for each argument the presenter expects.

Testing with RSpec

In order to test presenters with RSpec, make sure you have rspec-rails in your Gemfile. Given the following presenter:

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def body
    Markdown.render(@post.body)
  end
end

You can test the presenter methods like this:

# You can put this in your `spec_helper.rb`.
require 'curly/rspec'

# spec/presenters/posts/show_presenter_spec.rb
describe Posts::ShowPresenter, type: :presenter do
  describe "#body" do
    it "renders the post's body as Markdown" do
      assign(:post, double(:post, body: "**hello!**"))
      expect(presenter.body).to eq "<strong>hello!</strong>"
    end
  end
end

Note that your spec must be tagged with type: :presenter.

Examples

Here is a simple Curly template – it will be looked up by Rails automatically.

<!-- app/views/posts/show.html.curly -->
<h1>{{title}}<h1>
<p class="author">{{author}}</p>
<p>{{description}}</p>

{{comment_form}}

<div class="comments">
  {{comments}}
</div>

When rendering the template, a presenter is automatically instantiated with the variables assigned in the controller or the render call. The presenter declares the variables it expects with presents, which takes a list of variables names.

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author
    link_to(@post.author.name, @post.author, rel: "author")
  end

  def description
    Markdown.new(@post.description).to_html.html_safe
  end

  def comments
    render 'comment', collection: @post.comments
  end

  def comment_form
    if @post.comments_allowed?
      render 'comment_form', post: @post
    else
      content_tag(:p, "Comments are disabled for this post")
    end
  end
end

Caching

Caching is handled at two levels in Curly – statically and dynamically. Static caching concerns changes to your code and templates introduced by deploys. If you do not wish to clear your entire cache every time you deploy, you need a way to indicate that some view, helper, or other piece of logic has changed.

Dynamic caching concerns changes that happen on the fly, usually made by your users in the running system. You wish to cache a view or a partial and have it expire whenever some data is updated – usually whenever a specific record is changed.

Dynamic Caching

Because of the way logic is contained in presenters, caching entire views or partials by the data they present becomes exceedingly straightforward. Simply define a #cache_key method that returns a non-nil object, and the return value will be used to cache the template.

Whereas in ERB you would include the cache call in the template itself:

<% cache([@post, signed_in?]) do %>
  ...
<% end %>

In Curly you would instead declare it in the presenter:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def cache_key
    [@post, signed_in?]
  end
end

Likewise, you can add a #cache_duration method if you wish to automatically expire the fragment cache:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_duration
    30.minutes
  end
end

In order to set any cache option, define a #cache_options method that returns a Hash of options:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_options
    { compress: true, namespace: "my-app" }
  end
end

Static Caching

Static caching will only be enabled for presenters that define a non-nil #cache_key method (see Dynamic Caching.)

In order to make a deploy expire the cache for a specific view, set the version of the view to something new, usually by incrementing by one:

class Posts::ShowPresenter < Curly::Presenter
  version 3

  def cache_key
    # Some objects
  end
end

This will change the cache keys for all instances of that view, effectively expiring the old cache entries.

This works well for views, or for partials that are rendered in views that themselves are not cached. If the partial is nested within a view that is cached, however, the outer cache will not be expired. The solution is to register that the inner partial is a dependency of the outer one such that Curly can automatically deduce that the outer partial cache should be expired:

class Posts::ShowPresenter < Curly::Presenter
  version 3
  depends_on 'posts/comment'

  def cache_key
    # Some objects
  end
end

class Posts::CommentPresenter < Curly::Presenter
  version 4

  def cache_key
    # Some objects
  end
end

Now, if the version of Posts::CommentPresenter is bumped, the cache keys for both presenters would change. You can register any number of view paths with depends_on.

Curly integrates well with the caching mechanism in Rails 4 (or Cache Digests in Rails 3), so the dependencies defined with depends_on will be tracked by Rails. This will allow you to deploy changes to your templates and have the relevant caches automatically expire.

Thanks

Thanks to Zendesk for sponsoring the work on Curly.

Contributors

• Daniel Schierbeck (@dasch)
• Benjamin Quorning (@bquorning)
• Jeremy Rodi (@medcat)
• Alisson Cavalcante Agiani (@thelinuxlich)
• Łukasz Niemier (@hauleth)
• Cristian Planas (@Gawyn)
• Steven Davidovitz (@steved)

Build Status

---

Author: zendesk
Source code: https://github.com/zendesk/curly

#ruby   #ruby-on-rails 

How to Create an AR Experience with Unity and Vuforia

In this article, you will learn how to create an augmented reality experience using Vuforia and Unity. You will also learn how to test and run your app on an Android smartphone.

This is what you are going to build

See more at: https://blog.logrocket.com/create-ar-experience-unity-vuforia/

#unity #Vuforia

Unity と Vuforia で AR 体験を作成する方法

この記事では、Vuforia と Unity を使用して拡張現実体験を作成する方法を学習します。また、Android スマートフォンでアプリをテストして実行する方法も学びます。

これはあなたが構築しようとしているものです

この立方体は他の 3D オブジェクトに置き換えることができますが、簡単にするために、このチュートリアルでは立方体のみに固執します。

上記のビデオで何が起こっているかの内訳は次のとおりです。

1. 電話のカメラが画像を検出します
2. 画像はマーカーとして識別されます
3. 次に、電話は画像（またはマーカー）の上にオブジェクトをレンダリングします

スマートフォンが画像の上に 3D コンテンツをレンダリングするこのような AR 体験は、マーカーベースの AR 体験として知られています。これが私たちが今日作成しようとしているものであり、Vuforia という SDK を使用して作成します。

なぜVuforia?

Vforia には、次のような多くの機能があります。

1. 画像追跡
2. オブジェクト追跡
3. グランド プレーン トラッキング
4. マルチターゲット
5. クラウド認識
6. 仮想ボタン

などなど。

このチュートリアルで Vuforia を使用した理由の 1 つは、セットアップが迅速かつ簡単であることです。コーディングの手間をかけずに、初めての AR 体験を作成できます。

また、Android などのプラットフォームでの Vuforia の構成手順を知っていれば、iOS にも同じ手順を適用できます。これは、一度開発したアプリを複数のプラットフォームにリリースできることを意味します。

ARCore や ARKit に対する Vuforia の最大の利点は、幅広いデバイスをサポートしていることです。スマートフォンとタブレットを除いて、Vuforia は Microsoft Hololens や Magic Leap などの拡張現実ヘッドセットもサポートしています。Vuforia が推奨するデバイスの完全なリストは、こちらで確認できます。

前提条件

Unity に飛び込んでプロジェクトを開始する前に、次のタスクが完了していることを確認してください。

1. Vuforia Engine 開発者として登録する
2. Unity 2021.3 (LTS バージョン) がインストールされていることを確認してください
3. デバイスが拡張現実をサポートしているかどうかを確認する

説明する内容は次のとおりです。

• プロジェクトのセットアップ
• Unity で Vuforia をセットアップする
• Vuforia でイメージ ターゲットを作成するにはどうすればよいですか?
• イメージ ターゲット上での 3D コンテンツのレンダリング

プロジェクトのセットアップ

まだ行っていない場合は、新しい Unity 3D プロジェクトを作成し、「Hello Vuforia」という名前を付けます。

これを行うには、コンピューターで Unity Hub を起動し、 New Projectをクリックします。

New Projectをクリックすると、以下のウィンドウが表示されます。3D プロジェクトを作成していることを確認するには、次の手順を実行します。

1. テンプレートから3Dを選択
2. プロジェクト名をMy ProjectからHello Vuforiaに更新します。
3. プロジェクトの作成ボタンをクリックします

プロジェクトが Unity で開くまでに数分かかります。

プロジェクトを開いたままにして、Vuforia の統合に取り組みましょう。

Unity で Vuforia をセットアップする

このステップでは、Vuforia パッケージを Unity のHello Vuforiaプロジェクトに追加します。

まず、Vuforia パッケージをダウンロードします。Vuforia 開発者として登録していないと、パッケージをダウンロードできないことに注意してください。

次に、ダウンロードした Unity パッケージをダブルクリックすると、Unity エディターにこのポップアップが自動的に表示されます。インポートをクリックします。

Vuforia が正常にインポートされたかどうかを確認するには、Unity エディターの階層パネルを右クリックします。ドロップダウン リストにVuforia Engineが表示されている場合は、Vuforia が正常にインポートされたことを意味します。

シーンからメイン カメラを削除します。次に、階層パネルで右クリック> Vuforia エンジン> AR カメラをシーンに追加します。

Project Windowで、Assets > Resourcesに移動し、VuforiaConfigurationをダブルクリックして、インスペクター パネルにそのプロパティを表示します。次の手順でライセンス キーを追加します。

ライセンス キーを追加するには、Vuforia Developer Portal > License Managerに移動し、 Get Basicをクリックします。

ベーシック プラン (無料で利用可能) には、イメージ ターゲット、マルチ ターゲット、シリンダー ターゲット、VuMark、グラウンド プレーンなどの機能が含まれます。Vuforia 透かしのないアプリを無制限に作成して公開できます。ただし、アプリケーションがモデル ターゲットやエリア ターゲットなどの Vuforia の高度な機能を使用している場合は、Vuforia ウォーターマークが表示されます。つまり、個人的な研究目的でこれらの機能を使用してアプリを開発することはできますが、どのプラットフォームにもアプリを公開することはできません。

アプリに Vuforia ウォーターマークを表示せずにモデル ターゲットとエリア ターゲットにアクセスしたい場合は、プレミアム プランを購入できます。Vuforia の詳細については、このリンクにアクセスしてください。

ライセンス名はプロジェクト名と同じにしてください。つまり、こんにちは Vuforiaです。ライセンスには任意の名前を付けることができます。利用規約のチェックボックスをオンにして、[確認] をクリックします。

次に、ライセンス キーをコピーします。

そして、それを Unity のApp License Keyフィールドに貼り付けます。

完全！Vuforia と Unity プロジェクトが正常に構成されました。

ここからは、楽しい部分である画像認識に移ります。

Vuforia でイメージ ターゲットを作成するにはどうすればよいですか?

このステップでは、Vuforia が画像 (またはマーカー) を検出して追跡できるように、画像 (またはマーカー) を追加します。これらの検出および追跡されたイメージは、Vuforia ではイメージ ターゲットと呼ばれます。イメージ ターゲットのコレクションは、データベースに格納されます。

イメージ ターゲットとデータベースの両方がVuforia Developer Portalから作成されます。

イメージ ターゲットの使用を開始するには、Vuforia Developer Portal でTarget Managerに移動します。次に、[データベースの追加] をクリックします。

データベース名を「HelloVuforia」 (スペースなし) に設定し、デバイスタイプを選択します。Device-type Database は、アプリ内に存在するデータベースです。大規模なデータベースがある場合は、クラウドタイプを選択します。最後に、[作成] をクリックします。

データベースが作成されたら、HelloVuforiaを開いてAdd Targetをクリックします。

[タイプ]として[画像]を選択します。[ファイル] フィールドに任意の画像をアップロードできます。私はこれをPixabayから使用しました。この画像がイメージ ターゲットになります。つまり、アプリによって検出および追跡されます。

上記の残りの詳細を入力したら、[追加] をクリックします。データベースにリストされた画像が表示されます。各画像に対応して、 Ratingというプロパティがあります。星の数が多い画像をアップロードしてみてください。星の数が多いほど、画像の検出と追跡が容易になります。

下の画像では、2 つの画像ターゲットが表示されます。stones_imageというターゲットには 3 つの星しかありませんが、lens_imageターゲットには 5 つの星があります。どちらの画像も拡張可能ですが、lens_imageの方がパフォーマンスが向上します。

[データベースのダウンロード] > [ Unity エディター] > [ダウンロード] をクリックします。ダウンロードすると、 HelloVuforia.unitypackageというファイルが取得されます。このファイルをダブルクリックして Unity で開きます。

以下のポップアップが表示されます。[インポート]をクリックします。

データベースが Unity にインポートされたら、プロジェクト パネルでAssets > Resourcesに移動し、 VuforiaConfigurationをダブルクリックして、 Inspectorパネルでプロパティを表示します。[データベース]セクションに、HelloVuforiaが一覧表示されます。これは、データベースが Unity プロジェクトに正常にインポートされたことを意味します。

イメージ ターゲット上での 3D コンテンツのレンダリング

これで、イメージ ターゲットの上にキューブを表示する準備が整いました。このチュートリアルの残りの手順に従ってください。

Hierarchy Panel > Vuforia Engineで右クリックし、Image Target をシーンに追加します。

ImageTargetを選択して、[インスペクター] パネルでそのプロパティを表示します。Image Target Behavior (Script)で、次の変更を行います。

1. タイプをデータベースからに設定
2. データベースをHelloVuforiaに設定
3. Image Targetをlens_image (またはHelloVuforiaデータベースにアップロードしたその他の画像) に設定します。

次のように、キューブをImageTargetの子としてシーンに追加します。

立方体を 0.2 (必要に応じてそれ以下) に縮小します。

次に、立方体を正の y 軸に少し移動して、画像の上に浮いているように見せます。

それでおしまい！これで、Android デバイスでアプリを実行する準備が整いました。

再生ボタンをクリックして、Web カメラを使用してシーンを実行します。

再生ボタンを押した後、ウェブカメラを画像に向けると、キューブが魔法のように画像の上に表示されます。画像を iPad にダウンロードしましたが、画像を印刷して、Web カメラを印刷物に向けることもできます。同じ結果が得られます。

結論

おめでとう！

Unity と Vuforia を使用して拡張現実体験を作成しました。このチュートリアルは、初めての AR 体験を作成しようとする人にとって基本的なものでした。ただし、立方体は他の 3D モデルに置き換えることができます。試してみる！

ソース: https://blog.logrocket.com/create-ar-experience-unity-vuforia/

 #unity #vuforia