Thứ Hai, 31 tháng 8, 2015

[DIY] Tự tạo ứng dụng tăng cường thực tế ảo trên Android bằng Unity và Qualcomm Vuforia

Tinhte_tao-ung-dung-ar-vuforia-bn01. ​Hôm nay mình sẽ cùng các bạn tự tạo ra một ứng dụng tăng cường thực tế ảo (AR) trên Android bằng bộ công cụ Unity và công nghệ Vuforia do hãng Qualcomm phát triển. Bản chất của cách làm này là chụp ảnh một vật thể thật ngoài đời, sau đó nhờ công nghệ Vuforia nhận dạng, gán nó với một vật thể ảo do ta chọn. Khi camera của điện thoại thấy vật thể thật, màn hình điện thoại sẽ tự hiện vật thể ảo lên màn hình giống như là nó đang có thật vậy. Khá vui.

Công nghệ thực tế ảo được cho là xu hướng của thế giới công nghệ trong tương lai và các hãng bao gồm cả Google, Facebook, Samsung,… đều bắt đầu bước chân vào lĩnh vực này. Microsoft còn giới thiệu với chúng ta chiếc kính tăng cường thực tế ảo Hololens giúp tương tác với các vật thể ảo. Nhưng đây vẫn là những thử nghiệm chứ người dùng chúng ta chưa có cơ hội tiếp xúc với nó.

Nếu như công nghệ thực tế ảo VR đặt bạn vào cả một thế giới ảo thì công nghệ tăng cường thực tế ảo AR là sự kết hợp giữa thế giới thật và vật thể ảo. Bạn có biết chúng ta hoàn toàn có thể tự làm ra một ứng dụng chạy trên điện thoại Android để khám phá công nghệ này? Rất may mắn là hãng công nghệ Qualcomm đã phát triển một công nghệ mang tên Vuforia, kết hợp với công cụ Unity sẽ cho phép chúng ta thực hiện điều đó một cách dễ dàng.

Trong bài viết dưới đây, chúng ta sẽ sử dụng công nghệ Vuforia và bộ công cụ Unity để tự tạo ra một ứng dụng chạy trên Android nhằm khám phá công nghệ AR này. Ứng dụng tạo thành rất đơn giản nhưng hy vọng phần nào giúp các bạn có thời gian vui vẻ và hiểu thêm về công nghệ này.

Lưu ý, tải về và cài đặt 2 bộ SDK sau để thuận tiện trong quá trình xuất file APK:
  • Android Studio SDK (tải về), chạy lên để phần mềm tự tải SDK
  • Java SE Development Kit 8 (tải về)
Bước 1: Đăng ký tài khoản Vuforia và License Key

Tinhte_tao-ung-dung-ar-vuforia-01.
Tạo một tài khoản developer trên trang chủ của Vuforia. Chú ý là các thông tin bạn nên điền chính xác để tiện cho mọi việc về sau. Sau khi đăng ký, hệ thống yêu cầu đợi 5 phút rồi mới click vào link xác nhận trong mail. Trường hợp mình làm không hiểu vì sao mà không đăng nhập được dù đã nhập đúng mật khẩu, phải liên lạc với họ để hỗ trợ.

Tinhte_tao-ung-dung-ar-vuforia-02.
Tinhte_tao-ung-dung-ar-vuforia-03. Tinhte_tao-ung-dung-ar-vuforia-04.

Sau khi hoàn tất thủ tục đăng ký chúng ta bắt đầu click vào tab “Develope”, sau đó vào “Add License Key”, một popup sẽ hiện ra yêu cầu nhập tên dự án, sau đó chọn “Mobile” ở mục “Device”, bên dưới chúng ta chọn Starter sẽ được làm miễn phí. Chú ý phải nhớ tên dự án để thuận tiện cho các thao tác về sau, như ở đây mình đặt là “Test_2” cho dễ nhớ.

Bước 2: Tạo một cái Mapping Target.

