12/08/2018, 17:34

Tìm hiểu về 2D Image Recognition trong ARKit

ARKit đã được Apple giới thiệu trong sự kiện ra mắt của iOS 11 cùng loạt iPhone mới: iPhone 8, 8 plus, iPhone X. Tuy nhiên, tại những phiên bản iOS 11.x trước đây, Apple đã không tích hợp tính năng nhận diện ảnh 2D vào ARKit. ARKit lúc này chỉ có thể nhận diện các mặt phẳng ngang, mặt thẳng đứng, ...

ARKit đã được Apple giới thiệu trong sự kiện ra mắt của iOS 11 cùng loạt iPhone mới: iPhone 8, 8 plus, iPhone X. Tuy nhiên, tại những phiên bản iOS 11.x trước đây, Apple đã không tích hợp tính năng nhận diện ảnh 2D vào ARKit. ARKit lúc này chỉ có thể nhận diện các mặt phẳng ngang, mặt thẳng đứng, mà không thể nhận diện chính xác trên hình ảnh mà chúng ta muốn. Không thể control thứ chúng ta muốn detect làm ảnh hưởng rất nhiều đến khả năng dùng thư viện ARKit, thử tưởng tượng các bạn muốn hiển thị một object 3D khi App phát hiện ra ảnh của bạn, nhưng khi sử dụng ARKit object 3D đó lại được hiển thị ở mọi nơi có mặt phẳng, điều này sẽ khiến bạn phải từ bỏ ARKit và tìm kiếm một thư viện AR khác giải quyết được vấn đề của bạn.

Nhưng chúng ta không phải chờ quá lâu cho tính năng này. Trên iOS 11.3, Apple đã đưa tính năng nhận diện ảnh 2D vào thư viện ARKit. Đây là một nâng cấp nhỏ nhưng cực kỳ đáng giá của ARKit, giờ đây chúng ta hoàn toàn có thể control được chúng ta cần detect cái gì, lúc nào thì nội dung AR sẽ được hiển thị. Không còn nữa nỗi lo nội dung AR hiển thị linh tinh trên bất kỳ mặt phẳng nào nữa.

Dưới đây, tôi xin giới thiệu đến các bạn cách tích hợp tính năng nhận diện ảnh 2D của ARKit vào ứng dụng iOS.

Lưu ý: bài viết này không dành cho beginner, và yêu cầu các bạn đã biết một chút kiến thức về SceneKit và ARKit. Đối với các bạn chưa biết gì về Scenekit và ARKit, các bạn có thể tìm hiểu về SceneKit tại đây và ARKit tại đây. Về cơ bản thì đây là 2 framework của iOS, SceneKit giúp chúng ta xây dựng các model 3D và tương tác, thực hiện các công việc liên quan đến 3D, còn ARKit là thư viện về thực tế tăng cường.

1. Tạo project

OK, chúng ta bắt đầu công việc thôi. Đầu tiên, chúng ta cần tạo project với ngôn ngữ Swift, đặt tên là ImageRecognition và tạo project.

Tiếp theo, chúng ta tạo 1 group mới và đặt tên 3D Models. Trong group này, chúng ta tạo 1 file .scn bằng cách chọn File -> New -> File SceneKit Scene File -> đặt tên là Orange và tạo file.

Sau khi tạo file Orange.scn, các bạn vào đây để download file 3D hình quả cam về máy. Để download được, các bạn cần tạo tài khoản trên trang web turbosquid. Các bạn lưu ý rằng chúng ta cần file 3D định dạng .dae, vì vậy các bạn hãy download file với định dạng này nhé.

Sau khi download thành công, chúng ta sẽ có được file Orange.dae trong thư mục Downloads, các bạn mở Orange.scn trong Xcode, kéo và thả Orange.dae vào Orange.scn. Sau đó kéo ảnh orange.jpg trong mục download vào trong group 3D Models của project. Trong file Orange.scn, các bạn vào Show the Scene Graph View để mở rộng các element con của scene, kéo node Orange ra ngoài Orange reference, xoá node camera và Orange reference. Cuối cùng, các bạn kéo ảnh orange.jpg từ group 3D Model vào node Orange trong Orange.scn.

Hoàn thành hết các bước bên trên, các bạn sẽ có được file Orange.scn như hình sau:

Sau khi tạo được file 3D, bước tiếp theo các bạn vào đây download ảnh quả cam về máy. Sau khi download xong, chúng ta được file orange.jpg. Đây chính là file chúng ta dưới đây sẽ dùng để nhận diện ảnh.

Tiếp theo, các bạn vào Assets.xcassets, tạo một AR Resources group: New AR Resources Group. Sau đó kéo ảnh orange.jpg chúng ta đã download vào group này. Sau khi thêm ảnh vào group, chúng ta thấy xuất hiện một cảnh báo với dấu chấm than màu vàng trong ảnh với nội dung như ảnh sau:

Cảnh báo này xuất hiện do chúng ta vẫn chưa khai báo size của ảnh. Các bạn vào Attributes inspector và khai báo awidth và height của ảnh như hình sau:

Sau khi điền thông tin awidth, height, chúng ta vẫn nhận được cảnh báo. Cảnh báo này liên quan đến việc hình ảnh của chúng ta sẽ khó nhận dạng bằng ARKit, tuy nhiên không sao, khó nhận ra chứ không phải không nhận ra được, chúng ta cứ dùng thôi             </div>
            
            <div class=

0