của Apurav Chauhan
Trong thử nghiệm này, tôi nói về cách sử dụng Thực tế tăng cường với JS để làm cho việc học trở nên thú vị và tương tác hơn. Nghiên cứu điển hình sẽ thảo luận về quá trình thiết kế, thực hiện và phản hồi từ trẻ em trong độ tuổi từ 2 đến 10 tuổi.
Thực tế tăng cường (AR) luôn thu hút tôi và trong thử nghiệm này, tôi cố gắng tạo ra một ứng dụng AR thực tế. Trường hợp sử dụng mà chúng tôi sẽ đề cập là giáo dục tiểu học và chúng tôi sẽ xem cách chúng tôi có thể làm cho việc học trở nên thú vị và có tính tương tác. Chúng tôi sẽ tạo một ứng dụng để học bảng chữ cái bằng ba ngôn ngữ chủ yếu: Tiếng Ba Tư, Tiếng Hindi và Tiếng Anh.
Ứng dụng Thực tế tăng cường Javascript hiện không có tính năng phát hiện máy bay. Để đơn giản, chúng tôi chỉ đặt chồng các đối tượng của mình lên khung nhìn bằng tính năng theo dõi chuyển động 3d.
MỤC TIÊU KẾT THÚC
Dưới đây là bản demo thử nghiệm Javascript AR của chúng tôi. Bạn có thể tải xuống và chơi với ứng dụng tại đây.
Mã đầy đủ đã được mã nguồn mở cho mục đích học tập và có sẵn tại đây.
Quy trình thiết kế
Để làm cho việc học trở nên thú vị và dễ dàng, tôi dựa vào những điểm sau:
- Sự tham gia tích cực của trẻ
- Cho trẻ hoạt động thể chất thay vì ngồi một chỗ
- Một chút nỗ lực trong việc tìm kiếm các bảng chữ cái.
- UX/UI trực quan.
Chủ đề cốt lõi của ứng dụng sẽ khá giống với ứng dụng thực tế tăng cường Pokemon Go nổi tiếng. Chỉ có hai thành phần chính sẽ được tham gia: Chế độ xem máy ảnh và bảng chữ cái.
Bảng chữ cái UX cho trò chơi AR
lặp lại 1
Trong lần lặp đầu tiên của chúng tôi, chúng tôi có bảng chữ cái 2d mà chúng tôi sẽ cố gắng hợp nhất trong chế độ xem máy ảnh của mình. Ý tưởng của ứng dụng Thực tế tăng cường (AR) là để trẻ em tìm các chữ cái trong bảng chữ cái này trong phòng hoặc không gian xung quanh chúng. Nguyên mẫu sau khi hợp nhất không gian với bảng chữ cái 2d sẽ trông giống như thế này:
Như bạn có thể thấy ở trên, trải nghiệm nhập vai bị thiếu với mô hình 2d vì mắt người nhìn thấy mọi thứ ở dạng 3d.
lặp lại 2
Hãy thử tạo một mô hình 3d và xem liệu chúng ta có thể cải thiện trải nghiệm của trò chơi Thực tế tăng cường dựa trên Javascript của mình hay không:
Và dưới đây là so sánh trải nghiệm của cảm biến chuyển động với mô hình bảng chữ cái 2d và 3d. Như bạn có thể thấy, 3D tự nhiên mang đến cho bạn trải nghiệm sống động hơn nhiều khi nói đến thực tế Tăng cường.
Quá trình triển khai AR
Để triển khai khái niệm AR ở trên, tôi sẽ sử dụng các công cụ và công nghệ sau:
- Ionic Framework: Để xây dựng ứng dụng lai
- Aframe: Để mang lại trải nghiệm Thực tế ảo (VR) và Thực tế tăng cường (AR) cho ứng dụng của chúng tôi
- MagicaVoxel: Để tạo mô hình 3D của chúng tôi
Quá trình xây dựng ứng dụng cơ bản rất đơn giản. Bạn có thể theo dõi bài viết trước của tôi để tìm hiểu cách xây dựng và triển khai một ứng dụng bằng khung Ionic tại đây.
Khi bạn đã làm theo hướng dẫn ở trên để tạo một ứng dụng đơn giản, đã đến lúc tích hợp Aframe để đưa bảng chữ cái 3D có cảm biến chuyển động vào ứng dụng của chúng ta.
Chỉ cần tải các thư viện lõi Aframe và trình tải Aframe bên dưới trong tệp index.html của dự án ionic:
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>Với điều này, chúng tôi đã sẵn sàng thực hiện một số phép thuật AR/VR trong cơ sở mã Javascript của mình.
Bây giờ trong home.html của thành phần nhà của bạn, hãy bao gồm các mô hình 3D của chúng tôi được xuất từ magicavoxel:
Và điều này sẽ giúp cảnh 3D sẵn sàng tương tác với tất cả các cảm biến chuyển động:
Thêm hiệu ứng thực tế tăng cường
Phần cuối cùng của thử nghiệm này là thêm cảm giác Thực tế tăng cường (AR) vào ứng dụng lai dựa trên Javascript của chúng tôi. Như đã giải thích, Thực tế tăng cường là khi bạn đặt chồng các mô hình 3D hoặc các đối tượng khác lên trên chế độ xem máy ảnh của mình. Vì vậy, điều duy nhất còn thiếu là chế độ xem camera phía sau cảnh của chúng tôi.
Để làm điều này, chúng tôi sử dụng plugin xem trước máy ảnh như được giải thích tại đây. Và đây là ý chính đầy đủ sau khi tích hợp với plugin xem trước máy ảnh:
Chúng tôi cũng cần đảm bảo rằng nền của chúng tôi trong suốt để có thể nhìn thấy bản xem trước của máy ảnh trên thiết bị di động. Cái này rất QUAN TRỌNG nếu không, bạn có thể cảm thấy rằng plugin không hoạt động. Đây là tệp home.scss có bật css trong suốt:
Và đây là những gì nó cuối cùng sẽ trông như thế nào:
Phản ứng của người dùng đối với trò chơi JS thực tế tăng cường của chúng tôi
Bước cuối cùng để đo lường mức độ thành công của khái niệm của bạn là xác thực người dùng thực — trong trường hợp của chúng tôi là trẻ em 🙂 Và bên dưới là phản hồi trực tiếp của họ được ghi lại.
Rõ ràng là mỗi người trong số họ đều thích trò chơi và chúng tôi được trọn điểm cho phần thú vị. Tuy nhiên, ban đầu tôi phải bảo họ di chuyển điện thoại trong không gian để tìm các chữ cái. Mất điểm về trực giác 🙁
Phản hồi của người dùng cho trò chơi Augmented Reality JS
Suy nghĩ cuối cùng
Chà, đó là một dự án thú vị và tôi có thể thấy rất nhiều tiềm năng của Thực tế tăng cường trong học tập và giáo dục. Trẻ em thực sự thích nó và nó chắc chắn sẽ bổ sung yếu tố thú vị còn thiếu cho giáo dục, đặc biệt là trong hệ thống Giáo dục đơn điệu của chúng ta.
Hãy bình luận và chia sẻ thông tin phản hồi của bạn.
Tải xuống
Mã cho ứng dụng này có sẵn trong github. Hãy chơi và đẩy các tính năng mới trong đó. Tôi rất sẵn lòng đẩy các bản cập nhật lên quá trình sản xuất.
Bạn có thể tải ứng dụng cho android tại đây.