Tinhte_tao-ung-dung-ar-vuforia-05.
Nói nôm na thì đây là một cột mốc ngoài đời thật để hệ thống có thể track nó và đặt vật thể ảo đúng vào chỗ đó.Mình sẽ chọn viết tay một dòng chữ bằng bút lông trên giấy trắng. Sau đó chụp hình nó, crop lại cho vừa sát 2 hình đó thôi cho hệ thống dễ nhận ra. Các bạn có thể chụp bất cứ thứ gì chứ không cần viết cái gì cả, chủ yếu là nên trên mặt phẳng để dễ làm. Chú ý hình phải lưu ở định dạng PNG hoặc JPG (JPGE không nhận).

Tinhte_tao-ung-dung-ar-vuforia-06.
Sau khi đã có hình làm mốc, chúng ta trở lại tab Develope trên trang Vuforia, click vào khu vực Target Manager, dự án Test_2 đã hiện ra, tiếp tục nhấn vào nút “Add Database”, một popup “Creat Database” hiện ra, chúng ta nhập tên vào, ở đây mình dùng Test_2 luôn cho dễ nhớ, bên dưới chọn “Device” và nhấn Create.

Tiếp tục nhấp vào Test_2, ấn vào nút “Add Target”, pop-up mới hiện ra và các bạn có thể thấy nó hỗ trợ khá nhiều kiểu cột mốc: một hình phẳng, một khối vuông, khối trụ và vật thể 3D. Mình chọn hình phẳng (Single Image), chọn file lưu dưới náy tính để up lên. Mục Width các bạn chọn 200 (độ dài của điểm mốc theo đơn vị màn hình), chiều cao sẽ tự tính ra. Bên dưới Name sẽ tự đặt theo tên file. Xong nhấn Add.

Tinhte_tao-ung-dung-ar-vuforia-07.
Sau khi add xong chúng sẽ thấy danh sách các file ảnh vừa up lên, nếu mục Status là Active coi như hệ thống đã nhận diện xong, còn nếu báo Processing thì phải đợi khoảng 15 phút để hệ thống xử lý (lúc mình làm nhận liền luôn :)).

Tinhte_tao-ung-dung-ar-vuforia-08.
Sau khi đã hoàn tất, các bạn đánh dấu chọn 2 hình vừa up lên, nhấn nút bên phải và chọn dòng Unity Editor để tải về. File tải về sẽ có dạng “Tên_Database.unitypackage”, như của mình là “Test_2.unitypackage”.

Bước 3: Tải và cài đặt Unity

Tinhte_tao-ung-dung-ar-vuforia-09.
Tới trang download của Unity, chọn mục tải về miễn phí (Personal) cho phù hợp với hệ điều hành của các bạn. Trên Mac, mình tải về một file UnityDownloadAssistant-5.1.3f1.dmg dung lượng chỉ có 2,5MB. Đừng vội mừng, mình chạy nó lên và nó sự tự tải về các gói cần thiết với dung lượng khoảng 5GB. Sau đó nó tự giải nén ra thành khoảng 10 GB.

Tinhte_tao-ung-dung-ar-vuforia-11-ed.
Rồi, sau khi cài đặt đã hoàn tất thì tất nhiên là chạy nó lên. Bấm nút tạo một Project mới, mình đặt tên là Test_2 luôn cho dễ và chọn chữ 3D màu hồng. Lưu ý folder chứa toàn bộ dự án, đặc biệt là folder Assets - sẽ dùng rất nhiều để chép dữ liệu vào.

Tinhte_tao-ung-dung-ar-vuforia-10.
Xong! Một màn hình hoàn toàn trống trơn với 4 khung hiện ra. Cột bên trái là tên các đối tượng đang xử lý. Màn hình trung tâm chúng ta sẽ thao tác điều chỉnh tọa độ (xíu nữa tới). Màn hình góc bên trái phía dưới chưa data đã add vào. Cột bên phải là cài đặt.

