Hãy tạo một ứng dụng thực tế tăng cường cho MEMES!: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Trong phần Có thể hướng dẫn này, chúng tôi sẽ tạo một ứng dụng thực tế tăng cường cho Android và IOS trong Unity3D sử dụng API Google để tìm kiếm meme. Chúng tôi sẽ sử dụng tính năng phát hiện mặt đất của Vuforia trong Unity để ứng dụng di động này sẽ hoạt động với hầu hết người dùng Android và IOS. Sử dụng Vuforia cũng sẽ cho phép chúng ta cố định các bức ảnh ở một vị trí để chúng ta có thể đi qua trường ảnh này và các đối tượng sẽ ở nguyên vị trí của chúng.

Chúng tôi cũng sẽ thử nghiệm API IBM Watson mới để chúng tôi có thể thực hiện các tìm kiếm này bằng giọng nói của mình và tận dụng quá trình xử lý ngôn ngữ tự nhiên của chúng.

Vì vậy, tin xấu là cả hai API này đều không hoàn toàn miễn phí, nhưng tin tốt là cả hai đều miễn phí để dùng thử. API tìm kiếm tùy chỉnh của google cung cấp cho bạn 100 tìm kiếm miễn phí mỗi ngày và API IBM Watson cung cấp cho bạn tháng đầu tiên miễn phí.

Tóm lại, ứng dụng này sẽ lấy bài phát biểu của chúng ta từ micrô trong Unity, gửi bài phát biểu đó đến máy chủ IBM Watson, máy chủ này sẽ trả về văn bản cho chúng tôi. Sau đó, chúng tôi sẽ lấy văn bản đó và gửi đến máy chủ của Google. Máy chủ này sẽ trả về cho chúng tôi danh sách URL hình ảnh ở dạng JSON.

Bước 1: Thiết lập IBM Watson SDK trong Unity

Để có được API Watson, trước tiên bạn cần lấy thông tin đăng nhập của mình từ trang web của họ. Truy cập Console.bluemix.net, tạo và tạo tài khoản và đăng nhập. Đi tới tài khoản IBM của bạn và điều hướng đến Tổ chức đúc tiền đám mây và tạo một không gian mới. Bây giờ, hãy truy cập trang tổng quan của bạn và nhấp để duyệt qua các dịch vụ, thêm giọng nói vào dịch vụ văn bản vì đó là những gì chúng tôi sẽ sử dụng. Chọn khu vực, tổ chức và không gian của bạn và tạo dự án. Bây giờ bạn sẽ thấy thông tin đăng nhập API của mình ở dưới cùng.

Tải xuống Unity nếu bạn chưa có và nhập IBM Watson SDK từ kho tài sản trong Unity. Chúng ta có thể kiểm tra điều này bằng cách tạo một đối tượng trò chơi trống và gọi nó là IBM Watson và thêm tập lệnh phát trực tuyến ví dụ. Tập lệnh này đã được thiết lập để ghi lại âm thanh từ sự thống nhất và gửi đến máy chủ Watson để xử lý.

Hiện tại, chúng ta sẽ chỉ sử dụng script ví dụ này vì chúng ta còn nhiều việc phải làm nhưng có lẽ lần sau chúng ta có thể đi sâu hơn vào nội dung của Watson vì tôi muốn làm điều gì đó với Vision API.

Bước 2: Kiểm tra IBM Watson Text to Speech

Tập lệnh này đang tìm kiếm một đối tượng văn bản giao diện người dùng, vì vậy hãy tạo một nút giao diện người dùng mới, điều này sẽ cung cấp cho chúng ta văn bản mà chúng ta cần, chúng ta sẽ sử dụng nút này sau. Đặt canvas để chia tỷ lệ với kích thước màn hình và thay đổi kích thước nút một chút. Neo nó xuống dưới cùng bên trái. Kéo văn bản đó vào vị trí trống. Mở tập lệnh và cho phép thêm thông tin đăng nhập IBM Watson của chúng tôi, tìm nơi sử dụng văn bản "resultsField" và đặt nó thành chỉ "alt.transcript" vì chúng tôi sẽ sử dụng văn bản này để tìm kiếm trên google. Bây giờ trước khi chúng tôi có thể kiểm tra điều này, chúng tôi cần phải tự động kích thước văn bản để bất cứ điều gì chúng tôi nói sẽ phù hợp với bên trong hộp. Quay lại văn bản và đặt nó sao cho phù hợp nhất. Nhập một số văn bản để kiểm tra nó. Bây giờ khi chúng ta nhấp vào phát, các từ của chúng ta sẽ được chuyển thành văn bản từ Watson Text to Speech API.

Bước 3: Thiết lập API Tìm kiếm Tùy chỉnh của Google

Phần tiếp theo chúng ta cần làm là thiết lập api tìm kiếm tùy chỉnh của Google để sử dụng trong Unity. Ở cấp độ cao, chúng tôi sẽ thực hiện một yêu cầu HTTP từ Unity đến các máy chủ của Google. Điều này sẽ trả lại cho chúng tôi một phản hồi ở định dạng JSON.

