В этом эксперименте я рассказываю о том, как можно использовать дополненную реальность с JS, чтобы сделать обучение более увлекательным и интерактивным. В тематическом исследовании будет обсуждаться процесс разработки, реализация и отзывы детей в возрастной группе от 2 до 10 лет.
Дополненная реальность (AR) всегда привлекала меня, и в этом эксперименте я пытаюсь создать практическое приложение AR. Пример использования, который мы рассмотрим, - это начальное образование, и мы увидим, как сделать обучение увлекательным и интерактивным. Мы сделаем приложение для изучения алфавитов в основном на трех языках: панджаби, хинди и английском.
В приложении дополненной реальности Javascript в настоящее время нет функции обнаружения самолетов. Для простоты мы только накладываем наши объекты на область просмотра с трехмерным отслеживанием движения.
КОНЕЧНАЯ ЦЕЛЬ
Ниже представлена демонстрация нашего эксперимента Javascript AR. Вы можете скачать приложение и поиграть с ним здесь.
Полный код был открыт для учебных целей и доступен здесь.
Процесс проектирования
Чтобы сделать обучение интересным и легким, я полагаюсь на следующие моменты:
- Активное участие ребенка
- Физическая активность ребенка вместо того, чтобы сидеть на одном месте
- Немного усилий в поиске алфавитов.
- Интуитивно понятный UX / UI.
Основная тема приложения будет очень похожа на известное приложение Pokemon Go с дополненной реальностью. Будут задействованы только два основных компонента: Окно обзора камеры и Алфавиты.
Alphabet UX для игры AR
Итерация 1
В нашей первой итерации у нас есть двухмерные алфавиты, которые мы попытаемся объединить в окне просмотра камеры. Идея приложения дополненной реальности (AR) состоит в том, чтобы дети находили эти буквы алфавита в комнате или пространстве вокруг них. Прототип после объединения пространства с двумерными алфавитами будет выглядеть примерно так:
Как вы можете видеть выше, эффект погружения отсутствует в 2D-модели, потому что человеческий глаз видит вещи в 3D.
Итерация 2
Давайте попробуем создать 3D-модель и посмотрим, сможем ли мы улучшить нашу игру с дополненной реальностью на основе Javascript:
А ниже приведено сравнение опыта датчика движения с моделями алфавита 2d и 3d. Как видите, 3D, естественно, дает вам гораздо более захватывающий опыт, когда дело доходит до дополненной реальности.
Процесс внедрения дополненной реальности
Для реализации вышеупомянутой концепции AR я буду использовать следующие инструменты и технологии:
- Ionic Framework: для создания гибридного приложения.
- Aframe: для того, чтобы добавить в наше приложение возможности виртуальной реальности (VR) и дополненной реальности (AR).
- MagicaVoxel: Для создания наших 3D-моделей.
Базовый процесс создания приложения очень прост. Вы можете следить за моей предыдущей публикацией, чтобы узнать, как создать и развернуть приложение с использованием Ionic framework здесь.
После того, как вы выполните приведенное выше руководство по созданию простого приложения, пора интегрировать Aframe, чтобы наши трехмерные алфавиты с датчиками движения добавились в наше приложение.
Просто загрузите указанные ниже библиотеки ядра Aframe и загрузчика Aframe в файл index.html проекта 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>
На этом мы готовы совершить магию AR / VR в нашей базе кода Javascript.
Теперь в файл home.html вашего домашнего компонента давайте добавим наши 3D-модели, экспортированные из magicavoxel:
И это должно подготовить 3D-сцену к взаимодействию со всеми датчиками движения:
Добавление эффекта дополненной реальности
Заключительная часть этого эксперимента - добавить ощущение дополненной реальности (AR) в наше гибридное приложение на основе Javascript. Как уже объяснялось, дополненная реальность - это когда вы накладываете 3D-модели или другие объекты поверх области просмотра камеры. Так что единственное, чего не хватает, - это окна обзора камеры за нашей сценой.
Для этого мы используем плагин предварительного просмотра камеры, как описано здесь. И вот вся суть после интеграции с плагином предварительного просмотра камеры:
Нам также необходимо обеспечить прозрачность фона, чтобы превью камеры было видно на мобильном устройстве. Это очень ВАЖНО, иначе вы можете подумать, что плагин не работает. Вот файл home.scss с включенной прозрачностью css:
И вот как это будет выглядеть в итоге:
Реакция пользователей на нашу JS-игру с дополненной реальностью
Последний шаг к измерению успешности вашей концепции - это реальная проверка пользователей - в нашем случае это дети :) И ниже записаны их отзывы в реальном времени.
Было довольно ясно, что каждому из них понравилась игра, и мы получили полные очки за веселую часть. Однако сначала мне пришлось сказать им, чтобы они переместили телефон в космос, чтобы найти буквы. Очки потеряли в плане интуитивности :(
Отзывы пользователей о JS-игре с дополненной реальностью
Последние мысли
Что ж, это был захватывающий проект, и я увидел большой потенциал дополненной реальности в обучении и образовании. Детям это очень нравится, и это, безусловно, добавляет недостающий фактор удовольствия в образование, особенно в нашей однообразной системе образования.
Не стесняйтесь комментировать и делиться своими отзывами.
Загрузки
Код этого приложения доступен в github. Не стесняйтесь играть и предлагать новые функции в нем. Я буду рад распространять обновления в продакшене.
Скачать приложение для android можно здесь.