Bước 4: Tải bộ Unity SDK từ trang chủ Vuforia

Tinhte_tao-ung-dung-ar-vuforia-12-ed.
Vào trang developer của Vuforia (link), ở mục Downloads, có 3 bộ SDK, chúng ta chọn tải về cái cuối cùng “Download for Unity” với dung lượng khoảng 33 MB. File tải về có dạng vuforia-unity-5-0-5.unitypackage và các bạn chép vào thư mục Assets trong folder chứa dự án vừa tạo trong máy bằng Unity.

Tinhte_tao-ung-dung-ar-vuforia-13.
Tiếp tục chép file Test_2.unitypackage đã tải về ở bước 2 vào thư mục Assets luôn. Bây giờ chúng ta đã có 2 file đuôi unitypackage trong thư mục Assets.

Tinhte_tao-ung-dung-ar-vuforia-14.
Nhấn đúp chạy cả 2 lên, lần lượt mỗi file sẽ được mở bằng Unity và nó sẽ hiện ra bản thông báo, bên trong chứa nhiều file nhỏ, chúng ta nhấn vào Import để nhập dữ liệu vào. Xong bước 4

Bước 5: Bắt đầu xử lý data

Tinhte_tao-ung-dung-ar-vuforia-15-ed.

Chỗ này quan trọng và khá phức tạp, các bạn chú ý bình tĩnh làm từ từ nha. Các dữ liệu mà chúng ta nhập vào ở bước 4 sẽ hiện trong cột phía dưới bên trái trong folder Assets. Chọn lần lượt Vuforia -> Prefabs, nhìn sang cột bên cạnh sẽ hiện ra các khối lập phương, chọn khối có tên là ARcamera và kéo nó thả vào khu vực chính ở giữa. Cứ thả bừa vào, không cần chú ý nó nằm ở đâu.

Tinhte_tao-ung-dung-ar-vuforia-16.
Nhìn qua cột bên trái phía trên, click phải chuột vào "main camera” và chọn delete nó.
Cuối cùng, cũng trong folder Prefabs, kéo khối lập phương tên là ImageTarget vào màn hình chính, kệ nó nằm ở đâu cũng được.​

Bước 6: Cài đặt data nhập vào

Tinhte_tao-ung-dung-ar-vuforia-17-ed.
Bây giờ bạn sẽ thấy cột bên trái phía trên sẽ hiện ra những thứ mà chúng ta vừa kéo thả vào màn hình chính. Tại đây chọn mục ImageTarget, một rừng những tùy chọn sẽ hiện ra ở khung bên phải. Đừng hoang mang, tìm mục "Image Target Behavior” và bên dưới sẽ có một số mục chọn. Ở mục Data set, các bạn click vào và chỉ có 1 mục thả xuống là tên của Database, của mình là Test_2. Click chọn nó.

Tinhte_tao-ung-dung-ar-vuforia-18.
Ngay lúc này, các bạn sẽ thấy bức ảnh cột mốc chụp lúc đầu hiện ra ở màn hình chính. Tiếp nha, gần tới đích rồi.

Bước 7: Điền Licence Key lấy từ trang Vuforia

Tinhte_tao-ung-dung-ar-vuforia-19.
Trở lại trang Vuforia, tại mục Develop, License Manager và click vào tên của dự án bạn tạo từ trước, một khung đầy các ký tự hiển ra. Đó chính là Licence Key và copy hết cái đống khổng lồ đó.

Tinhte_tao-ung-dung-ar-vuforia-20-ed.
Trở lại ứng dụng Unity, chọn ARCamera trong khung bên trái phía trên. Nhìn qua khung bên phải là tìm mục App Licence Key, dán toàn bộ khối ký tự đó vào. Tiếp theo, tìm tới mục Database Load Behavior, trong đó sẽ có mục "Load Data Set (tên file chứa hình làm mốc)”, Của mình là Load Data Set Test_2, đánh dấu chọn vào ô tại đây. Ngay khi đó, một dòng sẽ hiện ra bên dưới với nội dung “Activate”, đánh dấu chọn luôn.