Vì vậy, hãy truy cập trang thiết lập API JSON của Tìm kiếm Tùy chỉnh của Google, nhấp để nhận khóa API và tạo một ứng dụng mới. Giữ điều này mở. Bây giờ chúng ta có thể vào bảng điều khiển. Đặt bất kỳ thứ gì để các trang web tìm kiếm, đặt tên bất kỳ thứ gì và nhấp vào tạo.

Nhấp vào bảng điều khiển và cho phép thực hiện một số sửa đổi: chúng tôi muốn chủ yếu tìm kiếm meme và bật tìm kiếm hình ảnh. Trong các trang web để tìm kiếm, hãy chuyển nó sang toàn bộ trang web. Nhấp vào cập nhật để lưu mọi thứ.

Bây giờ, hãy tìm google api explorer và đi tới API tìm kiếm tùy chỉnh. Điều này sẽ cho phép chúng tôi định dạng phản hồi JSON mà chúng tôi nhận được từ Google. Vì vậy, hãy đặt bất kỳ thứ gì cho truy vấn ngay bây giờ, dán vào ID công cụ tìm kiếm của bạn, đặt 1 vào cho bộ lọc để chúng tôi không nhận được các bản sao, đặt 10 dưới num vì đó là số lượng kết quả tối đa mà chúng tôi có thể trả về tại một thời điểm, đưa vào hình ảnh cho loại tìm kiếm vì đó là tất cả những gì chúng tôi muốn trả lại. Đặt 1 ở phần bắt đầu, và cuối cùng dưới các trường được đặt trong "mục / liên kết" vì đối với mỗi mục được trả lại, chúng tôi chỉ muốn liên kết hình ảnh. Bây giờ khi bạn nhấp vào thực thi, bạn sẽ thấy rằng chúng tôi nhận được 10 liên kết hình ảnh đẹp được trả về.

Bây giờ chúng ta phải đưa những hình ảnh này vào Unity.

Bước 4: Thiết lập Vuforia trong Unity

Cho phép Vuforia hoạt động để chúng tôi có thể tận dụng khả năng phát hiện máy bay mặt đất của chúng. Lưu cảnh hiện tại của bạn và chuyển đến cài đặt bản dựng. Chuyển nền tảng của bạn sang Android hoặc IOS và nếu trên IOS của bạn đặt thứ gì đó cho mã nhận dạng gói, hãy thêm mô tả sử dụng máy ảnh và micrô. Trong cài đặt XR, hãy kiểm tra thực tế tăng cường Vuforia được hỗ trợ.

Bây giờ trong cảnh xóa camera chính và thêm một Vuforia ARCamera. Chuyển đến phần cấu hình và thay đổi chế độ theo dõi thành vị trí. Bỏ chọn tất cả các cơ sở dữ liệu vì chúng tôi không cần chúng.

Bây giờ, hãy thêm một công cụ tìm mặt phẳng và chúng ta cần ghi đè hành vi mặc định của nó vì chúng ta muốn triển khai giai đoạn mặt đất chỉ một lần, vì vậy hãy tìm tập lệnh Giai đoạn triển khai một lần trên trang web Vuforia. Mang tập lệnh đó vào Unity và đặt nó trên công cụ tìm máy bay, xóa tập lệnh cũ đã có ở đó. Thay đổi chế độ thành tương tác và đảm bảo rằng chức năng "OnInteractiveHitTest" được gọi trên Sự kiện hợp nhất đó. Trong khi chúng tôi ở đây, hãy đặt nút chúng tôi đã thực hiện trước đó thành hoạt động sau khi chúng tôi tìm thấy mặt đất, đặt trạng thái mặc định của nó thành không hoạt động. Bây giờ hãy đặt một chiếc máy bay mặt đất vào hiện trường và thay đổi nó thành giữa không trung vì chúng tôi muốn tất cả các bức ảnh lơ lửng trong không trung. Kéo máy bay mặt đất này vào vị trí trống trên công cụ tìm máy bay.

Bước 5: Tạo một Picture Prefab

Trước khi bắt đầu ghép tất cả các mảnh này lại với nhau, chúng ta cần tạo một đối tượng trò chơi đúc sẵn mà chúng ta có thể khởi tạo mỗi khi tải một bức tranh. Vì vậy, hãy tạo một đối tượng trò chơi trống dưới sân khấu mặt đất và gọi nó là "picPrefab". Tạo một tứ giác như một con của nó và chia tỷ lệ nó lên 2, xoay y của nó 180 độ để vectơ chuyển tiếp cha mẹ được hiển thị dưới dạng mũi tên màu xanh lam là mặt trước của tứ giác.

Tạo một tập lệnh mới có tên "PictureBehavior" và thêm nó vào picPrefab của chúng tôi.

Bây giờ, hãy kéo nhà lắp ghép pic này vào thư mục tài sản của bạn và đây là những gì chúng ta sẽ đặt mỗi bức ảnh.

Tập lệnh "PictureBehavior" của chúng tôi sẽ trông như thế này:

sử dụng System. Collections;

sử dụng System. Collections. Generic; sử dụng UnityEngine; public class PictureBehavior: MonoBehaviour {public Renderer quadRenderer; Vector3 riêng tư mong muốnPosition; void Start () {// nhìn vào camera biến đổi. LookAt (Camera.main.transform); Vector3 wishAngle = new Vector3 (0, biến đổi.localEulerAngles.y, 0); biến đổi.rotation = Quaternion. Euler (mong muốnAngle); // ép vào không khí mong muốnPosition = biến đổi.localPosition; biến đổi.localPosition + = new Vector3 (0, 20, 0); } void Update () {biến đổi.localPosition = Vector3. Lerp (biến đổi.localPosition, vị trí mong muốn, vị trí thời gian.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = new WWW (url); lợi nhuận trả lại www; quadRenderer.material.mainTexture = www.texture; }}

Bước 6: Tạo Tập lệnh cho Google API

Bây giờ, hãy kéo tham chiếu đến trình kết xuất quad từ "picPrefab" của chúng tôi.

Chúng tôi chỉ còn hai tập lệnh để tạo, vì vậy hãy tạo một tập lệnh C # có tên là GoogleService.cs và PictureFactroy.cs.

Bên trong "GoogleService", hãy dán mã này thực hiện yêu cầu của chúng tôi:

sử dụng System. Collections;

sử dụng System. Collections. Generic; sử dụng UnityEngine; sử dụng UnityEngine. UI; public class GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "ĐẶT KHÓA API VÀO ĐÂY !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; truy vấn = WWW. EscapeURL (truy vấn + "meme"); // xóa hình ảnh cũ pictureFactory. DeleteOldPictures (); // lưu vector chuyển tiếp camera để chúng ta có thể di chuyển xung quanh trong khi các đối tượng đang được đặt Vector3 cameraForward = Camera.main.transform.osystem; // chúng ta chỉ có thể nhận được 10 kết quả cùng một lúc nên chúng ta phải lặp lại và lưu tiến trình thay đổi số bắt đầu sau mỗi 10 int rowNum = 1; for (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + query + "& cx = 011535004225295624669% 3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = "+ i +" & fields = items% 2Flink & key = "+ API_KEY; WWW www = new WWW (url); lợi nhuận trả lại www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } trả về WaitForSeconds mới (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse (string text) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (string line in urls) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // lọc theo png hoặc jpg dường như không hoạt động từ Google nên chúng tôi thực hiện ở đây: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} trả về urlList; }}

Bước 7: Tạo Nhà máy Hình ảnh của Chúng tôi

Inside PictureFactory.cs đặt mã này để tạo tất cả các bức ảnh của chúng tôi và tải kết cấu của chúng từ một URL.

sử dụng System. Collections;

sử dụng System. Collections. Generic; sử dụng UnityEngine; public class PictureFactory: MonoBehaviour {public GameObject picPrefab; công khai GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destroy (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Trung tâm Vector3 = Camera.main.transform.position; foreach (chuỗi url trong urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum ++; }} Vector3 GetPosition (int picNum, int rowNum, Vector3 camForward) {Vector3 pos = Vector3.zero; if (picNum <= 5) {pos = camForward + new Vector3 (picNum * -3, 0, rowNum * 3.5f); } else {pos = camForward + new Vector3 ((picNum% 5) * 3, 0, rowNum * 3.5f); } trả về vị trí; }}

Bước 8: Chúng tôi đã hoàn tất

Tạo gameobject trống có tên là GoogleService và đặt tập lệnh "GoogleSerivice" vào đó.

Kéo tập lệnh "PictureFactory" lên màn hình mặt đất vì tất cả các hình ảnh của chúng ta sẽ được tạo ra dưới dạng con của đối tượng trò chơi này.

Kéo các tham chiếu thích hợp trong trình kiểm tra, làm điều tương tự đối với dịch vụ google.

Điều cuối cùng chúng ta cần làm là đảm bảo rằng hàm "GetPictures" của chúng ta được gọi. Vì vậy, hãy chuyển đến sự kiện "onClick" của nút của chúng tôi và gọi nó từ đó.

Bây giờ chúng ta có thể nhấp vào chơi và kiểm tra điều này. Đảm bảo bật chế độ mặt đất và nút. Nói một từ, và nhấp vào nút để thực hiện tìm kiếm trên văn bản đó!

Bây giờ để tải ứng dụng này trên điện thoại của bạn, hãy cắm nó vào và đi tới Tệp-> Cài đặt bản dựng. Nhấn xây dựng và chạy!

Hãy cho tôi biết trong phần bình luận nếu bạn có bất kỳ câu hỏi nào!