Bước 8: Tải (hoặc tạo) hình ảnh vật thể 3D

Tinhte_tao-ung-dung-ar-vuforia-21.
Phần này chúng ta cần một file hình ảnh 3D có định dạng là .OBJ để hiển thị làm ảnh ảo. Bạn nào biết dùng CAD thì có thể tự vẽ một cái, còn không thì cứ lên Google đánh Free OBJ sẽ có rất nhiều trang hiện ra. Như mình tìm mô hình một chiếc xe tăng mang về. Bạn tìm cái gì cũng được và thường nó sẽ đi kèm với cả một thư mục, cứ giải nén ra và chép vào thư mục Assets luôn.

Tinhte_tao-ung-dung-ar-vuforia-22.
Trở lại Unity, chọn mục Assets trên thanh công cụ (nằm sau File và Edit), tiếp theo chọn Import New Asset… và chỉ tới vị trí file OBJ nằm trong folder Assets.

Bước 9: Cài đặt cách ảnh ảo hiển thị trong không gian

Tinhte_tao-ung-dung-ar-vuforia-23-ed.
Bây giờ, chúng ta sẽ kéo thả xe tăng vào khung hình trung tâm, sau đó chọn tên nó trong cột bên trái phía trên, chú ý ở cột tùy chọn bên phải có mục Scale, hãy điều chỉnh 3 kích thước dài, rộng, cao sao cho phù hợp với kích thước của cột mốc ngoài đời. Khi click vào cột mốc và vật thể, chúng ta sẽ có mũi tên 3 chiều hiện ra, cứ nắm mỗi mũi tên kéo 2 vật thể sao cho khít nhau nhất (hoặc bất cứ kiểu gì bạn muốn).

Tinhte_tao-ung-dung-ar-vuforia-24-ed.
Qua bước khó nhất rồi, bây giờ chúng ta sẽ vào Menu File và chọn “Build Setting”. Một cửa sổ sẽ hiện ra, chọn Android, sau đó ở bên dưới, nhấn vào “Player Settings.”. Trong cột bên phải, chọn Other Settings và tiếp đến là Bundle Identifier, nội dung ô bên cạnh có dạng là Com.Tên công ty.Tên dự án. Hãy so sánh với mục Company Name ở phía trên cũng trong cột bên trái luôn. Phải đảm bảo là trùng nhau thì phần mềm mới tạo được. Như của mình sẽ là Com.TT.Test_2 Cuối cùng, trở lại bảng bên trái và nhấn Build, chọn thứ mục chứa và đợi.

Bước 10: Chép lên máy Android, cài và chạy thử

Tinhte_tao-ung-dung-ar-vuforia-25-ed.
File APK sau khi đã xuất ra, các bạn chép lên điện thoại Android, cài đặt nó. Cuối cùng là đặt tờ giấy (hoặc vật nào đó) mà các bạn chọn ở phần đầu lên một mặt phẳng, ánh sáng đầy đủ, chạy ứng dụng lên và đưa camera lại quay vật thể đó, bùm, vật thể ảo sẽ hiện ra và chúng ta có thể di chuyển xung quanh để xem nó.

Tạm kết

Tới đây thì hy vọng rằng tất cả các bạn đều có thể tự tạo một ứng dụng tăng cường thực tế ảo trên Android để chơi. Tất nhiên, đây là thứ đơn giản nhất và Unity cũng như Vuforia còn rất nhiều kỹ thuật khác để tạo ra cả một trò chơi phức tạp hơn. Chúng ta còn có thể tạo ra một môi trường nhiều vật thể hơn, tương tác với các vật thể ảo qua màn hình nữa,… Cuối cùng chúc vui vẻ và bạn nào có làm thì cũng xin post lên đây để mọi người cùng xem nhé.

Không có nhận xét nào:

Đăng nhận xét